Cara Menambahkan Script Related Post Theme Blogger Bootstrap (2)

Pertemuan kemarin sudah dibahas script related post pada theme bootstrap. Theme yang digunakan sebagai praktek yaitu warasfood theme. Template ini merupakan karya perdana saya menggunakan Bootstrap. Theme ini masih banyak penambahan script yang diperlukan. Salah satunya yaitu script related post yang belum terpasang.

Permasalahan yang dihadapi bukan tidak adanya script yang beredar. Namun cara pemasangan script tersebut jika theme yang kita gunakan berdasarkan Bootstrap. Karena berdasarkan pengalaman sendiri sepertinya perlu sedikit penyesuaian. Terlebih lagi tutorial yang ada memang tidak dikhususkan untuk theme blogger yang dibangun berdasarkan Bootstrap.

Mungkin bagi yang sudah berpengalaman tidaklah menjadi masalah. Tapi bagi saya pribadi menjadi perhatian untuk dibahas. Siapa tahu tema ini menjadi tambahan referensi bagi para pemula yang belajar desain web otodidak.

Nah, sebelumnya kita menggunakan BungFrangki sebagai sumber referensi belajar. Dan sekarang kita coba sumber lain dengan tema bahasan yang sama, yaitu: script related post. Misalnya saya pilihkan koleksi script dari helplogger berikut ini. 

Lalu bagaimana cara menambahkan script tersebut pada theme yang dibangun menggunakan Bootstrap? Mari kita simaks tutorial ini sampai akhir pembahasan.

Cara Menambahkan Script Related Post Theme Bootstrap

Theme Blogger pada dasarnya tidak bisa sepenuhnya dibangun dengan baris kode Bootstrap. Terutama pada bagian <main>, <article>, <main-wrapper> atau penamaan section lainnya yang semisal. Karena pada bagian itulah nanti ada elemen dan widget yang terhubung dengan dashboard Blogger.

Kecuali theme yang dibangun merupakan jenis landing page seperti portofolio perusahaan maupun curiculum vitae. Karena theme ini tidak perlu mengaktifkan widget blog-post dan sidebar. Sebagaimana dimaklumi bersama, widget inilah yang terkait dengan penulisan artikel melalui dashboard.

Untuk itu, warasfood theme juga tetap menggunakan elemen dari Blogger. Hanya saja, elemen tersebut kemudian dibungkus dengan container, row dan col dari Bootstrap. 

Selanjutnya, bagaimana penempatan script related post pada theme tersebut? Berikut ini tahapannya. Sebelumnya, silahkan cadangkan theme terlebih dahulu untuk menghindari hal yang tidak diinginkan.

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Copy baris kode berikut.

<style type='text/css'> .related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px 'Buka Sans', sans-serif;margin- bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li{text-transform :capitalize !important;font:bold 13px 'Open Sans', sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px 'Open Sans' 39;, sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba (0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none; }li.related-post-item{margin:0 3% 3% 0 !penting;lebar: 22,7%;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%; height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts- 9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% ! important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover; width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;} .related-posts-7 li.related-post-item{margin:0 !important;width:25% !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77, 77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;- moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell ;color:#ffffff;font:bold 16px 'Buka Sans', sans-serif;padding:0 20px;}.tanggal terkait{margin-top:5px;font:italic 11px 'Buka Sans', sans-serif;color:#999999;} </style>

4. Tempatkan di atas tag penutup </head>. Bisa juga ditempatkan diantara tag <b:skin><![CDATA[/* dan  ]]></b:skin> dengan cara menghapus tag <style type='text/css'> pada bagian atas dan tag penutup </style> pada bagian akhir. Dengan cara ini semua kode css related post tersimpan di tempat yang sama dengan kode css untuk script lainnya.

5. Cari kode berikut: <b:includable id='postQuickEdit' var='post'>.

6. Klik tanda panah kecil (▼) di samping sebagaimana ditunjukan pada gambar.

7. Baris kode yang sebelumnya terlihat "kuncup" nanti akan terlihat "mekar" (lihat gambar).

8. Tempatkan baris kode pada nomor 9 tepat di bawah kode:

<b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </b:if>

9. Ini baris kode yang harus ditempatkan disana (dibawah kode nomor 8).

<b:if cond='data:blog.pageType == "item"'> <div class='related-posts-container' id='related-posts-widget'/> <div style='clear: both;'/> <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 relatedSettings = { blogURL:"<data:blog.homepageUrl/>", relatedHeading:"<h4><span>Related Posts</span></h4>", relatedPosts:4, relatedStyle:4, thumbnailSize:"w300-h200-p-nu", defaultThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGf6j2lVggI2MfOIJ7pdWYhO2hZOf86Umereo-MIqlsKG4JfxBkNfuCaAyptWhLfYw2k9RLLk_c0DAOAxgJ1RQJXsAd8QRC4bBE_WJpxSPy2SSTp_cpM7qPO_hyphenhyphen3z02_m-frxJ4hC1I1D8/w300-c-h200/no-thumb.png", roundThumbs:false, titleLength:"auto", snippetLength:45, centerText:false, openNewTab:false };</script> <script type='text/javascript'> //<![CDATA[ var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"…":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"…":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]); //]]> </script> </b:if>

10. Hasil akhir akan tampak terlihat seperti screenshot di bawah ini.

11. Simpan template.

12. Penerapan script related post bisa dilihat seperti pada link demo di bawah ini.

Demo

Kesimpulan

Sampai tahapan ini kita berhasil menambahkan script related post dengan dua contoh. Khusus script related post kali ini saya rekomendasikan. Salah satu kelebihannya karena memiliki banyak pilihan model yang bisa ditampilkan. 

Caranya, pada bagian:"relatedStyle: 4" silahkan ganti angka 4 tersebut dengan angka 1-9. Setelah itu lihat perbedaan sytle yang dihasilkan oleh script related post tersebut. Untuk banyaknya artikel terkait yang ditampilkan juga bisa diedit pada bagan:"relatedPosts: 4". 

Sedangkan judul "Related Posts" bisa juga diganti pada baris kode:"relatedHeading: &quot;&lt;h4&gt;&lt;span&gt;Related Posts&lt;/span&gt;&lt;/h4&gt;&quot;," Ganti tulisan warna merah dengan "Artikel Terkait" atau sesuai selera teman-teman.

Demikian tutorial kali ini tentang cara menambahkan script related post edisi kedua.

Selamat mencoba.

Baca Juga