// API callback
related_results_labels_thumbs({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243"},"updated":{"$t":"2014-10-19T07:54:12.616-07:00"},"category":[{"term":"how to"},{"term":"Blog Design"},{"term":"Widgets"},{"term":"css"},{"term":"posts"},{"term":"Comments"},{"term":"jQuery"},{"term":"SEO"},{"term":"Image Effects"},{"term":"adsense"},{"term":"social media"},{"term":"Navigation"},{"term":"menus"},{"term":"adsense optimization"},{"term":"social media plugins"},{"term":"Facebook"},{"term":"blogger posts"},{"term":"popular posts"},{"term":"adsense tips"},{"term":"blogger pages"},{"term":"javascript"},{"term":"threaded comments"},{"term":"navigation menu"},{"term":"recent posts"},{"term":"blogger"},{"term":"google plus"},{"term":"recent comments"},{"term":"related posts"},{"term":"slideshows"},{"term":"tools"},{"term":"Templates"},{"term":"custom domain"},{"term":"emoticons"},{"term":"labels"},{"term":"sitemap"},{"term":"static pages"},{"term":"RSS"},{"term":"feedburner"},{"term":"firebug"},{"term":"robots"}],"title":{"type":"text","$t":"Helplogger"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/Widgets?alt=json-in-script\u0026max-results=5"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/search\/label\/Widgets"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/Widgets\/-\/Widgets?alt=json-in-script\u0026start-index=6\u0026max-results=5"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"60"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"5"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-510798521604977025"},"published":{"$t":"2014-08-27T19:46:00.001-07:00"},"updated":{"$t":"2014-09-03T13:44:58.251-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Comments"},{"scheme":"http://www.blogger.com/atom/ns#","term":"popular posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"How to Display Most Commented Posts in Blogger"},"content":{"type":"html","$t":"One of the best gadgets for your Blogger blog is a popular posts widget for your sidebar. This lets visitors see what your trending posts are right now and encourages them to click on them to read them. This basic widget is just a little too basic, however, for the modern day website visitor. Not only do they want to see your trending posts, but they also want to join the discussions that are happening on your blog. To do that, you'll need a most commented posts widget for Blogger.\u003Cbr \/\u003E\u003Cbr \/\u003EHaving a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you're going to need a few specific things to help you out.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-uMvlyr1Fwf0\/U_6PnTNyShI\/AAAAAAAAKUs\/3uxLmXUwvhg\/s1600\/most-commented-posts-widget-for-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"most commented posts widget\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-uMvlyr1Fwf0\/U_6PnTNyShI\/AAAAAAAAKUs\/3uxLmXUwvhg\/s1600\/most-commented-posts-widget-for-blogger.png\" height=\"254\" title=\"Get a Most Commented Posts Widget For Blogger\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: center;\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/helplogger-demo-blog2.blogspot.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EHere's What You're Going To Get\u003C\/h3\u003EThere are certain aspects in the design of a most commented posts widget that you should expect. That's why you'll find these specific components with this custom widget:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cstyle\u003E.post-body ul li { list-style-type: disc; margin: 0px 20px 0px 40px; } \u003C\/style\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EOrdered by popularity.\u003C\/b\u003E The posts that have the most comments are the most likely to have visitors want to read the post and join in with the conversation. By ordering your posts based on the popularity of them, you'll give each visitor the chance to see what the hype really is about! This lets you have a charted graphic that gives a visitor easy recognition, but also allows you to keep it straight and aligned if you're looking for a cleaner look. \u003C\/li\u003E\u003C\/ul\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EGraphic incorporation.\u003C\/b\u003E Blog posts that have at least one graphic incorporated with them will receive 100% more traffic than posts that have no images at all. For every graphic that you include with a blog post, the more likely you are to get a click! The same is true with your most commented posts widget, so be sure to incorporate graphics that stand out with your design. \u003C\/li\u003E\u003C\/ul\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EDescriptions that blend in.\u003C\/b\u003E The internet today revolves around the value that you can provide each individual user. People don't just click on things because they look visually tempting. They click on them because they promise a level of value that another website like yours isn't able to provide. By having descriptions that blend in, you'll be able to enhance the perceived value that your site can provide. This leads to more clicks!\u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003ERelated: \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/add-multi-colored-popular-posts-to.html\" style=\"color: blue;\" target=\"_blank\"\u003EAdd Multi-Colored Popular Posts to Blogger\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EAdd the Most Commented Posts Widget to Blogger\u003C\/h2\u003E\u003Cb\u003EStep 1.\u003C\/b\u003E Log in to your \u003Ca href=\"https:\/\/www.blogger.com\/home\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger account\u003C\/a\u003E and go to Template, press the \"Edit HTML\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EStep 2.\u003C\/b\u003E Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type the following tag inside it and hit Enter to find it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/Group\u0026gt;\u003C\/blockquote\u003E\u003Cb\u003EStep 3.\u003C\/b\u003E Just below \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/Group\u0026gt;\u003C\/span\u003E, add this code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;Group description=\"Most Commented\" selector=\".most-commented\"\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background1\" description=\"background color1\" type=\"color\" default=\"#fa4242\" value=\"#ee377a\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background2\" description=\"background color2\" type=\"color\" default=\"#ee6107\" value=\"#fcad37\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background3\" description=\"background color3\" type=\"color\" default=\"#f0f\" value=\"#f8e000\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background4\" description=\"background color4\" type=\"color\" default=\"#ff0\" value=\"#c7e93d\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;Variable name=\"most.commented.background5\" description=\"background color5\" type=\"color\" default=\"#0ff\" value=\"#5ebded\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/Group\u0026gt; \u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-i0vbvq6PEvg\/U_6Jt4UbCuI\/AAAAAAAAKUc\/rFhQdhYvbu4\/s1600\/add-css-to-blogger-template-html.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"add code to blogger html\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-i0vbvq6PEvg\/U_6Jt4UbCuI\/AAAAAAAAKUc\/rFhQdhYvbu4\/s1600\/add-css-to-blogger-template-html.png\" height=\"312\" title=\"Get a Most Commented Posts Widget For Blogger 1\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003ENote: if you can't find the \u0026lt;\/Group\u0026gt; tag, try to find the following tag instead and add the variables just below it:\u003Cbr \/\u003E\u003Cblockquote\u003E\u0026lt;b:skin\u0026gt;\u0026lt;![CDATA[\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003EStep 4.\u003C\/b\u003E Now search for the following tag (CTRL + F):\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\u003Cb\u003EStep 5.\u003C\/b\u003E And just above it, add this CSS code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.comment-count {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 3px 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: #fff;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #000;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; float: right;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented ul {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 0px !important;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-family: Century Gothic, sans-serif;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented ul li {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; list-style-type: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; padding: 10px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #555;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin-top: -10px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented ul li a {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; color: #444;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-weight: bold;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; text-decoration: none;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; font-size: 11px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented ul li img {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; float: left;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; margin: 0px 5px 0px 0px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 60px;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; height: 60px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(3n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background1);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 100%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(4n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background2);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 95%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(5n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background3);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 90%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(6n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background4);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 85%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E.most-commented:nth-child(7n+0) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; background: $(most.commented.background5);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; width: 80%;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cb\u003EStep 6.\u003C\/b\u003E Save the template.\u003Cbr \/\u003E\u003Cbr \/\u003ENow, let's add the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the \"Layout\" section of your Blogger dashboard and click on the \"Add a gadget\" link on the right side. From the pop-up window, scroll down the list and select the \"HTML\/JavaScript\" gadget:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-Zc2SWHxGoro\/UxKtggDDdoI\/AAAAAAAAGYw\/HGTfkT8XV6c\/s1600\/add-a-gadget-or-page-element-html-javascript-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger html javascript gadget\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-Zc2SWHxGoro\/UxKtggDDdoI\/AAAAAAAAGYw\/HGTfkT8XV6c\/s1600\/add-a-gadget-or-page-element-html-javascript-blogger.png\" height=\"308\" title=\"Get a Most Commented Posts Widget For Blogger 2\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ECopy and paste this script inside the content box:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003Efunction stripTags(s,n) {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; return s.replace(\/\u0026lt;.*?\u0026gt;\/ig,\"\").split(\/\\s+\/).slice(0,n-1).join(\" \")\u003Cbr \/\u003E}\u003Cbr \/\u003Efunction mostcommented(feed) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var i;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; for (i = 0; i \u0026lt; feed.count ; i++) {\u003Cbr \/\u003Evar postURL = \"'\" + feed.value.items[i].link + \"'\";\u003Cbr \/\u003Evar postTitle = feed.value.items[i].title;\u003Cbr \/\u003Evar postthumbnail = \"\u0026lt;img src=\"+feed.value.items[i].postthumbnail+\" \/\u0026gt;\";\u003Cbr \/\u003Evar postDescription = feed.value.items[i].postdescription;\u003Cbr \/\u003Evar postComments = feed.value.items[i].commentcount;\u003Cbr \/\u003Evar postList = '\u0026lt;div class=\"most-commented\"\u0026gt;\u0026lt;ul\u0026gt;\u0026lt;li\u0026gt;\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \"\u0026lt;\/div\u0026gt;\" + postthumbnail + \"\u0026lt;a href=\"+ postURL + '\"\u0026gt;' + postTitle + \"\u0026lt;\/a\u0026gt;\"\u0026nbsp; + '\u0026lt;p\u0026gt;' +stripTags(postDescription,\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E10\u003C\/b\u003E\u003C\/span\u003E)+'...\u0026lt;\/p\u0026gt;' + '\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;';\u003Cbr \/\u003E\u0026nbsp;document.write(postList);\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp;}\u003Cbr \/\u003E\u0026nbsp;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/pipes.yahoo.com\/pipes\/pipe.run?\u003Cbr \/\u003EAddUrlHere=\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u0026amp;NumberofPosts=5\u003Cbr \/\u003E\u0026amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c\u003Cbr \/\u003E\u0026amp;_callback=mostcommented\u003Cbr \/\u003E\u0026amp;_render=json\"\u003Cbr \/\u003Etype=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;span style=\"font-size: 80%; float:left;\"\u0026gt;\u0026lt;a href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html\"\u0026gt;Add this widget\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003C\/blockquote\u003EHere, change \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E with your blog URL. If you want to add more characters to the description, modify the \"\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E10\u003C\/b\u003E\u003C\/span\u003E\" value in red from \"postDescription,\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E10\u003C\/b\u003E\u003C\/span\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003EIf you want a more simple look (without the thumbnails and post snippets), add this script instead:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003Efunction stripTags(s,n)\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; {\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; return s.replace(\/\u0026lt;.*?\u0026gt;\/ig,\"\").split(\/\\s+\/).slice(0,n-1).join(\" \")\u003Cbr \/\u003E}\u003Cbr \/\u003Efunction mostcommented(feed) {\u003Cbr \/\u003E\u0026nbsp;var i;\u003Cbr \/\u003E\u0026nbsp;for (i = 0; i \u0026lt; feed.count ; i++)\u003Cbr \/\u003E\u0026nbsp;{\u003Cbr \/\u003Evar postURL = \"'\" + feed.value.items[i].link + \"'\";\u003Cbr \/\u003Evar postTitle = feed.value.items[i].title;\u003Cbr \/\u003Evar postComments = feed.value.items[i].commentcount;\u003Cbr \/\u003Evar postList = '\u0026lt;div class=\"most-commented\"\u0026gt;\u0026lt;ul\u0026gt;\u0026lt;li style=\"margin-bottom: 10px\"\u0026gt;\u003Cspan style=\"color: #cc0000;\"\u003E\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \"\u0026lt;\/div\u0026gt;\"\u003C\/span\u003E + \"\u0026lt;a href=\"+ postURL + '\"\u0026gt;' + postTitle + \"\u0026lt;\/a\u0026gt;\"\u0026nbsp; + '\u0026lt;\/li\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;';\u003Cbr \/\u003E\u0026nbsp;document.write(postList);\u003Cbr \/\u003E\u0026nbsp;}\u003Cbr \/\u003E\u0026nbsp;}\u003Cbr \/\u003E\u0026nbsp;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/pipes.yahoo.com\/pipes\/pipe.run?\u003Cbr \/\u003E\u0026nbsp;AddUrlHere=\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u0026amp;NumberofPosts=5\u003Cbr \/\u003E\u0026amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c\u003Cbr \/\u003E\u0026amp;_callback=mostcommented\u003Cbr \/\u003E\u0026amp;_render=json\"\u003Cbr \/\u003Etype=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;span style=\"font-size: 80%; float:left;\"\u0026gt;\u0026lt;a href=\"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html\"\u0026gt;Add this widget\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u003C\/blockquote\u003E.... and replace \u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/b\u003E\u003C\/span\u003E with your address.\u003Cbr \/\u003ETo add the \"comments\" text after the comments number, replace the line in red:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \"\u0026lt;\/div\u0026gt;\"\u003C\/blockquote\u003Ewith:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class=\"comment-count\"\u0026gt;' + postComments + \" comments\" + \"\u0026lt;\/div\u0026gt;\" \u003C\/blockquote\u003EOnce you have finished adding your own settings, press the \"Save\" button to enable the gadget in the sidebar of your blog. That's it! \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-cjBpQNPMQ60\/U_6G0isVF-I\/AAAAAAAAKUQ\/oqaazvKqA6U\/s1600\/add-blogger-gadget.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"configure html javascript gadget\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-cjBpQNPMQ60\/U_6G0isVF-I\/AAAAAAAAKUQ\/oqaazvKqA6U\/s1600\/add-blogger-gadget.png\" height=\"316\" title=\"Get a Most Commented Posts Widget For Blogger 3\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003ETo change the background colors of the most commented posts, go to \"Template\" \u0026gt; hit the \"Customize\" button and navigate to \"Advanced\" \u0026gt; \"Most Commented\" tab. Here you can pick 5 different colors by clicking on the color boxes: \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-4V_1aaQJEXo\/U_6DhzitBoI\/AAAAAAAAKUE\/Q2ajaX16Iek\/s1600\/most-commented-posts-blogger-widget.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template designer\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-4V_1aaQJEXo\/U_6DhzitBoI\/AAAAAAAAKUE\/Q2ajaX16Iek\/s1600\/most-commented-posts-blogger-widget.png\" height=\"312\" title=\"Get a Most Commented Posts Widget For Blogger 4\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EOnce you've selected your favorite color scheme, click the \"Apply to blog\" button to save the changes... and you're done.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EWhy Use the Most Commented Posts widget?\u003C\/h3\u003EThe basic psychology in every human is that they want to feel like they belong to a community. That's exactly what this customized widget will bring to your site. No matter what content drew a visitor to see your content, this widget will invite them to join the lively parts of your piece of the internet. This helps to build relationships, with you and with other visitors, and this relationship-building engagement is what you need to start having real value.\u003Cbr \/\u003E\u003Cbr \/\u003ETake the time to install this most commented posts widget on your site and you'll see for yourself why this is one of the most useful widgets that is available right now. Enjoy ;)"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/510798521604977025\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/510798521604977025"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/510798521604977025"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/08\/most-commented-posts-blogger-widget.html","title":"How to Display Most Commented Posts in Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-uMvlyr1Fwf0\/U_6PnTNyShI\/AAAAAAAAKUs\/3uxLmXUwvhg\/s72-c\/most-commented-posts-widget-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5763822407922202928"},"published":{"$t":"2014-04-03T14:39:00.002-07:00"},"updated":{"$t":"2014-08-05T11:24:38.270-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"How to Add Numbered Page Navigation Widget for Blogger"},"content":{"type":"html","$t":"In Blogger, we have the option to set the number of posts we want to display per page by going to the \u003Cb\u003ESettings\u003C\/b\u003E menu \u0026gt; \u003Cb\u003EPosts and comments\u003C\/b\u003E \u0026gt; \u003Cb\u003EShow at most\u003C\/b\u003E ? \u003Cb\u003Eposts\u003C\/b\u003E. Once the number of total posts in our blog exceeds this number, we will see \"Older Posts\" and \"Newer Posts\" navigation links in our home page and archive pages footer as Blogger doesn't have any built-in function on page numbering. But page numbers instead of older and newer posts links could help our blog visitors to navigate quicker (jump from one page to another page or click on a specific page) and know the total number of posts published. Here's a tutorial on how to add numbered page navigation using Javascript to a Blogger\/ blogspot blog. You can select any one of the 7 different styles that I have mentioned below.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-eIdlXeuX4U0\/Uz3SnggwCJI\/AAAAAAAAHbM\/Naf8vULtqNQ\/s1600\/numbered-page-navigation-javascript-widget-for-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"numbered page navigation widget \" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-eIdlXeuX4U0\/Uz3SnggwCJI\/AAAAAAAAHbM\/Naf8vULtqNQ\/s1600\/numbered-page-navigation-javascript-widget-for-blogger.png\" height=\"228\" title=\"How to Add Numbered Page Navigation Widget for Blogger 1\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch2\u003EAdding Numbered Page Navigation to Blogger\u003C\/h2\u003EYou can add this widget in just two steps.\u003Cbr \/\u003E1. Adding The CSS.\u003Cbr \/\u003E2. Adding The Script.\u003Cbr \/\u003E\u003Cbr \/\u003ENow let's see how to add the CSS style for page navigation.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003E1. Adding The CSS\u003C\/h3\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1. \u003C\/span\u003E\u003C\/b\u003EGo to \u003Ca href=\"http:\/\/blogger.com\/\" rel=\"nofollow\"\u003EBlogger Dashboard\u003C\/a\u003E \u0026gt; \u003Cb\u003ETemplate\u003C\/b\u003E \u0026gt; click on the \u003Cb\u003EEdit HTML\u003C\/b\u003E button:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template html\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"320\" title=\"How to Add Numbered Page Navigation Widget for Blogger 2\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2.\u003C\/span\u003E\u003C\/b\u003E Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%252Bf.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%252Bf.png\" height=\"153\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E... type or paste the following tag inside the search box and hit Enter to find it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 3.\u003C\/span\u003E\u003C\/b\u003E Now choose one of the following numbered page navigation styles and copy the code just below it. Just above \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E  paste the code of the style that you want to use:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003EStyle 1\u003C\/h4\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-sJWL9G8xhBc\/U5CHvq2DFKI\/AAAAAAAAJNQ\/1kJ-_pRn2s8\/s1600\/page-navigation-widget-for-blogger-style-1.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"numbered page navigation style 1\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-sJWL9G8xhBc\/U5CHvq2DFKI\/AAAAAAAAJNQ\/1kJ-_pRn2s8\/s1600\/page-navigation-widget-for-blogger-style-1.png\" title=\"How to Add Numbered Page Navigation Widget for Blogger 3\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026nbsp;#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}\u003Cbr \/\u003E.blog-pager {background: none;}\u003Cbr \/\u003E.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}\u003Cbr \/\u003E.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}\u003Cbr \/\u003E\u0026nbsp;.showpageOf{display:none!important}\u003Cbr \/\u003E#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}\u003Cbr \/\u003E\u0026nbsp;#blog-pager .pages{border:none;}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch4\u003EStyle 2:\u003C\/h4\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-W-S4PrGF-tA\/U5CH6lE-1II\/AAAAAAAAJNY\/j28XHq-5pD4\/s1600\/page-navigation-widget-for-blogger-style-2.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"numbered page navigation style 2\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-W-S4PrGF-tA\/U5CH6lE-1II\/AAAAAAAAJNY\/j28XHq-5pD4\/s1600\/page-navigation-widget-for-blogger-style-2.png\" title=\"How to Add Numbered Page Navigation Widget for Blogger 4\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026nbsp;#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}\u003Cbr \/\u003E.blog-pager {background: none;}\u003Cbr \/\u003E.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}\u003Cbr \/\u003E.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}\u003Cbr \/\u003E#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}\u003Cbr \/\u003E\u0026nbsp;.showpageOf{display:none!important}\u003Cbr \/\u003E#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch4\u003EStyle 3:\u003C\/h4\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-U21ExX0mnCc\/U5CIGFz-6mI\/AAAAAAAAJNg\/P-w5VOT7Tiw\/s1600\/page-navigation-widget-for-blogger-style-3.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"numbered page navigation style 3\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-U21ExX0mnCc\/U5CIGFz-6mI\/AAAAAAAAJNg\/P-w5VOT7Tiw\/s1600\/page-navigation-widget-for-blogger-style-3.png\" title=\"How to Add Numbered Page Navigation Widget for Blogger 5\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026nbsp;#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}\u003Cbr \/\u003E.blog-pager {background: none;}\u003Cbr \/\u003E.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}\u003Cbr \/\u003E.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}\u003Cbr \/\u003E.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}\u003Cbr \/\u003Ea.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}\u003Cbr \/\u003E#blog-pager .pages{border:none;background: none;}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch4\u003EStyle 4:\u003C\/h4\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-ENurdXE8NCk\/U5zWzV7jeUI\/AAAAAAAAJQQ\/Z0W7LVTmH6g\/s1600\/numbered-page-navigation-javascript-widget-for-blogger-4.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"numbered page navigation style 4\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-ENurdXE8NCk\/U5zWzV7jeUI\/AAAAAAAAJQQ\/Z0W7LVTmH6g\/s1600\/numbered-page-navigation-javascript-widget-for-blogger-4.png\" title=\"How to Add Numbered Page Navigation Widget for Blogger 6\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}\u003Cbr \/\u003E.blog-pager {background: none;}\u003Cbr \/\u003E.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}\u003Cbr \/\u003E.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}\u003Cbr \/\u003E#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}\u003Cbr \/\u003E\u0026nbsp;.showpageOf{display:none!important}\u003Cbr \/\u003E#blog-pager .pages{border:none;}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch4\u003EStyle 5\u003C\/h4\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-t71x8PPIX0I\/U5zYxnj2fhI\/AAAAAAAAJQc\/sjYK9sAeIgY\/s1600\/numbered-page-navigation-javascript-widget-for-blogger-5.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"numbered page navigation style 5\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-t71x8PPIX0I\/U5zYxnj2fhI\/AAAAAAAAJQc\/sjYK9sAeIgY\/s1600\/numbered-page-navigation-javascript-widget-for-blogger-5.png\" title=\"How to Add Numbered Page Navigation Widget for Blogger 7\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }\u003Cbr \/\u003E.blog-pager {background: none;}\u003Cbr \/\u003E.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}\u003Cbr \/\u003E.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}\u003Cbr \/\u003E#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}\u003Cbr \/\u003E\u0026nbsp;.showpageOf{display:none!important}\u003Cbr \/\u003E#blog-pager .pages{border:none;}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch4\u003EStyle 6\u003C\/h4\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-ksF6gkQ6Ud4\/U5zaAf3-puI\/AAAAAAAAJQo\/JYdnk9S6lBs\/s1600\/numbered-page-navigation-javascript-widget-for-blogger-6.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"numbered page navigation style 6\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-ksF6gkQ6Ud4\/U5zaAf3-puI\/AAAAAAAAJQo\/JYdnk9S6lBs\/s1600\/numbered-page-navigation-javascript-widget-for-blogger-6.png\" title=\"How to Add Numbered Page Navigation Widget for Blogger 8\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }\u003Cbr \/\u003E.blog-pager {background: none;}\u003Cbr \/\u003E.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}\u003Cbr \/\u003E.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}\u003Cbr \/\u003E#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}\u003Cbr \/\u003E\u0026nbsp;.showpageOf{display:none!important}\u003Cbr \/\u003E#blog-pager .pages{border:none;}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch4\u003EStyle 7\u003C\/h4\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-UXAaPHryK5Q\/U5zb_84CJ_I\/AAAAAAAAJQ0\/jWy9AM421XA\/s1600\/numbered-page-navigation-javascript-widget-for-blogger-7.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"numbered page navigation style 7\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-UXAaPHryK5Q\/U5zb_84CJ_I\/AAAAAAAAJQ0\/jWy9AM421XA\/s1600\/numbered-page-navigation-javascript-widget-for-blogger-7.png\" title=\"How to Add Numbered Page Navigation Widget for Blogger 9\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }\u003Cbr \/\u003E.blog-pager {background: none;}\u003Cbr \/\u003E.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}\u003Cbr \/\u003E.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}\u003Cbr \/\u003E#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}\u003Cbr \/\u003E\u0026nbsp;.showpageOf{display:none!important}\u003Cbr \/\u003E#blog-pager .pages{border:none;}\u003C\/blockquote\u003ENote: if you want to hide the \"First\" and \"Last\" buttons add this line below the CSS code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.firstpage, .lastpage {display: none;}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003E2. Adding The Script\u003C\/h3\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 4. \u003C\/span\u003E\u003C\/b\u003ENow find (CTRL + F) this tag:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/body\u0026gt;\u003C\/blockquote\u003E\u003Ci\u003EUPDATED! Working version for more than 500 posts:\u003C\/i\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 5. \u003C\/span\u003E\u003C\/b\u003EAdd the following script just above it: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType != \u0026amp;quot;static_page\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \/*\u0026lt;![CDATA[*\/\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var perPage=\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E7\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var numPages=\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E6\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var firstText ='\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003EFirst\u003C\/b\u003E\u003C\/span\u003E';\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var lastText ='\u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003ELast\u003C\/span\u003E\u003C\/b\u003E';\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var prevText ='« \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003EPrevious\u003C\/b\u003E\u003C\/span\u003E';\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var nextText ='\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003ENext \u003C\/b\u003E\u003C\/span\u003E»';\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var urlactivepage=location.href;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var home_page=\"\/\";\u003Cbr \/\u003E\u0026nbsp; \/*]]\u0026gt;*\/\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026lt;script src=\"http:\/\/helplogger.googlecode.com\/svn\/trunk\/page-navigation2.js\"\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch4\u003EConfiguration\u003C\/h4\u003EAfter installing, you might want to change these default settings:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003EperPage: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E7\u003C\/b\u003E\u003C\/span\u003E,\u003Cbr \/\u003EnumPages: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E6\u003C\/b\u003E\u003C\/span\u003E,\u003Cbr \/\u003Evar firstText ='\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003EFirst\u003C\/b\u003E\u003C\/span\u003E';\u003Cbr \/\u003Evar lastText ='\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003ELast\u003C\/b\u003E\u003C\/span\u003E';\u003Cbr \/\u003Evar prevText ='\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E« Previous\u003C\/b\u003E\u003C\/span\u003E';\u003Cbr \/\u003Evar nextText ='\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003ENext »\u003C\/b\u003E\u003C\/span\u003E';\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cdiv style=\"text-align: left;\"\u003E1) \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003EperPage\u003C\/b\u003E\u003C\/span\u003E: how many posts will be shown in each page (\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E7\u003C\/b\u003E\u003C\/span\u003E). This value has to be the same as the number of posts on the main page. Otherwise, add the same number by going to \"Settings\" \u0026gt; \"Formatting\" and type it in the \"Show at most\" field, then click on the \"Save Settings\" button. \u003C\/div\u003E\u003Cdiv style=\"text-align: left;\"\u003E2) \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003EnumPages\u003C\/b\u003E\u003C\/span\u003E: how many pages will be shown in the page navigation (\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E6\u003C\/b\u003E\u003C\/span\u003E) \u003C\/div\u003E\u003Cdiv style=\"text-align: left;\"\u003E3) to replace the '\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003EFirst\u003C\/b\u003E\u003C\/span\u003E', '\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003ELast\u003C\/b\u003E\u003C\/span\u003E', \"« \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003EPrevious\u003C\/b\u003E\u003C\/span\u003E\" and \"\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003ENext\u003C\/b\u003E\u003C\/span\u003E »\" texts, just type your own within the quotes.\u003Cbr \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003ELabels fix:\u003C\/h3\u003EBy default, Blogger will show 20 posts on label pages. To make this widget appear on label pages, we will have to cut down this down to the value that we gave for the \u003Cspan style=\"color: #cc0000;\"\u003EperPage\u003C\/span\u003E variable. \u003Cbr \/\u003E\u003Cbr \/\u003EFind each occurrence of the following code snippet:\u003Cbr \/\u003E\u003Cblockquote\u003Eexpr:href='data:label.url'\u003C\/blockquote\u003EReplace it with this one below:\u003Cbr \/\u003E\u003Cblockquote\u003Eexpr:href='data:label.url + \"?\u0026amp;amp;max-results=\u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003E7\u003C\/span\u003E\u003C\/b\u003E\"'\u003C\/blockquote\u003EHere \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E7\u003C\/b\u003E\u003C\/span\u003E is the number of posts to be displayed per page.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 8. \u003C\/span\u003E\u003C\/b\u003EClick on the \u003Cb\u003ESave Template\u003C\/b\u003E button and that's it! Enjoy!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/5763822407922202928\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/04\/how-to-add-numbered-page-navigation-widget-for-blogger.html#comment-form","title":"139 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5763822407922202928"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5763822407922202928"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/04\/how-to-add-numbered-page-navigation-widget-for-blogger.html","title":"How to Add Numbered Page Navigation Widget for Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-eIdlXeuX4U0\/Uz3SnggwCJI\/AAAAAAAAHbM\/Naf8vULtqNQ\/s72-c\/numbered-page-navigation-javascript-widget-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"139"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-1946783432876967072"},"published":{"$t":"2014-02-25T08:50:00.002-08:00"},"updated":{"$t":"2014-08-06T06:16:38.734-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"social media"},{"scheme":"http://www.blogger.com/atom/ns#","term":"social media plugins"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Share Blog Posts in Social Media using AddThis"},"content":{"type":"html","$t":"In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the bottom of this post to see the AddThis sharing buttons.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-AGWLUD2hBvA\/UwzHXAW0rWI\/AAAAAAAAGUc\/EiI2rlP5oSU\/s1600\/addthis-share-buttons-for-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-AGWLUD2hBvA\/UwzHXAW0rWI\/AAAAAAAAGUc\/EiI2rlP5oSU\/s1600\/addthis-share-buttons-for-blogger.png\" height=\"201\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThis tutorial will show you how to register and add this feature on your blog and you will get to know some of the customization options of these buttons. So let's get started!\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EGetting the AddThis share buttons code\u003C\/h3\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1.\u003C\/span\u003E\u003C\/b\u003E Visit the \u003Ca href=\"https:\/\/www.addthis.com\/get\/sharing\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003Ehttps:\/\/www.addthis.com\/get\/sharing\u003C\/a\u003E page.\u003Cbr \/\u003E\u003C!-- adsense --\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2.\u003C\/span\u003E\u003C\/b\u003E To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the \"\u003Cb\u003ECreate account\u003C\/b\u003E\" button.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-rSulzB1arF0\/UwzAmnXMG5I\/AAAAAAAAGUE\/ybgf7Ls2C4c\/s1600\/how-to-create-addthis-account.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"create addthis account\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-rSulzB1arF0\/UwzAmnXMG5I\/AAAAAAAAGUE\/ybgf7Ls2C4c\/s1600\/how-to-create-addthis-account.png\" height=\"228\" title=\"share blog posts in social medias using Sharethis\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThe site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the \u003Cb\u003ERegister\u003C\/b\u003E button.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-WyUGX3ybEZM\/Uwy_hJZmmfI\/AAAAAAAAGTk\/P7NHT6GkBTQ\/s1600\/register-addthis-for-sharing-buttons.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"register addthis\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-WyUGX3ybEZM\/Uwy_hJZmmfI\/AAAAAAAAGTk\/P7NHT6GkBTQ\/s1600\/register-addthis-for-sharing-buttons.png\" height=\"290\" title=\"share blog posts in social medias using Sharethis\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 3. \u003C\/span\u003E\u003C\/b\u003EAfter you've been logged in, right below the \"\u003Cb\u003EGet sharing buttons for\u003C\/b\u003E\", choose the \"\u003Cb\u003EA website\u003C\/b\u003E\" option.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-I86hPQvV0Ug\/Uwy_1j5KjbI\/AAAAAAAAGTs\/9RRaLqckYLk\/s1600\/sharing-buttons-blogger-style-addthis.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"addthis share buttons\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-I86hPQvV0Ug\/Uwy_1j5KjbI\/AAAAAAAAGTs\/9RRaLqckYLk\/s1600\/sharing-buttons-blogger-style-addthis.png\" height=\"400\" title=\"Share blog posts in social medias using Sharethis\" width=\"251\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 4. \u003C\/span\u003E\u003C\/b\u003EIn the \"\u003Cb\u003ESelect style\u003C\/b\u003E\" section, choose the buttons style that you think would look the best on your site\/blog. Please note that on the right side you can see a preview of these buttons.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-hAuTKXtNwe8\/UwzAEMHQ_iI\/AAAAAAAAGT0\/NcVtfEP50Pw\/s1600\/addthis-social-buttons-preview.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"addthis sharing buttons \" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-hAuTKXtNwe8\/UwzAEMHQ_iI\/AAAAAAAAGT0\/NcVtfEP50Pw\/s1600\/addthis-social-buttons-preview.png\" height=\"155\" title=\"share blog posts in social medias using Sharethis\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 5.\u003C\/span\u003E\u003C\/b\u003E After you have chosen the style, the site will provide a code - click on the \"\u003Cb\u003EGrab it\u003C\/b\u003E\" button to copy it.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-GAn7gvGpXX8\/UwzAPe151FI\/AAAAAAAAGT8\/jnspKYQJlSA\/s1600\/grab-it-addthis-social-sharing-buttons-for-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"addthis code\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-GAn7gvGpXX8\/UwzAPe151FI\/AAAAAAAAGT8\/jnspKYQJlSA\/s1600\/grab-it-addthis-social-sharing-buttons-for-blogger.png\" height=\"326\" title=\"Share blog posts in social medias using Sharethis\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThe code provided will look like this:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;!-- AddThis Button BEGIN --\u0026gt;\u003Cbr \/\u003E\u0026lt;div class=\"addthis_toolbox addthis_default_style \"\u0026gt;\u003Cbr \/\u003E\u0026lt;a class=\"addthis_button_facebook_like\" fb:like:layout=\"button_count\"\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;a class=\"addthis_button_tweet\"\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;a class=\"addthis_button_pinterest_pinit\" pi:pinit:layout=\"horizontal\"\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;a class=\"addthis_counter addthis_pill_style\"\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/div\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;var addthis_config = {\"data_track_addressbar\":true};\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script type=\"text\/javascript\" src=\"\/\/s7.addthis.com\/js\/300\/addthis_widget.js#pubid=ra-XXXXXXXXXXX\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- AddThis Button END --\u0026gt;\u003C\/blockquote\u003ENow that you have selected and set up your AddThis sharing buttons, let's add them in the footer of the posts.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EAdding the AddThis sharing buttons on Blogger\u003C\/h3\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1.\u003C\/span\u003E\u003C\/b\u003E Access your \u003Ca href=\"http:\/\/blogger.com\/\" rel=\"nofollow\" style=\"color: blue;\"\u003EBlogger Dashboard\u003C\/a\u003E and go to \u003Cb\u003ETemplate\u003C\/b\u003E, then click on the \u003Cb\u003EEdit HTML\u003C\/b\u003E button on the right:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger template\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" title=\"Share blog posts in social medias using Sharethis\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2.\u003C\/span\u003E\u003C\/b\u003E Click anywhere inside the code area and press the CTRL + F keys to open the search box.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 3.\u003C\/span\u003E\u003C\/b\u003E Type the following line inside the search box and try to find the second occurrence of it - hit Enter:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/blockquote\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 4.\u003C\/span\u003E\u003C\/b\u003E Just above this line, add the code for the AddThis social sharing buttons. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ENote: \u003C\/b\u003EIf you want to add at the beginning of your posts, add the code below the second:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='post-header'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow to add more AddThis buttons\u003C\/h3\u003ETo add more buttons, simply choose the button for that social network and add the code just before the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/div\u0026gt;\u003C\/span\u003E tag (refer to the step 5 from above).\u003Cbr \/\u003E\u003Cbr \/\u003ESome examples:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;a class=\"addthis_button_linkedin\"\u0026gt;\u0026lt;\/a\u0026gt; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* linkedin button *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;a class=\"addthis_button_google_plusone\" g:plusone:size=\"medium\"\u0026gt;\u0026lt;\/a\u0026gt; \u003Cspan style=\"color: #6aa84f;\"\u003E\/*gplus button *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;a class=\"addthis_button_digg\"\u0026gt;\u0026lt;\/a\u0026gt; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* digg button *\/\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;a class=\"addthis_button_stumbleupon\"\u0026gt;\u0026lt;\/a\u0026gt;\u003Cspan style=\"color: #6aa84f;\"\u003E \/* stumbleupon button *\/ \u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;a class=\"addthis_button_print\"\u0026gt;\u0026lt;\/a\u0026gt; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* print button *\/\u003C\/span\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003ECSS3 AddThis Share Buttons\u003C\/h3\u003EYou can add just a single button, so that when the reader hovers over it, a menu will open with the options of social networks to share the post.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-noenADrY3OU\/UwzFUqAn8CI\/AAAAAAAAGUQ\/wfINYNyIDAE\/s1600\/css3-addthis-share-buttons.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"css3 share buttons, addthis\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-noenADrY3OU\/UwzFUqAn8CI\/AAAAAAAAGUQ\/wfINYNyIDAE\/s1600\/css3-addthis-share-buttons.png\" height=\"121\" title=\"CSS3 AddThis Share Buttons \" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EVisit \u003Ca href=\"http:\/\/www.addthis.com\/pages\/gallery-demo-css3-buttons\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003Ethis page\u003C\/a\u003E for a demo.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1.\u003C\/span\u003E\u003C\/b\u003E Go to \u003Cb\u003ETemplate \u003C\/b\u003E\u0026gt; click on the \u003Cb\u003EEdit HTML\u003C\/b\u003E button \u0026gt; press the CTRL + F keys and search:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/blockquote\u003EJust above this line, paste the following code: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E.addthis_share_btn a, .addthis_share_btn a:visited {\u003Cbr \/\u003Ebackground: \u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003E#FF5C00\u003C\/span\u003E\u003C\/b\u003E; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* background color of the button *\/\u003C\/span\u003E\u003Cbr \/\u003Edisplay: inline-block;\u003Cbr \/\u003Epadding: 6px 12px;\u003Cbr \/\u003Efont-family: arial,helvetica,lucida,verdana,sans-serif;\u003Cbr \/\u003Efont-size: 12px;\u003Cbr \/\u003Eline-height: 1em;\u003Cbr \/\u003Ecolor: #fff;\u003Cbr \/\u003Etext-decoration: none;\u003Cbr \/\u003E-moz-border-radius: 5px;\u003Cbr \/\u003E-webkit-border-radius: 5px;\u003Cbr \/\u003E-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);\u003Cbr \/\u003E-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);\u003Cbr \/\u003Eborder-radius: 5px;\u003Cbr \/\u003Ebox-shadow: 0 1px 3px rgba(0,0,0,0.5);\u003Cbr \/\u003Etext-shadow: 0 -1px 1px rgba(0,0,0,0.25);\u003Cbr \/\u003Eborder-bottom: 1px solid rgba(0,0,0,0.25);\u003Cbr \/\u003Eposition: relative;\u003Cbr \/\u003Ecursor: pointer;\u003Cbr \/\u003E}\u003Cbr \/\u003E.addthis_share_btn a:hover {\u003Cbr \/\u003Ebackground: \u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003E#D45500\u003C\/span\u003E\u003C\/b\u003E; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* background color on mouse hover *\/\u003C\/span\u003E\u003Cbr \/\u003Ecolor: #fff;\u003Cbr \/\u003E}\u003Cbr \/\u003E.addthis_share_btn a:active { top: 1px; }\u003Cbr \/\u003E\u003Cbr \/\u003E.addthis_share_btn a span, .addthis_share_btn:visited a span {\u003Cbr \/\u003Ebackground: url(http:\/\/www.addthis.com\/cms-content\/images\/gallery\/icon-addthis.gif) no-repeat left;\u003Cbr \/\u003Epadding: 1px 0 1px 18px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- AddThis Share Button --\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='addthis_toolbox addthis_share_btn'\u0026gt;\u003Cbr \/\u003E\u0026lt;a class='addthis_button_compact' href='http:\/\/addthis.com\/bookmark.php'\u0026gt;\u003Cbr \/\u003E\u0026lt;span\u0026gt;\u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003EShare\u003C\/b\u003E\u003C\/span\u003E\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;script src='http:\/\/s7.addthis.com\/js\/250\/addthis_widget.js' type='text\/javascript'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- End AddThis Share Button --\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch4\u003ECustomization\u003C\/h4\u003E- To change the color of the button according to the colors of your template, modify the color value in red.\u003Cbr \/\u003E- If you want to change the \"Share\" text, replace the text in blue.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2.\u003C\/span\u003E\u003C\/b\u003E Save the changes by clicking on the \u003Cb\u003ESave template\u003C\/b\u003E button and you're done! "},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/1946783432876967072\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/02\/share-blogger-posts-using-sharethis-buttons.html#comment-form","title":"11 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1946783432876967072"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/1946783432876967072"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/02\/share-blogger-posts-using-sharethis-buttons.html","title":"Share Blog Posts in Social Media using AddThis"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-AGWLUD2hBvA\/UwzHXAW0rWI\/AAAAAAAAGUc\/EiI2rlP5oSU\/s72-c\/addthis-share-buttons-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"11"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-2006508430141073162"},"published":{"$t":"2014-02-20T06:48:00.001-08:00"},"updated":{"$t":"2014-07-28T16:57:05.842-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Facebook"},{"scheme":"http://www.blogger.com/atom/ns#","term":"social media"},{"scheme":"http://www.blogger.com/atom/ns#","term":"social media plugins"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Add floating social media sharing buttons below Blogger post titles"},"content":{"type":"html","$t":"It is becoming increasingly important to make our posts appreciated and shared on social networks and one of the best ways to get traffic to our blog\/website and boost sharing stats is to add \u003Cb\u003Esocial sharing buttons\u003C\/b\u003E. \u003Cbr \/\u003E\u003Cbr \/\u003EIn this tutorial we will see \u003Cb\u003Ehow to add a floating social media sharing bar\u003C\/b\u003E below the title of Blogger posts, so when a reader scrolls down the page, he will still be able to see the sharing buttons without having to scroll back to the top.  \u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-v9gdbNW7lXQ\/UwYUhRxXfrI\/AAAAAAAAGQo\/vcQbPkfbALE\/s1600\/floating-social-media-sharing-bar-for-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-v9gdbNW7lXQ\/UwYUhRxXfrI\/AAAAAAAAGQo\/vcQbPkfbALE\/s1600\/floating-social-media-sharing-bar-for-blogger.png\" height=\"182\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003C!-- adsense --\u003EAdding the below jQuery script will make the buttons float in a fixed position as soon as they reach \"the top\" of the page. By scrolling back, the buttons will return to their initial position.\u003Cbr \/\u003E\u003Cbr \/\u003EThe \u003Cb\u003Esocial sharing bar\u003C\/b\u003E includes buttons for \u003Cb\u003EFacebook\u003C\/b\u003E, \u003Cb\u003ETwitter\u003C\/b\u003E, \u003Cb\u003EGoogle+\u003C\/b\u003E, and \u003Cb\u003EPinterest\u003C\/b\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003ESocial Media Sharing Buttons below Blogger Post Title\u003C\/h3\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1.\u003C\/span\u003E\u003C\/b\u003E From the \u003Ca href=\"http:\/\/blogger.com\/\" rel=\"nofollow\" style=\"color: blue;\"\u003EBlogger Dashboard\u003C\/a\u003E, go to \u003Cb\u003ETemplate\u003C\/b\u003E and click on the \u003Cb\u003EEdit HTML\u003C\/b\u003E button:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2.\u003C\/span\u003E\u003C\/b\u003E Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag inside the search box and hit Enter to find it.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%252Bf.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger search box, ctrl + f\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%252Bf.png\" height=\"123\" title=\"Add floating social media sharing buttons below Blogger post titles\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 3.\u003C\/span\u003E\u003C\/b\u003E Just above \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E add this script:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js' type='text\/javascript'\/\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E$(function() {\u003Cbr \/\u003Evar $movesbuttons = $(\"#floating-social-buttons\"),\u003Cbr \/\u003E$window = $(window),\u003Cbr \/\u003Eoffset = $movesbuttons.offset();\u003Cbr \/\u003E$window.scroll(function() {\u003Cbr \/\u003Eif ($window.scrollTop() \u0026gt; offset.top) {\u003Cbr \/\u003E$movesbuttons.css({'position' : 'fixed', 'width' : '\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E550px\u003C\/b\u003E\u003C\/span\u003E', 'top' : '0px'});\u003Cbr \/\u003E} else {\u003Cbr \/\u003E$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});\u003Cbr \/\u003E}\u003Cbr \/\u003E});\u003Cbr \/\u003E});\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 4.\u003C\/span\u003E\u003C\/b\u003E Now before \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E add the following CSS styles:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E#floating-social-buttons {\u003Cbr \/\u003Epadding: 6px 0px 12px;\u003Cbr \/\u003Eposition: absolute;\u003Cbr \/\u003Ebackground: #F6F6F6;\u003Cbr \/\u003Eborder-bottom: 1px solid #DEDEDE;\u003Cbr \/\u003Ewidth: \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E550px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003Eheight: 18px;\u003Cbr \/\u003Ez-index: 99;\u003Cbr \/\u003E}\u003Cbr \/\u003E.floating-social-buttons {\u003Cbr \/\u003Emargin-left: 5px !important; \u003Cbr \/\u003E}\u003Cbr \/\u003E.floating-social-buttons li {\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003Emargin-left: 5px;\u003Cbr \/\u003Elist-style:none;\u003Cbr \/\u003E}\u003C\/blockquote\u003ETo change the width of the bar, modify the \u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003E550px\u003C\/b\u003E\u003C\/span\u003E values in red. Note that this value also appears in the script which also needs to be modified. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 5. \u003C\/span\u003E\u003C\/b\u003EFinally, just below the second \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;div class='post-header'\u0026gt;\u003C\/span\u003E (press CTRL + F and hit Enter twice to find the second one) add the following code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;div style='padding:5px 0 \u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003E35px\u003C\/b\u003E\u003C\/span\u003E 0;clear:both;'\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='floating-social-buttons'\u0026gt;\u003Cbr \/\u003E\u0026lt;ul class='floating-social-buttons'\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;iframe allowTransparency='true' expr:src='\u0026amp;quot;http:\/\/www.facebook.com\/plugins\/like.php?href=\u0026amp;quot; + data:post.url+ \u0026amp;quot;\u0026amp;amp;layout=button_count\u0026amp;amp;show_faces=false\u0026amp;amp;width=100\u0026amp;amp;height=25\u0026amp;amp;action=like\u0026amp;amp;font=tahoma\u0026amp;amp;colorscheme=light\u0026amp;quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'\/\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a class='twitter-share-button' data-lang='en' href='https:\/\/twitter.com\/share'\u0026gt;Tweet\u0026lt;\/a\u0026gt;\u0026lt;script src='\/\/platform.twitter.com\/widgets.js' type='text\/javascript'\/\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;script src='http:\/\/apis.google.com\/js\/plusone.js' type='text\/javascript'\/\u0026gt;\u0026lt;g:plusone expr:href='data:post.url' size='medium'\/\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;a class='pin-it-button' count-layout='horizontal' expr:href='\u0026amp;quot;http:\/\/pinterest.com\/pin\/create\/button\/?url=\u0026amp;quot; + data:post.url + \u0026amp;quot;\u0026amp;amp;media=\u0026amp;quot; + data:post.thumbnailUrl + \u0026amp;quot;\u0026amp;amp;description=\u0026amp;quot; + data:post.snippet' style='margin:0 10px 5px 0;'\u0026gt;Pin It\u0026lt;\/a\u0026gt; \u0026lt;script src='http:\/\/assets.pinterest.com\/js\/pinit.js' type='text\/javascript'\/\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003ECustomization:\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EIf you want the buttons appear at the end of the post, paste this code before or after \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003EIf the bar overlaps with the post content, then change \u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003E35px\u003C\/b\u003E\u003C\/span\u003E to a higher value.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 6.\u003C\/b\u003E \u003C\/span\u003EClick on the \u003Cb\u003ESave template\u003C\/b\u003E button... and that's it!\u003Cbr \/\u003E\u003Cbr \/\u003ESo these were the steps for adding the horizontal social buttons bar on Blogger. I highly recommend using this bar as it could really help you to get more social traffic for your blog."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/2006508430141073162\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/02\/add-floating-social-media-sharing.html#comment-form","title":"18 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2006508430141073162"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/2006508430141073162"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/02\/add-floating-social-media-sharing.html","title":"Add floating social media sharing buttons below Blogger post titles"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-v9gdbNW7lXQ\/UwYUhRxXfrI\/AAAAAAAAGQo\/vcQbPkfbALE\/s72-c\/floating-social-media-sharing-bar-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"18"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-3067493737426428385"},"published":{"$t":"2014-02-17T12:00:00.000-08:00"},"updated":{"$t":"2014-02-25T14:22:42.262-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"social media"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Add A CSS Animated Share Button on Blogger"},"content":{"type":"html","$t":"I saw this on \u003Ca style=\"color: #0000ff\" href=\"http:\/\/www.paulund.co.uk\/animated-css-share-button\" rel=\"nofollow\"\u003EPaulund\u003C\/a\u003E, a highly recommended site with a good collection of snippets, i.e., a collection of different codes that develop small utilities, all of these being applicable to web design.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-bpUX4a7qoYE\/UwJqNHjlfLI\/AAAAAAAAGPo\/dWd7O9w_Oiw\/s1600\/css-animated-share-button-with-social-media-icons-for-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-bpUX4a7qoYE\/UwJqNHjlfLI\/AAAAAAAAGPo\/dWd7O9w_Oiw\/s1600\/css-animated-share-button-with-social-media-icons-for-blogger.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EIn this tutorial we will see how we can add as similar button with a really cool hover effect and four social media icons on Blogger with links to share the current page on Facebook, Twitter, Google+ and Pinterest. However, we can replace these social networks later with any other just by changing the links below.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EDemo\u003C\/span\u003E\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cstyle\u003E.share_button { width: 300px; height: 50px; margin: 10px auto; } .share_button ul { width: 50%; height: inherit; float: left; list-style: none; margin: 0 !important; padding: 0 !important; } .share_button ul h1 { margin-top: 9%; overflow: hidden; width: 100%; color: #4889F0; font-size: 18px; text-shadow:2px 2px 2px #fff; } .share_button ul li { position: absolute; height: inherit; width: 150px; margin: 0 !important; padding: 0 !important; background: #EEEEEE; -webkit-transition: all 600ms; -moz-transition: all 600ms; -o-transition: all 600ms; -ms-transition: all 600ms; transition: all 600ms; text-align: center; } .share_button ul li h2 { display: inline-block; width: 32%; height: 40px; overflow: hidden; margin-top: 5%; cursor: pointer; border: 0 !important; } .share_button ul:first-child li:first-child{ text-align: right; } .share_button ul:last-child li:first-child{ text-align: left; } .share_button ul:first-child li:last-child, .share_button:hover ul:first-child li:first-child { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -o-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); } .share_button ul:last-child li:last-child, .share_button:hover ul:last-child li:first-child { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); } .share_button:hover ul:first-child li:last-child, .share_button:hover ul:last-child li:last-child { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } \u003C\/style\u003E     \u003Cdiv class='share_button'\u003E     \u003Cul\u003E     \u003Cli\u003E\u003Ch1\u003E     Share t      \u003C\/h1\u003E\u003C\/li\u003E     \u003Cli\u003E\u003Ch2\u003E     \u003Ca expr:href='\u0026quot;http:\/\/www.facebook.com\/sharer.php?u=\u0026quot; + data:post.canonicalUrl + \u0026quot;\u0026amp;t=\u0026quot; + data:post.title ' title='Share on Facebook'\u003E\u003Cimg src=\"http:\/\/2.bp.blogspot.com\/-UK3OEVM0cVw\/UwJfjtO-exI\/AAAAAAAAGPA\/CqQmlIlNJAE\/s1600\/Facebook.png\"\/\u003E\u003C\/a\u003E\u003C\/h2\u003E     \u003Ch2\u003E\u003Ca expr:href='\u0026quot;http:\/\/twitter.com\/home?status=\u0026quot; + data:post.title + \u0026quot; \u0026quot; + data:post.canonicalUrl ' title='Share on Twitter'\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-XyPHPVsfdz4\/UwJfkJmI3JI\/AAAAAAAAGPQ\/QRGykJJtGow\/s1600\/Twitter.png\"\/\u003E\u003C\/a\u003E\u003C\/h2\u003E     \u003C\/li\u003E     \u003C\/ul\u003E     \u003Cul\u003E     \u003Cli\u003E\u003Ch1\u003Ehis page\u003C\/h1\u003E\u003C\/li\u003E     \u003Cli\u003E     \u003Ch2\u003E\u003Ca expr:href='\u0026quot;https:\/\/plus.google.com\/share?url=\u0026quot; + data:post.canonicalUrl ' title='Share on Google Plus'\u003E\u003Cimg src=\"http:\/\/3.bp.blogspot.com\/-_YGvQ_Nrw10\/UwJfjhXOGGI\/AAAAAAAAGPU\/tv1WNfkHdgg\/s1600\/Google-plus.png\"\/\u003E\u003C\/a\u003E\u003C\/h2\u003E     \u003Ch2\u003E     \u003Ca href='javascript:void((function(){var%20e=document.createElement(\u0026apos;script\u0026apos;);e.setAttribute(\u0026apos;type\u0026apos;,\u0026apos;text\/javascript\u0026apos;);e.setAttribute(\u0026apos;charset\u0026apos;,\u0026apos;UTF-8\u0026apos;);e.setAttribute(\u0026apos;src\u0026apos;,\u0026apos;http:\/\/assets.pinterest.com\/js\/pinmarklet.js?r=\u0026apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'\u003E\u003Cimg src=\"http:\/\/4.bp.blogspot.com\/-oZgH_AD169o\/UwJfjl3ON0I\/AAAAAAAAGPE\/BLj5lWbsZyE\/s1600\/Pinterest.png\"\/\u003E\u003C\/a\u003E     \u003C\/h2\u003E     \u003C\/li\u003E     \u003C\/ul\u003E     \u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003ECreating A CSS Animated Share Button\u003C\/b\u003E\u003C\/span\u003E\u003C\/h3\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 1.\u003C\/span\u003E\u003C\/b\u003E From your \u003Ca style=\"color: #0000ff\" href=\"http:\/\/blogger.com\/\" rel=\"nofollow\"\u003EBlogger dashboard\u003C\/a\u003E \u0026gt; go to \u003Cb\u003ETemplate\u003C\/b\u003E \u0026gt; click on the \u003Cb\u003EEdit HTML\u003C\/b\u003E button.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 2.\u003C\/span\u003E\u003C\/b\u003E Click anywhere inside the code area and press the Ctrl + F keys to open the blogger search box. Type or paste the \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E tag and hit Enter to find it. \u003C!-- adsense --\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 3.\u003C\/span\u003E\u003C\/b\u003E Just above \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E add this CSS:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.share_button { \u003Cbr \/\u003Ewidth: 300px;\u003Cbr \/\u003Eheight: 50px; \u003Cbr \/\u003Emargin: 10px auto; \u003Cbr \/\u003E}\u003Cbr \/\u003E.share_button ul { \u003Cbr \/\u003Ewidth: 50%; \u003Cbr \/\u003Eheight: inherit; \u003Cbr \/\u003Efloat: left; \u003Cbr \/\u003Elist-style: none; \u003Cbr \/\u003Emargin: 0 !important; \u003Cbr \/\u003Epadding: 0 !important; \u003Cbr \/\u003E}\u003Cbr \/\u003E.share_button ul h1 { \u003Cbr \/\u003Emargin-top: 9%; \u003Cbr \/\u003Eoverflow: hidden; \u003Cbr \/\u003Ewidth: 100%;\u003Cbr \/\u003Ecolor: #4889F0; \u003Cbr \/\u003Efont-size: 18px; \u003Cbr \/\u003Etext-shadow:2px 2px 2px #fff; \u003Cbr \/\u003E}\u003Cbr \/\u003E.share_button ul li { \u003Cbr \/\u003Eposition: absolute; \u003Cbr \/\u003Eheight: inherit; \u003Cbr \/\u003Ewidth: 150px; \u003Cbr \/\u003Emargin: 0 !important; \u003Cbr \/\u003Epadding: 0 !important; \u003Cbr \/\u003Ebackground: #EEEEEE;\u003Cbr \/\u003E-webkit-transition: all 600ms;\u003Cbr \/\u003E-moz-transition: all 600ms;\u003Cbr \/\u003E-o-transition: all 600ms;\u003Cbr \/\u003E-ms-transition: all 600ms;\u003Cbr \/\u003Etransition: all 600ms;\u003Cbr \/\u003Etext-align: center;\u003Cbr \/\u003E}\u003Cbr \/\u003E.share_button ul li h2 { \u003Cbr \/\u003Edisplay: inline-block; \u003Cbr \/\u003Ewidth: 32%; \u003Cbr \/\u003Eheight: 40px; \u003Cbr \/\u003Eoverflow: hidden; \u003Cbr \/\u003Emargin-top: 5%; \u003Cbr \/\u003Ecursor: pointer; \u003Cbr \/\u003Eborder: 0 !important; \u003Cbr \/\u003E}\u003Cbr \/\u003E.share_button ul:first-child li:first-child{\u003Cbr \/\u003Etext-align: right; \u003Cbr \/\u003E}\u003Cbr \/\u003E.share_button ul:last-child li:first-child{\u003Cbr \/\u003Etext-align: left; \u003Cbr \/\u003E}\u003Cbr \/\u003E.share_button ul:first-child li:last-child,\u003Cbr \/\u003E.share_button:hover ul:first-child li:first-child {\u003Cbr \/\u003E-webkit-transform: rotateY(90deg);\u003Cbr \/\u003E-moz-transform: rotateY(90deg);\u003Cbr \/\u003E-o-transform: rotateY(90deg);\u003Cbr \/\u003E-ms-transform: rotateY(90deg);\u003Cbr \/\u003Etransform: rotateY(90deg);\u003Cbr \/\u003E}\u003Cbr \/\u003E.share_button ul:last-child li:last-child,\u003Cbr \/\u003E.share_button:hover ul:last-child li:first-child {\u003Cbr \/\u003E-webkit-transform: rotateY(-90deg);\u003Cbr \/\u003E-moz-transform: rotateY(-90deg);\u003Cbr \/\u003E-o-transform: rotateY(-90deg);\u003Cbr \/\u003E-ms-transform: rotateY(-90deg);\u003Cbr \/\u003Etransform: rotateY(-90deg);\u003Cbr \/\u003E}\u003Cbr \/\u003E.share_button:hover ul:first-child li:last-child,\u003Cbr \/\u003E.share_button:hover ul:last-child li:last-child {\u003Cbr \/\u003E-webkit-transform: rotateY(0deg);\u003Cbr \/\u003E-moz-transform: rotateY(0deg);\u003Cbr \/\u003E-o-transform: rotateY(0deg);\u003Cbr \/\u003E-ms-transform: rotateY(0deg);\u003Cbr \/\u003Etransform: rotateY(0deg);\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 5. \u003C\/span\u003E\u003C\/b\u003EAnd now let's go ahead and insert the HTML button in the template. The most common place would be just after \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/span\u003E - find the second \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/span\u003E and paste the following code just above it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='share_button'\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;h1\u0026gt;\u003Cbr \/\u003EShare t\u003Cbr \/\u003E\u0026lt;\/h1\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;h2\u0026gt;\u003Cbr \/\u003E\u0026lt;a expr:href='\u0026amp;quot;http:\/\/www.facebook.com\/sharer.php?u=\u0026amp;quot; + data:post.canonicalUrl + \u0026amp;quot;\u0026amp;amp;t=\u0026amp;quot; + data:post.title ' title='Share on Facebook'\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/2.bp.blogspot.com\/-UK3OEVM0cVw\/UwJfjtO-exI\/AAAAAAAAGPA\/CqQmlIlNJAE\/s1600\/Facebook.png\u003C\/span\u003E\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/h2\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;h2\u0026gt;\u0026lt;a expr:href='\u0026amp;quot;http:\/\/twitter.com\/home?status=\u0026amp;quot; + data:post.title + \u0026amp;quot; \u0026amp;quot; + data:post.canonicalUrl ' title='Share on Twitter'\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/4.bp.blogspot.com\/-XyPHPVsfdz4\/UwJfkJmI3JI\/AAAAAAAAGPQ\/QRGykJJtGow\/s1600\/Twitter.png\u003C\/span\u003E\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/h2\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u0026lt;ul\u0026gt;\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u0026lt;h1\u0026gt;his page\u0026lt;\/h1\u0026gt;\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;li\u0026gt;\u003Cbr \/\u003E\u0026lt;h2\u0026gt;\u0026lt;a expr:href='\u0026amp;quot;https:\/\/plus.google.com\/share?url=\u0026amp;quot; + data:post.canonicalUrl ' title='Share on Google Plus'\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/3.bp.blogspot.com\/-_YGvQ_Nrw10\/UwJfjhXOGGI\/AAAAAAAAGPU\/tv1WNfkHdgg\/s1600\/Google-plus.png\u003C\/span\u003E\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/h2\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;h2\u0026gt;\u003Cbr \/\u003E\u0026lt;a href='javascript:void((function(){var%20e=document.createElement(\u0026amp;apos;script\u0026amp;apos;);e.setAttribute(\u0026amp;apos;type\u0026amp;apos;,\u0026amp;apos;text\/javascript\u0026amp;apos;);e.setAttribute(\u0026amp;apos;charset\u0026amp;apos;,\u0026amp;apos;UTF-8\u0026amp;apos;);e.setAttribute(\u0026amp;apos;src\u0026amp;apos;,\u0026amp;apos;http:\/\/assets.pinterest.com\/js\/pinmarklet.js?r=\u0026amp;apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/4.bp.blogspot.com\/-oZgH_AD169o\/UwJfjl3ON0I\/AAAAAAAAGPE\/BLj5lWbsZyE\/s1600\/Pinterest.png\u003C\/span\u003E\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/h2\u0026gt;\u003Cbr \/\u003E\u0026lt;\/li\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cb\u003ENote:\u003C\/b\u003E if you want to change the  icons, replace the URLs in blue.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EStep 5.\u003C\/span\u003E\u003C\/b\u003E Click on the \u003Cb\u003ESave template\u003C\/b\u003E button and we're done! Enjoy ;)"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/3067493737426428385\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/02\/add-css-animated-share-button-on-blogger.html#comment-form","title":"8 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3067493737426428385"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3067493737426428385"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2014\/02\/add-css-animated-share-button-on-blogger.html","title":"Add A CSS Animated Share Button on Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-bpUX4a7qoYE\/UwJqNHjlfLI\/AAAAAAAAGPo\/dWd7O9w_Oiw\/s72-c\/css-animated-share-button-with-social-media-icons-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"8"}}]}});