Cara membuat slider

Cara membuat/memasang slider otomatis pada blog

Hai sobat, sekarang saya akan post cara membuat slider otomatis di blog, jadi sobat tidak usah repot repot memasang photo dan link satu persatu kedalam slider.
Slider otomatis ini akan otomatis menampilkan post terbaru yang ada di blog anda.
Ok langsung next saja ke langkah-langkahnya.

1.Masuk ke akun blogger anda.
2.Pilih menu template lalu klik edit HTML
Klik template untuk menaruh scriptnya
3.Cari kode </head> (gunakan CTRL+F untuk memudahkan pencarian) lalu letakkan kode berikut diatas </head>.
<style>
#featuredSlider {margin:10px; padding:0 0 10px;width:96%; position:relative;border:3px solid #444;box-shadow:1px 1px 5px #666;}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0;}
#featuredSlider .container {height:246px; margin:0 10px 0 0; overflow:hidden; position:relative;}
.featuredTitle{padding-top:15px;font:16px Arial;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;display:none}
a.readmore {float:left;border:1px solid #444;background:#444 url(http://2.bp.blogspot.com/-S4AKqSDPUEs/ToSYCWJy4qI/AAAAAAAAABI/conBgqSajOY/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}
 </style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/Brando07/share/master/slider-otomatis-seocips-1.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://1.bp.blogspot.com/-h02S6KIlNoo/VkBG-OIZSKI/AAAAAAAAAPw/VTMgAkUPf6I/s360/no-image-seocips.gif";
showRandomImg = true;
aBold = true;
summaryPost = 90;
summaryTitle = 25;
numposts  = 6;
//]]>
</script>
Keterangan  lanjutan: kode warna hijau width:96% bisa anda sesuaikan dengan kebutuhan anda, untuk kode hijau jquery.min.js jika di template anda sudah ada maka tidak usah ditulis (dihapus saja).

4.Ok jika sudah tugas sobat selanjutnya adalah memanggil slider tersebut agar tampil di blog sobat.
5.Cari kode <div id='main-wrapper'> (bisa berbeda tergantung blog sobat) lalu letakkan kode berikut di bawahnya.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/> <script>
$(&#39;.slides&#39;).cycle({
fx: &#39;fade&#39;,
speed: &#39;slow&#39;,
timeout: 3000,
pager: &#39;.pagination&#39;
});
</script>
</div>
</div>
</div>
</b:if>
Keterangan lanjutan: kode berwarna hijau tersebut bertujuan untuk menampilkan slider di halaman utama dan lainnya(tidak di halaman posting). Jika sobat ingin menampilkan slider di seluruh halaman, sobat tinggal menghapus kedua kode hijau tersebut.

6.Save template sobat dan lihat hasilnya.

Sumber seocips.com
Ok sekian tutorial kali ini, sebelum saya posting ini, saya telah mengujinya terlebih dahulu dan ternyata working 100%. Jika sobat tidak berhasil, harap cek lagi scipt sobat.
Terima kasih telah berkunjung, dan sampai jumpa. :D
47 Komentar untuk "Cara Membuat Slider Otomatis di Blog"

cara memasukkan lebih dari 3 gambar gimana ya maaf newbie

kira-kira demonya kaya gimana ya gan? terima kasih :#

itu otomatis menampilkan 6 post terbaru mas,

http://4.bp.blogspot.com/-YM_EkeEUx-4/VrLMBM5vPNI/AAAAAAAAGUo/e4YzY4FlNp0/s1600/Slider-otomatis-keren-terbaru-recent-post-slider-seocips.png
semacam gini gan

Nyimak dulu ada gan,,,
nambah ilmu.

silahkan gan, makasih udah berkunjung :D

Bagus gan makasih infonya nambah ilmu blogging nih

mantap gan templatenya, keren...

waah bagus nih dipasang di blog ane.. ijin pasang gan...

6 gan, jika salah harap reply :D

Wah ini bagus untuk mempercantik blog hehe

Pas banget sama situs ane..... ini yg dicari cari gagal terus, mau tes yg ini dulu yaa

silahkan gan, kalo ga work bilang ya :D

nice artikel sangat membantu sekali, karena saya masih newbie.

Mantabbb ARtikelnya gan, Sangat bermanfaat, ntr ane coba deh kapan2 :D

bagus nih gan infonya nambah wawasan bgi blogger awam

blom berani ubah template :)
palingan w cuma bisa add gadged doank
btw nice post vroh :)

Ini slider berat gak ya buat load blog?

kalo di wordpress kaya gimana gan buat nya?

wah ane belum pernah pake wordpress gan

lumayan gan, apa lagi ini belum responsive

Ijin nyoba gan siapa tau cocok buat template ane

oh gini toh caranya. Baru tau ane, tapi gak memberatkan blog ya yg semacam ini?

Berhasil mas
Makasi ya info nya :)

Zona Komputer © 2015. All Rights Reserved.
Template By Hitamz , Powered By Blogger