Kode Rator

Free SMS ALL Oprator

01.20 |

Vintage Style Social Bookmark Icon

12.41 |

Vintage Style Social Bookmark Icon - Mengikuti arus globalisasi tidak harus menampilkan hal-hal yang moderen begitu juga dengan blog. Blog boleh terdepan namun tampilan jadul sah-sah saja, kali ini saya akan berbagi tentang Vintage Style Social Bookmark Icon. Social Bookmark kali ini berbeda dengan yang lain kenapa? karena model dari Social Bookmark ini bernuansa antik dan kalau dilihat-lihat bentuknya kayak perangko. Postingan kali ini saya mengambil refrensi dari spiceupyourblog, tidak sabar ingin lihat bagaimana bentuknya? klik disiniuntuk lihat demonya, atau bisa lihat penampakkannya dibawah ini.

DEMO

Langkah-langkah memasangnya dalam blog anda, anda harus mengikuti tahap-tahap berikut ini:

Langkah 1
Login ke Blogger
Masuk ke "Tata Letak - Elemen Laman"
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 2
Masukan (copypaste) kode dibawah ini pada bagian kolom:

#0b5394 <style>

a:hover {background-color: transparent;opacity:0.7;}

</style>

Untuk yang saya blog merah ganti dengan url jejaring sosial dan feedburner anda dan yang terakhir klik save.
Semoga bermanfaat selamat mencoba semoga berhasil.

Read User's Comments0

Menu Navigasi CSS3 + Icon

12.40 |

Menu Navigasi CSS3 + Icon - Pertama kalinya posting setelah dapet iklan dari IdBlogNetwork, Alhamdulillah akhirnya saya bisa juga jadi membernya padahal blog ini sangatlah sederhana dan tidak sepaadan dengan deskripsi blognya Koderator - Web Design, Tutorial dan Sumber Inspirasi kalau dilihat dari rupa blognya sendiri nama tersebut tidaklah cocok sama sekali, namun saya akan berusaha untuk mewujudkan nama tersebut jadi kenyataan, alhasil sekarang sedang memilih seketsa template untuk blog ini yang kreterianya klop dengan nama tersebut.

DEMO

Bicara tampilan memang tidak ada habisnya faktanya tutorial sekarang adalah membahas tentang tampilan blog yaitu Menu Navigasi CSS3 + Icon, sedikit gambaran menu ini hampir sama dengan Mega Menu jQuery CSS namun ada bedanya yaitu pada bentuk dan ber gambar (icon), yups icon ini membuat penjelas dan perwakilan daripada nama pada sub navigasi tersebut jika ingin melihat keindahannya (DEMO) klik disini , berhubung ngetik itu capek saatnya tutorial dimulai

Membuat Menu Navigasi CSS3 + Icon
Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Back Up template Anda untuk berjaga-jaga apabila terjadi kesalahan
Kemudian Cheklist "Expand Template Widget"
Langkah 2
Gunakan ctrl F untuk mencari kode ]]></b:skin>
setelah ketemu lalu letakkan kode dibawah ini diatasnya

/* universal rules for content inside topnav */
.topnav{width:100%;float:left;margin:2em auto;}
ul#css3menu1,ul#css3menu1 ul{margin:0;list-style:none;}
ul#css3menu1,ul#css3menu1 .submenu{ background-color:#444;border-width:1px;border-style:solid;border-color:#454545;-moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;}
ul#css3menu1 .submenu{ display:none;position:absolute;left:0;top:100%;float:left;background-color:#fff;border-width:4px;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;border-color:#cecece;padding:0 6px 6px;}
ul#css3menu1 li:hover>*{display:block;}
ul#css3menu1 li:hover{position:relative;}
ul#css3menu1 ul .submenu{position:absolute;left:100%;top:0;}
ul#css3menu1{padding:5px 5px 5px 0;display:block;font-size:0;float:left;}
ul#css3menu1 ul{padding:0 5px 5px;}
ul#css3menu1 .column{float:left;}
ul#css3menu1 li{display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{margin:0 0 0 5px;}
ul#css3menu1 ul>li{margin:5px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{outline-style:none;}
ul#css3menu1 a{display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Trebuchet MS,sans-serif;color:#181818;text-shadow:#FFF 0 1px 1px;cursor:pointer;padding:8px 18px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{float:none;margin:6px 0 0;}
ul#css3menu1 ul a{text-align:left;padding:4px;background-color:#fff;background-image:none;border-width:0 0 1px 0;border-style:solid;border-color:#EFEFEF;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:11px Trebuchet MS,sans-serif;color:#000;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li:hover>a{border-style:none;font:bold 13px Trebuchet MS,sans-serif;color:#FFF;text-decoration:none;text-shadow:#181818 0 1px 1px;}
ul#css3menu1 img{border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 img.over{display:none;}
ul#css3menu1 li:hover > a img.def{display:none;}
ul#css3menu1 li:hover > a img.over{display:inline;}
ul#css3menu1 span{display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{background-image:url(http://css3menu.com/images/modern_files/css3menu1/arrowsub.png);padding-right:20px;}
ul#css3menu1 ul li:hover>a{background-color:#fff;background-image:none;border-style:solid;border-color:#EFEFEF;font:11px Trebuchet MS,sans-serif;color:#444;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1.topmenu{background-image:url(http://css3menu.com/images/modern_files/css3menu1/mainbk.png);}
ul#css3menu1 li.topmenu>a{height:25px;line-height:25px;background-color:transpa;border-radius:11px;-moz-border-radius:11px;-webkit-border-radius:11px;}
ul#css3menu1 li.topmenu:hover>a{line-height:25px;background-color:#313638;}
/* ======================end topnav============================= */

Langkah 3
Setelah itu letakkan kode dibawah ini pada Header Blog atau pada <body> dan jika di template anda ada kode <div id='outer-wrapper'> maka letakkan pada bagian itu

<div class="topnav">
<div class="menu_templ" style="width: 612px;background-color:#5797BB;margin:0 auto;">
<ul id="css3menu1" class="topmenu" style="position: relative;top: -30px">
<li class="topmenu"><a href="#" title="HOME"><img src="http://css3menu.com/images/modern_files/css3menu1/1031.png" alt="HOME"/>HOME</a></li>
<li class="topmenu"><a href="#" title="PRODUCT INFO"><span><img src="http://css3menu.com/images/modern_files/css3menu1/005.png" alt="PRODUCT INFO"/>PRODUCT INFO</span></a>
<div class="submenu" style="width:420px;">
<div class="column" style="width:50%"><ul>
<li><a href="#" title="2.1 Features"><img src="http://css3menu.com/images/modern_files/css3menu1/138.png" alt="2.1 Features"/>2.1 Features</a></li>
<li><a href="#" title="2.2 Installation"><span><img src="http://css3menu.com/images/modern_files/css3menu1/076.png" alt="2.2 Installation"/>2.2 Installation</span></a>
<div class="submenu">
<div class="column"><ul>
<li><a href="/rq/" title="2.2.1 FAQ">2.2.1 FAQ</a></li>
<li><a href="#" title="2.2How to Setup">2.2How to Setup</a></li>
</ul></div></div>

</li>
<li><a href="#" title="2.3 Parameters Info"><img src="http://css3menu.com/images/modern_files/css3menu1/120.png" alt="2.3 Parameters Info"/>2.3 Parameters Info</a></li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#" title="2.4 Dynamic Functions"><img src="http://css3menu.com/images/modern_files/css3menu1/157.png" alt="2.4 Dynamic Functions"/>2.4 Dynamic Functions</a></li>
<li><a href="#" title="2.5 Supported Browsers"><span><img src="http://css3menu.com/images/modern_files/css3menu1/102.png" alt="2.5 Supported Browsers"/>2.5 Supported Browsers</span></a>
<div class="submenu" style="width:332px;">
<div class="column" style="width:50%"><ul>
<li><a href="#" title="Firefox"><img src="http://css3menu.com/images/modern_files/css3menu1/125.png" alt="Firefox"/>Firefox</a></li>
<li><a href="#" title="Internet Explorer"><img src="http://css3menu.com/images/modern_files/css3menu1/122.png" alt="Internet Explorer"/>Internet Explorer</a></li>
<li><a href="#" title="Opera"><img src="http://css3menu.com/images/modern_files/css3menu1/124.png" alt="Opera"/>Opera</a></li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#" title="Safari"><img src="http://css3menu.com/images/modern_files/css3menu1/1221.png" alt="Safari"/>Safari</a></li>
<li><a href="#" title="Google Chrome"><img src="http://css3menu.com/images/modern_files/css3menu1/123.png" alt="Google Chrome"/>Google Chrome</a></li>
<li><a href="#" title="Konqueror"><img src="http://css3menu.com/images/modern_files/css3menu1/1241.png" alt="Konqueror"/>Konqueror</a></li>
</ul></div></div>
</li>
<li><a href="#" title="CSS3 Info"><img src="http://css3menu.com/images/modern_files/css3menu1/044.png" alt="CSS3 Info"/>CSS3 Info</a></li>
</ul></div></div>
</li>
<li class="topmenu"><a href="#" title="SAMPLES"><span><img src="http://css3menu.com/images/modern_files/css3menu1/133.png" alt="SAMPLES"/>SAMPLES</span></a>
<div class="submenu" style="width:344px;">
<div class="column" style="width:50%"><ul>
<li><a href="#" title="Android Template"><img src="http://css3menu.com/images/modern_files/css3menu1/047.png" alt="Android Template"/>Android Template</a></li>
<li><a href="#" title="Blocks Template"><span><img src="http://css3menu.com/images/modern_files/css3menu1/045.png" alt="Blocks Template"/>Blocks Template</span></a>
<div class="submenu" style="width:374px;">
<div class="column" style="width:50%"><ul>
<li><a href="#" title="Blue Theme">Blue Theme</a></li>
<li><a href="#" title="Green Fodder Theme">Green Fodder Theme</a></li>
<li><a href="#" title="Grey Theme">Grey Theme</a></li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#" title="Light Theme">Light Theme</a></li>
<li><a href="#" title="Orange Theme">Orange Theme</a></li>
<li><a href="#" title="Purple Theme">Purple Theme</a></li>
</ul></div></div>
</li>
<li><a href="#" title="Elegant Template"><img src="http://css3menu.com/images/modern_files/css3menu1/043.png" alt="Elegant Template"/>Elegant Template</a></li>
<li><a href="#" title="Frame Template"><img src="http://css3menu.com/images/modern_files/css3menu1/046.png" alt="Frame Template"/>Frame Template</a></li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#" title="Fresh Template"><img src="http://css3menu.com/images/modern_files/css3menu1/0471.png" alt="Fresh Template"/>Fresh Template</a></li>
<li><a href="#" title="Mac Template"><img src="http://css3menu.com/images/modern_files/css3menu1/0451.png" alt="Mac Template"/>Mac Template</a></li>
<li><a href="#" title="Neon Template"><span><img src="http://css3menu.com/images/modern_files/css3menu1/0461.png" alt="Neon Template"/>Neon Template</span></a>
<div class="submenu" style="width:290px;">
<div class="column" style="width:50%"><ul>
<li><a href="#" title="Green Theme">Green Theme</a></li>
<li><a href="#" title="Liliac Theme">Liliac Theme</a></li>
<li><a href="#" title="Blue Theme">Blue Theme</a></li>
</ul></div>
<div class="column" style="width:50%"><ul>
<li><a href="#" title="Neon Theme">Neon Theme</a></li>
<li><a href="#" title="Orange Theme">Orange Theme</a></li>
</ul></div></div>
</li>
<li><a href="#" title="New Templates"><img src="http://css3menu.com/images/modern_files/css3menu1/0441.png" alt="New Templates"/>New Templates</a></li>
</ul></div></div>
</li>
<li class="topmenu"><a href="#" title="DOWNLOAD"><img src="http://css3menu.com/images/modern_files/css3menu1/017.png" alt="DOWNLOAD"/>DOWNLOAD</a></li>
</ul>
</div>
</div>

Jangan lupa untuk edit pada bagian <a href="#"
karakter # gantilah dengan link yang akan anda ditujukan
Langkah Terakhir
Klik Simpan Template

Mungkin segitu saja apabila ada yang ingin ditanyakan tanyakanlah, semoga bermanfaat selamat mencoba.

jQuery Menu Lavalamp

12.39 |

jQuery Menu Lavalamp - Sudah beberapa minggu tidak posting sangking pusing mau posting apaan, dan akhirnya saya mampir ketempat Mas Taufik Nurrohman untuk mencari inspirasi dan akhirnya ketemu juga, iseng iseng majangin aja tutorial dia disini hahaha
Memosting diwarnet mungkin akan membuat postingan ini berantakan karena script yang saya butuhkan tidak ada disini.

Lihat Demo Disini

Langkah pertama yang harus kita lakukan adalah siap mental, kemudian baca basmallah dan Backup Template
Langkah kedua cari kode ]]></b:skin> dan salin kode ini, kemudian letakkan diatasnya

#lava {
background-color:#274D5A;
background-image:-webkit-linear-gradient(top,#274D5A,#1E3B45);
background-image:-moz-linear-gradient(top,#274D5A,#1E3B45);
background-image:-ms-linear-gradient(top,#274D5A,#1E3B45);
background-image:-o-linear-gradient(top,#274D5A,#1E3B45);
background-image:linear-gradient(top,#274D5A,#1E3B45);
-webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.2),
    0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.2),
    0px 1px 2px rgba(0,0,0,0.4);
box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.2),
    0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
position:relative;
text-align:center;
height:30px;
}

#lava ul {
margin:0px 0px;
padding:0px 0px;
list-style:none;
position:absolute;
left:0px;
top:0px;
z-index:100;
}

#lava ul li {
position:relative;
float:left;
}

#lava ul li a {
display:block;
padding:0px 15px;
font:bold 11px/30px tahoma,Verdana,Arial,Sans-Serif;
text-decoration:none;
color:#70A4B2;
text-shadow:0px -1px 0px rgba(0,0,0,0.4);
}

#lava #box {
position:absolute;
left:0px;
top:0px;
z-index:50;
background-color:#1E3B45;
background-image:-webkit-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:-moz-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:-ms-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:-o-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:linear-gradient(bottom,#274D5A,#1E3B45);
}

#lava #box .head {
height:30px;
border-left:2px solid #AD1717;
}

#lava li ul {
width:170px;
height:auto;
background-color:#274D5A;
position:absolute;
top:100%;
left:0px;
z-index:77;
border-left:2px solid #AD1717;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
display:none;
}

/* CSS Fallback */
#lava li:hover ul.fallback {display:block;}

#lava li li {
float:none;
display:block;
text-align:left;
}

#lava li li a       {padding:0px 15px;}
#lava li li a:hover {background-color:#1E3B45;}

Langkah berikutnya
Setelah itu cari kode </head> kemudian letakkan kode dibawah ini diatasnya

Langkah terakhir terapkan kerangka menu ini dimana yamg anda inginkan atau bisa diletakkan di HTML/javascript

<nav id='lava'>
    <ul>
        <li><a href='#'>Beranda</a></li>
        <li><a href='#'>Profil</a></li>
        <li><a href='#'>Jurnal</a>
            <ul class='fallback'>
                <li><a href='#'>2007</a></li>
                <li><a href='#'>2008</a></li>
                <li><a href='#'>2009</a></li>
                <li><a href='#'>2010</a></li>
                <li><a href='#'>2011</a></li>
                <li><a href='#'>2012</a></li>
            </ul>
        </li>
        <li class='selected'><a href='#'>Komentar</a></li>
        <li><a href='#'>Kontak</a></li>
        <li><a href='#'>Cari</a>
            <ul class='fallback'>
                <li><a href='#'>CSS</a></li>
                <li><a href='#'>JQuery</a></li>
                <li><a href='#'>HTML</a></li>
                <li><a href='#'>JavaScript</a></li>
            </ul>
        </li>
    </ul>
</nav>

yang saya tandai merupakan berhendinya Lava, jika ingin di ganti pada Beranda maka class='selected' diletakkan pada kerangka beranda
contoh <li class='selected'><a href='#'>Beranda</a></li>

Nah mungkin ini sedikit tutorial dari saya dan terimakasih pada Mas Taufik Nurrohman.
Semoga bermanfaat, selamat mencoba dan semoga berhasil

Kode Rator

Free SMS ALL Oprator

Vintage Style Social Bookmark Icon

Menu Navigasi CSS3 + Icon

Related Post With Icon

jQuery Menu Lavalamp