Tips Membuat Slide Rekomendasi Artikel Terkait Blogger

Lankah-langkah yang harus kawan-kawan perhatikan adalah menurut petunjuk yang sudah saya sediakan di bawah ini :

1. Cari kode script berikut ]]></b:skin> (gunakan Ctrl + F untuk mempercepat pencarian)

2. Copy kode script dibawah ini, lalu paste tepat di Atas kode script ]]></b:skin>

#kislidingbox{background:#fff;border-top:1px solid #bbb;width:320px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;} .kislidingbox-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px} .kislidingbox-title span a{float:right;height:35px;width:25px;} a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;} .kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;} .kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;} .kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px} .kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;} .kislidingbox-container > div > span {font-size:14px;} .kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;} .show{bottom:80px;} .hide{bottom:-145px;} .related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;} .related-post h4 {font-size:150%;margin:0 0 .5em;} .related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;} .related-post-style-2 li {margin-left:-35px;style:none;} .related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;} .related-post-style-2 li:first-child {border-top:none} .related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;} .related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;} a.related-post-item-title {color :#333 !important;} a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;} .related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;} .related-post-style-2 .related-post-item-more {}

Kode script yang berwarna Biru bisa Anda ganti sesuka hati Anda

width : lebar kotak rekomendasi artikel
height : tinggi kotak rekomendasi artikel
margin-left:-35px : merupakan letak gambar dari sebelah kiri, jika semakin besar angka yang diberikan maka gambar akan semakin dekat dengan garis

3. Langkah selanjutnya letakan kode dibawah ini diatas kode </head>

Kode script warna merah diatas sialhkan dipasang jika anda belum memiliki kode seperti itu atau sejenisnya ( fersi berapapun ) jika sudah memiliki kode seperti itu sebaiknya kode diatas tidak perlu ditambahkan lagi. Juga mengenai Kode script " diatas Bisa Anda ganti selain 400 ". Semakin besar angka yang diberikan maka akan semakin bawah slide box muncul pada blog Anda.

4. Copy kode script dibawah ini, lalu paste tepat dibawah kode <div class='post-footer'> ,kodenya yang ke 2.

<b:if cond='data:blog.pageType == "item"'><div class='show' id='kislidingbox'>    <div class='kislidingbox-title kislidingbox-www'>      <span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span>        <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKxl15B1syjW_vwTNNtbSbI2OMvM8u0mgKUfyYdCt-l1-4qBErkXdzGNpLRRIOxDerNEaUl96_qDZGOzDLtICUm-d2e3y6J7dPw2YLGge_phsbMYkv0G8SyOjcoRK2Ff1dOMWbYKaC/s1600/close.png' title='close'/></a></span>        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi66snXmB32HlOvX7bzn3_NmZVvQywKZ070arDxLZy9q8xShabCnpVxiFMMAJPAfBzD4FqD2J-ovuHiNbHOfMoufF_Nw211h1BAzsCB-yfy0IH9GqLzrxmE5oD46bGX1pJ2B6wBIOMH/s1600/minimize.png' title='minimize'/></a></span>        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7wNz_PK3vrMEVg_69n33azNKYrfqGOISub0090GNtg_u53TAcUlMBCcLc1dMj252hlvyctv1gFv6X0_zOgdDdxYL8geOniNunreM-c-sFs-fFSz_h6MYXW7Xyuz_MHT0qK2SC4Qy/s1600/maximize.png' title='maximize'/></a></span>    </div><div class='kislidingbox-container'><b:if cond='data:blog.pageType == "item"'>  <div class='related-post' id='sliding-tab'/>  <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: "<h4></h4>",       numPosts: 2,       summaryLength: 35,       titleLength: "auto",       thumbnailSize: 45,       noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",       containerId: "sliding-tab",       newTabLink: false,       moreText: "",       widgetStyle:2,       callBack: function() {}   };   </script><script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/></b:if>           </div></div></b:if>

Tulisan Text "Baca Juga Artikel Halaman Berikut" Anda cari diatas dan Bisa Anda ganti dengan kata-kata yang disukai,

numPosts: 2 = Jumlah rekomendasi artikel yang muncul,Jika anda ingin menambah artikelnya ubah juga bagian height di kode CSS bagian pertama. thumbnailSize: 45 = Ukurang gambar yang tampil pada slide box rekomendasi artikel, bisa Anda ganti sesuai keinginan Anda. newTabLink: false = Artinya jika artikel yang ada pada kotak slide box rekomendasi Anda klik, maka artikel tersebut tidak akan muncul di tab baru. Jika Anda ganti menjadi true, maka artikel tersebut jika di klik akan muncul di tab baru, summaryLength: 35, adalah banyaknya tulisan dibawah judul, jika anda ingin menambahnya silahkan ubah ke angka lebih besar, dan jika anda ingin menghilangkannya ubah menjadi angka 0.

Sekian dan demikianlah kawan2 saya,, selamat mencoba dan semoga bermanfaat bagi teman-teman semua yaaa hehehe ^_^

Jangan lupa kawan-kawan, kunjungi link software saya yaa... alangkah baeknya bagi anda pencinta software Pc downloader Full Version Working Link Zalgonza.