Hide or Remove Blogger Attribution Gadget - 2 Methods

There are two standard ways to remove Blogger Attribution Gadget. The First one uses simple CSS to hide the text "Powered by Blogger", the second recommended method simply deletes the Attribution Gadget from your BlogSpot layout. We will discuss both in detail today.

If you are new to Attribution Gadget, then it is the widget that blogger adds to your layout by default when you setup your blog. You can display your copyrights or credit links here. Unlike other widgets this gadget is locked by default and it has no "Remove" button that could help you remove the gadget from your layout.

1. Hide "Powered by Blogger" Attribution Gadget

Follow these steps to hide the attribution widget using CSS "display:none" property.

1. Go To Blogger > Template
2. Backup your Template
3. Click Edit HTML
4. Search for this code ]]></b:skin>
5. Paste the following code above ]]></b:skin>

   #Attribution1{height:0;visibility:hidden;display:none}

6. Save your template and you are done!

You have successfully hide the blogspot attribution credit link from your blog footer. The browser will not display or show the attribution or credit links attached to your layout but the gadget DOM will still load in background.

2. Remove 'Powered by Blogger' Attribution From Template

To permanently remove or delete the attribution gadget from your template so that it may neither load nor display on your blogspot blog, then follow the steps below:

1. Go To Blogger > Template
2. Backup your Template
3. Click Edit HTML
4. From the "Jump to widget" section click on "Attribution1"

   

5. Delete the entire widget code that looks similar to the one shown in the image below, starting from <b:widget> and ending at </b:widget>:

   

   If you expand the code, it looks similar to this one:

   <b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'>
                       <b:includable id='main'>
           <b:if cond='data:feedbackSurveyLink'>
             <div class='mobile-survey-link' style='text-align: center;'>
               <data:feedbackSurveyLink/>
             </div>
           </b:if>

           <div class='widget-content' style='text-align: center;'>
             <b:if cond='data:attribution != &quot;&quot;'>
              <data:attribution/>
             </b:if>
           </div>
           <b:include name='quickedit'/>
         </b:includable>
   </b:widget>

6. Delete and save your template. You are all done!

You have now successfully delete the blogger attribution gadget. It won't display on your blog now and neither will it eat up your page load time by rendering in background.

Need Help?

This post was requested by many of you, though there are many alternatives already online but this second method is the easiest and most effective of all. Let me know if you need any further help. Post your questions below. Your feedback means a lot. Good day! =)

Use Human Readable "Date Format" in Blog Posts

This is probably the most request posted on blogger Timestamp and Date header format. This simplest trick of converting date formats in Blogger blogs is thus first time shared online using Data Layout Tags. The date inside BlogSpot posts are displayed in the format "MM/DD/YYYY" which is a non-readable formatting for mentioning the publishing time and date of an article. If you see the date format in MBT posts (i.e. Nov 21, 2015) you will observe that the formatting is done in a more human readable and visual way where Month and Day are comma separated from Year ( i.e. Month Day, Year ). The month is written in short abbreviated way followed by day and then year. A reader gets a clear idea of when the post was published by looking at the date at a glance instead of getting confused with the Western and Asian Date formatting of "MM/DD/YYYY" and "DD/MM/YYYY" respectively. In this tutorial we will use the simple technique of replacing the Timestamp layout tag inside posts with Date Header tag. In our JSON Tutorial series we will discuss a more advanced JavaScript approach to better control the styling of each element in the date formatting.

Before:

After:

Change Blogger Date Formatting inside Blog Posts

Follow these easy steps:

1 Go to Blogger > Template > Backup your template

2 Click Edit HTML

3 Search for this layout tag

<data:post.timestamp/>

4 The above code will appear twice. Once for mobile view and once for desktop view. Replace it twice with this layout tag:

<i class='fa fa-clock-o'/><data:post.dateHeader/>

Note: The yellow highlighted code will show a clock Icon next to the date, if you don't want this FontAwesome icon then simply remove the yellow code.

5 Save your template and you are almost done!

6 Next go to Settings > Language and Formatting > Formatting

From the drop down menu next to the Date Header Format select the first option i.e. Nov 21, 2015:

You can choose any formatting of your choice, the last two options are also good. In our case we chose the format: Nov 21, 2015

7 Click the "Save Settings" button and you are all done!

Need Help?

What we did was a simple solution to the existing problems faced with Post Date formatting. In our JSON tutorial we will adopt a JavaScript technique to give more advance control over the structure of Date. With that tutorial you will be able to style Month, Day and Year elements separately using CSS classes. The current solution is the easiest way for non-techy users. I hope this helps most in better displaying the Publish Timestamp on their blog posts. Do ask me any question you may have.

Peace and blessings buddies :)

Auto Update Credits Info in Template Footer

It makes a lot of sense to always add your website name along with Copyrights Date/time in Footer credits to let your users get accustomed to your brand identity and also know that you reserve full copyrights of the content you share on your blog. A credit link consists of mostly your Trademark/benchmark name (i.e. Blog Title) and the Time interval for which you deserve full ownership of your Blog resources and of its use and distribution. When we design Blogger templates we often add Credit links or attribution links at the bottom of the blog footer to let everyone know who designed and developed the template.

In your case if you want to remind your visitors of who owns the content and resources then you can surely use the simple script shared below which will dynamically insert your Blog Title, Blog link and current Year in your blog to let everyone know of your Copyrights. After using this XHTML + JavaScript, no matter how many years may pass by, your footer credits will always show the current Copyrights Legal Date, thus preventing you from manually updating the Date each year and Blog Title each time you update the Site Title. If it is 2015 it will show � 2015 and in 2020 it will automatically get updated to � 2020. Therefore this tutorial will help you Auto Insert Copyrights Legal Date and Trademark in Blogger Footer Credits. Lets get started

Update Blogger footer Credits

1 Go To Blogger > Template > Backup your Template

2 Click Edit HTML

3 Search your Footer Credits code and replace the contents with this Simple code.

INPUT:

<a expr:href='data:blog.homepageUrl'><data:blog.title/>� </a>� <script type='text/javascript'>document.write(new Date().getFullYear());</script>, All Rights Reserved.

OUPUT:

My Blogger Tricks� � 2015, All Rights Reserved.

Things to note:

• data:blog.homepageUrl will be replaced with your Blog Homepage URL
• <data:blog.title/>� will be replaced with your Homepage title i.e. Your Trademark
• The green highlighted script will be replaced with Current new Date of the year. getFullYear() returns the year in four digits. You can learn more about it at JavaScript Date Reference
• You can replace the bold black text with any custom message you may like

4 Finally save your template!

Your Footer will now be automatically updated each time you change your blogspot blog title or when the new year arrives!

Need Help?

Let me know if you needed any help with this simple XHMTL trick that uses Blogger layout tags and some simple JavaScript. Wish you great weekend buddies. Have fun with friends and family. Peace buddies! =)

Replace Threaded comments with Google+ Comments in blogger

You might be familiar with the latest commenting system Google has introduced that integrates Google+ comments with Blogger blogs. This new commenting system is a major improvement over the default Blogger system, and it supports threaded comments. It also looks a lot better. We earlier shared a tutorial on how to enable this new Google Plus commenting system for Blogger blogs. But some people still have problems implementing it on custom templates. For them, we have compiled this short tutorial on how to effectively implement and use this new improved commenting system.

Switching to Google Plus comments

To enable Google Plus comments for your Blogger blog, you will first have to connect your account to your Google+ account. To do this, just follow these steps.

• Log into your Blogger dashboard, and choose a blog you want to connect


• Click on the Google+ button from the left sidebar


• Click on the Get Started button on the top-left side to connect your account. This will not appear if your account is already linked.


• Follow the simple instructions to connect your blog.


• Once connected, you will see an option Use Google+ comments on this blog. Checking this will enable the new Google Plus commenting system.

This will turn your Google Plus comments on for default templates. But it won't work for custom templates. For that, you will have to tweak your template source code and make some edits as instructed in the section below.

Displaying Google comments on custom templates

There are two ways to do this. You could either use the easy way, which is the Revert to default option, or you could do it the geek way, which is via the HTML editor.

The easy way

Custom templates have customized widgets that usually override the default settings. And that is why this commenting system might not work with custom templates. However, if you were to somehow remove those overrides, the commenting system would display on your blog without a hitch.



To do that, you can revert your Blog Widget to defaults in your template HTML editor via the following steps.

• From inside your blog's dashboard, click on Template from the left sidebar.


• Click on Edit HTML

(Before moving on, we'd suggest you backup your template, just in case anything goes wrong)

• Click on the Revert Widget templates to defaults button


• Now, Be careful to select Blog1 Widget from the list. Do not select any other, as it will reset other widgets to default as well.

This will solve the problem most of the times, but there's a big problem. You will lose the customization in your Blog Widget. So if you want to preserve the look of your current widget, then I'd suggest you use the alternative geek's way.

The geek's way

This isn't as geeky as it sounds. All you have to do is replace a couple lines of code with another. From inside your HTML editor, press Ctrl + F and search for "threaded_comments". You will see a chunk of code as shown below.

<b:if cond='data:blog.pageType == & quot;static_page&quot;'>
   <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
      <b:else/>
      <b:include data='post' name='comments'/>
   </b:if>
</b:if>
<b:if cond='data:blog.pageType == & quot;item&quot;'>
   <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
      <b:else/>
      <b:include data='post' name='comments'/>
   </b:if>
</b:if>

Carefully look at the bolded code, and then replace them with the following line of code.

<b:include data='post' name='comment_picker'/>

If you want to display comment count, you can simply modify the above line of code

<b:include data='post' name='comment_picker'/>

Still not working? Please feel free to mention your queries in the comments below. And please try to be as relevant as possible. Thank you :)

Install GooglePlus Comments Widget on custom Blogger Templates

Blogger recently implemented Google Plus comments on their Blogger platform, and we know that many bloggers like you have gone ahead and implemented this new functionality to your blogger blogs. But a lot of our readers have been asking us how to add Google Plus comments, or Google Plus comments API  to Blogger custom templates? This feature turns on and off smoothly for default templates. But most bloggers don't use default templates. For them, we have compiled this short tutorial on how to implement Google Plus commenting system on custom Blogger Templates.

Why enable Google Plus comments?

Google Plus comments are much more flexible, and allow you to keep track of your conversations better. They also help keep the discussions organized. Besides, readers can share their comments, or make comments on your Google Plus posts to make them appear on your blog. This expands your reach as your followers' extended circles can see your content too.

Although there's some controversy regarding the usefulness of this commenting system versus the harms (something we discussed at length in our last post), the choice is really yours. But if you do want to implement this feature on your custom Blogger templates, then here's how you can do that.

Enabling Google Plus comments

To start off, first log into your Blogger account, and click on the blog you want to add Google Plus comments to. Now, click on the Google+ option on the left sidebar. You must be the admin of a blog to be able to view this option.

Now, you need to upgrade our account, and integrate it with Google Plus if you haven't already done so. You will get a "Get Started" button if you haven't. Follow the simple instructions, and then move on to the next step.

Check the option that says Use Google+ Comments on this Blog - For default templates, this is pretty much all you need to do.

For custom templates, here's what you need to do;

• Click on the Template tab from the left sidebar, and then click on Edit HTML.


• From the code editor, press Ctrl + F, and search for 'threaded_comments'

• You should see the following lines of code

<b:if cond='data:blog.pageType == & quot;static_page&quot;'>

   <b:if cond='data:post.showThreadedComments'>

      <b:include data='post' name='threaded_comments'/>

      <b:else/>

      <b:include data='post' name='comments'/>

   </b:if>

</b:if>

<b:if cond='data:blog.pageType == & quot;item&quot;'>

   <b:if cond='data:post.showThreadedComments'>

      <b:include data='post' name='threaded_comments'/>

      <b:else/>

      <b:include data='post' name='comments'/>

   </b:if>

</b:if>

• Replace the code written in bold with the following line.

<b:include data='post' name='comment_picker'/>

Take care not to make a mistake while editing. And it would be a good idea to backup your template (Backup/Restore option at the top-right), just in case.

For comments to work on custom templates, you need to add the code as well as to enable it. You can see the demo of a custom template above for yourself. I hope this post answered all your questions. If not, please feel free to ask more questions in the comments below. Cheers :)

Add Google Plus Followers Gadget To Blogger!

One of the best perks of using Google is, it has products that seamlessly integrate with each other to provide an easy and comprehensive interface to users. For example, Google Drive can be used to attach files with emails quickly. You can +1 posts outside Google+, and share search results on Google Plus. You can even auto-publish your Blogger blog feed to your G+ profile. And that is by no means the end of it. In fact, Google just announced a brand new feature, the Google Plus Followers gadget for blogger blogs! This new Google Plus followers' gadget for blogspot blogs will provide another layer of integration between your Google Plus profile and your Blogger/Blogspot blog.

The Google Plus followers' gadget

Connecting your Google Plus profile with your blog is a great way to enhance your readership by increasing your followers and engaging better with your audience. You can auto-publish your blog posts on your Google Plus stream so as to deliver your content right where your readers want it delivered. Those readers can then recommend your content directly, which can lead to more exposure. This new Google Plus followers widget is another step towards enhancing your readership and boosting your authority.

This widget will tell the world how many people are following you, and will also show them some friendly faces (different for each person). It also has a follow button by default, which lets users follow your Google Plus profile page with a single click. This will help in getting your content across multiple streams, and to reach more readers on a more personal level through your blog.

Adding this widget to your Blogger blog is really simple. But for it to work, you first have to connect your blogger profile with your Google Plus account. We have detailed the process in a previous post, so make sure you read it first.

• How to automatically share blog updates on Google Plus

Once done, visit the Layout tab on your blogger dashboard, and select "Add a Gadget". You will then be able to see and add this widget easily to your blog.

A note from Google: For those who are using Google Friend Connect followers' widget, they can keep using it, even though Google retired most of Friend Connect services earlier this year. For the time being, it will keep running on Blogger.

Have questions in mind? Feel free to ask us. You can also refer to Google's Help Center for more information on this update. Happy blogging :)

Reposition Navigation Buttons in Blogger!

The navigation buttons or links that are displayed at the bottom of each comment section in BlogSpot blogs enable visitors to switch between new and old posts or move from one post page to another ordered by date and time. These buttons become less of use when number of comments increase too much. Normally readers do not even observe the navigation deep down and this results in loss of precious pageviews. I have always emphasized that value pageviews more than unique visitors because it is indeed pageviews that turns into revenue generating page impressions both for AdSense or any other Ad Network.  You might have seen the More, Next and Previous button showing inside the top black sticky bar on MBT homepage and post pages. It is really not possible to shift a Post data item to any other widget section in blogger. Doing such results in "Data variable not found in dictionary" error or similar.

We played a work around and used Cascading stylesheet Position properties to allocate fixed positions to these buttons anywhere on the page. This is again a unique addition to Blogger Customization and being implemented for the first time. The tutorial today will not only help you change the position of navigation links but will also teach you to install a custom sticky bar just like the one we are using on our blog. We are pretty sure you will find today's tutorial really easy yet delicious!

PS: Tested with Chrome, Firefox, IE9 & Safari.

STEP1: Adding the sticky bar

First comes first. I have already shared a detailed tutorial on adding a stickybar to blogger. Please first install a stickybar on your blogs and then try step#2 of today's tutorial.

• Read: Create a StickyBar!

Note: The style that I am using on MBT is different from that of the tutorial so if you want a similar color theme then simply copy the stylesheet from MBT source file or let me know to help you.

STEP2:

Now comes the interesting part. What we will do here is simply shifting your current Newer, Older & Home buttons to the top left of the stickybar and replace them with more fancy buttons like the one we are using.  Follow these steps:

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML and then check "Expand Widget Templates"
4. Search for the following CSS classes and delete them all: You will find three such classes or more starting with either #blog-pager or .blog-pager

#blog-pager {
------
}

#blog-pager-newer-link {
----

---

--
}

#blog-pager-older-link {
-----

---

 

--
}

 

   5.   Now after you have deleted them, add the following code in their place:

#blog-pager {
text-align:center;
}
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-320px;
top:0px;
margin-top:5px;
}

#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-290px;
top:0px;
margin-top:5px;
}

#blog-pager-more-link {
position:fixed;
z-index:9999;
margin-left:-20px;
top:0px;
margin-top:5px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-627px;
top:0px;
}

#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-597px;
top:0px;
}
}

 

What we did in step4 and step5 was simply replacing your old code with the new one.

    6.   Next search for the following chunk of code:

Note: You are only concerned with finding the two highlighted codes. The code inside them may look different for your template so just finding these two highlighted tags and then follow step7.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Previous'>&#171; Prev</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Next'>Next &#187;</a>
      </span>
    </b:if>
<span id='home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

     7.  Replace the code inside them with the following code as shown below:

<b:includable id='nextprev'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-more-link'>
      <a class='blog-pager-more-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2k9Wt-xei2ccANB-0FzccLApsqJyGdhtuINUp0_BWdrso6dVmIlwurzFG0nZdFqUgKjiJmR5weWo_DmZEXSG7WJ0NZGsWXnPze5ufoMP1TJnql1iprA8yIl4xoUXuaAGTv5ewzfDhFLLi/s400/more.png'/></a>
      </span>
      </b:if>
</b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyobSIp_yDtJ3v4NJFepWgBgR7TdiA-uv3gW5z2PJxMVWULsuviy6MvmK_daHbKFqpjuMthHdkIg-4w75N5zBRYis5VYn9G02Fm6oNt69Rt9X6Ao0R_22uvPU9DQjsb_j6h3aLUIN_eGd8/s400/Previous.png'/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhdfKZOvlPyIgVB_rSoXQpf_jDrwBp1XP9CFgGuq2OnXnygAbi2RhDILUZRofJwf3oduaWeuQUDmOLbSI5D_S27fGzxm_EeDJVGTXHt048JRqPUf8D843nfIOjCBltai_EQAyMTmgQcSgr/s400/Next.png'/></a>
      </span>
      <b:else/>
 
    </b:if>

  </div>
  <div class='clear'/> </b:if>

</b:includable>

It was that easy!

   8. All done! Visit your Blog to see it functioning just fine. :)

How it works?

Previous will display newer posts

Next will display Older posts

 More will display on homepage alone.

• Button More is responsible for displaying the next set of previously published posts. It will show a bunch of posts depending on the number of posts you allowed to be displayed on homepage.
• The other two buttons will help the visitor to navigate between next and previous page. If the visitor is on your newly published post then the Previous button will not show up and Next will show alone.

Everything is operated using conditional statements provided by XHTML 1.0.

If you are looking for read more buttons then do check our Icons and buttons category that has been downloaded over thousands of times and found on almost every Blogger blog today: Download from here

Questions?

I have one last paper on 29th Nov  after which I will be free for one month to help you all with every query you may have. The blog is being maintained by co-authors because I am not currently available. I am writing posts as soon as I get some spare time. You are most welcomed to ask any question you may have related to this post. Off-topic questions should kindly be avoided. I just hope you find this new addition useful to your overall Pageviews. Wish you more power buddies. Peace and blessings. :)

Show each Author Picture In Post Titles Dynamically

Post Contributed by Hassam Ahmad Awan, a Gold Star MBT contributor and senior co-author. You can catch him always on his blog Bloggingehow

---

Its a pleasure for me to share one of a Blogger tweak that we managed to implement on BloggingeHow.com recently that makes sure that every author's image is shown up beside their post titles, both on home and post pages. The dynamic tweak enables every individual authors in Blogger based blogs to get them selves showcased. Also as for readers, its a much satisfying thing to know the actual person behind the article. Its much easier to get your self related with the post. It will display author pics dynamically unlike the static way that Mohammad shared months ago which can be find here: Show Profile Avatars next to post titles.

 

Live Demo

 

PS: At MBT a different approach is utilized and that alternative tweak will be shared by Mohammad himself so stay tuned to that.

What the trick?

The most tricky part in implementing the dynamic feature was to align the image and the post titles in a single line and not laying down the actual code for displaying individual authors images. As every other Blogger template is different as of its coding structure, so the below tutorial might not exactly match with your template, though you would be given the idea of what sort of code to search for in order to get to that point in the code where you have to implement the Dynamic author's profile images in Blogger.

Step #1 Open Edit HTML section

1. Navigate towards your Blogger Dashboard >> Template >> Edit HTML
2. backup your template. 
3. Hit 'Expand Widget Templates' and find the following code

<h2 class='post-title entry-title'>

 

Though, note that you might not find the exact code in your template, though you can search for something similar that says 'Post Titles'. Once you find the above code, you're now on the right place to implement the dynamic author's profile tweak.

The approach?

Now, there are multiple ways through which we can show up the author's image beside post titles. For this tutorial and what we have implemented on the demo blog, we'll be using HTML Tables to wrap up the post titles in a single <td> tag and the author's image in another <td> section.

The green box indicates first <td> tag while the red box indicates another one. Now that we know what code is responsible for displaying the Post Titles, we can easily place Dynamic author's profile beside it with the help of HTML table.

Step #2 What to do?

Once you have found the above code in Step #1 you now have to mark out the entire code that shows up the post titles as mentioned below.

 

<table>

<tr> <td>

<b:if cond='data:post.author == &quot;Author #1 Exact Name&quot;'> <span style='margin-right:5px;'>

<img src='Author #1 image link' style='border:1px'/>

</span>

</b:if>

<b:if cond='data:post.author == &quot;Author #2 Exact Name&quot;'> <span style='margin-right:5px;'>

<img src='Author #2 image link' style='border:1px'/>

</span>

</b:if>

 </td>

<td style='vertical-align:middle'>    

<b:if cond='data:post.title'>     

 <h2 class='post-title entry-title'>      

<b:if cond='data:post.link'>        

<a expr:href='data:post.link'><data:post.title/></a>      

<b:else/>         <b:if cond='data:post.url'>          

<b:if cond='data:blog.url != data:post.url'>            

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h2>     </b:if>

</td> </tr>

</table>

 

The above code can be divided into 2 parts. The first section is packed into first <td> tag as mentioned before. The other one is shown in <td> color. Wrap your Post Titles code that are in your template with in the <table> <tr> <td> tags as shown above with the author's profile image/conditional tags in the first <td>. You can relate in a much better way by having a look at the image below.

How does it work?

All that table thing was to make sure that the Author's image and the Post Titles are aligned with each other. Though the actual Dynamic Pictures comes in from the below code:

 <b:if cond='data:post.author == &quot;Author #2 Exact Name&quot;'> <span style='margin-right:5px;'> <img src='Author #2 image link' style='border:1px'/> </span> </b:if>

As you would have noticed, Author #2 Exact Name that is with in the conditional tags is responsible for showing the content with in it only when the post is written by 'Author #2 Exact Name' string. So to make that work, you got to make sure that what ever name you enter, that must be the same as the actual author's Blogger's author's account name. Other wise that wont work.

Was that difficult to implement?

I know it can be tricky to find the exact code responsible for showing the Post titles, though the above explanation would have hopefully helped you out in understanding that what needs to be done. In case of any problem, simply leave out your quires below and I would love to get back to you guys as soon as I can. Salam!

For optimizing post titles don't forget to read:

• How To write Search Engine Friendly Post Title?

Move your blog from LiveJournal To Blogger

LiveJournal is a great free resource for people who want to keep a log or a diary of sorts of theirs online, or share their life experiences with their friends and family. It allows people to make posts, and then cross-post and share on their social media profiles. Hence, these journals have all the markings of a blog. But for people who started off with LiveJournal, but aren't satisfied with the limited options it has, Blogger is a great option for them. Blogger is so much more than what LiveJournal is. So if you're not satisfied with LiveJournal, you can just move your blog from LiveJournal over to Blogger and get much more functionality.

We recently published a post about transferring your blog from WordPress to Blogger. And we shall continue this series with this LiveJournal to Blogger conversion. Our dear readers have been demanding a post on conversion from Blogger to WordPress, so we will be doing that soon. Stay tuned :)

And now, back to the topic at hand.In this post, we will walk you through the conversion. We are assuming that you already have a LiveJournal account, with some content published on it, which you want to transfer.

Transferring from LiveJournal to Blogger

First of all, visit this link (liveJournal2Blogger), and log into your LiveJournal account using the form given on the page. Unlike WordPress, LiveJournal doesn't provide you with an option to export your content. So you need a third-party app to do it for you. And this app does just that for you.

You will be prompted to save a file on your computer. This is your LiveJournal in a Blogger-friendly exported format. We will use this to import data into Blogger, so keep it ready at hand. 

Importing data into Blogger

Now you have the exported file, all you need to do is import this file into Blogger. Log into, or sign up for a Blogger account, From there, either Create a new blog, or click on an existing blog where you want to publish your LiveJournal content.

Once you're logged into a blog's dashboard, Click on the Settings at the bottom of the left side-bar. From the options that pop out, click on Others. Then, on the right, you'll see an option to Import Blog.

Now, all you need to do is browse to the file you downloaded, and upload it here. Follow the simple instructions, and you have a set of posts from your LiveJournal account ready to be published!

As with the WordPress to Blogger, this conversion has a limitation of file sizes for up to 1 MB. But LiveJournal blogs are pretty small, so you shouldn't have much of a problem exporting your posts and comments. That's all there is to the conversion. You might also like to know about Blogger2WordPress.

Convert a Wordpress blog To Blogger in easy steps

Blogger is a very widely used publishing platform, mostly because its strength lies in its simplicity and ease of use. It is quite easy to use, and is recommended for beginner bloggers who are looking for a quick and easy way to create a presence for themselves online. For bloggers who have created a WordPress blog, but are at a loss to maintain or modify it, they have a great option in Blogger. They can easily migrate their WordPress blog to Blogger without any hitch. In this post, we will talk about how you can shift from WordPress to free Blogger.

Normally, such a transfer isn't easy. Data needs to be imported from WordPress first, and then imported to Blogger. Since Blogger doesn't allow any data format except its own, there needs to be a conversion process that will convert WordPress exported files. Luckily, there's just such a utility available! Here, we will guide you through the simple steps. Following them, you can convert self-hosted WordPress blogs to Blogger, as well as migrate from free WordPress to Blogspot.

Step 1: Importing from WordPress

• Log into your WordPress account (for free WordPress users), and then choose the blog you want to convert into Blogger. Alternatively, you can log into your blog's dashboard directly by adding the /wp-login.php suffix to your blog's home URL (eg yourblog.com/wp-login.php or yourblog.wordpress.com/wp-login.php)


• Navigate through your WordPress menu, and find the Tools option. When you click on it, you'll see further options, among which you will see the Export option. Click on it.

• Click on the Radio Button next to 'All Content' under the heading 'Choose what to Export'. You can select only posts, or pages, or feedbacks, but it is recommended that you select All content to ensure maximum content is transferred. Then click on Download Export File, which will let you save the exported file to your hard drive. You have completed step 1 at this point.

Step 2: Convert into Blogger format

There is a useful little app that will do this job for you. To convert, visit this app's page, and navigate to the button in the middle of the content that says 'Choose file'. Browse to the file you downloaded from WordPress, and upload it here. Then click Convert. After the conversion, you will need to save the output file. This file is in Blogger-friendly format, and will be used inside Blogger.

Step 3: Import to Blogger

• The import process into Blogger is pretty straightforward. Simply log into, or sign up for your Blogger account, and click on Create a Blog link. I'm assuming you want to create a new blog for your new content. But if you want to, you can import into an existing blog as well.


• From the Dashboard, click on Settings >> Other >> Import Blog.

• Now, all you need to do is follow the simple instructions, and upload the converted file. You will be guided through a wizard that will import data from this file into Blogger. Once done, you will see all your posts from WordPress ready to be published!

Limitations

Although this is a really cool app, it has a serious limitation. You can only upload and convert a WordPress-exported file that is less than 1 MB, which is too inconvenient, especially if you have a large blog, or even a small blog with a size-able number of posts.

If you're disappointed about this, then don't worry! Because Muhammad is working on just such a tool that will allow users to upload a much larger WordPress file to convert into Blogger format. And this tool will be made available soon, so stay tuned!

Also, about the SEO requirements, well they are a bit more technical, so we'll be covering them in more detail in a future post. So try out this cool feature, and if you like it, then stay tuned for more posts and updates on our own tool for converting WordPress blogs into Blogger.

Blogger Featured Post Widget With Thumbnails

Hi guys. Did you wanted to have a featured post section in your Blogger blogs? You would have probably noticed that featured sections in the WordPress blogs quite often. People normally use this section to contain their top performing posts, so that they get a further boost up by those extra impressions. As many people tend to read the featured posts, this widget works quite well.

So lets see what we are going to achieve. The widget is placed at the bottom of the test blog.

Live Demo

The widget can also be seen at the bottom of MBT where you would find some really useful resources. So lets get started and add it to our blog.

Step 1: Adding The Main Code

Go to Design >> Add a Gadget >> HTML/JavaScript. Now simply add the following code in that widget:

<div id='mbtboxes'>

<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>



<ul>

<li>

<div class='mbtbody'>

<a class='Fadein3' href='POST 1 LINK'>

<img height='100' src='POST 1 IMG LINK' width='170'/>

</a>

<div class='clear'></div>

<h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3>

<p>POST 1 PARAGRAPH</p>

</div>

</li>

<li>

<div class='mbtbody'>

<a class='Fadein3' href='POST 2 LINK'>

<img height='100' src='POST 2 IMG LINK' width='170'/>



</a>

<div class='clear'></div>

<h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3>

<p>POST 2 PARAGRAPH </p>

</div>

</li>

<li>

<div class='mbtbody'>

<a class='Fadein3' href='POST 3 LINK'>

<img height='100' src='POST 3 IMG LINK' width='170'/>

</a>

<div class='clear'></div>

<h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3>

<p>POST 3 PARAGRAPH</p>



</div>

</li>

<li>

<div class='mbtbody'>

<a class='Fadein3' href='POST 4 LINK' rel='nofollow'>

<img height='100' src='POST 4 IMG LINK' width='170'/>

</a>

<div class='clear'></div>

<h3><a href='POST 4 LINK' rel='nofollow'>POST 4 DESCRIPTION</a></h3>

<p>POST 4 PARAGRAPH</p>

</div>

</li>

<li>

<div class='mbtbody'>

<a class='Fadein3' href='POST 5 LINK'>



<img height='100' src='POST 5 IMG LINK ' width='170'/>

</a>

<div class='clear'></div>

<h3><a href='POST 5 LINK'>POST 5 DESCRIPTION</a></h3>

<p>POST 5 PARAGRAPH</p>

</div>

</li>

</ul>

</div>

</div>

Add Your Own Links

The widget contains 5 featured posts. So your have to configure all those posts links, images for each posts, their description and a small paragraph related to that article.



I have separated all those 5 posts areas with different colors. Note that description is the main heading for the post. So don't confuse it with a small paragraph of few lines. Check the demo if you haven't.



Post 1 | Post 2 | Post 3 | Post 4 | Post 5

Step 2: Adding CSS

Now go to Design >> Edit HTML and tick the check box. And don't forget to download your template for backup purposes.



Now search for the following code by (Ctrl + F):

]]></b:skin>

Now just above this code, add the following code:

/*----------- MBT Gallery -----------------*/



#mbtboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}

#mbtboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }

#mbtboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }

#mbtboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }

#mbtboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}

#mbtboxes img:hover{border: 1px solid #c5c5c5; }

.mbtbody img{float:left}

.mbtbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}

.mbtbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}

.mbtbody h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}

.mbtbody h3 a:hover{color:#c5c5c5}

.mbtbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}

.Fadein3 img {

filter:alpha(opacity=80);

opacity: 0.8;

border:0;

}

.Fadein3:hover img {

filter:alpha(opacity=100);

opacity: 1.0;

border:0;

}

Now simply save your template and would be all done.



NOTE: The images that you would link to the widget, should be 170px width and 100px in height. You may like to read :



Create Blogger Backup For Images And Get Image URLs

Customization:

Say if you want to match the widget with your colored template. You can easily do that by changing the background color code that i have made bold the coded above.



background: Your Color Code;



Or you could add a border to the widget by using 1 or 2 at most instead of value 0.

border:0px

Thats all. Hope that was useful and exciting. Waiting for your feed back.

Cheers!

---

Guest Post by Hassam Ahmad Awan. MBT's Gold Star Guest Author.

Replace Blogger Profile with Google+ Profile

Finally Google+ now jumped to Blogger. Blogger team announced yesterday that now you can Use your public Google+ profile on all your existing BlogSpot blogs. Upon switching your default Blogger profile will be replaced with Google+ profile and all your posts, comments and Author profile widget will be redirected to your Google Plus profile. Your blog pseudonym will be replaced with your common name. Your blog photo and info will be replaced with that in Google plus. This option works at present with Blogger in draft and after few weeks it will work on blogger.com too.

 

The three main features that this shifting offers are:

• You will get access to upcoming Google+ features on Blogger
• your social connections (friends) will see your posts in their Google search results page with an annotation that tells them that you've shared the post. Thus increasing your blog traffic! See below:

• Most importantly it would give you one Unique identity. All your Google Accounts will now use one common name. Your Common is the nickname that you chose on Google+.

Important Notes

However this shift may seem exciting but you need to first note these important points:

• Upon switching to your Google+ profile,you will have only 30 days to revert back to your old blogger profile. After the time limit is crossed, your Blogger profile data will be deleted permanently.
• Information on your Blogger profile won't be transferred to your Google+ profile, so you must manually copy your blogger profile data to Google+ before making the automatic switch.

After having read all the pros and cons lets now make the move!

Change Blogger Profile To Google+

1. Click this link: Switch to Google+ profile
2. Read the instructions carefully, agree to the terms and hit the "Switch Now" button
3. Done!

Try this new change after you have backed up your blogger profile data and see if you like it. If things were not delightful then simply revert back. Make sure you revert back within a month. I hope this latest news may be interesting for most of you. :)

Add nRelate Below Every Blogger Post Pages�Walk Through

Yesterday i posted a comparison between nRelate and LinkWithin related post widgets. Today we will be looking into few easy steps by which we can add this cool plugin to our Blogger blogs by following these few steps.



As i mentioned yesterday, that you can install the plugin without registering to nRelate website, but the draw back would be that you wont  be able to customize the widget as per your liking. So follow the steps below including registration.

Step 1: Register for nRelate Partner Login (Free)

Go to nRelate website and click Partner Login as shown in the picture below.

 Step 2: Installation Time!

Now hover over Install button and click Blogger. A field would appear where you have to provide you blog link where you want to add nRelate widget. Then click submit.

1. Now click Advance version (to be able to edit the plugin later)



2. Now it would ask you whether you want to add it to your post pages only or on main blog page too. So people normally only use the related post widgets on post pages only, so thats recommended for you to do so as well.



Finally it would open up a widget called Add page element. There are 2 sections. Enlarge the section that says Edit Content as shown below.

You have to delete the code in orange as shown below.

<style type="text/css">@import url(http://static.nrelate.com/common_b/0.01.0/nrelate-panels-default.min.css);</style>

<div id='nrelate_related_placeholder'/></div>

So now your finaly code would be:

<style type="text/css">@import url(http://static.nrelate.com/common_b/0.01.0/nrelate-panels-default.min.css);</style></div>

 Step 3: Save The Widget

Click Add Widget button and its all done. :) Hope that was easy to follow.

Customization Time! (Optional)

Now see, you can play with couple of settings from nRelate website. As you apply the change there, the plugin would automaticly be updated on your blog. For customization, go to Manage Tab button (after login) >> Blogger and follow up there. When you are done playing with the settings, dont forget to click save below the very page.



Enjoy the new great plugin guys.



Cheers..



NOTE: Do not copy the codes provided here in the posts as they are only for reference purpose to explain the process. Get the widget from the website as it would be used for future customizations.

---

Guest Post by Hassam Ahmad Awan. MBT's Gold Star Guest Author.

4 Reasons Why I Would Recommend Moving To nRelate From LinkWithin Plugin

 Internal linking is extremely important for the sake of better SEO and for easy navigation. Many people use LinkWithin for this purpose. If you're wondering, what LinkWithin does, its basically a plugin which publishers can use on their blogs/websites which shows related posts for every individual posts that we have. Earlier i mentioned simple steps by which we can add this plugin to our blogs.



But guys the point is a bit different this time. LinkWithin is more famous than nRelate but here is the deal. nRelate does exactly what LinkWithin is capable of, but.. it offers a lot more in fact. Yesterday i got an email from nRelate asking to give a try to their plugin. I had no plan to place it above the popular plugin, LinkWithin. But believe me, after going through the details i found it better.



nRelate (Related post widget) is available for WordPress, Blogger and Tumbler at present.

Why nRelate is better than LinkWithin?

1. You can customize your nRelate related post widget to set the color scheme of your blog.



2. nRelate allows to choose between the Thumbnail related post, or simply the links of the articles that match the current post.



3. You can join nRelate ads program (that is free to join).



4. You need to register in order to get the controls for customizing the plugin. Or you can simply apply the widget directly to your blog, but in that case you wont be able to customize the app.



I have also heard that LinkWithin redirects first to their website and then takes back, taking the hard earned page rank juice to their site. Thats not fair! Any ways guys, nRelate has much to offer and i would definitely recommend it over LinkWithin plugin.



Have a look at eRelate and decide it for your self. Comment below about your experience with the new related post widget from nRelate. We would love to hear.



Cheers..

---

Guest Post by Hassam Ahmad Awan. MBT's Gold Star Guest Author.