Cara Memasang Widget Auto Slide Coin Dengan Efek Transisi

Cara Memasang Widget Auto Slide Coin Dengan Efek Transisi. Slider pada blog biasanya menampilkan featured post beberapa post yang diutamakan dan dibuatkan banner untuk di tampilkan slide. Kebanyakan widget slider auto slide coin ini dipasang diatas posting blog tepatnya hanya pada halaman beranda saja. Supaya pada halaman posting tidak terlalu banyak widget.

Sebenarnya sudah banyak ada blog blog yang posting tentang slider. Tapi sayangnya rata rata slider yang diposting slide manual dalam artian banner tidak berganti sendiri. Dan saya pun akhirnya menemukan slider yang saya cari. Lengkap dengan CSS dan JQuery serta efek transisi gambar yang keren. Slider menjadi tambah hidup berkat adanya efek transisi atau pergantian gambar. Anda mau pasang juga? Silahkan baca selengkapnya.

Cara Memasang Widget Auto Slide Coin Dengan Efek Transisi

1. Login ke Blogger, pada dashboard pilih blog anda

2. Masuk ke Template, Edit HTML

3. Copy CSS berikut di atas kode ]]></b:skin> atau diantara <style type='text/css'> dan </style>

#mcis{display:none}
#sliderFrame{position:relative;width:510px;height:275px;margin:0 auto;border:5px solid #000;margin-left:6px;margin-bottom:10px}
#ribbon{width:111px;height:111px;position:absolute;top:-4px;left:-4px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWCJpUuqyeXr-6QWaUY7-N_b97d1knWO-eoy1jDNSO7o6Pv3Xsa7D0VpLSnGIuq5ZoZkWCN1b7biPjCzMyUrqpJNrA9va9Ka_mLvYq4EuXfOQ8gxf-UeE-44cByg25yI0mJp1J2jVtXM/s1600/jonarendra.blogspot.com-ribbon.png) no-repeat;z-index:7}
#slider{width:510px;height:230px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA6MrLjVvkf9F2FCFFyjjcyhJOahSiyCAVL_3yrlKe-DUurhFcrbiLdKPHZGH0slKUcMG2ZQNPce5qSvQNzPSUgXxbapPZilEZwisgWJV8EQjnkalpY1Jy3KwkcSMSdrD2tGqzJZLk_4k/s1600/jonarendra.blogspot.com-loading.gif) no-repeat 50% 50%;position:relative;margin:0 auto;box-shadow:0 1px 5px #999999}
#slider img{position:absolute;border:none;display:none}
#slider a.imgLink{z-index:2;display:none;position:absolute;top:0;left:0;border:0;padding:0;margin:0;width:100%;height:100%}
div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;padding:0;left:0;bottom:0;z-index:3;overflow:hidden;font-size:0}
div.mc-caption-bg{background-color:black}
div.mc-caption{font:bold 14px/20px Arial;color:#EEE;z-index:4;padding:10px 0;text-align:center}
div.mc-caption a{color:#FB0}
div.mc-caption a:hover{color:#DA0}
div.navBulletsWrapper{top:250px;left:190px;width:150px;background:none;padding-left:20px;position:relative;z-index:5;cursor:pointer}
div.navBulletsWrapper div{width:11px;height:11px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDMfGA0WNsHJtIiOa8oXAPa-MPket4GoDylmmhe5zKGyBx7FOO0IZ4QUnlb77EMavWv6oeHQZej3mpwwN1toJm7JP3GAmb3lYWig6g5PEsOOcE5AF-AzrBOm59EBH3IXucXBbfxQli5v4/s1600/jonarendra.blogspot.com-bullets.png.png) no-repeat 0 0;float:left;overflow:hidden;vertical-align:middle;cursor:pointer;margin-right:11px;_position:relative}
div.navBulletsWrapper div.active{background-position:0 -11px}
#slider{transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}

4. Selanjutnya, copy kode script berikut ini dan letakkan di atas kode </head>

<script src='https://sites.google.com/site/blogjona/files/slidercssjquerybyjonarendrablogspotcom.js'>
</script>

5. Jangan di simpan dulu, kita belum memasukkan HTML nya. Copy kode berikut ini dan paste di atas kode <b:section class='main' id='main' showaddelement='no'>. Karena kode itu adalah kode post.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="#"><img alt="BLOG JONA RENDRA, TEMPATNYA MENCARI INFORMASI" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBGPcgjeeD7H82uV-HAIyfkEbf5YHaSAmbquZQtC-mEwyAB-uMLazu6nTDiS3fXFLC8VkV4vnCBqrremXhG_TGvUnD_Z_HuQlMS8j8DFvBgTHDbrZ8W1Imca__sGaNYWeg4e-oTY44ej0/s1600/slide+1.png" /></a>
<a href="#"><img alt="TERSEDIA LEBIH DARI 20 ARTIKEL TUTORIAL BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY4uX2LYUXagIg2jyx1cBNGkt3ORvjep12JEHVTWmRgduFVsN6v_R7WGD9hwuoc8eu90Y0tG1casAb1GP82NnDRIqgOehDdK4GkYyplz3XfhaSjsCOiYbb3dT7Bo8H-crJvh2PT3lPd9s/s1600/slide+2.png" /></a>
<a href="#"><img alt="TIPS DAN TRIK SEPUTAR FACEBOOK DAN TWITTER" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZUuxh0Fwq37PDY-WlVcApLVrC_8LOJ8HOqu318Yo7ftnzZ6OmKv07FOwQtDwEIEyrQSp_BNxNPZfl1_BappL2HREYioGNP-v_dbm6LaJkCuGCkqKJU3vXFi5vyHxwupzdb59LlV8sWas/s1600/slide+3.png" /></a>
<a href="#"><img alt="DOWNLOAD TEMPLATE BLOGGER DAN BELAJAR SEO" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm3ktEFpucufd292FrbNU_kg8RYhkZAXxxh3Lm58hXbJr3qSnRxA3oyYJONwB6NAqIHh4hOa_TGGo44FWz6TrJaqNP0x3u25rKkiGU9jn1pmfAEkfhhewZbjXcREDnpMotYLY-MZkU3y4/s1600/slide+4.png" /></a>
<a href="#"><img alt="INFO INTERNET, KOMPUTER YANG UNIK DAN MENARIK LAINNYA" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjANoikFHR-e6NwmO91j98ckpzWdFUUMas35mdHPGV3lVv3byN_5cb40B5NSCYn-IncLQclLfNfhIMWU1rjXDjGwQiFBPAF6kHrjaNJC5v9uxWTXXBoFNl41IaFa6uzNBR_UZhTRibv9Sk/s1600/slide+5.png" /></a>
</div>
</div>
</b:if>

DEMO Widget Slider

Keterangan:

• Alt tag/deskripsi pada gambar memunculkan kalimat pada slider. Ganti bagian yang bercetak tebal sesuai dengan deskripsi dari gambar banner slider anda
• Source img (yang bercetak miring) ganti dengan URL gambar banner anda yang akan ditampilkan di slider

6. Jika sudah dikustomisasikan HTML nya, sekarang klik Simpan Template. Dan selesai.

Widget tersebut pun akan muncul hanya dalam halaman beranda saja. Mengapa demikian? Karena saya sudah membungkus HTML nya dengan Tag Condisional.

Bicara tentang slider, ada template yang dihalaman berandanya sudah dilengkapi dengan slider auto coin ini. Mau tau template apa? Namanya Template Magazine Sevida Responsive Premium. Coba saja pakai ke blog anda. Template premium pasti akan membuat blog anda seperti tampilan website profesional.

Akhirnya selesai juga artikel Blog Jona Rendra yang berudul Cara Memasang Widget Auto Slide Coin Dengan Efek Transisi, semoga bisa anda terapkan ke blog anda. Apabila ada kesulitan dan permasalahan ketika melakukan tutorial diatas, silahkan tanyakan lewat form komentar dibawah.