Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Monday

How To Add Official Pin It Hover Button To Blogger

Posted By: Poketors - August 12, 2013
Pinterest is one of the best ways to share pictures from your blog by pinning it on pinterest boards listed by categories. Pinterest has its own official "Pin it" hover button which can be added to your blog/website and users can share it by clicking on "Pin it" button easily like in the below image.
How To Add Official Pin It Hover Button To Blogger

If you're not using the board or profile widget, here are the steps to add the code :

Add Official Pin It Hover Button To Blogger Google+1. Back Up Your Blogger Template :

-Go to Blogger dashboard -> "Template" and click the "Backup/Restore" button in the top right corner.
-Save the .xml file.

2. Edit your template by clicking the "Edit HTML" button. 
3. Search for the </body> Tag
4. Add the below code just above the </body> tag:
<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
5.  Save Template. 

That's it. You are done adding the "Pin it" button. You should see Pin it button appearing in the upper left corner of blog images when you hover your cursor over each image.

How to Remove the Button From Certain Images :

Two ways are there to remove the button from individual images. If you want to remove the button from an image and prevent your blog viewers from pinning the image, add the "nopin" attribute to the image.

To add the "nopin" attribute to an image in a post, compose in the HTML view of your post, and find the img src HTML markup for the image you want to "nopin". It looks like this HTML view of an image in Blogger:

Add Official Pin It Hover Button To Blogger

Add nopin="nopin" right after your image's width attribute like below:

NoPin It Hover Button To Blogger

When you save your post, the Pin It button will disappear from that image. It also won't be pinnable through the Pinmarklet.

If you want to remove the button from an image, but still let pinmarklet users pin the image, you can directly add the data-pin-no-hover="true" attribute to your image link instead. It is similar process as for the nopin attribute, here you have to enter data-pin-no-hover="true" instead.

How to Remove the Pin It Button from Header Images :

Normally it should not happen to everyone, but some of our blog readers have the Pin It button appearing on their header image. This is a peculiar instance and this you would definitely like to remove it. For this, you need to add some extra code.

You have to back up your template again. Then, find the </body> tag again, and enter this code snippet directly above the </body> tag, after your Pin It button code:
<script type="text/javascript"> 
document.getElementById("Header1_headerimg").setAttribute("nopin","nopin");
</script>
Pinterest Support

Pinterest-created buttons are used in this article and it is an official way to add Pin it button. Hence you can get support directly from Pinterest if you require. You can read the documentation and contact Pinterest support here.


Note : The hovering buttons skip images with a width or height less than 250px. Not sure whether this is intended by Pinterest and it is worth getting in touch with them if it's affecting your blog/website.

Sunday

How To Add Twitter Update Widget To Blogger / Blogspot

Posted By: Arin Dey - September 18, 2011
It would be very useful if we can display twitter updates on blogger. In this post we will provide you some steps on how to add twitter to blogger. Like other widgets you can't get a ready made Twitter widget to add in blogger. If you want to show your latest tweets updates in blogger sidebar then you need include a Twitter widget to your blog sidebar. So this widget will show most recent tweets. The default value for tweets will be 5, but if you want to show some more then you can change as well. Tweets with links and follow @username will be there so your blog readers can find out the sites links you include in your Twitter updates. This is an official widget developed by Twitter itself for all kind of websites to improve Twitter fans user experience.

How To Add Twitter Update Widget To Blogger / Blogspot

Below are the steps to add a Twitter widget to your blog:

  1. Log in to your Twitter account.
  2. Open https://twitter.com/settings/widgets/new/user. From this link you can get a twitter widget for Your blog. 
  3. Now you have a choice to check or uncheck optional items i.e. "Exclude replies" and "Auto-expand photos" according to your need.
  4. Set custom height to widget or use the default one.
  5. Select the theme and link color or leave it as it is ti take to default one.
  6. Once the setup is done, you can see your widget in the preview section.  It will look like the below image.How To Add Twitter Widget To Your Blog
  7. In case you feel the widget is perfect in preview section, click "Create widget" 
  8. Copy the code from the bottom and click save changes.
  9. Now Go to Blogger >> Layout >> Add a Gadget
  10. Add HTML/JavaScript
  11. Paste The below Code in Content Box.
1
2
<a class="twitter-timeline" href="https://twitter.com/poketors" data-widget-id="615753767774846976">Tweets by @poketors</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Save it and you are done with adding Twitter widget to your blogger blog.

Monday

How To Add Floating Social Media Sharing Buttons To Blogger

Posted By: Arin Dey - September 12, 2011
Some of our readers asked us about some widget on how to add a floating bar of social media buttons to a Blogger/Blogspot blog. So we scripted the widget, hence you don’t have to go into your template HTML to install (or remove) it. We have done it so simple, where you can only copy the whole code and paste into a HTML/Javascript gadget.
How To Add Floating Social Media Sharing Buttons To Blogger

Here in this How-to add social media sharing buttons guide we have included Facebook Share, Retweet, StumbleUpon, Digg This and Google +1 (plus one) buttons in the left bar. Each of the share button comes with a a live counter. Here depending upon the f-likes, re-tweets and other likes the counter will increase in number.

How to add the buttons

1. Login to your Blogger dashboard.
2. Go to Layout > Page Elements.
3. Now Click on Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .

5. Copy the code below and paste it inside the content box.
<!-- Floating Social Share Buttons-->
<style type="text/css">
#pageshare {position:fixed; bottom:20%; left:50px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from Poketors.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js"></script>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
</div>
<!-- End of Floating shares -->
6. After copying, save the gadget.
7. Now drag the gadget and reposition it under Blog Posts gadget.
8. Click Save arrangement button on upper right corner.

How to customize the buttons

1.Vertical alignment
You need to change the value of bottom in code line 3. That code will position the button relative to the bottom of your browser window. In case you want to fix the distance even when window is resized, specify the value in px (pixels) instead of %.

2. Horizontal alignment
Change the value of margin-left (search for the code). Now here if we enter 'negative value' which will push the button to the left of the main blog column, in case we enter 'positive value' it pushes it to the right.
So, to position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.

3. In case, replacing and removing buttons
You can replace existing buttons with your own. Each button is represented by this code:
<div class='sbutton'>
BUTTON CODE
</div>
While replacing the button, simply replace the button code with the new code. To remove the button, delete the whole div.

If you face any issue displaying your Google +1 button, despite other buttons appear successfully, try this :
  • Go to Template > Edit HTML and find this line:
<body expr:class='"loading" + data:blog.mobileClass'>
or
<body>
  • Now copy the code in step # 5 and paste it right below the line.
  • Click preview before saving.
We have done installing the widget for floating social media share buttons bar.

How To Add Related Posts Widget to Blogger / Blogspot

Posted By: Arin Dey - September 05, 2011
This post will help you to add related posts widget to your blogger posts to display links of related topics/posts below each of your blog posts. This is a nice tip for which a lot of  your site viewers will stay on your site to read some other topics too related to the present topic. This trick will generate interest to the viewers to keep reading your blog.
How To Add Related Posts Widget to Blogger

Note : Assuming you are using new Blogger interface.

Here we go with process:

1. Go to Template > Edit HTML in your Blogger Dashboard.

2. Take a back up of your existing Template before making any changes. 

3. Check the "Expand Widget Templates" box. 

4. Search for the tag.

5. Add the following code just before the tag.
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6OX758W59LlDVc6jadHazcc9QHiLCEWjAJVJYeC5eDVCbBrBi4-TwPvd1zCQWd2AS0xrfODfGi94jm2RLoG4JdvCrftumUkka7MMi-yn6yHJe7P-OZYcjnE3yazZtHuEf1gbX78_tQ2s/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>
Now search for <data:post.body/>. In some of the templates this code may look like this
<div class='post-body>
6. Now search for <data:post.body/>. In some of the templates this code may look like this
<div class='post-body>
or
<data:post.body/>
7. Add the following code just below the code you just searched for.
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
8. Now save your Template and we've done.

You can CUSTOMIZE in order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.
max-results=5           
So we have done adding a widget for related posts.

Copyright © 2010-2023 Poketors | The content of this website is copyrighted and may not be reproduced on other websites.| Email us at : admin@poketors.com.