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:

  • Membuat Daftar Isi Automatic pada Sidebar BerjalanKita Berjumpa kembali para pengunjung Setus ini mudah-mudah anda semuanya tidak bosan-bosannya berkunjung ketempat ini untuk mencari sekedar postingan terbaru di Blog ini, untuk memberikan yang terbaik kepada pengunjung kali ini akan saya pilihkan… Read More
  • CARA MEMBUAT GOOGLE CUSTOM SEARCHGOOGLE CUSTOM SEARCHSalam Buat Teman-teman yang berkunjung ke Blog aku kali ini aku coba posting satu hal yang mungkin berguna untuk pencarian postingan yang lawas dengan tingggal ketik kata kuncinya atau judul pustingannya atau misalnya software… Read More
  • Cara Membuat Headline PostHello sobat semua kita bertemu kembali bersama saya disini di Kadangan Kalimantan Selatan berikut ini akan berikan satu ilmu kepada anda semua hasil dari Blogwalking yang menurut saya sangat bagus kita letakkan di Blog kita seperti terlihat bagia… Read More
  • Cara Membuat Labels BerjalanMat jumpa kembali dengan kita disini saya akan memberikan sebuah artikel untuk anda semua yang ingin Labels anda berjalan tapi bukan labels saja yang dibuat berjalan tapi yang lainnya juga bisa bagaimana caranya klik Edit HTML.Klik Expand Template… Read More
  • MEMBUAT HEADLINE DENGAN SLIDESHOWHai 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 … Read More