Telolet Apps

Cara Membuat Menu Navigasi Responsive di Atas Header Icon Media Sosial di Blog

Gambar ini hanya Contoh

Tutorial Cara Membuat Menu Navigasi Responsive di Atas Header Plus Media Sosial di Blog

Menu Navigasi Blog yang sudah Profesional biasanya berisi About, Contact, Disclaimer, Sitemap, Privasi dan lain-lain.

Menu Navigasi yang saya sebutkan diatas juga menjadi salah syarat agar Blog diterima oleh Google AdSense.

Seperti salah satu kata dari judul postingan diatas, yaitu "Responsive" yang artinya dapat menyesuaikan di layar Handphone apa saja, berbeda jika judul postingan diatas tidak ada kata Responsive, yang berarti tidak dapat menyesuaikan pada layar Handphone yang saat ini sudah banyak peminatnya untuk digunakan berselancar di dunia maya.

Berikut Cara Memasang Menu Navigasi di Atas Header + Icon Media Sosial di Blog dibawah ini:

- Login ke akun Blogger.com

- Selanjutnya menuju Template/Edit HTML

- Cari kode <div class=header-wrapper> (gunakan CTRL F)

- Kemudian copy kode dibawah ini, pastekan di bawah kode <div class=header-wrapper>

<nav id=menutop><br /><input type=checkbox/><br /><label/><br /><ul><li>About</li><li>Contact</li><li>Sitemap</li><li class=sorting-01 facebook><i class=fa fa-facebook fa-lg/><span class=inv/></li><li class=sorting-02 twitter><i class=fa fa-twitter fa-lg/><span class=inv/></li><li class=sorting-03 googleplus><i class=fa fa-google-plus fa-lg/><span class=inv/></li><li class=sorting-06 rss-square><i class=fa fa-rss-square fa-lg/><span class=inv/></li><li class=sorting-04 youtube><i class=fa fa-youtube fa-lg/><span class=inv/></li></ul></nav>

- Tahap yang pertama sudah selesai, sekarang tahap yang kedua, cari kode </head> (gunakan CTRL F)

- Copy kode di bawah ini, pastekan di atas kode </head>

<style>#menutop{width:100%;margin:0 auto;height:40px;background:#fff;border-bottom:1px solid #e9e9e9;} #menutop ul,#menutop li{margin:0;padding:0;list-style:none;} #menutop ul{height:40px} #menutop li{float:left;display:inline;position:relative;font-family:trebuchet MS;font-size:13px; font-weight:bold;} #menutop a{display:block;line-height:40px;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:40px;opacity:0;cursor:pointer} #menutop label{font-family:trebuchet MS;font-size:30px;font-weight:400;display:none;width:35px;height:40px;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:40px;line-height:40px;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.rss-square,#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.rss-square:hover,#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.rss-square .fa.fa-rss-square,#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.rss-square:hover,#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.rss-square:hover .fa.fa-rss-square{color:#CC6600} #menutop li.facebook:hover .fa.fa-facebook{color:#000099} #menutop li.twitter:hover .fa.fa-twitter{color:#0099FF} #menutop li.youtube:hover .fa.fa-youtube{color:#B00000} #menutop li.googleplus:hover .fa.fa-google-plus{color:#990000} #menutop li.linkedin:hover .fa.fa-linkedin{color:#0066FF} @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>

- Tahap Terakhir, copy kode di bawah ini, pastekan kembali diatas kode </head>

<script type=text/javascript>// var cb=function(){var e=document.createElement(link); e.rel=stylesheet,e.href=//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css; var t=document.getElementsByTagName(head)[0]; t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener(load,cb); //</script>

- Jika semua sudah selesai, klik Simpan Template

- Hasilnya

Available link for download

Cara Mudah Membuat Menu Navigasi Drop Down Responsive di Blog

Apa yang dimaksud dengan Menu Navigasi Drop Down? Menu Navigasi Drop Down adalah Menu Navigasi menurun, Menu Navigasi Drop Down sangat membantu bagi kalian yang ingin memasang kategori/label Blog di bawah header atau bisa juga meletakkan label tertentu seperti Blog saya ini contohnya.

Banyak cara membuat/memasang Menu Navigasi Drop Down di Google, tetapi tidak semuanya work saat di terapkan di Blog, kebanyakan hasilnya GATOT alias gagal total. Parahnya lagi saat sudah menambahkan kode Menu Navigasi Drop Down dan menyimpan Template Blog tiba-tiba Template Blog menjadi error. Alasannya hanya satu karena tidak cocok dengan Template Blog.

Kalau dari pengalaman saya sendiri mencari kode Menu Navigasi Drop Down di mesin pencari mbah Google selalu berujung gatot, kemudian saya berinisiatif sendiri dan mengutak atik Template dari Blog saya yang satunya, kebetulan Blog saya yang satunya Menggunaakan Menu Navigasi Drop Down, jadi saya copy kode Menu Navigasi Drop Down pada Template Blog saya yang satunya tadi, kemudian saya edit dan saya coba pasang di Blog saya yang ini, hasilnya ternyata sukses.

Cara pemasangannya pun tidak ribet seperti tutorial yang ada di mesin pencari. Penasarankan? baiklah langsung saja simak Cara Mudah Memasang Menu Navigasi Drop Down Responsive di Blog dibawah ini:

- Pertama-tama login ke Blogger.com

- Langsung menuju menu Template/Edit HTML

- Cari kode Menu Navigasi Blog kalian, Contoh:



- Ganti dengan kode dibawah ini

<div class=clear/>
<input type=checkbox/>
<label>&#8801;<span>Navigasi&#160;Menu</span></label>
<ul>
<li><a href=/>Home</a></li>
      <li><a href=URL>ANDROID <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>GAME</a></li>
    <li><a href=URL>APLIKASI</a></li>
    <li><a href=URL>LAUNCHER</a></li>
    <li><a href=URL>TUTORIAL</a></li>
    <li><a href=URL>EMULATOR</a></li>
    <li><a href=URL>CHEAT</a></li>
    <li><a href=URL>SAVE DATA</a></li>
        </ul>
    </li>
<li><a href=URL>PC <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>GAME</a></li>
    <li><a href=URL>SOFTWARE</a></li>
    <li><a href=URL>EMULATOR</a></li>
    <li><a href=URL>TUTORIAL</a></li>
        </ul>
    </li>
    <li><a href=URL>BLOGGER <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>TUTORIAL</a></li>
    <li><a href=URL>JAVASCRIPT</a></li>
    <li><a href=URL>SUB MENU</a></li>
    <li><a href=URL>SUB MENU</a></li>
        </ul>
    </li>
   <li><a href=URL>TIPS DAN TRIK <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>FACEBOOK</a></li>
    <li><a href=URL>TWITTER</a></li>
    <li><a href=URL>INSTAGRAM</a></li>
        </ul>
    </li>
    <li><a href=URL>NEWS <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>INFORMASI TERBARU</a></li>
    <li><a href=URL>JADWAL</a></li>
    <li><a href=URL>PREDIKSI DAN HASIL</a></li>
        </ul>
    </li>
    <li><a href=URL>UNCATEGORIZED <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>GAME JAVA</a></li>
    <li><a href=URL>GAME SYMBIAN</a></li>
    <li><a href=URL>DOWNLOAD MP3</a></li>
    <li><a href=URL>TEMA JAVA</a></li>
    <li><a href=URL>VIDEO</a></li>
    <li><a href=URL>FOTO LUCU</a></li>
    <li><a href=URL>REQUEST</a></li>
        </ul>
    </li>
    <li><a href=URL>CERPEN</a></li>
   </ul>
</nav>

- Bisa juga kalian edit terlebih dahulu sesuka hati kalian

- Hasilnya

Available link for download

Cara Membuat Random Post Ringan Responsive Berdasarkan Label di Blog

Kalau mendengar kata Ringan Responsive, pasti bisa menggambarkna seperti apa. Nah pada kesempatan kali saya akan share Cara Membuat Random Post Ringan Responsive Berdasarkan Label di Blog. Setelah sebelumnya saya juga share Cara Membuat Recent Post Dan Random Post Ringan Responsive di Blog.

Ringan berarti Widget ini Teks  sangat sederhana, bahkan tanpa Gambar/Thumbnail, jadi sangat tepat bagi kalian yang ingin membuat tampilan Blog sederhana dan juga tidak membat LOAD Blog menjadi membengkak.

Berikut Cara Memasang Random Post Ringan Responsive Berdasarkan Label di Blog dibawah ini:

- Login ke Blogger.com

- Langsung menuju menu "Tata Letak/Tambahkan Gadget/Tambahkan HTML/JavaScript"

- Copy kode dibawah ini


- Ganti "namalabel" dengan label/kategori kalian
- var numposts = 5, jumlah postingan yang akan ditampilkan secara acak, ganti no 5-nya saja
Pastekan didalam kolom yang sudah di sediakan.

- Terakhir klik Simpan.

Available link for download

Cara Membuat Recent Post Dan Random Post Ringan Responsive di Blog

Jadi tanpa saya jelaskan tentu kalian sudah mengetahui Recent Post dan Random Post, karena sudah saya jelaskan di postingan sebelumnya.

Berikut Cara Memasang Recent Post Dan Random Post Ringan Responsive di Blog dibawah ini:

- Login ke Blogger.com

- Langsung menuju menu "Tata Letak/Tambahkan Gadget/Tambahkan HTML/JavaScript"

- Copy kode dibawah ini


RECENT POST
- Ganti "k0k0h" dengan alamat Blog kalian
- var numposts = 5, jumlah postingan yang ditampilkan, ganti nomor 5-nya saja

RANDOM POST
- Ganti "k0k0h" dengan alamat Blog kalian
- var numofpost=5; adalah jumlah postingan yang  ditampilkan, ganti nomor 5-nya saja

- Pastekan didalam kolom yang sudah disediakan

- Terakhir klik Simpan.

Available link for download