Desain blog memang merupakan pendukung dalam menarik pengunjung untuk terus berkunjung ke blog kita. Untuk kali ini kami akan membahas tentang bagaimana caranya untuk membuat drop down menu yang dilengkapi dengan gambar pada blog.
Baiklah tanpa panjang lebar lagi mari kita mulai tutorial nya :
1. CSS
Step1. Log in ke akun blog anda
Step2. Klik template dan pilih Edit Html
Step3. Tekan dimana saja didalam area kode lalu cari kode dibawah ini dengan menekan tombol Ctrl + F
]]> </ B: skin>
Step4. Masukan kode dibawah ini tepat berada di atas kode ]]></B:skin>
.megamenu * {margin: 0; padding: 0; font-family: 'PT Sans Narrow'} ul.megamenu {list-style: none; line-height: 1; overflow:! terlihat penting} ul.megamenu: setelah { margin: 0; padding: 0; konten: ''; display: block; height: 0px; clear: both} ul.megamenu li {float: left; display: inline; position: relative; text-transform: huruf besar} ul. megamenu li a.menu-sasaran: setelah {content: ""; width: 0; height: 0; border-left: 3px transparan padat; border-right: 3px transparan padat; border-top: # fff padat 3px; font- size: 0; line-height: 0; bottom: 22px; right: 5px; position: absolute} ul.megamenu li a {display: block; line-height: 50px; padding: 0px 20px; text-decoration: none; border Kiri: 1px solid # 000; box-shadow: 1px 0 0 0 RGBA (255, 255, 255, 0,1) inset; color: # d9d9d9; font-size: 14px; transisi: semua 0.3s kemudahan-in-out} ul.megamenu li a: hover {background: # 111111; color: # fff} ul.megamenu ul {position: absolute; display: none; top: 100%} ul.megamenu li: hover> ul {display: block} ul .megamenu ul li {z-index: 72; min-width: 149px; float: none; background: # 000; text-shadow: none} ul.megamenu ul li a {text-transform: none; font-weight: normal } ul.megamenu ul li a: hover, ul.megamenuid ul li a.hover {background: # e0e0e0; color: # 444} ul.megamenu ul ul {display: none; kiri: 100%; top: 0} ul. li megamenuid 0; visibility: hidden; opacity: 0; color: # 888; box-shadow: 0 10px 7px -7px RGBA (0,0,0,0.1); transisi: semua 0.3s kemudahan-in-out} ul.megamenuid li : hover ul, ul.megamenuid ul li {display: block penting; border: 0 tidak ada yang penting; margin:! 0 penting; padding:! 0 penting!} ul.megamenuid ul li {background: none! important; float: left penting! } ul.megamenuid ! Melesat # e5e5e5 penting} ul.megamenuid ul.leftmenulist sebuah {border-left: none! Important; color: # 555} ul.megamenuid ul.rightmenulist {position: relative; display: block; width: 81%; float: right ; margin:! 0px 0px 0px penting; background: none} ul.megamenuid ul.rightmenulist li {display: block; overflow: hidden; position: relative; min-height: 210px; padding: 5px 17px 5px 0px penting} ul. megamenuid ul.rightmenulist li ul.rightmenulist li .thumb-wadah img {position: relative; top: 10px; padding: 0; width: 100%; height: 100%; display: block} ul.megamenuid ul.rightmenulist li a {display: block; border ! Kiri: none penting; padding: 0px 5px penting; line-height: 1.4; color: # 777; font-weight: bold; font-size: 14px} ul.megamenuid ul.rightmenulist li a: hover {color: # 000; background: transparent} ul.megamenuid no-repeat scroll 0 0.menu-icon {border-bottom: 4px padat transparan; border-top: 4px padat transparan; border-left: 4px padat 0, 0, 0) -moz-linear-gradient (tengah atas, # 3d3d3d, # 212121) repeat scroll 0 0; background: -webkit-linear-gradient (top, # 3d3d3d, # 212121); background-color: # 3d3d3d; box-shadow: 1px 1px 0 0 RGBA (255, 255, 255, 0,1) inset; height: 50px; width: 100%; position: relative; max-width: 1000px; margin: 0 auto; padding: 0px} #megamenuid h5 {font-size: 16px; margin-top: 70px; text-align: center} #megamenuid hitam solid; border-right: 2px hitam solid} #megamenuid hitam solid; border-left: 2px hitam solid; border-right: 2px hitam solid; border-radius: 8px 8px 0px 0px} li.search-box {float: right penting; line-height: 35px; margin: 7px 10px 0 0} li.search-kotak .search-bidang: focus {border: none; outline: none; background: # 4C4C4C; color: # fff} li.search-kotak no-repeat; border: none; cursor: pointer; padding: 5px 10px; transisi: semua 0.3s kemudahan-in-out} li.search-kotak .search-tombol: hover {opacity: 0.9} .search-peringatan {background : # E84C3D url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivjCfth5t9voFvsfhxR6vNb7WbCq2aCgM9vtiNPPOoP2fFov7nfEONeyppDcfu5MUcerT4p0XVQrFQjaTJnff3mpX90dsGdn3F2pXzQVn8TfNc-lR6oW0XJWTKRyOLzm-0bSbYKdFPvdk/s1600/search-info.png) no-repeat; background-position: 5px; text-transform: memanfaatkan; warna: # fff; margin: -5px; padding: 0px 15px 0px 40px; display: none; border-radius: 5px}
2. Java Script
Step1. Buka template lalu pilih Edit Html
Step2. Tekan Ctrl + F dan cari kode </ head>
Step3. Masukan kode dibawah ini di atas kode tadi
<script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type = 'text / javascript' />
<script src = https ': // helplogger .googlecode.com / svn / trunk / megamenu.js 'type =' text / javascript '/>
<script type =' text / javascript '>
jQuery (document) .ready (function ($) {
$ (& # 39; . # megamenuid & # 39;) megaBloggerMenu ({postsNumber: 4 , noThumbnail: .search-bidang & # 39;..) val () panjang == 0) { $ (& # 39; .search-kotak
Catatan :
> postsnummer: 4 adalah jumlah posting
> Kode script bewarna merah yang berada di paling atas jangan dimasukan lagi jika sudah terdapat kode yang sama pada blog kamu.
3.HTML
Step1. Hati-hati menambahkan kode HTML ini karena kamu harus gunakan sesuai URL
Label:http://NAMA Blog Kamu.com/search/label/LABELNAME Permintaan Pencarian: http://NAMA BLOG KAMU .blogspot.com/search? q = SEARCHQUERY Label w / Search Query: http://NAMA BLOG KAMU.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY antara tiga URL, yang Query Search harus URL dikodekan menggunakan alat tertentu.
Step2. Cari baris berikut menggunakan CTRL + F:
<Div class = 'main-outer'>
Tepat di atas kode di atas lalu masukan kode Html berikut :
<ul class = 'megamenu' id = 'megamenuid'>
<li> <a href='/'> Rumah </a> </ li>
<li> <a class = 'menu-target' href = '#' > MENU TITLE </a>
<ul>
<li> <a href=' http://ADDURLHERE.com'> LABEL NAMA </a> </ li><li> <a href = ' http: // ADDURLHERE .com '> LABEL NAMA </a> </ li> <li> <a href=' http://ADDURLHERE.com'> LABEL NAMA </a> </ li> </ ul> </ li> < li> <a class='menu-target' href='#'> MENU TITLE</a> <ul> <li> <a href=' http://ADDURLHERE.com'> LABEL NAMA</a> < / li> <li> <a href=' http://ADDURLHERE.com'> LABEL NAMA</a> </ li> <li> <a href=' http://ADDURLHERE.com'> NAMA LABEL< / a> </ li> </ ul> </ li> <li> <a href=' http://ADDURLHERE.com'>normal Tautan </a> </ li> <li class = 'mencari-kotak '> <form action =' 'method =' / search 'class =' mencari-sini mendapatkan '> <input class =' mencari-bidang 'name =' q 'placeholder =' Cari Berikut size = '30 'type = 'text' /> <input class = 'mencari-tombol' type = 'submit' value = '' /> </ form> <p class = 'mencari-peringatan'> bentuk Pencarian kosong! </ p> </ li> </ ul> <div class = 'jelas' /> <div class = 'jelas' />
Simpan template dan selesai selamat mencoba jika ada pertanyaan silahkan berkomentar di bawah ini dengan bahasa yang sopan dan jangan lupa untuk selalu berkunjung ke blog kami.
No comments:
Post a Comment