Slideshow Headline News Horizontal - Hallo sahabat Campur Aduk.Com, Pada Artikel yang anda baca kali ini dengan judul Slideshow Headline News Horizontal, kami telah mempersiapkan berita news hari ini... untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Slideshow Headline News Horizontal
link : Slideshow Headline News Horizontal

Slideshow Headline News Horizontal

1. LogIn ke akun blogger.
2. Setelah masuk dasbor, Pilih Rancangan/Design.
3. Pada menu bagian atas, Klik Edit HMTL, tepatnya berada di sebelah menu �edit elemen�.
4. Beri centang pada kotak �Expand Widget Templates�.
5. Tekan CTRL + F di keyboard, masukkan kata kunci ]]></b:skin> ke dalam kotak find.
6. Setelah ketemu, copy script kode berikut dan letakkan tepat di atas kode ]]></b:skin>.

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

Selanjutnya carilah kode </head>. Copy Script code berikut dan letakkan tepat di atas kode </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>

Kalau sudah klik simpan template dan tunggu beberapa saat sampai penyimpanan selesai. Berikutnya klik kembali menu �Rancangan�, atau dalam blog versi English �Design�. Tambahkan gadget/widget baru, gulir ke bawah dan klik tanda �+� pada HTML/JavaScript. Sekarang masukkan script kode dibawah ini ke dalam widget.

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://www.voa-junior.com/">JUDUL SLIDE 1</a></h2>
<p>iaisrtikel slide 1</p>
<img src="LINK GAMBAR"/>
</div>
<div class="slide">
<h2><a href="http:// www.voa-junior.com /">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=" LINK GAMBAR "/>
</div>
<div class="slide">
<h2><a href="http://www.lintangarta.com /">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>

Keterangan:  Ganti tulisan www.lintangarta.com dengan link url posting blog anda.

Ganti tulisan berwarna merah dengan Judul Slide anda. Ganti tulisan berwarna biru dengan isi artikel slide anda. Ganti tulisa LINK GAMBAR dengan link image yang sudah di upload.Misal di Flickr.com dan ambil linknya. Atau bisa juga upload di posting blog sendiri. Simpan, dan lihat hasilnya.

Demikianlah Artikel Slideshow Headline News Horizontal

Sekianlah artikel Slideshow Headline News Horizontal kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Slideshow Headline News Horizontal dengan alamat link https://artapictures.blogspot.com/2012/10/slideshow-headline-news-horizontal.html

Tweet