Jangan Lewatkan Artikel Yang Berkaitan Dengan Cara buat slide menu drop down dibawah ini:
Cara membuat slide dengan efek marqueeMaaf untuk Demonya belum dibuat....
Nih langkah - langkahnya:
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode </head> :
5. Copy kode di bawah i ... lihat selengkapnya- Menambah widget pengatur Ukuran dan Warna teks pada BlogKlik DEMO untuk melihat contohnya.
Ni h langkah"nya:
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Disarankan untuk mem-back up template dulu.
6. Cari kode ... lihat selengkapnya
- cara menampilkan hanya judul posting saja di homepage
untuk demonya sobat bisa lihat di homepage blog ini DemoSekedarbiasa blogspot..
nih langkah-langkahnya:
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTM ... lihat selengkapnya
cara Memasang Iklan Disamping postingan
Cara Memasang Iklan Disamping postingan - Nah, Bagi Sahabat Sekedarbiasa Yang ingin Memasang Iklan Di samping postingan(Bisa kanan maupun kiri),Nih aku kasih tutorialnya...
Langsung saja yah ikut ... lihat selengkapnya
Cara Mengatur Ukuran Lebar 'Widget' Template Blogger
Cara Singkat,Cepat dan Efektif Mengatur Ukuran Lebar 'Konten Utama / Postingan' Blogger Template
Jika
sobat menginginkan ukuran template dapat sobat utak-atik sendiri dengan
cara singkat,tak ad ... lihat selengkapnya
بسم الله الرحمن الرحيم
بسم الله الرحمن الرحيم
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Disarankan Back up template dulu.
4. Disarankan Back up template dulu.
5. Jangan lupacentang "Expand Widget Templates"
6.Cari Kode </head>
7.Copy kode dibawah ini dan paste sebelum kode </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/AVvXsEh8PvkcIYmBdp3H90fsEJs4aTT8YIVqulm_qm3ZEVqneb04H0gJBVdECy4JdjrHAzPCswStXk_Am5t0i7ukJtEWLzVyAAvTlEbr6LHKP8t-zXIPoY33jJwsk0TwdEx8com2lfFjH9SlXccz/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>
8. Lalu copy lagi kode dibawah ini dan paste setelah kode diatas :
<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/AVvXsEh4Z2IAxM8v5loszE7wRXGyku4C-4tBlY1X2WyN8u-IYZe5OHJDMCCqAgKMRqzUEWzk0nYyIirOr67oaw0bWaZ_vvwfRirG9zMny-CTRqk0qtolQvbd4YGBj09Qy8mrDuCJ7ynhaFBLI7XY/s104/photos.png) no-repeat;
}
ul.slide-menu-drop-down li.bg-icon2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuej_IRPWKGV9j3wIq8rtXDyUtZG5zz5GVXV_uIq9Z3ld9vL_bS_xuh88tFpKGKPh7Y5_PJDNhaQIG-8l5VVRf8KyYrStZYU1IuW4dCdGcDbDXkN1SYTFvM8XJej1-sAsZGxjYDkUNxiTx/s104/find.png) no-repeat;
}
ul.slide-menu-drop-down li.bg-icon3{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOWQ-4AeKGxwiceTJqVxoSKwzvpAza5Pqf4RxQBqXiv7IU0UInY2I0St8lqIIjlH0vuYUpBi3xfiCT6pQK4q0AjYF-PPslPlVaiR5hC6yVoH6LCey9CKs1-oWw2sPmX65XYRFqfc9-u5Wo/s104/mail.png) no-repeat;
}
ul.slide-menu-drop-down li.bg-icon4{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRAf34uLMbo0C3NO7PRf-oYjmhTYyXlw7lrd3hN79MCvDeNXOkkMCuypiLNzJzjqdE9v-6R84xyChBf81noA02u_8PrvMFjchryn6I2V108ox43lp2-GzwN3I-MNjyxRnJYSp9lls95kV/s104/about.png) no-repeat;
}
ul.slide-menu-drop-down li.bg-icon5{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOVCE5i-J3Sxce3CuXhXPJUXgKi0ONCjxL3UtUyYLHfmkcvNV8qJs-LlBBgX1NDSVm8rlC-kf_nqCS5G3Vgsow62fCShw9f-8v5GhLhoYXq0_CXq8iYaqTDbkVwepTtbPda1ok6-T1am0I/s104/home.png) no-repeat;
}
</style>
Catatan :
Teks warna merah diatas adalah ULR Icon menu.bentuk icon sebaiknya bulat dengan ukuran
icon = 50px, dan dengan format file PNG, agar dapat sesuai dengan
tampilan menu ini.
9. SIMPAN TEMPLATE.
Kemudian Untuk Menampilkannya ikuti langkah" dibawah ini:
1. Klik Rancangan dan pilih Elemen Laman
3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript
4. Copy dan paste kode dibawah ini pada gadget tersebut :
<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>
5. Simpan.
Terinspirasi: http://www.carabuatwebgratis.com/2011/08/cara-buat-slide-menu-drop-down.html
Terinspirasi: http://www.carabuatwebgratis.com/2011/08/cara-buat-slide-menu-drop-down.html
Bila anda merasa artikel diatas bagus dan bermanfaat, anda bisa gunakan URL atau HTML dibawah ini. Silahkan anda dipasang dihalaman web atau blog anda untuk menuju kehalaman ini :
...mencuri itu tidak baik...hargailah karya anak bangsa
Post a Comment