Cara Membuat Kolom Komentar Blogger Keren

Cara Membuat Kolom Komentar Blogger Keren

Cara Membuat Kolom Komentar Blogger Keren. 

Blogger sudah lama merilis threaded comment system yang merupakan fitur terbaru kolom atau kotak komentar di blog. Tampilannya simple.

Jika Anda ingin mengubahnya menjadi kolom komentar yang lebih menarik, mirip kotak komentar di blog Wordpress, maka lakukan langkah di bawah ini.

Demo tanpilannya seperti ini:

Berikut ini cara memasangnya:

1. Tema > Klik Edit HTML

2. Temukan dan ganti kode berikut ini

<b:include data='post' name='comments'/>

3. Ganti dengan kode berikut ini:

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Jika kode no 2 ada dua kode, ganti dua-duanya.

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

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

5. Save! Simpan Tempat!

Demikian cara Cara Membuat Kolom Komentar Blogger Keren sebagaimana gambar di atas.

Kotak Komentar Keren Lainnya

Berikut ini kode kolom komentar lainnya. Desainnya seperti ini.

Kode CSS
Copas kode berikut ini di atas kode  ]]></b:skin>

#comments-block{margin:15px 0}
#comments-block .comment-author{border-radius:4px 4px 0 0;background:rgba(0,0,0,0.03);padding:15px 15px 0}
#comments-block .comment-body{background:rgba(0,0,0,0.03);padding:30px 15px 25px;margin:0}
#comments-block .comment-body p{margin:0}
#comments-block .comment-footer{border-radius:0 0 4px 4px;background:rgba(0,0,0,0.03);padding:0 15px 15px;margin:0 0 20px;font-size:.88rem}
.comment-form{margin-top:20px}
#comments-block .avatar-image-container{display:inline-block;margin-right:4px;margin-bottom:-10px;background:#888;border-radius:17px}
#comments-block .avatar-image-container img{display:block}
p.comment-footer{display:inline-block;font-weight:700}
h4#comment-post-message{display:none;margin:0}
.comments{clear:both;margin-top:10px;margin-bottom:0}
.comments .comments-content{font-size:14px;margin-bottom:30px}
.comments .comments-content .comment-thread ol{text-align:left;margin:13px 0;padding:0;list-style:none}
.comment .avatar-image-container{background:rgba(0,0,0,0.03);border-radius:20px;float:left;max-height:36px;overflow:hidden;width:36px;height:36px;background-repeat:no-repeat;background-position:8px 7px}
.comments .avatar-image-container img{max-width:36px;border-radius:17px}
.comments .comment-block{background:rgba(0,0,0,0.03);position:relative;padding:20px;margin-left:45px;border-radius:10px;word-break:break-word}
.comments .comments-content .comment-replies{margin:10px 0;margin-left:45px}
.comments .comments-content .comment-thread:empty{display:none}
.comments .comment-replybox-single{margin:20px 0}
.comments .comment-replybox-thread{margin:20px 0}
.comments .comments-content .comment{margin-bottom:6px;padding:0}
.comments .comments-content .comment:first-child{padding:0;margin:0}
.comments .comments-content .comment:last-child{padding:0;margin:0}
.comments .comment-thread.inline-thread .comment,.comments .comment-thread.inline-thread .comment:last-child{margin:0 0 5px 14%}
.comment .comment-thread.inline-thread .comment:nth-child(6){margin:0 0 5px 12%}
.comment .comment-thread.inline-thread .comment:nth-child(5){margin:0 0 5px 10%}
.comment .comment-thread.inline-thread .comment:nth-child(4){margin:0 0 5px 8%}
.comment .comment-thread.inline-thread .comment:nth-child(3){margin:0 0 5px 4%}
.comment .comment-thread.inline-thread .comment:nth-child(2){margin:0 0 5px 2%}
.comment .comment-thread.inline-thread .comment:nth-child(1){margin:0 0 5px}
.comments .comments-content .comment-thread{margin:0;padding:0}
.comments .comments-content .inline-thread{margin:0}
.comments .comments-content .icon.blog-author{display:inline;height:18px;margin:0 0 -4px 6px;width:18px}
.comments .comments-content .icon.blog-author::after{content:"author";background:rgba(0,0,0,0.36);color:#fff;padding:2px 6px;border-radius:10px;font-size:11px}
.comments .comments-content .comment-header{font-size:14px;margin:0 0 15px}
.comments .comments-content .comment-content{margin:0 0 15px;text-align:left;line-height:1.6}
.comments .comments-content .datetime{margin-left:6px}
.comments .comments-content .datetime a{color:#707070}
.comments .comments-content .user{font-weight:700;font-style:normal}
.comments .comment .comment-actions a{display:inline-block;font-size:13px;line-height:15px;margin:4px 8px 0 0}
.comments .continue a{display:inline-block;font-size:13px;padding:.5em}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{text-decoration:underline}
.pesan-komentar:not(:empty){padding:20px;background:#f9f9f9;margin-bottom:30px}
.deleted-comment{font-style:italic;opacity:.5}
.comments .comments-content .loadmore{cursor:pointer;margin-top:3em;max-height:3em}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;margin:.3em;overflow:visible;padding-right:4px;width:7px}
.comments .thread-expanded .thread-arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==) no-repeat scroll 0 0 transparent}
.comments .hidden{display:none}
@media screen and (max-device-width:480px) {
.comments .comments-content .comment-replies{margin-left:0}
}

Cara Menyembunyikan Tanggal Komentar

Untuk menghilangkan atau menyembunyikan tanggal komentar, ganti kode:

.comments .comments-content .datetime {  margin-left:6px;color: #999;font-style: italic;font-size: 11px;float: right;}

menjadi 

.comments .comments-content .datetime {display:none}

Kolom Komentar Blogger Terbaru

Template Blogger Versi 3 (Contempo, Soho, Emporio, dan Notable) memiliki kotak atau kolom komentar yang bagus, simple, keren. Berbeda dengan kolom komenta template Blogger versi 1 (classic theme) dan versi 2 (Simple dkk.).

Ini penampakannya.

Berikut ini cara memasang kotak komentar bawaan Blogger versi terbaru, tanpa harus ganti template secara keseluruhan.

1. Copas kode berikut ini di bawah kode <b:skin><![CDATA[ 

<!-- Variable definitions -->
<Group description="Komentar Baru Blogger (Contempo, Soho, Emporio, Notable)"> <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/> <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/> <Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/> <Variable name="body.text.font" description="1" type="font" default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/> <Variable name="posts.background.color" description="2" type="color" default="#fff" value="#ffffff"/> <Variable name="body.link.color" description="3" type="color" default="#008c5f" value="#008c5f"/> <Variable name="body.link.visited.color" description="4" type="color" default="#008c5f" value="#008c5f"/> <Variable name="body.link.hover.color" description="5" type="color" default="#1d2129" value="#1d2129"/> <Variable name="blog.title.font" description="6" type="font" default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/> <Variable name="blog.title.color" description="7" type="color" default="#fff" value="#ffffff"/> <Variable name="header.icons.color" description="8" type="color" default="#fff" value="#ffffff"/> <Variable name="tabs.font" description="9" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/> <Variable name="tabs.color" description="10" type="color" default="#ccc" value="#cccccc"/> <Variable name="tabs.selected.color" description="11" type="color" default="#fff" value="#ffffff"/> <Variable name="tabs.overflow.background.color" description="12" type="color" default="#fff" value="#ffffff"/> <Variable name="tabs.overflow.color" description="13" type="color" default="$(body.text.color)" value="#1d2129"/> <Variable name="tabs.overflow.selected.color" description="14" type="color" default="$(body.text.color)" value="#1d2129"/> <Variable name="posts.title.color" description="15" type="color" default="$(body.text.color)" value="#1d2129"/> <Variable name="posts.title.font" description="16" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/> <Variable name="posts.text.font" description="17" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/> <Variable name="posts.text.color" description="18" type="color" default="$(body.text.color)" value="#1d2129"/> <Variable name="posts.icons.color" description="19" type="color" default="$(body.text.color)" value="#6c6f74"/> <Variable name="labels.background.color" description="20" type="color" default="#008c5f" value="#008c5f"/> </Group>

2. Cari dan ganti SEMUA kode:

data:post.commentFormIframeSrc 

dengan kode kolom komentar Blogger terbaru berikut ini:

data:post.commentFormIframeSrc appendParams {skin: "contempo"}

3. Save! Simpan Template.

Desain komentar lainnya silakan cari di kotak pencarian. Demikian juga jika ada masalah soal kolom komentar di blog Anda, silakan cari di search box. Happy Blogging! (www.contohblog.com).*

Cara Membuat Blog: Panduan Lengkap plus SEO Dasar

Cara Membuat Blog: Panduan Lengkap plus SEO Dasar

Tulisan ini bersi cara membuat blog gratis di Blogger (blogspot). Berisi panduan lengkap plus tips SEO dasar untuk pemula.

Update: April 2019

Tutorial cara membuat blog di Blogger ini CB update karena dihapusnya Google Plus dan tampilan baru form Blogger untuk membuat blog baru.

Panduan lengkap cara membuat blog gratis di Blogger di bawah ini ditujukan khususnya bagi mereka yang sangat awam tentang blog atau blogger baru (newbie blogger). Baru akan membuat blog, tapi tidak tahu caranya bagaimana.

Anda yang sudah "jago ngeblog" tidak harus membaca tips membuat blog bagi pemula ini. Cukup tips blogging ini Anda rekomendasikan kepada teman Anda yang mau membuat blog tapi tidak tahu harus memulai dari apa atau dari mana.

Panduan cara membuat blog yang CB share ini untuk platform blog Blogspot atau Blogger, yaitu blog yang di belakang alamat blognya ada blogspot.com, seperti http://contohblognih.blogspot.com, yang di Indonesia menjadi http://contohblognih.blogspot.co.id

Mengapa membuat blog di blogspot? Karena blogger merupakan platform blog gratis ini merupakan yang pertama, milik Google, dan paling populer di dunia. 

Tentang keunggulan blogspot atas platform blog lain bisa dibaca 5 Keunggulan Blogspot Dibandingkan Blog Lainnya.

Sebelum atau sesudah membuat blog dengan mengikuti panduan di bawah ini, pastikan Anda memahami dunia blogging. Silakan baca Kamus Blogger berisi daftar istilah blogging sebagai dasar-dasar ngeblog.

Persiapan Membuat Blog

Sebelum ke cara pembuatan blog, kita samakan dulu persepsi tentang pengertian blog. Blog --singkatan dari web log-- adalah website pribadi yang umumnya dimiliki dan dikelola oleh perorangan. 

Ada juga blog kelompok bahkan blog berita yang dikelola sebuah tim. Namun, umumnya blog adalah web pribadi (personal web) dan dibuat di platform blog gratis seperti Blogger dan WordPress.

Sebelum membuat blog, siapkan dulu lima hal berikut ini:

1. Nama Blog atau Judul Blog (Blog Title). 

Nama blog ini adalah seperti nama media, misalnya Kompas, Republika, Detik, dll. Nama blog berbeda dengan alamat blog (address, URL).

2. Alamat Blog. 

Sebaiknya relevan bahkan sama dengan nama blog. Misalnya, nama blognya Contoh Blog dan alamatnya contohblognih.blogspot.com atau contohblog.com.

3. Logo. 

Siapkan logo gambar biar profesional. Kita bisa gunakan Corel, Photoshop, atau Online Logo Maker untuk membuat logo.

4. Niche. 

Tema atau topik yang menjadi konten utama blog. Ini opsional, karena bisa juga blog Anda berisi segala topik (general blog). Silakan simak: Pengertian Niche Blog

5. Platform. 

Memilih platform blogging, yaitu situs tempat membuat blog, dalam hal ini di Blogger. Bisa juga di WordPress dan lainnya.

Jika semuanya sudah siap, mari kita mulai membuat blog di Blogger!

Cara Membuat Blog

Mari kita mulai! Panduan berikut ini dengan kondisi Anda akan membuat blog dengan email Gmail baru juga. Dengan demikian, Anda akan membuat blog sekaligus email baru khusus untuk blogging.

1. Klik Blogger atau ketik di https://www.blogger.com/about/?hl=id addres bar

Akan muncul halaman depan Blogger seperti ini. Blogger langsung memberikan motivasi, ajakan, sekaligus memberikan panduan, blog dibuat untuk mempublikasikan tulisan "sesuai selera" (passion). Artinya, isilah blog sesuai dengan bakat, keahlian, dan minat Anda.

2. Klik Buat Blog. Akan muncul halaman baru.
3. Klik Buat akun karena kita akan membuat akun baru.

4. Klik Berikutnya

Akan muncul halaman baru untuk membuat Akun Google yang baru. Silakan isi kolom yang tersedia: Nama Depan, Nama Belakang, Nama pengguna (isi dengan huruf kecil semua). Nama pengguna ini sekaligus akan menjadi alamat email Gmail yang baru.

5. Jika sudah diisi dengan benar, cek lagi, dan klik Berikutnya

Akan muncul greeting dari Google: "Selamat datang di Google".
- Masukkan nomor HP Anda. Kosongkan juga tidak mengapa.
- Masukkan alamat email pemulihan (email cadangan) jika suatu saat lupa password.
- Klik Berikutnya

6. Jika terisi dengan benar, maka akan muncul halaman Privasi dan Persyaratan. Scroll ke bawah untuk menemukan dan mengekik Saya setuju.

Akan muncul notifikasi "Selamat datang di Blogger". Isi Nama Tampilan dengan nama yang dikehendaki.

7. Klik Lanjutkan ke Blogger untuk mulai membuat blog.

Akan muncul halaman Dashboard Blogger. Artinya Anda sudah login (masuk) ke akun Blogger. Dari sinilah pembuatan blog gratis dimulai.

8. Klik Buat blog baru

9. Saatnya membuat blog baru.

- Isi Judul dengan nama blog Anda. Bisa diisi dengan nama Anda, nama bisnis, atau nama blog. Judul ini merupakan nama blog, nama website, seperti halnya Detik, Kompas, Republika, Wikipedia, dll.

-  Isi Alamat sesuai dengan nama Judul blog tadi. Isi dengan huruf kecil semua dan disambungkan!

Jika tidak tersedia, tambahkan satu-dua kata atau angka. Judul dan Alamat sebaiknya relevan, sesuai, syukur-syukur bisa sama.

10. Klik salah satu tema, misalnya Sederhana. Lalu klik Buat blog

Selesai! 

Blog Anda sudah jadi. Cara membuat blog di Blogger selesai. Langkah berikutnya adalah isi blog baru Anda dengan 5-10 tulisan.

Isi dulu sebelum Anda mengganti template atau tampilan dengan memasang template blog terbaik pilihan Anda.

Cara mengisi blog

Sebelum membuat tulisan, ada baiknya sejenak baca dulu panduan penting dalam memulai blogging: Cara Menulis Posting Pertama di Blog.

Untuk mengisi blog atau menulis artikel, klik Entri baru.

Silakan lanjutkan untuk mengisi blog baru Anda.

Bisa juga ditunda dulu mengisi blognya, untuk melakukan setting seo dasar, dengan mengikuti panduan pengoptimalan blog bagi pemula di bawah ini.

Setting Dashboard Blogger untuk SEO

Kini saatnya setting dashboar blogger untuk menerapkan SEO Dasar Blogger berikut ini:

Lakukan langkah berikut ini:

1. Klik menu Posts.
Pastinya masih kosong, karena Anda belum membuat posting atau tulisan apa pun.

2. Klik menu Stats.
Pastinya masih belum ada data apa pun, karena Anda baru saja membuat blog baru.

3. Klik menu Comments.
Pastinya kosong juga.

4. Klik menu Earnings.

Oh, pastinya belum ada ya, kecuali blog yang sudah dinilai layak menjadi Publisher Google AdSense. Nanti muncul sendiri jika blog sudah banyak terisi dan banyak pengunjung.

5. Menu Campaigns lewati, kecuali Anda mau pasang iklan di Google (AdWords). 

6. Klik menu Pages (Halaman) untuk membuat halaman statis Abut, Kontak, dll.

- Klik New Page (Halaman Baru)

- Tulis About atau Tentang

- Isi dengan deskripsi blog Anda atau biografi Anda.

Lakukan hal yang sama untuk membuat halaman lainnya. Itu namanya Halaman Statis (Static Pages). Page beda dengan Posts atau Posting. Page itu halaman yang jarang diupdate, jarang diubah. (Lihat: Beda Posting dan Pages.)

7. Klik Layout. Di sini Anda bisa pasang widget di sidebar, memasukkan gambar logo blog, dll.

8. Klik Theme. Ini untuk ganti dan edit template. Jika mau ganti template, di sini tempatnya, dengan klik Cadangkan/Pulihkan (Backup/Restores). Sekarang mah lewati dulu, nanti saja.

9. Klik menu Setting. Ini dia yang terpenting untik SEO.

- Basic. Edit/Enable dan Isi Descriptions dengan gambaran isi atau konten blog Anda.

- Posts, Comments & Sharing. Lakukan setting dasar seperti berikut ini.

10. Klik menu "Search Preferences" (Preferensi Pencarian) untuk mengisi Meta Tags yang merupakan elemen terpenting bagi SEO Blog Anda.

Itu saja langkah standar SEO dasar Blogger yang disetting di dashboard. Baca Juga: 10 SEO Blogger Dasar

Cara menulis artikel SEO Friendly

Isi "Judul Pos" dengan judul tulisan Anda.

Jika tulisan Anda sudah disiapkan di file MS Word, sebaiknya jangan langsung Copy-Paste (Copas), apalagi kalau ada bagan atau gambar. Copy Paste dulu ke NOTEPAD, lalu atur spasi antarparagrafnya dengan ENTER di setiap ujung paragraf. Ingat! Tulisan di blog tidak mengenal "tekuk ke dalam" (indent).

Tips SEO: Sebaiknya, posting pertama Anda berupa "Basic Article". Apa itu basic article, silakan baca Posting Pertama Blog yang Sering Dilupakan.

Cara menambahkan gambar ke tulisan

Posting, tulisan, atau artikel sebaiknya dilengkapi dengan foto agar lebih ramah mesin pencari, selain menjadikan artikel kian menarik.

1. Klik di depan huruf pertama

Untuk menyisipkan atau memasukkan foto (gambar), setelah selesai menulis, klikkan cursor mouse Anda di depan huruf pertama naskah posting, di bagian paling kiri, ujung kiri, naskah yang baru saja Anda tulis.

2. Klik icon insert image

Klik tombol kotak bergambar latar belakang biru (di samping kanan teks Link). Akan muncul halaman pop-up.  Klik Pilih file atau Choose files.

3. Pilih gambar

Silakan klik foto atau gambar yang ada di folder komputer Anda, lalu klik Open untuk memasukkannya ke tulisan di Blogger.

4. Klik "Add selected", maka foto akan masuk ke naskah.

5. Klik gambar!

Klik sekali foto  atau ambar yang sudah ada di naskah. Di bagian bawah foto akan muncul menu kecil-kecil, yaitu ukuran foto yang akan ditampilkan (small - medium - large - X large -original size) dan posisi foto (left - center - right).

Juga ada "Add caption" (untuk menuliskan keterangan foto) dan "Properties".

6. Pilih "Small" atau "Medium" untuk gambar kecil

7. Klik "Propertis" dan isi "title text" (nama foto) dan "alt text" (alternative text). Ini penting untuk SEO Gambar.

Selaraskan nama foto dan alt text dengan judul dan isi postingan (tulisan) Anda, lalu Klik "OK".

Deskripsi gambar (title & alt) ini WAJIB diisi. Jika tidak, gambar tidak seo friendly dan skor seo blog Anda akan berkurang. (Baca deh: 5 Cara Optimisasi Gambar untuk SEO Blog).

VIDEO: Cara Menulis Posting Blog

Posts Setting untuk SEO dan Label

Jika sudah selesai membuat postingan plus gambar, klik Post Setting (di sebelah/sidebar kanan).

1. Klik Label

Tuliskan label (kategori) posting Anda di sana, misalnya "Opini" atau "Berita" atau "Ceritaku" dll. Jika dikosongkan, maka akan menjadi "unlabelled" atau "uncategorized" yang tidak bagus buat SEO Blog.

2. Klik Search Description

Isi dengan teks judul posting Anda atau target kata kunci yang Anda incar di mesin pencari.

Cara Memunculkan Kolom Deskripsi 

Untuk memunculkan "Search Description" (Deskripsi Pencarian) saat menulis posting seperti gambar di atas, klik "Setting"  > "Basic" > Edit Description!

Klik juga "Seacrh Preference" dan isi Meta Tags!

Jika suda selesai? Klik tombol Publish untuk mempublikasikan tulisan Anda.

Anda sudah mengikuti cara membuat blog, cara mengisinya, setting dashboard, sekaligus dasar-dasar SEO agar blog mudah diindeks Google dan mendatankan penunjung.

Lanjutkan dengan membaca informasi tambahan di bawah ini.

Cara masuk (login) ke akun Blogger

Jika nanti Anda memulai blogging lagi, tinggal buka saja www.blogger.com di address bar, sebagaimana langkah awal Anda membuat blog di atas.

Namun, kali ini Anda tinggal LOGIN/MASUK dengan menggunakan email dan password gmail yang sudah Anda buat dan miliki (poin 1 s.d. 6 di atas).

LOGIN KE BLOGGER / GMAIL

Penting!!! Jangan lupa, jika Anda membuat blog di warnet atau di komputer milik publik, bukan komputer pribadi, lakukan LOGOUT jika sudah ngeblog. Demi keamanan akun blogger Anda.

Kenapa harus membuat blog?

Kenapa Harus Membuat Blog?

Tidak harus sih. Tidak ada undang-undang atau regulasi yang mengharuskan Anda membuat blog.

Namun, bagi yang belum punya blog, silakan simak 10 Manfaat Blogging.

Blog bukan hanya media ekspresi pemikiran, ide, sarana berbagi wawasan, membangun jaringan, menambah teman, CV Online, personal branding, tapi juga bisa menjadi Toko Online, media pemasaran online, juga mendatangkan dolar (uang) alias make money blogging.

Alasan Membuat Blog

"Publikasikan passion Anda, cara Anda. Buatlah blog unik dan indah. Cara membuat blog itu mudah dan gratis."

Demikian tercantum di halaman depan blogger, jika Anda membuka www.blogger.com dalam keadaan belum punya blog atau tidak login ke akun blogger.

Yang dikemukakan Goole --pemilik blogger-- di atas adalah HAL PERTAMA yang harus ada dalam diri seseorang yang akan membuat blog.

"Start with your passion!" Mulailah dengan bakat-minat Anda. Ini juga panduan, setelah membuat blog, dengan mengikuti tata cara membuat blog di bawah ini, isilah blog Anda sesuai dengan keahlian, hobi, atau bakat dan minat Anda.

Tulislah pengalaman, keahlian, tips yang Anda alami atau kuasai. Jangan paksakan diri dengan menulis postingan atau artikel yang bukan bidang keahlian Anda.

Banyak blogger yang "maksa" menulis tips blogging, padahal dia sendiri baru masuk dunia blogging (newbie blogger). Akibatnya, blognya banyak berisi postingan hasil COPAS. Mending kalau mencantumkan sumbernya. Ini mah nggak!

Di halaman depan blogger tadi, juga ada motivasi sekaligus panduan umum cara membuat blog. Ada juga contoh blognya. Ini contoh blog yang dicantumkan blogger:

1. Petualangan Keluarga Kami. Blog tentang keluarga.
2. Berita Teknologi. Blog tentang teknologi.
3. Blog Masakan. Blog tentang kuliner, resep, atau makanan favorit.
4. Blog Prakarya Pribadi
5. Keliling Dunia. Travelling blog. Bloggernya dikenal dengan sebutan "traveller blogger".

Jika discroll ke bawah, halaman depan blogger juga menampilkan hal-hal berikut ini:

1. Pilih desain yang sempurna 

Buat blog yang menarik sesuai gaya Anda. Pilih dari koleksi template yang mudah digunakan, dengan tata letak fleksibel dan ratusan gambar latar, atau buat desain template baru.

2. Dapatkan uang 

Dapatkan bayaran untuk semua kerja keras Anda. Google AdSense otomatis menampilkan iklan bertarget yang relevan di blog, sehingga Anda bisa mendapatkan penghasilan dengan mengeposkan konten favorit.

3. Kenali audiens 

Cari tahu pos dengan 'hits' terbanyak dengan alat analytics Blogger. Cari tahu lokasi dan minat audiens blog Anda. Anda bahkan dapat langsung menghubungkan blog ke Google Analytics untuk data yang lebih detail.

4. Jaga kenangan Anda 

Simpan saat-saat yang berarti. Blogger memungkinkan Anda menyimpan ribuan pos, foto, dan lainnya dengan Google. Gratis!

5. Bergabunglah dengan jutaan orang lain 

Ingin berbagi keahlian, berita terkini, atau apa pun pendapat Anda? Ada banyak orang yang melakukan hal yang sama di Blogger.

Jangan lupa, main-main juga ke Pusat Bantuan Blogger.

Nah itu dia alasan membuat blog. Kian jelas 'kan manfaat atau keuntungan ngeblog?

Cara Membuat Blog di WordPress

Cara membuat blog di WordPress, yakni platform blog gratis wordpress.com, kurang-lebih sama dengan cara membuat blog di blogger. Buka saja WordPress.

Demikian Cara Membuat Blog di Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Membuat Blog Gratis di... by on Scribd

Fungsi Footer Blog dan Cara Menambahkan Widget Bawah Tiga Kolom di Blogger

Fungsi Footer Blog dan Cara Menambahkan Widget Bawah Tiga Kolom di Blogger

Footer Blog adalah elemen di bagian bawah halaman atau template blog. Footer Blog biasanya terdiri Footer Widget dan Footer Credit.

Elemen widget blog secara umum terdiri dari Header, Navigasi Menu, Main Content (Halaman Postingan), Sidebar, dan Footer.

Footer Widget umumnya terdiri dari tiga kolom. Isinya beragam, mulai dari Label, Popular Post, Latest Post, Random Posts, hingga Profil Blogger.

Footer Credit adalah elemen paling bawah yang biasanya berisi copyright (hak cipta), tahun, dan nama blog. Footer Credit juga berfungsi penanda akhir halaman atau batas halaman web bagian bawah.

Credit berupa link ke blog desainer website atau template blog juga semuanya ada di bagian Footer Blog. Template bawaan Blogger juga mencantumkan link credit "Powered by Blogger" atau "Diberdayakan oleh Blogger" di bagaian Footer Blog.

Beberapa template juga mencantumkan Footer Menu, yaitu navigasi menu di bagian bawah. Biasanya untuk link ke halaman statis About (Tentang), Kontak, dan Disclaimer, serta halaman statis penting lainnya.

Fungsi Footer Blog 

Fungsi footer blog terutama menu footer membantu pengunjung Anda untuk menavigasi ke lebih banyak konten di situs atau blog Anda.

Footer Blog atau widget footer merupakan cara yang bagus untuk meningkatkan tampilan halaman (pageviews). Ia juga berguna untuk menambahkan tautan (link) ke kontak, peta situs (table of content/sitemap), tombol kembali ke atas (back to top), ketentuan penggunaan, kebijakan privasi, dan sebagainya.

Konten Footer Blog yang Disarankan

Berikut adalah beberapa saran agar elemen ditambahkan ke Footer Blog:

• Pemberitahuan hak cipta (copyright)
• Menu footer
• Ikon sosial atau link ke akun medsos.
• Link ke halaman statis terutama Profil (About) dan Kontak.
• Widget kategori
• Tag widget Cloud
• Widget Post Populer
• Widget Tulisan Terbaru

 Cara Menambahkan Widget Bawah Tiga Kolom di Blogger

Setelah tahu fungsinya, maka kini kita bahas  Cara Menambahkan Widget Bawah Tiga Kolom di Blogger, bagi blog yang belum ada footer widgetnya tentu. 

Yang sudah ada juga bisa diganti dengan desain Footer Widget responsive berikut ini.

Ini dia Cara Memasang, Menampilkan, atau Menambah Footer Widget Tiga Kolom di Blog.

1. Klik Tema > Edit HTML
2. Simpan (Copas) kode beriku ini di atas kode ]]></b:skin>

#footer-widgets {padding: 20px 0 0 0;}
.footer-widget-box {width: 300px;float: left;margin-left: 15px;}
.footer-widget-box-last {}
#footer-widgets .widget-container {color: #374142;}
#footer-widgets h2 {font-family: inherit;text-shadow: none;font-size: 16px;color: #fff;text-transform: uppercase;font-weight: 700;border-bottom: 4px solid #444444;padding-bottom: 10px;}
#footer-widgets .widget ul {list-style-type: none;list-style: none;margin: 0px;padding: 0px;}
#footer-widgets .widget ul li {padding: 0 0 9px 0;margin: 0 0 8px 0;}
#footer-widgets-containerback {width: 980px;margin: auto;}
#footer-widgets-container {background: #484848;border-top: 10px solid #66b381;}
.footersec {color: #A1A6AF;font-size: 13px;line-height: 18px;}
.footersec .widget {margin-bottom: 20px;}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {}
.footersec ul li {}

3. Copy+Paste kode di bawah ini di atas kode </body>

<div id='footer-widgets-container'>
<div id='footer-widgets-containerback'>
<div class='clearfix' id='footer-widgets'>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec1' showaddelement='yes/'>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec2' showaddelement='yes'/>
</li>
</ul>
</div>
<div class='footer-widget-box footer-widget-box-last'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'/>
</li>
</ul>
</div>
</div>
</div></div>
<div style='clear:both;'/>

Itu dia Fungsi Footer Blog dan Cara Menambahkan Widget Bawah Tiga Kolom di Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Best Social Share Button for Blogger - Tombol Bagikan Posting ke Media Sosial

Best Social Share Button for Blogger - Tombol Bagikan Posting ke Media Sosial

Cara Memasang Social Share Button di Blogger - Tombol Bagikan Posting ke Media Sosial Terbaik, CSS, Tanpa Javascrip, Fast Loading.

CB baru saja memasang Tombol Berbagi Posting ke Media Sosial (Social Share Button) di beberapa blog klien.

Posisi Social Share Button ada yang hanya di bawah postingan blog, ada juga yang di bawah judul dan di bawah postingan. Ini penampakannya:

Social Share Button ini CB sebut terbaik dengan alasan:

• Murni CSS tanpa Javascript sehingga ringan (fast loading)
• Lengkap untuk membagikan ke media sosial terpopuler -- Facebook, Twitter, Google Plus, Pinterest, LinkedIn, dan WhatsApp (WA).Saat diklik, muncul tab baru yang masih ada di halaman postingan.
• Tidak ada tracking code.
• Desain simple dan user friendly.

Cara Memasang Tombol Social Share Button di Blogger

Berikut ini cara memasangnya di template blog dengan posisi di bawah postingan:

1. Klik Tema > Edit HTML
2. Copas kode CSS Tombol Berbagi Posting ke Media Sosial berikut ini di atas kode ]]></b:skin>

.share{display:block;padding:0;margin:10px 0;}
.post-share,ul.share-links{position:relative;margin: 0;}
.post-share{overflow:hidden;line-height:0;margin:0}.share-links li a,.share-links li a:before{float:left;text-align:center;line-height:32px}.share-links li{width:32px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:20%}.share-links li a{display:inline-block;cursor:pointer;width:100%;height:32px;color:#fff;font-weight:400;font-size:13px;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .17s ease}.is-mobile li.whatsapp-desktop,.share-links li.whatsapp-mobile{display:none}.is-mobile li.whatsapp-mobile{display:inline-block}.share-links li a:before{display:block;width:32px;background-color:rgba(255,255,255,.07);font-size:15px}.share-links li a:hover{opacity:.8}.social a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400}.social .facebook a:before{content:"\f09a"}.social .twitter a:before{content:"\f099"}.social .gplus a:before{content:"\f0d5"}.social .linkedin a:before{content:"\f0e1"}.social .pinterest a:before{content:"\f0d2"}.social .whatsapp a:before{content:"\f232"}.social .external-link a:before{content:"\f35d"}.social-color .facebook a{background-color:#3b5999}.social-color .twitter a{background-color:#00acee}.social-color .gplus a{background-color:#db4a39}.social-color .pinterest a{background-color:#ca2127}.social-color .linkedin a{background-color:#0077b5}.social-color .whatsapp a{background-color:#3fbb50}.social-color .external-link a{background-color:#111}.social-text .facebook a:after{content:"Facebook"}.social-text .twitter a:after{content:"Twitter"}.social-text .gplus a:after{content:"Google Plus"}.social-text .linkedin a:after{content:"LinkedIn"}.social-text .pinterest a:after{content:"Pinterest"}.social-text .whatsapp a:after{content:"Whatsapp"}.social-text .external-link a:after{content:"WebSite"}@media screen and (max-width:540px){.share-links li a span{display:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:30px}}

3. Copas HTML Tombol Berbagi Posting ke Media Sosial berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

   <div class='share'>
<div class='post-share'>
                  <ul class='share-links social social-color'>
                    <b:class cond='data:blog.isMobileRequest' name='is-mobile'/>
                    <li class='facebook'><a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Facebook</span></a></li>
                    <li class='twitter'><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=450, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Twitter</span></a></li>
                    <li class='pinterest'><a class='pinterest' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='linkedin'><a class='linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=950, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='whatsapp whatsapp-desktop'><a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'/></li>
                  </ul>
                </div>
  <div class='clear'/>
</div>

4. Save! 

Simpan template!

Jika ingin memasang Social Share Button tersebut di bawah judul dan di bawah postingan, ini panduannya:

- Simpan kode CSS di atas kode ]]></b:skin>
- Simpan kode berikut ini di atas kode <b:includable id='status-message'>

              <b:includable id='sharethis' var='post'>
<div class='share'>
<div class='post-share'>
                  <ul class='share-links social social-color'>
                    <b:class cond='data:blog.isMobileRequest' name='is-mobile'/>
                    <li class='facebook'><a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Facebook</span></a></li>
                    <li class='twitter'><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=450, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Twitter</span></a></li>
                    <li class='pinterest'><a class='pinterest' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='linkedin'><a class='linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=950, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='whatsapp whatsapp-desktop'><a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'/></li>
                  </ul>
                </div>
  <div class='clear'/>
</div>
</b:includable>

- Simpan kode berikut ini di atas dan di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='sharethis'/>
</b:if>

Demikian Cara Memasang Best Social Share Button for Blogger - Tombol Bagikan Posting ke Media Sosial Terbaik.

Alternative: Style 2 Social Share Button

Jika tidak berkenan dengan bentuk tombol share yang kotak dan segi panjang seperti di atas, alternatifnya adalah social share button berbentuk bulat seperti ini:

Ini kode dan cara pasangnya.

1. Kode HTML:

Copas di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><p><strong>Share this:</strong></p>
<mobileshare class='mobileshare'>
 <a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Facebook Share'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare1 class='mobileshare1'>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=400, height=500, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Google Share'><i class='fa fa-google-plus'/></a></mobileshare1>
<mobileshare2 class='mobileshare2'>
 <a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=450, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Tweet This'><i class='fa fa-twitter'/></a></mobileshare2>
<mobileshare3 class='mobileshare3'>
 <a expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Pin It'> <i class='fa fa-pinterest'/></a></mobileshare3>
<mobileshare5 class='mobileshare5'>
 <a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot;+ data:post.title + &quot; &quot; + data:post.url' href='whatsapp://send?text=http://webdevelopmentscripts.com' onclick='window.parent.null' rel='nofollow' target='_top' title='Share to whatsapp'><i class='fa fa-whatsapp'/></a></mobileshare5>
</div>
</b:if> 

2. Kode CSS:

Simpan di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.mobileshare{text-align:center}
.mobileshare a{background:#3a579a;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px 0;border-radius:50%}
.mobileshare a:hover{background:#314a83}
.mobileshare1{text-align:center}
.mobileshare1 a{background:#df4a32;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare1 a:hover{background:#be3f2b}
.mobileshare2{text-align:center}
.mobileshare2 a{background:#00abf0;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare2 a:hover{background:#0092cc}
.mobileshare3{text-align:center}
.mobileshare3 a{background:#cd1c1f;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare3 a:hover{background:#ae181a}
.mobileshare5{text-align:center}
.mobileshare5 a{background:#34af23;color:#fff;display:inline-block;font-size:20px;width:35px;height:35px;line-height:35px;margin:0 2px 6px;border-radius:50%}
.mobileshare5 a:hover{background:#222}
</style>
 </b:if>

Demikian cara memasang Best Social Share Button for Blogger - Tombol Bagikan Posting ke Media Sosial Terbaik. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger

Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger

Tutorial Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger ini bagi bloger yang mau ganti menu navigasi di bawah header.

Navigasi Menu Responsive ini CB sebut Terbaik karena tanpa Javascript, murni CSS, sehingga tidak memberatkan tampilan blog, ringan, alias fast loading.

Selain itu, sudah Dropdown Menu, dan ketika tampil di mobile (HP), tampilannya bagus, ada teks Show Menu, selain ada icon menu yang biasa tampil di mobile.

Ini penampakkannya di mobile.

Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger

Ini dia Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger.

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

#nav{background:#384850;margin:0;text-transform:uppercase;font-weight:600;font-family:Arial;font-size:14px}
#nav ul{margin:0;padding:0}
#nav li{list-style:none;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;margin:0;padding:0}
#nav li a{display:block;text-decoration:none;color:#fff;padding:1em}
#nav li a:hover{color:#fff;background:#191919}
.show-menu{text-decoration:none;color:#fff;text-align:left;padding:8px 20px;display:none}
.show-menu b{font-size:20px}
.show-menu span{margin-right:1em;float:right}
#nav input[type=checkbox]{display:none}
#nav input[type=checkbox]:checked ~ #menus{display:block}
#nav ul.sub-menus{height:auto;overflow:hidden;width:180px;background:#eee;position:absolute;z-index:99;display:none}
#nav ul.sub-menus li{display:block;width:100%;text-transform:none;text-shadow:none}
#nav ul.sub-menus a{color:#fff;background:#48d}
#nav ul.sub-menus a:hover{background:#ddd;color:#333}
#nav li:hover ul.sub-menus{display:block}
#nav a.prett{padding:13px}
#nav a.prett::after{content:&quot;width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ccc transparent transparent;position:absolute;top:18px;right:9px}
@media screen and (max-width:800px) {
#nav{margin-bottom:30px}
#nav ul{position:static;display:none}
#nav li{border-bottom:1px solid #535b69}
#nav ul li,#nav li a{width:100%}
#nav li a{display:block;height:auto;line-height:normal;text-align:left}
#nav ul.sub-menus{width:100%;position:static;padding-left:20px}
.show-menu{display:block!important;line-height:25px}
.show-menu:hover{cursor:pointer}
label{margin:0!important}
}

3. Copas kode HTML Menu Responsive berikut ini di bawah kode </header> atau kode penutup Header Blog.

<nav id='nav'>
<label class='show-menu' for='show-menu'><b>&#9776;</b> <span>Show Menu</span></label>
<input autocomplete='off' id='show-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href='/'>Home</a></li>
    <li><a href='/p/about.html'>About</a></li>
    <li><a href='/p/kontak.html'>Kontak</a></li>
    <li><a href='/p/sitemap.html'>Sitemap</a></li>
    <li><a href='/p/sitemap.html'>Disclaimer</a></li>
<li><a class='prett' href='#'>Categories <span class='arrow'>&#9660;</span></a>
 <ul class='sub-menus'>
 <li><a href='#'>Sub Menu1</a></li>
 <li><a href='#'>Sub Menu2</a></li>
 <li><a href='#'>Sub Menu3</a></li>
 <li><a href='#'>Sub Menu4</a></li>
 <li><a href='#'>Sub Menu5</a></li>
</ul></li>
      <li><a href='#'>Blogging</a></li>
      <li><a href='#'>Links</a></li>
</ul>
</nav>

4. Save!

Demikian Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger.

Menu Plus Kotak Pencarian

Jika menu di atas akan ditambah Kotak Pencarian, berikut ini kode kotak pencariannya.

Kode CSS:

#search_box{width:200px;position:relative;height:40px;float:right;top:5px;}
.fa-search:before {content: "\f002";color: #fff;}
#search_box #search{float:right;top:0;right:50px;position:absolute;border:1px solid #d9e0e2;border-right:0;display:none}
#search_box #search #search_text{color:#888;width:200px;padding:10px;font-size:14px;border:0 none;height:40px;margin-right:0;outline:none;background:#fff;float:left;box-sizing:border-box;transition:all .15s;font-weight:normal}
#search_box #search #search_text:focus{background:#efefef}
#search_box .search_button{float:right;color:#222;height:42px;width:50px;text-align:center;line-height:45px;display:inline-block;cursor:pointer;font-size: 20px;}
#search_box .search_button.active,#search_box .search_button:hover{background:#00aa9f;color:#fff}
@media screen and (max-width:600px) {
.fa-search:before {content: "\f002";color: #222;}
#search_box{width:100%;float:right;top:0;background:#eee}
}

Kode HTML

<div id='search_box'><form action='/search' id='search' method='get'>
<input class='search_text' id='search_text' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Press Enter to Submit&apos;;}' onfocus='if (this.value == &apos;Search...&apos;) {this.value = &apos;&apos;;}' type='text' value='Search...'/></form><div class='search_button'><i class='fa fa-search'/></div></div>

Simpan sebelum kode </ul></nav> di menu Anda.

Kode JS
Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
!function(){$(".search_button").on("click",function(t){t.preventDefault(),$("#search").animate({width:"toggle"}).focus(),$(".search_button").toggleClass("active")})}()
//]]>
    </script>

Save!

Demikian Cara Memasang Navigasi Menu Responsive Terbaik untuk Blogger plus Kotak Pencarian. Good Luck & Happy Blogging! (www.contohblog.com).

See the Pen
Best Responsive Menu for Blogger by CB Blogger (@cbblogger)
on CodePen.

Cara Memasang Iklan AdSense Setelah Posting Pertama di Homepage Blogger

Cara Memasang Iklan AdSense Setelah Posting Pertama di Homepage Blogger

Berikut ini tutorial cara menampilkan Google Adsense setelah posting pertama di beranda atau halaman depan Blogger. Iklan muncul di seluler (HP) dan desktop.

Berikut ini contoh penampakan iklan setelah artikel terbaru di halaman depan blog Blogger. Ya benar, mirip unit Iklan InFeed.

Google Adsense adalah platform iklan pilihan untuk sebagian besar bloger. Sangat mudah diimplementasikan. Unit iklannya dapat ditambahkan ke blog dengan banyak cara, misalnya:

1. Dengan memilih untuk menampilkan iklan secara otomatis oleh Blogger

2. Dengan menambahkan kode Adsense dalam widget HTML / JavaScript atau

3. Langsung menambahkan di template Blogger.

Lihat Juga: Unit Iklan AdSense Terbaik

Meskipun menambahkan widget HTML / JavaScript adalah cara paling sederhana untuk menambahkan kode Adsense ke Blogger, fleksibilitas dalam posisi tampilan agak terbatas karena kita hanya dapat menunjukkan di mana widget dapat ditampilkan secara default, dikendalikan oleh wilayah di halaman tata letak. 

Jika tidak, kita juga dapat menambahkan kode Adsense langsung ke kode template Blogger. Fleksibilitas pemosisian layar lebih dari itu. 

Dalam posting ini, kita akan melihat bagaimana menampilkan Adsense di beranda tepat setelah posting pertama.

Cara Memasang Iklan AdSense Setelah Posting Pertama

Berikut ini Cara Memasang Iklan AdSense Setelah Posting Pertama.

1. Login ke Blogger 

2. Klik Tema > klik EDIT HTML
3. Temukan kode <b:include data='post' name='post'/>
4. Copas kode berikut ini tepat setelah kode <b:include data='post' name='post'/>

<!--ad after first post homepage desktop -->
<b:if cond='data:post.isFirstPost'>
PASTE YOUR ADSENSE CODE HERE</b:if>
<!--ad after first post homepage desktop -->

5. Save Theme!

Periksa apakah Adsense muncul setelah posting pertama di beranda?

Kita sudah berhasil menambahkan Adsense untuk ditampilkan di beranda setelah posting pertama. 

Tetapi Adsense tidak akan ditampilkan di perangkat seluler, karena tempat kita menambahkan kode adalah untuk desktop. Untuk perangkat seluler atau HP, ikuti langkah-langkah di bawah ini.

Cara Memasang AdSense Setelah Posting Pertama untuk Mobile

1. Klik Tema > EDIT HTML

2. Temukan kode <b:include data='post' name='mobile-index-post'/>
3. Copas kode berikut ini setelah kode <b:include data='post' name='mobile-index-post'/>

<!--ad after first post homepage mobile-->
<b:if cond='data:post.isFirstPost'>
PASTE YOUR ADSENSE CODE HERE</b:if>
<!--ad after first post homepage mobile-->

4. Save Theme!

Demikian Cara Memasang Iklan AdSense Setelah Posting Pertama di Homepage Blogger. Cara ini merupakan salah satu trik meningkatkan penghasilan AdSense.

Lihat juga: Cara Pasang Iklan di Tengah Artikel.

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

Sumber

Cara Menambah atau Mengurangi Teks Ringkasan Auto Readmore Blog

Cara Menambah atau Mengurangi Teks Ringkasan Auto Readmore Blog

Cara Menambah atau Mengurangi Teks Ringkasan Auto Readmore Blog. Mengatur Data Post Snippet atau Post Summary.

Halaman depan (homepage) blog yang menggunakan template selain bawaan Blogger biasanya menampilkan gambar, judul, dan ringkasan atau cuplikan isi artikel (Data Post Snippet).

Para blogger mengenalnya sebagai "Auto Read More" yaitu ringkasan artikel di bawah judul di halaman depan , halaman label, dan halaman hasil pencarian blog.

Jika menggunakan kode auto readmore tanpa javascript, maka jumlah kata atau panjang-pendeknya kutipan sama dengan panjang-pendek ringkasan dari kode Populer Posts bawaan Blogger, yaitu dalam kode bawaan Blogger <data:post.snippet/> atau <data:post.postSummary/>.

Ini dia yang dimaksud Auto Readmore atau ringkasan artikel di halaman depan blog:

Kita bisa mengatur jumlah karakter atau panjang-pendek auto readmore itu dengan menyisipkan kode dalam template. Di bawah ini tutorialnya.

Penambahan atau pengurangan ringkasan artikel ini biasanya untuk menyesuaikan dengan ukuran gambar thumbnail, sehingg tampilannya menjadi rapi dan enak dilihat.

Cara Menambah atau Mengurangi Teks Ringkasan Auto Readmore Blog

Berikut ini Cara Menambah atau Mengurangi Teks Ringkasan Auto Readmore  di halaan depan blog. Berlaku bagi template yang menggunakan auto readmore tanpa javascript.

Di dashboard Blogger Anda:

1. Klik Tema > Edit HTML

2. Cari kode di bawah ini, gunakan tombol Ctrl + F untuk mempermudah pencarian

<data:post.snippet/>

3. Hapus kode diatas, lalu ganti dengan kode dibawah ini.

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script> 

4. Simpan kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
snippet_count = 140;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=i} //]]> </script> </b:if>
</b:if>

5. Atur jumlah karakter deskripsi snippet di kode 140

6. Save! Simpan template.

Catatan: Jika auto readmore blog Anda sudah menggunakan javascript, biasanya kode seperti snippet_count = 140; sudah ada, cuma beda angkanya. Tinggal ubah saja angkanya.

Cara Lain Mengatur Teks Ringkasan Auto Readmore Blog

Snippet, Summary, atau ringkasan artikel di halaman depan blog standarnya mengambil ringkasan yang biasa ditampilkan di widget Popular Post. Kodenya adalah <data:post.snippet/>.

Maka, cara untuk mengatur jumlah teks atau karakter dalam ringkasan atau auto readmore itu mengacu pada kode tersebut:

1. data:post.snippet
2. data:post.longSnippet
3. data:post.snippets.short
4. data:post.snippets.long
5. data:post.body [snippet]

Silakan coba satu per satu kode-kode berikut ini untuk mengatur ringkasan artikel di homepage blog Anda. Intinya, cari dan ganti kode <data:post.snippet/> yang ada dalam template dengan salah satu kode berikut ini:

Jumlah karakter 140:

<b:eval expr='snippet(data:post.snippet, {length: 140})'/>

Jumlah karakter 1000

<data:post.longSnippet/>

Maksimal karakter 1000, tidak bisa ditambah. Jika ingin mengurangi jumlah karakter, bisa menggunakan contoh berikut ini. Ubah angkanya sesuai keinginan:

  <b:eval expr='snippet(data:post.longSnippet, {length: 1000})'/>

Jumlah karakter 100

<data:post.snippets.short/>

Jika ingin mengurangi jumlah karakternya, misalnya menjadi 80, bisa menggunakan contoh berikut :

<b:eval expr='snippet(data:post.snippets.short, {length:80})'/>

Jumlah karakter 1000

<data:post.snippets.long/>

Maksimal karakter 1000, tidak bisa ditambah. Jika ingin mengurangi jumlah karakter bisa menggunakan contoh berikut :

<b:eval expr='snippet(data:post.snippets.long, {length: 800})'/>

Jumlah karakter bebas

<b:eval expr='data:post.body snippet {
    length: 300,
    links: true,
    linebreaks: true,
    ellipsis: true }'/>
</div>

Tidak semua kode cocok dengan semua template. Secara, Blogger memiliki tiga versi template bawaan (default), yakni Versi 1 (Classic Theme), Versi 2 (Simple Theme dkk), dan Versi 3 (Contempo dkk).

Ringkasan Hilang?

Jika kasusnya justru ringkasan postingnya hilang, maka cari kode berikut ini:

<data:post.snippet/>

Hapus kode tersebut lalu ganti dengan kode ini:

<data:post.postSummary/>

Demikian cara menambah atau mengurangi teks ringkasan auto readmore blog. Belakangan, situs-situs berita malah banyak yang menghilangkannya di halaman depan, hanya berisi judul dan gambar.

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