Widget/Gadget Featured Post ( Pos Unggulan ) dengan slideshow
Widget/Gadget Featured Post ( Pos Unggulan ) dengan slideshow sangat cocok untuk blog yang minim gambar. Tampilan slideshow ini begitu memukau dan cantik. karena ukurannya yang besar, Agan dapat meletakkanya di atas posting. .
Berikut langkah-langkahnya :
1. Login ke akun blog Anda
2. Pilih Tata Letak
3. Kemudian Klik Tambahkan Gadget
4. Pilih HTML/javascript
5. Copy Kode di bawah ini dan pastekan di HTML/javascript tadi.
<style type="text/css">
.slider-box {
background: none repeat scroll 0 0 #FAFAFA;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #333333;
margin: 0 auto;
width: 675px;
overflow: hidden;
}
#slider-wrapper {
margin: 0 auto;
padding: 10px;
}
#jslider-container {
border: 2px solid #FFFFFF;
max-width: 550px;
position: relative;
text-align: left;
z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
<ul>
<li>
<a href="http://dimpost.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jckqEBdbpAvnz1u7jVpMkAPgDWA_dvd7e8nanejuGe6_xh4Z_aAeNEXDbBgbc8QtieXSiNfP7k-bdfqCIZfxycbii9SMVv_eXoHb4dArYsef_7N87RXCJGazLFfnrvJRlGWEXKRmGYC4/s550/sample1.jpg" title="Sunset" />
</a>A boat with beautiful sunset.</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqktlsZvG8rHUufu0w4TeThFJEjTNq4zkookd1zmyOW8waBYTg86AzWsG-l3qd_TLyTcBnqvRLX8fUDua001zpBeahc4dLqAMZf7hL2i7j09AetvKu5LgaiCM5RQ3GHyFOnJJf1U0fAp9i/s550/sample2.jpg" title="Rainbow" />
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrmF2Dm635UGvX4Ybypng_a2f4yTPe7IgkwQvj1Nezzs29PKFT4F6dym8R8B-4NG0AdiZfMVmSs-k4P3_BhlFDQROuqSdsWfIfeTN4F1k4oVLi6MclzcBKwkOwzhgrLrY07C801CbmPh5D/s550/sample3.jpg" title="True Nature" />
</a>Tree in field with blue sky.</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ubNbgMA76m7miVzmqB_hZLqGalrUTVXXDCg_PW0aCWw-_VGpOGEya5ypbK-3xI7QwdCTSO81UA-1BZSiL9KyGR30kRwlK_TKGd6XedUd94E8Ypc8jIKIkR49pBPu9OvmjWPXVIB10eVC/s550/sample4.jpg" title="Sunrise" />
</a>Amaizing sunrise moment</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEB5eIPPDMKpiIevvzdWbFRCOnE9nhJnhr65OSNC7ROYeWG7h_zBO87WHKGO5w2Q-uhJVf5J4ny5dQdBw9wRYwXIXFMJiydrdDFHIap17os5Xk4glFLIAdUFH1KphY6EyReTStlh6USIiz/s550/sample5.jpg" title="CAR in HDR Nature" />
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNG7NPe2hXm4hIAcYUUgpOMmnZihsYcTaTbw9eQglKhEeLlFQFtEzXquTpwwcQMx_ZwY-FHrTgCftNAurD_q8382lo61PeXpl1h5trIWLFqSxt_cMhvUDAtbS56r6w26GX27yXcWdva74/s550/sample6.jpg" title="Sunshine" />
</a>
</li>
</ul>
</div>
<div class="jslider_thumbs">
<div>
<a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFW1JtvlPsBaMvh5l-doHod7MgnAFqxBEO0IPYk5sBxivdWu6Bk_udIwBOqwchXtfAdLYCjpLELKoZ1_WbN2X0TDFQeyq7IoyaiKsxLBg3GKIw8QfEwlhktjfwnTtxfvESwBxfMu1veIVy/s85/sample1.jpg" /></a>
<a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimSegL9HC0Tut3we1w_c57oPc3rasz1nevkgYvxPNBzzVOqkG2MDpPhC6BEv6ReL67EoqjRCU60f1gHyslN_bCJute53MS_YDezt6mxCW5wRdlto4h0KuZ_J0UeYkG9OHGmeDUmBuhuw4K/s85/sample2.jpg" /></a>
<a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRqGliN6bHrZ1cRhyphenhyphenroT8XKy1gwZZIw8Vo3LUCRL0d8Ar8WdySsgcuzv-EVEljIVy5XPMKV1q4bpsjunyIebUvlFge3AipTd6zaO-Dwltgi4G-6HK3lT_DMKVjfr90_IJkoOZ2t5wUh4L/s85/sample3.jpg" /></a>
<a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTC3SAcN4XvzwBllTThhu6p-5a99lEqBf8BwLIjvGt_4erVaqaTTQCRWW5P8e7b3mzCh6hSjQlaB8AVzavJGGQSSle3uUqMgbQ8MZ3aY8xvBCauJPVtjy_CRrpkDrYbgvSb-oJiDokbMA/s85/sample4.jpg" /></a>
<a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvoE-5M7e-z8GmIyFZaZM46LGw_FDmEUQyY1ijBbbJ1LXywsf6xbTWiMAwKL8vzPMYZhJzADOgJYQbCeKdMi-fCbdIzLCz02Fuk9vAB4c2aFyFDYYbmr8wSvH6ppDghA5lbFgKs6qHkFwu/s85/sample5.jpg" /></a>
<a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLIgbXD2qDpbxTiggaovC6VruutGSDff1rSEV1aSJoOG-luSFSe_GWz1g3mW0LtCUb1lXQw2bNZF2YVwoIwQA-MnnWO3uVrrZGvnI3um3HcoQTYZOoc5MbxO-Di6VYmcuFP_OJ99-vomac/s85/sample6.jpg" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>