Popular Post merupakan salah satu widget bawaan dari blogger. Widget ini dapat menampilkan gambar, judul serta deskripsi dari artikel, dan biasanya diletakkan pada bagian sidebar, Nah kali ini kita akan merubah widget popular post ini menjadi slider yang terletah diatas halaman posting, Untuk membuatnya menjadi slider kita harus mengetahui struktur HTML yang menyusun slider yang akan kita buatini.
Pertama tama ubah strutur widget tersebut menjadi seperti HTML dari slider tersebut, penasaran bagaimana cara memasangnya ok silahkan ikuti beberapa cara dibawah ini
- Login ke Blogger pilih Template kemudian klik tombol Edit HTML
- Cari kode <b:section class='main' id='main' showaddelement='no'> ubah showaddelement menjadi yes kurang lebih akan seperti ini <b:section class='main' id='main' showaddelement='yes'> NB: Untuk mempercepat pencarian klik pada area Edit HTML lalu tekan Ctrl+F kemudian masukan kode <b:section class="main" id="main" showaddelement="no"> lalu Enter
- Klik Simpan
Selanjutnya Ganti Widget Popular Post tersebut dengan Kode dibawah ini.
<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <style scoped='' type='text/css'> #cssDisplay {background-color: #FFF;color: #000;border: 1px solid #ccc;padding: 10px;border-radius:10px;margin: 2px;} #coin-slider-pop img {width: 100%;height: 300px;} #coin-slider-pop {margin: 0 auto;} .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title {width: 97%;padding: 10px 1.5%;background-color: #000000; color: #FFFFFF;} .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; } </style> <div class='widget-content popular-posts'> <div id='cssDisplay'> <div id='coin-slider-pop'> <b:loop values='data:posts' var='post'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img expr:alt='data:post.title' src='https://googledrive.com/host/0BzzpB6MLhPeNZ0FhV0xIQ3A0TDg/grey.gif'/> </b:if> <span> <strong><data:post.title/></strong> <br /><data:post.snippet/> </span> </a> </b:loop> </div> <script type='text/javascript'> //<![CDATA[ function resizeimage(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b);d[a].width=b}} resizeimage("PopularPosts2",600); //]]> </script> <script src='https://googledrive.com/host/0BzzpB6MLhPeNMFNLNHNhY1lhZ1E/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $('#coin-slider-pop').coinslider({width:600,height:210}); //]]> </script> </div></div> </b:if> </b:includable> </b:widget>
Ok demikian sedikit penjelasan cara merubah widget popular post menjadi slideshow, semoga bermanfaat
source
tolong patuhi tata tertib untuk komentar dibawah ini"":
1. tidak boleh berkomentar yang bersifat spam.
2. jangan menyertakan alamat/link langsung.
3. jika komentarnya tidak terjawab oleh admin maafkan karna saya sibuk<>> EmoticonEmoticon