Sebelum menambahkan widget ini, kamu harus tahu bahwa widget ini tidak sepenuhnya cocok untuk semua template. Maka, buatlah sebuah backup terlebih dahulu sebelum menambahkannya.
Cara Menambahkan:
Langkah 1. Masuk ke Dasbor Blogger - Template (buat dulu sebuah back-up) - Edit HTML - Lanjutkan - Expand Template Widget.Langkah 2. Cari kode
]]></b:skin>
Langkah 3. Di atas/Sebelum kode
]]></b:skin>
, masukkan kode di bawah ini:#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}...Kamu bisa mengubah ukuran widget ini dengan mengubah nilai dari 590 (panjang) dan 126(lebar). Disarankan untuk tidak mengubah ukuran bagi yang tidak berpengalaman.
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8k6aDzr6ffj_DPwXo4H6CiEH53qefP9PUnnekZspUDfIBCXLyGbwJCeLABrsBVdyhO17TTxNU7TMdHIS3hFti7oo-391O5zah-lPDd-o7p9aUzI5BZOuFNKNFlW8jOpKhfEYYw97Iq4A/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
Langkah 4. Sekarang, carilah kode
</head>
Langkah 5. Di atas/Sebelum kode </head>
, masukkan kode di bawah ini:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://gemar-html.googlecode.com/svn/trunk/js/galeri-posting-populer-diatas-post.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6XlCY0xdfm1RnV8vN6b6SVn1SItsQ1Np6sfukJpG6Rp7oNp56tg7E1KYBsVWDXtp6fgOqluEHRZ0JamE9ZesQVUT-EPcYb18LoNe-bzR27wo4yA2pcxKqA-y1TxapWtGWyLfoYQwqfsCE/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvenGoj-pjija1THm5AnNSxtR_Gat7tBCQmYbwfL3KKhsiPwV3-A_k8sU916Kdypb1n3e2CwAYD4wpCfP3tWlvxXn9zPggtOZW2xALLrgKQjT0CjGdms-CtNPqo0X3QPd1qqEKgsv3JGUV/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
Langkah 6. Cari kode di bawah ini:
<b:section class='main' id='main' showaddelement='yes'>...bila kode di atas tidak ketemu, carilah kode dibawah ini:
<b:section class='main' id='main' showaddelement='no'>
Langkah 7. Tepat di bawah kode di langkah 6, masukkanlah kode di bawah ini:
<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>...Hapus kode berwarna biru jika kamu mau menampilkan widget ini di halaman postingan juga.
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPIL7CMRlSwTw2nIOZ6QyOyX4n5_YO-YSSgqDQ2jr2-z3_ZUpRpHiXsRqKCCF4-iBUA_NcPIqTi0L6kPcEU94hGLp-7tUzuNwhPpUjb34e-tlTtn5UnArQH_nt16E2kL45BXior5aCqnx1/s1600/no-image.PNG'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if> </b:includable>
</b:widget>
Langkah 8. Pratinjau dulu templatemu. Bila hasilnya bagus, Simpan templatemu.
Makasih gan, infonya sangat menarik
BalasHapus