// 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\/-\/sticky+sidebar?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.dapurumi.co.vu\/search\/label\/sticky%20sidebar"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"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":"1"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"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"}}]}});