Cara Membuat Navigasi Responsive Dilengkapi dengan Sosial Media

Navigasi responsive dilengkapi dengan icon media sosial pada blog - Dalam membuat sebuah website atau blog tentu banyak istilah - istilah yang kita temukan di dalamnya. Misalnya yang sering kita dapatkan dalam istilah website yaitu template. Template merupakan hal penting dalam membuat sebuah blog.

Selain template ada juga yang namanya menu navigasi. Navigasi untuk sebuah blog sangat penting karena dengan adanya menu navigasi akan memudahkan pengunjung blog kita untuk membuka isi halaman yang ada di dalam blog atau situs kita. Sehingga ada kemungkinan jika sebuah blog mempunyai navigasi yang jelas akan menambah page view.

Tutorial membuat menu navigasi sangat banyak kita jumpai di internet. Sehingga gaya atau tampilannya pun sangat beragam. Mulai dari warna hingga efek yang ada pada menu tersebut.

Bagi seorang blogger tentunya navigasi tentunya sudah tidak asing lagi. Karena hampir semua blog yang kita jumpai di internet sudah ada yang namanya menu navigasi. Walaupun kita baru membuat blog dengan domain blogspot sudah tersedia menu navigasi standar yang disediakan oleh blogger sendiri. Namun tampilannya kurang cocok atau kurang menarik sehingga banyak para blogger membuat navigasi yang lebih cocok untuk tampilan blog mereka.

Navigasi yang bagus tampilannya pun tidak ada penting jika blog kita tidak muncul pada pencarian google atau search engine yang lainnya. Maka ada juga blogger yang tidak peduli dengan tampilan menu navigasi atau tampilan template yang penting isi konten yang ada di dalam blog mereka berkualitas. Begitu juga dengan search engine mereka membuat blog mereka supaya tampil di hasil pencarian mesin pencari.

Saat ini pengguna internet sudah menggunakan perangkat dengan berbagai ukuran. Maka dengan demikian blog kita juga harus memiliki tampilan yang responsive supaya blog kita akan otomatis mengikuti ukuran perangkat yang digunakan oleh pengguna internet dengan berbagai macam jenis ukuran.

Dengan demikian kita bisa menggunakan template dengan design responsive supaya ada kemungkinan page view kita akan bertambah. Untuk mendapatkan template yang responsive kita bisa mendownload pada situs - situs penyedia template. Atau kita bisa juga mendesain sendiri template bawaan blogger menjadi responsive.

Nah jika kita sudah mendownload template maka mungkin ada juga yang tidak sesuai dengan yang kita harapkan misalnya dengan menu navigasi yang ada maka kita ingin menggantikannya dengan navigasi yang lain. Maka kita mencari tutorial di browser kita maka akan menemukan menu navigasi yang pas bagi template kita namun saat di cek responsive ternyata navigasinya tidak responsive. Maka kita perlu mendesain kembali supaya menjadi responsive.

Memang jika masih pemula maka untuk mendesain navigasi menjadi responsive mungkin agak sedikit sulit karena kurang mengerti dengan kode - kodenya. Maka dalam artikel ini kita mencoba membagikan tutorial cara membuat menu navigasi dengan desain responsive sehingga memudahkan dan tidak perlu untuk mendesain lagi menjadi responsive. Adapun menu navigasi ini kita lengkapi dengan icon media sosial biar lebih menarik.

Berikut ini merupakan langkah - langkah membuat menu navigasi dengan desain responsive dan dilengkapi dengan media sosial.

Langkah pertama

Masuk ke dashboard blog kita kemudian klik Edit HTML dan copy kode di bawah ini dan pastekan di atas <header>

<ul>

</ul>

</li>

<li><a class='dutt' href='/p/get-in-touch.html'>Contact</a>

<li><a href='#'>Twitter</a></li>

</ul>

</li>

<li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>

<li><a href='/p/sitemap.html'>Sitemap</a></li>

</ul>

</nav>

Langkah kedua

Setelah itu copy kode di bawah ini dan pastekan di atas </head>

<style>

#menutop{width:100%;max-width:960px;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}

#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}

#menutop ul{height:45px}

#menutop li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;

font-weight:bold;}

#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}

#menutop ul li:hover a{color:#666;}

#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}

#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}

#menutop label span{font-size:13px;position:absolute;left:35px}

#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}

#menutop ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}

#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}

#menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}

#menutop a.dutt{padding:0 27px 0 14px}

#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}

#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}

#menutop ul.menux li a{background:#fff;color:#919392;}

#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}

#menutop li.facebook {padding:0 5px;}

#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}

#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}

#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}

#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,

#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}

#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}

@media screen and (max-width:960px) {

#menutop li:hover > ul.menux{display:block;}

#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}

#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}

#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}

#menutop ul.menux{width:100%;position:static;border:none}

#menutop li{display:block;float:none;width:auto;text-align:left}

#menutop li a{color:#666}

#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}

#menutop li:hover{background:#8493a0;color:#fff;}

#menutop a.dutt{font-weight: bold;}

#menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}

#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}

#menutop input:after,#menutop label:after {content:"\f0c9";font-family:FontAwesome;

font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;

display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}

#menutop input{z-index:4;}

#menutop input:checked + label{color:#fff;font-weight:700}

#menutop input:checked ~ ul{display:block}

#menutop ul li ul li a{width:100%;color:#666;}

#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}

#menutop ul.menux a{background:#fff;color:#666;}

#menutop ul.menux a:hover{background:#8493a0;color:#fff;}

#menutop ul.menux li{background:#fff;color:#666;}

#menutop ul.menux li:hover{background:#8493a0;color:#fff;}

#menutop ul.menux li a{background:#fff;color:#666;}

#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}

</style>

Kemudian silahkan klik Simpan Template dan coba lihat apakah berhasil. Berdasarkan yang sudah dicoba tutorial ini berhasil.

Sebelum menyimpan kita bisa mengubah link halaman blog kita dengan cara menggantikan tanda # yang ada pada url. Begitu juga dengan warna backgroud bisa di edit sendiri sesuai dengan di inginkan.

Demikian artikel kali ini bagaimana cara untuk membuat navigasi dengan tampilan responsive dan juga dilengkapi dengan sosial media. Mungkin jika kita ingin mengedit tampilannya agar lebih sesuai dengan tampilan blog kita ada kala dengan cara menganti warna background, text dan sebagainya.

Cara Membuat Navigasi Responsive Dilengkapi dengan Sosial Media

Contact Form