// 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-5226425127885778806"},"updated":{"$t":"2020-02-28T17:11:45.240-08:00"},"category":[{"term":"blogger widget"},{"term":"blogger tutorials"},{"term":"free blogger template"},{"term":"sticky sidebar"}],"title":{"type":"text","$t":"2014 Help"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/www.dapurumi.co.vu\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/-\/blogger+widget?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.dapurumi.co.vu\/search\/label\/blogger%20widget"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/-\/blogger+widget\/-\/blogger+widget?alt=json-in-script\u0026start-index=7\u0026max-results=6"}],"author":[{"name":{"$t":"Anonymous"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14778558380762837110"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"7"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-5226425127885778806.post-1397890222751135427"},"published":{"$t":"2014-03-01T16:42:00.002-08:00"},"updated":{"$t":"2014-03-01T16:45:00.063-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger widget"}],"title":{"type":"text","$t":"How to Add Image Slider in Blogger Post"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\"\u003E\u003Cdiv class=\"MsoNormal tr_bq\"\u003EToday we provide you tutorial about Add Image Slider in Blogger Post. You can easily add image slider in your blog post just follow some steps to add Image Slider. In this slider you get a ribbon at the left corner and it’s also contains with a slice effect. You can also edit it as you wish to perfectly for your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"How to Add Image Slider in Blogger Post\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-5QLMjvy6SZ4\/T8jKmOSDNbI\/AAAAAAAAB2o\/LZFGFRfj1BY\/s400\/add-nivo-slider-to-blogger-blog.png\" height=\"190\" title=\"How to Add Image Slider in Blogger Post\" width=\"400\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003EAdd Image Slider in Blogger Post\u003C\/h2\u003E\u003Cdiv class=\"MsoNormal\"\u003EYou can follow below step by step guide to Add Image Slider in Blogger Post:\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 1\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003ELogin to your Blogger Dashboard.\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Add Image Slider in Blogger Post\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-Ev2uM5KIiog\/UboI9n-5hnI\/AAAAAAAAAIc\/tPWMqNPveJk\/s400\/Blogger+Login+1.JPG\" height=\"161\" title=\"Add Image Slider in Blogger Post\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 2\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003EGo to Layout then Click on Add A Gadget as shown in below picture.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"How to Add Image Slider in Blogger Post\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-Z4M_Ne6ha-I\/T1I3ZJWW-NI\/AAAAAAAAONQ\/_tLDpxrmQRA\/s400\/add-a-gadget-screen-Blogger-sections-to-use.PNG\" height=\"205\" title=\"How to Add Image Slider in Blogger Post\" width=\"400\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 3\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003ESelect HTML\/JavaScript as shown in below picture.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"How to Add Image Slider in Blogger Post\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-t6NpavmE9zI\/UsEVplzhjrI\/AAAAAAAAA0w\/uAb1cLw6TK0\/s1600\/image.jpg\" title=\"How to Add Image Slider in Blogger Post\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 4\u003C\/h3\u003E\u003Cbr \/\u003E\u003Cdiv class=\"MsoNormal\"\u003ECopy and paste below code.\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\/* http:\/\/dimpost.com *\/\u003Cbr \/\u003E#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u003Cbr \/\u003E#slider {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; width:700px;height:306px;\/* Make it the same size as your images *\/\u003Cbr \/\u003E\u0026nbsp;background:#fff  url(http:\/\/4.bp.blogspot.com\/-aVGCcclfKQo\/UR-T3vxFAMI\/AAAAAAAABm8\/ncwIfUdoLIw\/s1600\/loading.gif)  no-repeat 50% 50%;\u003Cbr \/\u003E\u0026nbsp;position:relative;\u003Cbr \/\u003E\u0026nbsp;margin:0 auto;\/*make the image slider center-aligned *\/\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; box-shadow: 0px 1px 5px #999999;\u003Cbr \/\u003E}\u003Cbr \/\u003E#slider img {\u003Cbr \/\u003E\u0026nbsp;position:absolute;\u003Cbr \/\u003E\u0026nbsp;border:none;\u003Cbr \/\u003E\u0026nbsp;display:none;\u003Cbr \/\u003E}\u003Cbr \/\u003E\/* the link style (if an image is wrapped in a link) *\/\u003Cbr \/\u003E#slider a.imgLink {\u003Cbr \/\u003E\u0026nbsp;z-index:2;\u003Cbr \/\u003E\u0026nbsp;display:none;position:absolute;\u003Cbr \/\u003E\u0026nbsp;top:0px;left:0px;border:0;padding:0;margin:0;\u003Cbr \/\u003E\u0026nbsp;width:100%;height:100%;\u003Cbr \/\u003E}\u003Cbr \/\u003E\/* Caption styles *\/\u003Cbr \/\u003Ediv.mc-caption-bg, div.mc-caption-bg2 {\u003Cbr \/\u003E\u0026nbsp;position:absolute;\u003Cbr \/\u003E\u0026nbsp;width:100%;\u003Cbr \/\u003E\u0026nbsp;height:auto;\u003Cbr \/\u003E\u0026nbsp;padding:0;\u003Cbr \/\u003E\u0026nbsp;left:0px;\u003Cbr \/\u003E\u0026nbsp;bottom:15px;\u003Cbr \/\u003E\u0026nbsp;z-index:3;\u003Cbr \/\u003E\u0026nbsp;overflow:hidden;\u003Cbr \/\u003E\u0026nbsp;font-size: 0;\u003Cbr \/\u003E}\u003Cbr \/\u003Ediv.mc-caption-bg {\u003Cbr \/\u003E\u0026nbsp;background-color:black;\u003Cbr \/\u003E}\u003Cbr \/\u003Ediv.mc-caption {\u003Cbr \/\u003E\u0026nbsp;font: bold 14px\/20px Arial;\u003Cbr \/\u003E\u0026nbsp;color:#EEE;\u003Cbr \/\u003E\u0026nbsp;z-index:4;\u003Cbr \/\u003E\u0026nbsp;padding:10px 0;\u003Cbr \/\u003E\u0026nbsp;text-align:center;\u003Cbr \/\u003E}\u003Cbr \/\u003Ediv.mc-caption a {\u003Cbr \/\u003E\u0026nbsp;color:#FB0;\u003Cbr \/\u003E}\u003Cbr \/\u003Ediv.mc-caption a:hover {\u003Cbr \/\u003E\u0026nbsp;color:#DA0;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\/* ------ built-in navigation bullets wrapper ------*\/\u003Cbr \/\u003Ediv.navBulletsWrapper \u0026nbsp;{\u003Cbr \/\u003E\u0026nbsp;top:320px; left:280px; \/* Its position is relative to the #slider *\/\u003Cbr \/\u003E\u0026nbsp;width:150px;\u003Cbr \/\u003E\u0026nbsp;background:none;\u003Cbr \/\u003E\u0026nbsp;padding-left:20px;\u003Cbr \/\u003E\u0026nbsp;position:relative;\u003Cbr \/\u003E\u0026nbsp;z-index:5;\u003Cbr \/\u003E\u0026nbsp;cursor:pointer;\u003Cbr \/\u003E}\u003Cbr \/\u003E\/* each bullet *\/\u003Cbr \/\u003Ediv.navBulletsWrapper div\u003Cbr \/\u003E{\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; width:11px; height:11px;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; background:transparent  url(http:\/\/3.bp.blogspot.com\/-ZUaX5-lcCi4\/UR-TzMXcpuI\/AAAAAAAABm0\/kokxtfFdNcU\/s1600\/bullet.png)  no-repeat 0 0;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; float:left;overflow:hidden;vertical-align:middle;cursor:pointer;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; margin-right:11px;\/* distance between each bullet*\/\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; _position:relative;\/*IE6 hack*\/\u003Cbr \/\u003E}\u003Cbr \/\u003Ediv.navBulletsWrapper div.active {background-position:0 -11px;}\u003Cbr \/\u003E\u003Cbr \/\u003E\/* --------- Others ------- *\/\u003Cbr \/\u003E#slider\u003Cbr \/\u003E{\u003Cbr \/\u003E\u0026nbsp;transform: translate3d(0,0,0);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; -ms-transform:translate3d(0,0,0);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; -moz-transform:translate3d(0,0,0);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; -o-transform:translate3d(0,0,0);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/dimpost.googlecode.com\/files\/js-image-slider.js\" type=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;div id=\"sliderFrame\"\u0026gt;\u003Cbr \/\u003E\u0026lt;div id=\"slider\"\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"#\"\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: red;\"\u003Ehttps:\/\/lh4.googleusercontent.com\/-oxV19sM3O5I\/Uc_MfCW09hI\/AAAAAAAAAPU\/8K4xW8f5ID4\/h120\/image-slider-1.jpg\u003C\/span\u003E\" alt=\"#htmlcaption1\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"#\"\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: red;\"\u003Ehttps:\/\/lh6.googleusercontent.com\/-_V9ia-vRQDw\/Uc_Me-WX21I\/AAAAAAAAAPQ\/1HZH3J08jr0\/h120\/image-slider-2.jpg\u003C\/span\u003E\" alt=\"Go UP!\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"#\"\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: red;\"\u003Ehttps:\/\/lh6.googleusercontent.com\/-E6waK4w3Pyg\/Uc_MekrMOpI\/AAAAAAAAAPI\/WcXBXJKmb9E\/h120\/image-slider-3.jpg\u003C\/span\u003E\" alt=\"Pure Javascript. No jQuery. No flash.\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"#\"\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: red;\"\u003Ehttps:\/\/lh4.googleusercontent.com\/-IIz2KjyU3W0\/Uc_Mfiw-QaI\/AAAAAAAAAPg\/kLf_VnQ1YHE\/h120\/image-slider-4.jpg\u003C\/span\u003E\" alt=\"#htmlcaption2\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"#\"\u0026gt;\u0026lt;img src=\"\u003Cspan style=\"color: red;\"\u003Ehttps:\/\/lh4.googleusercontent.com\/-SH8EBmFLe2A\/Uc_MfjT6POI\/AAAAAAAAAPk\/y4XTNq80Wdk\/h120\/image-slider-5.jpg\u003C\/span\u003E\" alt=\"Stay Connected\"\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u0026lt;a href=\"http:\/\/www.haakblog.com\" rel=\"dofollow\"  target=\"_blank\" title=\"blogger\"\u0026gt;\u0026lt;img  src=\"https:\/\/bitly.com\/haakblog\" alt=\"blogger\" border=\"0\"  style=\"position: fixed; bottom: 10%; right: 0%;\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;a  href=\"http:\/\/www.hon99.com\" rel=\"dofollow\" target=\"_blank\"  title=\"blogger\"\u0026gt;\u0026lt;img src=\"https:\/\/bitly.com\/haakblog\"  alt=\"blogger\" border=\"0\" style=\"position: fixed; bottom: 10%; right:  0%;\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;div id=\"htmlcaption1\" style=\"display: none;\"\u0026gt;\u003Cbr \/\u003ECode by \u0026lt;a href=\"http:\/\/www.haakblog.com\" target=\"_blank\"\u0026gt;Haakblog\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;div id=\"htmlcaption2\" style=\"display: none;\"\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"http:\/\/www.w3schools.com\/css\/\"  target=\"_blank\"\u0026gt;CSS\u0026lt;\/a\u0026gt; \u0026lt;a  href=\"http:\/\/www.w3schools.com\/js\/default.asp\"  target=\"_blank\"\u0026gt;JavaScript\u0026lt;\/a\u0026gt; Rocks.\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003C\/div\u003ETips: You can change your width and height as you wish. You can also change image URL which is show in red color.\u003Cbr \/\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 5\u003C\/h3\u003E\u003Cdiv\u003ENow click on save.\u003C\/div\u003E\u003Cdiv\u003E\u003C\/div\u003E\u003Cdiv\u003EYou have done. Its very simple to add image slider in your blogger blog.  If you have any more updates then give us your updated code we will  publish your updates as soon as possible.\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.dapurumi.co.vu\/feeds\/1397890222751135427\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.blogger.com\/comment.g?blogID=5226425127885778806\u0026postID=1397890222751135427\u0026isPopup=true","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/1397890222751135427"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/1397890222751135427"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.dapurumi.co.vu\/2014\/03\/how-to-add-image-slider-in-blogger-post.html","title":"How to Add Image Slider in Blogger Post"}],"author":[{"name":{"$t":"Anonymous"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14778558380762837110"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-5QLMjvy6SZ4\/T8jKmOSDNbI\/AAAAAAAAB2o\/LZFGFRfj1BY\/s72-c\/add-nivo-slider-to-blogger-blog.png","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-5226425127885778806.post-2117345359184740693"},"published":{"$t":"2014-03-01T16:39:00.001-08:00"},"updated":{"$t":"2014-03-01T16:44:20.488-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger widget"}],"title":{"type":"text","$t":"Add Facebook Like Popup Box for Blogger"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\"\u003E\u003Cdiv class=\"MsoNormal\"\u003EToday we provide you new blogger tips to add facebook like popup box for blogger. Some time ago we discussed about how to add like box widget in your sidebar now we provide you full step by step guide to add popup like box widget for blogger to increase more facebook likes of your facebook fan page. This facebook like box appear after your site or page load.\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EAdd Facebook Like Popup Box widget for Blogger\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003EFollow below steps to Add Facebook Like Popup Box widget for Blogger:\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 1\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003ELog in into Blogger Dashboard.\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 2\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003EGo to Template and Click on Edit HTML Button as shown in below picture.\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\" Facebook Like Popup Box\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-4hZvBi1gtDU\/Ucx0ipdrDBI\/AAAAAAAAANs\/MnWwtL6jEfw\/s640\/Blogger-Edit-Template-html.png\" height=\"481\" title=\" Facebook Like Popup Box\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 3\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003EFind below Code With the help of CTRL+F\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/body\u0026gt;\u003C\/blockquote\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 4\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003ECopy and Paste below code before \u0026lt;\/body\u0026gt;:\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E#haakblogFBpop {\u003Cbr \/\u003Eposition:fixed !important;\u003Cbr \/\u003Eposition:absolute;\u003Cbr \/\u003Etop:-1000px;\u003Cbr \/\u003Eleft:50%;\u003Cbr \/\u003Emargin:0px 0px 0px -182px;\u003Cbr \/\u003Ewidth:300px;\u003Cbr \/\u003Eheight:auto;\u003Cbr \/\u003Epadding:16px;\u003Cbr \/\u003Ebackground:#FEFEFE;font:normal Dosis, Georgia, Serif;\u003Cbr \/\u003Ecolor:#111;\u003Cbr \/\u003Eborder:2px solid #333;\u003Cbr \/\u003E-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);\u003Cbr \/\u003E-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);\u003Cbr \/\u003Ebox-shadow:0px 1px 2px rgba(0,0,0,0.4);\u003Cbr \/\u003E-webkit-border-radius:10px;\u003Cbr \/\u003E-moz-border-radius:10px;\u003Cbr \/\u003Eborder-radius:10px;\u003Cbr \/\u003E}\u003Cbr \/\u003E#haakblogFBpop a.haakblogclose {\u003Cbr \/\u003Eposition:absolute;\u003Cbr \/\u003Etop:-10px;\u003Cbr \/\u003Eright:-10px;\u003Cbr \/\u003Ebackground:#fff;\u003Cbr \/\u003Efont:bold 16px Arial, Sans-Serif;\u003Cbr \/\u003Etext-decoration:none;\u003Cbr \/\u003Eline-height:22px;\u003Cbr \/\u003Ewidth:22px;\u003Cbr \/\u003Etext-align:center;\u003Cbr \/\u003Ecolor:#000000;\u003Cbr \/\u003Eborder:2px solid #333;\u003Cbr \/\u003E-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);\u003Cbr \/\u003E-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);\u003Cbr \/\u003Ebox-shadow:0px 1px 2px rgba(0,0,0,0.4);\u003Cbr \/\u003E-webkit-border-radius:22px;\u003Cbr \/\u003E-moz-border-radius:22px;\u003Cbr \/\u003Eborder-radius:25px;\u003Cbr \/\u003Ecursor:pointer;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026nbsp;\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.1\/jquery.min.js' type='text\/javascript'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E$(window).bind(\u0026amp;quot;load\u0026amp;quot;, function() {\u003Cbr \/\u003E\/\/ Animate Top\u003Cbr \/\u003E$(\u0026amp;#39;#haakblogFBpop\u0026amp;#39;).animate({top:\u0026amp;quot;150px\u0026amp;quot;}, 1000);\u003Cbr \/\u003E\/\/ Widget by www.haakblog.com\u003Cbr \/\u003E$(\u0026amp;#39;a.haakblogclose\u0026amp;#39;).click(function() {\u003Cbr \/\u003E$(this).parent().fadeOut();\u003Cbr \/\u003Ereturn false;\u003Cbr \/\u003E});\u003Cbr \/\u003E});\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='haakblogFBpop'\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- Widget by www.haakblog.com Start --\u0026gt;\u003Cbr \/\u003E\u0026lt;center\u0026gt;\u003Cbr \/\u003E\u0026lt;b\u0026gt;Don\u0026amp;#39;t Forget To Join US Our Community\u0026lt;\/b\u0026gt;\u0026lt;\/center\u0026gt;\u003Cbr \/\u003E\u0026lt;center\u0026gt;\u003Cbr \/\u003E\u0026lt;iframe allowtransparency='true' frameborder='0' scrolling='no'  src='\/\/www.facebook.com\/plugins\/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F\u003Cspan style=\"color: red;\"\u003E2014Help\u003C\/span\u003E\u0026amp;amp;width=300\u0026amp;amp;height=258\u0026amp;amp;show_faces=true\u0026amp;amp;colorscheme=light\u0026amp;amp;stream=false\u0026amp;amp;show_border=false\u0026amp;amp;header=false\u0026amp;amp;appId=196282097100252'  style='border:none; overflow:hidden; width:300px; height:258px;'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/center\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- Widget by 2014help.blogspot.com End --\u0026gt;\u003Cbr \/\u003E\u0026lt;a class='haakblogclose' href='#'\u0026gt;\u0026amp;#215;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;center style='float:right; margin-right:10px;'\u0026gt;\u003Cbr \/\u003E\u0026lt;span style='font-size:xx-small; color:#000; text-decoration:none;'\u0026gt;\u0026lt;\/span\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"http:\/\/www.haakblog.com\" rel=\"dofollow\" target=\"_blank\"  title=\"blogger\"\u0026gt;\u0026lt;img src=\"https:\/\/bitly.com\/haakblog\"  alt=\"blogger\" border=\"0\" style=\"position: fixed; bottom: 10%; right:  0%;\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;a  href='http:\/\/www.haakblog.com\/2013\/10\/add-facebook-like-popup-box-for-blogger.html'  style='font-size:xx-small; color:#3B78CD; text-decoration:none;'  target='_blank'\u0026gt;Widget\u0026lt;\/a\u0026gt;\u0026lt;\/center\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cb\u003ETips:\u003C\/b\u003E Change \u003Cspan style=\"color: red;\"\u003E2014Help\u003C\/span\u003E to your Facebook Page Name\u003Cbr \/\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 5\u003C\/h3\u003E\u003Cbr \/\u003E\u003Cdiv class=\"MsoNormal\"\u003EClick on Save Button.\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.dapurumi.co.vu\/feeds\/2117345359184740693\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.blogger.com\/comment.g?blogID=5226425127885778806\u0026postID=2117345359184740693\u0026isPopup=true","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/2117345359184740693"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/2117345359184740693"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.dapurumi.co.vu\/2014\/03\/add-facebook-like-popup-box-for-blogger.html","title":"Add Facebook Like Popup Box for Blogger"}],"author":[{"name":{"$t":"Anonymous"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14778558380762837110"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-4hZvBi1gtDU\/Ucx0ipdrDBI\/AAAAAAAAANs\/MnWwtL6jEfw\/s72-c\/Blogger-Edit-Template-html.png","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-5226425127885778806.post-487540451501550548"},"published":{"$t":"2014-03-01T16:27:00.001-08:00"},"updated":{"$t":"2014-03-01T16:28:27.313-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger widget"}],"title":{"type":"text","$t":"Simple Related Posts Widget For Blogger With Thumbnails"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\"\u003E\u003Cdiv class=\"MsoNormal\"\u003EHere we provide Simple Related Posts Widget for Blogger with Thumbnails for your blog post. Related posts widget shows other posts in same category or label. With the help of related post widget you can increase your blog page views and attract your readers to give related posts for spend more time. It’s help to increase visitor time periods of your website. If you need this related post widget you need to create some changes in your Template.\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Related Posts Widget\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-36gN5OeUxb0\/Uc3OWt0iT5I\/AAAAAAAAAOA\/qdfhKVdeMtg\/s400\/Blogger_landing_page1.jpg\" height=\"176\" title=\"Related Posts Widget\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003EHow to Add Related Posts Widget\u003C\/h2\u003E\u003Cdiv class=\"MsoNormal\"\u003EYou can easily add related posts widget with follow below steps:\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 1\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003EGo to your blogger Dashboard \u0026gt; Template \u0026gt; Edit HTML as shown in below picture.\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Related Posts Widget\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-naQG_kwazwg\/UcHhGX2-hsI\/AAAAAAAAAJg\/Kx4dfjk4pfA\/s400\/edit+html.PNG\" height=\"218\" title=\"Related Posts Widget\" width=\"400\" \/\u003E\u003Cspan style=\"text-align: left;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 2\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003EClick on the \"Expand widgets template\" as shown in below picture.\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Related Posts Widget\" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-rgL1ElcR_aM\/Ucx00Dojf1I\/AAAAAAAAAN0\/2zEIU7LIdz8\/s400\/ExpandWidgetTemplates.jpg\" height=\"214\" title=\"Related Posts Widget\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 3\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003ESearch below code with the help of CTRL + F\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 4\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003ECopy below code and Paste it just before \u0026lt;\/head\u0026gt;\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;!--Related Posts with thumbnails Scripts and Styles Start--\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- remove --\u0026gt;\u003Cspan style=\"color: lime;\"\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E#related-posts {\u003Cbr \/\u003Efloat:center;\u003Cbr \/\u003Etext-transform:none;\u003Cbr \/\u003Eheight:100%;\u003Cbr \/\u003Emin-height:100%;\u003Cbr \/\u003Epadding-top:5px;\u003Cbr \/\u003Epadding-left:5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E#related-posts h2{\u003Cbr \/\u003Efont-size: 18px;\u003Cbr \/\u003Eletter-spacing: 2px;\u003Cbr \/\u003Efont-weight: bold;\u003Cbr \/\u003Etext-transform: none;\u003Cbr \/\u003Ecolor: #5D5D5D;\u003Cbr \/\u003Efont-family: Arial Narrow;\u003Cbr \/\u003Emargin-bottom: 0.75em;\u003Cbr \/\u003Emargin-top: 0em;\u003Cbr \/\u003Epadding-top: 0em;\u003Cbr \/\u003E}\u003Cbr \/\u003E#related-posts a{\u003Cbr \/\u003Eborder-right: 1px dotted #DDDDDD;\u003Cbr \/\u003Ecolor:#5D5D5D;\u003Cbr \/\u003E}\u003Cbr \/\u003E#related-posts a:hover{\u003Cbr \/\u003Ecolor:black;\u003Cbr \/\u003Ebackground-color:#EDEDEF;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003Evar defaultnoimage=\u0026amp;quot;\u003Cspan style=\"color: red;\"\u003Ehttp:\/\/3.bp.blogspot.com\/-PpjfsStySz0\/UF91FE7rxfI\/AAAAAAAACl8\/092MmUHSFQ0\/s1600\/no_image.jpg\u003C\/span\u003E\u0026amp;quot;;\u003Cbr \/\u003Evar maxresults=\u003Cspan style=\"color: blue;\"\u003E5\u003C\/span\u003E;\u003Cbr \/\u003Evar splittercolor=\u0026amp;quot;#DDDDDD\u0026amp;quot;;\u003Cbr \/\u003Evar relatedpoststitle=\u0026amp;quot;Related Posts\u0026amp;quot;;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src='http:\/\/helplogger.googlecode.com\/svn\/trunk\/related-posts-with-big-thumbnails.js' type='text\/javascript'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- remove --\u0026gt;\u003Cspan style=\"color: lime;\"\u003E\u0026lt;\/b:if\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;!--Related Posts with thumbnails Scripts and Styles End--\u0026gt;\u003C\/blockquote\u003EYou can changed your default picture, Just changed red URL with your new  default Picture URL. You can also changed number of post, just changed\u0026nbsp;\u003Cspan style=\"color: blue;\"\u003E5\u003C\/span\u003E\u0026nbsp;to your values that you want to show. If you also want to show related post on homepage then just removed Green colored codes.\u003Cbr \/\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 5\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003ENow Search following code: \u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/blockquote\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 6\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003ECopy and paste below code just above it:\u003C\/div\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;!-- Related Posts with Thumbnails Code Start--\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- remove --\u0026gt;\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='related-posts'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:loop values='data:post.labels' var='label'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:label.isLast != \u0026amp;quot;true\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;script expr:src='\u0026amp;quot;\/feeds\/posts\/default\/-\/\u0026amp;quot; +  data:label.name +  \u0026amp;quot;?alt=json-in-script\u0026amp;amp;callback=related_results_labels_thumbs\u0026amp;amp;max-results=6\u0026amp;quot;'  type='text\/javascript'\/\u0026gt;\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003EremoveRelatedDuplicates_thumbs();\u003Cbr \/\u003EprintRelatedLabels_thumbs(\u0026amp;quot;\u0026lt;data:post.url\/\u0026gt;\u0026amp;quot;);\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;\/div\u0026gt;\u0026lt;div style='clear:both'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- remove --\u0026gt;\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.url == data:blog.homepageUrl'\u0026gt;\u0026lt;b:if cond='data:post.isFirstPost'\u0026gt;\u003Cbr \/\u003E\u0026lt;a href='http:\/\/www.haakblog.com'\u0026gt;\u0026lt;img alt='Blogger Tricks'  src='http:\/\/3.bp.blogspot.com\/-K65p5zLLKQk\/T3ObCINoP7I\/AAAAAAAABmI\/dF84-alnOu4\/s1600\/best+blogger+tips.png'\/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;a href=\"http:\/\/www.haakblog.com\"  rel=\"dofollow\" target=\"_blank\" title=\"blogger\"\u0026gt;\u0026lt;img  src=\"https:\/\/bitly.com\/haakblog\" alt=\"blogger\" border=\"0\"  style=\"position: fixed; bottom: 10%; right: 0%;\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;a  href=\"http:\/\/www.hon99.com\" rel=\"dofollow\" target=\"_blank\"  title=\"blogger\"\u0026gt;\u0026lt;img src=\"https:\/\/bitly.com\/haakblog\"  alt=\"blogger\" border=\"0\" style=\"position: fixed; bottom: 10%; right:  0%;\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;div id=\"rpdr\" style=\"font-family: arial, sans-serif; font-size: 9px;\"\u0026gt;\u003Cbr \/\u003E\u0026lt;a  href=\"http:\/\/www.haakblog.com\/2013\/06\/simple-related-posts-widget-for-blogger-with-thumbnails.html\"  target=\"_blank\" title=\"Widget\"\u0026gt;Related Posts  Widget\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- Related Posts with Thumbnails Code End--\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3 style=\"text-align: left;\"\u003EStep 7\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\"\u003ESave Template\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv class=\"MsoNormal\"\u003EYou're done perfectly. Now refreshed your blog post to see related post with thumbnail in your blog post, it's look like as shown in below picture.\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Related Posts Widget \" border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-WafYKI0VZjA\/Uc3O6lgPYxI\/AAAAAAAAAOI\/R13Nm3xK9j8\/s640\/related+post.png\" height=\"284\" title=\"Related Posts Widget \" width=\"640\" \/\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.dapurumi.co.vu\/feeds\/487540451501550548\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.blogger.com\/comment.g?blogID=5226425127885778806\u0026postID=487540451501550548\u0026isPopup=true","title":"1 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/487540451501550548"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/487540451501550548"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.dapurumi.co.vu\/2014\/03\/simple-related-posts-widget-for-blogger.html","title":"Simple Related Posts Widget For Blogger With Thumbnails"}],"author":[{"name":{"$t":"Anonymous"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14778558380762837110"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-36gN5OeUxb0\/Uc3OWt0iT5I\/AAAAAAAAAOA\/qdfhKVdeMtg\/s72-c\/Blogger_landing_page1.jpg","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-5226425127885778806.post-6722776144875395200"},"published":{"$t":"2014-02-26T16:02:00.000-08:00"},"updated":{"$t":"2014-02-26T16:02:29.334-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger widget"},{"scheme":"http://www.blogger.com/atom/ns#","term":"sticky sidebar"}],"title":{"type":"text","$t":"Make Blogger Sidebar Fixed (Sticky) That Scrolls with You!"},"content":{"type":"html","$t":"\u003Cimg alt=\"Blogger Sidebar Fixed Sticky\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-92yG4DObbCs\/UimM8drT6NI\/AAAAAAAACAE\/3sN272XHvIo\/s1600\/Sidebar-Fixed-when-scrool.jpg\" title=\"Blogger Sticky Sidebar\" \/\u003E\u003Cbr \/\u003EYou can arrange your blogger sidebar in several ways. Here I will show you some way of displaying sidebar as like fixed, sticky, animating. So lets see some example!\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cb\u003EFixed Sidebar– with only CSS [\u003Ca href=\"http:\/\/fixedsidebar.blogspot.com\/\" target=\"_blank\"\u003ESee Example\u003C\/a\u003E]\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003EjQuery Sticky Sidebar that Scrolls with Visitor! [\u003Ca href=\"http:\/\/sticky-sidebar.blogspot.com\/\" target=\"_blank\"\u003ESee Example\u003C\/a\u003E]\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003EjQuery Sticky Widget (only a specific widget will be Scroll ) [This page is a example!]\u003C\/b\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv style=\"text-align: left;\"\u003E\u003Cbr \/\u003E\u003Ca href=\"https:\/\/www.blogger.com\/null\" name=\"more\"\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003E1. Let's see, how to make Blogger Sidebar Fixed with only CSS\u003C\/h3\u003E\u003Cdiv style=\"text-align: left;\"\u003E\u003Cb\u003EFollow the instruction below:\u0026nbsp;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003EGo to your blogger blog \u003Cb\u003EDashboard \u0026gt; \u003C\/b\u003E\u003Cb\u003ETemplate \u0026gt; Edit HTML\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003ESearch (CTRL\u0026nbsp;+ F)\u003Cb\u003E\u0026nbsp; \u003C\/b\u003Efor the following code:\u003Cb\u003E\u003C\/b\u003E\u003C\/li\u003E\u003Ccode\u003E\u003Cblockquote\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\u003C\/code\u003E\u003Cli\u003EAnd just before \u003Cb\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/b\u003E paste the CSS code below:\u003C\/li\u003E\u003Ccode\u003E\u003Cblockquote\u003E.column-right-inner {     position: fixed; }\u003C\/blockquote\u003E\u003C\/code\u003E\u003Cli\u003ESave Template. We're Done!\u003C\/li\u003E\u003C\/ul\u003E\u003Cdiv style=\"text-align: left;\"\u003E\u003Cb\u003ENote: \u003C\/b\u003E\u003Cspan style=\"color: magenta;\"\u003E.column-right-inner\u003C\/span\u003E is the right sidebar \u003Cu\u003Eclass\u003C\/u\u003E. If you want to make Fised a left sidebar then replace it with \u003Cspan style=\"color: magenta;\"\u003E.column-left-inner\u003C\/span\u003E \u003C\/div\u003E\u003Cdiv style=\"text-align: left;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003E2. Let's see, how to make Sidebar Sticky+Animating with jQuery\u003C\/h3\u003E\u003Cb\u003EFollow the instruction below:\u0026nbsp;\u003C\/b\u003E\u003Cbr \/\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003EGo to your blogger blog \u003Cb\u003EDashboard \u0026gt; \u003C\/b\u003E\u003Cb\u003ETemplate \u0026gt; Edit HTML\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003ESearch (CTRL\u0026nbsp;+ F)\u003Cb\u003E\u0026nbsp; \u003C\/b\u003Efor the following code:\u003C\/li\u003E\u003Ccode\u003E\u003Cblockquote\u003E\u0026lt;\/body\u0026gt;\u003C\/blockquote\u003E\u003C\/code\u003E\u003Cli\u003EAnd just before \u003Cb\u003E\u0026lt;\/body\u0026gt;\u003C\/b\u003E paste the following jQuery code:\u003C\/li\u003E\u003Cpre\u003E\u003Cblockquote\u003E\u003Cbr \/\u003E\u0026lt;script type='text\/javascript' src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.2\/jquery.min.js?ver=1.3.2'\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E    \u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E        $(function() {\u003Cbr \/\u003E            var offset = $(\"\u003Cspan style=\"color: magenta;\"\u003E.column-right-inner\u003C\/span\u003E\").offset();\u003Cbr \/\u003E            var \u003Cspan style=\"color: red;\"\u003EtopPadding = 15;\u003C\/span\u003E\u003Cbr \/\u003E            $(window).scroll(function() {\u003Cbr \/\u003E                if ($(window).scrollTop() \u0026gt; offset.top) {\u003Cbr \/\u003E                    $(\"\u003Cspan style=\"color: magenta;\"\u003E.column-right-inner\u003C\/span\u003E\").stop().animate({\u003Cbr \/\u003E                        marginTop: $(window).scrollTop() - offset.top + topPadding\u003Cbr \/\u003E                    });\u003Cbr \/\u003E                } else {\u003Cbr \/\u003E                    $(\"\u003Cspan style=\"color: magenta;\"\u003E.column-right-inner\u003C\/span\u003E\").stop().animate({\u003Cbr \/\u003E                        marginTop: 0\u003Cbr \/\u003E                    });\u003Cbr \/\u003E                };\u003Cbr \/\u003E            });\u003Cbr \/\u003E        });\u003Cbr \/\u003E    \u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cli\u003ESave Template. We're Done!\u003C\/li\u003E\u003C\/ul\u003E\u003Cb\u003ENote: \u003C\/b\u003E\u003Cspan style=\"color: magenta;\"\u003E.column-right-inner\u003C\/span\u003E is the right sidebar \u003Cu\u003Eclass\u003C\/u\u003E. If you want to make sticky a left sidebar then replace all those class with \u003Cspan style=\"color: magenta;\"\u003E.column-left-inner\u003C\/span\u003E from the jQuery code.\u003Cbr \/\u003EAnd\u003Cspan style=\"color: red;\"\u003E topPadding = 15; \u003C\/span\u003Echange the value if you need to increase\/decrease space on top of the sidebar.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 style=\"text-align: left;\"\u003E3. Let's see, how to make a \u003Cb\u003EWidget\u003C\/b\u003E Sticky with jQuery\u003C\/h3\u003ELook at the right sidebar of this page and scroll down, a AdSense ads widget is scrolling with you. Thats what I'm going to showing you the code for. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EWell\u003C\/b\u003E \u003Cb\u003EFollow the instruction below:\u003C\/b\u003E\u003Cbr \/\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003E\u0026nbsp;At first find-out your widget ID (ex. \u003Cb\u003EHTML7\u003C\/b\u003E) \u003C\/li\u003E\u003Cli\u003EGo to your blogger blog \u003Cb\u003EDashboard \u0026gt; \u003C\/b\u003E\u003Cb\u003ETemplate \u0026gt; Edit HTML\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003ESearch (CTRL\u0026nbsp;+ F)\u003Cb\u003E\u0026nbsp; \u003C\/b\u003Efor the following code:\u003C\/li\u003E\u003Ccode\u003E\u003Cblockquote\u003E\u0026lt;\/body\u0026gt;\u003C\/blockquote\u003E\u003C\/code\u003E\u003Cli\u003EAnd just before \u003Cb\u003E\u0026lt;\/body\u0026gt;\u003C\/b\u003E paste the following jQuery code:\u003C\/li\u003E\u003Cpre\u003E\u003Cblockquote\u003E\u003Cbr \/\u003E\u0026lt;script src='http:\/\/resources.infolinks.com\/js\/infolinks_main.js' type='text\/javascript'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.2\/jquery.min.js?ver=1.3.2' type='text\/javascript'\/\u0026gt;\u003Cbr \/\u003E    \u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E        $(function() {\u003Cbr \/\u003E            var offset = $(\u0026amp;quot;\u003Cspan style=\"color: red;\"\u003E#HTML7\u003C\/span\u003E\u0026amp;quot;).offset();\u003Cbr \/\u003E            var topPadding = 35;\u003Cbr \/\u003E            $(window).scroll(function() {\u003Cbr \/\u003E                if ($(window).scrollTop() \u0026amp;gt; offset.top) {\u003Cbr \/\u003E                    $(\u0026amp;quot;\u003Cspan style=\"color: red;\"\u003E#HTML7\u003C\/span\u003E\u0026amp;quot;).stop().animate({\u003Cbr \/\u003E                        marginTop: $(window).scrollTop() - offset.top + topPadding\u003Cbr \/\u003E                    });\u003Cbr \/\u003E                } else {\u003Cbr \/\u003E                    $(\u0026amp;quot;\u003Cspan style=\"color: red;\"\u003E#HTML7\u003C\/span\u003E\u0026amp;quot;).stop().animate({\u003Cbr \/\u003E                        marginTop: 0\u003Cbr \/\u003E                    });\u003Cbr \/\u003E                };\u003Cbr \/\u003E            });\u003Cbr \/\u003E        });\u003Cbr \/\u003E    \u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cb\u003E\u003Cu\u003ENote:\u003C\/u\u003E Replace \u003Cspan style=\"color: red;\"\u003E#HTML7\u003C\/span\u003E\u003C\/b\u003E \u003Cb\u003EWith Your Widget ID\u003C\/b\u003E  \u003C\/ul\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003ESave Template. We're Done!\u003C\/li\u003E\u003C\/ul\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cul style=\"text-align: left;\"\u003E\u003C\/ul\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.dapurumi.co.vu\/feeds\/6722776144875395200\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.blogger.com\/comment.g?blogID=5226425127885778806\u0026postID=6722776144875395200\u0026isPopup=true","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/6722776144875395200"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/6722776144875395200"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.dapurumi.co.vu\/2014\/02\/make-blogger-sidebar-fixed-sticky-that.html","title":"Make Blogger Sidebar Fixed (Sticky) That Scrolls with You!"}],"author":[{"name":{"$t":"Anonymous"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14778558380762837110"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-92yG4DObbCs\/UimM8drT6NI\/AAAAAAAACAE\/3sN272XHvIo\/s72-c\/Sidebar-Fixed-when-scrool.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-5226425127885778806.post-7197942083880961313"},"published":{"$t":"2014-02-13T15:09:00.003-08:00"},"updated":{"$t":"2014-02-13T15:09:59.605-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger widget"}],"title":{"type":"text","$t":" How To Install Random Post Widget To Your Blog"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; I have already posted an article on \u003Cspan class=\"IL_AD\" id=\"IL_AD1\"\u003Ehow to install\u003C\/span\u003E .So today,I decided that you guys should also know how to install Random Posts widget.That will bring about a change since every time the reader opens your blog,he doesn't have to see the same popular posts.(they change after a \u003Cspan class=\"IL_AD\" id=\"IL_AD3\"\u003Elong period\u003C\/span\u003E of time,at least mine does so)\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; This widget will be showing 5 posts in a random manner. It also displays comments,and thumbnails.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"https:\/\/www.blogger.com\/null\" name=\"more\"\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-SCLEZ_VwWnc\/Ulq65XV27XI\/AAAAAAAABFk\/TtqXgNpcnxA\/s1600\/Screenshot-4.png\" imageanchor=\"1\" style=\"margin-left: auto; margin-right: auto;\"\u003E\u003Cimg alt=\"Random Post Widget\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-SCLEZ_VwWnc\/Ulq65XV27XI\/AAAAAAAABFk\/TtqXgNpcnxA\/s1600\/Screenshot-4.png\" title=\"Random Post Widget\" \/\u003E\u003C\/a\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003ERandom Post Widget\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u003C\/div\u003E\u0026nbsp; \u0026nbsp; Follow the instructions below properly and you can setup the widget in no time.\u003Cbr \/\u003E\u003Cbr \/\u003E1.Go to\u0026nbsp; Blogger Dashboard\u0026gt;Template\u003Cbr \/\u003E\u003Cbr \/\u003E2.Click on Edit HTML.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-RKGQUHCSzXQ\/UlqhGh-ZFXI\/AAAAAAAABFE\/vmIhRHMP_ek\/s1600\/Screenshot-4.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"edit html\" border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-RKGQUHCSzXQ\/UlqhGh-ZFXI\/AAAAAAAABFE\/vmIhRHMP_ek\/s320\/Screenshot-4.png\" height=\"137\" title=\"edit html\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E3.Now use the Find feature or CTRL+F to search for the following piece of code.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;Courier New\u0026quot;,Courier,monospace;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; ]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-HWXpQ4-HgW8\/UlquMJze_hI\/AAAAAAAABFU\/nvGqHeJsKns\/s1600\/Screenshot-4.png\" imageanchor=\"1\" style=\"margin-left: auto; margin-right: auto;\"\u003E\u003Cimg alt=\"find code\" border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-HWXpQ4-HgW8\/UlquMJze_hI\/AAAAAAAABFU\/nvGqHeJsKns\/s1600\/Screenshot-4.png\" title=\"find code\" \/\u003E\u003C\/a\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003E\u003Cbr \/\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003C\/div\u003E\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E4. Check whether the following code is already present above \u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003Cspan style=\"font-family: \u0026quot;Courier New\u0026quot;,Courier,monospace;\"\u003E #random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp; If not,then copy and paste \u003Cspan class=\"IL_AD\" id=\"IL_AD4\"\u003Ethe code\u003C\/span\u003E just above it.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E5. Save Template.\u003Cbr \/\u003E\u003Cbr \/\u003E6. Go to Layout\u0026gt;Add A Gadget\u003Cbr \/\u003E\u003Cbr \/\u003E7. Select\u0026nbsp; HTML\/JavaScript\u003Cbr \/\u003E\u003Cbr \/\u003E8.Now,copy the code below and paste it in \u003Cspan class=\"IL_AD\" id=\"IL_AD2\"\u003Ethe blank\u003C\/span\u003E space \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;Courier New\u0026quot;,Courier,monospace;\"\u003E\u0026nbsp;\u0026lt;ul id='random-posts'\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javaScript'\u0026gt;\u003Cbr \/\u003Evar rdp_numposts=5;\u003Cbr \/\u003Evar rdp_snippet_length=150;\u003Cbr \/\u003Evar rdp_info='yes';\u003Cbr \/\u003Evar rdp_comment='Comments';\u003Cbr \/\u003Evar rdp_disable='Comments Disabled';\u003Cbr \/\u003Evar rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('\u0026lt;script type=\\\"text\/javascript\\\" src=\\\"\/feeds\/posts\/default?alt=json-in-script\u0026amp;max-results=0\u0026amp;callback=totalposts\\\"\u0026gt;\u0026lt;\\\/script\u0026gt;');function getvalue(){for(var i=0;i\u0026lt;rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j\u0026lt;rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javaScript'\u0026gt;\u003Cbr \/\u003Efunction random_posts(json){for(var i=0;i\u0026lt;rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet=\"\";}};rdp_get_snippet=rdp_get_snippet.replace(\/\u0026lt;[^\u0026gt;]*\u0026gt;\/g,\"\");if(rdp_get_snippet.length\u0026lt;rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(\" \");rdp_snippet=rdp_get_snippet.substring(0,space)+\"\u0026amp;#133;\";};for(var j=0;j\u0026lt;entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb=\"http:\/\/2.bp.blogspot.com\/-XQt2v4x5dl8\/T1zdpFh392I\/AAAAAAAABUU\/xMJZDedw38k\/s1600\/default.jpg\"}}};document.write('\u0026lt;li\u0026gt;');document.write('\u0026lt;img alt=\"'+rdp_posttitle+'\" src=\"'+rdp_thumb+'\"\/\u0026gt;');document.write('\u0026lt;div\u0026gt;\u0026lt;a href=\"'+rdp_posturl+'\" rel=\"nofollow\" title=\"'+rdp_snippet+'\"\u0026gt;'+rdp_posttitle+'\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;');if(rdp_info=='yes'){document.write('\u0026lt;span\u0026gt;'+rdp_postdate.substring(8,10)+'\/'+rdp_postdate.substring(5,7)+'\/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'\u0026lt;\/span\u0026gt;'}document.write('\u0026lt;div style=\"clear:both\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;')}};getvalue();for(var i=0;i\u0026lt;rdp_numposts;i++){document.write('\u0026lt;script type=\\\"text\/javascript\\\" src=\\\"\/feeds\/posts\/default?alt=json-in-script\u0026amp;start-index='+rdp_current[i]+'\u0026amp;max-results=1\u0026amp;callback=random_posts\\\"\u0026gt;\u0026lt;\\\/script\u0026gt;')};\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;\/ul\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E9.Click on Save Arrangement and view your blog to see if the widget is working correctly.\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.dapurumi.co.vu\/feeds\/7197942083880961313\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.blogger.com\/comment.g?blogID=5226425127885778806\u0026postID=7197942083880961313\u0026isPopup=true","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/7197942083880961313"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/7197942083880961313"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.dapurumi.co.vu\/2014\/02\/how-to-install-random-post-widget-to.html","title":" How To Install Random Post Widget To Your Blog"}],"author":[{"name":{"$t":"Anonymous"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14778558380762837110"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-SCLEZ_VwWnc\/Ulq65XV27XI\/AAAAAAAABFk\/TtqXgNpcnxA\/s72-c\/Screenshot-4.png","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-5226425127885778806.post-6935801601229047191"},"published":{"$t":"2014-02-13T14:36:00.003-08:00"},"updated":{"$t":"2014-02-13T15:21:35.851-08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger widget"}],"title":{"type":"text","$t":" How To Create Pop-Up Email Subscription Widget For Your Blog"},"content":{"type":"html","$t":"\u003Cspan id=\"9116573513545083677\"\u003EThe Social subscription widget is for the  people who wants more genuine readers and good fan following for them.  Yes the Subscription widget is an RSS type , which the people will enter  their email and subscribe to the updates of the blog. Whenever the user  post new content they will get the news on their email immediately.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cspan id=\"9116573513545083677\"\u003E\u003Cimg alt=\"Cool widget for blogger\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-6ro2DEYM5GE\/UZdJTJynBHI\/AAAAAAAAC1E\/zYvucGmAcAE\/s1600\/Blue+Color+Social+Subscription+Widget.png\" title=\"Add subscription widget\" \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cspan id=\"9116573513545083677\"\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EThe Subscription widget here is mix up of CSS and HTML, and it is  flavored with the Social media icons too, which reduces the blog space  too.\u003Cbr \/\u003E\u003Cbr \/\u003EDEMO\u003Cbr \/\u003E\u003Cbr \/\u003E1) Go to the\u0026nbsp;\u003Ca href=\"http:\/\/www.blogger.com\/\" rel=\"nofollow\"\u003EBlogger\u003C\/a\u003E\u0026nbsp;and sign in with your account\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"https:\/\/www.blogger.com\/null\" name=\"more\"\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E2) After going to your Dashboard, you can see this in your blog\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-iUMSY0fDVy0\/UZdIuIOJ1zI\/AAAAAAAAC0s\/qTW9KyxrBBM\/s1600\/11.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E3)\u0026nbsp;\u0026nbsp;Left to the view blog an arrow is there, after clicking this arrow we get the options like below\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-f_blzpNy0oM\/UZdIzDv7sqI\/AAAAAAAAC00\/Hnb0ey762S8\/s1600\/111.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E4) Now select the Layout Option as shown in above\u003Cbr \/\u003E\u003Cbr \/\u003E5) Then Click the Add gadget and Select the HTML\/Javascript\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Guide to add gadget in blogger\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-qfVEhQiKNAk\/UZdJG5ufTrI\/AAAAAAAAC08\/bH6zy6hGHJc\/s320\/1111.png\" height=\"63\" title=\"How to add gadget \" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E6) Now paste this code in that box\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003C\/blockquote\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style\u0026gt; #socialnetworking { border: 1px solid #ebebeb; width:  280px; } .fb-likebox { padding: 10px 10px 0 10px; border-bottom: 1px  solid #ebebeb; } .googleplus { background: #eef9fd; border-top: 1px  solid white; border-bottom: 1px solid #ebebeb; font-size: 12px; color:  #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva,  sans-serif; } .googleplus span { color: #000; font-size: 11px;  position: absolute; margin: 9px 70px; width: 280px; } #widgetbox {  background: #EBEBEB; padding: 2px 8px 2px 3px; text-align: right;  border-image: initial; } #widgetbox .author-credit a { font-size: 10px;  font-weight: bold; text-shadow: 1px 1px white; color: #1E598E;  text-decoration: none; } .g-plusone { float: left; } .twitter {  background: #eef9fd; border-top: 1px solid #fff; padding: 10px; } .fb {  background: #eef9fd; border-top: 1px solid white; border-bottom: 1px  solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px;  line-height: 1px; font-family: Verdana, Geneva, sans-serif; } .fb span {  color: #000; font-size: 11px; position: absolute; margin: -12px 100px;  width: 280px; } .pterest { background: #EFF5FB; border-bottom: 1px solid  #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height:  1px; font-family: Verdana, Geneva, sans-serif; border-top: 1px solid  #ddd; } #email-news-subscribe .email-box { padding: 5px 10px;  font-family: \"Arial\",\"Helvetica\",sans-serif; border-top: 0;  border-image: initial; height: 35px; background: #EFF8FB; width: 260px; }  #email-news-subscribe .email-box input.email { background: #FFFFFF;  border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px;  -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius:  3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius:  3px; border-image: initial; font-family: \"Arial\",\"Helvetica\",sans-serif;  } #email-news-subscribe .email-box input.email:focus { color: #333 }  #email-news-subscribe .email-box input.subscribe { background:  -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background:  -webkit-gradient(linear,left top,left  bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background:  -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);  -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family:  \"Arial\",\"Helvetica\",sans-serif; border-radius: 3px; -moz-border-radius:  3px; -webkit-border-radius: 3px; border: 1px solid #cc7c00; color:  white; text-shadow: #d08d00 1px 1px 0; padding: 7px 14px; margin-left:  3px; font-weight: bold; font-size: 12px; cursor: pointer; border-image:  initial; } #email-news-subscribe .email-box input.subscribe:hover {  background: #ff9b00; background-image:  -moz-linear-gradient(top,#ffda4d,#ff9b00); background-image:  -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));  filter:  progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);  outline: 0; -moz-box-shadow: 0 0 3px #999; -webkit-box-shadow: 0 0 3px  #999; box-shadow: 0 0 3px #999 background:-webkit-gradient(linear,left  top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));  background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);  -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:  3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px  solid #cc7c00; color: #FFFFFF; text-shadow: #d08d00 1px 1px 0 }  \u0026lt;\/style\u0026gt; \u0026lt;div id=\"socialnetworking\"\u0026gt; \u0026lt;!-- Begin Widget  --\u0026gt; \u0026lt;div class=\"fb-likebox\"\u0026gt; \u0026lt;!-- Facebook --\u0026gt;  \u0026lt;center\u0026gt; \u0026lt;a style=\"margin-right: 10px;\" rel=\"me\" href=\"User id\"  target=\"_blank\"\u0026gt; \u0026lt;img  src=\"http:\/\/2.bp.blogspot.com\/-TtecU81mxEA\/TrHxZowPn9I\/AAAAAAAABI8\/UGSwDMYkt-c\/s1600\/Button  G.png\" \/\u0026gt;\u0026lt;\/a\u0026gt; \u0026lt;a style=\"margin-right: 10px;\"  href=\"http:\/\/www.facebook.com\/Gkinfo4all\" target=\"_blank\"  rel=\"nofollow\"\u0026gt; \u0026lt;img  src=\"http:\/\/2.bp.blogspot.com\/_rLYhkzmU7RY\/TED5ihk9m6I\/AAAAAAAAABI\/v_2rKVhRE0g\/s320\/1oaxc4.jpg.png\"  \/\u0026gt;\u0026lt;\/a\u0026gt; \u0026lt;a style=\"margin-right: 10px;\"  href=\"http:\/\/feeds2.feedburner.com\/Way2usefulinfo\" target=\"_blank\"  rel=\"nofollow\"\u0026gt; \u0026lt;img  src=\"http:\/\/3.bp.blogspot.com\/_rLYhkzmU7RY\/TED5SYSjFII\/AAAAAAAAABA\/xcmxc456JgQ\/s1600\/2d7itk9.jpg.png\"  \/\u0026gt;\u0026lt;\/a\u0026gt; \u0026lt;a style=\"margin-right: 10px;\"  href=\"http:\/\/feedburner.google.com\/fb\/a\/mailverify?uri=Way2usefulinfo\u0026amp;amp;loc=en_US\"  target=\"_blank\" rel=\"nofollow\"\u0026gt; \u0026lt;img  src=\"http:\/\/1.bp.blogspot.com\/_rLYhkzmU7RY\/TED5LW-dTrI\/AAAAAAAAAAw\/mozQRQcCttU\/s320\/j5krgl.jpg.png\"  \/\u0026gt;\u0026lt;\/a\u0026gt; \u0026lt;a style=\"margin-right: 10px;\"  href=\"http:\/\/twitter.com\/#!\/Usefulinfo4all\" target=\"_blank\"  rel=\"nofollow\"\u0026gt; \u0026lt;img  src=\"http:\/\/3.bp.blogspot.com\/_rLYhkzmU7RY\/TED5Omxmx_I\/AAAAAAAAAA4\/iU6SVPqEQWI\/s1600\/3312cmr.jpg.png\"  \/\u0026gt;\u0026lt;\/a\u0026gt; \u0026lt;\/center\u0026gt; \u0026lt;\/div\u0026gt; \u0026lt;div  class=\"googleplus\"\u0026gt; \u0026lt;span\u0026gt;\u0026lt;font\u0026gt;\u0026lt;font\u0026gt;Recommend Us  On Google \u0026lt;\/font\u0026gt;\u0026lt;\/font\u0026gt;\u0026lt;\/span\u0026gt; \u0026lt;!-- GooglePlus  --\u0026gt; \u0026lt;!-- Place this tag where you want the 1 button to render  --\u0026gt; \u0026lt;g:plusone size=\"medium\"\u0026gt;\u0026lt;\/g:plusone\u0026gt; \u0026lt;!-- Place  this render call where appropriate --\u0026gt; \u0026lt;script  type=\"text\/javascript\"\u0026gt; (function() { var po =  document.createElement('script'); po.type = 'text\/javascript'; po.async =  true; po.src = 'https:\/\/apis.google.com\/js\/plusone.js'; var s =  document.getElementsByTagName('script')[0];  s.parentNode.insertBefore(po, s); })(); \u0026lt;\/script\u0026gt; \u0026lt;script  type=\"text\/javascript\"\u0026gt; gapi.plusone.render ( 'plusone-div', {  \"size\": \"medium\", \"count\": \"true\" } ); \u0026lt;\/script\u0026gt; \u0026lt;\/div\u0026gt;  \u0026lt;div class=\"fb\"\u0026gt; \u0026lt;!-- Twitter --\u0026gt; \u0026lt;iframe  src=\"\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Ffacebook.com%2GKinfo4all\u0026amp;amp;send=false\u0026amp;amp;layout=button_count\u0026amp;amp;width=450\u0026amp;amp;show_faces=true\u0026amp;amp;action=like\u0026amp;amp;colorscheme=light\u0026amp;amp;font=verdana\u0026amp;amp;height=21\"  scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden;  width:450px; height:21px;\" allowtransparency=\"true\"\u0026gt; \u0026lt;\/iframe\u0026gt;  \u0026lt;span\u0026gt;Like Us On Facebook\u0026lt;\/span\u0026gt; \u0026lt;\/div\u0026gt; \u0026lt;div  class=\"twitter\"\u0026gt; \u0026lt;!-- Twitter --\u0026gt; \u0026lt;iframe  allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\"  src=\"http:\/\/platform.twitter.com\/widgets\/follow_button.1335513764.html#_=1335528101755\u0026amp;amp;id=twitter-widget-0\u0026amp;amp;lang=en\u0026amp;amp;screen_name=Usefulinfo4all\u0026amp;amp;show_count=true\u0026amp;amp;show_screen_name=true\u0026amp;amp;size=m\"  class=\"twitter-follow-button\" style=\"width: 244px; height: 20px; \"  title=\"Twitter Follow Button\"\u0026gt; \u0026lt;\/iframe\u0026gt; \u0026lt;script  src=\"http:\/\/platform.twitter.com\/widgets.js\"  type=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt; \u0026lt;\/div\u0026gt; \u0026lt;div  class=\"pterest\"\u0026gt; \u0026lt;a  href=\"http:\/\/pinterest.com\/Usefulinfo\/\"\u0026gt;\u0026lt;img  src=\"http:\/\/passets-cdn.pinterest.com\/images\/about\/buttons\/follow-me-on-pinterest-button.png\"  width=\"169\" height=\"28\" alt=\"Follow Me on Pinterest\"\/\u0026gt;\u0026lt;\/a\u0026gt;  \u0026lt;\/div\u0026gt; \u0026lt;div id=\"email-news-subscribe\"\u0026gt; \u0026lt;!-- Email  Subscribe --\u0026gt; \u0026lt;div class=\"email-box\"\u0026gt; \u0026lt;form  action=\"http:\/\/feedburner.google.com\/fb\/a\/mailverify\" method=\"post\"  target=\"popupwindow\"  onsubmit=\"window.openundefined'http:\/\/feedburner.google.com\/fb\/a\/mailverify?uri='Way2usefulinfo',  'popupwindow', 'scrollbars=yes,width=550,height=520');return true\"\u0026gt;  \u0026lt;input class=\"email\" type=\"text\" style=\"width: 140px; font-size:  12px;\" id=\"email\" name=\"email\" value=\"Enter Your Email here..\"  onfocus=\"if(this.value==this.defaultValue)this.value=\u0026amp;#39;\u0026amp;#39;;\"   onblur=\"if(this.value==\u0026amp;#39;\u0026amp;#39;)this.value=this.defaultValue;\"\/\u0026gt;  \u0026lt;input type=\"hidden\" value=\"Way2usefulinfo\" name=\"uri\"\/\u0026gt;  \u0026lt;input type=\"hidden\" name=\"loc\" value=\"en_US\"\/\u0026gt; \u0026lt;input  class=\"subscribe\" name=\"commit\" type=\"submit\" value=\"Subscribe\"\/\u0026gt;  \u0026lt;\/form\u0026gt; \u0026lt;\/div\u0026gt; \u0026lt;\/div\u0026gt; \u0026lt;div id=\"widgetbox\"  style=\"background: #FBEFEF;border-top: 1px solid #ddd;padding: 1px 8px  1px 3px;text-align: right;border-image:  initial;font-size:10px;font-family: \"arial\",\"helvetica\",sans-serif;\"\u0026gt;  \u0026lt;span class=\"author-credit\" style=\"font-family: Arial, Helvetica,  sans-serif;\"\u0026gt;\u0026lt;a  href=\"http:\/\/way2usefulinfo.blogspot.com\/2013\/05\/''\u003Cspan style=\"background-color: #edf4ff; color: #888888; font-family: Arial, Helvetica, sans-serif; font-size: 13px;\"\u003Ehow-to-add-subscription-widget-for.html\u003C\/span\u003E\" target=\"_blank\"\u0026gt;Get This Widget »\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt; \u0026lt;\/div\u0026gt; \u0026lt;!-- End Widget --\u0026gt; \u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003C\/span\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.dapurumi.co.vu\/feeds\/6935801601229047191\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.blogger.com\/comment.g?blogID=5226425127885778806\u0026postID=6935801601229047191\u0026isPopup=true","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/6935801601229047191"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5226425127885778806\/posts\/default\/6935801601229047191"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.dapurumi.co.vu\/2014\/02\/how-to-create-pop-up-email-subscription.html","title":" How To Create Pop-Up Email Subscription Widget For Your Blog"}],"author":[{"name":{"$t":"Anonymous"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/14778558380762837110"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-6ro2DEYM5GE\/UZdJTJynBHI\/AAAAAAAAC1E\/zYvucGmAcAE\/s72-c\/Blue+Color+Social+Subscription+Widget.png","height":"72","width":"72"},"thr$total":{"$t":"0"}}]}});