Cara Buat Headlines Slide Show Pada Blog

Kalo pada tips trik blog sebelumnya adalah Cara Buat Breadcrumbs Pada Blog, sekarang akan share tips trik blog yang lain yaitu Cara Buat Headlines Slide Show Pada Blog.

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

20 Comments

  1. contohnya kayak gimana nih bro ???? ... :)

    ReplyDelete
  2. mantabs, biar posting pilihan ada di sebagai headline

    ReplyDelete
  3. @ Shinobi Caemk : sory sob lupa pasang live demonya...tapi dah dikasih tu
    @ citromaduro : seeef

    ReplyDelete
  4. Bagus, sayangnya layout kurang pas dan slide terlalu cepat :)

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. brother 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
  7. @ aqiqah : di dikurangin
    @ DownloadActive : sudah dishare sob..coba ente cari sroll di pencarian

    ReplyDelete
  8. thanks brother...knjungi balek ke blog q ea...

    ReplyDelete
  9. @download : siap komandan
    @Cookies Media kebetulan tuk WP masih belon ada sob

    ReplyDelete
  10. Thanks Gan Atas Infonya,,
    Tapi sya mau ngopy kok ndak bisa ya,,
    view plainnya dman???

    ReplyDelete
  11. kok klik kanannya fak bisa,
    mau copy codenya gak bisa..
    mana panjang lagi..

    ReplyDelete
  12. kunjangan malam and happy blogging

    ReplyDelete
  13. trima kasih atas infonya gan,semoga saya bisa mempraktekkannya,,,oh ya gan,kalau sempat mampir di blog ane gan ya,mohon sarannya,,trims

    ReplyDelete
  14. Ada tidak blog demonya ...??
    Soalnya ini slide headline yach

    ReplyDelete
  15. thanks tutornya mas... lgsung ane praktekin nih

    ReplyDelete
  16. Terima kasih di atas ilmu di atas. Akan ku cuba nanti.

    ReplyDelete

Mohon diperhatikan
1. No Spam
2. No Link