Cara membuat Slide di Blog

Kastaone - Rabu, 24 November 2010 - 02.11.00 wita

Pada kesempatan kali ini saya akan mencoba berbagi dengan anda yaitu cara membuat "Slide" di Blog, Demonya disini


Tapi saat ini saya akan memberikan hasil modifikasi alias main coba-coba saya yang hasilnya bisa  anda lihat pada bawah header blog saya ini, dan pada prinsipnya tidak harus di bawah Header, dengan kata lain dimana saja bisa anda taruh sesuai selera masing-masing atau ditempat strategis biar kelihatan manis dipandang mata.


Okey kalau anda tertarik untuk memasangnya dan biar jangan menoton kita langsung saja ke tujuan sambil praktek tentunya, caranya :






  • Seperti biasa masuk dulu ke Blogger dengan ID anda.

  • Setelah di Dasbor rancangan, Klik Edit HTML.

  • Download dulu template untu jaga – jaga kalau ada kesalahan.

  • Beri tanda centang pada tulisan Expand Widget Template

  • Cari code ini ]]></b:skin> (untuk memudahkan pencarian tekan Ctrl+F)

  • Copy-Paste code CSS dibawah ini diatas code  ]]></b:skin> 




#slider {


background:;


height: 230px;


text-align:center;


overflow: hidden;


position: relative;


margin: -5px 0px;


}





#mover {


width: 600;


position:absolute;


overflow:hidden;


}





.slide {


padding: 5px 0px;


width: 1000px;


float: left;


position: relative;


height:230px;


}





.slide h2 {


font-family:Georgia, Helvetica, Sans-Serif;


font-size: 20px;


font-weight:bold;


text-align:left;


color: #FFFF00;


padding:0px 0px 0px 0px;


margin:0px 0px;


width:500px;


overflow:hidden;


}





.slide h2 a:link, .slide h2 a:visited {


color:#FFFF00;


background-color: transparent;


}





.slide h2 a:hover {


color: #FFFFFF;


background-color: transparent;


}





span.slmet {


color: #ee0909;


font-size: 12px;


font-family:Tahoma, georgia, Helvetica, Sans-Serif;


line-height: 30px;


width: 200px;


padding:0px 0px 0px 30px;


margin:0px 0px;


text-transform:uppercase;


}





.slide p {


color: #FFFFFF;


font-size: 14px;


text-align:left;


font-family: Georgia, Helvetica, Sans-Serif;


line-height: 20px;


width: 470px;


padding:0px 0px 0px 0px;


margin:0px 0px;


}





.slide img {


position:absolute;


top: 50px;


left: 0px;


background:;


padding:0px 0px;


}





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


}






  • Langkah selanjutnya cari code ini  </head>

  • Copy-Paste code CSS dibawah ini 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(" sfhover\b"), "");




}




}




}




if (window.attachEvent) window.attachEvent("onload", sfHover);




//--><!]]></script>














  • Simpan template anda

  • Kembali ke Dasbor dan Klik Tambah Gadget

  • Pilih tanda tambah pada – HTML/JavaScript

  • Copy-Paste Kode Script berikut kedalamnya



<table border="0" width="500" height="30" padding-top:35px;padding-left:1px;>
<tr>
<td align+"left">
<span class="Apple-style-span" style="font-size:16px; font-weight:normal; color:#0000FF;" ><b><blink>ARTIKEL UNGGULAN</blink></b></span>
</td></tr><tr><td>
<div style="width:500px;height:130px;padding-top:5px;padding-left:1px; border:0px solid #369">
<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://tips-blogbego.blogspot.com/2010/11/spoiler-membuat-loading-blog-lebih.html">Spoiler membuat Loading Blog lebih Ringan</a></h2>
<p> </p> &nbsp; <p> </p> &nbsp;
<p> </p> &nbsp; <p> </p> &nbsp;

<p>Pada kesempatan ini saya akan mencoba berbagi tentang cara memperkecil tempat, yang secara tak langsung juga bisa memperingan muatan atau beban Blog kita pada saat loading &raquo;&raquo;</p>
<a href="http://blogclicker.com/?username=alambali" target="_blank">
<img src="http://blogclicker.com/banners/bc468x60.gif" border="0" /></a>
</div>
</div>
<!-- /Mover -->
<!-- /Slider -->
<div class="clear"/>
</div></div></div></div></td></tr></table>



Keterangan :


Contoh diatas hanya satu slide, tugas anda menambahkan sesuai kebutuhan,


Judul ARTIKEL UNGGULAN diatas silahkan ganti, mungkin ARTIKEL TERBARU dll sesuai seninya anda  atau anda ingin menghilangkan silahkan.


caranya :





  1. Lihat Kode script <div class="slide"> …….sampai……. </div>  ini menunjukkan satu kesatuan slide. Copy-paste sesuai kebutuhan.

  2. Lihat kode script <h2> ………</h2>  ini link artikel anda yang akan menjadi Judul tiap Slide.

  3. Lihat kode script <p>………..</p>  ini isi singkat dari Artikel  

  4. Banner Animasi yang saya pakai ukurannya (468x60px).

  5. Simpan Gadget terus lihat hasilnya, dan jangan lupa berikan komentar anda untuk memotivasi saya, terima kasih










Berbagi Artikel :

Cara membuat Slide di Blog
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Cara membuat Slide di Blog
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

5 Komentar pada : “Cara membuat Slide di Blog”

  1. Tipsnya keren sob..tapi bikin slide kaya gini malah bikin berat blog aja deh kaya na..hehe

    sekarang script untuk Memasang Emotion atau Smile di blogger sudah di UPDATE. Silakan mencobanya. Thx

    Photoshop TutorialTips BlogHitsuke

    BalasHapus
  2. trim kawan kunjungan baliknya :)

    BalasHapus
  3. Sangatt bermanfaat kang triknya.. lam kenal aja nihh..

    BalasHapus
  4. trims untuk kawanku akhatam commentnya, lam kenal kembali

    BalasHapus
  5. mantab bro..........
    tutorialnyaa OK banget...
    ane coba di blogger ane...

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan




BANNER [300x250]
© 2013 - BC INFO | Powered by Blogger
Design Template by : Blogger Edan