Mau Ganti Icon Blog Kamu. . . . . . .Langsung Tnya aja Ke tukang posting INI
dx Oy BecandA bhe Langsung Ja Klik Di Sini
Good Luck. . . *_*
-
Go green...
-
hmm, its golden colour...
-
Holy colour, yes it white...
-
The Brave Colour is Red only, i think...
-
I Think blue is calm colour...
Tampilkan postingan dengan label Trik/Tips Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Trik/Tips Blog. Tampilkan semua postingan
Senin, 26 November 2012
Tempat download Icon Blogger
Mau Ganti Icon Blog Kamu. . . . . . .Langsung Tnya aja Ke tukang posting INI
dx Oy BecandA bhe Langsung Ja Klik Di Sini
Good Luck. . . *_*
Jumat, 16 November 2012
Membuat Galeri Foto
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash4/419084_304575459650322_70918912_n.jpg" target="_blank">
<img border="0" height="150" src="http://sphotos-h.ak.fbcdn.net/hphotos-ak-ash3/47242_304575189650349_139361499_n.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/307947_304575356316999_2050934463_n.jpg" target="_blank">
<img border="0" height="150" src="http://sphotos-e.ak.fbcdn.net/hphotos-ak-prn1/75189_304575549650313_1778427959_n.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash3/557631_296270457149513_1512560663_n.jpg" target="_blank">
<img border="0" height="150" src="http://sphotos-d.ak.fbcdn.net/hphotos-ak-prn1/560954_277783805664845_798666250_n.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/564626_277783705664855_499040424_n.jpg" target="_blank">
<img border="0" height="150" src="http://sphotos-g.ak.fbcdn.net/hphotos-ak-prn1/556657_277783635664862_1155832461_n.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://sphotos-g.ak.fbcdn.net/hphotos-ak-snc6/247366_379082985500698_877720756_n.jpg" target="_blank">
<img border="0" height="150" src="http://photos-c.ak.fbcdn.net/hphotos-ak-snc7/421667_194781777298382_1054434501_a.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://sphotos-e.ak.fbcdn.net/hphotos-ak-prn1/557255_483783108320349_2135755878_n.jpg" target="_blank">
<img border="0" height="150" src="http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/487455_483793791652614_2096675471_n.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://sphotos-a.ak.fbcdn.net/hphotos-ak-snc7/581483_483782844987042_1128828751_n.jpg" target="_blank">
<img border="0" height="150" src="http://sphotos-d.ak.fbcdn.net/hphotos-ak-ash4/384995_483787068319953_2133307613_n.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>
1. buka di blog anda. -> Dasbor->post
2. Pada saat mau memposting ubah Compose Menjadi HTML
3. copy kode di atas
4. yang berwarna merah bisa di ganti dengan alamat foto yang anda inginkan
5. dan simpan
GooD Luck
Kamis, 18 Oktober 2012
CHATTING ANTAR BLOG
NICK ISI NAMA ANDA DAN PASWORD ISI SETERAH
ISI ROOM DENGAN SMAN_ULTRA
labgsung saja: 1. copy kode di bwah ini ke dedged
2. saat memilih dedged, pilih yang paling bawah
3. selesai
code:
ISI ROOM DENGAN SMAN_ULTRA
2. saat memilih dedged, pilih yang paling bawah
3. selesai
code:
<!-- Begin Everywherechat Room Code -->
<a id="ewclink" href="http://www.everywherechat.com/">EveryWhereChat Free Flash Chatrooms</a>
<br />
<script src="http://www.everywherechat.com/e.php?defaultRoom=SMAN&roomList=true&fontSize=12&width=450&height=300&theme=night"></script>
<!-- End Everywherechat Room Code -->
<a id="ewclink" href="http://www.everywherechat.com/">EveryWhereChat Free Flash Chatrooms</a>
<br />
<script src="http://www.everywherechat.com/e.php?defaultRoom=SMAN&roomList=true&fontSize=12&width=450&height=300&theme=night"></script>
<!-- End Everywherechat Room Code -->
<fb:swf width='760' height='460'
swfsrc='http://www.everywherechat.com/everywherechat.swf?defaultRoom=SMAN&roomList=true&fontSize=12&width=450&height=300&theme=night'
imgsrc='http://www.everywherechat.com/images/flash_play.png' />
Cara Membuat Kotak Chat Di Halaman Blog
.Cheattert -
Salah satu cara untuk menambah pasilitas blog sobat bisa dengan cara
membuat kotak chat di blog anda seperti chat pada facebook, Ok langsung
simak aja tutorial berikut
1.langkah pertama yang harus dilakukan adalah kunjungi website http://envolve.com ,karena website
inilah yang akan memberi kita script.ini adalah tampilan dari alamat url diatas
2.setelah itu pilih pricing,lalu klik sign up for free
3.isi data yang di minta pada form dengan menulis data seperti : alamat blog , judul blog , email , first name, nick name dan password email anda.
4. Akan ada dua kode, pilih kode kedua. Setelah di copy masuk ke Dasbor-Rancangan-Edit HTML, jangan lupa klik pada expand widget template cari kode </head> dengan mengklik F3 biar lebih mudah. Setelah mendapat kode tadi, pastekan kodenya tepat di atas kode </head> tadi, setelah itu disimpan.maka akan muncul tampilan seperti berikut :
1.langkah pertama yang harus dilakukan adalah kunjungi website http://envolve.com ,karena website
inilah yang akan memberi kita script.ini adalah tampilan dari alamat url diatas
2.setelah itu pilih pricing,lalu klik sign up for free
3.isi data yang di minta pada form dengan menulis data seperti : alamat blog , judul blog , email , first name, nick name dan password email anda.
4. Akan ada dua kode, pilih kode kedua. Setelah di copy masuk ke Dasbor-Rancangan-Edit HTML, jangan lupa klik pada expand widget template cari kode </head> dengan mengklik F3 biar lebih mudah. Setelah mendapat kode tadi, pastekan kodenya tepat di atas kode </head> tadi, setelah itu disimpan.maka akan muncul tampilan seperti berikut :
-= Selamat mencoba =-
Kamis, 11 Oktober 2012
Mengganti icon blogger
1. Pilih gambar yang akan anda masukkan dengan ukuran yang saya sebutkan diatas
2. Silakan upload gambarnya diphotobucket.com, jika belum terdaftar di photobucket.com silakan register disini
3.Setelah login silakan upload gambarnya di menu Upload File & Video dengan pilih tombol choose file
4.Setelah selesai upload akan muncul gambar anda dan ambil kode URL gambar anda seperti contoh kode URL image saya
http://i1327.photobucket.com/albums/u668/abdullah267/Computer-repair3_zps6c226d0e.jpg
5.Untuk memasukkan ke blog anda silakan kembali ke Dasboard blogger anda,silakan ke menu Layout->Edit HTML->jangan lupa klik Expand Widget kemudian temukan kode berikut
</head>
6. Setelah itu letakkan kode dibawah ini sebelum kode diatas
<link href='http://i1327.photobucket.com/albums/u668/abdullah267/Computer-repair3_zps6c226d0e.jpg' rel='SHORTCUT ICON'/>
silakan ganti kode yang berwarna merah dengan URL gambar yang anda dapatkan di photobucket.com tadi
7.Kemudian Save Setting,,Selesai,,
Silakan lihat blog anda apakah iconnya sudah berubah dengan ganbar anda,,Semoga berhasil!!!
Membuat Tulisan Berjalan di Tab Browser
.
Hmmm... Udah tau kan yang dimaksud
tulisan berjalan di tab browser? Tab browser? Itu lhoo. tulisan yang biasanya
berjalan di atas blog . . Yang dimaksud browser sendiri itu contohnya Mozilla
Firefox, Internet Explorer, Chrome, Safari, dan masih banyak lagi.
Caranya :::
1.
Sign in ke blog teman-teman
2.
Klik Rancangan
3.
Klik Edit Html
4.
Centang Expand Widget Templates
5.
Jangan lupa di download template kamu. Kalau nggak di copy paste dulu template
kamu ke Notepad.
Kodenya
Kodenya
<script
language='JavaScript'> var txt=" :
: Welcome to Abdullah blog :: Follow Me Please :: Feel free to drop your
comment here : : τнänκ чöü ";
var kecepatan=80;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
*tulisan warna
biru bisa diganti dengan kata-kata kalian.
6. Paste kode tersebut di atas kode <b:skin><
check this on:
saya menggunakan tampilan blogger yang lama
1. Masuk ke dashboard blogger, Klik rancangan, pilih Edit HTML
2. Cari kode ]]></b:skin> lalu letakkan atau paste kode berikut di atas kode ]]></b:skin> tadi
4. Klik Elemen Laman, Tambah Gadget > HTML/Javascript > lalu masukkan kode berikut:
Edit:
Ganti teks berwarna Hijau dengan link yang mau dijadikan menu
Ganti Teks berwarna Biru dengan Nama Menu sobat
5. Klik simpan, Lalu lihat hasilnya :D
keyword: cara membuat menu vertikal keren pada blog, cara membuat accordion menu di blog, cara membuat menu vertikal keren dengan efek transisi, cara membuat accordion menu dengan css3, trik css blogger
lihat gambar ini:
check this on:
saya menggunakan tampilan blogger yang lama
1. Masuk ke dashboard blogger, Klik rancangan, pilih Edit HTML
2. Cari kode ]]></b:skin> lalu letakkan atau paste kode berikut di atas kode ]]></b:skin> tadi
.navbox {position:relative;float:left;}ul.nav {list-style:none;display:block;width:220px;position:relative;padding:0px 0 0px 0;-webkit-background-size: 50% 100%;-moz-background-size: 50% 100%;}li {margin: 10px 0 0 50px;}ul.nav li a { font-family:Arial,Helvetica,Sans-serif;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;-webkit-transition:all 0.3s ease-out;-moz-transition: all 0.3s ease-out;background:#ffc000 ;color:#1e1e1e;padding:3px 15px 3px 15px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:0px;width:150px;display:block;text-decoration:none;-webkit-box-shadow:4px 2px 0px #1e1e1e;-moz-box-shadow:4px 2px 0px #1e1e1e;}ul.nav li a:hover {background:#1e1e1e;color:#fff;padding: 3px 15px 3px 30px;}3. Simpan Template
4. Klik Elemen Laman, Tambah Gadget > HTML/Javascript > lalu masukkan kode berikut:
<div class="navbox">
<ul class="nav">
<li><a href="http://andi-techno.blogspot.com/">Accordion Menu</a></li>
<li><a href="YOURLINK">Menu1</a></li>
<li><a href="YOURLINK">Menu2</a></li>
<li><a href="YOURLINK">Menu3</a></li>
<li><a href="YOURLINK">Menu4</a></li>
</ul>
</div>
Edit:
Ganti teks berwarna Hijau dengan link yang mau dijadikan menu
Ganti Teks berwarna Biru dengan Nama Menu sobat
5. Klik simpan, Lalu lihat hasilnya :D
keyword: cara membuat menu vertikal keren pada blog, cara membuat accordion menu di blog, cara membuat menu vertikal keren dengan efek transisi, cara membuat accordion menu dengan css3, trik css blogger
Membuat Tab View / Multi Tab di Blog
Membuat Tab View / Multi Tab di Blog - Bagi kamu yang mempunyai pertanyaan 'bagaimana cara menyatukan 3 widget atau lebih menjadi satu?' disini Abdullah akan membahas cara membuatnya, sebenarnya namanya adalah Tab View, dengan membuat tab view kita dapat menghemat banyak ruang pada sidebar kita karena beberapa widget dapat kita satukan pada tab view, buat kamu yang masih bingung apa dan bagaimana itu Tab View silahkan lihat contohnya: Klik Disini nah
lihat disana saya menyatukan widget 'recent post' 'entri populer' dan
juga 'label' menjadi satu. Oke, langsung aja yuk sob belajar cara membuat tab view / multi tab di blog.
- kode berwarna hijau untuk mengatur tinggi dan lebar tab view
- kode berwarna orange ganti dengan judul tabview (contoh: recent, arsip, label)
- kode berwarna biru ganti dengan widget yang mau diisi di tabview (contoh: gambar, link blogroll, script, dll)
5. Klik simpan lalu lihat hasilnya
baca juga artikel berikut: Membuat Judul Artikel dengan Efek Glow Keren
1. Masuk ke Dashboard blogger (saat artikel ini dibuat saya masih menggunakan tampilan blogger lama / lawas) , klik rancangan, klik edit HTML.
2. Cari kode ]]></b:skin> dengan bantuan CTRL+F, kemudian letakkan / copas kode berikut dibawah kode ]]></b:skin> tadi
- 84 untuk mengatur lebar menu utama atas
- 24 untuk mengatur tinggi menu utama atas
- 999999 adalah kode warna border pada menu atas
- 1E62B6 adalah kode warna font menu utama atas
- FFFFFF adalah kode warna background menu utama atas
- 999999 adalah kode warna border kotak utama
- FFFFFF adalah kode warna background kotak utama
3. cari kode </head>, lalu letakkan kode berikut ini sebelum kode </head> tadi
Keterangan:2. Cari kode ]]></b:skin> dengan bantuan CTRL+F, kemudian letakkan / copas kode berikut dibawah kode ]]></b:skin> tadi
div.TabView div.Tabs{height: 24px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 84px; text-align: center;height: 24px;keterangan, kamu bisa mengatur desainnya dengan memperhatikan kode berikut:
padding-top: 3px;vertical-align: middle;border: 1px solid #999999;
border-bottom-width: 0;text-decoration: none;font-family: "Times New Roman", Serif;
font-weight: 900;color: #1E62B6;
}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #FFFFFF;
}div.TabView div.Pages{clear: both;border: 1px solid #999999;
overflow: hidden;background-color: #FFFFFF; }div.TabView div.Pages div.Page{height: 100%;padding: 0px;overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}
- 84 untuk mengatur lebar menu utama atas
- 24 untuk mengatur tinggi menu utama atas
- 999999 adalah kode warna border pada menu atas
- 1E62B6 adalah kode warna font menu utama atas
- FFFFFF adalah kode warna background menu utama atas
- 999999 adalah kode warna border kotak utama
- FFFFFF adalah kode warna background kotak utama
3. cari kode </head>, lalu letakkan kode berikut ini sebelum kode </head> tadi
<script type='text/javascript'>function tabview_aux(TabViewId, id){var TabView = document.getElementById(TabViewId);4. Klik simpan template, lalu kembali ke page element / edit tata letak, klik add gadget atau tambah gadget lalu pilih HTML / Javascript, kemudian masukkan kode berikut didalamnya:
// ----- Tabs -----
var Tabs = TabView.firstChild;while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;var i = 0;
do{if (Tab.tagName == "A"){i++;Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className = (i == id) ? "Active" : "";Tab.blur();}}while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;var i = 0;
do{if (Page.className == 'Page'){i++;if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";Page.style.overflow = "auto";Page.style.display = (i == id) ? 'block' : 'none';}}while (Page = Page.nextSibling);}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }</script>
<form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 230px;"><a>Menu 1</a><a>Menu 2</a><a>Menu 3</a></div><div class="Pages" style="width: 240px; height: 265px;">
<div class="Page"><div class="Pad">Menu 1.1 <br />Menu 1.2 <br />Menu 1.3 <br /></div></div>
<div class="Page"><div class="Pad">Menu 2.1 <br />Menu 2.2 <br />Menu 2.3 <br /></div></div>
<div class="Page"><div class="Pad">Menu 3.1 <br />Menu 3.2 <br />Menu 3.3 <br /></div></div>
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
- kode berwarna hijau untuk mengatur tinggi dan lebar tab view
- kode berwarna orange ganti dengan judul tabview (contoh: recent, arsip, label)
- kode berwarna biru ganti dengan widget yang mau diisi di tabview (contoh: gambar, link blogroll, script, dll)
5. Klik simpan lalu lihat hasilnya
baca juga artikel berikut: Membuat Judul Artikel dengan Efek Glow Keren
keyword: cara membuat
tab view di blog, membuat multi tab di blog, membuat kolom tab di blog,
membuat tab menu di blog, membuat tab di blog, menyatukan beberapa
widget menjadi satu, trik menghemat ruang di blog
Membuat Menu Sidebar Melayang dengan Efek Jquery Keren
Membuat Menu Sidebar Melayang dengan Efek Jquery Keren -
Pada saat tutorial ini dibuat saya menggunakan tampilan blogger lama / lawas, jadi bagi sobat blogger yang menggunakan tampilan blogger baru tinggal menyesuaikan ya :)
Membuat Menu Sidebar Melayang dengan Efek Jquery Keren
1. Masuk ke dashboard blogger > Klik Rancangan Template > Klik Edit HTML
2. Cari Kode ]]></b:skin> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode ]]></b:skin>
3. Cari kode </body> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode </body> tadi
4. Klik Simpan Template
5. Selanjutnya klik Rancangan lagi, tepatnya pada Elemen Laman, Tambah Widget / Gadget Baru, pilih HTML / JavaScript, lalu masukkan kode berikut:
Selesai, sekarang buka blog kamu dan lihat hasilnya, Menu Sidebar dengan Efek Jquery Keren sudah ada diblogmu :)
keyword: cara membuat menu sidebar dengan efek jquery keren, cara membuat menu jquery, membuat menu css, cara membuat sidebar jquery, membuat sidebar css, menu sidebar melayang jquery, menu sidebar melayang css, cara membuat menu sidebar melyang dengan efek jquery keren
Hai sobat, sebelumnya Abdullah telah membuat Trik Blogger berjudul Cara Membuat Gambar pada Artikel Blog Bergetar, nah pada Trik Blogger kali ini saya ingin berbagi Trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery yang Keren. Untuk contoh Menu Sidebar Melayang Jquery yang saya maksud ini bisa dilihat di link ini: http://id-web.16mb.com/jsider . Nah keren kan sob? Ayo pasang diblog kalian :)
Pada saat tutorial ini dibuat saya menggunakan tampilan blogger lama / lawas, jadi bagi sobat blogger yang menggunakan tampilan blogger baru tinggal menyesuaikan ya :)
Membuat Menu Sidebar Melayang dengan Efek Jquery Keren
1. Masuk ke dashboard blogger > Klik Rancangan Template > Klik Edit HTML
2. Cari Kode ]]></b:skin> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode ]]></b:skin>
/* Starts Menu Sideabr Jquery melayang by andi-techno.blogspot.com Starts*/
ul#navigation {
position:fixed;
margin: 0px;
padding: 0px;
top: 55px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 50px;
background-color: #ffffff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixHOvT2x-wtCT4P711S4vki9BREOz70u9oMswmtm3L-zSaiacIimKY8no8Cw5OPO1K9QUETZ6L1zgpsLi_OpC9iL6mE5YvsxKf7a0-5PSIX_wBYYhf8t74VAbP9K2D5Q3quu6DWIOMzYU/s1600/home.png);
}
ul#navigation .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqyIvD0GvVbclrdX3PmuDFiT5zjfgSRWau9UHGhTBIZy1vUZsHwgkRfuEarVB7Jd0uKALBdoPEnvRovTf-y_bNJwRUVdNb0_ztVb3ovVd4gGyYSIWG0CNEi92LqQNRSXYLUu2kpc0HPaE/s1600/konco.png);
}
ul#navigation .rss a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0NmcGmNxeI_QdbrWmvqm4WZgyUDUNOsS-i2VcaDs5ftR16E53hRccpmSMvlvF25FMw2HmPAcM2gpgQMOjHd2CBZW5etF6EJJ2bunXP3p2RlUF1Kb5L_bYx9yPEgYUDz2vGel_E6iElbs/s1600/rss.png);
}
ul#navigation .mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCbtdRORcYN7AJi5OaxRNNMdVriXUG6IvCI-UbUKOo8E4S0nePzio19JhImrLoYoWiDkOzIW9yrH_HWL5PJSA_4spY0Uer1Er_2QGL4RuKn08DKrhzvcClE5vtmUMvWxIQfR4T9ntr3A/s1600/mail_receive.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWoAC10VSiXe0NPzyPCtOs18eBy8HdNQz-OoyYomys3iZUaWFt5cViUXtqERdc5-vAlRgrKelDEcyzrZcvv17xA7ocH4Rs45xuATvcOZo35v4UfUoEGOglOaawSSZKz4btj6-fkJcXA8/s1600/about.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCeHhV5kRO2wqtjN7DQzb-p1NdX8kitqlQjkhrm7jTzUQ_xKD5bD41_i7bFT2jxgOlg2NIAVHQKNM3RvWmTNW1mAXDGXGY1MFtz7ES8bImxMdcFmsbr3Y-igRgs05MwRzunOKZK3guZuw/s1600/twitter.jpg);
}
ul#navigation .youtube a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSU7CigspY3nlK9tE4j5X8HXhoTbPg2eABsWuCe0BAbevQsA2vsxU6D_4EElEvKCr7CUR13vMQKpMZFPw6XoR6xX0gQoHkNl7AVaD-yxwrM4ezZyaLrgk0SCQ4FGg9j10keQz6y964zCc/s1600/You+Tube.png);
}
ul#navigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOO_yzQPOvqegnlyRczqfmO4G-z2cWnMAeQTBnW5NCw3kEcSYbmV1_ikZKGv3oyyoorYY3ONURNNo4ROt5S2eckwjPY3Ree1IYe3IM1sBCn5EvI9qg_IaI2IQP9rrXLRyEATJXpHOfOt0/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ2RV7GbPa7xOkHASgPRS8dU8LVEth2dps8uqdH22a7_uNR_oqQv8o33YGMC_bh3Kp-UOgw7POnoubYIpzK0ZYcIVdNNw1m_14VSfqzVEsv49Rxpv_NZ-s0cXmbW_1R4t6cnXXZszSOV8/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by andi-techno.blogspot.com End*/
3. Cari kode </body> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode </body> tadi
<script src='http://x-gen.googlecode.com/files/x-gen-jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
4. Klik Simpan Template
5. Selanjutnya klik Rancangan lagi, tepatnya pada Elemen Laman, Tambah Widget / Gadget Baru, pilih HTML / JavaScript, lalu masukkan kode berikut:
<div class='header'></div>#Ganti link yang saya beri warna kuning dengan link kamu, Lalu klik simpan
<div class='scroll'></div>
<ul id='navigation'>
<li class='home'><a href='http://andi-techno.blogspot.com/' title='Home'></a></li>
<li class='about'><a href='http://andi-techno.blogspot.com' target='_blank' title='About us'></a></li>
<li class='rss '><a href='http://feeds.feedburner.com/' target='_blank' title='Rss feed'></a></li>
<li class='mail'><a href='http://mail.google.com' target='_blank' title='Contact Me'></a></li>
<li class='facebook'><a href='http://fb.com/andi.techno' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/Andi_Xgen' target='_blank' title='Follow us on twitter'></a></li>
<li class='youtube '><a href='http://youtube.com/' target='_blank' title='Follow Me on Youtube'></a></li>
<li class='googleplus '><a href='https://gplus.to/xgen' target='_blank' title='Follow Me on google plus'></a></li>
<li class='yahoo'><a href='http://yahoo.com/' target='_blank' title='YM With Me'></a></li>
</ul>
Selesai, sekarang buka blog kamu dan lihat hasilnya, Menu Sidebar dengan Efek Jquery Keren sudah ada diblogmu :)
keyword: cara membuat menu sidebar dengan efek jquery keren, cara membuat menu jquery, membuat menu css, cara membuat sidebar jquery, membuat sidebar css, menu sidebar melayang jquery, menu sidebar melayang css, cara membuat menu sidebar melyang dengan efek jquery keren
