MEMBUAT WIDGET SLIDE MENU DROP DOWN.
MEMBUAT WIDGET SLIDE MENU DROP DOWN.
Nah kali ini saya akan sharing kembali trik widget ini agar lebih banyak blogger yang tau dan mencobanya, karena penggunaan widget ini sangat ringan dan mudah konfigurasinya. jika ingin membaca langsung dari website aslinya bisa membuka cara buat slide menu drop down
Seperti pemasangan Widget pada umumnya terdapat 3 langkah utama, yaitu membuat Struktur
Tampilan dan isi.. ga susah kok, kamu cukup mengcopy kode kode di bawah ini :
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang ( Expand Widget Template )
4. Cari kode </head> dan simpan code di bawah ini di atas code </head>
<style type='text/css'>
/*widget Fitur slide-menu-drop-down by noer Ceo http://www.carabuatwebgratis.com */
ul.slide-menu-drop-down{
list-style:none;
position:absolute;
right:30px;
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
line-height: 1.5em;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UXUqNIHVQzp58kMtlcEkm7lz04atzAIy3P47I7nEf-yifBcbYj3gL-4rAXFD8wBaI5tMEuHnbvVUomKaq9WfvJ9XEvtTipbkcbTjUuGctoynFZvR_nvn2um2K9XFiWd0L3Y18IkihKLY/s1000/background-image.jpg) no-repeat top left;
background-repeat:no-repeat;
cursor:pointer;
border:2px solid #ddd;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
-moz-box-shadow:1px 3px 15px #555;
-webkit-box-shadow:1px 3px 15px #555;
box-shadow:1px 3px 15px #555;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
z-index:99999;
}
ul.slide-menu-drop-down li{
float:right;
width:55px;
height:55px;
margin:10px;
display:block;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#000;
background-repeat:no-repeat;
background-position:center center;
position:relative;
overflow:hidden;
cursor:pointer;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 3px 15px #555;
-webkit-box-shadow:1px 3px 15px #555;
box-shadow:1px 3px 15px #555;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
ul.slide-menu-drop-down li:hover{
float:right;
width:300px;
height:250px;
display:block;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#fff;
position:relative;
overflow:hidden;
cursor:pointer;
-moz-box-shadow:1px 3px 15px #555;
-webkit-box-shadow:1px 3px 15px #555;
box-shadow:1px 3px 15px #555;
}
ul.slide-menu-drop-down li .judul{
background-color:#fff;
padding:10px;
margin-top:300px;
margin-left:55px;
opacity:0.9;
text-transform:uppercase;
font-style:normal;
font-weight:bold;
font-size:14px;
color:#444;
text-align:center;
text-shadow:-1px -1px 1px #ccc;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
ul.slide-menu-drop-down li:hover .judul{
background-color:#52C941;
padding:10px;
margin-top:5px;
margin-left:55px;
}
.sub-menu{
text-align:right;
font-size:10px;
font-family: Cambria, serif;
font-weight:bold;
line-height: 1em;
width:280px;
height:100%;
padding:5px 10px 10px;
margin:10px 0px 40px;
background-color:#fff;
-moz-box-shadow:1px 3px 15px #aaa;
-webkit-box-shadow:1px 3px 15px #aaa;
box-shadow:1px 3px 15px #aaa;
opacity:0.7;
}
.sub-menu p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#333;
text-decoration:none;
font-size:10px;
font-family: Cambria, serif;
line-height: 1em;
}
.sub-menu p a:hover{color:#347D29;}
</style>
5. Simpan code di bawah ini dibawah code di atas </style> yang berwarna biru
<style type='text/css'>
/*widget Fitur slide-menu-drop-down by noer Ceo http://www.carabuatwebgratis.com */
ul.slide-menu-drop-down li.bg-icon1{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUec27e35HY_r2sj36gaf8C3EW3FIuUGc08Fvjv2twnwLPw_BubqN5AQoe7WRIk-AoyMiu-PBSlHByr58JBX3ZdmpZpON-lm6fdf7k3xfA5DkIfzFCN67pShbUkWG3eKrWd4D928I9PoG/s104/photos.png) no-repeat;
}
ul.slide-menu-drop-down li.bg-icon2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmKe9dlmw-AZT_daLEaKQFaBSangXMxsD_U1rJqvqagyC1HpF1MLZLlILZY6JDPkqNVAoTt9MAJtl54_MepsA-5cgx6nad2DuNMXpoXSxslvsR-GMy7JbXXA5hd0Xn0oH05a5yTLD7XajT/s104/find.png) no-repeat;
}
ul.slide-menu-drop-down li.bg-icon3{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_7RBdUlVJ9lAhRoP5G8aHBPgOgWsaAKPkMUM3A9vwKH8xKqu9W5gvdonLXLrkr1us97Sx-_FLOw_cCMP8Pe1VJAxr-aE0oMKiFG-WapcOvqWvsbHO2mnjyV-NCy0co_IcPVg18lhcIuJ/s104/mail.png) no-repeat;
}
ul.slide-menu-drop-down li.bg-icon4{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoUZMIqmT_ZzmfQYybrmv2nZCUbD1-AbZ6vI-kRDNuy8S7KbsQk04Savv78bowzZW6VpSi9mHIV6R1agDBcyHC8nhFV0_6qdnS21ZOEdraGtL4omS_7ZZvl0U07b6A5q2i9qptN5veXJ4P/s104/about.png) no-repeat;
}
ul.slide-menu-drop-down li.bg-icon5{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2_hRTozPS-zJ5p5j3TrPId5aBK8BBgV7QHZpYkwbeYkoKjcqTju4XoqpTEkNBtM7OGqNqba-DwhBsH3FBnjiajK32z6P7VSYS3URQXjzdhhHAD4YMw2A2yjZVtPGclnNxmZ64oAb05QdD/s104/home.png) no-repeat;
}
</style>
6. Cukup sampai disini, lalu simpan template atau kamu bisa mengganti icon tersebut dengan icon milikmu.
Terakhir kita akan membuat isinya yaitu link link yang akan ditaruh dalam widget ini,
masuk lagi ke rancangan dan Tambahkan widget - HTML/JAVASCRIPT
<ul class="slide-menu-drop-down" id="slide-menu-drop-down">
<li class="bg-icon1">
<div class="judul">Album</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 6</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 7</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 8</a></p>
</div>
</li>
<li class="bg-icon2">
<div class="judul">Explorer</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>
<li class="bg-icon3">
<div class="judul">Kontak</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>
<li class="bg-icon4">
<div class="judul">About Me</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>
<li class="bg-icon5">
<div class="judul">Home</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>
</ul>
Keterangan : Code yang berwarna merah adalah icon yang terdapat di dalam menu.
warna kuning adalah nama Judul menu, warna pink alamat Link anda, dan yang berwarna hijo adalah nama link kamu ..!!
Save dan nikmati widget baru ini di Blog kamu .
Bila kalian kurang paham atau mengalami ke gagalan`haraf beri komentar di bawah postingan ini.
warna kuning adalah nama Judul menu, warna pink alamat Link anda, dan yang berwarna hijo adalah nama link kamu ..!!
Save dan nikmati widget baru ini di Blog kamu .
Bila kalian kurang paham atau mengalami ke gagalan`haraf beri komentar di bawah postingan ini.
>
Show
0 Comments
prev
next
