Kali ini Blog Gado Gado akan menampilkan artikel berjudul Menu Keren Dengan Icon, Snipping Dan jQuery Untuk Blogger. Dengan artikel Menu Keren Dengan Icon, Snipping Dan jQuery Untuk Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Menu Keren Dengan Icon, Snipping Dan jQuery Untuk Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Menu Keren Dengan Icon, Snipping Dan jQuery Untuk Blogger selengkapnya:
Menu Keren Dengan Icon, Snipping Dan jQuery Untuk Blogger - D-Copy Blog | Hai sobat blogger kali ini kita akan membahas menu yang menggunakan icon, snipping gambar dan jQuery yang sangat keren yang bisa Anda gunakan untuk menu Anda tentunya. Pada menu-menu sebelumnya yang telah kami berikan kepada Anda, yaitu : Menu Dropdown v1 dan v2, Menu Dropdown Melayang v1 dan v2, Menu Elegan, Menu Bar dan Menu Vertikal Sidebar yang kami pilih untuk Anda nikmati.(Download Dahulu Lalu Upload Untuk Mendapatkan URL)
Langkah :
- Buka akun Blogger Anda
- Masuk ke menu edit HTML, jangan lupa centang Expand Template Widget
- Cari kode dibawah ini :
]]></s:kin>4. Pastekan kode dibawah ini, diatas pada kode diatas :.menu{
width:800px;
height:52px;
position:relative;
top:200px;
left:100px;
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
.item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.link{
left:2px;
top:2px;
position:absolute;
width:48px;
height:48px;
}
.icon_home{
background:transparent url(URL Icon HOME yang telah Anda Upload) no-repeat top left;
}
.icon_mail{
background:transparent url(URL Icon MAIL yang telah Anda Upload) no-repeat top left;
}
.icon_help{
background:transparent url(URL HELP HOME yang telah Anda Upload) no-repeat top left;
}
.icon_find{
background:transparent url(URL Icon FIND yang telah Anda Upload) no-repeat top left;
}
.icon_photos{
background:transparent url(URL Icon PHOTOS yang telah Anda Upload) no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
background:transparent;
display:none;
}
.item_content h2{
color:#aaa;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}
.item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content p {
background-color:transparent;
display:none;
}
.item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}
5. Cari kode dibawah ini :</head>6. Pastekan kode dibawah ini, diatas pada kode diatas :$('.item').hover(
function(){
var $this = $(this);
expand($this);
},
function(){
var $this = $(this);
collapse($this);
}
);
function expand($elem){
var angle = 0;
var t = setInterval(function () {
if(angle == 1440){
clearInterval(t);
return;
}
angle += 40;
$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
},10);
$elem.stop().animate({width:'268px'}, 1000)
.find('.item_content').fadeIn(400,function(){
$(this).find('p').stop(true,true).fadeIn(600);
});
}
function collapse($elem){
var angle = 1440;
var t = setInterval(function () {
if(angle == 0){
clearInterval(t);
return;
}
angle -= 40;
$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
},10);
$elem.stop().animate({width:'52px'}, 1000)
.find('.item_content').stop(true,true).fadeOut()
.find('p').stop(true,true).fadeOut();
}Catatan : Untuk peletakkan menu ini, Anda bisa membuatnya dimana saja yang Anda suka. Anda bisa membuat didalam widget HMTL atau didalam HTML Template Anda dengan mencari kode ini masing-masing :
- <header id='header-wrapper'>
Untuk diatas header
- <div id='content-wrapper'>
Untuk dibawah header7. Pastekan kode dibawah ini, pada penempatan yang telah Anda inginkan :<div class="menu">
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Contact us</h2>
<p>
<a href="#">eMail</a>
<a href="#">Twitter</a>
<a href="#">Facebook</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Help</h2>
<p>
<a href="#">FAQ</a>
<a href="#">Live Support</a>
<a href="#">Tickets</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Search</h2>
<p>
<input type="text"></input>
<a href="">Go</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Image Gallery</h2>
<p>
<a href="#">Categories</a>
<a href="#">Archives</a>
<a href="#">Featured</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Start from here</h2>
<p>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Pricing</a>
</p>
</div>
</div>
</div>Keterangan :
- Ganti HTML diatas sesuai dengan yang Anda inginkan.
Catatan :
- Menu ini disarankan untuk bagi yang sudah mengerti dalam HTML.
8. Save template Anda.Terima kasih, semoga bermanfaat.
Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Menu Keren Dengan Icon, Snipping Dan jQuery Untuk Blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.
0 komentar:
Posting Komentar