Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun

Kali ini saya sedikit share Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun yang lengkap dengan tombol kembali ke beranda / home dan muat ulang / reload yang saya dapat dari salah satu blog / website dengan alamat url  www.ozanhacker.com.
Tips dan trick ini sudah saya peragakan di blog saya. singkat cerita mari kita simak saja Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun berikut ini.

Cara Memasang Tombol Back to Top

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>

<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-oCDwy3PVqLuLvH4NiBh1lI_qBfF7p5yLEs4uP2CUXPCTK-iPOlx4qhLYGShVzjhEsNKhA98qqPBoQR6bLSIYvv0_SM9PvNraYC89IIA-3_iGM55Wik5CtAx8xHsWymIU3-PXTFo0thc/s1600/Untitled-2.png'/></a>



Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>

<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-oCDwy3PVqLuLvH4NiBh1lI_qBfF7p5yLEs4uP2CUXPCTK-iPOlx4qhLYGShVzjhEsNKhA98qqPBoQR6bLSIYvv0_SM9PvNraYC89IIA-3_iGM55Wik5CtAx8xHsWymIU3-PXTFo0thc/s1600/Untitled-2.png'/></a> 



5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:

• Kode warna kuning adalah posisi tombol berada
• Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan  gambarnya dengan selera anda)

Cara Kedua:
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

1.      Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.

    #Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
    #Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
    #Enjoy img{border:0}
    #Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

2.      Kemudian sisipkan kode berikut ini setelah atau dibawah kode </body>

    <div id='Enjoy'>
    <a href='#' onClick='window.location.reload()' title='Reload page'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
    <a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
    <a href='#' title='Ke Atas Halaman'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
    <a href='#footbar' title='Ke bawah halaman'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
    </div>

3.      Lalu simpan tamplate anda, dan lihat hasilnya…

Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol

apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:

=> Untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.

Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog anda).

Jangan lupa komentarnya… Untuk artikel ini jika ada yang mau menambahkan cara yang lainnya aku tunggu…

Kumpulan Efek - Efek Blog: Dari Yang Ringan Hingga Yang Berat

Share kumpulan efek blog yang telah di posting oleh sobat Riski Aditya  kumpulan efek-efek blog baik dari yang ringan hingga yang berat, untuk diterapka pada blog sobat sekalian, singkat cerita saja silakan simak keterangan berikut.

Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.

Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat  bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.

A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.

1. Efek salju berjatuhan

2. Efek hati bertaburan 

3. Efek bintang bertaburan 

4. Efek kembang api 

5. Efek Gelembung 

Cara pemasangan :

1. Klik rancangan --> Edit html
2. Letakkan script efek di atas kode </body>
3. Klik Save

B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

1.Meteor Jatuh 

2. Banjir 

3. Bunga Mekar

4. Bom Atom 

5. Ufo 

6. Graffity 

7. Shaver 

8. Gun 

9.Bloody gun

10. Paint ball 

11. Chainsaw 

12. Dinosaur 

13. Lebah 

14. Lalat 

15. Semut 

16. Siput 

17. Cacing 

18. Mold 

19. Bayi merangkak 

20. Telur mata sapi 

21. Kopi tumpah 

22. Terbakar 

23. Tomat 

24. Creampie 

25. Murka 

26. Sapi Jorok

27. Anjing Jorok 

28. Kencing Sembarangan 

Cara pemasangan :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan script efek di dalam kotak yang di sediakan
3. Klik save dan lihat hasilnya.

Tambahan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ).  so, pilih mana yang terbaik menurut sobat.. salam.. 

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

Berbagi pengalaman pribadi membuat lipatan kertas pada ujung kanan blog yang menurut saya agak lumayan bikin pusing sob, maklumlah pemula,, heheheheee,,,, 

Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog saya, [sedikit pamer, heheheheee,, ]

bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog seperti blog saya [tenag aja yang saya bagi tidak ada foto jelek saya kok,, heheheheee,,, ] silakan ikuti lankah-langkah berikut ini ya sobat:

1. Silahkan Login ke akun blogger sobat.

2. Lalu masuk ke design Template, klik Edit HTML

3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>

5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>var tujuan =&#39;http://Alamat Url Feeds Sobat&#39;</script>

<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>

6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)

Keterangan:

• Kode warna hijau: ganti dengan URL Feeds sobat
• Kode warna biru: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.

Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.

Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.  

1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.

2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan URL gambar sobat:

http://petir-project.googlecode.com/files/fedkcl.png 

(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)

3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah URL berikut dengan URL gambar sobat:

http://petir-project.googlecode.com/files/feed.png

4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti url http://petir-project.googlecode.com/files/ktb4.jsdengan URL hasil upload sobat tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.

Selamat mencoba ya sobat,,

Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah: 

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9DkyF0Wew6-KXIGiHtb9xGIV5PlgwHF15DrAi_6kZvgF7K5WBd2S_mgXJmI7UtN0JSIWsBNwCprT99XeCCIyw6fwfmKmJwH_TzO66uFNxb7ZSRALv6qsIcpEcjLTgU3v-FxDtj557owkt/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Klik save / simpan.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoDMycJT1io9oM2uTgSl_dHK1cwFu6fRNuwqEvsO0XSd9YaOASwUf-GD0xGpKeV2lm5MO2jzKhJqeHNPLYg98ALqoaTSayHvLrr07j7fG1sFjeCNbQxYw8eP7RrerBlcDrminO1l8FW-SP/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua.

Cara Mecegah Copy Paste Pada Blog

Setelah sekian lama tidak posting dikarenakan masih banyak urusan yang harus saya selesaikan, dan kali ini saya hanya sedikit share dari postingan blog sahabat yaitu tentang cara mencegah copy paste pada blog, kalau menurut saya sih hal ini tidak terlalu penting, merupakan satu keuntungan tersendiri bila artikel kita di copas (copy paste), apa lagi bila sobat yang copas mau mencantumkan sumber dari artikel tersebut, bisa menambah back link kan, merupakan keuntungan tersendirikan.

Namun bagi sobat yang merasa bahwa artikel sobat sangat penting dan tidak rela untuk di copy paste, mungkin hal ini cukup berguna untuk dilakukan. akan tetapi cara tersebut tidak melindungi content blog sobat sepenuhnya, stidaknya cukup membuat orang yang berniat copas sedikit bingung apabila dia seorang newbie, karena sebenarnya ada jalan lain untuk bisa meng-copas artikel blog sekalipun sudah dilindungi dengan script anti copas.

Tanpa panjang lebar, kali ini untuk melindungi blog di blogger (blogspot) dari dari copy paste adalah dengan mendisable right click, atau lebih dikenal dengan mematikan klik kanan. Berikut tutorial cara mematikan klik kanan pada blogspot.

• Login terlebih dahulu ke Blogger.com
• Dari halaman Dashboard, silahkan Sobat menuju ke Tata Letak > Edit HTML
• Lalu cari kode <body> atau <body (dengan bantuan tekan Ctrl+F atau F3)
• Tambahkan kode dibawah ini ke dalam kode <body> atau <body tadi, atau bisa juga di ganti sekalian

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>

Sobat juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.

Berikut penjelasan dari kode-kode diatas:

oncontextmenu='return false' (untuk mematikan klik kanan mouse)
onmousedown='return false' (untuk mematikan klik blok ke bawah)
onselectstart='return false' (untuk mematikan seleksi blok)
onkeypress='return false' (untuk mematikan tombol keyboard)

Jika sudah, Simpan Template blog Sobat.

Mohon maaf apabila tutorial sebelumnya tidak berhasil karena belum saya coba. untuk demonya silakan sobat lihat di sini DEMO.

Selamat mencoba dan semoga berhasil sobat.

Cara Memasang Related Post pada Sidebar

Login ke account blogger anda, klik rancangan/layout lalu klik edit HTML

Jangan lupa centang expand widget templates untuk mengedit template secara keseluruhan
masukan kode dibawah ini sebelum tag </head>

<script type=”text/javascript”>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length – 1) * Math.random());
var i = 0;
document.write(‘<ul>’);
while (i < relatedTitles.length && i < 20) {
document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);
if (r < relatedTitles.length – 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(‘</ul>’);
}
//]]>
</script>

kemudian cari kode widget seperti dibawah ini :

    <b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
</b:loop>
</b:if>

Kemudian tambahkan kode yang warna merah pada kode tersebut :

    <b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
<b:if cond=’data:blog.pageType == “item”‘> <script expr:src=’”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&amp;callback=related_results_labels&amp; max-results=10″‘ type=’text/javascript’/>

    </b:if>

</b:loop>
</b:if>

• Save template
• Masuk ke menu Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post ( atau yang lain sesuai kebutuhan ) kemudian copy paste script di bawah ini : //bisa pasang dibagian mana saja//side bar//footer//sesuai kebutuhan//

    <script type=”text/javascript”>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Simpan dan lihat hasilnya..

Google mengupdate Blogger Template HTML Editor

Bagi kalian yang gemar dalam mengutak-atik template blogger ini merupakan berita yang bagus bagi kalian. Baru-baru ini google mengupdate/meningkatkan fungsi dari HTML editor yang ada pada bagian template.
Seperti apa yang ditulis pada Blogger Buzz bahwa peningkatan fungsi ini untuk kalian para pengembang web (pembuat template) ataupun yang senang dalam merubah-rubah tampilan blog dengan menggunakan HTML, Javascript dan CSS.
Tambahan fitur yang ada pada editor HTML baru ini dapat mempermudah dalam pengeditan template yang dilakukan oleh pengguna blogger.
Fitur-fitur yang ada diantaranya : penomoran baris (line numbering), Penanda sintaks (syntax highlighting), auto-indentation dan code folding.
Berikut ini sedikit gambaran tampilan dari Editor HTML yang baru pada blogger:

Tampilan Template HTML Editor Blogger

Jump to widget (untuk memudahkan dalam pencarian widget blogger)

Code folding (untuk menggumpulkan/menyembunyikan satu kelompok kode)

Preview Template (Melihat tampilan blog sebelum template disimpan)

Selain fitur diatas ada juga fitur untuk mencari kata/kode tertentu yang ada pada template yaitu dengan menekan Ctrl+F. Atau jika ingin menggantinya dengan kata/kode yang baru dengan caraCtrl+Shift+F.
Nah dengan semakin banyaknya fitur baru yang ada pada blogger ini mungkin menjadi salah satu bukti keseriusan google agar dapat menjadi nomor satu dalam penggunaan blog di dunia. Serta membuat para pengembang web khususnya platform blogger dapat lebih dimudahkan sehingga kreatifitas mereka dalam membuat template blogger semakin bertambah.
Sekian.

Merubah Widget Popular Post Menjadi Slideshow Coinslider

Artikel terpopuler (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 tahukah kalian widget popular post ini dapat dirubah menjadi slider. Untuk membuatnya menjadi slider kita harus mengetahui struktur HTML yang menyusun slider yang akan dibuat.
Jika sudah mengetahui struktur HTMLnya yang perlu kita lakukan yaitu merubah strutur widget tersebut menjadi seperti HTML dari slider tersebut. Nah kali ini saya akan membuat popular menjadi slideshow coinslider. Berbeda halnya dengan widget recent post coinslider ini tidak menggunakan JSON Feed.
Karena widget popular post ukuran gambarnya hanya 72px yang sudah dicrop maka perlu JS untuk mengubah ukuran gambarnya. Bagi yang penasaran bagaimana cara memasangnya bisa mengikuti cara berikut ini:

Menampilkan Add a Gadget diatas Blog Post

Jika diblog anda belum tampil tombol/tulisan add gadget di atas Blog Posts ikuti langkah berikut untuk menampilkannya:

1. Pada dashbord pilih Template kemudian klik tombol Edit HTML
2. Kemudian cari kode <b:section class='main' id='main' showaddelement='no'> lalu ganti rubah showaddelement menjadi yes sehingga menjadi seperti ini <b:section class='main' id='main' showaddelement='yes'>
   NB: Untuk mempermudah klik pada area Edit HTML lalu tekan Ctrl+F pada keyboard lalu tulis<b:section class='main' id='main' showaddelement='no'>.
3. Klik Simpan

Menambahkan gadget Popular Post dan Script Slideshow CoinSlider

1. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
2. Setelah itu scroll kebawah hingga menemukan Popular Post lalu klik tombol tambah yang ada disudut kanan Setelah itu klik Save/Simpan
3. Setelah itu pilih Template kemudian klik tombol Edit HTML Lalu Cari tempat Widget Popular Post yang tadi. Untuk mempermudah bisa dengan mengklik Jump to widget Lalu pilih Blog1. Diatas Widget Blog1 tersebut merupakan Widget Popular Post yang sebelumnya telah ditambahkan
4. Kemudian Ganti Widget Popular Post yang tadi dengan Kode berikut:
   

   1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<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'>
   #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='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='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
         </b:if>
         <span>
         <strong><data:post.title/></strong>
         <p><data:post.snippet/></p>
         </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",630);
   //]]>
   </script> 	
   <script src='http://ivyth.googlecode.com/svn/js/coin-slider.min.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   $('#coin-slider-pop').coinslider({width:630,height:300});
   //]]>
   </script> 
   </div>
   </b:if>
   </b:includable>
   </b:widget>

   NB: CoinSlider merupakan jQuery Plugin. Sehingga untuk dapat bekerja pada blog anda harus meliliki jQuery library.
   Widget ini telah saya bungkus dengan tag kondisional yang hanya tampil pada halaman depan (Home/Beranda) kodenya pada baris 3 dan penutupnya baris 45.
5. Klik Simpan

Demo Popular Post Coin Slider

Nah itulah cara merubah widget popular post menjadi slideshow coinslider. Saya tidak memberikan keterangan lebih agar kalian dapat belajar serta membedakan disebelah mana letak perbedaan dari widget popular post yang umum dengan struktur dari slideshow diatas.
Sebenarnya bukan hanya coinslider yang dapat diaplikasikan pada widget popular post, tapi hampir semua slideshow. Intinya kita mengerti bagaimana susunan dari kerangka Slideshow tersebut kemudian output dari widget dibuat sesuai kerangka tersebut.