Membuat Related Posts Di Sidebar Blogger
Sebenarnya ini ialah memindahkan widget related posts yang biasanya selalu berada di bawah postingan ke sidebar blog. Namun kita tidak akan menyentuh gadget sidebar di layout/tata letak, hanya melaksanakan pekerjaan ini di edit HTML.
Dan related posts yang akan kita gunakan ialah related posts dari DTE. Cara memindahkan related posts ke sidebar ini bahwasanya sudah diberitahukan oleh mas Taufik pada komentar di postingannya, namun tidak terperinci.
Nah kali ini saya akan melengkapinya semoga Anda lebih gampang memasang related posts ini pada sidebar blogger. Bagi yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.
Kode CSS
Silahkan gunakan instruksi css di bawah ini semoga related posts tidak berjejer ke samping tapi ke bawah. Dan kalau Anda ingin memodif tampilannya semoga sesuai dengan tema blog, silahkan modif pada css ini.
.related-bottomposts,.related-post h4 {display:none}
.related-post{margin:5% 5% 0;padding:0;font-family:'Open Sans',sans-serif;text-align:left;width:100%;position:relative;color:#000}
.related-post a{font-weight:600;color:#000;font-size:16px!important;}
.related-post a:hover{color:red}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0!important;list-style:none;word-wrap:break-word;overflow:hidden}
.related-post-style-3 .related-post-item{display:block;width:90%;max-width:300px;height:auto;padding:150px 0 10px;margin-bottom:20px!important}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0 0 5px;width:99%;height:140px;max-width:none;max-height:none;background-color:transparent;padding:0;transition:all 400ms ease-in-out;border:1px solid #ddd}
.related-post-style-3 .related-post-item-thumbnail:hover{opacity:.7}
.related-post-style-3 .related-post-item:focus,.related-post-style-3 .related-post-item:active{outline:0}
Kode HTML
Kemudian silahkan copy instruksi di bawah ini.
<b:if cond='data:blog.pageType == "item"'>
<div class='related-bottomposts'>
<div class='related-post' id='related-post'/>
</div>
<script type='text/javascript'>
var labelArray=[<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];var relatedPostConfig={widgetStyle:3,callBack:function(){if(window.addEventListener){window.addEventListener("DOMContentLoaded",insertRelatedPostMarkupToSidebar,false);window.addEventListener("load",insertRelatedPostMarkupToSidebar,false)}else{if(window.attachEvent){window.attachEvent("onload",insertRelatedPostMarkupToSidebar)}else{window.onload=insertRelatedPostMarkupToSidebar}}}};
</script>
</b:if>
Dan simpan instruksi di atas tadi di bawah instruksi berikut atau yang ibarat mirip ini.
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div class='clear'/> <!-- clear for photos floats -->
</div>
Kode Javascript
Simpan instruksi di bawah ini di atas instruksi
</body> <b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function insertRelatedPostMarkupToSidebar(){var e=document.getElementById("related"),t=document.getElementById("related-post");if(e)e.insertBefore(t,e.firstChild)};
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.kompiajaib.com/",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:300,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"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="Membuat Related Posts Di Sidebar Blogger Membuat Related Posts Di Sidebar Blogger" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Membuat Related Posts Di Sidebar Blogger"><a class="related-post-item-title" title="Membuat Related Posts Di Sidebar Blogger" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-titleimg" href="'+v+'"'+b+' title="Membuat Related Posts Di Sidebar Blogger"><img alt="Membuat Related Posts Di Sidebar Blogger Membuat Related Posts Di Sidebar Blogger" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Membuat Related Posts Di Sidebar Blogger"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="Membuat Related Posts Di Sidebar Blogger" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="Membuat Related Posts Di Sidebar Blogger"'+b+'><img alt="Membuat Related Posts Di Sidebar Blogger Membuat Related Posts Di Sidebar Blogger" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Membuat Related Posts Di Sidebar Blogger"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="Membuat Related Posts Di Sidebar Blogger" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="Membuat Related Posts Di Sidebar Blogger Membuat Related Posts Di Sidebar Blogger" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Membuat Related Posts Di Sidebar Blogger"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="Membuat Related Posts Di Sidebar Blogger" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>
Silahkan ganti instruksi
http://www.kompiajaib.com/ dengan URL blog Anda dan silahkan tentukan jumlah related posts yang ingin ditampilkan pada instruksi berikut numPosts:7 Menentukan Target Gadget Sidebar
Nah silahkan simak dengan teliti pada langkah ini, sebab tiap blog kadang kala mempunyai tag sidebar yang berbeda-beda, jadi Anda jangan terpaku pada tag sidebar pada instruksi ini, namun sesuaikan dengan template yang anda gunakan.
Silahkan tentukan daerah untuk memunculkan related posts, contohnya And ingin memunculkan sidebarnya di bawah popular posts, dan contohnya instruksi sidebar dengan popular posts ibarat di bawah ini.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
...............
...............
...............
</b:includable>
</b:widget>
</b:section>
</div>
Nah silahkan simpan instruksi di bawah ini sempurna di bawah instruksi
</b:widget> <b:widget id='HTML5' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content' id='related'>
<data:content/>
</div>
</b:includable>
</b:widget>
Sehingga menjadi ibarat berikut:
<div id='sidebar-wrapper'>
<b:section class='sidebar3' id='sidebar3' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
...............
...............
...............
</b:includable>
</b:widget>
<b:widget id='HTML5' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content' id='related'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Kemudian silahkan SAVE template Anda. Jika ternyata template tidak sanggup di-save sebab ada double id dari
HTML5 (perhatikan instruksi ini id='HTML5' pada gadget Related Posts), silahkan ganti angka 5 dengan berapapun semoga tidak terjadi double id, contohnya menjadi id='HTML30'. Kuncinya ialah instruksi id='related' sebagai sasaran peletakan html related posts oleh javascript. Dan kalau ingin merubah title gadget-nya, jangan dirubah melalui tata letak/layout sebab akan error. Tapi rubah pada edit HTML pada instruksi ini
Sumber https://www.kompiajaib.com/
title='Related Posts'.
0 Response to "Membuat Related Posts Di Sidebar Blogger"
Posting Komentar