Berbagi Informasi Bisnis, Berita, Tips & Trik, dll: Elements

Single level dropdown menu - blogger

Single leve; dropdown menu ala dynamic view blogger templates adalah sebuah menu horizontal dengan animasi saat membuka dan menutup yang disertai animasi putar pada arrow up/down yang terletak di menu title. Animasi pada membuka dan menutupnya anak menu dan arrow up/down dibuat menggunakan css3 transition dan css3 transform. Animasi single level dropdown ala menu template tampilan dinamis akan bekerja secara sempurna di browser yang sudah support terhadap css3. Mozilla Firefox merupakan browser yang paling sempurna menampilkan fungsi animasi single level dropdown menu ini.

D E M O

Cara membuat

Login ke Blogger
Halaman Dasbor/Dasboard
Template
Edit HTML.
Lakukan proses "Cadangkan/Pulihkan" atau "Backup/Restore" templates untuk berjaga-jaga dari kemungkinan yang tak di harapkan.
Klik "Edit HTML".
Template › Edit HTML
- Klik "Lanjutkan/Proceed".
- Buat elemen baru di bawah header blog untuk menempatkan single level dropdown menu. Caranya bisa anda buka melalui link di bawah ini:
  Cara membuat elemen baru untuk dropdown menu
- Setelah selesai membuat elemen baru, lanjutkan klik "Tata Letak/Layout".
- Klik Tambah Gadget/Add a Gdget pada elemen baru yang terdapat di atas elemen/box "posting blog".
- Cari dan klik gadget HTML/Javascript, kemudian copy dan pastekan kode CSS dan xHTML dalam "box HTML/Javascript".
- Klik "SIMPAN/SAVE".
Buka blog dan lihat hasilnya.

Keterangan :

Ganti setiap URL dengan alamat/URL yang sesuai dengan setiap menu terpasang.
Anda dapat menambahkan menu baru, baik di menu utama ataupun anak menu.

Kode CSS

<style type="text/css">
#myGRtabmenu ul,#myGRtabmenu ul li,#myGRtabmenu ul li a{
      padding:0;
      margin:0;
      list-style-type:none;
}
#myGRtabmenu{
      height:30px;
      position:relative;
      background:rgba(0,0,0,.8);
      text-align:left;
      line-height:30px;
      box-shadow:0 2px 2px #999;
      margin:0;
      font-family:Arial, sans-serif;
}
#myGRtabmenu span{
      position:relative;
      display:block;
      width:150px;
      float:left;
}
#myGRtabmenu span a{
      font-size:16px;
      padding:0 10px;
      text-decoration:none;
      color:#ddd;
}
#myGRtabmenu span:after{
      position:absolute;
      display:block;
      content:"";
      width:1px;
      background:#aaa;
      height:20px;
      top:5px;
      right:0;
}
#myGRtabmenu span:before{
      position:absolute;
      display:block;
      content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS9ECEzaMS8bwTWbF0hY95Efbr7b7W1qCk4bP2l7voV1QwgQukyUNyWbhgJJwwnS0g_ZhjIS6q2iTMElPzcvCr3UQo9ztMigzKaFIcfgDksulimST2j7YQt1QArEYfgEs-a5Vgn-vMjd4/);
      color:#fff;
      top:14px; /* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */
      right:5px;
      transition:0.4s;
      -o-transition:0.4s;
      -ms-transition:0.4s;
      -moz-transition:0.4s;
      -webkit-transition:0.4s;
}
#myGRtabmenu span:hover:before{
      transform:rotate(180deg);
      -o-transform:rotate(180deg);
      -ms-transform:rotate(180deg);
      -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      top:12px; 
}
#myGRtabmenu span ul{
      position:absolute;
      left:0; /* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */
      top:31px;
      text-align:left;
      float:left;
      width:150px;
      max-height:0px;
      overflow:hidden;
      transition:0.6s ease-in 0.2s;
      -o-transition:0.6s ease-in 0.2s;
      -ms-transition:0.6s ease-in 0.2s;
      -moz-transition:0.6s ease-in 0.2s;
      -webkit-transition:0.6s ease-in 0.2s;
      background:rgba(0,0,0,.6);
}
#myGRtabmenu span:hover ul{
      z-index:999;
      max-height:600px;
      background:rgba(0,0,0,.6);
}
#myGRtabmenu span:hover ul, #myGRtabmenu ul li, #myGRtabmenu span a, #myGRtabmenu span a:visited,#myGRtabmenu ul li a{
      transition:1.0s;
      -o-transition:1.0s;
      -ms-transition:1.0s;
      -moz-transition:1.0s;
      -webkit-transition:1.0s;
}
#myGRtabmenu ul li{
      display:block;
      width:140px;
      overflow:hidden;
      border-bottom:1px dotted rgba(0,0,0,.1);
      line-height:18px;
      padding:5px;
}
#myGRtabmenu ul li:hover{
      background:rgba(0,0,0,.6);
}
#myGRtabmenu ul li a{
      font-size:14px;
      color:#eee;
      display:block;
      font-family:Arial, sans-serif;
      font-weight:normal;
      text-decoration:none;
}
#myGRtabmenu span a:visited{
      color:#999; /* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */
}
#myGRtabmenu ul li a:visited{
      color:#ddd;
}
#myGRtabmenu span a:hover{
      text-decoration:none;
}
#myGRtabmenu span a:hover,#myGRtabmenu ul li a:hover{
      color:#fff;
      text-decoration:underline;
}
</style>

xHTML

<div id="myGRtabmenu"><span><a href="#">My Blog</a>
<ul>
    <li><a href="http://gubhugreyot.blogspot.com">gubhugreyot</a></li>
    <li><a href="http://bgsgr.blogspot.com">css3 Tutorial & Demo</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-1.blogspot.com">Demo Tutorial-1</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-2.blogspot.com">Demo Tutorial-2</a></li>
    <li><a href="http://lightbox-demo-tutorial.blogspot.com">Lightbox for Blogger</a></li>
    <li><a href="http://tantytm.blogspot.com">Modifikasi Blog</a></li>
    <li><a href="http://gubhugreyot.blogdetik.com">gubhugreyot-blogdetik</a></li>
    <li><a href="http://bloggerstuars.blogspot.com">Bloggerstars1</a></li>
    <li><a href="http://gitosimin.blogspot.com">Mas Gitosamin</a></li>
    <li><a href="http://bestbloggerhack.blogspot.com">Best Blogger Hacks</a></li>
    <li><a href="http://css3-tutorial-demo.blogspot.com/">Tutorial css3, Demo Tips & Trick</a></li>
</ul></span>
<span><a href="#">Seni &amp; Budaya</a>
<ul>
    <li><a href="http://gubhugreyot.blogspot.com">Kuda Lumping</a></li>
    <li><a href="http://bgsgr.blogspot.com">Reyog Ponorogo</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-1.blogspot.com">Tari Seudati</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-2.blogspot.com">Barongsai</a></li>
    <li><a href="http://lightbox-demo-tutorial.blogspot.com">Tari Tor Tor</a></li>
    <li><a href="http://tantytm.blogspot.com">Tari Pendet</a></li>
    <li><a href="http://gubhugreyot.blogdetik.com">Wayang Orang</a></li>
    <li><a href="http://bloggerstuars.blogspot.com">Kethoprak</a></li>
    <li><a href="http://gitosimin.blogspot.com">Ludruk</a></li>
    <li><a href="http://bestbloggerhack.blogspot.com">Wayang Kulit</a></li>
</ul></span>
<span><a href="http://bestbloggermenus.blogspot.com">Home</a></span>
<span><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></span>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu WAGE, August, 18, 2012

» Happy Blogging - gubhugreyot «

18.48 | 0 komentar | Read More

.GRnewHeader .widget h2.title, .GRnewHeader .widget h2{
font-size:14px;
text-transform:uppercase;
font-weight:600;
margin:10px;
}
.GRnewHeader .widget{
padding:10px;
font-size:12px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 1%, rgba(153,151,151,0.1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
background: linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a999797',GradientType=0 );
margin:5px;
}

#header{
float:right;
width:50%;
margin:0;
padding:0;
}
#GR_headerRight{
float: right;
width: 25%;
margin:0;
padding:0;
}
#GR_headerLeft{
float: left;
width: 25%;
margin:0;
padding:0;
}

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
<b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='CSS3 Blogger Tutorial (Header)' type='Header'/>
</b:section>
<div style='clear:both;'/>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

<b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
<b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
.......
.......
<div style='clear:both;'/>

Berbagi Informasi Bisnis, Berita, Tips & Trik, dll

Single level dropdown menu ala Dynamic View Blogger Templates

Cara membuat

Keterangan :

Kode CSS

xHTML

Membuat Header Blog dengan 3 Elemen

Kode CSS-1:

Kode CSS-2:

xHTML

Adsense Black Magic

Label

Popular Posts Today