Showing posts with label Template Tweak. Show all posts

Sunday, 17 June 2012

Tricks To Disaply Widgets In Homepage Only

My previous article, display specific widget on specific page gets positive response from readers. It enables user to work more with sidebar widget by displaying widget on different pages like item page, home page, static page etc. But today's tutorial relates to homepage widget only means this tutorial will explain you to manage widget on homepage only. By this tutorial you can hide or show widgets in homepage means if you are interested to show popular post widget or any other widget like this in homepage only then you can easily do it. So lets see how this tricks will works.

How To Display Specific Widget On Homepage

Before going through this tutorial, you should be familiar with different type of page type. Take a quick review of different page type in blogger from here.

How To Display Popular Post Widget In Homepage Only

In blogger dashboard, Go to Design / Edit HTML.
Click "Expand Widget Template".
Download full template before making any changes in it ( more).
Search Popular Posts in blogger template, then

Note:

In some cases you may find difficulty in finding Popular Posts in blogger template as it is user defined name. It may be different for your template but you can easily get it. It is a title of Popular Post widget and can be obtained on homepage. The following figure will illustrate it.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>




 <!--Some HTML Code Here -->




</b:includable>
</b:widget>

Add the red code which is given below in above code.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>



 <!--Some HTML Code Here -->



</b:if>
</b:includable>
</b:widget>

In same way you can hide or show more widget in homepage.

How To Display Blog Archive In Homepage Only

Search Blog Archive in blogger template, and then get the following code.

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>



<!--Some HTML Code Here-->



</b:includable>
</b:widget>

Add the red code which is given below in above code.

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>


<!--Some HTML Code Here-->


</b:if>
</b:includable>
</b:widget>

Friday, 4 May 2012

How To Increase Blog Traffic By Facebook Like Button

Now a days Facebook holds number one position in social media network. It has more than 900 million active users. Most of the Blog receives huge amount of traffic daily through it. You can also receives good amount of traffic through it. You can promote your blog in Facebook by adopting so many ways but here we will only discuss about like button. As previously I had shared a article to add Facebook like button in comment form. But now Today I will tell you to place Facebook like button at different sections of blog.

How To Add Facebook Like Button:-

How To Add Facebook Like Button Below The Post:-

If you don't have Facebook like page then learn to create it first from here.

Login to Blogger Dashboard.
Go to Design / Edit HTML.
Click "Expand Widget Templates"
Download the full template before making any changes in it(More info).
Search for following piece of code in template.

<data:post.body/>

Paste the following code just below it.

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggingtrick&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=segoe+ui&amp;height=80&amp;appId=200572536701215" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Finally Save the Template.

Note:-Modification In Facebook like Page Coding:-

Change bloggertrick with your Facebook like page name. As my Facebook URL is www.facebook.com/bloggertrick.

How To Add Facebook like Button Above the Post:-

If you are interested to add Facebook like button just above the Post but below the post title then place the code in Step 6 just above the <data:post.body/>.

How To Add Facebook Like Button Above the Post Title:-

Find following Piece of code in template.

<div class='post hentry'>

And place the code in Step 6 just below it.

How to Add Facebook Like Button Above the Comment Form

I have already written a article about this you can see it from here.

If any reader find difficulty in this tutorials then they may directly contact me by dropping comment below.
More article from the same author

Monday, 9 April 2012

A Complete Sharing Widget For Blogger Blog

Finally I have done with this cool widget by going through so many errors. Previously I had shared Share is Sexy Widget For Blogger Blog in Wordpress style but today I will share another Sharing Widget which is originally created by Shahbaz Malik, the author and founder of this Blog. We uses simple HTML tag and CSS properties in creating this widget so that it won't effect your page loading time. You can simply integrate this widget with your blog by adopting following procedure. So lets see how to add this widget on the blog ?

How to Add Sharing Widget To Blog:-

Login to Blogger Dashboard.
Go to Design / Edit HTML.
Click "Expand Widget Templates".
Take Backup of your blog template, it is very necessary (More info).
Find following piece of code in blogger template.

<data:post.body/>

Add the following code just below it. If you find <data:post.body/> code in more than one position then add the following code just below the <data:post.body/> on everywhere you find.

<!Widget on www.internetricks4u.blogspot.in --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #E0E0E0;width:100%;position:relative;margin-top:13px;'> </div>
<div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:#FF3030;position:relative;top:12px;'><center>If you enjoyed this article then kindly take 5 seconds to share it!!</center></div>

<table align='center' cellpadding='8' cellspacing='1' id='myshare'>

<tr>

<td>

<a target="_blank" class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0frlHXwuitAosKt5dvuBrMbDfUbV5bQFj034lLq11zUrbNOFTyIy7lAH9nvnTn1pQdENVWxafQ1ZYlNldEsm3qtPROn4e_K0t-zhtgutM0i7jvMMFyKlaCpYvPI2CooUpsTvrFnXSx_E/h120/1.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk2J40w0XxZQrhy7JeC6N2JN2ES8tpYbhd7Ik0O2KW_hopv-B1k_cZhA2LGUGR9hhch1PL1wygA1mLtEq0xFbAJkDUAdpITlouLQ0o-4CIgnQkJuKaO2ETXZnLhLZV-VwPwDO7QCPoeXs/h120/6.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPwLRzT2u9bjL41JFCmr-PX4rVPG2Zu9iUGG6kt-mFUp45x7jJP9IwhO4unGq7uhnU6eF3RMFSAUfJMTm8NaR1DIijRIOvDRxsd4jbAx9cJ4FJAgdvQDaF0FsHtShMjASFsU5Zdtcyj3o/h120/5.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiRo74YAhm9L5jP01OdGOEcoij12MLPJ323Smg5FB7mAiYJewVO53DzYzDf-Zb8XbaPMcdNC381JUQ-UkY6BoCtO3MveZgPfoF2hwjyPxbCPZrbXW3tKnAP1dUM9-2WpR-HGERRraQVFg/h120/3.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIdsJmWvvsZmih96nHgiQmkzmko4Zl1_v7O-3-qZqHH__m7DzfCoNexN3VpDQJmDOaJOWE0jRylou22NZ59kRnfd1eghULjRuQy9TxgnkL_WQyDSRAVGTdBnGtiTQ8PRd4XhljeitKxb8/h120/2.PNG'/></a></td>

<td>

<a target="_blank" class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQyd0Kc1tCYT0dqRkrFfiM5abOJ-5YPZYaaWah5_RcLriOk6w64kkLqiWfeZCZQZi53n3SZ9WzdRsLSS-9zq7PQFDjdN1eUNS-kQS0zDQFb5U4k4Egn_ae5T9IXc6lenmI-h8iDpAC-do/h120/4.PNG'/></a></td>

<td><a target="_blank" class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhThAO6cYVJxkhKdVRVjU2F7NYZyKd1y9Owbgl7MD7ldMbX60kwhefkeM2_Xb4-18tw199QQzaUZpgbAXWKsTgXlYE9KqWmTEZHnkt2kn0cvr9Cq9jqJ2v9I6GElznnROTKLvM5f3HhEkw/h120/7.PNG'/></a></td>

</tr>

</table>

</div></b:if>

Now search the following section in the template.

]]></b:skin>

Add the following CSS code just above it.

#myshare

     {width:100%px;

      height:50px;

      border:0px solid red;

      position:relative;

      }

#myshare tr td img

      {width:50px;

       height:50px;

       position:relative;

      }

Finally save your template and see the result.

If anyone find difficulty in placing the above code then comments are always open for that. If you like the above article then don't forget to subscribe it for latest updates.

More article from the same author

Wednesday, 28 March 2012

Add Meta Description To Blogger Post Individually

Blogger has now become more friendly with its new updated features. Blogger now finally introduced most awaited SEO features for Google hosted blogspot blog. Blogger team is trying to get closer to its biggest competitor Wordpress. Now you have no need to hack template for adding meta tags. You can easily add meta description, meta tag to not only for your Blog homepage but also for individual posts or static pages. So lets see learn the tutorial.

How to Add Meta Tag And Description:-

Login to Blogger Dashboard.
Go to Design / Edit HTML.
Download the full template before making any changes in it.( More Info)
Find following piece of code in blogger template.( say code 1)

<b:skin><![CDATA[

And paste following code just above it.

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Save you template.

Add Meta Description To Blog:-

Go to Settings / Search preferences, Under Meta tag / Description, click "Edit" and select "Yes" , Now write a meta description about your blog in space provide.

Add Description To Your Post:-

While writing a new post in blogger post editor then you will find a new option called "Search Description" under "Post Settings", where you can add a short description of your individual post.

Finally I want to say that if you find difficulty in adding meta description then you can drop your comment below regarding your problem.

You can also find all these information on blogger support.

More article from the same author

Monday, 26 March 2012

Change Home,Newer Post & Older Post to Page Naviagation

Finally, I have done with this cool tricks after going through so many errors. You often see a Home, Newer Post and Older Post ( How to Remove these links ? ) link at the bottom of Blog. There is no need to customising these links but if you are interested in blog designing and wants your blog to look more professional then obviously this tutorial is for you. Anyone can easily change these links to Numbered page navigation by going through this tutorial. If your blog having a large number of posts with large number of visitors then visitors on your site can reach to different posts easily. So lets to apply this tricks on the blog.

How To Change Home, Newer Post to Numbered Navigation:-

Login to Blogger Dashboard.
Go to Design / Edit HTML.
Click "Expand widget templates'.
Download full template before making any changes in it ( More info).

Find following piece of code in template.

 ]]></b:skin>

Paste the following code just above it.

<!.. Plugins By Shahbaz Malik at http://internetricks4u.blogspot.com ..>

#blog-pager-newer-link {display:none;}

#blog-pager-older-link { display:none; }

#blog-pager {display:none; }

.showpageArea a{text-decoration:none;}

.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}

.showpageNum a:hover
{border: 4px solid #cccccc;background-color:#cccccc;text-decoration:none;}

.showpagePoint
{color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}

.showpageOf
{text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a
{text-decoration:none;border: 1px solid #cccccc;padding:3px;}

.showpage a:hover
{text-decoration:none;}
.showpageNum a:link,.showpage a:link
{text-decoration:none;color:#333333;}

Find </body> in template and paste following code just above it.

<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><script type='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord ='Previous';var downPageWord ='Next'; </script> <script src='http://blogger-page-navigation.googlecode.com/files/blogger-page-navi..js' type='text/javascript'/></b:if></b:if>

Finally save the template and see the result.

Note:Make Following Modification

pagecount=5 is the number of post per page.
displayPagenum=5 additional page navigation number that will be displayed on the page.

If you find difficulty in this tutorial then comments are always open for that. More article by the same author

Wednesday, 21 March 2012

How to Remove Subscribe To Post Atom

There is a Subscribe to: Post ( Atom) or Subscribe to: Post Comments (Atoms) in homepage or item page respectively at the bottom of page of Blogger Blog. I'm sure all of you noticed that links. Most of the people are interested to remove these links as they don't want these links on the pages. So Today I am sharing a tutorial to remove these links with two methods, you can adopt any of the following method depending on your suitability.

How to Remove Subscribe to: Post Atom In Blogger Blog:-

Method 1

Method 2

Method 1:-

Login to your Blogger Dashboard.
Go to Design / Template Designer.
Click "Advanced" and choose "Add CSS".

Place following Css code in white box.

.feed-links                                                                        
{ display:none !important; }

Finally click "Apply to Blog".

Method 2:-

Login to Blogger Dashoard.
Go to Edit HTML / Design.
Click "Expand Widget Templates".
Download Full template before making any changes in it ( Learn how).
Search for following string in Blogger Template.

]]></b:skin>

Paste the following code just above it.

.feed-links { display:none !important; }

Finally save your template.

I explain this tutorial with my full effort but if anyone find difficulty in doing this process then comments are always open for that or if you like the above article then don't forget to subscribe it for latest updates. More articles from the same author