jasa View all

NEWS View all

Tips Kopi isi kontent blogger pasti mudah

 Tujuan postingan saya adalah memberi tahu Blogger baru bahwa penyebab semua postingan anda dapat dicuri dan di publish oleh blog lain adal

Youtube merupakan rajanya tempat berbagi video. Fasilitas yang di

Bagi seorang blogger, tols yang bermanfaat tentu saja harus dimaksim

LATEST NEWS

Tips Kopi isi kontent blogger pasti mudah

DOWNLOADER DI APLIKASI ANDROID DENGAN TUBEMATE YOUTUBE

Cara Bikin Formulir Online dengan Google Forms

Cara Menempatkan Google Map di Postingan Blog

Cara Menjadikan Blog Responsive Template Default Blogger

Cara Blogspot Sudah Bisa Menggunakan Protokol HTTPS

Cara Bikin Privacy Policy dan Cara Pasangnya di Blog

OPINI View all

Tips HTML Logo Bank 2

a/n TokoOnlineNo. 123-456-789 <p style="text-align: center;"></span> <span style="color: #000000;"><a href="http://www.klikbc

Tips Daftar BBM Resmi Hadir untuk PC, Begini Cara Pakainya!

22087 Mungkin ini adalah salah satu momen yang ditunggu-tunggu oleh banyak orang, menggunakan BBM melalui PC. Sehingga k

jasa View all

Tips Kopi isi kontent blogger pasti mudah

 Tujuan postingan saya adalah memberi tahu Blogger baru bahwa penyebab semua postingan anda dapat dicuri dan di publish oleh blog lain adal

FEATURE View all

Tips Memasang Widget Tombol Join This Site Tanpa Javascript lewat Widget

Cara Memasang Widget Tombol Join This Site Tanpa Javascript - Hi sobat blogger, pasti sudah kenal dengan widget Join This Site, yap!

Tipe mengganti judul blog dengan gambar/logo

     Yo... disini saya akan meng-share cara mengganti judul blog dengan gambar/logo

Tips Daftar BBM Resmi Hadir untuk PC, Begini Cara Pakainya!

22087 Mungkin ini adalah salah satu momen yang ditunggu-tunggu oleh ba

Tips Memasang Kolom Komentar Facebook di Blog Model Tab

Inilah Cara Cepat Memasang Kolom Komentar Facebook dan Blog Model Tab - Membuat Blog semanari

TIPS View all

Tips Memasang Widget Tombol Join This Site Tanpa Javascript lewat Widget

Cara Memasang Widget Tombol Join This Site Tanpa Javascript - Hi sobat blogger, pasti sudah kenal dengan widget Join This Site, yap!

a

a

Tipe Membuat Menu yang Responsive di Blog

Membuat menu reponsive atau horizontal responsive menjadi sebuah trend tersendiri di kalangan blogger saat ini. Update untuk menunjang kinerja blog itu sangat penting,termasuk style blog itu sendiri.Membuat sebuah blog mampu menyesuaikan tampil di semua browser baik mobile maupun desktop atau sering kita sebut responsive desain tidaklah mudah.Kita harus merancang template tersebut dari header,menu,posting,sidebar dan masih banyak lagi agar mampu menyesuaikan diri dengan lingkungannya atau pas waktu SD sering kita dengar istilah Beradaptasi...wkwkwk.


Nah kali ini mas gusti akan menerbitkan sebuah tutorial membuat menu responsive di bloggeryang saya harap bisa digunakan oleh semua sobat blogger.Rekomendasi dari saya, menu ini sangat cocok digunakan untuk template toko online karna saat ini orang berbelanja itu sebagian besar melalui aplikasi mobile.Berikut penampakan menu horizontal drop down responsive blog gabungan HTML 5 dan CSS.



Membuat Responsive Drop Down Menu di Blogger/Blogspot

1. Loggin ke blogger seperti biasa > Pilih opsi Template.



2. Klik edit HTML > Kemudian cari kode </b:skin> ( Gunakan CRTL+F untuk mempercepat pencarian ).
3. Setelah itu langsung saja pastekan kode berikut tepat di atas kode </b:skin> .

/*-----Responsive Drop Down Menu oleh IBS ( idblogsite ) ----*/
body {
margin: 0px;
}
#menu{
background: #393939 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndx4ZU-rpQ0TjS3uAv0zLzwyCAxzHUA3L1vJGDcX2loK8j2400BLYMNn3WKAkAsOQS_RQ2TUi2dbxMmBug7m7f2Q6Rbc-vreCD9vDbFOzdBwLxuEJ7zXI02cR4x3mj1Phh_qR4SjJuCQz/s1600/back_ibs.png) repeat-x;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none;
}
#menu ul{
height:45px;
width:1024px;
}
#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: #696969;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #696969;
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: #393939;
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}
}

Keterangan :
  • Untuk edit warna background silahkan ganti kode #393939
  • Untuk menyesuaikan lebar menu silahkan edit width:1024px

4. Sekarang cari lagi kode   <div id='content-wrapper'> dan pastekan kode berikut ini tepat di atasnya :

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>IDBLOGSITE</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu A<font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>menu 1</a></li>
<li><a href='#'>menu 2</a></li>
<li><a href='#'>menu 3</a></li>
<li><a href='#'>menu 4</a></li>
<li><a href='#'>menu 5</a></li>
<li><a href='#'>menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu B<font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>menu 1</a></li>
<li><a href='#'>menu 2</a></li>
<li><a href='#'>menu 3</a></li>
<li><a href='#'>menu 4</a></li>
<li><a href='#'>menu 5</a></li>
<li><a href='#'>menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu C<font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>menu 1</a></li>
<li><a href='#'>menu 2</a></li>
<li><a href='#'>menu 3</a></li>
<li><a href='#'>menu 4</a></li>
<li><a href='#'>menu 5</a></li>
<li><a href='#'>menu 6</a></li>
</ul>
</li>
<li><a href='#'>Create Responsive Menu</a></li>
       </ul>
    </nav>

5. Simpan template dan lihat hasilnya.

Related News
Comments
0 Comments

Tidak ada komentar:

Leave a Reply