Share your blog in popular social networking/bookmarking sites is very important to get good traffic and I think this is the easiest way for increase our blog/website traffic. This is indeed the most beautiful Social Network Navbar share widget featuring the top Social Network sites (Google Plus, Twitter and Facebook ). In this tutorial we'll create Navbar Sharing button for your blog. With the 'Sharethis' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. Share This is a very popular service offering multiple Social Bookmarking Widgets for blogs and websites.i have a Blogger Tips show you how to add the new Share This Navbar Buttons to various position on your blog. You can see the buttons in question to the end of this Article and that position will be one of the options for your blog. In this part I going to show you Navbar Sharing buttons Horizontcally Align at the Top of your blog. For Navbar Sharing we have three steps to add this on our blog so we make a video tutorial for this Tip.
ShareThis Tool Tutorials
Part 4: How To Add Share This Heart Style Sharing.
Note:- Always Make a Backup of Your Template Before You Edit Your Template –( how to make a template backup)1. Go To Your Blogger Dashboard>> Template>> Proceed.
2. Press CTRL+F and find the following Code in you template. (how to find code using search bar)
</head>
3. Paste the below code before/above </head> (Before Closing head section) <script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
4. Next Find the following piece of code.]]></b:skin>
5. and paste the following before/above ]]></b:skin> (before closing Css Section).stpulldown-gradient
{
background: #E1E1E1;
background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */
color: #636363;
}
#stpulldown .stpulldown-logo
{
height: 40px;
width: 300px;
margin-left: 20px;
margin-top: 5px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_H805ylDwtvbSfY5oOvyhJFTHx9lnacAa5UIOyixn4E8nc3rWgHbHUypncMlM_OjaBGKRgphrYY0yQCFgf8SvlB3Z30EGDFErwGKu89mkopk7lvSDsp6OEp4XP0Nsxp4iuDeRgTqb7yFa/s1600/Graphic1.png") no-repeat;
}
Note:- Change the highlighted link with your own logo like our logo. Your Size must be…. 300 X 40 PX.
6. Find the following piece of code.
</body>
and paste the following before/above</body> (before closing Body Tag)<script type="text/javascript">stLight.options({publisher: "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6"});</script>
<script>
var options={ "publisher": "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6", "scrollpx": 50, "ad": { "visible": false}, "chicklets": { "items": ["sharethis", "facebook", "twitter", "linkedin", "googleplus", "pinterest", "stumbleupon", "technorati", "delicious", "digg", "reddit", "email"]}};
var st_pulldown_widget = new sharethis.widgets.pulldownbar(options);
</script>
and I am also making video for this sharing tool if you want to add more sharing buttons so see video tutorial and make your navbar sharing with your choice. Need Help…!
I just hope this little object may help in adding a new spice to your blog's appearance. If you have any problems installing the widget, just post me a query.This plugin would work just fine if all the above steps are carefully followed. The steps are extremely easy to try. I just hope you find it worth using. If you ran into any technical problem just feel confident to leave your comments. I would love to help you out. Thanks for reading our post Wishing you all the best and blessing.
"Be the first to express your thoughts"
Post a Comment
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.