Home
Blogger

How to Add YouTube and Twitter Follower Widget in BlogSpot?

Do you want to Add YouTube Subscriber and twitter Follower Widget at the end of your Blog Post? They use this amazing widget for increasing your YouTube subscriber and Twitter follower.
Blogger widget

In most of the Blogger template design contain various widget integration areas. Where you can easily add or integrate any widget by picking up any default and third party widget. But some places within your Blog Post remain unused. So we can utilize those places by adding widget.

You will able to place widget in your Blog header, sidebar, and footer but inside Blog post you have to go within a manual process. So in this tutorial I will show you about adding YouTube Subscriber and twitter Follower Widget at the end of your Blog Post. 

You may think why at the end of Blog post? This is because end of Blog post always remains unused and by adding simple useful widget we can give a push to Blog readers to subscribe or follow.

We add Facebook widget in Blogger sidebar or footer but for saving space end of Blog Post is perfect for us. In addition it won’t affect your Blog while load landing page.


Our main aims to save space within Blogger template’s area; as a result we will place this widget below of your Blog content thus it will able to visible on every Blog pages except Blog home page. In addition we are going to place YouTube subscriber widget and Twitter Follower Widget together thus you can increase subscriber and follower within shortest period of time.

twitter follower

No more talk lets proceed to place this widget at the end of your Blog’s posts. Just go through it.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML->

Step 3 Now Find the <data:post.body/> By Pressing Ctrl+F (Windows) or CMD+F (Mac)  

Note that You will find <data:post.body/> 3/4 times go for second one. If doesn’t work then use third one.

Step 4 Now Copy below code and Paste it below /after <data:post.body/>

  
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='margin:5px 0px 65px 0px; padding:10px; float:none; width:100%;'><div style='margin:0px 0px 0px 0px; padding:0px; float:left; width:45%; border-right:1px solid #ddd;'><!—YouTube subscriber button by www.bloggerspice.com start -->          
<script src='https://apis.google.com/js/platform.js'/><div class='g-ytsubscribe' data-channel='Channel Name' data-count='default' data-layout='full'/>
</div>
<div style='margin:10px 30px 0px 0px; padding:0px; float:right; width:45%;'>
<a class='twitter-follow-button' data-show-count='false' data-size='large' href='https://twitter.com/Twitter ID'>Follow @BloggerSpice</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
</div></div></b:if>

Customization


  • Replace Channel Name with your YouTube channel name
  • And alter Twitter ID with your Blog’s Twitter user ID.
Step 5 Finally exit from there by clicking on Save template button.                                                                             
In this widget code I have added a conditional tag and this will help to display the widget only your Blog Post pages. So you don’t have to worry, because you may think the widget will also display on Blog Home page. But no chance to display this widget in Blog homepage. 

Please check your Blog Post now and see the widget is showing, and I hope this will help to increase your YouTube subscriber and Twitter follower. 

7 comments

  1. vai, second or third a paste korle sava na hoye ei error message ase keno?
    Error parsing XML, line 2915, column 233: The content of elements must consist of well-formed character data or markup.
    • Then please add the code within below code-

      <div class='post-footer'>

      Paste the code here

      </div>
  2. vai, apni nicher photo er moto post lekhar majhe banan kivabe?
    http://2.bp.blogspot.com/-K9bDFpl0-Lc/VoN7VhECh7I/AAAAAAAAAF0/w2OBvDy_6K0/s1600/untitled.jpg
    • Please follow the tutorials from below link-

      http://www.bloggerspice.com/2014/12/add-notice-and-note-text-highlight-widget-inside-blog-post.html

      http://www.bloggerspice.com/2015/03/how-to-add-notice-widget-for-text-highlighting-in-your-Blogger-template.html

      Thank You.. :-bd
  3. Thank you very much.
  4. vai, div class='post-footer' and </div er moddhe code paste kore dekheci tateo error message dekhay.apni ki ektu kore dite parben?
    • Vai tahole apni script ta encode kore nen...nicer URL visit koron r code paste kore encode kore nen.

      http://www.bloggerspice.com/p/html-encoder.html

      Hopefully ekhon kaj hobe.
Go Up