Cara Membuat Buttom Bar Related Post

tutlenc.blogspot.com - halo sahabat tutlenc. Mungkin biasanya kita sering melihat Related post berada di dalam postingan blogger atau dibawah postingan. Kemarin ada yang sempat nanya gimana sih caranya membuat related post di blogspot tapi biar ada di bagian bawah blog, seperti gambar dibawah.

Lalu saya mikir ini merupakan "nav" jadi saya coba-coba membuatnya. jadilah seperti di bawah ini. silahkan kamu copy jika mau digunakan

Cara membuat Buttom Bar Related post

Script Buttom Bar Related Post

<nav> <b:if cond='data:blog.pageType == "item"'> <div class='related-post' id='related-post'/> <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 = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h5>Artikel Terkait:</h5>", numPosts: 1, titleLength: "auto", containerId: "related-post", newTabLink: false, widgetStyle: 1, callBack: function() {} }; </script> <script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost.js"></script> </b:if> </nav>

kode di atas aku coba taruh di bawah atau diatas </body> tidak masalah yang menentukan posisinya adalah di CSS nya.

widgettitle nya bisa kamu ganti sesuai keinginanmu.

CSS Bar Buttom Related post

#related-post {background:white;width:100%;display:block;position:fixed;left:0;bottom:0;right:0;margin:2px 0px;} .related-post h5 {font-size:120%;margin:0 0 5px;padding:0;font-weight:bold} .related-post li {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdS0ywZX4_QKxmUzXNSkDq1j-SlyxEe82vP8lBwQHw8ts5Ori3A3QTgceOUJip4Xdtx2O2veSVXnkfsY9wxI9cWMycjsZXVOrnxK81M4PbD1CSrfrjGYvbIZoi0US_c2B0OKNMJlDGFcPQ/s1600/arrow_state_grey_right.png") no-repeat 58px 3px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 75px} .related-post .widget {margin:0;padding:0} .related-post ul {list-style:none;margin:0;padding:0;}

dilihat dari CSS diatas maka kamu bisa ketahui dari "position:fixed;" artinya posisinya statis tidak bergerak. lalu "buttom:0;" ini artinya SCRIPT diatas akan dimunculkan pada bagian bawah blog kamu. jika misalhnya kamu ganti menjadi "top:0" maka posisinya menjadi fixed top 0 yaitu di bagian atas blog kamu.

silahkan di utak-atik lagi sesukamu kawan

Selamat mencoba