PartS LED . LCD

cari artikel disini

Minggu, 28 Agustus 2011

Menampilkan posting secara selideshow pada blog

Membuat Headlines dengan Slideshow di Blogspot

Bagaimana cara menampilkan beberapa post dengan slideshow supaya lebih terlihat dan menarik perhatian pengunjung blog, Silahkan ikuti tutorial di artikel ini. 
Contoh slideshownya sebaiknya silahkan di copa sendiri

Oke, jika tertarik untuk membuatnya, silakan ikuti langkah-langkahnya dibawah 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
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="Link post">JUDUL SLIDE 1</a></h2>
<p>isi artikel slide 1</p>
<img src="LINK GAMBARR"/>
</div>
<div class="slide">
<h2><a href="http://imeldaentertainment.blogspot.com/">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://imeldaentertainment.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> href="http://imeldaentertainment.blogspot.com/" target='new'>imelda</a></span></div>
           

13. Ganti tulisan link post dengan link posting blog anda.
14. Ganti tulisan berwarna merah dengan Judul Slide anda
15. Ganti tulisan berwarna hijau dengan isi artikel slide anda
16. Ganti tulisa LINK GAMBAR dengan link image yang sudah di upload.

NOTE: Untuk mengubah warna background dan lain-lainnya bisa anda edit pada code CSS diatas selamat mencoba semoga bermanfaat

Tidak ada komentar:

Posting Komentar

Terima kasih atas komentar anda salam sahabat!!! Rudi thea

Next

Artikel yang mungkin belum Anda baca

Terbaru

Get this widget here

cartegori

Access 2013 (1) Ada Gangguan Satelit (1) air terjun (2) AIWA AKARI AKIRA (1) alam indonesia (2) alat2 rumahtangga dan listrik (4) Alternatif Channel Dari Telkom 1 (1) aneh tapi langka (1) aneh tapi nyata (3) animasi (4) Antariksa (3) antv (2) artikel ku (1) artis indonesia (1) bagai mana cara mencari kerusakan tv (41) bagian prosesor luminance (Y) (3) BEBERAPA PERSAMAAN IC VERTIKAL (2) Bencana alam (6) BERITA SUKABUMI (1) Berita-tekhnologi (36) bertia sukabumi (4) bisnis (2) bisnis online (7) Biss Key Receiver (1) bmkg (1) book speker (1) brisat (2) bunga aneh (3) bus (1) cara buang virus ponsel (1) cara membuat gemuk (1) Cara mengganti nama blog (2) CARA MERAKIT SEMATIK TV (11) cara serpis dvd (18) CARA SERPIS hP (2) cara service (12) cara service tv(elektronics) (166) cara servis monitor (10) cara setting lewat menu factory tv (13) CHINA BRAND (1) Crara Service Mode Tv (3) crt (3) CTV Polytron (6) daerah (3) dan fb (1) Dekorasi (enetrtainment) (4) digital tv (3) digitec (2) DMX Mixer 192 (1) Dunia (1) dvb (2) DVD programming (14) Excel 2013 (1) Facebook (1) facebook internet (15) facebook timeline (2) feedback destroyer (2) Frekuensi Trans 7 (2) gacun (1) garis besar bagian lemari es (1) garis besar mesin tv (7) garits video gratis audio (9) GOLDSTAR HITACHI JVC LG (3) gratis dwnload (2) html (5) IC (1) imelda (1) intel (1) internasional (8) internet mobile (10) inverter (1) jabar (55) jalan raya (1) jejaring sosial (1) kata kata ucapan selamat tidur yang romantis (3) kata mutiara (1) kecelakaan (13) kerusakan haredware komputer (43) kerusakan lcd monitor (3) KERUSAKAN software TV (8) kerusan tv dan penyebab nya (48) kilas berita (149) kode biskey (1) kode ponsel (1) kode remote. (3) kode servis (4) KODE TV (2) koneksi internet (32) kriminal (1) lampu neon (2) LED Par (1) LGSat Azura HD (1) link ku (1) Link to Twitter (1) macam macam kerusakan tv (23) manca negara (2) manfaat tumbuhan buat kesehatan (12) MENGENAL MENGUKUR KOMPONEN ELEKTRONIKA DASAR (20) menurut penalaman (2) mesum (2) mic wirles (1) Microsoft Office (1) minimax (4) mixser (1) modem (1) MODIPIKASI TV (8) nasional (82) Net TV (1) ninmedia (1) olah raga (1) OneNote 2013 (1) OPTION SETTING tv tcl (1) otomotip (1) Outlook 2013 (1) panasonic (1) PANASONIC POLYTRON (1) parabola (9) Pasang Sendiri Parabola (7) pbt (1) pemancar (2) PERKEMBANGAN ELEKTRONIC (4) persamaan ic (3) PERSAMAAN TR HORIZONTAL (1) photo bugil (1) photo edit (3) pla (1) plash message teks berjalan (1) Playstation (1) plyback (2) politik (1) polytron (10) polytron data servis (5) polytron u slim gambar melengkung. (5) poto (6) poto artis sexi (4) poto sexi (3) power (15) power splay (6) PowerPoint 2013 (1) Project 2013 (1) Publisher 2013 (1) rangkain inverter (3) raster gelap (1) reciver (1) remot control (2) remot tv (2) REMOT UNIVERSAL (1) resistor (4) resistor smd (1) sains (1) saluran tv gratis (1) SAMSUNG SANYO (1) satelit (3) satelit merah putih (1) satelit Rusia Techno (2) Satelit Telkom 3S (3) seputar entertainment (10) serba gratis.cari yg gratis. video baru. mp3.pemutar mp3. mp3 gratis. (13) Service Menu Philips (1) Service Mode LCD Monitor (2) servis lcd monitor (3) SERVIS MODE (10) setelt (2) sharp (2) SHARP SONY TCL (1) siaran tv analog (2) siaran tv digital (3) siaran tv transtv (1) siran FTA (1) skema (3) sms gratis (2) software gratis (3) sound system (15) STB DVB-T2 (1) stelit (1) subwoper (1) Sukabumi (10) susnan perangkat audio di lapangan (1) tan (1) Tanaka Lavender (1) tanaman aneh (3) tcl (4) televisi dan keluarga (7) telkom (1) Telkom Minta Maaf (1) telkom3s (1) telkom4 (1) telkomsel (1) tempat wisata alam (7) Tips Blog/webssite (51) Tips Blog/webssite/html (34) Tips pertanian (6) tips software komputer (56) tips trik elektronic (28) tips trik facebook (11) tips trik komputer (43) TOSHIBA (1) tours (1) trafo (1) Trans 7 Satelit Telkom Hilang Sinyal Ini Frekuensi Baru nya (2) Trans TV (2) trans7 (1) transtistor (5) trapo (5) tutorial blog (7) tv china (14) tv komputer (4) tv lg (4) TV MENU SERVIS KODE (15) TV SHARP Protec (2) tv tcl (1) twetter (1) Twitter (1) ucapan hari raya idul fitri (3) ucapan selamat (4) ucapan selamat hari ibu (1) ucapan selamat hari raya idul adha (1) ucapan selamat tidur buat pacar (2) ucapan selamat tidur untuk kekasih (3) ucapan tahun baru (1) ulang tahun (1) universal (1) Venus Spink Mpeg4/HD (1) video porno (1) Visio 2013 (1) Widget Check Berat Blog (2) Windows 8 (11) Wisata Baharia (3) wisata sukabumi (3) wisaya sukabumi (1) Word 2013 (1)

Entri Populer

close
PopAds.net - The Best Popunder Adnetwork