View AllFeatured

Memasang Aplikasi Jadwal Shalat di Komputer untuk Blogger Muslim

Memasang Aplikasi Jadwal Shalat di Komputer untuk Blogger Muslim

Memasang Aplikasi Jadwal Shalat di Komputer untuk Blogger Muslim
Memasang Aplikasi Jadwal Shalat di Komputer untuk Blogger Muslim: Shollu & Salaat Time.

APLIKASI pengingat waktu shalat penting dipasang di komputer blogger Muslim agar tidak kelewatan waktu shalat. 

CB share dua aplikasi pengingat shalat populer, yaitu Shollu dan Salaat Times.

Kedua aplikasi, software, atau program ini menampilkan jadwal waktu sholat plus pengingat berupa suara (adzan).

Aplikasi Jadwal Shalat di Komputer untuk Blogger Muslim

SHOLLU PENGINGAT SHALAT
Shollu Aplikasi Jadwal Shalat di Komputer


Nama Shollu diambil dari bahasa Arab yang artinya "sholatlah kalian". Shollu adalah suatu aplikasi pengingat waktu sholat 5 waktu.

Fitur-fitur yang Software Shollu antara lain Konversi Penanggalan Masehi-Hijriyah, mendukung banyak kota di berbagai belahan dunia, dapat mengganti suara adzan di setiap waktu sholat, dll.

Aplikasi kedua adalah Salaat Time. Fungsi dan fiturnya kurang lebih sama dengan shollu. Silakan pilih yang mana saja. Terpenting akan ingat terus waktu shalat di sela-sela asyik blogging.

SALAAT TIME PENGINGAT SHOLAT

SALAAT TIME PENGINGAT SHOLAT


Salaat Time adalah aplikasi pengingat waktu sholat dengan multifungsi. Aplikasi jadwal shalat lima waktu ini juga dapat mengingatkan waktu dalam bentuk suara adzan. Ada juga fitur kalender Hijrah dan Masehi, tahun Islam, Al-Qur'an, dan masih banyak lagi.

Untuk pengingat waktu shalat di HP Android atau SmartPhone, Anda bisa instal Aplikasi Sholat dari Gits Indonesia yang juga dilengkapi arah kiblat dan notifikasi suara adzan.

Aplikasi Sholat dari Gits Indonesia


Demikian ulasan tentang Memasang Aplikasi Jadwal Shalat di Komputer untuk Blogger Muslim. Happy Blogging! Jangan Lupa Sholat! (www.contohblog.com).*

Cara Agar Blog Dibaca Kalangan Terbatas - Membuat Member Login di Blogger

Cara Agar Blog Dibaca Kalangan Terbatas - Membuat Member Login di Blogger

Cara Agar Blog Dibaca Kalangan Terbatas - Membuat Member Login di Blogger. Konten Blog Dibaca Member Saja.


TANYA:
Menggunakan blogspot apakah bisa ? Saya berencana membuat website yg bisa membership / hanya member tertentu bisa login atau mengakses konten2 saya. Mungkin pakai blogspot bisa kah ? Pakai Blogspot apakah bisa ? Mohon infonya ya CB... Thanks..

JAWAB:
Bisa, yaitu dengan cara setting sebagai berikut:




Di laman Bantuan Blogger disebutkan, Anda dapat mengontrol siapa yang dapat mengedit blog, dan siapa yang dapat membacanya.

Setelah disetting demikian, saat alamat blog dibuka, akan muncul notifikasi seperti ini:

This blog is open to invited readers only

This blog is open to invited readers only
It doesn't look like you have been invited to read this blog. If you think this is a mistake, you might want to contact the blog author and request an invitation.

Cara Memilih Siapa yang bisa melihat blog Anda

Secara default, blog Anda bersifat publik, dan dapat dibaca oleh siapa pun di web. Untuk mengubah siapa yang dapat melihat blog Anda:
  1. Login ke Blogger.
  2. Pilih blog yang akan diupdate.
  3. Di menu sebelah kiri, klik Setelan > Dasar.
  4. Di bawah "Izin", temukan "Pembaca Blog" dan klik Edit.
  5. Pilih atau centang Pribadi - Khusus pembaca ini.
  6. Klik Simpan perubahan.
Masukkan email orang yang diizinkan membaca postingan blog Anda, misalnya teman, keluarga, atau anggota (membership).

Pemilik email akan menerima notifikasi email dari Google/Blogger berisi undangan seperti ini: "[Reminder] - You have been invited to view .... " dan harus "terima undangan" (accept invitation) untuk bisa akses.

Nantinya, mereka harus login dulu ke akun Blogger atau Gmail untuk bisa mengakses konten blog Anda.

Membuat Member Login di Blogger

Agar tampak profesional, Anda bisa membuat form LOGIN untuk blogger dengan menggunakan kode yang dishare di forum CNet berikut ini.

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Copas kode berikut ini:

<form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>

3. Hasilnya seperti ini:

Membuat Member Login di Blogger

Demikian Cara Agar Blog Dibaca Member Saja atau Kalangan Terbatas. Happy Blogging! (www.contohblog.com).*

Cara Menampilkan Gambar Thumbnail Video Youtube Otomatis di Homepage Blogger

Cara Menampilkan Gambar Thumbnail Video Youtube Otomatis di Homepage Blogger

Cara Menampilkan Gambar Thumbnail Video Youtube Otomatis di Homepage Blogger.

GAMBAR thumbnail video Youtube bisa ditampilkan otomatis di halaman depan blogger. Caranya dengan menambahkan kode gambar humbnail di bagian akhir kode tempel (embeded) Video Yotube.

Berikut ini contoh posting video youtube di blog dan memunculkan gambar thumbnail di halaman depan (auto readmore post) secara otomatis.

Gambar diambil dari default thumbnail image video youtube yang kita posting. Tidak upload gambar tambahan ke posting.



Ini kodenya:

<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/mu1KSw28snI?rel=0" width="560"></iframe><img border="0" height="0" src="https://i2.ytimg.com/vi/mu1KSw28snI/0.jpg" width="0" />

Kode di atas terdiri dari dua bagian

1. Kode Tempel Video Youtube yang kita ambil dari kode tempel di Youtube.

<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/mu1KSw28snI?rel=0" width="560"></iframe>

2. Kode Thumbnail Image Otomatis (Kode Tambahan)

<img border="0" height="0" src="https://i2.ytimg.com/vi/mu1KSw28snI/0.jpg" width="0" />

Kedua kode tersebut digabungkan:

<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/mu1KSw28snI?rel=0" width="560"></iframe><img border="0" height="0" src="https://i2.ytimg.com/vi/mu1KSw28snI/0.jpg" width="0" />

Anda hanya perlu mengubah kode warna merah sesuai dengan kode ID Video Youtube yang ada di address bar atau di kode tempel video youtube.

Demikian Cara Menampilkan Gambar Thumbnail Video Youtube Otomatis di Homepage Blogger. Good Luck! (www.contohblog.com).*

Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript

Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript

Cara Memasang Menu Responsive + Kotak Pencarian Menggunakan Selectnav Javascript. Selectnav Menu Responsive. Penampakannya seperti gambar di bawah ini.

Selectnav Menu Responsive

1. Tema > Edit HTML
2. Copas kode JavaScript berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Plugin: SelectNav.js
window.selectnav=function(){"use strict";var e=function(e,t){function c(e){var t;if(!e)e=window.event;if(e.target)t=e.target;else if(e.srcElement)t=e.srcElement;if(t.nodeType===3)t=t.parentNode;if(t.value)window.location.href=t.value}function h(e){var t=e.nodeName.toLowerCase();return t==="ul"||t==="ol"}function p(e){for(var t=1;document.getElementById("selectnav"+t);t++);return e?"selectnav"+t:"selectnav"+(t-1)}function d(e){a++;var t=e.children.length,n="",l="",c=a-1;if(!t){return}if(c){while(c--){l+=o}l+=" "}for(var v=0;v<t;v++){var m=e.children[v].children[0];if(typeof m!=="undefined"){var g=m.innerText||m.textContent;var y="";if(r){y=m.className.search(r)!==-1||m.parentNode.className.search(r)!==-1?f:""}if(i&&!y){y=m.href===document.URL?f:""}n+='<option value="'+m.href+'" '+y+">"+l+g+"</option>";if(s){var b=e.children[v].children[1];if(b&&h(b)){n+=d(b)}}}}if(a===1&&u){n='<option value="">'+u+"</option>"+n}if(a===1){n='<select class="selectnav" id="'+p(true)+'">'+n+"</select>"}a--;return n}e=document.getElementById(e);if(!e){return}if(!h(e)){return}if(!("insertAdjacentHTML"in window.document.documentElement)){return}document.documentElement.className+=" js";var n=t||{},r=n.activeclass||"active",i=typeof n.autoselect==="boolean"?n.autoselect:true,s=typeof n.nested==="boolean"?n.nested:true,o=n.indent||"?",u=n.label||"Menu",a=0,f=" selected ";e.insertAdjacentHTML("afterend",d(e));var l=document.getElementById(p());if(l.addEventListener){l.addEventListener("change",c)}if(l.attachEvent){l.attachEvent("onchange",c)}return l};return function(t,n){e(t,n)}}();$(document).ready(function(){selectnav('menu-main-nav');selectnav('menu-main-nav');});
$("#LinkList94").each(function () {
var k = "<ul id='menu-main-nav'><li><ul class='sub-menu'>";
$("#LinkList94 li").each(function () {
var a = $(this).text(),
o = a.substr(0, 1),
p = a.substr(1);
"_" == o ? (o = $(this).find("a").attr("href"), k += '<li><a href="' + o + '">' + p + "</a></li>") : (o = $(this).find("a").attr("href"), k += '</ul></li><li><a href="' + o + '">' + a + "</a><ul class='sub-menu'>")
});
k += "</ul></li></ul>";
$(this).html(k);
$("#LinkList94 ul").each(function () {
var k = $(this);
if (k.html().replace(/\s|&nbsp;/g, "").length == 0) k.remove()
});
$("#LinkList94 li").each(function () {
var k = $(this);
if (k.html().replace(/\s|&nbsp;/g, "").length == 0) k.remove()
})
});
$(document).ready(function ($) {
$("#menu").show();
$("ul.sub-menu").parent("li").addClass("has-children");
$('#search-icon').on('click', function () {
$('#nav-search').slideToggle(0)
});
//]]>
</script>

3. Copas kode CSS Menu Responsive berikut ini di atas kode ]]></b:skin>

#menu{display:none}
#main-nav{background-color:#003399;position:relative;width:100%;height:50px;font-size:12px;font-weight:700;}
#main-nav .row{height:50px;position:relative;padding:0}
li.li-home{float:left;display:inline-block;padding:0}
li.li-home a {padding-left:0 !important}
#main-nav li{position:relative;float:left;height:50px;line-height:50px;padding:0}
#main-nav li:hover a{color:#131313;}
#main-nav a{float:left;color:#fff;padding:0 16px;text-transform:uppercase}
#main-nav ul li.has-children a:after{content:"\f107";font-size:14px;font-family:FontAwesome;font-weight:400;position:relative;padding-left:5px}
#main-nav ul li ul{display:none;position:absolute;left:0;top:50px;z-index:100;background-color:#fff}
#main-nav ul li:hover > ul{display:block}
#main-nav ul li ul:before{content:"\f0d8";font-family:FontAwesome;color:#fff;position:absolute;left:20px;top:-13px;font-size:19px;height:19px;font-weight:400;line-height:1}
#main-nav ul li ul li{height:auto;clear:both;margin-left:0;line-height:normal;border-right:none;border-bottom:1px solid #eee}
#main-nav ul li ul li:last-child{border-bottom:none}
#main-nav ul li ul li::after{content:'';display:none}
#main-nav ul li ul li:hover {background-color: #f9f9f9;}
#main-nav ul li ul li a{min-width:150px;padding:0 16px;margin-top:0;font-size:12px;color:#666!important;font-weight:400;text-transform:capitalize;line-height:38px;transition:all 0s ease;border:none}
#main-nav ul li ul li a:hover {color:#003399!important}
#main-nav ul li ul li a:after{display:none}
#main-nav ul li ul ul{left:100%;top:0}
.selectnav{display:none}
#search-icon{position:absolute;right:0;top:0;display:block;line-height:50px;height:50px;color:#fff;font-size:18px;text-align:right;cursor:pointer;padding-left:10px}
#search-icon:hover{color:#131313}
#nav-search{position:absolute;right:0;top:50px;z-index:50;display:none;width:300px;height:60px;background-color:#fff}
#nav-search:before{content:"\f0d8";font-family:FontAwesome;color:#fff;position:absolute;right:0;top:-13px;font-size:19px;height:20px;font-weight:400;line-height:1}
#nav-search #searchform{box-sizing:border-box;overflow:hidden;height:60px;color:#666;position:relative;padding:12px}
#nav-search #s{position:relative;height:36px;padding:0 12px;border:1px solid #eee;font-family:'Poppins',sans-serif;font-size:12px;color:#666;box-sizing:border-box;width:100%;border-radius:2px;line-height:36px}
@media screen and (max-width: 920px) {
#menu-main-nav{display:none}
#menu{float:left;width:30%;height:50px}
.selectnav{display:block;border-radius:2px!important;background:rgba(255,255,255,0.2);color:#fff;height:30px;width:100%;line-height:30px;margin-top:10px;border:0}
.selectnav option {color:#222;}
}
@media screen and (max-width: 360px) {
#nav-search{width:100%}
}

4. Copas kode HTML  Menu Responsive berikut ini di bawah kode </header> atau setelah kode header blog Anda.

<!-- Main Menu -->
<nav id='main-nav'>
<div class='row'>
   <li class='li-home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <b:section id='menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
      <b:widget id='LinkList94' locked='true' title='Main Menu' type='LinkList' version='1'>
        <b:includable id='main'>
          <div class='widget-content'>
            <ul itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
              <b:loop values='data:links' var='link'>
                <li itemprop='name'><a expr:href='data:link.target' itemprop='url'><data:link.name/></a></li>
              </b:loop>
           </ul>
          </div>
        </b:includable>
      </b:widget>
    </b:section>
  <span id='search-icon'><i class='fa fa-search'/></span>
<div id='nav-search'>
<form action='/search/max-results=7' id='searchform' method='get'>
  <input id='s' name='q' placeholder='Type and hit enter...' type='text'/>
</form>
</div>
</div>
</nav>
<!-- Main Menu (end) -->
<div class='clear'/>

Kode LAYOUT
Simpan di atas kode ]]></b:skin> atau dijajaran kode body#layout yang sudah ada.

body#layout #main-nav{height:auto;min-height:87px;overflow:hidden;padding-bottom:1px}
body#layout #main-nav .section{display:block;background-color:#3598db;border-color:#2980b9}
body#layout #main-nav .section h4{padding-bottom:3px;color:#fff}
body#layout #main-nav .section .widget-content{border-color:#fff}
body#layout li.li-home{display:none}
body#layout #main-nav .row{height:auto}

Save!
Klik Layout/Tata Letak untuk memasukkan daftar menu/link menu menggunakan Link List Widget yang sudah ada.

Demikian Cara Memasang Menu Responsive Dropdown + Kotak Pencarian Menggunakan Selectnav Javascript. Good Luck & Happy Blogging! (www.contohblog.com).

Sumber

Cara Membuat Halaman Kontak

Cara Membuat Halaman Kontak

Cara Membuat Halaman Kontak di Blogger - Formulir Kontak Admin Blog

Berikut ini Cara Membuat Halaman Kontak di Blogger, yaitu halaman statis berisi formulir kontak admin blog. Pesan yang terkirim akan masuk ke email admin blog. (Lihat Demo).

Cara Membuat Halaman Kontak

Cara Membuat Halaman Kontak 

1. Layout > Add a Gadget > Pilih Contact Form

Pilih Contact Form


2. Pindahkan ke bawah widget Blog Post

Pindahkan ke bawah widget Blog Post

Save!

3. Klik Tema/Template > Edit HTML

Tema/Template > Edit HTML

4. Copas kode berikut ini di atas kode ]]></b:skin>

.widget.ContactForm,.widget #ContactForm1{display: none !important;}

5. Save!

BUAT HALAMAN STATIS KONTAK

1. Page > New Page
2. Isi judul dengan Kontak
3. Klik mode HTML di kiri atas (sampung Compose)
4. Copas kode berikut ini:

<style>
/* Contact Form */
#comments,.post_meta,#blog-pager{display:none}form{color:#666}#kontak{margin:auto;width:100%;max-width:470px}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#2f303f;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#2f303f;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial} @media only screen and (max-width:640px){#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%}}
</style>
<form id="kontak" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send Message"/>
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'blogID';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dblogID','//www.contohblogih.blogspot.com/','blogID');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'blogID', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));//]]> </script>

Ubah kode warna merah
blogID ada di address bar blog Anda saat menulis posting atau membuat halaman baru

blogID


Publish!
Beres.

Demikian Cara Membuat Halaman Kontak. Good Luck! (www.contohblog.com).*

Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian

Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian

Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian.

NAVIGASI Menu Blog Responsive Dropdown Simple plus Kotak Pencarian (Search Box) salah satu trending desain template blog.

Setelah CB berbagi tips membuat top menu responsive plus link media sosial, kali ini CB berbagi cara memasang menu lainnya.

Navigasi menu ini sederhana, bersih, latar putih, dilengkapi kotak pencarian. Live Demo bisa dilihat di blog demo Template Write. Ini penampakan desain menunya:

Menu Responsive Mobile

Menu Responsive Dropdown Simple plus Kotak Pencarian

Menu Responsive Desktop

Menu Responsive Dropdown Simple plus Kotak Pencarian

Cara Membuat Menu Responsive Dropdown + Kotak Pencarian

Langsung saja, berikut ini Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian seperti gambar di atas.

1. Tema > Edit HTML
2. Copas kode CSS berikut ini di atas kode ]]></b:skin>

.main-navigationnbt{border-bottom:solid 1px #eee;border-top:solid 1px #eee;margin-top:45px;}
.main-navigationnbt a {color: #444;font-family: 'Poppins',serif;font-size: 18px;line-height: 1.5;word-wrap: break-word;font-weight: 300;text-decoration: none;}
.menu-togglenbt,.main-navigationnbt a{line-height:58px;text-align:left;}
.main-navigationnbt{font-size:83.8%;position:relative;}
.menu-togglenbt{color:#444;cursor:pointer;text-transform:uppercase;}
.menu-togglenbt:hover{color:#666;}
.menu-togglenbt:before{content:"\f0c9";display:inline-block;font:normal 14px/1 FontAwesome;-webkit-font-smoothing:antialiased;margin-right:10px;position:relative;top:-1px;vertical-align:middle;}
.main-navigationnbt ul{display:none;list-style:none;margin:0;}
.main-navigationnbt.toggled ul{display:block;}
.menu-togglenbt,.main-navigationnbt a{padding-right:40px;}
.main-navigationnbt a{border-top:solid 1px #eee;display:block;}
.main-navigationnbt .current_page_item > a,.main-navigationnbt .current-menu-item > a,.main-navigationnbt .current_page_ancestor > a{color:#111;}
.main-navigationnbt ul ul a{padding-left:30px;}
.main-navigationnbt ul ul ul a{padding-left:45px;}
.main-navigationnbt ul ul ul ul a{padding-left:60px;}
.main-navigationnbt .search-formnbt{position:absolute;right:0;top:0;}
.main-navigationnbt .search-fieldnbt{background:url(https://4.bp.blogspot.com/-5E9T6vvulGk/WHrPw1i3vnI/AAAAAAAAP0k/Ch9F7Og54Lk7dc8Cco5NyrhetV2C3mEzACLcB/s1600/search-icon.png) 5px center no-repeat;background-size:24px 24px;border:none;cursor:pointer;height:36px;margin-top:11px;padding:0 0 0 34px;position:relative;width:1px;}
.main-navigationnbt .search-fieldnbt:focus{background-color:#fff;border:solid 1px #eee;cursor:text;max-width:100%;outline:0;width:240px;}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.main-navigationnbt .search-fieldnbt{background-image:url(https://3.bp.blogspot.com/-bS8egjHLnoc/WHrPw409OZI/AAAAAAAAP0o/2Ej-_wUIyD4L_IsGRpYYsT2vO29hQTRGwCLcB/s1600/search-icon%25402x.png);}}
.main-navigationnbt .search-submitnbt{display:none;}
.ie8 .site-headernbt .search-fieldnbt{padding-top:6px;}
@media screen and (min-width:783px){.main-navigationnbt{border:none;margin-top:30px;}.menu-togglenbt,.main-navigationnbt a{line-height:58px;}.menu-togglenbt{display:none;}.main-navigationnbt ul{display:block;}.main-navigationnbt a{border-top:none;padding-left:16px;padding-right:16px;}.main-navigationnbt a:hover{;}.main-navigationnbt ul ul a,.main-navigationnbt ul ul ul a,.main-navigationnbt ul ul ul ul a{padding-left:20px;}.main-navigationnbt li{position:relative;}.main-navigationnbt div.menunbt > ul,.main-navigationnbt ul.menunbt{letter-spacing:-0.4em;padding-right:30px;text-transform:uppercase;}.no-search .main-navigationnbt div.menunbt > ul,.no-search .main-navigationnbt ul.menunbt{padding-right:0;}.main-navigationnbt div.menunbt > ul > li,.main-navigationnbt ul.menunbt > li{display:inline-block;letter-spacing:normal;text-align:left;white-space:nowrap;}.main-navigationnbt div.menunbt > ul > li:first-child > a,.main-navigationnbt ul.menunbt > li:first-child > a{padding-left:0;}.main-navigationnbt div.menunbt > ul > li.page_item_has_children > a:after,.main-navigationnbt ul.menunbt > li.page_item_has_children > a:after,.main-navigationnbt div.menunbt > ul > li.menu-item-has-children > a:after,.main-navigationnbt ul.menunbt > li.menu-item-has-children > a:after{content:"\f107";display:inline-block;font:normal 16px/1 FontAwesome;-webkit-font-smoothing:antialiased;position:relative;right:-8px;top:1px;}.main-navigationnbt ul ul{background-color:#fff;box-shadow:0 1px 3px #ddd;left:-9999px;opacity:0;position:absolute;text-transform:none;top:100%;transition:opacity .3s ease-in-out;white-space:normal;width:220px;z-index:99999;}.main-navigationnbt ul ul ul{top:0;}.main-navigationnbt ul li:hover > ul{left:0;opacity:1;}.main-navigationnbt div.menunbt > ul > li:first-child:hover > ul,.main-navigationnbt ul.menunbt > li:first-child:hover > ul{left:-18px;}.main-navigationnbt ul ul li:hover > ul{left:100%;opacity:1;}.main-navigationnbt ul ul li a{border-top:1px solid #eee;line-height:1.5;padding-bottom:14px;padding-top:14px;}.main-navigationnbt  ul ul li.page_item_has_children > a,.main-navigationnbt  ul ul li.menu-item-has-children > a{padding-right:20px;}.main-navigationnbt  ul ul li.page_item_has_children > a:after,.main-navigationnbt  ul ul li.menu-item-has-children > a:after{content:">";position:absolute;right:8px;top:14px;}.main-navigationnbt .search-fieldnbt{margin-top:9px;transition:width .4s ease,background .4s ease;}
}

3. Copas kode HTML berikut ini di bawah kode penutup header, seperti </header>,  di template Anda.


<nav class='main-navigationnbt' id='site-navigationnbt' role='navigation'>
<div class='menu-togglenbt'>Menu</div>
<div class='main-navigation-contentnbt'>
<div class='menunbt-container'>
<ul class='menunbt'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li class='menu-item-has-children'><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
<li class='menu-item-has-children'><a href='#'>Parent Category</a>
<ul class='sub-menu'>
<li class='menu-item-has-children'><a href='#'>Child Category 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
<li><a href='#'>Featured</a></li>
</ul>
</div>
<form action='/search' class='search-formnbt' method='get' role='search'>
<label>
<span class='screen-reader-text'></span>
<input class='search-fieldnbt' name='q' placeholder='Search...' type='search' value=''/>
</label>
<input class='search-submitnbt' type='submit' value='Search'/>
</form>
</div>
</nav>


4. Copas Kode Javascript berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
*/
( function() {
var container, button, menu;
container = document.getElementById( 'site-navigationnbt' );
if ( ! container )
return;
button = container.getElementsByTagName( 'div' )[0];
if ( 'undefined' === typeof button )
return;
menu = container.getElementsByTagName( 'ul' )[0];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
if ( -1 === menu.className.indexOf( 'nav-menu' ) )
menu.className += ' nav-menu';
button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) )
container.className = container.className.replace( ' toggled', '' );
else
container.className += ' toggled';
};
} )();
( function() {
var is_webkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
is_opera = navigator.userAgent.toLowerCase().indexOf( 'opera' ) > -1,
is_ie = navigator.userAgent.toLowerCase().indexOf( 'msie' ) > -1;
if ( ( is_webkit || is_opera || is_ie ) && document.getElementById && window.addEventListener ) {
window.addEventListener( 'hashchange', function() {
var element = document.getElementById( location.hash.substring( 1 ) );
if ( element ) {
if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) )
element.tabIndex = -1;
element.focus();
}
}, false );
}
})();
//]]>
</script>
5. Kode Lain
Karena desain Menu Responsive Dropdown Simple plus Kotak Pencarian di atas menggunakan jenis huruf Poppins dan menggunakan Awesome Font, tambahkan kode berikut ini di bawah kode <head>

<link href='https://fonts.googleapis.com/css?family=Poppins:300,400,700&subset=latin-ext' rel='stylesheet'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>


6.  Save!

Menu Responsive Dropdown + Kotak Pencarian Lainnya

Cara pemasangan sama dengan di atas.

CSS

#nav_wrapper1{width:100%}
.nav_wrapper{border-bottom:1px solid #f1f1f1;left:0;top:0;position:relative;width:100%;transition:top .5s ease-out;background:#3f618c;height:50px;z-index:99999}
.btn{padding:10px 1%;margin:5px;color:#fff;text-decoration:none;transition:all 0.1s ease}
.btn:hover{transition:all 0.1s ease}
#search i{color:#fff;font-size:22px}
#search{float:right;font-size:22px;padding:15px;line-height:0;color:#fff;margin:0;font-weight:700;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
#search:hover{background:#111}
.search_box{clear:both;width:40%;background:#111;padding:0;margin:0;height:0;overflow:hidden;transition:all 0.1s ease-in-out;float:right;z-index:99999999999}
.search_box.active{height: auto;padding: 8px 0;width: 33%;position: absolute;right: 50px;top: 0;z-index: 50;}
.search_box input{width:60%;font-size:13px;margin:0 0 0 10px;padding:10px;border:none;background:#fff}
.search_box input:focus{outline:none}
.search_box input.search_icon{clear:both;width:25%;height:auto;padding:10px;margin:0;margin-right:10px;border:none;color:#fff;cursor:pointer;background:#0c6aff;opacity:1;transition:all 0.1s ease;float:right}
.search_box input.search_icon:hover{background:#FFF;color:#111}
.menu-link{display:none}
.spinner-master input[type=checkbox]{display:none}
.menu{width:100%;height:auto;background:#3f618c;color:#FF0000;transition:all 0.3s ease;margin-top:5px}
.menu ul{padding:0;margin:0;list-style:none;position:relative;display:inline-block}
.menu > li > ul.sub_menu{min-width:10em;padding:4px 0;background-color:#111;border:1px solid #fff}
.menu ul li{padding:0}
.menu > ul > li{display:inline-block}
.menu ul li a {display: block;text-decoration: none;color: #fff;font-size: 14px;height: 100%;text-transform: uppercase;font-weight: bold;}
.menu ul li a:hover{background:#111;color:#fff}
.menu ul li.hover > a{background:#111;color:#FFF}
.menu ul li > a{padding:14px}
.menu ul ul{display:none;position:absolute;top:100%;min-width:160px;background:#111}
.menu ul li:hover > ul{display:block}
.menu ul ul > li{position:relative}
.menu ul ul > li a{padding:10px 15px;height:auto;background:#666}
.menu ul ul > li a:hover{background:#111;color:#fff}
.menu ul ul ul{position:absolute;left:100%;top:0}
@media all and (max-width:860px){
.example-header .container{width:100%}
#search{color:#fff;padding:0 20px 0 5px;margin-top:25px}
.spinner-master *{transition:all 0.3s;box-sizing:border-box}
.spinner-master{position:relative;margin:15px;height:30px;width:30px;float:left}
.spinner-master label{cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:0;left:0}
.spinner-master .spinner{position:absolute;height:4px;width:100%;padding:0;background-color:#fff}
.spinner-master .diagonal.part-1{position:relative;float:left}
.spinner-master .horizontal{position:relative;float:left;margin-top:4px}
.spinner-master .diagonal.part-2{position:relative;float:left;margin-top:4px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal{opacity:0}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1{transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:10px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-12px}
a.menu-link{display:block;color:#fff;float:left;text-decoration:none;padding:10px 16px;font-size:1.5em}
a.menu-link:hover{color:#efa666}
a.menu-link:after{content:"2630";font-weight:normal}
a.menu-link.active:after{content:"2715"}
.menu{clear:both;min-width:inherit;float:none;top:0;position:relative}
.menu,.menu > ul ul{overflow:hidden;max-height:0;background-color:#39484d}
.menu > li > ul.sub-menu{padding:0;border:none}
.menu.active,.menu > ul ul.active{max-height:55em}
.menu ul{display:inline}
.menu li,.menu > ul > li{display:block}
.menu > ul > li:last-of-type a{border:none}
.menu li a{color:#fff;display:block;padding:0.8em;position:relative}
.menu li.has-submenu > a:after{content:"+";position:absolute;top:0;right:0;display:block;font-size:1.5em;padding:0.55em 0.5em}
.menu li.has-submenu > a.active:after{content:"-"}
.menu ul ul > li a{background:#666;padding:10px 18px 10px 30px;border-bottom:1px solid #111}
.menu ul li a:hover{background:#4b5f65;color:#fff}
.menu ul li.hover > a{background:#111;color:#fff}
.menu ul ul,.menu ul ul ul{display:inherit;position:relative;left:auto;top:auto;border:none}
.search_box.active{position:absolute;top:0;z-index:10;width:70%;right:45px;padding:7px 0}
.search_box input{width:50%;float:left}.search_box input.search_icon{width:30%;float:right;margin-right:14px;margin-top:-37px}}


HTML

<div class='nav_wrapper'>
<div class='ct-wrapper'>
 <div class='spinner-master'>
  <input id='spinner-form' type='checkbox'/>
  <label class='spinner-spin' for='spinner-form'>
    <div class='spinner diagonal part-1'/>
    <div class='spinner horizontal'/>
    <div class='spinner diagonal part-2'/>
  </label>
</div>
  <a class='btn' href='#search_box' id='search'><i class='fa fa-search'/></a>
<nav class='menu' id='menu'>
 <ul class='dropdown'>
   <li><a href='/' title='Link'> Home</a></li>
   <li><a href='/p/about.html' title='Link'> About</a></li> 
   <li><a href='/p/kontak.html' title='Link'> Kontak</a></li> 
   <li><a href='#' title='Link'>Categories <font size='1'>&#9660;</font></a>
<ul>
<li><a href='#' title='Link'>Label 1</a></li>
   <li><a href='#' title='Link'>Label 2</a></li>
  <li><a href='#' title='Link'>Label 3</a></li>
  <li><a href='#' title='Link'>Label 4</a></li>
  <li><a href='#' title='Link'>Label 5</a></li>
     </ul>
</li>
   <li><a href='#' title='Link'> Links</a></li> 
  </ul>
  </nav>
<form action='/search' class='search_box' id='search_box'> <input name='q' placeholder='Search here' type='text' value=''/> <input class='search_icon' type='submit' value='Search'/> </form>
</div>
    </div>
      <div class='clear'/>


JAVASCRIPT

<script type='text/javascript'>
$(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);
$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);
$(&quot;ul.dropdown li&quot;).hover(function() {
  $(this).addClass(&quot;hover&quot;)
}, function() {
  $(this).removeClass(&quot;hover&quot;)
});
var $menu = $(&quot;#menu&quot;),
  $menulink = $(&quot;#spinner-form&quot;),
  $search = $(&quot;#search&quot;),
  $search_box = $(&quot;.search_box&quot;),
  $menuTrigger = $(&quot;.has-submenu &gt; a&quot;);
$menulink.click(function(e) {
  $menulink.toggleClass(&quot;active&quot;);
  $menu.toggleClass(&quot;active&quot;);
  if ($search.hasClass(&quot;active&quot;)) {
    $(&quot;.menu.active&quot;).css(&quot;padding-top&quot;, &quot;50px&quot;)
  }
});
$search.click(function(e) {
  e.preventDefault();
  $search_box.toggleClass(&quot;active&quot;)
});
$menuTrigger.click(function(e) {
  e.preventDefault();
  var t = $(this);
  t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)
})
</script>


Demikian Cara Membuat Menu Responsive Dropdown Simple plus Kotak Pencarian di Blog Blogger. Good Luck and Happy Blogging! (www.contohblog.com).*

Lihat di CodePen
See the Pen Responsive Menu + Kotak Pencarian by CB Blogger (@cbblogger) on CodePen.

Cara Pasang Top Menu Responsive Dropdown + Social Link + Kotak Pencarian

Cara Pasang Top Menu Responsive Dropdown + Social Link + Kotak Pencarian

Cara Memasang Top Menu Responsive Dropdown + Social Link + Kotak Pencarian di atas Header Blog. Static Topmenu Baru.

Berikut ini cara memasang topbar menu responsive, dropdown menu, plus link media sosial dan kotak pencarian. Demonya bisa dilihat di blog demo Fresh View yang menjadi sumber kode. Ini penampakannya:

Top Menu Responsive Dropdown + Social Link + Kotak Pencarian

Top Menu Responsive Dropdown + Social Link + Kotak Pencarian

Cara Pasang Top Menu Responsive di Blogger

Tanpa Basa-basi, langsungsung saja ini dia kode dan cara pemasangan menu responsive plus link media sosial da kotak pencarian. Statis alias Fixed menu.

1. Tema > Edit HTML
2. Pasang kode CSS Topmenu Responsive berikut ini atas kode ]]></b:skin>

.wrapper { width: 100%; margin:0 auto; }
#responsive-menu { display: none; }
#main-nav-wrap { position: fixed; left: 0; top: 0; z-index: 10000; width: 100%; height: 40px; background-color: #fff; box-shadow: 0px 1px 4px rgba(0,0,0,0.08); }
#menu-main-nav {margin:0;}
#main-nav li { position: relative; height: 40px; float: left; border-left: 1px solid #eee; line-height: 40px;margin:0;list-style:none; }
#main-nav li:last-child { border-right: 1px solid #eee; }
#main-nav a { display: inline-block; height: 40px; float: left; color: #444; padding: 0 12px; font-size: 12px; font-weight: 600; line-height: 42px; text-transform: uppercase; transition: background .3s; }
#main-nav a:hover {background-color: #F5F5F5;}
.drop-sign { float: right; margin-left: 3px; color: #FA7700; }
#main-nav ul li ul { position: absolute; left: -1px; top: 33px; z-index: 100; display: none; float: none; border: 1px solid #eee; background-color: #fff; }
#main-nav ul li:hover > ul { display: block; }
#main-nav ul li ul li { height: auto; clear: both; margin-left: 0; line-height: normal; border-right: none; border-left: none; border-bottom: 1px solid #eee;; }
#main-nav ul li ul li:last-child { border-right: none; border-bottom: none; }
#main-nav ul li ul a { min-width: 208px; padding: 0 12px; margin-top: 0; font-size: 12px; font-weight: 400; line-height: 42px; transition: all .3s; border: none; }
#main-nav ul li ul .current-menu-item a { background-color: transparent; }
#main-nav ul li ul .current-menu-item a:hover { background-color: #F5F5F5; }
#main-nav ul li ul ul { left: 100%; top: -1px; }
#nav-elements { height: 40px; float: right; }
#nav-social {float: left;}
#nav-social li { height: 40px; float: left; border-left: 1px solid #eee;margin:0;list-style:none; }
#nav-social li:last-child {border-right: 1px solid #eee;}
#nav-social a { display: block; width: 40px; height: 40px; background: url(//2.bp.blogspot.com/-M7xDlNkYDtM/V6hyLsl94_I/AAAAAAAACPI/-D2lIyqMLIAahtchRb2UJxeyNZnV98Q8ACK4B/s1600/nav-social.png) no-repeat; text-indent: -9999px; transition: background .3s; }
#nav-social ul {margin:0;}
#nav-social a:hover {background-color: #F5F5F5;}
#nav-social .facebook a {background-position: -39px 0;}
#nav-social .instagram a {background-position: -78px 0;}
#nav-social .youtube a {background-position: -117px 0;}
#nav-social .soundcloud a {background-position: -156px 0;}
#nav-social .google a {background-position: -195px 0;}
#nav-social .vimeo a {background-position: -234px 0;}
#nav-search-icon { display: block; width: 40px; height: 40px; float: right; margin-left: -1px; border-left: 1px solid #eee; border-right: 1px solid #eee; background: url(//1.bp.blogspot.com/-ZaRDueIFZsA/V6hxyGma9TI/AAAAAAAACPA/cuM2muGOiI4g1sEO4FlwMwxW5OMtd0gYQCK4B/s1600/header-search-icon.png) no-repeat; cursor: pointer; transition: background .3s; }
#nav-search-icon:hover, #nav-search-icon .visible-search { background-color: #F5F5F5; }
#nav-search { position: absolute; top: 40px; display: none; width: 252px; height: 44px; border: 1px solid #eee; background-color: #fff; }
#nav-search #s { width: 157px; height: 34px; color: #777; padding-right: 75px; padding-left: 10px; margin: 4px 0 0 4px; border: 1px solid #eee; background-color: #fff; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; }
#nav-search #s:focus { color: #444; outline: none; }
#nav-search #searchsubmit { position: absolute; right: 7px; top: 7px; height: 30px; color: #fff; padding: 0 9px; border: none; background-color: #444; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; line-height: 29px; text-transform: uppercase; cursor: pointer; transition: background .3s; }
#nav-search #searchsubmit:hover {background-color: #FA7700;}
@media screen and (max-width:960px) {
#sb-search{float:none!important;}
#responsive-menu { position: relative; z-index: 15; display: inline-block; height: 40px; float: left; padding: 0 11px; color: #444; border-right: 1px solid #eee; border-left: 1px solid #eee; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 42px; text-transform: uppercase; transition: background .3s; }
#responsive-menu:hover {background-color: #F5F5F5;}
#main-nav .menu { position: absolute; left: 0; top: 41px; z-index: 4000; display: none; border-right: 1px solid #eee; border-left: 1px solid #eee; background-color: #fff; }
#main-nav li { height: 39px; clear: both; float: none; line-height: 34px; border-left: none; border-bottom: 1px solid #eee; }
#main-nav li:last-child {border-right: none;}
#main-nav a {min-width: 250px;}
#main-nav li a:hover, #main-nav ul li ul .current-menu-item a:hover {color: #555;background-color: transparent;}
#main-nav ul li ul li {height: 39px;}
#main-nav ul li ul li:last-child {border-bottom: 1px solid #eee;}
#main-nav ul li ul li a {padding-left: 30px;}
.drop-sign, #main-nav ul li ul .drop-sign {display: none;}
#main-nav .menu li ul { position: static; display: block !important; float: none; clear: both; border: none; } #main-nav ul li ul a {font-weight: 600;}
}

3. Copas kode HTML Topmenu Responsive berikut ini di bawah kode <body> atau <body .... ada kode lainnya... >

<div id='main-nav-wrap'>
<div class='wrapper group'>
<div id='responsive-menu'><i aria-hidden='true' class='fa fa-align-justify'></i> Menu</div>
<nav id='main-nav'>
<div class='menu-main-nav-container'><ul class='menu' id='menu-main-nav'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-5017' id='menu-item-5017'><a href='#'>Dropdown <i aria-hidden='true' class='fa fa-angle-down'></i></a>
<ul class='sub-menu'>
<li class='menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2607 current_page_item menu-item-5023' id='menu-item-5023'>
<a href='#'>Dropdown 1</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5021' id='menu-item-5021'>
<a href='#'>Dropdown 2</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5018' id='menu-item-5018'>
<a href='#'>Dropdown 3</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5022' id='menu-item-5022'>
<a href='#'>Dropdown 4</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5020' id='menu-item-5020'>
<a href='#'>Dropdown 5</a></li>
</ul>
</li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5025' id='menu-item-5025'>
<a href='#'>Fashion</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5026' id='menu-item-5026'>
<a href='#'>Music</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5024' id='menu-item-5024'>
<a href='#'>Movies</a></li>
<li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-5027' id='menu-item-5027'>
<a href='#'>Contact</a></li>
</ul></div>
</nav>
<div id='nav-elements'>
<div id='nav-social'>
<ul>
<li class='twitter' title='Twitter'>
<a href='#' target='_blank'>Twitter</a></li>
<li class='facebook' title='Facebook'>
<a href='#' target='_blank'>Facebook</a></li>
<li class='instagram' title='Instagram'>
<a href='#' target='_blank'>Instagram</a></li>
<li class='youtube' title='YouTube'>
<a href='#' target='_blank'>YouTube</a></li>
<li class='soundcloud' title='SoundCloud'>
<a href='#' target='_blank'>SoundCloud</a></li>
</ul>
</div>
<span id='nav-search-icon'></span>
<div id='nav-search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value='Enter search term ...'/>
<input id='searchsubmit' type='submit' value='Search'/>
</form>
</div>
</div>
</div>
</div>
<div class='clear'/>

Ganti nama menu dan linknya.

4. Pasang kode topbar menu statis berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$("#nav-search-icon").on("click", function() {
    $("#nav-search").fadeToggle(250);
    $(this).toggleClass("visible-search");
});
var $navFormValue = $("#nav-search #s").val();
$("#nav-search #s").blur(function() {
    if (0 === this.value.length) this.value = $navFormValue;
});
$("#nav-search #s").focus(function() {
    if (this.value === $navFormValue) this.value = "";
});
var $formValue = $(".widget #s").val();
$(".widget #s").blur(function() {
    if (0 === this.value.length) this.value = $formValue;
});
$(".widget #s").focus(function() {
    if (this.value === $formValue) this.value = "";
});
var $errorFormValue = $(".error-wrap #s").val();
$(".error-wrap #s").blur(function() {
    if (0 === this.value.length) this.value = $errorFormValue;
});
$(".error-wrap #s").focus(function() {
    if (this.value === $errorFormValue) this.value = "";
});
$("#responsive-menu").on("click", function() {
    $("#main-nav ul").slideToggle(250);
});
$(window).resize(function() {
    var a = $(window).width();
    var b = $("#main-nav ul");
    if (a > 1010 && b.is(":hidden")) b.removeAttr("style");
});
//]]>
</script>

Save!

Pastikan ada link ke kode jQuery di template Anda. Jika tidak ada, pasang kode berikut ini di atas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Beres.
Demikian Cara Memasang Top Menu Responsive Dropdown + Social Link + Kotak Pencarian di atas Header Blog. Static Topmenu Baru.

Lihat Topmenu Lainnya

Good Luck and Happy Blogging! (www.contohblog.com).*

Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider

Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider

Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider.

Nivo Slider dikenal sebagai slider terbaik. Meskipun Featured Image Slider tidak disarankan karena memperlambat loading blog, masih banyak blogger yang mau memasangnya dengan alasan "keindahan" tampilan halaman depan blog.

Berikut ini CB share Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider. Penampakannya seperti gambar di bawah ini:

Cara Memasang Featured Post Image Nivo Slider

Cara Memasang Featured Post Image Nivo Slider

Berikut ini cara Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider. Anda bisa pilih label tertentu untuk ditampilkan di slider ini.

1. Pastikan ada link ke kode jQuery di template blog Anda. Jika belum ada, copas kode berikut ini di atas kode </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

atau

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'/>

2. Copas kode berikut ini di atas kode </head> -- di bawah kode jQuery tadi.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $(".recent-slider").each(function () {
        $(this).append('<div id="slider"></div>');
        var e = $(this).attr("data-label"),
            n = "/feeds/posts/summary/-/" + e + "?max-results=" + 5 + "&alt=json-in-script",
            l = $(this);
        $.ajax({
            type: "GET",
            url: n,
            async: true,
            contentType: "application/json",
            dataType: "jsonp",
            success: function (s) {
                for (var r = 0; r < s.feed.entry.length; r++) {
                    for (var n = s.feed.entry[r], i = 0; i < n.link.length; i++)
                    if ("alternate" == n.link[i].rel) {
                        var o = n.link[i].href;
                        break
                    }
                    try {
                        var c = n.media$thumbnail.url.replace("s72-c", "h300-w1200-no")
                    } catch (p) {
                        var c = "https://1.bp.blogspot.com/-WcK_MwbGkl4/V75lPlr5tAI/AAAAAAAAFQ8/p4Db__YpRIUwAJib_2rfetQ03bPjVRZvQCLcB/s1600/No%2Bimage.jpg"
                    }
                    var d = n.title.$t,
                        u = n.summary.$t.substr(0, 180),
                        h = '<a href="' + o + '"><img src="' + c + '" title="<a href=\'' + o + "'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
                    l.find("#slider").append(h)
                }
                $("#slider").nivoSlider({
                    effect: "random",
                    pauseTime: 5e3
                })
            }
        })
    })
});
//]]>
</script>

3. Copas kode CSS Featured Post Image Nivo Slider berikut ini di atas kode ]]></b:skin>

/* The Nivo Slider styles */
.nivoSlider{position:relative;width:100%;height:300px;overflow:hidden;text-align:Center}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:300px!important}
.top-l-slider .nivoSlider{position:relative;width:100%;height:400px;overflow:hidden;text-align:Center}
.top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0}
/* The slices and boxes in the Slider */
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img{display:block}
/* Caption styles */
.nivo-caption{position:absolute;bottom:10px;left:5%;display:block;width:90%;text-align:center;font:400 26px 'segoe ui',sans-serif;z-index:8;-webkit-box-sizing:border-box;/* Safari/Chrome,other WebKit */
-moz-box-sizing:border-box;/* Firefox,other Gecko */
box-sizing:border-box;/* Opera/IE 8+ */
color:#fff}
.nivo-caption p{text-align:Center;font:400 13px 'segoe ui',sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:4px;background:#222;line-height:21px}
.nivo-caption a{color:#ecf0f1}
.nivo-caption h3{text-align:center;padding:5px;display:inline-block;border-radius:5px;margin:0;line-height:37px!important;background:#e74c3c;font:400 30px 'segoe ui',sans-serif}
.nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}
.nivo-html-caption{display:none}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a{position:absolute;top:50%;margin-top:-15px;z-index:9;font-size:0;display:block;width:30px;height:30px;border-radius:5px;line-height:30px!important;background-color:rgba(255,255,255,0.5);cursor:pointer;/* border:3px solid #fff;*/
box-shadow:1px 1px 1px rgba(0,0,0,0.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.4)}
.nivo-prevNav{left:10px}
.nivo-prevNav:before{content:'\2190';position:Absolute;left:0;top:0;display:block;z-index:100;font:400 20px sans-serif;color:#fff;height:30px;width:30px;line-height:30px!important;text-align:center}
.nivo-nextNav:before{content:'\2192';position:Absolute;left:0;top:0;display:block;z-index:100;font:400 20px sans-serif;color:#fff;height:30px;width:30px;line-height:30px!important;text-align:center}
.nivo-nextNav{right:10px}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav{text-align:center;z-index:100;position:absolute;top:10px;right:10px;font-size:0}
.nivo-controlNav a{cursor:pointer;display:block;width:20px;height:20px;background:#222;float:left;border-radius:10px;margin-right:5px}
.nivo-controlNav a.active{background:#e74c3c}

4. Save! Simpan template.
5. Klik Layout > Add a Gadget > pilih HTML/JavaScript
6. Masukkan kode berikut ini:

<div class='recent-slider' data-label='LabelName'></div>

Ganti LabelName dengan nama Label, misalnya Featured.

7. Pindahka widget baru ini ke atas widget "Blog Post".
8. Save!

Agar tampil hanya di halaman depan (homepage), gunakan tag kondisional untuk mengatur posisi wigdet.

Demikian Cara Memasang Featured Post Image Slider Berdasarkan Label dengan Nivo Slider. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber

SEO Booster - Template Blog Simple Bersih Ringan Terbaru Premium

SEO Booster - Template Blog Simple Bersih Ringan Terbaru Premium

SEO Booster - Template Blog SEO Friendly, Responsive, Simple Bersih Ringan. Terbaru 2018. Ini template premium terbaru CB Blogger. Didesain simple dan bersih, sudah menyesuaikan dengan algoritma dan skema kode blogger terbaru Blogger.

Template blogger simple SEO friendly terbaru terbaik. Didesain berdasarkan tema bawaan blogger yang sudah seo friendly menjadi responsive (mobile-friendly,) berasih, ringan, mudah terindeks mesin telusur, mengundang banyak pengunjung, AdSense ready.


SEO Booster Template Blogger Simple SEO Friendly Terbaru 2018

SEO Booster Template Blogger Simple SEO Friendly Terbaru 2018

SEO Booster Template Blogger Simple SEO Friendly Terbaru 2018

SEO Booster Template Blogger Simple SEO Friendly Terbaru 2018

SEO Booster Template Blogger Simple SEO Friendly Terbaru 2018.
Premium | Rp 150.000 | DEMOORDER

Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label

Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label

Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label
Cara Memasang Posting Terbaru Plus Gambar di Sidebar Blog & Recent Post Per Label

Berikut ini cara memasang widget posting terbaru plus gambar thumbnail di sidebar atau footer blog.

Kode Recent Posts berikut ini juga bisa digunaka untuk menampilkan Recent Per Label atau Tulisan Terbaru berdasarkan Kategori/Label.

Selain itu, dengan kode di bawah ini, kita bisa bisa menampilkan daftar posting terbaru dari blog lain.

Widget Recent Post versi simple --hanya menampilkan judul-- bisa dipasang dengan menggunakan widget Feed bawaan blogger, atau mengguanakan kode yang sudah CB share di cara menampilkan posting terbaru simple.

Cara Memasang Posting Terbaru Plus Gambar

Berikut ini Cara Memasang Posting Terbaru Plus Gambar Thumbnail di Sidebar Blogger.

1. Template/Tema > Edit HTML

Template/Tema > Edit HTML

2. Simpan (Copas) kode CSS Posting Terbaru plus Gambar Thumbbail berikut ini di atas kode ]]></b:skin>

/* CSS Recent Post  Thumbnail */
img.rct-thumb{width:72px;height:72px}
.rct-thumb {float: left;margin-right: 12px;width:72px;height:72px}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #f1f1f1}
ul.recent-by-tag li:first-child{padding:0;}
.recent-by-tag li{font-size:15px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-size:15px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:11px;margin:10px 0 0}
.recent-by-tag li:last-child {border-bottom:none;padding-bottom:0px;margin-bottom:0px;}

3. Simpan kode JavasScript Recent Post Thumbail Image berikut ini di atas kode </head>

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;
</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_top" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script> 

4. Save! Simpan Template.

Langkah berikutnya pemasangan kode di widget.

5. Klik Layout/Tata Letak > Add a Gadget > pilih HTML/JavaScript

Tata Letak > Add a Gadget > pilih HTML/JavaScript

6. Isi Judul denga "Recent Posts" atau "Posting Terbaru"
7. Copas kode berikut ini di kolom content.

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

8. Save! Beres.

Recent Post Per Label

Untuk menampilka Recent Post Per Label, ulangi langkah no. 5 dan dan copas kode berikut ini:

<script type="text/javascript" src="/feeds/posts/default/-/Label?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

Ganti Label dengan nama label posting blog Anda.

Recent Post dari Blog Lain

Untuk memasang Recent Post dari blog lain, ulangi langkah no. 5 dan pasang kode berikut ini:

<script type="text/javascript" src="http://alamatblog.blogspot.com/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

Ganti http://alamatblog.blogspot.com dengan alamat blog yang posting terbarunya akan ditampilkan di blog Anda.

Demikian Cara Memasang Posting Terbaru Plus Gambar, Recent Post Per Label, dan Posting Terbaru dari Blog lai  di Sidebar Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Contact Form

Name

Email *

Message *