Demonya Klik Disini
Untuk membuatnya silahkan ikuti langkahnya berikut ini :
- Login ke akun Blogger
- Klik Design
- Pilih Tab menu Edit HTML
- Centang tulisan Expand Widget Template
- Kemudian Letakkan kode dibawah ini sebelum kode ]]></b:skin> ,untuk memudahkan pencarian tekan Ctrl+F atau F3
#slider { background:#101010; height: 153px; text-align:center; overflow: hidden; position: relative; margin: -5px 0px; } #mover { width: 600; position:absolute; overflow:hidden; } .slide { padding: 15px 0px; width: 1000px; float: left; position: relative; height:130px; } .slide h2 { font-family:Georgia, Helvetica, Sans-Serif; font-size: 18px; font-weight:bold; text-align:left; color: #FFFF00; padding:0px 0px 0px 0px; margin:0px 0px; width:440px; overflow:hidden; } .slide h2 a:link, .slide h2 a:visited { color:#E1771E; background-color: transparent; } .slide h2 a:hover { color: #ff0000; background-color: transparent; } span.slmet { color: #ee0909; font-size: 10px; font-family:Tahoma, georgia, Helvetica, Sans-Serif; line-height: 20px; width: 200px; padding:0px 0px 0px 30px; margin:0px 0px; text-transform:uppercase; } .slide p { color: #FFFFFF; font-size: 12px; text-align:left; font-family: Georgia, Helvetica, Sans-Serif; line-height: 20px; width: 440px; padding:0px 0px 0px 0px; margin:0px 0px; } .slide img { position: absolute; top: 20px; left: 225px; background:; padding:10px 10px; } #slider-stopper { position: absolute; font-family: Georgia, Helvetica, Sans-Serif; top: 1000px; right: -125px; color: #FF0000; padding: 3px 8px; font-size: 14px; font-weight:bold; text-transform: uppercase; z-index: 1000; }
- Kemudian sialhkan letakkan kode di bawah ini tepat sebelum / diatas code </head>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/> <script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/> <script type='text/javascript'><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("catmenu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhoverb"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script>
- Save Template
- Selanjutnya klik tab Rancangan
- Klik Add a Gadget, pilih HTML/Javascript
- Paste code dibawah ini didalamnya
<!-- Casing --> <div id="casing"> <!-- Slider --> <div id="slider"> <div id="mover"> <div class="slide"> <h2><a href="ALAMAT URL">JUDUL SLIDE 1</a></h2> <p>isi artikel slide 1</p> <img src="LINK GAMBAR"/> </div> <div class="slide"> <h2><a href="ALAMAT URL">JUDUL SLIDE 2</a></h2> <p>isi artikel slide 2</p> <img src="LINK GAMBAR"/> </div> <div class="slide"> <h2><a href="ALAMAT URL">JUDUL SLIDE 3</a></h2> <p>isi artikel slide 3</p> <img src="LINK GAMBAR"/> </div> </div> <!-- /Mover --> </div> <!-- /Slider --> <div class="clear"/></div></div>
Ket :
- Ganti tulisan ALAMAT URL dengan link posting blog sobat.
- Ganti tulisan JUDUL SLIDE dengan Judul Slide sobat
- Ganti tulisan Isi artikel dengan isi artikel slide sobat
- Ganti tulisan LINK GAMBAR dengan link image yang sudah di upload.
OK. Sampai disini dulu Cara Buat Headlines Slide Show Pada Blog
NB : Jika tampilannya kurang pas dengan selera soba, sobat bisa merubahnya dibagian CSSnya (kode yg dilitakkan sebelum ]]></b:skin>)
selamat mencoba dan semoga bermanfaat
contohnya kayak gimana nih bro ???? ... :)
ReplyDeletemantabs, biar posting pilihan ada di sebagai headline
ReplyDelete@ Shinobi Caemk : sory sob lupa pasang live demonya...tapi dah dikasih tu
ReplyDelete@ citromaduro : seeef
Bagus, sayangnya layout kurang pas dan slide terlalu cepat :)
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletebrother gmana cara membuat menu slide seperti slide ENTRI POPULER dan postingan terbaru yang ada di blog kamu bro..di sebelah kanan atas...kasih tau dun and buat postingannya. trims
ReplyDelete@ aqiqah : di dikurangin
ReplyDelete@ DownloadActive : sudah dishare sob..coba ente cari sroll di pencarian
thanks brother...knjungi balek ke blog q ea...
ReplyDeleteutk wp gmn gan
ReplyDelete@download : siap komandan
ReplyDelete@Cookies Media kebetulan tuk WP masih belon ada sob
Thanks Gan Atas Infonya,,
ReplyDeleteTapi sya mau ngopy kok ndak bisa ya,,
view plainnya dman???
kok klik kanannya fak bisa,
ReplyDeletemau copy codenya gak bisa..
mana panjang lagi..
gak jadi sob
ReplyDeletekunjangan malam and happy blogging
ReplyDeletetrima kasih atas infonya gan,semoga saya bisa mempraktekkannya,,,oh ya gan,kalau sempat mampir di blog ane gan ya,mohon sarannya,,trims
ReplyDeletesama2 gan dan selamat mempraktekkan
DeleteAda tidak blog demonya ...??
ReplyDeleteSoalnya ini slide headline yach
thanks tutornya mas... lgsung ane praktekin nih
ReplyDeleteTerima kasih di atas ilmu di atas. Akan ku cuba nanti.
ReplyDeletesama2 dan selamat mencoba
Delete