Cara Membuat slide show Gambar di blog Dengan Efek Fade

Wah setelah Sekian lama Saya cari tata cara Membuat gambar dengan Slide Show efek Fade pada blog Akhirnya Ketemu Juga, Postingan Kali ini saya Akan menshare sedikit cara Membuat Slideshow Gambar/Foto Diblog, Ya.. Walaupun banyak sih Cara Lain yang lebih menarik dan tampilan yang lebih Dinamis.

Sebelumnya Siapkan Dulu Foto/Gambar yang akan dijadikan Foto Slidenya, Atau Kunjungi http://www.picasaweb.com dan kemudian silahkan Upload Foto Anda yang akan dijadikan Slide show dengan Format Jpg, Png. sesuai dengan Ukuran yang diinginkan.

Setelah  itu Masuklah ke akun Blogger > Tata Letak > Add Gadget > Kemudian Copykan Script dibawah :


<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script><script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script><script type="text/javascript">$(document).ready(function() { $('#content-slider').cycle({ fx: 'fade' }); }); </script><style type="text/css">#content-slider { position: relative; width: 100%; height: 250px; overflow: hidden; margin:0 auto; } #content-slider img { display: block; width: 100%; height: 250px; } </style><div id="content-slider"><img src="URL Gambar 1" /><img src="URL Gambar 2" /><img src="URL Gambar 3" /></div>

Note : UntukTulisan URL Gambar 1,2,3 Silahkan Kamu Ganti dengan URL Gambar Yang Telah DiUpload Tadi,

kemudian Terakhir Save. dan lihat hasilnya.

Continue

Cara Membuat Buku Tamu Buka Tutup Pada Blog

Caranya adalah sebagai berikut:

1. Login ke akun Blogger Anda

2. Klik Tata Letak

3.Add Gadget/tambah Gadget

4.Pilih HTML/Java Script

5 Copy Paste kode/script dibawah ini

6.ubah kode tilisan Letakan disini Script buku tamu andadengan script buku tamu anda.

7.simpan

<div title="header=[:: Isi Buku Tamu Dengan Sopan ::] body=[:: Click Here to Buku Tamu::]"><style type="text/css">.gb_fixed{ position:fixed; top:10px; right:0px; z-index:+10; } * html .gb_fixed {position:relative;} #hidden_gb2 { display:none; border:2px solid #004831; background:#000000; padding:10px; padding-top:0px; } </style><div class="gb_fixed"><table id="hidden_gb2" cellpadding="0" cellspacing="0"><tr><td><center>Letakan disini Script buku tamu anda </center><div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:white">[TUTUP ]</b></a></div></td></tr></table></div><script src=" http://yourjavascript.com/28923216920/Database.js "></script><div style="z-index:+5" class="gb_fixed"><a href="javascript:void(0)" onclick="gb_showHideGB()"><img border="0" style="border:0px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPdP24lDuLdOJAcP5PTl1gsmZbDEux83K7Om4R8By79ZCaayrkaW3meJCUORku1zos0Wcr9K2F2OGsiU87I3jUHx6Wd1pwv7RcIh-fuDKh8JRwmMaNGKbQH9BRG4SYPH-wa9WT3bnUgTM/s758/tabs2.gif" /></a></div></div>

Continue

Membuat Tulisan Readmore dengan BackGround warna

Buka Blogger dan Loggin
Kemudian Template > Edit HTML
Copykan Kode  dibawah Ini tepat di atas Kode ]]></b:skin>


.jump-link a{ -moz-border-radius:5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; padding:2px 12px; font-style: italic; border:1px solid #b7b7b6; margin:10px 0px; text-decoration:none; color:#000; background:#ccc; text-align:right; float:right; } .jump-link a:hover{ border:1px solid #545353; color:#fff; background:#797878; }


Kemudian Save, dan lihat hasilnya....!!

Continue

Cara Membuat Screen Saver Pada Blog dengan Foto sendiri

Ikuti Langkah berikut :

Masuk ke Dasbor Blogger Anda

Klik Tata Letak

Tambah Gadget

Pilih HTML/Java Script

Setelah itu silakan Copy kode berikut ini dan Pastekan didalam HTML/Java Script :

<script type="text/javascript" src="http://yourjavascript.com/45712822215/screen_saver_tj.js"></script> <style type='text/css'> div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(URL Foto Kalian) no-repeat center center fixed black; } div#energysaving p span {display:none;visibility:hidden;} </style>

Klik Simpan dan lihat hasilnya diblog Anda.

^^Ganti "URL Foto kalian" Dengan URL Foto anda^^

Continue

Cara Mengubah Nama Posting Lama dan Baru dengan Gambar

1. Login ke blogger kalian, bisa klik disini
2. Pilih Template>> klik Edit HTML
3. Centang Expand Template Widget

Mengubah tulisan newer post atau posting baru, cari kode dengan menekan CTRL+F (untuk mempermudah dalam pencarian kode) masukan kode <data:newerPageTitle/> ke kotak cari, kalau sudah ketemu ganti dengan kode di bawah ini

<img src='URL Gambar Anda'/>

5. Mengubah tulisan older post atau posting lama, cari kode dengan menekan CTRL+F (untuk mempermudah dalam pencarian kode) masukan kode <data:olderPageTitle/> ke kotak cari, kalau sudah ketemu ganti dengan kode di bawah ini

<img src='URL Gambar Anda'/>

6. Mengubah tulisan home atau beranda, cari kode dengan menekan CTRL+F (untuk mempermudah dalam pencarian kode) masukan kode <data:homeMsg/> ke kotak cari, kalau sudah ketemu ganti dengan kode di bawah ini

<img src='URL Gambar Anda'/>

Kemudian terakhir Simpan Template

Continue

Membuat Title Berjalan Pada Blog

1. login blogger

2. Template -> edit HTML

3. lalu cari kode dibawah ini

<title><data:blog.pageTitle/></title>

4. lalu ganti kode diatas dengan kode dibawah ini

<b:include data='blog' name='all-head-content'/><script language='JavaScript'>var txt="<data:blog.pageTitle/>"; var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

5. simpan dan lihat hasilnya

NT: Untuk angka 100 diisi dengan angka terserah anda. itu merupaka kecepatan dari Title tersebut

Continue

Cara Membuat Menu Horizontal Dropdown di Blog

  

Apa menu horisontal dropdown itu? Menu adalah sebuah navigasi yang memudahkan pengunjung blog untuk menjelajahi elemen-elemen yang ada di blog kita. Horisontal artinya berjajar ke samping, sedangkan dropdown artinya turun. Jadi kalau digabungkan, menu horisontal dropdown artinya navigasi berjajar di blog yang jika di tunjuk atau diklik akan keluar sederetan menu yang turun ke bawah.

Berikut ini cara membuatnya :

1. Masuk blogger > Template > edit html > centang expand template widget

Cari kode ]]></b:skin> kemudian pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;} #NavbarMenuleft{width:700px; float:left; margin:0; padding:0;} #search{width:240px; font-size:11px; float:right; margin:0; padding:0;} #nav{margin:0; padding:0;} #nav ul{float:left; list-style:none; margin:0; padding:0;} #nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;} #nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;} #nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;} #nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;} #nav li{float:left; padding:0;} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;} #nav li ul a{width:140px;} #nav li ul ul{margin:-24px 0 0 170px;} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;} #nav li:hover, #nav li.sfhover{position:static;} #searchbox{padding:0; margin:0;} #search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;} #search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;} #top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} .topleft {width: 304px; float: left; margin: 0; padding:0;} .topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;} .topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

Setelah Ketemu Kemudian Save.

2. Setelah Itu Masuk Ke Tata Letak > Tambah Gadget > Masukan Script Dibawah Ini.

Ini Scriptnya :

<div id='outer'><div id='navbarmenu'><div id='navbarmenuleft'><ul id='nav'><li><a href='#'>Menu 1</a></li><li><a href='#'>Menu 2</a></li><li><a href='#'>Menu 3</a></li><li><a href='#'>Menu 4</a></li><li><a href='#'>Menu 5</a><ul><li><a href='#'>menu 5.1</a></li><li><a href='#'>menu 5.2</a></li><li><a href='#'>menu 5.3</a></li><li><a href='#'>menu 5.4</a></li></ul></li></ul></div></div></div>

Kemudian Simpan, Finish dan lihat Hasilnya...!

Continue