Gambarnya


Demonya

• 
  
  
  
  
  • Game Zone
    
    
    
    
    • Action
    • Fantasy
    • Racing
    • Sport
  • Rooms & Suites
    
    
    
    
    • Sofware
    • Healthy
    • Special Breaks
    • News day
    • Chat Box
  • Tips & Tricks
    
    
    
    
    • Tips Blogger
    • Tips Komputer
    • Tips Menipu Orang
    • Tips Merayu Cewek
    • Tips Bercinta
    • Tips Selingkuh

Animasi menu pullup 

Menu Slide/Animation Pullup ini  menggunakan CSS3 dibuat untuk menghasilkan animasi dan transisi ketika Mouse diarahkan pada link atau gambar besar horisontal.
Gambar latar belakangnya dibagi menjadi tiga bagian gambar vertikal,Dan masing-masing gambar tersebut dibagi lagi menjadi tiga sebelum diupload dan dijadikan background. Gambar dapat shrink sebelum digantikan dengan tiga bagian gambar lainnya dan diikuti dengan menampilkan menu pullup yang dapat bergeser ke bawah di atas gambar dan berhenti membentuk kolom link. Setiap link telah dikaitkan dengan tiga gambar vertikal dengan dikombinasikan dalam satu bagian gambar besar

Langsung aja Sobat Perhatikan Kode dibawah ini

<style type="text/css">
/* ====================================
Styler : http://cuerosbhelatos.blogspot.com/
Don't Remove This Text
=====================================*/
.menuplus {width:600px; height:350px; padding:0; margin:30px; list-style:none; border-radius: 5px 5px 5px 5px;border: 4px inset red;  position:relative; z-index:100; background:#000; overflow:hidden;}
.menuplus li {float:left; height:400px;}
.menuplus ul {padding:0; margin:0; list-style:none; position:absolute; z-index:100; top:0; left:0;}
.menuplus ul ul {position:absolute; left:0; top:auto; bottom:900px; width:200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menuplus ul li.p2 ul {left:200px;}
.menuplus ul li.p3 ul {left:400px;}
.menuplus img {width:200px; height:400px; position:absolute; display:block; opacity:1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.menuplus ul li {float:left;}
.menuplus ul img {width:0; height:0; top:200px; z-index:-1;}

.menuplus img.leftPic1 {left:0; top:0; width:200px; height:400px;}
.menuplus img.midPic1 {left:200px; top:0; width:200px; height:400px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menuplus img.rightPic1 {left:400px; top:0; width:200px; height:400px;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}

.menuplus ul img.set1a {top:150px;}
.menuplus ul img.set1b {top:150px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menuplus ul img.set1c {top:150px;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}

.menuplus ul img.set2a {top:250px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menuplus ul img.set2b {top:250px;}
.menuplus ul img.set2c {top:250px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}

.menuplus ul img.set3a {top:350px;transition-delay: 0.5s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menuplus ul img.set3b {top:350px;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menuplus ul img.set3c {top:350px;}

.menuplus ul img.leftPic {left:100px;}
.menuplus ul img.midPic {left:300px;}
.menuplus ul img.rightPic {left:500px;}

.menuplus .menuInner {width:600px;}
.menuplus .menuInner li a {border-radius: 15px 15px 15px 15px;display:block; width:190px; height:30px; padding-left:10px; background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); margin-top:300px; font:bold 14px/30px Comic Sans MS, sans-serif; color:#300; text-align: center; text-decoration:none;}

.menuplus li:hover img.leftPic1 {left:100px; top:50px; height:0; width:0;}
.menuplus li:hover img.midPic1 {left:300px; top:50px; height:0; width:0}
.menuplus li:hover img.rightPic1 {left:500px; top:50px; height:0; width:0;}

.menuplus ul li:hover img.leftPic {left:0; top:0; height:400px; width:200px;}
.menuplus ul li:hover img.midPic {left:200px; top:0; height:400px; width:200px}
.menuplus ul li:hover img.rightPic {left:400px; top:0; height:400px; width:200px;}

.menuplus ul li:hover {zoom:1;}
.menuplus ul li:hover > a {background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); color:#fff;}

.menuplus ul ul li {height:25px; float:left;}
.menuplus .menuInner ul li a {height:25px; line-height:25px; font-weight:normal; color:#fff;}
.menuplus ul li:hover ul {top:auto; bottom:400px;}
</style>

<div id="info">
<ul class="menuplus">
<li class="topLi"><a href="http://alamat blog sobat"></a>
<img alt="" class="leftPic1" src="http://i1206.photobucket.com/albums/bb455/binkbenk/images.jpg" />
<img alt="" class="midPic1" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copyofimages.jpg" />
<img alt="" class="rightPic1" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy2ofimages.jpg" />

<ul class="menuInner">
<li class="p1"><a href="http://alamat blog sobat">Game Zone</a>
<img alt="" class="leftPic set1a" src="http://i1206.photobucket.com/albums/bb455/binkbenk/IMG_0582-1.jpg" />
<img alt="" class="midPic set1b" src="http://i1206.photobucket.com/albums/bb455/binkbenk/CopyofIMG_0582.jpg" />
<img alt="" class="rightPic set1c" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy2ofIMG_0582.jpg" />
<ul>
<li><a href="http://alamat blog sobat">Action</a></li>
<li><a href="http://alamat blog sobat">Fantasy</a></li>
<li><a href="http://alamat blog sobat">Racing</a></li>
<li><a href="http://alamat blog sobat">Sport</a></li>
</ul>
</li>
<li class="p2"><a href="http://alamat blog sobat">Rooms &amp; Suites</a>
<img alt="" class="leftPic set2a" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy2ofWaterlilies.jpg" />
<img alt="" class="midPic set2b" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy3ofWaterlilies.jpg" />
<img alt="" class="rightPic set2c" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy4ofWaterlilies.jpg" />
<ul>
<li><a href="http://alamat blog sobat">Sofware</a></li>
<li><a href="http://alamat blog sobat">Healthy</a></li>
<li><a href="http://alamat blog sobat">Special Breaks</a></li>
<li><a href="http://alamat blog sobat">News day</a></li>
<li><a href="http://alamat blog sobat">Chat Box</a></li>
</ul>
</li>
<li class="p3"><a href="http://alamat blog sobat">Tips &amp; Tricks</a>
<img alt="" class="leftPic set3a" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Manga-Girl-Mysterious-Black-1-1.jpg" />
<img alt="" class="midPic set3b" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copyofth_Manga-Girl-Mysterious-Black-1.jpg" />
<img alt="" class="rightPic set3c" src="http://i1206.photobucket.com/albums/bb455/binkbenk/Copy2ofth_Manga-Girl-Mysterious-Black-1.jpg" />
<ul>
<li><a href="http://alamat blog sobat">Tips Blogger</a></li>
<li><a href="http://alamat blog sobat">Tips Komputer</a></li>
<li><a href="http://alamat blog sobat">Tips Menipu Orang</a></li>
<li><a href="http://alamat blog sobat">Tips Merayu Cewek</a></li>
<li><a href="http://alamat blog sobat">Tips Bercinta</a></li>
<li><a href="http://alamat blog sobat">Tips Selingkuh</a></li>
</ul></li></ul></li></ul></div>

Mau Menu seperti ini

• Login ke Blog Sobat
• Masuk Rancangan Pilih Ad Gadget HTML/Java script
• Copy Kode Diatas
• Rubah Nama Menu- menunya dan alamat URLnya Pada Warna Biru Juga Gambar Backgroundnya Pada Kode warna kuning
• Selanjutnya Klik Simpan dan Taruh Gadget tadi dibagian footer atau diatas body blog Sobat
• Catatan tidak semua Template Bisa dipasang Menu ini

Selamat mencoba semoga bermanfaat

Nara sumber ;  http://caprt3a.blogspot.com

✔ Design Blogazine Template

Pada dasarnya tampilan, kulit (skin) template pada blogspot ada 3 (tiga) tampilan. Yatu tampilan Homepage (Beranda), Pagesearch (search Label,Halaman) dan Posting Area (post entry). Lalu bagaimana agar tiap-tiap tampilan (Home, Page, Post) tersebut bisa berbeda?

Caranya dengan menambahkan CSS atau juga HTML untuk skin pada masing-masing tampilan (Home, Page, Post). lalu bagaimana memisahkan Tampilan-tampilannya tersebut agar template tidak rusak atau tampilannya acak-acakan?

Dengan menggunakan tag kondisional (pemutus/pemanggil) itulah solusi yang tepat untuk, karena apabila hanya menggunakan CSS (pakai perintah css "display:none;) untuk memisahkannya maka masih akan terlihat, terbaca dan terloading didalam View Sourcenya, tentunya blog akan terasa sedikit berat, karena harus membaca style/css, javascript atau juga html yang tak seharusnya tampil.

Dibawah ini contoh singkat menggunakan/menerapkan tag kondisional (pemutus/pemanggil) pada template blogspot.

<!DOCTYPE HTML>
<html>
<head>

* Tag Kondisional untuk tampilan Layout Homepage (Beranda):
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<--/* CSS HOME/BERANDA */-->
<style>
Style layout Css HomePage(Beranda)
</style>
</b:if>

* Tag Kondisional untuk tampilan Page (Halaman):
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<--/* CSS PAGE/HALAMAN */-->
<style>
Style layout Css Pagesearch (Halaman)
</style>
</b:if>
</b:if>

* Tag Kondisional untuk tampilan Post (posting):
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<--/*CSS ENTRY/POSTING/-->
<style>
Style layout Css PostEntry (posting)
</style>
</b:if>

</head>
<body>

* Tag Kondisional untuk tampilan Layout Homepage (Beranda):
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<--/* HTML HOME/BERANDA */-->
<div='bla-bla'>
HTML HOMEPAGE DISINI
</div>
<b:else/> /* TAG PEMENGGAL */


* Tag Kondisional untuk tampilan Page (Halaman):
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<--/* HTML PAGE/HALAMAN */-->
<div='bla-bla'>
HTML PAGE DISINI
</div>
</b:if>
</b:if>

* Tag Kondisional untuk tampilan Post (posting):
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<--/* HTML ENTRY/POSTING */-->
<div='bla-bla'>
HTML POST DISINI
</div>
</b:if>
</b:if>
</body>
</html>

Di sini profil saya (PROFIL) dan lihat masing-masing sourcenya (CTRL+U) yang tampil.

Sekian dulu sobat tips sederhana Design Blogazine Template,, untuk lebih jelasnya silahkan sobat coba lakukan eksperimen sendiri, karena sesuatu itu takkan berhasil kalau kita tidak pernah mencobanya, maaf kalau masih banyak kekurangan dan juga kesalahan.

Semoga Bermanfaat...!!!