Sentra Blogger

Panduan Blogger | Dunia Blogger | Solusi Blogger

Cara Pasang Tombol Share WhatsApp di Blogger

Cara Pasang Tombol Share WhatsApp di Blogger

WhatsApp merupakan salah satu aplikasi pesan instan multimedia lintas platform untuk ponsel pintar yang memungkinkan penggunanya bertukar pesan, suara, dan video melalui koneksi data internet. Bahkan WhatsApp bisa diakses di komputer atau laptop melalui fitur "WhatsApp Web" atau "WhatsApp berbasis situs web untuk komputer". WhatsApp merupakan aplikasi yang paling populer di Indonesia dan secara global digunakan lebih dari 1 miliar pengguna setiap bulannya.

Dengan kepopuleran dan jumlah penggunanya yang demikian besar, maka jelas WhatsApp merupakan salah satu media yang wajib dimanfaatkan oleh para blogger sebagai media untuk berbagi konten blognya sehingga konten di blog bisa dibagikan oleh pembaca artikel kepada pengguna WhatsApp lainnya dengan mudah. Artikel menarik yang telah dibagikan tersebut akan mengundang pengguna WhatsApp untuk mengunjungi blog sehingga bisa meningkatkan trafik kunjungan blog via perangkat seluler atau "mobile".

Berikut langkah-langkah cara memasang "Share WhatsApp" di Blogger untuk berbagi konten artikel blog via WhatsApp. Tombol ini hanya muncul saat blog dibuka di perangkat seluler ponsel pintar (smartphone).
1. Login ke akun blogger Anda.
2. Pilih opsi Edit template HTML
3. Lalu cari kode </body> (untuk memudahkan pencarian, tekan tombol Ctrl + F bersamaan pada keybord Anda), kemudian salin kode berikut di atasnya.

<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;https://cdn.jsdelivr.net/whatsapp-sharing/1.3.4/whatsapp-button.js&quot;;h.appendChild(s);}</script>

4. Selanjutnya cari kode , kemudian pilih salah satu opsi ukuran tombol "Share WhatsApp" berikut ini, dan letakkan di atas atau di bawah atau tambahkan/sisipkan sesuai bagian kelompok media sosial berbagi konten blog yang sudah ada seperti Facebook, Twitter, Google Plus, Pinterest, dan media sosial lainnya.


<a class="wa_btn wa_btn_s" expr:data-href="data:post.url" expr:data-text="data:post.title" href="whatsapp://send" style="display: none;">Share</a>

Huruf "s" yang berwarna hitam tebal di atas untuk ukuran tombol "share WhatsApp" yang kecil ("small"), untuk ukuran sedang atau medium bisa diganti dengan huruf "m" (medium), dan untuk ukutan besar atau lebar bisa diganti dengan huruf "l" ("large").
5. Simpan template dan cek hasilnya melalui perangkat seluler ponsel pintar.
Cara Memasang Iklan Adsense Di Antara Artikel Halaman Utama Blog

Cara Memasang Iklan Adsense Di Antara Artikel Halaman Utama Blog

Blogger sebenarnya sudah menyediakan pengaturan untuk penempatan iklan Adsense di antara postingan artikel di halaman utama (homepage) blog, yakni melalui "Edit" di "Layout" (Tata Letak) pada bagian "Posting Blog". Namun kelemahan cara ini adalah kita tidak bisa sepenuhnya mengatur di bawah postingan artikel ke berapa iklan Adsense akan muncul karena iklan otomatis akan selalu muncul di bawah postingan artikel pertama, berapa pun jumlah (angka) yang kita pilih untuk pengaturan "tampilan iklan setelah sekian postingan artikel". Lagi pula, cara ini hanya tersedia jika kita mengubah pengaturan bahasa ke bahasa Inggris terlebih dahulu untuk memunculkan pilihan ini.

Untuk memasang iklan Adsense di antara postingan artikel di halaman utama blog, kita akan menyimpan kode-kode yang dibutuhkan di daerah <b:includable id='main' var='top'> yang biasanya akan tampak atau seperti berikut:
<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>


Untuk menampilkan iklan Adsense di antara postingan artikel di halaman utama blog, silahkan tambahkan kode index='x' pada kode <b:loop values='data:posts' var='post'> sehingga menjadi seperti berikut:
<b:loop values='data:posts' var='post' index='x'>


Kemudian gunakan kode berikut:
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
</b:if>


Angka 1 artinya iklan akan muncul di bawah postingan artikel kedua, dan angka 3 berarti iklan akan muncul di bawah postingan artikel keempat. Jadi, angka-angka tersebut bisa disesuaikan untuk mengatur iklan Adsense yang akan muncul di antara postingan artikel blog.

Simpan kode di atas tepat di bawah kode berikut ini:
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in
{&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>


Sehingga secara keseluruhan akan tampak seperti di bawah ini:
<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post' index='x'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in
{&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>


Tambahkan juga kode CSS berikut ini untuk mengatur kata "Advertisement":
.post span.title-ads{font-size:16px;font-weight:bold;display:block;margin:10px 0}
Format Baru Iklan Adsense : Page-Level Ads

Format Baru Iklan Adsense : Page-Level Ads

Google Adsense baru saja memperkenalkan format baru iklannya yang inovatif dengan nama "Page-level Ads" atau iklan tingkat laman. Iklan tingkat laman dirancang hanya untuk tampil di perangkat mobile kelas tinggi dengan browser tertentu. Format iklan ini dioptimalkan untuk muncul hanya ketika akan melakukan performansi dengan baik, memberikan pengalaman pengguna yang baik, dan mudah untuk dipasang juga.

Terdapat dua jenis format "page-level ads" yakni "anchor/overlay ads" dan "vignette ads". "Anchor/overlay ads" tampil dengan format iklan horizontal kecil yang muncul menggantung di bagian bawah layar, sedangkan "vignette ads" tampil dengan format iklan satu halaman penuh. Format iklan baru ini tidak diperhitungkan dalam batas maksimun tiga unit iklan per halaman. Kedua format iklan ini juga dengan mudah untuk dihilangkan oleh pengunjung jika tidak tertarik dengan iklan yang muncul.

Browser yang mendukung tampilan format baru iklan adsense ini di antaranya Google Chrome, Opera for Android, dengan minimal sistem operasi "Android 4.0 Ice Cream Sandwich". Sementara browser Firefox for Android and Opera Mini tidak mendukung. Google Chrome dan Safari juga mendukung tampilan format iklan ini untuk sistem operasi minimal iOS5. Browser di Windows Phone juga tidak mendukung format iklan ini.

Cara memasang format iklan baru ini sangat mudah, cukup aktifkan fitur ini di akun adsense masing-masing, kemudian ambil kode iklan yang diberikan, dan pasang di bagian atas <head> dalam templat blog atau situs.
Memunculkan Iklan Adsense Di Antara Posting Blog

Memunculkan Iklan Adsense Di Antara Posting Blog

Google Adsense memang sudah lama mendukung situs dan blog berbahasa Indonesia, namun khusus untuk memunculkan iklan adsense di antara posting atau artikel blog berbahasa Indonesia, masih tidak bisa muncul secara otomatis di pilihan "Edit Posting Blog".

Hal ini juga bisa dilihat dari beberapa komentar sobat blogger yang menanyakan cara untuk menampilkan atau memunculkan iklan adsense di antara posting atau artikel blog ini. Artikel ini saya tulis sebagai solusi untuk menjawab pertanyaan tersebut.

Sebenarnya cara yang harus dilakukan cukup sederhana, sebagai berikut :
1. Login ke Blogger, pilih Settings, kemudian di bagian pengaturan bahasa, pilih Bahasa Inggris. Simpan pengaturan.
2. Pilih Layout (Tata letak), klik Edit di bagian Posting Blog, akan muncul jendela baru dengan pilihan "Show Ads Between Posts" di bagian bawah. Centang bagian ini dan lakukan pengaturan iklan adsense yang diinginkan. Simpan.
3. Setelah iklan adsense di antara posting muncul, kembali lagi ke bagian Settings dan pengaturan bahasa, ganti kembali ke pilihan Bahasa Indonesia. Simpan.

Demikian cara yang bisa dilakukan untuk memunculkan iklan adsense di antara posting atau artikel blog di Blogger.
Cara Membuat Menu Navigasi Blogger Responsif

Cara Membuat Menu Navigasi Blogger Responsif

Dengan semakin populer dan meluasnya penggunaan perangkat mobile untuk browsing di dunia maya, maka membuat blog yang "mobile friendly" merupakan sebuah keharusan yang tidak bisa dihindari lagi. Apalagi Google sendiri untuk pencarian melalui perangkat mobile akan memberikan prioritas untuk blog atau situs yang dikategorikan "mobile friendly" dalam menampilkan hasil pencarian mobile tersebut. Untuk mendukung blog yang "mobile friendly" tersebut, menu navigasi blog yang responsif sekaligus "mobile friendly" juga harus diperhatikan.

Menu navigasi blogger responsif yang dibuat dengan cara berikut ini memiliki keistimewaan dalam versi mobile, di mana menu navigasi yang ditampilkan otomatis akan mendorong konten artikel ke bawah, tepat di bawah menu navigasi, dan tidak akan menutupi konten artikel atau iklan yang ada di bagian atas blog.

Silakan ikuti langkah demi langkah berikut cara membuat menu navigasi responsif khusus untuk platform blogger.

Langkah pertama :
Buka "Template Blogger", kemudian "Edit HTML". Backup terlebih dahulu template yang ada. Setelah itu, copy kode CSS berikut ini dan letakkan di atas kode </style> atau ]]></b:skin> :

/* Navigasi Menu */
#pull{display:none;text-decoration:none}
#navi{background:#222;width:100%;display:block;font-size:16px; font-family:"Open Sans Condensed",sans-serif;text-transform:uppercase;font-weight:bolder; width:100%; overflow:hidden; position:relative;text-decoration:none;margin:0 auto; padding:0
#navi ul{margin:0 auto; padding:0}
#navi li{list-style:none}
#navi li a{float:left;display:block; color:#fff;font-size:16px; padding:10px 20px;text-decoration:none}
#navi li a:hover{display:block;text-decoration:none; color:#fff;background:#ea6153;}
@media screen and (max-width:960px){
#navi{height:auto; border-bottom:0}
#navi ul{width:100%; display:none; height:auto}
#navi li{width:100%; float:left; position:relative;}
#navi li a{padding:10px 0}
#navi a{text-align:left; color:#f1f1f1; padding-top:14px; width:100%; text-indent:20px}
#navi a#pull{display:block; margin:0 auto; background-color:#333; height:40px; width:100%; position:relative}
#navi a#pull:after{content:''; background:url(http://1.bp.blogspot.com/-oB6hb7vlX3s/UhVaYStH6qI/AAAAAAAAAzQ/HTg9BDuy50Q/s320/nav-icon.png) no-repeat; width:30px; height:30px; display:inline-block; position:absolute; right:10px; top:14px}
}

Langkah kedua :
Tambahkan jquery berikut di atas </head>, tidak menjadi masalah jika versinya berbeda dan abaikan jika sudah ada dalam blog Anda.
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Langkah ketiga :
Copy script berikut ini, lalu letakkan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){var pull=$('#pull');menu=$('#navi ul');menuHeight=menu.height();$(pull).on('
click',function(e){e.preventDefault();menu.slideToggle()})});
//]]>
</script>

Langkah terakhir :
Letakkan kode berikut di bawah kode </header>

<nav class='clearfix' id='navi' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<a href='#' id='pull'>Menu</a>
<ul class='clearfix'>
<li><a href='/' title='Home'>Home</a>
</li>
<li><a href='/search/label/A?max-results=5' title='A'>A</a>
</li>
<li><a href='/search/label/B?max-results=5' title='B'>B</a>
</li>
<li><a href='/search/label/C?max-results=5' title='C'>C</a></li>
<li><a href='/search/label/D?max-results=5' title='D'>D</a></li>
</ul>
</nav>

Sesuaikan A, B, C, D di atas dengan label yang ada di blog Anda. Simpan template.

Selamat mencoba !
Cara Mengatasi Isi Halaman Statis Blog Kosong

Cara Mengatasi Isi Halaman Statis Blog Kosong

Pernahkah Anda mengalami isi halaman statis blogger kosong padahal halaman statis tersebut berisi sitemap atau daftar isi, atau bisa juga deskripsi singkat mengenai blog kita ? Hal ini bisa saja terjadi dikarenakan ada kode HTML yang terhapus di template blog kita.

Cara untuk mengatasi isi halaman statis blog kosong atau hilang sebenarnya cukup mudah. Seperti biasa, masuk ke bagian Template blog kita, dan pilih Edit HTML. Kemudian cari kode berikut :
<div itemprop='description articleBody'>

Pada template blog yang saya pakai, kode tersebut ada dua, dan pilih kode yang kedua, setelah itu tambahkan kode <data:post.body/> tepat di bawah kode tersebut sebelumnya, kemudian simpan.

Cek kembali tampilan halaman statis blog Anda. Halaman statis blog sekarang seharusnya sudah lengkap kembali dengan isi yang hilang sebelumnya.
Cara Mengatasi Template Posting Blogger Yang Rusak

Cara Mengatasi Template Posting Blogger Yang Rusak

Template blogger bisa rusak dalam arti hasil perubahan edit HTML yang telah kita lakukan tidak bisa tersimpan. Proses simpan ("save template") bisa dilaksanakan, namun setelah masuk lagi ke template blogger, edit HTML tersebut tidak nampak alias tidak tersimpan. Dan yang lebih parah lagi, tampilan blog menjadi berantakan, terutama di bagian posting, yang tidak sesuai dengan tampilan yang kita inginkan. Kerusakan ini bisa saja dikarenakan kesalahan teknis sistem blogger pada saat kita melakukan edit template.

Namun jangan panik dan frustrasi dulu. Untuk mengatasi template blogger yang rusak ini sebenarnya sangat mudah. Seperti petunjuk yang diperoleh dari Blogger Sentral, caranya sebagai berikut :
1. Masuk ke Template > Edit HTML
2. Cari kode HTML berikut : <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> atau yang sejenisnya.
3. Ganti kode ID dari Blog1 ke Blog2. Dengan cara ini maka gadget Posting Blog yang rusak yakni Blog1 akan dihapus dan diganti dengan gadget Posting Blog yang baru yakni Blog2.
4. Klik tombol "Save Template" untuk menyimpan.
5. Lihat tampilan blog. Tampilan bagian Posting Blog seharusnya sesuai dengan tampilan yang diinginkan.

Setelah kerusakan teratasi, jika ingin menrubah ID blog kembali ke Blog1 juga bisa dilaksanakan.

Selamat mencoba, semoga bermanfaat.
Back To Top