View AllFeatured

Panduan Lengkap Google AdSense: Pengertian, Cara Daftar, Syarat Blog, Cara Kerja

Panduan Lengkap Google AdSense: Pengertian, Cara Daftar, Syarat Blog, Cara Kerja

Panduan Lengkap Google AdSense
Panduan Lengkap Google AdSense: Pengertian, Cara Daftar, Syarat Blog, Cara Kerja. Tips bagi Pemula.

Google AdSense adalah program periklanan Google. Google menerima pemasangan iklan dari pemasang iklan di Google AdWords, lalu ditayangkan di situs-situs yang menjadi penayang iklan (publisher), termasuk blog, secara otomatis.

Penayang iklan Google AdSense hanya memasang kode yang disediakan Google dan bisa memblokir atau memfilter iklan yang dimunculkan di blog.

Google AdSense bukan hanya andalan para blogger dalam mendapatkan uang dari blog (make money blogging). Google AdSense juga menjadi sumber utama pendapatan situs-situs berita (media online).

Menurut laman resmi Google AdSense, Google AdSense adalah cara gratis dan mudah untuk memperoleh uang dengan menampilkan iklan bertarget di samping konten online atau blog/situs web.

Dengan AdSense, kita dapat menampilkan iklan yang menarik dan relevan bagi pengunjung blog, bahkan menyesuaikan tampilan serta nuansa iklan agar sesuai dengan situs web kita.

Google AdSense menampilkan iklan-iklan yang dipasang pengiklan di Google AdWords. Setelah itu, Google akan membayar kita untuk iklan yang ditampilkan di blog berdasarkan klik pengguna pada iklan atau tayangan iklan, tergantung pada jenis iklannya. 

AdSense memberikan akses cepat dan otomatis ke banyak sumber permintaan pengiklan, yang berarti persaingan untuk mendapatkan ruang iklan, iklan yang lebih relevan, dan iklan untuk semua konten online kita.

AdSense akan secara otomatis menayangkan iklan di blog yang ditargetkan ke konten atau pemirsa.

Kita dapat memilih berbagai ukuran dan format iklan, lalu mengubah tampilan iklan agar sesuai dengan situs web/blog kita.

Cara Mendaftarkan Blog ke Google AdSense

Bagaimana cara mendaftar ke AdSense? Itu pertanyaan para blogger yang baru memulai blogging dan ingin menjadi penayang iklan Google.

Jika sudah siap mulai menggunakan AdSense, kita dapat mengajukan permohonan di sini. Pihak Google akan meninjau permohonan dan menghubungi kita melalui email selama sekitar seminggu kemudian.

Pengguna blogger lebih mudah mendaftarkan blognya ke Google AdSense, yaitu dengan hanya klik bagian "Penghasilan" (Earning) di Dashboard Blogger.

Jika tidak ada, pastikan setelan dasbor blogger Anda dalam bahasa Inggris atau lakukan cara ini:
  1. Klik Setelan di deretan kiri bawah
  2. Klik Bahasa dan pemformatan di bawahnya
  3. Ubah setelan bahasa Indonesia menjadi bahasa Inggris.
  4. Klik Simpan setelan di pojok kanan atas
  5. Selesai.
memunculkan penghasilan earning blogger


memunculkan penghasilan earning blogger

Syarat Diterima Google AdSense

Secara umum, syarat utama diterima menjadi publisher Google AdSense adalah sebagai berikut:

  1. Admin atau pemilik blogger berusia minimal 18 tahun. 
  2. Isi atau postingan blog bukan konten salinan (bukan hasil copas), tapi tulisan sendiri, asli, orisinal, juga bukan berisi makalah tugas sekolah/kuliah.
  3. Blog memiliki konten berkualitas atau bermanfaat bagi pengguna/pembaca.
  4. Banyak pengunjung. Jumlah pengunjung tidak ditentukan, namun ditaksir sekitar 250-1000 pengunjung tiap hari.

Setelah diterima menjadi publisher, ada aturan yang harus dipatuhi. Jika melanggar, iklan Google akan dinonaktifkan, bahkan akun AdSense akan disuspend.

"Penayang yang memilih untuk menggunakan layanan AdSense harus mematuhi kebijakan program. Jika Anda gagal mematuhi kebijakan ini, kami akan menonaktifkan akun AdSense Anda," demikian kata Goolgle.

"Dalam banyak kasus, kami lebih suka bekerja dengan penayang untuk mencapai kepatuhan kebijakan; namun, kami berhak untuk tidak menampilkan iklan yang melanggar kebijakan ini, menonaktifkan penayangan iklan pada laman yang melanggar kebijakan ini, menahan pembayaran, atau menutup akun yang mengganggu."

Cara Kerja Google AdSense

Cara Kerja Google AdSense

Google AdSense atau iklan Google akan tampil di blog kita setelah kodenya kita buat dan pasang di blog.

Umumnya, iklan Google dipasang di sidebar, di atas judul, di tengah artikel, dan di bawah artikel, atau di bagian yang mudah dilihat oleh pengunjung.

Kita akan dikirim/dibayar setelah penghasilan mencapai batas tertentu yang bisa kita tentukan sendiri, umumnya setelah mencapai US$100 atau sekitar sejutaan lebih.

Penghasilan AdSense diperoleh dengan dua cara:

  1. Klik (CPC)
  2. Tayang (CPM)
Kedua istilah di atas intinya adalah untuk iklan muncul di blog, kita baru akan mendapatkan bayaran atau penghasilan dari Google AdSense jika ada pengujung yang melakukan klik pada iklan tersebut dan/atau jika iklan yang muncul sudah tampil sebanyak 1.000 kali.


CPC
CPC singkatan dari Cost Per Click atau Biaya Per Klik (BPK). Artinya iklan yang akan menghasilkan jika diklik oleh pengunjung. Kita jangan klik sendiri karena hal itu pelanggaran.

CPM
CPM adalah jenis AdSense yang baru menghasilkan jika sudah ditampilkan (terbuka) sebanyak 1.000 kali.

Bagaimana mengoptimalkan pendapatan AdSense?

Langkah awal sih keep udating dan dapatkan pengunjung (trafik/pageviews) sebanyak-banyaknya. Makin banyak pengunjung blog, maka peluang mendapatkan uang dari AdSense kian terbuka.

Demikian ulasan ringkas tentang Panduan Lengkap Google AdSense: Pengertian, Cara Daftar, Syarat, Cara Kerja, Pengoptimalan, khusus bagi pemula. Yang sudah berpengalaman mah, silakan share aja.

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

Cara Mengganti Header Blog & Favicon Logo Blogger dengan Gambar Sendiri

Cara Mengganti Header Blog & Favicon Logo Blogger dengan Gambar Sendiri

Cara Mengganti Header Blog & Favicon Logo Blogger dengan Gambar Sendiri.

SETIDAKNYA ada dua gambar logo yang harus disiapkan dan dipasang di blog sebagai identitas yang membedakan blog kita dengan blog orang lain, yaitu logo header blog (judul/nama blog) dan favicon (favorite icon).

Logo Header yaitu logo pengganti teks nama blog yang dipasang di widget header. Contohnya blog CB ini menggunakan logo gambar berikut ini:

logo header blog gambar

Ukuran

Ukuran Gambar Logo header blog biasanya sekitar 300x60 pixel. Bisa dibuat sendiri dengan menggunakan CorelDraw seperti yang CB lakukan. Bisa juga dengan menggunakan Online Tool pembuat logo, misalnya Logo Maker.

Cara Pasang Header Logo Blog

Cara memasangnya gambar logo header blog sebagai berikut:

1. Layout > Klik Edit widget Header
2. Klik Choose File > Ambil File gambar logo yang sudah disiapkan.

Cara Mengganti Header Blog & Favicon Logo Blogger dengan Gambar Sendiri

3. Tunggu hingga gambar muncul.
4. Klik "Instead of title and description"
5. Save!

Itu dia cara memasang logo gambar judul blog.

Cara Mengganti Favicon Blog

Header Blog tidak wajib pake gambar. Yang wajib diganti, biar tidak menggunakan favicon bawaan blogger, yaitu mengganti favicon. Ini contohnya:

Favicon Logo Blogger
1. Siapkan gambar kecil ukuran persegi, misalnya 50x50 Pixel atau 100px x 100px.
2. Klik Layout > Edit Widget Favicon 

Layout > Edit Widget Favicon

3. Ambil gambar yang sudah disiapkan.

4. Klik Save/Simpan.

Demikian Cara Mengganti Header Blog & Favicon Logo Blogger dengan Gambar Sendiri. Good Lucki & Happy Blogging! (www.contohblog.com).*

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

Contact Form

Name

Email *

Message *