Cara membuat widget menu navigasi bar 3D melayang di blog

Widget menu navigasi bar 3D adalah salah satu widget yang loadingnya cepat dan dikembangkan pada html dan css tanpa javascript. Widget ini termasuk salah satu widget terbaik untuk para blogger.

 

View Demo

Menu navigasi ini memiliki efek 3D ketika Anda mengarahkan kursor mouse ke menu, maka submenu akan muncul seperti buku dan terlihat seperti melayang itulah salahsatu alasan kenapa di beri nama widget menu navigasi bar 3D melayang. Menu navigasi ini dibuat dalam html dan murni menggunakan css dan tidak pernah menggunakan javascript untuk memberikan efek 3D.

Kualitas Menu Navigasi ini diantaranya:

• Loading yang cepat

• Berbasis html dan css.

• Tidak menggunakan Javascript.

• Sangat mengagumkan dan menarik.

Ini adalah salah satu menu navigasi profesional dengan warna biru dan mungkin Anda belum melihat menu navigasi seperti yang indah dan atraktif yang pernah ada sebelumnya. Penulis telah memberikan link demo dari menu ini di mana Anda dapat melihatnya betapa indah dan terkesan profesional. 

Multi submenu   

Navigasi menu 3D ini memiliki multi-submenu. Ketika Anda mengarahkan kursor mouse ke menu ini maka akan nampak 3 kotak submenu dan tidak hanya satu saja. Silahkan di edit sesuai dengan kebutuhan blog anda. Dan Anda memiliki kendali penuh atas menu navigasi 3D ini. Jadi silahkan ikuti tutorial untuk menginstal widget menu navigasi bar 3D ini ke blog Anda...:)  

Cara menambahkannya di blog

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML

 

• Kemudian cari tag/kode ]]></b:skin> tekan Ctrl + F untuk memudahkan proses pencarian
• Setelah ketemu letakan kode berikut tepat diatas kode 
  ]]></b:skin> 

.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069; background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); border-radius:8px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; } .menuHolder ul.nav li {display:inline-block; display:inline;} .menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .menuHolder ul.nav li {float:left; display:block; padding:0 4px;} .menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;} .menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;} .menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;} .menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .menuHolder ul.nav div.left {left:auto; right:4px;} .menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div ul.colLeft {margin-left:10px;} .menuHolder ul.nav div ul.colRight {margin-right:10px;} .menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;} .menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;} .menuHolder ul.nav div ul li:last-child {border:0;} .menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;} .menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;} .menuHolder ul.nav div.col1 {width:160px;} .menuHolder ul.nav div.col2 {width:310px;} .menuHolder ul.nav div.col3 {width:460px;} .menuHolder ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }

• Simpan template...

Langkah selanjutnya:

• Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

 

• Kemudian kopi dan Pastekan kode di bawah ini didalamnya

<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
    <li><a class="top-a" href="http://www.avdhootblogger.com"><b>Blogging</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">tips dan triks blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">blog tutorial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">Jquery javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
</ul>
<ul class="col">
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/Tips%20SEO">tips seo</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">jejaring sosial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/ajax">ajax</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
<li><a href="#url">ajax</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>spiritual</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">babad</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">wawasan spiritual</a></li>
<li><a href="#url">spiritual</a></li>
<li><a href="#url">suluk</a></li>
<li><a href="#url">sejarah</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_1213.html">contact us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/about-us.html">about us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">tukar link</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_15.html">site info</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="http://jalu-pangna.blogspot.com/p/privacy-policy-for-sijalupangna.html"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>lain-lain</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">tips dan triks blog</a></li>
<li><a href="#url">blog tutorial</a></li>
<li><a href="#url">css</a></li>
<li><a href="#url">jquery javasript</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">widget</a></li>
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->

• Simpan Gadget... Selesai.

KET:

Kode yang di sorot warna biru adalah Link/URL, Silahkan anda ganti dengan Link/URL anda. Kode yang di sorot warna orange adalah menu dan sub menu, silahkan anda ganti sesuai dengan keinginan anda

HAPPY BLOGGING..! 

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 00.30

Membuat widget popular post CSS3 dengan efek hover

Hai Sobat blogger..Kita tahu bahwa betapa pentingnya sebuah widget populer posts. Karena meengindikasikan bahwa postingan mana yang paling populer di blog . Umumnya ketika pembaca menyukai sebuah postingan, mereka sering mengunjungi postingan itu. Di popular post widget bawaan (default) blogger kita tidak bisa mengubahnya tetapi dengan menggunakan CSS3 kita dapat dengan mudah memanipulasi widget default tersebut. Akan tetapi widget popular post ini sedikit berbeda, dengan menggunakan isi warna dan efek hover.  

Para bloggger yang ingin tetap menjaga kecepatan loading blog, mereka dapat menggunakan widget ini. Karena widget popular post ini hanya menampilkan link populer post dengan warna serta efek hover. Anda dapat mengubah warnanya sesuai yang anda inginkan. Menggunakan terlalu banyak gambar juga bisa memberatkan kecepatan loading blog anda. Jadi menggunakan widget ini akan menjadi suatu keputusan yang bijak menurut saya. Saya berharap Anda dan pengunjung blog Anda akan menyukainya. 

Jadi silahkan ikuti tutorial untuk menginstal widget popular post ini ke blog Anda...:) 

CARA MENAMBAHKANNYA DI BLOG

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu

• Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post  

Catatan: Hapus tanda Thumbnail gambar dan snippet (cuplikan). Karena kita hanya akan menampilkan link popular posts sehingga kita tidak perlu gambar dan intro (pengenalan) teks.

 

• Simpan gadget..
• Selanjutnya masuk lagi ke akun blogger anda
• Kemudian cari tag/kode ]]></b:skin> 
• Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin>   

/*CSS Popular Posts by http://jalu-pangna.blogspot.com*/
#PopularPosts1{
border: 0px solid #000000; /*Main Border Color */
margin: 0;
}
#PopularPosts1 ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#PopularPosts1 a{
display: block;
margin: 0;
padding: 3px 5px 3px 5px;
text-decoration: none;
color: #ffffff;
background-color: #005C91;
width:300px;
border-bottom: 1px solid #90bade;
border-left: 5px solid #1958b7;
border-right: 5px solid #1958b7;
list-style-type:none;
}
#PopularPosts1 a:hover {
background-color: #04BDFA;
border-left-color: #1c64d1; /*Left border color On Hover*/
border-right-color: #1c64d1; /*Right border color On Hover*/
} 

• Simpan template, Selesai..

 KUSTOMISASI

• Kode # 005C91 untuk mengubah warna latar belakang widget popular post
• Kode 300px untuk mengubah lebar widget 
• Kode # 04BDFA untuk mengubah warna hover widget popular post
• Kode # 1c64d1 untuk mengubah warna kiri dan kanan border

HAPPY BLOGGING.. 

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 03.09

Cara membuat widget populer post dengan sudut bundar menggunakan CSS3

Dalam tutorial kali ini saya akan menjelaskan ke anda bagaimana cara membuat widget populer post dengan sudut bundar menggunakan CSS3. Widget ini berfungsi dengan baik disetiap browser yang anda gunakan. Widget ini menggunakan CSS3 untuk memberikan efek sudut bundar pada setiap postingan populer blog anda. Silahkan ikuti langkah-langkahnya dibawah ini untuk menambahkannya di blog anda, berharap anda menyukainya...:)  
Demonya bisa anda lihat pada gambar diatas.. 

Bagaimana cara menambahkannya di blog?

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML

• Kemudian cari tag/kode ]]></b:skin> 
• Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin> 

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;} 

• Simpan template...
• Selanjutnya masuk lagi ke akun blogger anda
• Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post

• Sekarang konfigurasikan/setting entri populer anda seperti gambar di bawah ini:

 

Jangan centang pada cuplikan/snippet seperti gambar diatas, setingan jumlah postingan bisa anda atur sendiri

• Simpan gadget, selesai..

Semoga bermanfa'at...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 13.30