Petra nYam

Tutorial Belajar Blog | Trik Blog | Tips Blog - Sekedar Berbagi Tutorial Seputar Blogging , Trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery, untuk Conoth bisa di lihat tampilan scrensot blog ini.
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 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/AVvXsEiKHCyD9SzLdfDtH0hgrF0vmvbKIeND5PWaJ_dOq3FJVzUORBwXFwGU4dk31X5JundQDfOlJc2VMJ7KU10WfVKJH4KGx-rVRobS_YrOUP7xs0qgMzTLGyJa0_4Ko45KMJgk-yp0iTWmbqg/s1600/home.png);
}
ul#navigation .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY26ggkcfsYZ2-KHzeElXlkWyCOGDeT3ApGWF0Rj56Uz1RnFtaQB3231UVSEUF9fTrDwWRox6IEEmT4rtEyprgm0_Tu-Jxu5etExkBJJJf1_Mna8DmoadfAGhirWY63hC6nK8st067Qwk/s1600/konco.png);
}
ul#navigation .rss a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE2-Rt5Ioi1Fgx0q5Zru-oK3E_y8ArshNExygkzdI-HyqsBBdEASxMzgKf7Rio6PzSAktfFvlwt0n9mHIPf2lRh4PorBHZSONfHtnyJjXA2Nfc3erdiQBPMD7Z3pkWF8l76AV5ZAfbEB0/s1600/rss.png);
}
ul#navigation .mail a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiAo6QEpPhazkclImCksYLEh54x-q4GQzKdQi-EYd8SJQiwCGyj8IkwVUZ4jc8tmFHhcLqp2ru926F_IWqn6LB53N8OsnG1DY2s0vzKIfkSuqCz3QakLQZUWWttsAzejpZOmpuHTZBQc/s1600/mail_receive.png);
}
ul#navigation .facebook a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ePpbgSidjU5COElCI7TuJzPX2uIFTeFmSE1CCz5wOyH14224jOmrzzHefZB8lyY-lXSyhrUpYZPY_1lKtTCoVat7HKTI4bOrb1O56fXX6f9oX6pMKwDp-xmiVogdOULRiqaiqjszXBU/s1600/about.png);
}
ul#navigation .twitter a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiF1BVwCpfq6VaLygUhz440Tp1fSxTMa27dI-3JPfyJaznLDTLt7Rv8FUbQkeyBa4gEEI-Dz1VlGhf9ongi3bFPFG1ppBZIqGiyX21IVtPOB2rhQBoaDEUNcxvQCMPiTS8RXDs3KbdR1s/s1600/twitter.jpg);
}
ul#navigation .youtube a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0RJoHKqTirgAIRIe5sGJRIiH_1bQ8gUdQAb8-HO727SYs-4Rut8BntVfIx-Yj3M9ciKE2qca6QvWtz65EYaKpuPifWY6v7pHitY-fG1o663ROJYXhhYmY_cNGHz2NaV_UhyjSchZK7I0/s1600/You+Tube.png);
}
ul#navigation .googleplus a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ_OstcHIN72Aqoch_Wobxho43tAPMJ2bo4UdDeLPW-anluwiv0bQTuR82SuWRRQetaF44a9nkjEK3gUcJm5RgFvnwy1mobIw7vmk773KHLZGSj4wxfPm7_yP3JpZczhbGU3A5n9wwA7A/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0hznBZfknNyt1Kc455DGXRg3MfkhNlEAAueHET1ZTGX8nmrYBdPO1kLCMgKSQ1QLdP4DG8vs7638TlJ6evbrbswO0SUZJT-dqsPAIkQ7dyyQelvTLzSbxRK6uzsDEvrzKAQHSyupcsEk/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by 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() {
$(&#39;#navigation a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},1000);
$(&#39;#navigation &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},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>
<div class=scroll></div>
<ul id=navigation>
<li class=home><a href=blogspot.com title=Home></a></li>
<li class=about><a href=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/oktri.darmadi target=_blank title=Add Me on facebook></a></li>
<li class=twitter><a href=http://twitter.com/oktri.darmadi 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>

#Ganti link yang saya beri warna kuning dengan link kamu, Lalu klik simpan

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

Ukiran identik dengan kayu, pada trik kali ini kita akan mencoba membuat ukiran tapi tidak menggunakan pahat, palu dan kebutuhan memahat yang lain, disini kita hanya cukup menggunakan CorelDRAW sebagai alat untuk memahat dengan memanfaatkan beberapa fitur, sebagai contoh di sini kita akan memahat atau membuat efek ukiran pada kayu dan sebagai model adalah artis terkenal tempoe doeloe yaitu Marilyn Monroe;



Langkah awal siapkan dua gambar foto, yaitu Texture kayu dan foto Marilyn Monroe;

Posisikan kedua gambar saling bertumpuk, posisi foto letakkan diatas tekstur kayu dengan tekan Shift+PageUp di keyboard, posisinya kalau dilihat dari samping seperti gambar dibawah ini;

Langkah selanjutnya seleksi pada gambar Marilyn Monroe Convert ke bentuk Back and White (1-bit), Convert lagi ke bentuk RGB Color (24-bit)  dengan cara Pada Menu Bar klik Convert to Bitmaps... hasil akhir akan seperti gambar dibawah ini;

Selanjutnya pada Menu Bar > Bitmaps > 3D Effects > pilih Emboss... atur pada kotak dialog seperti dibawah ini;

Hasilnya akan seperti dibawah ini;

Selanjutnya klik Transparency tool, klik drag pada objek gambar foto Marilyn Monroe;

Di Property Bar pada kotak Transparency type pilih Uniform;

Pada Starting transparency isikan angka 75;

Sehingga hasil akhir akan seperti gambar dibawah ini;