// API callback
relatedResultsLabels({"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-6670856475198141739"},"updated":{"$t":"2025-02-16T20:23:55.958+07:00"},"category":[{"term":"Tutorial Blog"},{"term":"Widget"},{"term":"General"},{"term":"Smartphone"},{"term":"Android"},{"term":"Tips Komputer"},{"term":"App Mobile"},{"term":"Tips SEO"},{"term":"Tips Youtube"},{"term":"Kesehatan dan Lifestyle"},{"term":"Tips Adsense"},{"term":"Tips Facebook"},{"term":"Full Review"},{"term":"Blogger Template Free"},{"term":"Blogger Templates"},{"term":"Free Blogger Template Responsive"},{"term":"Templates"},{"term":"Tips Bisnis"},{"term":"Review"},{"term":"Bisnis Online"},{"term":"Blog Tips"},{"term":"Pilih HP"},{"term":"Hosting dan Domain"},{"term":"Blogger v3"},{"term":"Samsung"},{"term":"Bitcoin"},{"term":"Tips Windows"},{"term":"Cryptocurrency"},{"term":"ÌÇÐÄvlog¹Ù·½Èë¿Ú"},{"term":"Xiaomi"},{"term":"AMP ÌÇÐÄvlog¹Ù·½Èë¿Ú"},{"term":"Disqus"},{"term":"CSS"},{"term":"JavaScript"},{"term":"Sastra"},{"term":"Google Search Console"},{"term":"Google Webmaster"},{"term":"Trik Blogger"},{"term":"Tutorial Singkat"},{"term":"Premium Template"},{"term":"Asus"},{"term":"iPhone"},{"term":"Breadcrumbs"},{"term":"Conditional Tags"},{"term":"Daftar Isi"},{"term":"Tips Blogger"},{"term":"BlogPosting"},{"term":"CloudFlare"},{"term":"Domain .co.vu"},{"term":"Forum"},{"term":"Hostinger"},{"term":"Hotel Mewah di Jakarta"},{"term":"Infinite Scroll"},{"term":"Jooble"},{"term":"Jooble Indonesia"},{"term":"Linguistik"},{"term":"Load More"},{"term":"Meta Data"},{"term":"Meta Data Keywords"},{"term":"Property Article Tag"},{"term":"Schema Markup"},{"term":"Service"},{"term":"Software"},{"term":"Tips Website"},{"term":"Traveloka"}],"title":{"type":"text","$t":"Blog bungfrangki"},"subtitle":{"type":"html","$t":"Blog bungfrangki berbagai panduan tips \u0026amp; tutorial Blogger untuk pemula, seperti template Blogspot, optimasi SEO, Tools, ÌÇÐÄvlog¹Ù·½Èë¿Ú, CSS, JavaScript, lainnya"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/-\/Widget?alt=json-in-script\u0026max-results=10"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/search\/label\/Widget"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/-\/Widget\/-\/Widget?alt=json-in-script\u0026start-index=11\u0026max-results=10"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"74"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"10"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-2457941008602053715"},"published":{"$t":"2024-08-30T12:31:00.005+07:00"},"updated":{"$t":"2024-08-31T09:43:36.208+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Infinite Scroll"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JavaScript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Load More"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tips Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Trik Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Mengatasi Infinite Scroll Blogger yang Error di Mobile"},"content":{"type":"html","$t":"\u003Cp\u003EMasalah infinite scroll yang tidak bekerja (error) di tampilan mobile sebetulnya sudah cukup lama saya menyadarinya. Tetapi baru saat ini saya coba mencarikan solusi untuk mengatasi hal tersebut. Fitur infinite scroll menjadi tidak bekerja sebagaimana mestinya saat website dibuka dengan URL mobile. URL mobile di Blogger biasanya ditandai dengan akhiran\u0026nbsp;\u003Cb\u003E?m=1\u003C\/b\u003E.\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhJxtts4PK0J6ssiE7r9NMnDsKfwYbyloCC6fIEb2CDmlgYCp5bWjwGNWKb34tcLc6lM5cwlbetwM0R_fSh4xupkW1_3IlIy0TJSq5e0p_yTkYGyGEVQ88da_N3kBMn2qwAMbHGQZfOOwvOt_xRwDowSvx_6EDT5SQxvGKCRzdBz60OqQPC_TCFtZnagn42\/s1920\/Blogger-Load-More-Infinite-Scroll.jpg\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Mengatasi Infinite Scroll Blogger yang Error di Mobile\" border=\"0\" data-original-height=\"1080\" data-original-width=\"1920\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhJxtts4PK0J6ssiE7r9NMnDsKfwYbyloCC6fIEb2CDmlgYCp5bWjwGNWKb34tcLc6lM5cwlbetwM0R_fSh4xupkW1_3IlIy0TJSq5e0p_yTkYGyGEVQ88da_N3kBMn2qwAMbHGQZfOOwvOt_xRwDowSvx_6EDT5SQxvGKCRzdBz60OqQPC_TCFtZnagn42\/s16000\/Blogger-Load-More-Infinite-Scroll.jpg\" title=\"Mengatasi Infinite Scroll Blogger yang Error di Mobile\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cp\u003ESebagai informasi, widget infinite scroll yang terpasang di blog ini adalah \u003Ci\u003Eonclick event\u003C\/i\u003E, yang akan memuat halaman terlama dengan mengklik tombol \u003Cb\u003ELoad More\u003C\/b\u003E.\u003C\/p\u003E\u003Cp\u003EAdapun pesan \u003Ci\u003Eerror \u003C\/i\u003Eyang muncul (di \u003Ci\u003Econsole\u003C\/i\u003E) saat mengklik tombol loadmore, kurang lebih sebagai berikut:\u003C\/p\u003E\u003Cp class=\"warning line-height-1\"\u003E\u003Csmall\u003EMixed Content: The page at 'https:\/\/www.bungfrangki.com\/?m=1' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http:\/\/www.bungfrangki.com\/search?updated-max=2023-02-17T20:34:00%2B07:00\u0026amp;max-results=8\u0026amp;m=1'. This request has been blocked; the content must be served over HTTPS.\u003C\/small\u003E\u003C\/p\u003E\u003Cp style=\"text-align: left;\"\u003EDan solusinya dapat memilih salah satu dari 2 cara berikut ini.\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003ECara Mengatasi Infinite Scroll Blogger yang Error di Perangkat (URL) Mobile\u003C\/h2\u003E\u003Ch2 style=\"text-align: left;\"\u003ECara 1\u003C\/h2\u003E\u003Cp\u003ESolusi pertama adalah dengan menambahkan meta tag khusus di blog. Silahkan copy dan paste kode meta tag berikut ini di atas \u003Ccode\u003E\u0026lt;\/head\u0026gt;\u003C\/code\u003E template Blogspot Anda.\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre class=\"html\"\u003E\u003Ccode\u003E\u0026lt;meta content=\"upgrade-insecure-requests\" http-equiv=\"Content-Security-Policy\" \/\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003ECara 2\u003C\/h2\u003E\u003Cp\u003EAtau, solusi lainnya adalah silahkan menambahkan JavaScript berikut ini. Letakkan di atas \u003Ccode\u003E\u0026lt;\/body\u0026gt;\u003C\/code\u003E pada template Blogspot masing-masing.\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre class=\"javascript\"\u003E\u003Ccode class=\"java\"\u003E\u003Cp\u003E\u0026lt;script\u0026gt;\u003C\/p\u003E\u003Cp\u003E\/\/\u0026lt;![CDATA[\u003C\/p\u003E\u003Cp\u003Ewindow.addEventListener(\"load\", (event) =\u0026gt; {\u003C\/p\u003E\u003Cp\u003Eif (window.location.protocol.indexOf('https') == 0){\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; var lm = document.createElement('meta');\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; lm.setAttribute('http-equiv', 'Content-Security-Policy');\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; lm.setAttribute('content', 'upgrade-insecure-requests');\u003C\/p\u003E\u003Cp\u003Edocument.getElementsByTagName('head')[0].appendChild(lm);\u003C\/p\u003E\u003Cp\u003E}\u0026nbsp;\u003C\/p\u003E\u003Cp\u003E});\u003C\/p\u003E\u003Cp\u003E\/\/]]\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026lt;\/script\u0026gt;\u003C\/p\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp class=\"info\"\u003E\u003Cstrong\u003EPerhatian:\u003C\/strong\u003E\u003Cbr \/\u003ECukup menggunakan salah satu dari dua cara di atas. Agar tidak mubazir. Mengingat dua cara di atas memiliki fungsi dan output yang sama.\u003C\/p\u003E\u003Ci class=\"separate\"\u003E\u003C\/i\u003E\u003Cp\u003E\u003Ci\u003EUpdate 31 Agustus 2024:\u003C\/i\u003E\u003C\/p\u003E\u003Ch2\u003ECara 3 (mempertahankan\u0026nbsp;XMLHttpRequest)\u003C\/h2\u003E\u003Cp\u003EAlih-alih mengganti metode untuk \u003Ci\u003Eretrive data\u003C\/i\u003E dengan \u003Cb\u003Efetch\u003C\/b\u003E, Anda bisa coba pertahankan tetap menggunakan \u003Cb\u003EXMLHttpRequest\u003C\/b\u003E, dengan tambahan \u003Ci\u003Efunction force URL to HTTPS\u003C\/i\u003E.\u003C\/p\u003E\u003Cp\u003EGanti JavaScript Blogger Infinite Scroll dengan kode di bawah ini.\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u003Cp\u003E\u0026lt;script\u0026gt;\u003C\/p\u003E\u003Cp\u003E\/\/\u0026lt;![CDATA[\u003C\/p\u003E\u003Cp\u003E!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return\"function\"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]=\"object\"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function f(){return L.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=p.text.loading,T=!0,y?(M.classList.add(p.state.loading),l(\"loading\",[p]),void u(y,function(t,n){M.className=x+\" \"+p.state.load,h=e.createElement(\"div\"),h.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=t;var o=r(\"title\",h),a=r(p.target.post,h),i=r(p.target.anchors+\" \"+p.target.anchor,h),s=r(p.target.post,H);if(o=o\u0026amp;\u0026amp;o[0]?o[0].innerÌÇÐÄvlog¹Ù·½Èë¿Ú:\"\",a.length\u0026amp;\u0026amp;s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentÌÇÐÄvlog¹Ù·½Èë¿Ú(\"afterend\",'\u0026lt;span class=\"fi\" id=\"#fi:'+j+'\"\u0026gt;\u0026lt;\/span\u0026gt;'),h=e.createElement(\"div\");for(var f=0,u=a.length;u\u0026gt;f;++f)h.appendChild(a[f]);d.insertAdjacentÌÇÐÄvlog¹Ù·½Èë¿Ú(\"afterend\",h.innerÌÇÐÄvlog¹Ù·½Èë¿Ú),c(),y=i.length?i[0].href:!1,T=!1,j++,l(\"load\",[p,t,n])}},function(t,e){M.classList.add(p.state.error),T=!1,c(1),l(\"error\",[p,t,e])})):(M.classList.add(p.state.loaded),L.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=p.text.loaded,l(\"loaded\",[p]))}function c(t){if(L.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=\"\",v){h.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=p.text[t?\"error\":\"load\"];var e=h.firstChild;e.onclick=function(){return 2===p.type\u0026amp;\u0026amp;(v=!1),f(),!1},L.appendChild(e)}}var u=\"infinite-scroll-state-\",p={target:{posts:\".posts\",post:\".post\",anchors:\".anchors\",anchor:\".anchor\"},text:{load:\"%s\",loading:\"%s\",loaded:\"%s\",error:\"%s\"},state:{load:u+\"load\",loading:u+\"loading\",loaded:u+\"loaded\",error:u+\"error\"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){function secureUrl(getUrl) {try {let parsedUrl = new URL(getUrl);if (parsedUrl.protocol === 'http:') {parsedUrl.protocol = 'https:';}return parsedUrl.href;} catch (error) {console.error('Not expected URL:', getUrl, error);return getUrl; }}const url = secureUrl(e);var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r\u0026amp;\u0026amp;a(r)\u0026amp;\u0026amp;r(o.responseText,o));n\u0026amp;\u0026amp;a(n)\u0026amp;\u0026amp;n(o.responseText,o);history.pushState('','',url)}},o.open(\"GET\",url),o.send()}},v=1!==p.type,T=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],y=r(p.target.anchor,L),m=e.body,M=e.documentElement,x=M.className||\"\",E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=0,S=null,j=1;if(y.length){y=y[0].href,H.insertAdjacentÌÇÐÄvlog¹Ù·½Èë¿Ú(\"afterbegin\",'\u0026lt;!--\u0026lt;span class=\"fi\" id=\"#fi:0\"\u0026gt;\u0026lt;\/span\u0026gt;--\u0026gt;'),h=e.createElement(\"div\"),c();var A=function(){E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=m.scrollTop||M.scrollTop,T||E\u0026gt;w+b||f()};A(),0!==p.type\u0026amp;\u0026amp;t.addEventListener(\"scroll\",function(){v||(S\u0026amp;\u0026amp;t.clearTimeout(S),S=t.setTimeout(A,500))},!1)}return p}}(window,document);\u003C\/p\u003E\u003Cp\u003Evar infinite_scroll = new InfiniteScroll({\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; type: 0,\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; target: {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; posts: '.blog-posts',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; post: '.post-outer-container',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; anchors: '.blog-pager',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; anchor: '.load-more-btn'\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; },\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; text: {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; load: '\u0026lt;button class=\\\"load-more-btn\\\"\u0026gt;Load More\u0026lt;\/button\u0026gt;',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; loading: '\u0026lt;span class=\\\"loading-btn\\\"\u0026gt;Memuat \u0026lt;span\u0026gt;\u0026amp;#9696;\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; loaded: '\u0026lt;span class=\\\"all-posts-showing\\\"\u0026gt;\u0026lt;\/span\u0026gt;',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; error: 'null, refresh this page'\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; }\u003C\/p\u003E\u003Cp\u003E});\u003C\/p\u003E\u003Cp\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/p\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003ETambahan informasi, JavaScript di atas juga sudah disertakan \u003Ccode\u003Ehistory.pushState\u003C\/code\u003E untuk merubah URL di bilah alamat peramban (address bar).\u003C\/p\u003E\u003Ch2\u003ECara 4 (pakai Fetch)\u003C\/h2\u003E\u003Cp\u003EBiar lebih modern, Anda dapat menggunakan Blogger Infinite Scroll yang untuk \u003Ci\u003Eretrive data\u003C\/i\u003E pakai metode fetch.\u003C\/p\u003E\u003Cp\u003ESilahkan mengganti JavaScript Infinite Scroll sebelumnya dengan JS di bawah ini:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u003Cp\u003E\u0026lt;script\u0026gt;\u003C\/p\u003E\u003Cp\u003E\/\/\u0026lt;![CDATA[\u003C\/p\u003E\u003Cp\u003E!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}\u003C\/p\u003E\u003Cp\u003Efunction o(t){return void 0!==t}\u003C\/p\u003E\u003Cp\u003Efunction a(t){return\"function\"==typeof t}\u003C\/p\u003E\u003Cp\u003Efunction i(t,e){t=t||{};for(var n in e)t[n]=\"object\"==typeof e[n]?i(t[n],e[n]):e[n];return t}\u003C\/p\u003E\u003Cp\u003Efunction s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}\u003C\/p\u003E\u003Cp\u003Efunction d(t,e){o(e)?delete g[t][e]:g[t]=[]}\u003C\/p\u003E\u003Cp\u003Efunction l(t,e){if(o(g[t])){for(var n in g[t]){g[t][n](e)}}}\u003C\/p\u003E\u003Cp\u003Efunction f(){L.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=p.text.loading;T=!0;if(y){M.classList.add(p.state.loading);l(\"loading\",[p]);u(y,function(t,n){M.className=x+\" \"+p.state.load;h=e.createElement(\"div\");h.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=t;var o=r(\"title\",h),a=r(p.target.post,h),i=r(p.target.anchors+\" \"+p.target.anchor,h),s=r(p.target.post,H);if(o=o\u0026amp;\u0026amp;o[0]?o[0].innerÌÇÐÄvlog¹Ù·½Èë¿Ú:\"\",a.length\u0026amp;\u0026amp;s.length){var d=s[s.length-1];e.title=o;d.insertAdjacentÌÇÐÄvlog¹Ù·½Èë¿Ú(\"afterend\",'\u0026lt;span class=\"fi\" id=\"#fi:'+j+'\"\u0026gt;\u0026lt;\/span\u0026gt;');h=e.createElement(\"div\");for(var f=0,u=a.length;u\u0026gt;f;++f){h.appendChild(a[f])}\u003C\/p\u003E\u003Cp\u003Ed.insertAdjacentÌÇÐÄvlog¹Ù·½Èë¿Ú(\"afterend\",h.innerÌÇÐÄvlog¹Ù·½Èë¿Ú);c();y=i.length?i[0].href:!1;T=!1;j++;l(\"load\",[p,t,n])}},function(t,e){M.classList.add(p.state.error);T=!1;c(1);l(\"error\",[p,t,e])})}else{M.classList.add(p.state.loaded);L.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=p.text.loaded;l(\"loaded\",[p])}}\u003C\/p\u003E\u003Cp\u003Efunction c(t){L.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=\"\";if(v){h.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=p.text[t?\"error\":\"load\"];var e=h.firstChild;e.onclick=function(){if(2===p.type){v=!1}\u003C\/p\u003E\u003Cp\u003Ef();return!1};L.appendChild(e)}}\u003C\/p\u003E\u003Cp\u003Evar defaultSettings={target:{posts:\".posts\",post:\".post\",anchors:\".anchors\",anchor:\".anchor\"},text:{load:\"%s\",loading:\"%s\",loaded:\"%s\",error:\"%s\"},state:{load:\"infinite-scroll-state-load\",loading:\"infinite-scroll-state-loading\",loaded:\"infinite-scroll-state-loaded\",error:\"infinite-scroll-state-error\"},type:0};var g={load:[],loading:[],loaded:[],error:[]};var p=i(defaultSettings,n||{});p.on=s;p.off=d;var h=null;var u=function(url,onSuccess,onError){\u003C\/p\u003E\u003Cp\u003Efunction secureUrl(getUrl) {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; try {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; let parsedUrl = new URL(getUrl);\u003C\/p\u003E\u003Cp\u003E\u003Cbr \/\u003E\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; if (parsedUrl.protocol === 'http:') {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; parsedUrl.protocol = 'https:';\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; }\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; return parsedUrl.href;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; } catch (error) {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; console.error('Invalid URL:', getUrl, error);\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; return getUrl;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; }\u003C\/p\u003E\u003Cp\u003E}\u003C\/p\u003E\u003Cp\u003Elet nextUrl = secureUrl(url);\u003C\/p\u003E\u003Cp\u003Efetch(nextUrl).then(response=\u0026gt;{if(!response.ok)throw response;return response.text()}).then(text=\u0026gt;{onSuccess\u0026amp;\u0026amp;a(onSuccess)\u0026amp;\u0026amp;onSuccess(text)}).catch(err=\u0026gt;{onError\u0026amp;\u0026amp;a(onError)\u0026amp;\u0026amp;onError(err)})};var v=1!==p.type,T=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],y=r(p.target.anchor,L),m=e.body,M=e.documentElement,x=M.className||\"\",E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=0,S=null,j=1;if(y.length){y=y[0].href;H.insertAdjacentÌÇÐÄvlog¹Ù·½Èë¿Ú(\"afterbegin\",'\u0026lt;span class=\"fi\" id=\"#fi:0\"\u0026gt;\u0026lt;\/span\u0026gt;');h=e.createElement(\"div\");c();var A=function(){E=H.offsetTop+H.offsetHeight;b=t.innerHeight;w=m.scrollTop||M.scrollTop;T||E\u0026gt;w+b||f()};A();0!==p.type\u0026amp;\u0026amp;t.addEventListener(\"scroll\",function(){v||(S\u0026amp;\u0026amp;t.clearTimeout(S),S=t.setTimeout(A,1000))},!1)}\u003C\/p\u003E\u003Cp\u003Ereturn p}}(window,document);\u003C\/p\u003E\u003Cp\u003Evar infinite_scroll = new InfiniteScroll({\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; type: 0,\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; target: {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; posts: '.blog-posts',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; post: '.post-outer-container',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; anchors: '.blog-pager',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; anchor: '.load-more-btn'\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; },\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; text: {\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; load: '\u0026lt;button class=\\\"load-more-btn\\\"\u0026gt;Load More\u0026lt;\/button\u0026gt;',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; loading: '\u0026lt;span class=\\\"loading-btn\\\"\u0026gt;Memuat \u0026lt;span\u0026gt;\u0026amp;#9696;\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; loaded: '\u0026lt;span class=\\\"all-posts-showing\\\"\u0026gt;\u0026lt;\/span\u0026gt;',\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; error: 'null, refresh this page'\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; }\u003C\/p\u003E\u003Cp\u003E});\u003C\/p\u003E\u003Cp\u003E\/\/]]\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026lt;\/script\u0026gt;\u0026nbsp;\u003C\/p\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003ESebagai informasi, JavaScript di atas dasarnya masih menggunakan konstruksi dari miliknya \u003Ca href=\"https:\/\/dte.web.id\/\" target=\"_blank\" rel=\"noopener\"\u003EDTE :]\u003C\/a\u003E, Taufik Nurrohman. Hanya coba dirubah sedikit.\u003C\/p\u003E\u003Cp\u003EDemikian, semoga membantu dan bermanfaat.\u003C\/p\u003E\n\u003Cp class=\"resource\"\u003EJavaScript Blogger Infinite Scroll: https:\/\/dte.web.id\/teknis\/blogger-infinite-scroll\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/2457941008602053715\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2024\/08\/mengatasi-infinite-scroll-blogger-yang.html#comment-form","title":"6 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/2457941008602053715"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/2457941008602053715"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2024\/08\/mengatasi-infinite-scroll-blogger-yang.html","title":"Mengatasi Infinite Scroll Blogger yang Error di Mobile"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhJxtts4PK0J6ssiE7r9NMnDsKfwYbyloCC6fIEb2CDmlgYCp5bWjwGNWKb34tcLc6lM5cwlbetwM0R_fSh4xupkW1_3IlIy0TJSq5e0p_yTkYGyGEVQ88da_N3kBMn2qwAMbHGQZfOOwvOt_xRwDowSvx_6EDT5SQxvGKCRzdBz60OqQPC_TCFtZnagn42\/s72-c\/Blogger-Load-More-Infinite-Scroll.jpg","height":"72","width":"72"},"thr$total":{"$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-7050144844285124162"},"published":{"$t":"2024-02-11T21:33:00.011+07:00"},"updated":{"$t":"2024-08-29T09:04:03.065+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Tips SEO"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Cara Memasang ÌÇÐÄvlog¹Ù·½Èë¿Ú Parse Codes di Blogger"},"content":{"type":"html","$t":"\u003Cp\u003E\u003Cb\u003ECara Pasang Parse Code ÌÇÐÄvlog¹Ù·½Èë¿Ú Widget Tools di Blog yang Valid ÌÇÐÄvlog¹Ù·½Èë¿Ú5\u003C\/b\u003E - Parse ÌÇÐÄvlog¹Ù·½Èë¿Ú adalah salah satu tools yang digunakan untuk mengkonversi kode, macam kode iklan. Biasanya kode iklan yang di parse adalah iklan yang nantinya akan tampil di dalam postingan, baik di atas, di tengan, maupun di bawah postingan.\u003C\/p\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"Cara Widget Parse Kode ÌÇÐÄvlog¹Ù·½Èë¿Ú Tools di Blog\" data-original-height=\"462\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiOq7R_ffkkeZdKt3Th1gA0CMIwroQC-ak7ouRMe0uhM1LiHYKGR66H75T6PuqsaXOyzrrlIqXfh2uGHEs6HRq0Pz-vdg6AcLGbpz-wXiQmpqhp6mN_uPJgCu_BGpFE0LFgTbaj4i7QBFAj\/s1600\/parse-kode-html-widget.png\" title=\"Cara Widget Parse Kode ÌÇÐÄvlog¹Ù·½Èë¿Ú Tools di Blog\" \/\u003E\u003C\/div\u003E\n\u003Cp\u003ETools ini juga sangat mudah digunakan oleh newbiew sekalipun, sebab cukup menekan satu tombol saja kode ÌÇÐÄvlog¹Ù·½Èë¿Ú langsung diparse. Tools ini sangat cocok dipasang pada blog yang membahas tentang berbagai tutorial seputar script\/coding website atau blog.\u003C\/p\u003E\n\u003Cp\u003EBaca juga: \u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/04\/cara-membuat-photoshop-online.html\"\u003ECara Membuat Photoshop Online di Blog\u003C\/a\u003E\u003C\/p\u003E\n\u003Cp\u003EBagi yang ingin tau seperti apa tools parse ÌÇÐÄvlog¹Ù·½Èë¿Ú itu, kolom di bawah ini adalah contohnya. Silahkan masukkan kode iklan anda disana, lalu klik Parse Script.\u003C\/p\u003E\n\u003Ch2\u003EParse ÌÇÐÄvlog¹Ù·½Èë¿Ú Blogger XML Templates\u003C\/h2\u003E\n\u003Cbr \/\u003E\n\u003Cscript type=\"text\/javascript\"\u003E\nfunction convert(){var ele1 = document.getElementById(\"somewhere\");var replaced;replaced = ele1.value;replaced = replaced.replace(\/\u0026\/ig, \"\u0026amp;\");replaced = replaced.replace(\/\u003C\/ig, \"\u0026lt;\");replaced = replaced.replace(\/\u003E\/ig, \"\u0026gt;\");replaced = replaced.replace(\/\"\/ig, \"\u0026quot;\");replaced = replaced.replace(\/\u0026#177;\/ig, \"\u0026plusmn;\");replaced = replaced.replace(\/\u0026#169;\/ig, \"\u0026copy;\");replaced = replaced.replace(\/\u0026#174;\/ig, \"\u0026reg;\");replaced = replaced.replace(\/ya'll\/ig, \"ya'll\");ele1.value = replaced;}\n\u003C\/script\u003E\n\u003Cbr \/\u003E\n\u003Ctable style=\"margin: 0px auto;\"\u003E\u003Ctbody\u003E\n\u003Ctr\u003E \u003Ctd\u003E\u003Ctextarea id=\"somewhere\" placeholder=\"Paste your html or code here...\" style=\"background: none 0% 0% repeat scroll rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 100%;border:2px solid var(--main-color);border-radius:10px;box-shadow:none; padding:1rem;resize: vertical; box-sizing:border-box\" resize=\"vertical\"\u003E\u003C\/textarea\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"tool-btn preview-btn\"\u003E\n  \u003Cinput class=\"t-btn btn-convert\" onclick=\"convert();\" type=\"button\" value=\"Parse Script\" \/\u003E\n\u003C\/div\u003E\n\u003C\/td\u003E \u003C\/tr\u003E\n\u003C\/tbody\u003E\u003C\/table\u003E\u003Cbr \/\u003E\n\u003Ci class=\"separate\"\u003E\u003C\/i\u003E\n\u003Cp\u003EGunakan \u003Ca href=\"https:\/\/www.bungfrangki.com\/p\/html-parse.html\" target=\"_blank\"\u003E\u003Cb\u003EÌÇÐÄvlog¹Ù·½Èë¿Ú Parse\u003C\/b\u003E\u003C\/a\u003E yang lebih baik.\u003C\/p\u003E\n\u003Ch2\u003ECara pasang widget parse kode ÌÇÐÄvlog¹Ù·½Èë¿Ú di blogspot\/Blogger\u003C\/h2\u003E\n\u003Cp\u003EAnda pun dapat memasang parse ÌÇÐÄvlog¹Ù·½Èë¿Ú sendiri di blog anda. Kopi kode di bawah ini dan letakkan dimana saja yang ingin anda inginkan. Jika ingin meletakkanya di sidebar, taruh di ÌÇÐÄvlog¹Ù·½Èë¿Ú\/JavaScript dan jika ingin meletakkanya di halaman postingan atau halaman static maka harus melalui layanan ÌÇÐÄvlog¹Ù·½Èë¿Ú.\u003C\/p\u003E\n\u003Cbr\/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction convert(){var ele1 = document.getElementById(\"somewhere\");var replaced;replaced = ele1.value;replaced = replaced.replace(\/\u0026amp;\/ig, \"\u0026amp;amp;\");replaced = replaced.replace(\/\u0026lt;\/ig, \"\u0026amp;lt;\");replaced = replaced.replace(\/\u0026gt;\/ig, \"\u0026amp;gt;\");replaced = replaced.replace(\/\"\/ig, \"\u0026amp;quot;\");replaced = replaced.replace(\/\u0026amp;#177;\/ig, \"\u0026amp;plusmn;\");replaced = replaced.replace(\/\u0026amp;#169;\/ig, \"\u0026amp;copy;\");replaced = replaced.replace(\/\u0026amp;#174;\/ig, \"\u0026amp;reg;\");replaced = replaced.replace(\/ya'll\/ig, \"ya'll\");ele1.value = replaced;}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u0026lt;br \/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;table style=\"margin:0 auto\"\u0026gt;\u0026lt;tbody\u0026gt;\u003Cbr \/\u003E\n\u0026lt;tr\u0026gt; \u0026lt;td\u0026gt;\u0026lt;textarea id=\"somewhere\" style=\"background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px\"\u0026gt;\u0026lt;\/textarea\u0026gt;\u0026lt;br\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;input onclick=\"convert();\" style=\"padding: 5px;\" type=\"button\" value=\"Parse Script\" \/\u0026gt;\u0026lt;\/td\u0026gt; \u0026lt;\/tr\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/tbody\u0026gt;\u0026lt;\/table\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cp\u003ESetelah itu, Publishkan atau Save postingan.\u003C\/p\u003E\n\u003Cp\u003EDemikian tutorial tentang \u003Cb\u003ECara Memasang Widget Parse Kode ÌÇÐÄvlog¹Ù·½Èë¿Ú Tools di Blog yang Valid ÌÇÐÄvlog¹Ù·½Èë¿Ú5\u003C\/b\u003E. Semoga membantu dan selamat mencoba.\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/7050144844285124162\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2015\/04\/pasang-parse-html-tools-valid-html5-di-blogspot.html#comment-form","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7050144844285124162"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7050144844285124162"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2015\/04\/pasang-parse-html-tools-valid-html5-di-blogspot.html","title":"Cara Memasang ÌÇÐÄvlog¹Ù·½Èë¿Ú Parse Codes di Blogger"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiOq7R_ffkkeZdKt3Th1gA0CMIwroQC-ak7ouRMe0uhM1LiHYKGR66H75T6PuqsaXOyzrrlIqXfh2uGHEs6HRq0Pz-vdg6AcLGbpz-wXiQmpqhp6mN_uPJgCu_BGpFE0LFgTbaj4i7QBFAj\/s72-c\/parse-kode-html-widget.png","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-3670449159604049156"},"published":{"$t":"2022-10-06T12:09:00.007+07:00"},"updated":{"$t":"2023-02-19T13:21:54.447+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru"},"content":{"type":"html","$t":"Widget blogger kali ini adalah \u003Cb\u003Ecara membuat daftar isi\/sitemap yang berlabel ‘new’ atau ‘baru’ sesuai label yang mendapat artikel terbaru\u003C\/b\u003E. Widget ini untuk mempermudah menavigasi penjelajahan blog dengan melihat label dari blog tersebut.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDengan begitu para pengunjung akan mengetahui label mana saja yang baru saja mendapatkan update artikel terbaru di blog tertentu.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSeperti yang sudah saya ungkapkan sebelumnya, fungsi \u003Ca href=\"https:\/\/www.bungfrangki.com\/search\/label\/Widget?\u0026amp;max-results=5\" target=\"_blank\"\u003E#Widget\u003C\/a\u003E daftar isi ini untuk melihat semua artikel secara lengkap dan supaya mudah di temukan oleh pengunjung dan memudahka bot menjelajah juga untuk merayapi semua artikel di blog anda.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nBaca juga:\u0026nbsp;\u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/07\/membuat-widget-random-post-tanpa-gambar.html\" target=\"_blank\"\u003EMembuat Widget Random Post Tanpa Thumbnail di Bawah Postingan\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nJadi, penggunaan sitemap atau daftar ini di blog sangatlah penting, semakin banyak blog anda di crawl\/dijelajahi, maka semakin banyak pula page views yang dihasilkan setiap harinya.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"membuat sitemap atau daftar isi\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhLClYZazJwYKWqvEIHbSFBazX6odhKvxEaoXcjnfFcoC1VUcOeLpJxqbcqtCOS0KI2ZfB4loPVCaUVvh7Wkd_sDq-jBGk1ljNBDp_jI2DpxnNTohnYbG8NEbxeWSKQZKuEoRlsOEwnTdPT\/s1600\/sitemap-daftar-isi-blog.png\" title=\"membuat sitemap atau daftar isi\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch2\u003ECara Pasang Widget Daftar Isi di Blog\u003C\/h2\u003EAlangkah baiknya widget ini diletakkan pada laman statis, dengan cara masuk ke dashboard blog anda, lalu klik \u003Cb\u003ELaman\u003C\/b\u003E \u0026gt; \u003Cb\u003ELaman baru\u003C\/b\u003E. Kemudian tulis judul laman suka-suka anda, dan klik ÌÇÐÄvlog¹Ù·½Èë¿Ú, pastekan kode di bawah ini di dalamnya.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre class='html'\u003E\u003Ccode\u003E\u0026lt;div class=\"sitemap-widget sitemap-tag-new sitemap\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"https:\/\/cdn.jsdelivr.net\/gh\/bungfrangki\/bloggerSitemap@main\/daftarisi.js\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;script src=\"https:\/\/www.bungfrangki.com\/feeds\/posts\/default?max-results=999\u0026amp;amp;alt=json-in-script\u0026amp;amp;callback=loadtoc\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003EGanti url \u003Cb\u003Ewww.bungfrangki.com\u003C\/b\u003E pada kode di atas dengan url blog Anda.\u003C\/div\u003E\u003Cbr \/\u003E\nUntuk memperbaiki tampilannya, silahkan tambahkan CSS berikut ini:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre class='css'\u003E\u003Ccode\u003E\n.sitemap{\n  display:block;\n  font-family:var(--body-font,BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)\n}\n.sitemap-widget{\n  max-height:525px;\n  overflow:auto;\n}\n.sitemap p a{\n  background-color:rgba(0,0,0,.055);\n  color:var(--accent,#0277d4);\n  font-weight:700;\n  display:block;\n  padding:5px 10px;\n  text-decoration:none;\n}\n.sitemap p a:hover{\n  background-color:var(--accent,#0277d4);\n  color:#fff;\n}\n.sitema a{\n  transition: .3s ease-in;\n}\n.sitemap ol li a {\n  text-decoration:none;\n  color:var(--link-color,#182257)\n}\n.sitemap ol li a:hover {\n  color:var(--hover-color,#0277d4)\n}\n.sitemap ol li:not(:first-child){\n  padding-top:8px;\n}\n.sitemap ol li:not(:last-child) {\n  border-bottom:1px solid rgba(0,0,0,.055);\n  padding-bottom:8px;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cbr \/\u003E\n Hasilnya silahkan lihat langsung pada link berikut:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"download klik-download jsfiddle\"\u003E\u003Ca class=\"klik-download\" href=\"https:\/\/jsfiddle.net\/bungfrangki\/43y1cp5L\/11\/\" onclick=\"this.href = 'https:\/\/jsfiddle.net\/bungfrangki\/43y1cp5L\/11\/'\" rel=\"nofollow noopener\" target=\"_blank\" title=\"\"\u003EJSFiddle\u003C\/a\u003E \u003Ca class=\"klik-download\" href=\"https:\/\/codepen.io\/bungfrangki\/pen\/xxJozEV\" rel=\"nofollow noopener\" target=\"_blank\" title=\"\"\u003ECodePen\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n  \u003Ch2\u003EPenutup\u003C\/h2\u003E\nDemikian cara \u003Ca href=\"https:\/\/www.bungfrangki.com\/2015\/07\/membuat-sitemap-dengan-tag-new-pada-label.html\"\u003EMembuat Sitemap dengan Tag NEW Pada Label yang Mendapat Artikel Baru\u003C\/a\u003E, selamat mencoba."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/3670449159604049156\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2015\/07\/membuat-sitemap-dengan-tag-new-pada-label.html#comment-form","title":"3 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3670449159604049156"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3670449159604049156"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2015\/07\/membuat-sitemap-dengan-tag-new-pada-label.html","title":"Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhLClYZazJwYKWqvEIHbSFBazX6odhKvxEaoXcjnfFcoC1VUcOeLpJxqbcqtCOS0KI2ZfB4loPVCaUVvh7Wkd_sDq-jBGk1ljNBDp_jI2DpxnNTohnYbG8NEbxeWSKQZKuEoRlsOEwnTdPT\/s72-c\/sitemap-daftar-isi-blog.png","height":"72","width":"72"},"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-3398612272624528727"},"published":{"$t":"2021-03-03T08:52:00.003+07:00"},"updated":{"$t":"2021-03-03T09:11:52.507+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger v3"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Singkat"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Cara Membuat Read Time Otomatis di Blogspot atau Blogger"},"content":{"type":"html","$t":"\u003Cp\u003EMenampilkan perkiraan waktu membaca (reading time) di Blogspot atau Blogger secara otomatis kita bisa lakukan dengan mudah menggunakan JavaScript. Widget ini kurang lebih dapat memberi gambaran kepada pembaca terhadap berapa banyak estimasi waktu yang dibutuhkan untuk membaca konten tersebut.\u003C\/p\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgqi5SQna01Ai887xwl_zRTQOs2-5nlDjrFIh-ccfmZSGIKHvA6FUXKrFCSAHXY4Y6J20YPHV3ySDeRmtcuPH5uRkgHq-oUk8fxQow0u63MS0dBQ3_TU0VxqcXtX18WTrV7WtLiCZgJH3-q\/s1200\/reading-time-for-blogger-blogspot-automatically.jpg\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Cara Membuat Read Time Otomatis di Blogspot atau Blogger\" border=\"0\" data-original-height=\"675\" data-original-width=\"1200\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgqi5SQna01Ai887xwl_zRTQOs2-5nlDjrFIh-ccfmZSGIKHvA6FUXKrFCSAHXY4Y6J20YPHV3ySDeRmtcuPH5uRkgHq-oUk8fxQow0u63MS0dBQ3_TU0VxqcXtX18WTrV7WtLiCZgJH3-q\/s16000\/reading-time-for-blogger-blogspot-automatically.jpg\" title=\"Cara Membuat Read Time Otomatis di Blogspot atau Blogger\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cp\u003EWidget reading time Blogspot ini menjadi semacam hipnosis untuk membuat pembaca bertahan sedikit lebih lama saat sedang membaca sebuah konten blog.\u003C\/p\u003E\u003Cp\u003EKira-kira begitulah fungsi reading time. Tujuannya, tentu saja fitur ini soal pengurangan poin (persentase) terhadap \u003Ci\u003Ebounce rate\u003C\/i\u003E blog. Dalam hal ini, widget read time dapat menjadi teknik terapan tambahan lainnya dalam mengembangkan blog menjadi\u0026nbsp;\u003Ci\u003Euser-friendly.\u003C\/i\u003E\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003ECara Memasang Estimasi Reading Time di Blogger\/Blogspot Secara Otomatis\u003C\/h2\u003E\u003Cp\u003EBerikut ini cara menerapkan widget auto Reading Time di Blogspot atau Blogger:\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003EPerhatikan Struktur PostBody\u003C\/h3\u003E\u003Cp\u003EPertama, silahkan perhatikan terlebih dahulu struktur halaman postingan\u0026nbsp;\u003Cb\u003EPostBody \u003C\/b\u003E(\u003Ccode\u003E\u0026lt;b:includable id='postBody' var='post'\u0026gt;\u003C\/code\u003E) di Blogger masing-masing.\u003C\/p\u003E\u003Cp\u003ESederhananya, misalkan struktur \u003Cb\u003EPostBody \u003C\/b\u003Etemplate adalah seperti berikut ini:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode class=\"html\"\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='postBody' var='post'\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;div class='post-body entry-content' expr:id='\u0026amp;quot;post-body-\u0026amp;quot; + data:post.id'\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;data:post.body\/\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003C\/p\u003E\u003Cp\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:includable\u0026gt;\u003C\/p\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u0026nbsp;Yang perlu diperhatikan dari kode di atas adalah bagian\u0026nbsp;\u003Ccode\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/code\u003E. Dalam hal ini, kode tersebut hanya dibungkus oleh satu kode tag \u003Cb\u003Ediv\u003C\/b\u003E, yaitu div class \u003Ccode\u003E.post-body\u003C\/code\u003E dan \u003Ccode\u003E.entry-content.\u003C\/code\u003E\u003C\/p\u003E\u003Cp\u003ENah, selanjutnya salah satu \u003Ci\u003Etag div class\u003C\/i\u003E tersebut akan kita gunaakan pada JavaScript nanti.\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003EDisplay Estimated Post Reading Time\u0026nbsp;in Blogger\/Blogspot Posts Automatically with JavaScript\u003C\/h3\u003E\u003Cp\u003EDari struktur halaman postingan di atas, maka JavaScriptnya dapat disusun sebagai berikut:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode class=\"javascript\"\u003E\u0026lt;script\u0026gt;\u003Cbr \/\u003E\/*\u0026lt;![CDATA[*\/\u003Cbr \/\u003Efunction get_text(el) {ret = \"\"; var length = el.childNodes.length; for(var i = 0; i \u0026lt; length; i++) {var node = el.childNodes[i]; if(node.nodeType != 8) {ret += node.nodeType != 1 ? node.nodeValue : get_text(node);} } return ret;} var words = get_text(document.querySelector('.post-body')); var count = words.split(' ').length; var avg = 185; var counted = count \/ avg; var maincount = Math.round(counted); document.querySelector(\".readTime\").innerÌÇÐÄvlog¹Ù·½Èë¿Ú = maincount + \" min read\";\u003Cbr \/\u003E\/*]]\u0026gt;*\/\u0026nbsp; \u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003EKeterangan:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003EKode tag\u0026nbsp;\u003Cb\u003E.post-body\u003C\/b\u003E pada script dapat diubah sesuai struktur PostBody pada template masing-masing.\u003C\/li\u003E\u003Cli\u003EAngka\u0026nbsp;\u003Cb\u003E185\u003C\/b\u003E merupakan jumlah kata yang diestimasikan dibaca per menit.\u003C\/li\u003E\u003Cli\u003EKode \u003Cb\u003E.readTime\u003C\/b\u003E merupakan tag pemanggil widget Reading Time.\u003C\/li\u003E\u003C\/ol\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cdiv class=\"warning\"\u003EJika terlalu khawatir dengan \u003Cb\u003E\u003Ci\u003Etag \u003C\/i\u003EClass\u003C\/b\u003E, sebaiknya pada bagian \u003Cb\u003EPostBody\u003C\/b\u003E (langkah 1) membuat dan mengubahnya ke \u003Cb\u003E\u003Ci\u003Etag \u003C\/i\u003EID\u003C\/b\u003E. Biar lebih spesifik.\u003C\/div\u003E\u003Cp\u003E\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003EMemanggil Widget Reading Time\u003C\/h3\u003E\u003Cp\u003ESekarang saatnya menampilkan widget Reading Time. Bagusnya, widget ini diletakkan pada bagian \u003Ci\u003Epost meta\u003C\/i\u003E, yaitu sejajar dengan \u003Ci\u003E\u003Ca href=\"https:\/\/www.bungfrangki.com\/2017\/12\/error-missing-author-dan-updated-search-console.html\"\u003Epost author\u003C\/a\u003E\u003C\/i\u003E, \u003Ca href=\"https:\/\/www.bungfrangki.com\/2018\/04\/format-datepublished-datemodified-terbaru.html\"\u003E\u003Ci\u003Edate published\u003C\/i\u003E \u003C\/a\u003Edan lainya. Atau dimana saja sesuai kebutuhan.\u003C\/p\u003E\u003Cp\u003EAdapun kode pemanggilnya menjadi seperti ini:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;div class='readingTime'\u0026gt;\u0026lt;div class='readTime'\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003EAtau, jika kondisinya hanya ingin menampilkan di halaman postingan, maka kodenya bisa ditulis seperti ini:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;b:if cond='data:view.isPost'\u0026gt;\u0026lt;span class='readingTime'\u0026gt;\u0026lt;span checkelem='11' class='separatorReadtime'\u0026gt;\u0026amp;#183;\u0026lt;\/span\u0026gt;\u0026lt;span class='readTime' id='readTime'\/\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/b:if\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003ELetakkan kode tersebut di\u0026nbsp;\u0026lt;b:includable id='postHeader' var='post'\u0026gt; jika ingin meletakkanya di bagian \u003Ci\u003Epost meta\u003C\/i\u003E.\u003C\/p\u003E\u003Ch3 style=\"text-align: left;\"\u003EMengatur Tampilan Widget Reading Time dengna CSS\u003C\/h3\u003E\u003Cp\u003ESebelum ke langkah pamungkas, alangkah baiknya terlebih dahulu mengatur tampilan widget Reading Time dengan CSS. Contohnya dengan seperti ini:\u003C\/p\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cpre\u003E\u003Ccode\u003E.readingTime{display:inline-block;padding:0;margin:0 0 0 1rem}\u003Cbr \/\u003E.readingTime span{display:inline-block;float:left}\u003Cbr \/\u003E.separatorReadtime{font-size:30px;display:inline-block;padding:0 .35rem}\u003C\/code\u003E\u003C\/pre\u003E\u003Cp\u003E\u003C\/p\u003E\u003Cp\u003EJika langkah di atas sudah sesuai, silahkan \u003Cb\u003Esave template\u003C\/b\u003E.\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003EWidget Reading Time Tidak Tampil?\u003C\/h2\u003E\u003Cp\u003EBila telah menerapkan langkah-langkah di atas begitu saja dengan tidak cermat, lalu ternyata widget Reading Time tidak tampil alias \u003Ci\u003Enot working at all\u003C\/i\u003E? Maka dapat dipastikan 2 hal ini yang menjadi kendalanya.\u003C\/p\u003E\u003Cp\u003E\u003Cb\u003E\u003Ci\u003EKesatu\u003C\/i\u003E\u003C\/b\u003E, bahwa kode\u0026nbsp;\u003Ccode\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/code\u003E masih dibungkus oleh \u003Ci\u003Etag div\u003C\/i\u003E yang lain. \u003Cb\u003E\u003Ci\u003EKedua\u003C\/i\u003E\u003C\/b\u003E, \u003Ci\u003Etag div\u003C\/i\u003E pada template Anda berbeda dengan \u003Ci\u003Etag div\u003C\/i\u003E yang membungkus \u003Ccode\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/code\u003E, yang mana tag tersebut digunakan pada JavaScipt widget Reading Time.\u003C\/p\u003E\u003Cp\u003EDalam hal ini, penting untuk melihat kembali susunan struktur template. Mengingat setiap template html Blogger tersusun dengan kombinasi \u003Ci\u003Etag \u003C\/i\u003Edan kondisi yang berbeda-beda.\u003C\/p\u003E\u003Ch2 style=\"text-align: left;\"\u003EAkhir Kata\u003C\/h2\u003E\u003Cp\u003Edemikian, sekian dan terima kasih!\u003C\/p\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/3398612272624528727\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2021\/03\/read-time-blogspot.html#comment-form","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3398612272624528727"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3398612272624528727"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2021\/03\/read-time-blogspot.html","title":"Cara Membuat Read Time Otomatis di Blogspot atau Blogger"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgqi5SQna01Ai887xwl_zRTQOs2-5nlDjrFIh-ccfmZSGIKHvA6FUXKrFCSAHXY4Y6J20YPHV3ySDeRmtcuPH5uRkgHq-oUk8fxQow0u63MS0dBQ3_TU0VxqcXtX18WTrV7WtLiCZgJH3-q\/s72-c\/reading-time-for-blogger-blogspot-automatically.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-8246796537813388422"},"published":{"$t":"2019-09-12T21:50:00.002+07:00"},"updated":{"$t":"2023-02-10T18:33:25.628+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Cara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout\/Tata Letak Blogger"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\"\u003EKali ini giliran widget Related Post yang bisa dilakukan setting atau kustomisasi dari menu Layout\/Tata Letak Blogger. Dengan menerapkan tutorial ini, maka pengguna template disuguhkan setidaknya terdapat 3 style opsional widget Related Posts yang bisa dinavigasi langsung pada menu Layout Blogspot.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"Cara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout\/Tata Letak Blogger\" data-original-height=\"462\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEj8lC3TXKNGE_6rI8GtgurwK_Q-l7MjkEOegqzgmC9ZCXQhw0IR2Q6Y4dRGXMwlQ_Inzl8-OuJydsk5mJbTM6GzHd5halZORhoUogeQAha9_VFdan6WxiffvHFrwrAUn3Wtm7LygowMKQ84\/s1600\/cara-memasang-related-posts-di-blogger.png\" title=\"Cara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout\/Tata Letak Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nSecara keseluruhan, adapun fitur yang dapat dikustomisasi dari widget Related Posts (Artikel Terkait) pada menu Layout adalah sebagai berikut:\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003ETerdapat 3 pilihan style atau model tampilan widget.\u003C\/li\u003E\n\u003Cli\u003EBisa mengatur jumlah post yang ingin ditampilkan pada widget.\u003C\/li\u003E\n\u003Cli\u003EBisa mengatur jumlah karakter yang ingin ditampilkan pada summary (post snippet), khusus style 2.\u003C\/li\u003E\n\u003Cli\u003ESudah responsive.\u003C\/li\u003E\n\u003Cli\u003EDapat mengubah judul\/title widget.\u003C\/li\u003E\n\u003Cli\u003ETerdapat navigasi khusus untuk masing-masing perangkat, desktop\/tablet dan mobile.\u003C\/li\u003E\n\u003Cli\u003EGambar atau thumbnail widget Related Posts tidak gepeng (stretch).\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cbr \/\u003E\nContoh tampilan widget pada menu Layout\/Tata Letak seperti pada gambar berikut:\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Cara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout\/Tata Letak Blogger\" data-original-height=\"326\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgseTUeANvH8DXA2aTYp_GOak3lupNHyL6YQsx8DbF8HdqDI1QeLLLCBlnPXQuQfxznHm7vWD73xrYLK9hUsNO4YDx0BuvGoVfJ1-gTD7CBtrtvOkbZW5ZIRx3xB627HgTbrvyKJbyaGD5l\/s1600\/memasang-related-posts-di-blogger-1.jpg\" title=\"Cara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout\/Tata Letak Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStyle 1\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Widger Related Post style 1\" data-original-height=\"310\" data-original-width=\"600\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjQ9kJ5ebK2n9VOUEiGwf2N98wNVmGKZTydtz3j9I9qgIJhYDto4EU7HzuaGhr5brhKUuPf7MBM5T9NtCa6uDM-4r30gx-XHZ34QzHqYdXoZqTp1pPbTLSKvih-bC36nqpp6Demdy813tVA\/s1600\/memasang-related-posts-di-blogger-4.jpg\" title=\"Widger Related Post style 1\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStyle 2\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Widger Related Post style 2\" data-original-height=\"530\" data-original-width=\"600\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhrz0w6ihv1LJUUvuhZTIIWzcqvJ1QNrRvXt5ac6HKX0m3OQC6JKQZz-1v0bE9dZAI_C6_iZOJWsLmqFV1aoLucZMCq5orC-Mcm6Ckqv4CTHzKIByAwPqtMpANGOo8JqZUfIrKnWDdF2sI4\/s1600\/memasang-related-posts-di-blogger-3.jpg\" title=\"Widger Related Post style 2\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStyle 3\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Widger Related Post style 3\" data-original-height=\"555\" data-original-width=\"600\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgIu2oj90ELUKJoEPBLQdLV0pfUPJInUZSU9r2_F9IFlvCZ4-po2FRs983qgGPaVihsiRJkNVrvo3VJw3TJcSb6mPMfV33LHWZWr7P4RkHweKKzZE5gJZiBV0SrKm7TiNxpEIG-gbtCDwrV\/s1600\/memasang-related-posts-di-blogger-2.jpg\" title=\"Widger Related Post style 3\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch2\u003ECara memasang widget Related Posts yang bisa customization langsung dari menu Layout atau Tata Letak Blogger\u003C\/h2\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 1\u003C\/b\u003E\u003Cbr \/\u003E\nMasuk ke Theme \u0026gt; Edit ÌÇÐÄvlog¹Ù·½Èë¿Ú\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 2\u003C\/b\u003E\u003Cbr \/\u003E\nLetakkan kode berikut ini di atas kode \u003Ccode\u003E\u0026lt;\/main\u0026gt;\u003C\/code\u003E\u003Cbr \/\u003E\n\u003Cpre class='html'\u003E\u003Ccode class='html'\u003E\u0026lt;div class='related-posts-widget' id='related-posts-widget'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='notex'\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:section class='relatedPost' id='related-post-set-desktop' maxwidgets='1' name='Related Post Setting (Desktop \u0026amp;amp; Tablet)' preferred='yes' showaddelement='no'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú745' locked='true' title='Related Post' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='1'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;numPosts:6,\u003Cbr \/\u003E\nwidgetStyle:3,\u003Cbr \/\u003E\nsummaryLength:101,\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;!-- only display title if it's non-empty --\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:if cond='data:title != \u0026amp;quot;\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nvar mql = window.matchMedia(\u0026amp;#39;screen and (min-width: 479px)\u0026amp;#39;);if (mql.matches){\u003Cbr \/\u003E\nvar relatedPostConfig={homePage:\u0026amp;quot;\u0026lt;data:blog.homepageUrl\/\u0026gt;\u0026amp;quot;,widgetTitle:\u0026amp;quot;\u0026lt;h4\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h4\u0026gt;\u0026amp;quot;,titleLength:\u0026amp;quot;auto\u0026amp;quot;,thumbnailSize:322,noImage:\u0026amp;quot;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U\/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC\u0026amp;quot;,containerId:\u0026amp;quot;related-post\u0026amp;quot;,newTabLink:false,moreText:\u0026amp;quot;Read More\u0026amp;quot;,\u0026lt;data:content\/\u0026gt;callBack:function(){}}}\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/b:section\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:section class='relatedPost' id='related-post-set-mobile' maxwidgets='1' mobile='yes' name='Related Post Setting (Mobile)' preferred='yes' showaddelement='no'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú746' locked='true' title='Related Post' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='1'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;numPosts:5,\u003Cbr \/\u003E\nwidgetStyle:1,\u003Cbr \/\u003E\nsummaryLength:60,\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;!-- only display title if it's non-empty --\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:if cond='data:title != \u0026amp;quot;\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nvar mql = window.matchMedia(\u0026amp;#39;screen and (max-width: 480px)\u0026amp;#39;);if (mql.matches){\u003Cbr \/\u003E\nvar relatedPostConfig={homePage:\u0026amp;quot;\u0026lt;data:blog.homepageUrl\/\u0026gt;\u0026amp;quot;,widgetTitle:\u0026amp;quot;\u0026lt;h4\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h4\u0026gt;\u0026amp;quot;,titleLength:\u0026amp;quot;auto\u0026amp;quot;,thumbnailSize:322,noImage:\u0026amp;quot;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U\/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC\u0026amp;quot;,containerId:\u0026amp;quot;related-post\u0026amp;quot;,newTabLink:false,moreText:\u0026amp;quot;Read More\u0026amp;quot;,\u0026lt;data:content\/\u0026gt;callBack:function(){}}}\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/b:section\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003E\u003Cb\u003EPerhatian:\u003C\/b\u003E\u003Cbr \/\u003E\nSebetulnya kode tersebut bisa diletakkan dimana saja, asalkan tidak di dalam \u003Cb\u003EBlog1\u003C\/b\u003E atau \u003Ccode\u003Eb:section\u003C\/code\u003E dan masih di dalam kode \u003Ccode\u003E\u0026lt;body\u0026gt;\u003C\/code\u003E. Anda juga bisa meletakkannya di atas kode \u003Ccode\u003E\u0026lt;aside id='sidebar-wrapper’\u0026gt;\u003C\/code\u003E atau yang mirip dengannya.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 3\u003C\/b\u003E\u003Cbr \/\u003E\nTemukan kode \u003Ccode\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/code\u003E (khusus untuk postingan) atau kode \u003Ccode\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/code\u003E lalu letakkan kode berikut di bawah kode tadi:\u003Cbr \/\u003E\n\u003Cpre class='html'\u003E\u003Ccode class='html'\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div class='related-wrapper' id='related-wrapper'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div class='related-post' id='related-post'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nvar labelArray = [\u0026lt;b:if cond='data:post.labels'\u0026gt;\u0026lt;b:loop values='data:post.labels' var='label'\u0026gt;\u0026amp;quot;\u0026lt;data:label.name\/\u0026gt;\u0026amp;quot;\u0026lt;b:if cond='data:label.isLast != \u0026amp;quot;true\u0026amp;quot;'\u0026gt;,\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:loop\u0026gt;\u0026lt;\/b:if\u0026gt;];\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 4\u003C\/b\u003E\u003Cbr \/\u003E\nGanti JavaScript widget Related Post Anda sebelumnya dengan kode berikut ini:\u003Cbr \/\u003E\n\u003Cpre class='javascript'\u003E\u003Ccode class='javascript'\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nvar randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:\"\u0026lt;h4\u0026gt;Related Posts:\u0026lt;\/h4\u0026gt;\",widgetStyle:1,homePage:\"http:\/\/www.dte.web.id\",numPosts:7,summaryLength:125,titleLength:\"auto\",thumbnailSize:200,noImage:\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U\/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC\",containerId:\"related-post\",newTabLink:false,moreText:\"Baca Selengkapnya\",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]==\"undefined\")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement(\"script\");b.type=\"text\/javascript\";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray==\"object\"\u0026amp;\u0026amp;labelArray.length\u0026gt;0)?\"\/-\/\"+l(labelArray)[0]:\"\",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c\u0026gt;0?c:1));j(d.homePage.replace(\/\\\/$\/,\"\")+\"\/feeds\/posts\/summary\"+e+\"?alt=json-in-script\u0026amp;orderby=updated\u0026amp;start-index=\"+a+\"\u0026amp;max-results=\"+d.numPosts+\"\u0026amp;callback=showRelatedPost\")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'\u0026lt;ul class=\"related-post-style-'+A+'\"\u0026gt;',b=d.newTabLink?' target=\"_blank\"':\"\",y='\u0026lt;span class=\"bg_overlay\"\u0026gt;\u0026lt;\/span\u0026gt;',v,t,w,r,u;if(!s){return}for(var q=0;q\u0026lt;d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!==\"auto\"\u0026amp;\u0026amp;d.titleLength\u0026lt;t.length)?t.substring(0,d.titleLength)+\"\u0026amp;hellip;\":t;r=(\"media$thumbnail\"in x[q]\u0026amp;\u0026amp;d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(\/.*?:\\\/\\\/\/g , \"\/\/\").replace(\/\\\/s[0-9]+(\\-c)?\/, \"\/s\"+d.thumbnailSize):d.noImage;u=(\"summary\"in x[q]\u0026amp;\u0026amp;d.summaryLength\u0026gt;0)?x[q].summary.$t.replace(\/\u0026lt;br ?\\\/?\u0026gt;\/g,\" \").replace(\/\u0026lt;.*?\u0026gt;\/g,\"\").replace(\/[\u0026lt;\u0026gt;]\/g,\"\").substring(0,d.summaryLength)+\"\u0026amp;hellip;\":\"\";for(var p=0,a=x[q].link.length;p\u0026lt;a;p++){v=(x[q].link[p].rel==\"alternate\")?x[q].link[p].href:\"#\"}if(A==2){c+='\u0026lt;li\u0026gt;\u0026lt;div class=\"related-post-item-thumbnail\"\u0026gt;\u0026lt;img alt=\"\" src=\"'+r+'\" width=\"'+d.thumbnailSize+'\" height=\"'+d.thumbnailSize+'\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"related-post-item-text\"\u0026gt;\u0026lt;a class=\"related-post-item-title\" title=\"'+t+'\" href=\"'+v+'\"'+b+\"\u0026gt;\"+w+'\u0026lt;\/a\u0026gt;\u0026lt;span class=\"related-post-item-summary\"\u0026gt;\u0026lt;span class=\"related-post-item-summary-text\"\u0026gt;'+u+'\u0026lt;\/span\u0026gt; \u0026lt;a href=\"'+v+'\" class=\"related-post-item-more\"'+b+\"\u0026gt;\"+d.moreText+\"\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\"+y+\"\u0026lt;\/li\u0026gt;\"}else{if(A==3||A==4){c+='\u0026lt;li class=\"related-post-item\" tabindex=\"0\"\u0026gt;\u0026lt;a class=\"related-post-item-title-thumb\" href=\"'+v+'\"'+b+'\u0026gt;\u0026lt;div class=\"related-post-item-thumbnail\"\u0026gt;\u0026lt;img alt=\"\" src=\"'+r+'\" width=\"'+d.thumbnailSize+'\" height=\"'+d.thumbnailSize+'\"\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"related-post-item-tooltip\"\u0026gt;\u0026lt;a class=\"related-post-item-title\" title=\"'+t+'\" href=\"'+v+'\"'+b+\"\u0026gt;\"+w+\"\u0026lt;\/a\u0026gt;\u0026lt;span\u0026gt;\"+u+\"\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\"+y+\"\u0026lt;\/li\u0026gt;\"}else{if(A==5){c+='\u0026lt;li class=\"related-post-item\" tabindex=\"0\"\u0026gt;\u0026lt;a class=\"related-post-item-wrapper\" href=\"'+v+'\" title=\"'+t+'\"'+b+'\u0026gt;\u0026lt;div class=\"related-post-item-thumbnail\"\u0026gt;\u0026lt;img alt=\"\" src=\"'+r+'\" width=\"'+d.thumbnailSize+'\" height=\"'+d.thumbnailSize+'\"\u0026gt;\u0026lt;span class=\"related-post-item-tooltip\"\u0026gt;'+w+\"\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\"+y+\"\u0026lt;\/li\u0026gt;\"}else{if(A==6){c+='\u0026lt;li\u0026gt;\u0026lt;div class=\"related-post-item-tooltip\"\u0026gt;\u0026lt;div class=\"related-post-item-thumbnail\"\u0026gt;\u0026lt;img alt=\"\" src=\"'+r+'\" width=\"'+d.thumbnailSize+'\" height=\"'+d.thumbnailSize+'\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;a class=\"related-post-item-title\" title=\"'+t+'\" href=\"'+v+'\"'+b+\"\u0026gt;\"+w+'\u0026lt;\/a\u0026gt;\u0026lt;span class=\"related-post-item-summary\"\u0026gt;\u0026lt;span class=\"related-post-item-summary-text\"\u0026gt;'+u+\"\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;\"+y+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\"}else{c+='\u0026lt;li\u0026gt;\u0026lt;a title=\"'+t+'\" href=\"'+v+'\"'+b+\"\u0026gt;\"+w+\"\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\"}}}}}s.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=c+=\"\u0026lt;\/ul\u0026gt;\"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(\/\\\/$\/,\"\")+\"\/feeds\/posts\/summary\"+e+\"?alt=json-in-script\u0026amp;orderby=updated\u0026amp;max-results=0\u0026amp;callback=randomRelatedIndex\")})(window,document,document.getElementsByTagName(\"head\")[0]);\u003Cbr \/\u003E\n\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 5\u003C\/b\u003E\u003Cbr \/\u003E\nSaatnya memperbaiki tampilan setiap style widget Related Posts, cari kode \u003Ccode\u003E\u0026lt;\/style\u0026gt;\u003C\/code\u003E lalu letakkan CSS berikut di atas kode tadi:\u003Cbr \/\u003E\n\u003Cpre class='css'\u003E\u003Ccode class='css'\u003E\/* CSS Related Post *\/\u003Cbr \/\u003E\n#related-wrapper{margin:20px auto 0;padding:0;display:block;overflow:hidden;}\u003Cbr \/\u003E\n.related-post{font-family:\u0026amp;#39;Poppins\u0026amp;#39;, sans-serif;margin:0 auto;padding:0;text-align:center}\u003Cbr \/\u003E\n.related-post h4{margin:5px 0 15px 0;font-size: 15px;line-height: 1.2em;padding: 0 15px;position: relative;color: #292828;font-weight: 700;text-align:center;text-transform: uppercase;background-color:#fff;display:inline-block}\u003Cbr \/\u003E\n.related-post h4:before{display: block;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;right: 100%;left: auto;top: 50%;content: \u0026amp;quot;\u0026amp;quot;;}\u003Cbr \/\u003E\n.related-post h4:after{display: block;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;left: 100%;right: auto;top: 50%;content: \u0026amp;quot;\u0026amp;quot;;}\u003Cbr \/\u003E\n.related-post .related-post-style-1,.related-post .related-post-style-2,.related-post .related-post-style-3{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap: wrap;}\u003Cbr \/\u003E\n.related-post .related-post-item-summary,.related-post-style-3 span{font-size:83%;color:#656565;line-height:1.4em;display:inline-block;text-align:left}\u003Cbr \/\u003E\n\/* Related Post Style 3 *\/\u003Cbr \/\u003E\n.related-post-style-3{margin:0 0 0 -1%!important;}\u003Cbr \/\u003E\n.related-post-style-3 li{list-style:none;margin-left:1%!important;padding:0;width:calc(33.3333% - 1%);float:left;}\u003Cbr \/\u003E\n.related-post-style-3 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:125px;padding:0;margin:0 auto 8px;overflow:hidden;}\u003Cbr \/\u003E\n.related-post-style-3 li img{width:100%;height:auto;}\u003Cbr \/\u003E\n.related-post-style-3 a.related-post-item-title{display:block;text-align:left;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:0 auto 15px}\u003Cbr \/\u003E\n.related-post-style-3 a:hover.related-post-item-title{text-decoration:underline}\u003Cbr \/\u003E\n.related-post-style-3 span{display:none!important;height:0;width:0;overflow:hidden} \/\/ this is summary\u003Cbr \/\u003E\n\/* Related Post Style 2 *\/\u003Cbr \/\u003E\n.related-post-style-2{margin:0 auto!important;}\u003Cbr \/\u003E\n.related-post-style-2 li{list-style:none;margin:0 auto 10px;padding:10px 0 0;display:block;width:100%;border-top:1px solid #eee}\u003Cbr \/\u003E\n.related-post-style-2 li:first-child {border-top:none}\u003Cbr \/\u003E\n.related-post-style-2 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;margin:0 auto;width:125px;height:80px;max-width:none;max-height:none;padding:0;overflow:hidden;display:inline-block;float:left}\u003Cbr \/\u003E\n.related-post-style-2 .related-post-item-thumbnail img{width:100%;height:100%}\u003Cbr \/\u003E\n.related-post-style-2 a.related-post-item-title{line-height:1.3em;display:block;text-align:left;font-size:107% !important;color:#2d2d2d;margin:0 0 7px;font-weight:700}\u003Cbr \/\u003E\n.related-post-style-2 a:hover.related-post-item-title{text-decoration:underline}\u003Cbr \/\u003E\n.related-post-style-2 a.related-post-item-more{display:none}\u003Cbr \/\u003E\n.related-post-style-2 .related-post-item-text{display:inline-block;text-align:left;width:calc(100% - 140px);float:right;}\u003Cbr \/\u003E\n\/* Related Post Style 1 *\/\u003Cbr \/\u003E\n.related-post-style-1 li a{line-height:1.3em;display:block;position:relative;font-size:100% !important;color:#2d2d2d;margin:0 0 7px;padding:0 0 0 28px;font-weight:400}\u003Cbr \/\u003E\n.related-post-style-1 li a:before{content:\u0026amp;#39;\u0026amp;#39;;width:7px;height:7px;border-radius:100%;background-color:#08AADB;display:inline-block;position:absolute;top:6px;left:7px}\u003Cbr \/\u003E\n.related-post-style-1 li a:hover{text-decoration:underline}\u003Cbr \/\u003E\n\/* Related Posts Responsive *\/\u003Cbr \/\u003E\n@media screen and (max-width:600px){\u003Cbr \/\u003E\n.related-post-style-3 .related-post-item-thumbnail{height:110px;}\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n@media screen and (max-width:480px){\u003Cbr \/\u003E\n.related-post-style-2 a.related-post-item-title{line-height:1.2em;font-size:100% !important;margin:0 0 5px;}\u003Cbr \/\u003E\n.related-post-style-3 .related-post-item-thumbnail{height:75px;}\u003Cbr \/\u003E\n.related-post-style-3 a.related-post-item-title{line-height:1.2em;font-size:95% !important;margin:0 auto 9px}\u003Cbr \/\u003E\n.related-post .related-post-item-summary,.related-post-style-3 span{font-size:79%;}\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n@media screen and (max-width:320px){\u003Cbr \/\u003E\n.related-post-style-1 li a{line-height:1.2em;}\u003Cbr \/\u003E\n.related-post-style-3{margin:0 auto!important;}\u003Cbr \/\u003E\n.related-post-style-3 li{margin:0 auto 20px!important;padding:0;width:100%;float:none;}\u003Cbr \/\u003E\n.related-post-style-3 li img{display: flex;align-items:center;}\u003Cbr \/\u003E\n.related-post-style-3 .related-post-item-thumbnail{height:auto;margin:0 auto 8px;}\u003Cbr \/\u003E\n.related-post-style-3 a.related-post-item-title{line-height:1.3em;font-size:100%!important}\u003Cbr \/\u003E\n}\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 6\u003C\/b\u003E\u003Cbr \/\u003E\nSaatnya mempercantik tampilan Layout untuk widget Related Post dengan memberi sentuhan warna-warni. Caranya, cari kode berikut:\u003Cbr \/\u003E\n\u003Cpre class='xml'\u003E\u003Ccode class='xml'\u003E\u0026lt;b:template-skin\u0026gt;\u003Cbr \/\u003E\n\u0026lt;![CDATA[\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\nLalu letakkan kode berikut ini di bawah kode tadi:\u003Cbr \/\u003E\n\u003Cpre class='css'\u003E\u003Ccode class='css'\u003Ebody#layout #related-posts-widget{visibility:visible!important;display:block!important;padding:15px 9px 5px;background-color:#673e7d;box-sizing: border-box;}\u003Cbr \/\u003E\nbody#layout #related-posts-widget:before, body#layout .notex:before, body#layout .notex:after{\u003Cbr \/\u003E\ncolor: #8a6d3b;background-color: #fcf8e3;border-color: #faebcc;display: block;margin:0 5px 5px;padding: 5px 10px;box-sizing: border-box;font-size: 14px;font-weight: normal;border-radius: 3px;text-align:left!important}\u003Cbr \/\u003E\nbody#layout #related-posts-widget:before{content: 'Angka untuk kode numPosts adalah \"1 - terserah\"';}\u003Cbr \/\u003E\nbody#layout .notex:before{content: 'Angka untuk kode widgetStyle adalah \"1, 2, atau 3\"';}\u003Cbr \/\u003E\nbody#layout .notex:after{content: 'Angka untuk kode summaryLength adalah \"0 - terserah\". (khusus style 2)';}\u003Cbr \/\u003E\nbody#layout #related-posts-widget .section \u0026gt; h4{margin-left:0!important}\u003Cbr \/\u003E\n#layout #related-post-set-desktop {background:#5ebf79!important;border:none!important}\u003Cbr \/\u003E\n#layout #related-post-set-mobile {background:#5ebf79!important;border:none!important}\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003E\u003Cb\u003EPerhatian:\u003C\/b\u003E\u003Cbr \/\u003E\nJika pada template Anda tidak ada kode \u003Ccode\u003E\u0026lt;b:template-skin\u0026gt;\u003C\/code\u003E, Anda bisa letakkan CSS tersebut di atas kode \u003Ccode\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/code\u003E. Hanya saja tampilan Related Posts di layout menjadi tidak berwarna.\u003C\/div\u003E\u003Cbr \/\u003E\nIkuti tutorial tentang \u003Ca href=\"https:\/\/www.bungfrangki.com\/2018\/07\/cara-mewarnai-layout-blogger.html\" target=\"_blank\"\u003ECara Mewarnai Layout atau Tata Letak Blogger\u003C\/a\u003E jika Anda tertarik mewarnai setiap section atau widget template Anda di Layout.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 7\u003C\/b\u003E\u003Cbr \/\u003E\nSimpan Tema\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 8\u003C\/b\u003E\u003Cbr \/\u003E\nSilahkan akses menu Layout atau Tata Letak, scroll ke bawah, lalu edit pada masing-masing widget \u003Cb\u003ERelated Post Setting\u003C\/b\u003E yang ada disitu (desktop dan mobile), dengan catatan sebagai berikut:\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003EUntuk kode \u003Ccode\u003EnumPosts\u003C\/code\u003E isi dengan angka 1 – terserah.\u003C\/li\u003E\n\u003Cli\u003EUntuk kode \u003Ccode\u003EwidgetStyle\u003C\/code\u003E isi dengan angka 1, 2 atau 3.\u003C\/li\u003E\n\u003Cli\u003EUntuk kode \u003Ccode\u003EsummaryLength\u003C\/code\u003E isi dengan angka 0 – terserah.\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"warning\"\u003E\u003Cb\u003ECatatan!\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003EIni adalah modifikasi \u003Ca href=\"https:\/\/www.dte.web.id\/2013\/07\/widget-artikel-terkait-blogger-6-dalam-1.html\" rel=\"nofollow noopener\" target=\"_blank\"\u003Ewidget Related Posts DTE :]\u003C\/a\u003E, yang JavaScriptnya sedikit dikonfigurasi. Jadi pastikan Anda melakukan Langkah 4.\u003C\/li\u003E\n\u003Cli\u003EJika Anda mencoba menerapkan widget ini tetapi tidak mengikuti seluruh rangkaian yang ditutorialkan di atas dengan benar, maka dapat dipastikan pemasangannya akan gagal total.\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nSebetulnya widget Related Posts atau Artikel Terkait ini masih bisa ditambahkan style lainnya, yaitu bisa sampai 6 style. Kemungkinan akan di update dilain waktu. Demikian, semoga bermanfaat!\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/8246796537813388422\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2018\/07\/cara-pasang-related-posts-responsive.html#comment-form","title":"3 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/8246796537813388422"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/8246796537813388422"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2018\/07\/cara-pasang-related-posts-responsive.html","title":"Cara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout\/Tata Letak Blogger"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEj8lC3TXKNGE_6rI8GtgurwK_Q-l7MjkEOegqzgmC9ZCXQhw0IR2Q6Y4dRGXMwlQ_Inzl8-OuJydsk5mJbTM6GzHd5halZORhoUogeQAha9_VFdan6WxiffvHFrwrAUn3Wtm7LygowMKQ84\/s72-c\/cara-memasang-related-posts-di-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-1932735341801833063"},"published":{"$t":"2019-02-15T12:41:00.001+07:00"},"updated":{"$t":"2023-02-10T18:06:01.520+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Modifikasi Recent Posts Blogger\/Blogspot dengan Nomor"},"content":{"type":"html","$t":"Berikut ini adalah tips Blogger atau Blogspot tentang \u003Ca href=\"https:\/\/www.bungfrangki.com\/2019\/02\/recent-posts.html\" target=\"_blank\"\u003Ecara membuat dan memasang widget Recent Posts\u003C\/a\u003E (postingan terbaru) yang pakai nomornya. Sebetulnya tampilan widget Recent Posts ini adalah salah satu widget yang tampilannya akan saya terapkan pada salah satu project template di \u003Ca href=\"https:\/\/www.themeindie.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EThemeindie\u003C\/a\u003E. Hanya saja karena beberapa pertimbangan, akhirnya tampilan recent posts ini diganti dengan modifikasi terbaru.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Modifikasi Recent Posts Blogger\/Blogspot dengan Nomor\" data-original-height=\"462\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgdLRo4u0wef7HhMzFpixj3GAyP1Q31FXdD8hadCiEkwrVWAHi3_hYR2T7gMRc9Li2V_WCxIqRCZaT5-3NblvvAvhl6JXcdvHYTyqIEL8aZlEuRAoynlCkg-5xiK42YbqENRdKKy4NVGnJq\/s1600\/widget-recent-posts.png\" title=\"Modifikasi Recent Posts Blogger\/Blogspot dengan Nomor\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nDibunag sayang, pun saya memikirkan barangkali ada yang tertarik dengan tampilan widget Recent Posts semacam ini, jadi bisa bermanfaat bagi yang lainnya.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSaya akan jelaskan mengapa widget Recent Posts ini layak dipertimbangkan untuk dipasang, adalah tampilan nomornya yang sengaja dibangun dari beberapa baris CSS. Sehingga mampu membikin dia tetap tampil di \u003Ci\u003Emiddle - center\u003C\/i\u003E meski tinggi title artikel di widget tampil setinggi-tingginya.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nJelasnya, seperti yang nampak pada featured image di atas. CSS-nya seperti ini:\u003Cbr \/\u003E\n\u003Cpre class='css'\u003E\u003Ccode class='css'\u003E\/* Recent Posts by Bungfrangki.com *\/\u003Cbr \/\u003E\n#recent-articles .widget-content, #recent-articles ul {padding: 0;counter-reset:count;margin: 0 auto;display: block}\u003Cbr \/\u003E\n#recent-articles a:link, #recent-articles a:visited {font-weight: normal}\u003Cbr \/\u003E\n#recent-articles ul li {background-color:#f7f7f7;margin:0 auto;padding:8px 8px 8px 60px;list-style:none;position:relative;border-bottom:1px solid #fff;font-size:90%;text-align:left}\u003Cbr \/\u003E\n#recent-articles ul li:before{color: #fff!important;counter-increment: count;content: counter(count);position: absolute;left:0;top:0;bottom:0;text-align: center;z-index: 51;transition: all .4s;width:50px;font-size: 150%!important;background:#2b71a2;font-weight:500;text-align: center;padding:0;border-right:1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%}\u003Cbr \/\u003E\n#recent-articles ul li:last-child{border:none}\u003Cbr \/\u003E\n#recent-articles ul li a {font-weight:400 ;display:block;color:#222 ;text-decoration:none ;line-height:1.4em ;}\u003Cbr \/\u003E\n#recent-articles ul li:hover{background-color:#f5f5f5;}\u003Cbr \/\u003E\n#recent-articles ul li:hover:before{background-color:#24699A;}\u003Cbr \/\u003E\n#recent-articles ul li a:hover,#recent-articles ul li:hover a {color: #2b71a2 !important;}\u003Cbr \/\u003E\n#recent-articles ul li:before, #recent-articles ul li .item-title a {font-weight: 400;font-size: 12px;color: inherit;text-decoration: none}\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\nMasuk ke Edit ÌÇÐÄvlog¹Ù·½Èë¿Ú, lalu letakkan ini di atas kode \u003Ccode\u003E\u0026lt;\/body\u0026gt;\u003C\/code\u003E atau\u003Ccode\u003E\u0026nbsp;\u0026amp;lt;!--\u0026lt;\/body\u0026gt;--\u0026amp;gt;\u0026amp;lt;\/body\u0026amp;gt;\u003C\/code\u003E\u003Cbr \/\u003E\n\u003Cpre class='javascript'\u003E\u003Ccode class='javascript'\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nnumPosts = 10;function recentPosts(a){if(document.getElementById(\"recent-posts\")){var e=a.feed.entry,title,link,content=\"\",ct=document.getElementById(\"recent-posts\");ct.async=true;for(var i=0;i\u0026lt;numPosts;i++){for(var j=0;j\u0026lt;numPosts;j++){if(e[i].link[j].rel==\"alternate\"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='\u0026lt;li class=\"recent-posts\"\u0026gt;\u0026lt;a href=\"'+link+'\" title=\"'+title+'\"\u0026gt;'+title+'\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;'}ct.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='\/feeds\/posts\/summary?alt=json-in-script\u0026amp;orderby=published\u0026amp;max-results='+numPosts+'\u0026amp;callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);\u003Cbr \/\u003E\n\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\nTerakhir, buka Tata Letak atau Layout lalu Tambah Gadget, lalu copas kode berikut ini:\u003Cbr \/\u003E\n\u003Cpre class='html'\u003E\u003Ccode class='html'\u003E\u0026lt;div id='recent-articles' class='recent-articles'\u0026gt;\u0026lt;ul id=\"recent-posts\"\u0026gt;\u0026lt;\/ul\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\nSimpan."},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/www.bungfrangki.com\/feeds\/1932735341801833063\/comments\/default","title":"Posting Komentar"},{"rel":"replies","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2019\/02\/recent-posts.html#comment-form","title":"0 Komentar"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/1932735341801833063"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/1932735341801833063"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2019\/02\/recent-posts.html","title":"Modifikasi Recent Posts Blogger\/Blogspot dengan Nomor"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgdLRo4u0wef7HhMzFpixj3GAyP1Q31FXdD8hadCiEkwrVWAHi3_hYR2T7gMRc9Li2V_WCxIqRCZaT5-3NblvvAvhl6JXcdvHYTyqIEL8aZlEuRAoynlCkg-5xiK42YbqENRdKKy4NVGnJq\/s72-c\/widget-recent-posts.png","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-2940605259266803723"},"published":{"$t":"2018-12-22T15:25:00.000+07:00"},"updated":{"$t":"2018-12-22T15:25:11.253+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Cara Menampilkan Widget Related Post di Sidebar Blogger"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\"\u003EUntuk tutorial cara memindahkan widget Related Posts yang biasanya muncul di bawah artikel\/postingan menjadi tampil dibagian sidebar blogspot, konsep dasarnya sebetulnya hampir sama dengan tutorial yang pernah saya bagikan beberapa waktu lalu.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"Cara Menampilkan Widget Related Post di Sidebar Blogger\" data-original-height=\"462\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgdlwbQurdsMIq84CkQf9EWUI9Bf2KL3W22bprHMnTfPwdV4ukFTPWo5JH08z06WV-NHkn-vhkvw81DOpqpctYaxNinIBRzAJMbYkCj8N2uxzCiqD80U1AJ-CmvBlXbxPdGdesxOUPtKfvQ\/s1600\/cara-menampilkan-widget-related-post-di-sidebar-blogger.png\" title=\"Cara Menampilkan Widget Related Post di Sidebar Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nYaitu tentang \u003Ca href=\"https:\/\/www.bungfrangki.com\/2018\/07\/cara-pasang-related-posts-responsive.html\" target=\"_blank\"\u003ECara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout\/Tata Letak Blogger\u003C\/a\u003E, yaitu bisa konfigurasikan beberapa opsi penting langsung dari menu Layout atau Tata Letak Blogger. Hanya saja ada beberapa potongan kode lagi yang perlu diurai (dicerai-beraikan).\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nNah, sebelum melangkah ke tutorialnya, alangkah baiknya disimak dulu berbagai fitur yang bakal Anda dapatkan jika memasang widget ini.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003EFitur:\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003ETersedia 6 jenis style (model tampilan) dalam satu widget.\u003C\/li\u003E\n\u003Cli\u003EBisa pilih 1 dari 6 style tersebut langsung dari Layout\/Tata Letak Blogger.\u003C\/li\u003E\n\u003Cli\u003EBisa menentukan berapa jumlah post yang ingin ditampilkan pada widget melalu Layout\/Tata Letak Blogger.\u003C\/li\u003E\n\u003Cli\u003EBisa menentukan juga jumlah summary (post snippet) langsung setting di menu Layout.\u003C\/li\u003E\n\u003Cli\u003EBisa pindahkan gadget dari widget Related Posts tersebut dimana saja sesuka hati melalui Layout\/Tata Letak Blogger.\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cbr \/\u003E\nBeginilah tampilan style widget Related Posts yang bakal tampil di sidebar blog.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Cara Menampilkan Widget Related Post di Sidebar Blogger\" data-original-height=\"422\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEioRq_53SLwokie9T25dHsXaM7wEvKrRli4tSjXKzEd_37C_KPLLrm238Wk6ByIiQcnj2kswO8Ce8ptuGUexzq1FEtFp0w_GquQOr2S8SWMdhlzeSnN2nt9eRF3nZITm3CGqN1lNYJ3J1yc\/s1600\/agar-related-post-tampil-di-sidebar-blogger-1.jpg\" title=\"Cara Menampilkan Widget Related Post di Sidebar Blogger\" \/\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Cara Menampilkan Widget Related Post di Sidebar Blogger\" data-original-height=\"422\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjlqYCkEUH-iDi55sagPspf4tsOhDASfIKyb5snLBA3t3d6oqAVQ5YoRA1FmO-U_F5bgQ9mEmH7m86CSBhVoeaE0HbUxCxJpCc_KcUmrq9tKLPw2giBiq-ztj2Wp1EIXWl2saTLMG7oPsTA\/s1600\/agar-related-post-tampil-di-sidebar-blogger-2.jpg\" title=\"Cara Menampilkan Widget Related Post di Sidebar Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch2\u003ECara tampilkan widget Related Post di Sidebar Blogger\u003C\/h2\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"warning\"\u003E\u003Cb\u003EPerhatian!\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003ESebelum melangkah ke tutorial, pastikan Anda sudah backup template terlebih dahulu.\u003C\/li\u003E\n\u003Cli\u003EPastikan juga Anda sudah menyingkirkan seluruh kode (CSS dan JavaScript) dari widget Related Post sebelumnya, agar tidak terjadi duplikat kode.\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 1\u003C\/b\u003E\u003Cbr \/\u003E\nMasuk ke Tema \u0026gt; Edit ÌÇÐÄvlog¹Ù·½Èë¿Ú\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 2\u003C\/b\u003E\u003Cbr \/\u003E\nLetakkan kode berikut ini di atas kode \u003Ccode\u003E\u0026lt;\/main\u0026gt;\u003C\/code\u003E atau di atas \u003Ccode\u003E\u0026lt;aside id='sidebar-wrapper'\u0026gt;\u003C\/code\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='related-posts-widget' id='related-posts-widget'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='note2'\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:section class='relatedPost' id='related-post-set-sidebar' maxwidgets='1' name='Related Post Setting' preferred='yes' showaddelement='no'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú790' locked='true' title='Related Post' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='1'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;numPosts:6,\u003Cbr \/\u003E\nwidgetStyle:1,\u003Cbr \/\u003E\nsummaryLength:100,\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;!-- only display title if it's non-empty --\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:if cond='data:title != \u0026amp;quot;\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nvar relatedPostConfig={homePage:\u0026amp;quot;\u0026lt;data:blog.homepageUrl\/\u0026gt;\u0026amp;quot;,widgetTitle:\u0026amp;quot;\u0026lt;h4\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h4\u0026gt;\u0026amp;quot;,titleLength:\u0026amp;quot;auto\u0026amp;quot;,thumbnailSize:322,noImage:\u0026amp;quot;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U\/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC\u0026amp;quot;,containerId:\u0026amp;quot;related-post\u0026amp;quot;,newTabLink:false,moreText:\u0026amp;quot;Read More\u0026amp;quot;,\u0026lt;data:content\/\u0026gt;callBack:function(){}}\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/b:section\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 3\u003C\/b\u003E\u003Cbr \/\u003E\nCari kode \u003Ccode\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/code\u003E (untuk postingan), lalu letakkan kode berikut di bawahnya:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='related-wrapper' id='related-wrapper'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\nvar labelArray = [\u0026lt;b:if cond='data:post.labels'\u0026gt;\u0026lt;b:loop values='data:post.labels' var='label'\u0026gt;\u0026amp;quot;\u0026lt;data:label.name\/\u0026gt;\u0026amp;quot;\u0026lt;b:if cond='data:label.isLast != \u0026amp;quot;true\u0026amp;quot;'\u0026gt;,\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:loop\u0026gt;\u0026lt;\/b:if\u0026gt;];\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 4\u003C\/b\u003E\u003Cbr \/\u003E\nSaatnya menambahkan CSS untuk mempebaiki masing-masing style dari widget Related Post. Caranya, cari kode \u003Ccode\u003E\u0026lt;\/style\u0026gt;\u003C\/code\u003E lalu letakkan kode berikut diatasnya:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\/* CSS Related Post for Sidebar *\/\u003Cbr \/\u003E\n#related-wrapper{margin:20px auto 0;padding:0;display:block;width:100%;max-width:300px;overflow:hidden;}\u003Cbr \/\u003E\n.related-post{font-family:\u0026amp;#39;Poppins\u0026amp;#39;, sans-serif;margin:0 auto;padding:0;text-align:center}\u003Cbr \/\u003E\n.related-post h4{margin:5px 0 15px 0;font-size: 15px;line-height: 1.2em;padding: 0 15px;position: relative;color: #292828;font-weight: 700;text-align:center;text-transform: uppercase;background-color:#fff;display:inline-block}\u003Cbr \/\u003E\n.related-post h4:before{display: block;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;right: 100%;left: auto;top: 50%;content: \u0026amp;quot;\u0026amp;quot;;}\u003Cbr \/\u003E\n.related-post h4:after{display: block;width: 500px;height: 0;border-bottom:1px solid #ddd;position: absolute;left: 100%;right: auto;top: 50%;content: \u0026amp;quot;\u0026amp;quot;;}\u003Cbr \/\u003E\n.related-post .related-post-style-1,.related-post .related-post-style-2,.related-post .related-post-style-3,.related-post .related-post-style-4,.related-post-style-5{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap: wrap;}\u003Cbr \/\u003E\n.related-post .related-post-item-summary,.related-post-style-3 span,.related-post-style-4 span{font-size:83%;color:#656565;text-align:left!important;margin:0 auto;padding:0}\u003Cbr \/\u003E\n\/* Related Post Style 6 *\/\u003Cbr \/\u003E\n.related-post-style-6 .related-post-item-tooltip{display:block;width:100%}\u003Cbr \/\u003E\n.related-post-style-6 li .related-post-item-summary{display:none}\u003Cbr \/\u003E\n.related-post-style-6 li{list-style:none;margin:0 auto 10px;padding:0 0 10px;border-bottom:1px solid #eee;display:block;width:100%;position:relative;overflow:hidden}\u003Cbr \/\u003E\n.related-post-style-6 a.related-post-item-title{display:block;text-align:left;font-weight:400;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:0 auto 7px;text-align:left;}\u003Cbr \/\u003E\n.related-post-style-6 a:hover{text-decoration:underline}\u003Cbr \/\u003E\n.related-post-style-6 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:70px;height:70px;padding:0;margin:0 15px 0 0;overflow:hidden;float:left}\u003Cbr \/\u003E\n.related-post-style-6 .related-post-item-thumbnail img{width:auto;height:100%;display: flex;align-items:center;}\u003Cbr \/\u003E\n.related-post-style-6 li:first-child .related-post-item-thumbnail{width:100%;height:175px;float:none;margin:0 auto 10px}\u003Cbr \/\u003E\n.related-post-style-6 li:first-child .related-post-item-thumbnail img{width:100%;height:auto;}\u003Cbr \/\u003E\n.related-post-style-6 li:first-child .related-post-item-summary{display:inline-block}\u003Cbr \/\u003E\n.related-post-style-6 li:last-child{border:none}\u003Cbr \/\u003E\n\/* Related Post Style 5 *\/\u003Cbr \/\u003E\n.related-post-style-5{margin:0 auto;counter-reset:count;}\u003Cbr \/\u003E\n.related-post-style-5 li{list-style:none;margin:0 auto 10px;height:100px;display:block;width:100%;position:relative;border-radius:5px;overflow:hidden}\u003Cbr \/\u003E\n.related-post-style-5 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:100%;padding:0;margin:0 auto;overflow:hidden}\u003Cbr \/\u003E\n.related-post-style-5 li img{width:100%;height:auto;position:relative;}\u003Cbr \/\u003E\n.related-post-style-5 a{display:block;font-weight:700;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#fff;margin:0 auto}\u003Cbr \/\u003E\n.related-post-style-5 a:hover{text-decoration:underline}\u003Cbr \/\u003E\n.related-post-style-5 li a span{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100px;width:100%;position:absolute;z-index:10;bottom:-100px;display:block;background:rgba(0,0,0,.4);transition:all .2s ease-in-out;padding:5px 5px 5px 35px;display:flex;flex-direction:column;justify-content:center;}\u003Cbr \/\u003E\n.related-post-style-5 li:hover a span{bottom:0}\u003Cbr \/\u003E\n.related-post-style-5 li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left: 0px;text-align: center;top: 0;font: bold 80px\/1 Sans-Serif;z-index: 51;transition: all .4s;height:100px;min-width: 30px;font-size: 18px;line-height: 100px;background:rgba(26,27,30,.7);font-weight: 800;text-align: center;padding:0;opacity:0.7;}\u003Cbr \/\u003E\n\/* Related Post Style 4 *\/\u003Cbr \/\u003E\n.related-post-style-4{margin:0 auto;padding:0}\u003Cbr \/\u003E\n.related-post-style-4 ul li,.related-post-style-4 ul,.related-post-style-4 li{list-style:none;outline:0;border:0;margin:0 0;padding:0}\u003Cbr \/\u003E\n.related-post-style-4 li{list-style:none;margin:0 auto;display:block;width:100%;overflow:hidden}\u003Cbr \/\u003E\n.related-post-style-4 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:auto;max-height:180px;padding:0;margin:0 auto;overflow:hidden;}\u003Cbr \/\u003E\n.related-post-style-4 li img{width:100%;height:auto;}\u003Cbr \/\u003E\n.related-post-style-4 a.related-post-item-title{display:block;text-align:center;font-weight:700;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:0 auto 7px}\u003Cbr \/\u003E\n.related-post-style-4 a:hover.related-post-item-title{text-decoration:underline}\u003Cbr \/\u003E\n.related-post-style-4 span{display:table-cell;}\u003Cbr \/\u003E\n.related-post-style-4 .related-post-item-tooltip{margin:-25px 15px 10px;padding:10px;display:block;position:relative;background-color:#fff;overflow:hidden}\u003Cbr \/\u003E\n.related-post-style-4 span{text-align:center;display:inline}\u003Cbr \/\u003E\n\/* Related Post Style 3 *\/\u003Cbr \/\u003E\n.related-post-style-3{margin:0 auto}\u003Cbr \/\u003E\n.related-post-style-3 li{list-style:none;margin:0 auto;display:block;width:100%}\u003Cbr \/\u003E\n.related-post-style-3 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;width:100%;height:auto;max-height:180px;padding:0;margin:10px auto 0;overflow:hidden;}\u003Cbr \/\u003E\n.related-post-style-3 li img{width:100%;height:auto;}\u003Cbr \/\u003E\n.related-post-style-3 a.related-post-item-title{display:block;text-align:left;font-weight:700;overflow:hidden;line-height:1.3em;font-size:100% !important;color:#111;margin:10px auto 5px}\u003Cbr \/\u003E\n.related-post-style-3 a:hover.related-post-item-title{text-decoration:underline}\u003Cbr \/\u003E\n.related-post-style-3 span{display:table-cell;} \/\/ this is summary\u003Cbr \/\u003E\n\/* Related Post Style 2 *\/\u003Cbr \/\u003E\n.related-post-style-2{margin:0 auto!important;}\u003Cbr \/\u003E\n.related-post-style-2 li{list-style:none;margin:0 auto 10px;padding:10px 0 0;display:block;width:100%;border-top:1px solid #eee}\u003Cbr \/\u003E\n.related-post-style-2 li:first-child {border-top:none}\u003Cbr \/\u003E\n.related-post-style-2 .related-post-item-thumbnail{display: flex;align-items: center;justify-content: center;margin:0 auto;width:125px;height:80px;max-width:none;max-height:none;padding:0;overflow:hidden;display:inline-block;float:left}\u003Cbr \/\u003E\n.related-post-style-2 .related-post-item-thumbnail img{width:100%;height:100%}\u003Cbr \/\u003E\n.related-post-style-2 a.related-post-item-title{line-height:1.3em;display:block;text-align:left;font-size:100% !important;color:#2d2d2d;margin:0 0 5px;font-weight:700}\u003Cbr \/\u003E\n.related-post-style-2 a:hover.related-post-item-title{text-decoration:underline}\u003Cbr \/\u003E\n.related-post-style-2 a.related-post-item-more{display:none}\u003Cbr \/\u003E\n.related-post-style-2 .related-post-item-text{display:inline-block;text-align:left;width:calc(100% - 140px);float:right;}\u003Cbr \/\u003E\n\/* Related Post Style 1 *\/\u003Cbr \/\u003E\n.related-post-style-1{margin:0 auto;counter-reset:count;}\u003Cbr \/\u003E\n\u0026nbsp; .related-post-style-1 li{font-size:95% !important;list-style:none;background-color:#f5f5f5;border-bottom:1px solid #fff;display:block;position:relative;margin:0 auto;padding:13px 10px 13px 50px;text-align:left}\u003Cbr \/\u003E\n.related-post-style-1 li a{color:#2d2d2d;font-weight:400;line-height:1.3em;text-align:left;display:block}\u003Cbr \/\u003E\n.related-post-style-1 li a:hover{text-decoration:underline}\u003Cbr \/\u003E\n.related-post-style-1 li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left: 0px;text-align: center;top: 0;font-size:70px;z-index: 51;transition: all .4s;min-width:40px;font-size: 18px;background:rgba(0,0,0,.5);vertical-align:center;height:100%;font-weight: 700;text-align: center;padding:0;display:flex;flex-direction:column;justify-content:center;height:100%;}\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 5\u003C\/b\u003E\u003Cbr \/\u003E\nLangkah penting lain yang harus dilakukan adala memperbaiki tampilan layout dari widget Related Post, agar mudah melakukan pengeditan.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCaranya, cari kode \u003Ccode\u003E]]\u0026gt;\u0026lt;\/b:template-skin\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/code\u003E lalu letakkan kode berikut di atas kode tadi:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003Ebody#layout #related-posts-widget-side:before, body#layout .note2:before, body#layout .note2:after{\u003Cbr \/\u003E\ncolor: #8a6d3b;background-color: #fcf8e3;border-color: #faebcc;display: block;margin:0 5px 5px;padding: 5px 10px;box-sizing: border-box;font-size: 14px;font-weight: normal;border-radius: 3px;text-align:left!important}\u003Cbr \/\u003E\nbody#layout #related-posts-widget-side:before{content: 'Angka untuk kode numPosts adalah \"1 - terserah\"';}\u003Cbr \/\u003E\nbody#layout .note2:before{content: 'Angka untuk kode widgetStyle adalah \"1, 2, 3, 4, 5, atau 6\"';}\u003Cbr \/\u003E\nbody#layout .note2:after{content: 'Angka untuk kode summaryLength adalah \"0 - terserah\".';}\u003Cbr \/\u003E\nbody#layout #related-posts-widget-side .section \u0026gt; h4{margin-left:0!important}\u003Cbr \/\u003E\n#layout #related-post-set-sidebar {background:#189169!important;border:none!important}\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003E\u003Cb\u003ECatatan:\u003C\/b\u003E\u003Cbr \/\u003E\nDisarankan meletakkan kode pada \u003Cb\u003Elangkah 5\u003C\/b\u003E ini di dalam \u003Ccode\u003E]]\u0026gt;\u0026lt;\/b:template-skin\u0026gt;\u003C\/code\u003E. Jika di template Anda belum ada kode tersebut, silahkan ikuti caranya pada artikel \u003Ca href=\"https:\/\/www.bungfrangki.com\/2018\/07\/cara-mewarnai-layout-blogger.html\" target=\"_blank\"\u003ECara Mewarnai Layout atau Tata Letak Blogger\u003C\/a\u003E.\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 6\u003C\/b\u003E\u003Cbr \/\u003E\nSimpan JavaScript berikut di atas kode \u003Ccode\u003E\u0026lt;\/body\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E\u0026amp;lt;!--\u0026lt;\/body\u0026gt;--\u0026amp;gt;\u0026amp;lt;\/body\u0026amp;gt;\u003C\/code\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nvar randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:\"\u0026lt;h4\u0026gt;Related Posts:\u0026lt;\/h4\u0026gt;\",widgetStyle:1,homePage:\"http:\/\/www.dte.web.id\",numPosts:7,summaryLength:125,titleLength:\"auto\",thumbnailSize:200,noImage:\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U\/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC\",containerId:\"related-post\",newTabLink:false,moreText:\"Baca Selengkapnya\",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]==\"undefined\")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement(\"script\");b.type=\"text\/javascript\";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray==\"object\"\u0026amp;\u0026amp;labelArray.length\u0026gt;0)?\"\/-\/\"+l(labelArray)[0]:\"\",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c\u0026gt;0?c:1));j(d.homePage.replace(\/\\\/?\\?m=\\d+(\\\u0026amp;|$)|\\\/+$\/, \"\")+\"\/feeds\/posts\/summary\"+e+\"?alt=json-in-script\u0026amp;orderby=updated\u0026amp;start-index=\"+a+\"\u0026amp;max-results=\"+d.numPosts+\"\u0026amp;callback=showRelatedPost\")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'\u0026lt;ul class=\"related-post-style-'+A+'\"\u0026gt;',b=d.newTabLink?' target=\"_blank\"':\"\",y='\u0026lt;span class=\"bg_overlay\"\u0026gt;\u0026lt;\/span\u0026gt;',v,t,w,r,u;if(!s){return}for(var q=0;q\u0026lt;d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!==\"auto\"\u0026amp;\u0026amp;d.titleLength\u0026lt;t.length)?t.substring(0,d.titleLength)+\"\u0026amp;hellip;\":t;r=(\"media$thumbnail\"in x[q]\u0026amp;\u0026amp;d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(\/.*?:\\\/\\\/\/g , \"\/\/\").replace(\/\\\/s[0-9]+(\\-c)?\/, \"\/s\"+d.thumbnailSize):d.noImage;u=(\"summary\"in x[q]\u0026amp;\u0026amp;d.summaryLength\u0026gt;0)?x[q].summary.$t.replace(\/\u0026lt;br ?\\\/?\u0026gt;\/g,\" \").replace(\/\u0026lt;.*?\u0026gt;\/g,\"\").replace(\/[\u0026lt;\u0026gt;]\/g,\"\").substring(0,d.summaryLength)+\"\u0026amp;hellip;\":\"\";for(var p=0,a=x[q].link.length;p\u0026lt;a;p++){v=(x[q].link[p].rel==\"alternate\")?x[q].link[p].href:\"#\"}if(A==2){c+='\u0026lt;li\u0026gt;\u0026lt;div class=\"related-post-item-thumbnail\"\u0026gt;\u0026lt;img alt=\"\" src=\"'+r+'\" width=\"'+d.thumbnailSize+'\" height=\"'+d.thumbnailSize+'\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"related-post-item-text\"\u0026gt;\u0026lt;a class=\"related-post-item-title\" title=\"'+t+'\" href=\"'+v+'\"'+b+\"\u0026gt;\"+w+'\u0026lt;\/a\u0026gt;\u0026lt;span class=\"related-post-item-summary\"\u0026gt;\u0026lt;span class=\"related-post-item-summary-text\"\u0026gt;'+u+'\u0026lt;\/span\u0026gt; \u0026lt;a href=\"'+v+'\" class=\"related-post-item-more\"'+b+\"\u0026gt;\"+d.moreText+\"\u0026lt;\/a\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\"+y+\"\u0026lt;\/li\u0026gt;\"}else{if(A==3||A==4){c+='\u0026lt;li class=\"related-post-item\" tabindex=\"0\"\u0026gt;\u0026lt;a class=\"related-post-item-title-thumb\" href=\"'+v+'\"'+b+'\u0026gt;\u0026lt;div class=\"related-post-item-thumbnail\"\u0026gt;\u0026lt;img alt=\"\" src=\"'+r+'\" width=\"'+d.thumbnailSize+'\" height=\"'+d.thumbnailSize+'\"\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;div class=\"related-post-item-tooltip\"\u0026gt;\u0026lt;a class=\"related-post-item-title\" title=\"'+t+'\" href=\"'+v+'\"'+b+\"\u0026gt;\"+w+\"\u0026lt;\/a\u0026gt;\u0026lt;span\u0026gt;\"+u+\"\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\"+y+\"\u0026lt;\/li\u0026gt;\"}else{if(A==5){c+='\u0026lt;li class=\"related-post-item\" tabindex=\"0\"\u0026gt;\u0026lt;a class=\"related-post-item-wrapper\" href=\"'+v+'\" title=\"'+t+'\"'+b+'\u0026gt;\u0026lt;div class=\"related-post-item-thumbnail\"\u0026gt;\u0026lt;img alt=\"\" src=\"'+r+'\" width=\"'+d.thumbnailSize+'\" height=\"'+d.thumbnailSize+'\"\u0026gt;\u0026lt;span class=\"related-post-item-tooltip\"\u0026gt;'+w+\"\u0026lt;\/span\u0026gt;\u0026lt;\/a\u0026gt;\"+y+\"\u0026lt;\/li\u0026gt;\"}else{if(A==6){c+='\u0026lt;li\u0026gt;\u0026lt;div class=\"related-post-item-tooltip\"\u0026gt;\u0026lt;div class=\"related-post-item-thumbnail\"\u0026gt;\u0026lt;img alt=\"\" src=\"'+r+'\" width=\"'+d.thumbnailSize+'\" height=\"'+d.thumbnailSize+'\"\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;a class=\"related-post-item-title\" title=\"'+t+'\" href=\"'+v+'\"'+b+\"\u0026gt;\"+w+'\u0026lt;\/a\u0026gt;\u0026lt;span class=\"related-post-item-summary\"\u0026gt;\u0026lt;span class=\"related-post-item-summary-text\"\u0026gt;'+u+\"\u0026lt;\/span\u0026gt;\u0026lt;\/span\u0026gt;\"+y+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\"}else{c+='\u0026lt;li\u0026gt;\u0026lt;a title=\"'+t+'\" href=\"'+v+'\"'+b+\"\u0026gt;\"+w+\"\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\"}}}}}s.innerÌÇÐÄvlog¹Ù·½Èë¿Ú=c+=\"\u0026lt;\/ul\u0026gt;\"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(\/\\\/?\\?m=\\d+(\\\u0026amp;|$)|\\\/+$\/, \"\")+\"\/feeds\/posts\/summary\"+e+\"?alt=json-in-script\u0026amp;orderby=updated\u0026amp;max-results=0\u0026amp;callback=randomRelatedIndex\")})(window,document,document.getElementsByTagName(\"head\")[0]);\u003Cbr \/\u003E\n\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 7\u003C\/b\u003E\u003Cbr \/\u003E\nSimpan Tema\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 8\u003C\/b\u003E\u003Cbr \/\u003E\nSilahkan menuju ke menu Layout atau Tata Letak di dashboard Blogger Anda, lalu klik \u003Cb\u003ETambahkan Gadget\u003C\/b\u003E pada sidebar, kemudian pilih \u003Cb\u003EÌÇÐÄvlog¹Ù·½Èë¿Ú\/JavaScript\u003C\/b\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLalu isi dengan kode berikut ini:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='related-post' id='related-post'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nDan simpan.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 8\u003C\/b\u003E\u003Cbr \/\u003E\nUntuk mengkonfigurasi tampilan widget, silahkan akses dan klik \u003Cb\u003Eedit\u003C\/b\u003E gadget yang berjudul \u003Cb\u003ERelated Post Setting\u003C\/b\u003E di layout atau Tata Letak Blogger Anda.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAdapun catatan mengkonfigurasi sudah disertakan pada widget, yang ketentuannya seperti berikut:\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003EAngka untuk kode \u003Ccode\u003EnumPosts\u003C\/code\u003E adalah \"1 - terserah\"\u003C\/li\u003E\n\u003Cli\u003EAngka untuk kode \u003Ccode\u003EwidgetStyle\u003C\/code\u003E adalah \"1, 2, 3, 4, 5, atau 6\"\u003C\/li\u003E\n\u003Cli\u003EAngka untuk kode \u003Ccode\u003EsummaryLength\u003C\/code\u003E adalah \"0 - terserah\"\u003C\/li\u003E\n\u003C\/ul\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003E\u003Cb\u003ECatatan penutup:\u003C\/b\u003E\u003Cbr \/\u003E\nPerforma terbaik widget ini adalah hanya pada bagian \u003Cb\u003Epost page\u003C\/b\u003E saja. Kalau dipaksa tetap ingin ditampilkan pada \u003Cb\u003Ehomepage\u003C\/b\u003E maka fungsi widget bukan related post lagi, tetapi jadi widget random post.\u003C\/div\u003E\u003Cbr \/\u003E\nDemikian, moga-moga berhasil dan bermanfaat. Terima kasih!\u003C\/div\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/2940605259266803723"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/2940605259266803723"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2018\/08\/cara-menampilkan-related-post-di-sidebar.html","title":"Cara Menampilkan Widget Related Post di Sidebar Blogger"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgdlwbQurdsMIq84CkQf9EWUI9Bf2KL3W22bprHMnTfPwdV4ukFTPWo5JH08z06WV-NHkn-vhkvw81DOpqpctYaxNinIBRzAJMbYkCj8N2uxzCiqD80U1AJ-CmvBlXbxPdGdesxOUPtKfvQ\/s72-c\/cara-menampilkan-widget-related-post-di-sidebar-blogger.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-7875529227500632115"},"published":{"$t":"2018-08-04T14:52:00.001+07:00"},"updated":{"$t":"2018-08-19T17:41:30.690+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Position sticky not working? Begini Triknya Agar Berhasil!"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\"\u003EUntuk memasang sticky sidebar yang widgetnya berhenti di footer, sebetulnya dengan menggunakan CSS position:sticky akan lebih menarik, sebab tidak butuh JavaScript atau jQuery untuk membuatnya bekerja.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"Cara memasang widget sticky sidebar dengan position:sticky di Blogger\" data-original-height=\"462\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEh-3yLGA-X9XZYioKmjLW0wljL40fLwuTl7NCk_6BuHDN-oQIxvOFiBpjKD5cUu5BoeeZ8-tm7ePJZxYokhGz3J7qctC9b49XS4SCf3BpyDHdU1WB220Vm1LPMrz86oVC2syrUOtyWLQZDX\/s1600\/cara-memasang-position-sticky-di-blogspot.png\" title=\"Cara memasang widget sticky sidebar dengan position:sticky di Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nHanya saja ada beberapa syarat atau kondisi yang harus dipenuhi, jika ingin memasang widget sticky sidebar menggunakan position:sticky agar berhasil diterapkan.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"warning\"\u003ESedikitnya ada dua syarat penting yang perlu diperhatikan, yaitu:\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003EWidget \u003Ccode\u003Eposition:sticky\u003C\/code\u003E tidak boleh dikurung lebih dari satu induk (tag \u003Ccode\u003Ediv\u003C\/code\u003E). Termasuk tag seperti \u003Ccode\u003Emain\u003C\/code\u003E, \u003Ccode\u003Easide\u003C\/code\u003E dll.\u003C\/li\u003E\n\u003Cli\u003EInduk \u003Ccode\u003Ediv\u003C\/code\u003E (yang mengurung widget sticky) tidak boleh menggunakan \u003Ci\u003Eproperty\u003C\/i\u003E \u003Ccode\u003Eoverflow\u003C\/code\u003E.\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nMari kita praktekkan.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLetakkan dulu CSS berikut ini di atas kode \u003Ccode\u003E\u0026lt;\/head\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E\u0026amp;lt;\/head\u0026amp;gt;\u0026amp;lt;!--\u0026lt;head\/\u0026gt;--\u0026amp;gt;\u003C\/code\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #6aa84f;\"\u003E#sticky-widget\u003C\/span\u003E{\u003Cbr \/\u003E\nposition:-webkit-sticky;\u003Cbr \/\u003E\nposition:sticky;\u003Cbr \/\u003E\ntop: 20px;\u003Cbr \/\u003E\nfloat: right;\u003Cbr \/\u003E\nwidth: 300px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003E\u003Cb\u003ECatatan:\u003C\/b\u003E\u003Cbr \/\u003E\nUntuk tutorial kali ini, kita menggunakan \u003Ccode\u003E#sticky-widget\u003C\/code\u003E sebagai \u003Ci\u003Eselector\u003C\/i\u003E widget sticky.\u003C\/div\u003E\u003Cbr \/\u003E\nLanjut! Sebagai contoh,\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDalam susunan html yang sederhana, untuk membuat \u003Ccode\u003Eposition:sticky\u003C\/code\u003E agar berhasil adalah kondisinya seperti contoh berikut.\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;!DOCTYPE html\u0026gt;\u003Cbr \/\u003E\n\u0026lt;html\u0026gt;\u003Cbr \/\u003E\n\u0026lt;head\u0026gt;\u003Cbr \/\u003E\n\u0026lt;title\u0026gt;Ini Website Saya\u0026lt;\/title\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/head\u0026gt;\u003Cbr \/\u003E\n\u0026lt;body\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;div id='content-wrapper' class='content-wrapper'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;main id='main-wrapper'\u0026gt;\u003Cbr \/\u003E\n.................\u003Cbr \/\u003E\n\u0026lt;\/main\u0026gt;\u003Cbr \/\u003E\n\u0026lt;aside id='sidebar-wrapper'\u0026gt;\u003Cbr \/\u003E\n.................\u003Cbr \/\u003E\n\u0026lt;\/aside\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #6aa84f;\"\u003E\u0026lt;div id='sticky-widget'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;!-- Widget yang ingin di sticky disini --\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #6aa84f;\"\u003E\u0026lt;\/div\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;\/div\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;footer id='footer-wrapper'\u0026gt;\u003Cbr \/\u003E\n.................\u003Cbr \/\u003E\n\u0026lt;\/footer\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/body\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/html\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nSeperti yang ditandai pada kode di atas, widget sticky hanya punya satu induk. Yaitu \u003Ccode\u003Econtent-wrapper\u003C\/code\u003E.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nAtau,\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nJika Anda ingin memasangnya di Blogger\/Blogspot dan widget sticky-nya bisa ditambahkan beberapa gadget (add gadget) melalu menu Layout atau Tata Letak, maka ganti kode berikut:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div id='sticky-widget'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;!-- Isi dengan yang ingin di sticky disini --\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nDengan kode ini:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026nbsp; \u0026lt;b:section class='stickyside' id='sticky-widget' name='Sticky Widget' preferred='yes'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3 style=\"text-align: left;\"\u003ESolusi lainnya\u003C\/h3\u003EJika Anda sudah menerapkan cara di atas dengan benar, tetapi widget sticky masih not working, silahkan lakukan cara berikut:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSilahkan temukan tag div di luar dari tag induk sticky tersebut, lalu tambahkan css berikut ini di dalam tag tersebut. Contoh:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"background-color: #0b5394;\"\u003E.all-container\u003C\/span\u003E{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}\u003C\/blockquote\u003ESolusi di atas wajib diterapkan jika susunan ÌÇÐÄvlog¹Ù·½Èë¿Ú template Blogger Anda kurang lebih seperti ini:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;!DOCTYPE html\u0026gt;\u003Cbr \/\u003E\n\u0026lt;html\u0026gt;\u003Cbr \/\u003E\n\u0026lt;head\u0026gt;\u003Cbr \/\u003E\n\u0026lt;title\u0026gt;Ini Website Saya\u0026lt;\/title\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/head\u0026gt;\u003Cbr \/\u003E\n\u0026lt;body\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #0b5394;\"\u003E\u0026lt;div class='all-container'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;div id='content-wrapper' class='content-wrapper'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;main id='main-wrapper'\u0026gt;\u003Cbr \/\u003E\n.................\u003Cbr \/\u003E\n\u0026lt;\/main\u0026gt;\u003Cbr \/\u003E\n\u0026lt;aside id='sidebar-wrapper'\u0026gt;\u003Cbr \/\u003E\n.................\u003Cbr \/\u003E\n\u0026lt;\/aside\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id='sticky-widget'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;!-- Widget yang ingin di sticky disini --\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;\/div\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;footer id='footer-wrapper'\u0026gt;\u003Cbr \/\u003E\n................\u003Cbr \/\u003E\n\u0026lt;\/footer\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #0b5394;\"\u003E\u0026lt;\/div\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;\/body\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/html\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nContoh widget sticky dengan \u003Ccode\u003Eposition:sticky\u003C\/code\u003E yang \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003ETIDAK akan BERHASIL\u003C\/span\u003E\u003C\/b\u003E:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;div id='content-wrapper' class='content-wrapper'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;main id='main-wrapper'\u0026gt;\u003Cbr \/\u003E\n.................\u003Cbr \/\u003E\n\u0026lt;\/main\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;aside\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;div\u0026nbsp; id='sidebar-wrapper'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:section class='sidebar' id='sidebar' preferred='yes'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id='sticky-widget'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:section class='stickyside' id='sticky' preferred='yes'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;\/aside\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003C\/span\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\nSeperti ini juga tidak akan berhasil:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;div id='content-wrapper'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026lt;main id='main-wrapper'\u0026gt;\u003Cbr \/\u003E\n.................\u003Cbr \/\u003E\n\u0026lt;\/main\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;aside id='sidebar-wrapper'\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:section class='sidebar' id='sidebar' preferred='yes'\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;b:section class='stickyside' id='sticky-widget' preferred='yes'\/\u0026gt;\u003Cbr \/\u003E\n\u003Cspan style=\"background-color: #bf9000;\"\u003E\u0026lt;\/aside\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/div\u0026gt;\u003C\/span\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003E\nMengapa demikian?\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nKarena widget sticky telah dikurung oleh 2 tag, yaitu oleh \u003Ccode\u003E\u0026lt;div id='content-wrapper' class='content-wrapper'\u0026gt;\u003C\/code\u003E dan \u003Ccode\u003E\u0026lt;aside\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E\u0026lt;aside id='sidebar-wrapper'\u0026gt;\u003C\/code\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSelanjutnya: \u003Ca href=\"https:\/\/www.bungfrangki.com\/2018\/03\/membuat-widget-sticky-sidebar.html\" target=\"_blank\"\u003ECara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7875529227500632115"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/7875529227500632115"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2018\/08\/position-sticky-not-working.html","title":"Position sticky not working? Begini Triknya Agar Berhasil!"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEh-3yLGA-X9XZYioKmjLW0wljL40fLwuTl7NCk_6BuHDN-oQIxvOFiBpjKD5cUu5BoeeZ8-tm7ePJZxYokhGz3J7qctC9b49XS4SCf3BpyDHdU1WB220Vm1LPMrz86oVC2syrUOtyWLQZDX\/s72-c\/cara-memasang-position-sticky-di-blogspot.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-3155831983154625681"},"published":{"$t":"2018-07-29T15:58:00.002+07:00"},"updated":{"$t":"2022-09-06T19:39:24.948+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Tips"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger v3"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Membuat 3 Iklan yang Tampil Sesuai Paragraf dan Bisa Diedit pada Layout, untuk Blogger Layout v3"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\"\u003ETrik kali ini terkait slot iklan yang letaknya khusus di tengah postingan\/artikel (post page), namun bisa di edit melalui menu Layout atau Tata Letak Blogger. Keunggulan dari widget slot iklan ini dapat di setting ingin ditampilkan pada paragraph tertentu. Cara penerapannya masih mirip-mirip dengan tutorial yang telah saya bagikan sebelumnya, yaitu \u003Ca href=\"http:\/\/www.bungfrangki.com\/2018\/07\/agar-bisa-edit-kode-iklan-postingan-pada-layout.html\" target=\"_blank\"\u003ETrik Agar Bisa Edit Kode Iklan dibagian Postingan pada Menu Layout\/Tata Letak\u003C\/a\u003E.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"Membuat 3 Slot Iklan pada Artikel yang Bisa Diedit pada Menu Layout untuk Blogger Layout v3\" data-original-height=\"462\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgyNvpuxeXnqw2juHgigaDsHUn3jxce-d-MZAtgdEK2Ut4CTeVVS3q8CyQqN38kV7Ef5KXcbYuLGgusFvHJTxABY_DQhPvJ5MB2VpnPsztftSX8cnafUM8Kd4SPezglhzeyOwjLDGa7SyJw\/s1600\/membuat-iklan-sesuai-paragraf-yang-bisa-diedit-pada-layout-blogger.png\" title=\"Membuat 3 Slot Iklan pada Artikel yang Bisa Diedit pada Menu Layout untuk Blogger Layout v3\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nHanya saja bedanya, kali ini saya menerapkannya pada Blogger yang layout versi 3 (\u003Ccode\u003Eb:defaultwidgetversion='2' b:layoutsVersion='3'\u003C\/code\u003E). Jadi, cara ini tidak akan berhasil diterapkan begitu saja pada ÌÇÐÄvlog¹Ù·½Èë¿Ú yang biasanya.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nNamun kalau Anda sudah mengerti sedikit kode ÌÇÐÄvlog¹Ù·½Èë¿Ú, maka akan sangat mudah bagi Anda untuk utak-atik ini dan menerapkannya pada jenis html yang lama. Karena sebetulnya hanya butuh sedikit perubahan pada bagian html pemanggil widgetnya saja, yang bisa dikonfigurasi pada layout.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nMengapa saya pilih menerapkannya di Blogger layout versi 3? Karena pada layout terbaru Blogger tersebut, terdapat tombol untuk mengaktifkan dan menonaktifkan widget.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nYang jika diterapkan pada slot iklan khusus tampil setelah paragraph tertentu pada postingan, kita bebas memilih baik hanya ingin menampilkan 2 slot iklan saja di tengah postingan, satu iklan saja, atau bahkan 3 iklan sekaligus, melalui tombol (tick) aktif dan nonaktif tersebut.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nTombol yang saya maksud itu seperti pada gambar berikut:\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Cara memasang iklan pada artikel tampil di paragraf tertentu yang bisa diedit pada layout Blogger\" data-original-height=\"367\" data-original-width=\"500\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhLZonROko7FxFiKi_sUOUNsKbCLuPqH5lIwiNofZzgangkMisGhqTb3rxOux8FU9yXvyyZGq800LrOVi_YfHpMU1YT7IBqoE4CmFUvZy8oyEHfAHN7E5opKdugPQYjE2jLNfr5rV__gbZm\/s1600\/membuat-iklan-sesuai-paragraf-yang-bisa-diedit-pada-layout-2.jpg\" title=\"Cara memasang iklan pada artikel tampil di paragraf tertentu yang bisa diedit pada layout Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nNah, kira-kira seperti apa tampilan 3 slot iklan yang tampil setelah paragraf tertentu, yang jumlah paragrafnya bisa kita edit juga itu? Kurang lebih penampakannya di layout\/tata letak adalah seperti pada gambar berikut:\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Cara memasang iklan pada artikel tampil di paragraf tertentu yang bisa diedit pada layout Blogger\" data-original-height=\"662\" data-original-width=\"408\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEihxzU87wdi8uhxZZshuk5_Sy_Q3DXrCkRQWvh6HG1TS-hA5EQ5JqNZRNNWUrqumtFJhhQly0hPdZOTVotQ5maNa7rnHJfjeIabG2-UCrBekmBz-8FgXPfldfqDSeBz-b7-2tV8-GAoIDFL\/s1600\/membuat-iklan-sesuai-paragraf-yang-bisa-diedit-pada-layout-3.jpg\" title=\"Cara memasang iklan pada artikel tampil di paragraf tertentu yang bisa diedit pada layout Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003E\u003Cb\u003EKeterangan:\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003ESetiap warna yang sama adalah untuk satu slot iklan.\u003C\/li\u003E\n\u003Cli\u003EWidget pertama (pada warna yang sama) adalah tempat meletakkan kode iklan.\u003C\/li\u003E\n\u003Cli\u003EWidget kedua (pada warna yang sama) adalah tempat setting nomor paragraph.\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nCara menerapkannya adalah sebagai berikut:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"warning\"\u003E\u003Cb\u003EWarning!\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003EPastikan Anda menggunakan struktur html Blogger layout versi 3. Karena jika tidak, maka tutorial ini tidak akan bisa diterapkan, hanya sia-sia!\u003C\/li\u003E\n\u003Cli\u003EModel layout Blogger yang versi 3 itu seperti pada gambar di atas.\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 1\u003C\/b\u003E\u003Cbr \/\u003E\nMasuk ke Tema \u0026gt; Edit ÌÇÐÄvlog¹Ù·½Èë¿Ú\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 2\u003C\/b\u003E\u003Cbr \/\u003E\nJika perbatan antara \u003Cb\u003EMAIN\u003C\/b\u003E dan \u003Cb\u003ESIDEBAR\u003C\/b\u003E pada struktur ÌÇÐÄvlog¹Ù·½Èë¿Ú Anda nampak seperti pada gambar berikut;\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Cara memasang iklan pada artikel tampil di paragraf tertentu yang bisa diedit pada layout Blogger\" data-original-height=\"298\" data-original-width=\"700\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjOs0uFlCGb5lZBStePhl0y71OATvmwJDcAoFrstpT41jRbT1oHodxnUM6GERgbrMtzsmZJnP7imSrbmqp3_UGVQgOwA-I2MIqCVw5U9Wj3DPUmezjljiJxxeMM6-h_g-aokCUqjbiBqgIG\/s1600\/membuat-iklan-sesuai-paragraf-yang-bisa-diedit-pada-layout-1.jpg\" title=\"Cara memasang iklan pada artikel tampil di paragraf tertentu yang bisa diedit pada layout Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nMaka letakkan kode berikut ini di atas kode \u003Ccode\u003E\u0026lt;\/main\u0026gt;\u003C\/code\u003E. Jika tidak seperti gambar itu, letakkan saja kode berikut di atas kode \u003Ccode\u003E\u0026lt;aside\u0026gt;\u003C\/code\u003E atau di atas \u003Ccode\u003E\u0026lt;aside id='sidebar-wrapper'\u0026gt;\u003C\/code\u003E (terserah mau diletakkan dimana saja, asal bukan di dalam \u003Cb\u003EBlog1\u003C\/b\u003E dan masih di atas kode \u003Ccode\u003E\u0026lt;\/body\u0026gt;\u003C\/code\u003E)\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:view.isSingleItem'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; function insertAfter(tbh,tgt) {\u003Cbr \/\u003E\n\u0026nbsp; var prt = tgt.parentNode;\u003Cbr \/\u003E\n\u0026nbsp; if (prt.lastChild == tgt) {prt.appendChild(tbh);}\u003Cbr \/\u003E\n\u0026nbsp; else {prt.insertBefore(tbh,tgt.nextSibling);}}\u003Cbr \/\u003E\n\u0026nbsp; var tgt = document.getElementById(\u0026amp;quot;tgtPost\u0026amp;quot;);\u003Cbr \/\u003E\n\u0026nbsp; var midAd1 = document.getElementById(\u0026amp;quot;middleAds1\u0026amp;quot;);\u003Cbr \/\u003E\n\u0026nbsp; var midAd2 = document.getElementById(\u0026amp;quot;middleAds2\u0026amp;quot;);\u003Cbr \/\u003E\n\u0026nbsp; var midAd3 = document.getElementById(\u0026amp;quot;middleAds3\u0026amp;quot;);\u003Cbr \/\u003E\n\u0026nbsp; var showAd1 = tgt.getElementsByTagName(\u0026amp;quot;br\u0026amp;quot;);\u003Cbr \/\u003E\n\u0026nbsp; var showAd2 = tgt.getElementsByTagName(\u0026amp;quot;p\u0026amp;gt;\u0026amp;quot;);\u003Cbr \/\u003E\n\u0026nbsp; var showAd3 = tgt.getElementsByTagName(\u0026amp;quot;p\u0026amp;gt;\u0026amp;quot;);\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\n$(document).ready(function(){$('a[name=\"ad-center-post-slot1\"]').before($(\"#paragraph-ad1 .widget-move\").html()),$(\"#paragraph-ad1 .widget-move\").html(\"\"),$('a[name=\"ad-center-post-slot2\"]').before($(\"#paragraph-ad2 .widget-move\").html()),$(\"#paragraph-ad2 .widget-move\").html(\"\"),$('a[name=\"ad-center-post-slot3\"]').before($(\"#paragraph-ad3 .widget-move\").html()),$(\"#paragraph-ad3 .widget-move\").html(\"\")})\u003Cbr \/\u003E\n\u0026nbsp;\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id='ads-per-paragraf' style='display:none'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:section class='ad-per-paragraf' id='paragraph-ad1' maxwidgets='2' name='[slot 1] Setelah paragraf X' preferred='yes'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú453' locked='true' title='Kode Iklan' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='2' visible='true'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;\u0026lt;![CDATA[\u0026lt;img src='https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi91iZFWZIYvcHOO1BeFXDHkJ32iDaMHHscAuyBWxj3crq5BcofgRMtgHiivud2rbbwddrpAWReUEtrz6ndWD-jRHqZ-yPtjpnJ-Jv7gmWczDdV5ZJhqpqOS4uBoFRWeA3WuHhHWa-8DXg\/s300-rw\/template-themeindie.png'\/\u0026gt;]]\u0026gt;\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='widget-content widget-move'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;data:content\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú454' locked='true' title='[set] Show stlh paragraf X' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='2' visible='true'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;3\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; if (showAd1.length \u0026amp;gt; 0) {insertAfter(midAd1,showAd1[\u0026lt;data:content\/\u0026gt;]);}\u003Cbr \/\u003E\n\u0026nbsp; if (showAd2.length \u0026amp;gt; 0) {insertAfter(midAd1,showAd2[\u0026lt;data:content\/\u0026gt;]);}\u003Cbr \/\u003E\n\u0026nbsp; if (showAd3.length \u0026amp;gt; 0) {insertAfter(midAd1,showAd3[\u0026lt;data:content\/\u0026gt;]);}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:section\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:section class='ad-per-paragraf' id='paragraph-ad2' maxwidgets='2' name='[slot 2] Setelah paragraf X' preferred='yes'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú455' locked='true' title='Kode Iklan' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='2' visible='true'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;\u0026lt;![CDATA[\u0026lt;img src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhU3wA0iYmOvQ28hD_ehQENyUGi1iqjrWktupw8HdEUYnb-k0elsz9RJ4IQMI68XukeFna2L1GK-zgo4jaxt1twyJ0wHTJixUzW0B8qxk2yT3KKg0V_RmSqX0kzRrBxp1kpCEjaji9HTY0\/s1600\/viralisme-free.png\"\/\u0026gt;]]\u0026gt;\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='widget-content widget-move'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;data:content\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú456' locked='true' title='[set] Show stlh paragraf X' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='2' visible='true'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;8\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; if (showAd1.length \u0026amp;gt; 0) {insertAfter(midAd2,showAd1[\u0026lt;data:content\/\u0026gt;]);}\u003Cbr \/\u003E\n\u0026nbsp; if (showAd2.length \u0026amp;gt; 0) {insertAfter(midAd2,showAd2[\u0026lt;data:content\/\u0026gt;]);}\u003Cbr \/\u003E\n\u0026nbsp; if (showAd3.length \u0026amp;gt; 0) {insertAfter(midAd2,showAd3[\u0026lt;data:content\/\u0026gt;]);}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:section\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:section class='ad-per-paragraf' id='paragraph-ad3' maxwidgets='2' name='[slot 3] Setelah paragraf X' preferred='yes'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú457' locked='true' title='Kode Iklan' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='2' visible='true'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;\u0026lt;![CDATA[\u0026lt;a href=\"https:\/\/goo.gl\/z9ewXo\" title=\"trading bitcoin\" target=\"_blank\" rel=\"nofollow noopener\"\u0026gt;\u0026lt;img src='https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhH7iZE-yG5oZeYwHoTprbc3pZ5-oLNpx0M31LawRax3kBlBamqseWM3Jbv71GG_IHL8XftRMdwQ5Ucv2eXB6CbagyfrFeNrithdbIj_H4Noq_Us9IZqfXjU5AS95eEoJL345HpgZRHm0Y\/s1600\/banner_btc.gif' alt='trading bitcoin'\/\u0026gt;\u0026lt;\/a\u0026gt;]]\u0026gt;\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='widget-content widget-move'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;data:content\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú458' locked='true' title='[set] Show stlh paragraf X' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='2' visible='true'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;13\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;div class='widget-content'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; if (showAd1.length \u0026amp;gt; 0) {insertAfter(midAd3,showAd1[\u0026lt;data:content\/\u0026gt;]);}\u003Cbr \/\u003E\n\u0026nbsp; if (showAd2.length \u0026amp;gt; 0) {insertAfter(midAd3,showAd2[\u0026lt;data:content\/\u0026gt;]);}\u003Cbr \/\u003E\n\u0026nbsp; if (showAd3.length \u0026amp;gt; 0) {insertAfter(midAd3,showAd3[\u0026lt;data:content\/\u0026gt;]);}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:section\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 3\u003C\/b\u003E\u003Cbr \/\u003E\nTemukan kode berikut atau yang mirip;\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026nbsp; \u0026lt;div class='post-body entry-content float-container' expr:id='\u0026amp;quot;post-body-\u0026amp;quot; + data:post.id'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nAtau cari kode \u003Ccode\u003E\u0026lt;data:post.body\/\u0026gt;\u003C\/code\u003E yang khusus menampilkan deskripsi postingan (post page), ganti kode tersebut dengan kode berikut:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026nbsp; \u0026lt;div class='post-body entry-content float-container' expr:id='\u0026amp;quot;post-body-\u0026amp;quot; + data:post.id'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;b:if cond='data:view.isPost'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id='tgtPost'\u0026gt;\u0026lt;data:post.body\/\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;div class='middleAds ads_middle1' id='middleAds1'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;div style='clear:both;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a name='ad-center-post-slot1'\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;div class='middleAds ads_middle2' id='middleAds2'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;div style='clear:both;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a name='ad-center-post-slot2'\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;div class='middleAds ads_middle3' id='middleAds3'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;div style='clear:both;'\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a name='ad-center-post-slot3'\/\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:if\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 4\u003C\/b\u003E\u003Cbr \/\u003E\nAtur tampilan widget di Layout dengan kode berikut berikut:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:template-skin\u0026gt;\u003Cbr \/\u003E\n\u0026lt;![CDATA[\u003Cbr \/\u003E\n#layout {background:#acc6a5!important;}\u003Cbr \/\u003E\nbody#layout #ads-per-paragraf{visibility:visible!important;display:block!important;position:relative;z-index:9999;border:2px solid #025645;padding-top:8px}\u003Cbr \/\u003E\n#layout #paragraph-ad1 .widget-content{background:#fdeab7!important;}\u003Cbr \/\u003E\n#layout #paragraph-ad2 .widget-content{background:#fdd6b0!important;}\u003Cbr \/\u003E\n#layout #paragraph-ad3 .widget-content{background:#e3ab8e!important;}\u003Cbr \/\u003E\n.middleAds{margin:5px auto 15px;padding:0;text-align:center;display:block;position:relative;overflow:hidden;max-width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}\u003Cbr \/\u003E\n]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/b:template-skin\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"warning\"\u003E\u003Cb\u003EPerhatian:\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003ELetakkan kode tersebut di bawah kode \u003Ccode\u003E\u0026lt;head\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E\u0026amp;lt;head\u0026amp;gt;\u003C\/code\u003E atau di atas kode \u003Ccode\u003E\u0026lt;\/head\u0026gt;\u003C\/code\u003E atau \u003Ccode\u003E\u0026amp;lt;\/head\u0026amp;gt;\u0026amp;lt;!--\u0026lt;head\/\u0026gt;--\u0026amp;gt;\u003C\/code\u003E\u003C\/li\u003E\n\u003Cli\u003EJika di template Anda sudah ada kode \u003Ccode\u003E\u0026lt;b:template-skin\u0026gt;\u003C\/code\u003E cukup tambahkan CSS dari kode di atas saja, mulai dari \u003Ccode\u003E#layout…\u003C\/code\u003E sampai pada \u003Ccode\u003E….border-box;box-sizing:border-box}\u003C\/code\u003E\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 5\u003C\/b\u003E\u003Cbr \/\u003E\nTambahkan kode jQuery library berikut di atas kode \u003Ccode\u003E\u0026lt;\/head\u0026gt;\u003C\/code\u003E atau\u0026nbsp; \u003Ccode\u003E\u0026amp;lt;\/head\u0026amp;gt;\u0026amp;lt;!--\u0026lt;head\/\u0026gt;--\u0026amp;gt;\u003C\/code\u003E jika di template Anda belum ada yang seperti berikut atau sejenis kode itu:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script src='https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js'\/\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 6\u003C\/b\u003E\u003Cbr \/\u003E\nSimpan Tema\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 7\u003C\/b\u003E\u003Cbr \/\u003E\nSilahkan ke Tata Letak atau Layout lalu edit sesuai keterangan yang tertulis pada masing-masing widget Setelah Paragraf X.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"tips\"\u003E\u003Ci\u003EKekurangan widget 3 slot iklan ini adalah:\u003C\/i\u003E\u003Cbr \/\u003E\nTidak cocok diterapkan pada blog atau website yang membahas tutorial coding (seperti tutorial Blogger, Wordpress dll), karena slot iklan akan bercampur dan menabrak kode-kode yang ditutorialkan.\u003C\/div\u003E\u003Cbr \/\u003E\nDengan meletakkan iklan di tengah artikel sesuai paragraph, diyakini mampu meningkatkan CTR pada iklan tersebut, entah itu iklan Adsense, iklan sponsor dan lain sebagainya.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSegitu saja tutorial kali ini tentang cara memasang 3 slot iklan sesuai paragraf yang bisa diedit langsung pada layout\/tata letak Blogger, pada layout versi 3. Semoga bermanfaat dan selamat mencoba!\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nJika ada kendala, atau Anda punya cara yang lebih baik, silahkan tuliskan di kolom komentar.\u003C\/div\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3155831983154625681"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/3155831983154625681"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2018\/07\/membuat-iklan-tampil-sesuai-paragraf-di-blogger.html","title":"Membuat 3 Iklan yang Tampil Sesuai Paragraf dan Bisa Diedit pada Layout, untuk Blogger Layout v3"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgyNvpuxeXnqw2juHgigaDsHUn3jxce-d-MZAtgdEK2Ut4CTeVVS3q8CyQqN38kV7Ef5KXcbYuLGgusFvHJTxABY_DQhPvJ5MB2VpnPsztftSX8cnafUM8Kd4SPezglhzeyOwjLDGa7SyJw\/s72-c\/membuat-iklan-sesuai-paragraf-yang-bisa-diedit-pada-layout-blogger.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-6670856475198141739.post-8321989070606347187"},"published":{"$t":"2018-07-27T09:11:00.000+07:00"},"updated":{"$t":"2019-12-19T18:39:41.532+07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Disqus"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Tutorial Blog"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widget"}],"title":{"type":"text","$t":"Cara Pasang Disqus Comment, dan Membuat Disqus Shortname Bisa Diedit pada Layout Blogger"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\"\u003ETrik kali ini masih seputar custom template, yakni cara memasang komentar Disqus di Blogspot, dan membuat Disqus Shortname-nya bisa diedit langsung pada menu Layout atau Tata Letak Blogger.\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"Cara Pasang Disqus Comment, dan Membuat Disqus Shortname Bisa Diedit pada Menu Layout Blogger\" data-original-height=\"462\" data-original-width=\"750\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEga657O0DttM4XWbUD3GAr2chCr7nD5X8feR4erfX4bVgEaFr_eaz0UVV_l-Nf7dBJI049O_eDG8hZrIRN6rzWqNkygX9-PN7c4fBidd-8DVdZv-vAGyIRfJY8-rPM_FlFCDpXDETAwC7f9\/s1600\/cara-membuat-disqus-shortname-bisa-diedit-pada-layout-blogger.png\" title=\"Cara Pasang Disqus Comment, dan Membuat Disqus Shortname Bisa Diedit pada Menu Layout Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nArtinya, pengguna template tidak lagi masuk ke Theme \u0026gt; Edit ÌÇÐÄvlog¹Ù·½Èë¿Ú atau menggunakan ÌÇÐÄvlog¹Ù·½Èë¿Ú Editor untuk mengganti username atau Disqus Shortname.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nKurang lebih penampakannya akan seperti pada gambar berikut ini:\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"Cara Pasang Disqus Comment, dan Membuat Disqus Shortname Bisa Diedit pada Menu Layout Blogger\" data-original-height=\"301\" data-original-width=\"720\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgPtYYHgTWIxeoiG3m1E_MuQjFyioMPmM6ACgoPxYTAl8yBcswmd8qtDsPc5HaJUVkluKZ2vedkWgNZ7UoMBJX34zS7Uq6K5EWqcwNxBTdtOhNo7FWH-YhNUL5SA-D-41yyJtuDxQ_KRjzO\/s1600\/cara-memasang-komentar-disqus-di-blogger-3.jpg\" title=\"Cara Pasang Disqus Comment, dan Membuat Disqus Shortname Bisa Diedit pada Menu Layout Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nTentu saja hal ini akan mempermudah pengguna template, terutama yang masih awam tentang coding. Berbeda dengan tutorial sebelumnya yang menggunakan jQuery, yakni \u003Ca href=\"https:\/\/www.bungfrangki.com\/2018\/07\/agar-bisa-edit-kode-iklan-postingan-pada-layout.html\" target=\"_blank\"\u003ETrik Agar Bisa Edit Kode Iklan dibagian Postingan pada Menu Layout\/Tata Letak\u003C\/a\u003E, trik kali ini tidak menggunakan script jQuery.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHanya memindahkan script peng-load komentar Disqus saja. Berikut caranya!\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"warning\"\u003E\u003Cb\u003EPerhatian!\u003C\/b\u003E\u003Cbr \/\u003E\nSebelum ke tutorial, hapus dulu semua JavaScript Disqus pada template, entah itu berupa widget (sidebar\/footer), atau script yang ada di dalam Edit ÌÇÐÄvlog¹Ù·½Èë¿Ú (pengeditan tema).\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 1\u003C\/b\u003E\u003Cbr \/\u003E\nMasuk ke menu Theme \u0026gt; Edit ÌÇÐÄvlog¹Ù·½Èë¿Ú\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 2\u003C\/b\u003E\u003Cbr \/\u003E\nCari kode berikut ini:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'\u0026gt;\u003Cbr \/\u003E\n………………………………..\u003Cbr \/\u003E\n………………………………..\u003Cbr \/\u003E\n………………………………..\u003Cbr \/\u003E\n………………………………..\u003Cbr \/\u003E\n………………………………..\u003Cbr \/\u003E\n………………………………..\u003Cbr \/\u003E\n………………………………..\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nLalu letakkan kode berikut setelah kode \u003Ccode\u003E\u0026lt;\/b:widget\u0026gt;\u003C\/code\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026nbsp; \u0026lt;b:widget id='ÌÇÐÄvlog¹Ù·½Èë¿Ú489' locked='true' title='Disqus Shortname' type='ÌÇÐÄvlog¹Ù·½Èë¿Ú' version='1'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:widget-setting name='content'\u0026gt;XXXXX\u0026lt;\/b:widget-setting\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;\/b:widget-settings\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026lt;b:includable id='main'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;b:if cond='data:blog.pageType in {\u0026amp;quot;item\u0026amp;quot;,\u0026amp;quot;static_page\u0026amp;quot;}'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; var disqus_shortname = \u0026amp;quot;\u0026lt;data:content\/\u0026gt;\u0026amp;quot;;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; var disqus_blogger_current_url = \u0026amp;quot;\u0026lt;data:blog.canonicalUrl\/\u0026gt;\u0026amp;quot;;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; if (!disqus_blogger_current_url.length) {\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; disqus_blogger_current_url = \u0026amp;quot;\u0026lt;data:blog.url\/\u0026gt;\u0026amp;quot;;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; var disqus_blogger_homepage_url = \u0026amp;quot;\u0026lt;data:blog.homepageUrl\/\u0026gt;\u0026amp;quot;;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; var disqus_blogger_canonical_homepage_url = \u0026amp;quot;\u0026lt;data:blog.canonicalHomepageUrl\/\u0026gt;\u0026amp;quot;;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;(function() {\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; var bloggerjs = document.createElement(\u0026amp;quot;script\u0026amp;quot;);\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; bloggerjs.type = \u0026amp;quot;text\/javascript\u0026amp;quot;;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; bloggerjs.async = true;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; bloggerjs.src = \u0026amp;quot;\/\/\u0026amp;quot;+disqus_shortname+\u0026amp;quot;.disqus.com\/blogger_item.js\u0026amp;quot;;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; (document.getElementsByTagName(\u0026amp;quot;head\u0026amp;quot;)[0] || document.getElementsByTagName(\u0026amp;quot;body\u0026amp;quot;)[0]).appendChild(bloggerjs);\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; })();\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;\/b:includable\u0026gt;\u003Cbr \/\u003E\n\u0026nbsp; \u0026lt;\/b:widget\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\nJadinya, akan terlihat seperti pada gambar berikut:\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"cara memasang komentar Disqus di Blogger\/blogspot\" data-original-height=\"294\" data-original-width=\"700\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjA2L88wONSMLgrrSjTV8UyIqwMCW4dFt92l-eyrNDsPQTjb2iD8hJRMBEHYz4OQYwnAsi0DDgaRKmkwDLmurH5wVf77-wMThVTMKNcX3J3IW9Hx-yagLilaG9S6zv9_LpoirT_ggKgn2Bd\/s1600\/cara-memasang-komentar-disqus-di-blogger-2.jpg\" title=\"cara memasang komentar Disqus di Blogger\/blogspot\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cb\u003ELangkah 3\u003C\/b\u003E\u003Cbr \/\u003E\nSimpan Tema.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"info\"\u003E\u003Cb\u003ECatatan:\u003C\/b\u003E\u003Cbr \/\u003E\nJika kolom komentar Disqus tidak tampil, pastikan setelan entri di artikel atau postingan Anda, komentar pembaca diizinkan. Seperti pada gambar berikut:\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"cara memasang komentar Disqus di Blogger\/blogspot\" data-original-height=\"563\" data-original-width=\"400\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhPrlLObGpR6dvEFXvsOjdOsNiH25fjhGcpSFSa9B1yvQE242c9S6qun4-V4q9eOJU-Gq60aIPQhhdwAYJWwQVKVNdB3xlnjgcFJh6yzYRR6inuNyJtH1lLa4u0dP9Iv-mpgsXDTxiTz28f\/s1600\/cara-pasang-komentar-disqus-di-blogger-1.jpg\" title=\"cara memasang komentar Disqus di Blogger\/blogspot\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nSimak juga: \u003Ca href=\"http:\/\/www.bungfrangki.com\/2018\/07\/membuat-social-bar-bisa-diedit-pada-layout.html\" target=\"_blank\"\u003ECara Membuat Widget Social Bar yang Bisa Langsung Diedit pada Menu Layout\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nDemikian tutorial tentang \u003Cb\u003ECara Pasang Disqus Comment, dan Membuat Disqus Shortname Bisa Langsung Diedit pada Menu Layout Blogger\u003C\/b\u003E. Semoga bermanfaat dan selamat mencoba!\u003C\/div\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/8321989070606347187"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/6670856475198141739\/posts\/default\/8321989070606347187"},{"rel":"alternate","type":"text/html","href":"http:\/\/www.bungfrangki.com\/2018\/07\/cara-pasang-disqus-comment.html","title":"Cara Pasang Disqus Comment, dan Membuat Disqus Shortname Bisa Diedit pada Layout Blogger"}],"author":[{"name":{"$t":"Bungfrangki"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/13162875744493565460"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgP0cgr6oK7QzPK_f1Dy1PiiDXe3eggTah0-XaCM_8BKtlSBFrcYy0PrhHj6HrmGP-rjHFwLqLWaUD8NBpilVWtarpjF2GO7Ba-tkLWBIyq5PUgPxjioldzdTdFFe0FJJY\/s113\/bungfrangki.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEga657O0DttM4XWbUD3GAr2chCr7nD5X8feR4erfX4bVgEaFr_eaz0UVV_l-Nf7dBJI049O_eDG8hZrIRN6rzWqNkygX9-PN7c4fBidd-8DVdZv-vAGyIRfJY8-rPM_FlFCDpXDETAwC7f9\/s72-c\/cara-membuat-disqus-shortname-bisa-diedit-pada-layout-blogger.png","height":"72","width":"72"}}]}});