MEMBUAT HEADLINE DENGAN SLIDESHOW

 

Hai Sobat semua kita berjumpa kembali dengan saya disini, adapun maksud perjumpaan kali ini adalah untuk memberikan ilmu hasil dari blogwalking ke penjuru google dan alhamdullih saya membawa beberapa bingkisan pemberian dari sahabat-sahabat baik kita dan tentunya tidak semua penduduk google yang baik hati ada juga segelintiran manusia yang pada pelit diproteksi halaman blognya supaya tidak di Copy Paste pengunjung tapi mungkin ada alasan -alasan tertentu bagi dia, kita sendiri tidak manyalahkannya mau di proteksi silahkan itu hak dia, baik kita tidak perlu mempersoalkannya yang penting postingan kita jalan terus nah ini code script hasil Blogwalking . . . satu saja dulu ya kita tampilkan ntar saya kasih lagi.
Cara pasangnya seperti biasa kita masuk ke Edit HTML dan sebaiknya kita download template lengkap untuk jaga-jaga selanjutnya mari kita ikuti langkah-langkah berikut ini :1. Login terlebih dahulu ke Blogger
2. Masuk ke bagian Tata Letak/Layout
3. Pilih Tab menu Edit HTML
4. Centang tulisan Expand Widget Template
5. Cari code ini ]]></b:skin> untuk memudahkan pencarian tekan Ctrl+F
6. Copy Paste code CSS dibawah ini sebelum code diatas :

#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;
}

7. Langkah selanjutnya cari code ini </head>
8. Copy Paste code berikut sebelum 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(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>


9. Simpan hasil kerja anda untuk melanjutkan langkah berikutnya
10. Langkah selanjutnya klik tab menu Elemen Laman
11. Buat klik Add a Gadget, pilih HTML/Javascript
12. Paste code dibawah ini didalamnya
<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://www.reverendum.blogspot.com/">JUDUL SLIDE 1</a></h2>
<p>iaisrtikel slide 1</p>
<img src="LINK GAMBARR"/>
</div>
<div class="slide">
<h2><a href="http://www.reverendum.blogspot.com/">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="www.reverendum.blogspot.com/">JUDUL SLIDE 3</a></h2>
<p>isi artikel slide 3</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>

13. Ganti tulisan http://www.seiparing.co.cc dengan link posting blog anda.
14. Ganti tulisan berwarna merah dengan Judul Slide anda
15. Ganti tulisan berwarna biru dengan isi artikel slide anda
16. Ganti tulisa LINK GAMBAR dengan link image yang sudah di upload. misal di Photobucket.com dan ambil linknya.
Selesai silahkan anda setting sendiri sesuaikan dengan blog anda.
MEMBUAT HEADLINE DENGAN SLIDESHOW 4.5 5 DimazRian Hai Sobat semua kita berjumpa kembali dengan saya disini, adapun maksud perjumpaan kali ini adalah untuk memberikan ilmu hasil dari blogwa...


Related Post:

  • Cara Pasang Kotak Komentar Facebook di BloggerAkhirnya artikel yang sangat ditunggu-tunggu Di Publish juga, ini adalah fitur yang paling ditunggu untuk pengguna blogger, dalam langkah-langkah sangat mudah untuk meng-integrasi kotak komentar facebook dan blogger ( blogspot) blog. Sekarang pe… Read More
  • Kenapa Blog kita tidak di index Mesin pencari?Banyak email yang menanyakan ke saya, kenapa website dan blog baru yang baru saja dibuat tidak langsung diindex oleh Google. beberapa Website yang saya buat, langsung di index oleh Google paling lama 30 menit setelah saya submit. Contohnya saja, … Read More
  • Cara Membuat Auto Blog di BlogspotCara membuat auto blog atau blog otomatis di blogspot sebenarnya mudah. Bagi blogger pemalas (seperti saya) tidak ada salahnya membuat auto blog, di mana artikel yang terposting nanti otomatis. Jadi, sambil ngorok, makan, bahkan saat anda di toile… Read More
  • 10 cewek Asia yang Paling Sering Di Cari Di BlogCewek Asia ternyata banyak dicari oleh pengguna internet. Dari sekian banyak cewek Asia tersebut, ada 10 cewek yang paling banyak dicari. Siapa saja mereka? Silakan simak di bawah ini. 1. Xin ZhangTak bisa disangkal lagi si cantik paling popu… Read More
  • Trick Google AdesnseSelamat sore agan sekalian. Ternyata banyak yang minat untuk ane ngeshare cara ane bikin akun adsense disini, sampe ada yang PM ane juga. Oh ya, sebagai catatan jangan ada yang manggil ane Master, Mastah, ato apalah, itu bukan sandangan ane, karen… Read More