• Translate

6/22/2015

Cara Membuat Menu Dropdown Responsive dan SEO Friendly di Blog

Tutorial Blogspot |

Advertisement

Cara Membuat Menu Dropdown Responsive dan SEO Friendly di Blog | Menu Dropdown sangat penting pada sebuah blog, agar terlihat lebih rapi dan menarik. apalagi kalau menu dropdown tersebut responsive terhadap semua mobile device pasti sangat menguntungkan lagi, dimana sekarang google sudah memakai Algoritma Baru Google MobileGeddon dimana algoritma ini lebih mementingkan tampilan yang mobile friendly di pencarian google.

Nah, kali ini saya akan membagikan Cara Membuat Menu Dropdown Responsive dan SEO Friendly di Blog sobat, mungkin ini masih jauh dari kata sempurna, silahkan sobat mempercantik menu dropdownnya dengan kreasi sobat sendiri.



Langkah-langkah yang harus dilakukan adalah :
  • Log in ke blogger → Pilih opsi Template

  • Klik edit HTML → Kemudian cari kode </b:skin> ( Gunakan CRTL+F untuk mempercepat pencarian ).
  • Setelah itu langsung saja pastekan kode berikut tepat di atas kode </b:skin> .
/* CSS Responsive Dropdown Menu */

body {
margin: 0px;
}
#menu{
background: #363b40 ; //silahkan sobat ganti warna background sesuai selera
color: #24b4c9;
height: 40px;
border-bottom: 1px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 1px solid #DDD;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none;
}
#menu ul{
height:45px;
width:1024px; // sesuaikan lebar menu dengan keinginan sobat
}
#menu li{
border-right:1px solid #FFF;
float:left;
display:inline;
position:relative;
font:bold 0.9em Arial;
text-transform: uppercase;
}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}
#menu li a:hover{
color: #fff;
background: #2c64b8;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:15px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #363b40;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.9em Arial;
text-transform: none;
border-bottom: 1px solid #7B7B7B;
border-top: 1px solid #595959;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #2c64b8;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}
}
  • Sekarang cari lagi kode   <div id='content-wrapper'> atau dimana sobat inginkan meletakkan menu responsive ini, kalau di template saya, saya meletakkan kode ini dibawah <body> setelah itu pastekan kode berikut ini  :
<!-- Menu Responsive -->
<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='http://www.alltutorials.info' title='Back to Home'><img height='17' src='http://png-2.findicons.com/files/icons/1580/devine_icons_part_2/128/home_w.png' title='Back to Home' width='17'/></a></li>
<li><a href='http://www.alltutorials.info/p/about-me.html' title='About'>About</a></li>
<li><a href='http://www.alltutorials.info/p/blog-page_22.html' title='Sitemap (Daftar Isi)'>Sitemap</a></li>

<li><a href='#' title='Term of Service'>TOS <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='http://www.alltutorials.info/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://www.alltutorials.info/p/privasi-policy.html' title='Privacy Policy'>Privacy</a></li>
</ul>
</li>

<li><a href='#' title='List of Tutorials'>Tutorials <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='http://www.alltutorials.info/search/label/Tutorial%20Ads' title='Ads Tutorials'>Ads</a></li>
<li><a href='http://www.alltutorials.info/search/label/Tutorial%20Blogspot' title='Blogspot Tutorials'>Blogspot</a></li>
<li><a href='http://www.alltutorials.info/search/label/Tutorial%20Forex' title='Forex Tutorials'>Forex</a></li>
<li><a href='http://www.alltutorials.info/search/label/Tutorial%20Hardware' title='Hardware Tutorials'>Hardware</a></li>
<li><a href='http://www.alltutorials.info/search/label/Tutorial%20Jaringan%20Komputer' title='Network Tutorials'>Network</a></li>
<li><a href='http://www.alltutorials.info/search/label/Tutorial%20Smartphone' title='Smartphone Tutorials'>Smartphone</a></li>
<li><a href='http://www.alltutorials.info/search/label/Tutorial%20PHP' title='PHP Tutorials'>PHP</a></li>
<li><a href='http://www.alltutorials.info/search/label/Tutorial%20WAP' title='WAP Tutorials'>WAP</a></li>
</ul>
</li>

<li><a href='#' title='Tools'>Tools <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='http://www.alltutorials.info/p/parse-html.html' title='Parse HTML'>Parse HTML</a></li>
<li><a href='http://www.alltutorials.info/p/blog-page_2.html' title='Colour Tool'>Colour Tool</a></li>
</ul>
</li>
    </ul>
    </nav>
Nah , yang diatas adalah kode yang langsung saya ambil dari template saya, silahkan sobat ubah semua linknya dengan link url sobat.

Semoga bermamfaat,

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.