20 Template Blog Keren, SEO Friendly, Responsive untuk Blog Berita

20 Template Blog Keren, SEO Friendly, Responsive untuk Blog Berita

20 Template Blog Keren Terbaru: SEO Friendly, Responsive untuk Blog Berita. Cocok buatNiche Blogger Lainnya.

SALAH satu kelebihan platform blog blogspot (blogger) adalah tampilan atau desain templatenya yang bisa dimodifikasi sesuai dengan selera blogger.

Untuk blog berita (news blog), yakni blog jenis "portal" yang berisi ragam informasi aktual, banyak template free (gratis) yang bisa digunakan dan dimodifikasi.

Hampir semua desainer template menyediakan template blog bernuansa "news" dan/atau "magazine" sehingga banyak pilihan template untuk blog berita.

Template blog yang bagus digunakan untuk blog berita atau niche blog pada umumnya antara lain:

1. SEO Friendly alias ramah mesin telusur agar mendapatkan banyak pengunjung dari hasil indeks mesin pencari.
2. Desain Profesional agar blog lebih kredibel dan terpercaya.
3. Fast Loading alias tampil cepat, tidak berat, karena kalo berat akan ditinggalkan pengunjung.
4. Responsive alias Mobile Friendly. Jika tidak ramah mobile, bukan saja Google sulit mengindeksnya, tapi juga tidak akan banyak pengunjung karena user kini lebih banyak menggunakan HP untuk akses internet.

List Top 15 Template Blog SEO Friendly untuk Situs Berita

Berikut ini Koleksi 15 Template Blog Keren dan SEO Friendly untuk Blog Berita disertai link demo dan downloadnya.

#1. Detik Style - News Blogger Template (Premium)

DEMO - ORDER

Detik Style - News Blogger Template adalah template blog berita terbaru dengan konsep situs berita terpopuler di Indonesia, detik.com. Dengan template ini pengunjung akan betah karena sesuai dengan User Experience (UX).

#2. Black News Blogger Theme (Premium) New

DEMO | ORDER

Masih menggunakan konsep DetikStyle, Black News Blogger Template didisain sedikit berbeda dengan memunculkan sidebar kiri di mobile devices. Pilihan warna hitam juga memudahkan Anda mengganti warna latar belakang yang diinginkan.

#3. CLEAN NEWS New

DEMO | ORDER

#4. Simple Grid New

DEMO | ORDER

#5. Newspaper Theme

DEMO | ORDER

#6. CB Simple News

DEMO | ORDER

#7. CB Magazine (Free)

DEMO - DOWNLOAD

#8. NJW Magz

DEMO - ORDER

#9. Flat Mag

Live Demo Download

#10. Kontify

Live Demo Download

#11. Modern Mag

Live Demo Download

#12. TechLife Blogger Template

DEMO | DOWNLOAD

#13. Bresponsive

Live Demo Download

#14. Gamer MagZ

Live Demo Download

#15. SEO Beast

DEMO - DOWNLOAD

#16. Google SEO V2

DEMO - DOWNLOAD

#17. Flat News

DEMO - DOWNLOAD

#18. MagOne

DEMO - DOWNLOAD

#19. GodMag

 DEMO - DOWNLOAD

#20. Hot Magazine

DEMO | DOWNLOAD

Demikian 20 Template Blog Keren, SEO Friendly, Responsive untuk Blog Berita. Berikut ini bonusnya.

NewsTube Blogger Template



DEMO | DOWNLOAD

ChicMag Blogger Theme



DEMO | DOWNLOAD

Demikian 20 Template Blog Keren, SEO Friendly, Responsive untuk Blog Berita (Best Free & Premium Blogger Themes) yang juga cocok digunakan untuk blog selain blog berita alias blog dengan konten apa saja.

APA ITU BLOG BERITA?

Blog berita adalah niche blog dengan fokus konten ke informasi aktual, sebagaimana situs-situs berita.

Bedanya dengan situs berita, blog berita dikelola oleh pribadi atau perorangan, bisa juga kelompok, dan dibuat dengan basis blogger, wordpress, atau platform blog lainnya.

Blog Berita masuk kategori general blog karena berisi ragam postingan dengan topik atau tema yang beragam, mulai olahraga, politik, sosial, budaya, dsb.

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

November 20, 2018

Cara Memasang Label & Tanggal di Atas Postingan Blog Halaman Depan

Cara Memasang Label & Tanggal di Atas Postingan Blog Halaman Depan

Cara Memasang Label & Tanggal di Atas Postingan Blog Halaman Depan

LINK Labe dan Tanggal Posting biasa ditampilkan di atas judul postingan blog, khusus halaman depan. Untuk judul halaman dalam, biasanya sudah ada Breadcrumbs dan Post Header.

Berikut ini screenshot Label & Tanggal di Atas Postingan Blog Halaman Depan. Jumlah label yang ditampilkan satu saja, biar bagus.

Menampilkan nama label fungsinya untuk navigasi atau internal link. Ini juga menambah SEO blog. Fungsi tanggal tentu saja untuk menunjukkan waktu publikasi tulisan atau artikel.

Cara Memasang Label & Tanggal di Atas Postingan Blog Halaman Depan

1. Tema > Edit HTML
2. Copas kode CSS label dan tanggal 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;'>
<style type='text/css'>
.post-labels {margin-bottom: 5px;font-size: 95%;}
.post-labels a {color:#c00;text-decoration:none}
</style>
</b:if>
</b:if>

3. Copas HTML label dan tanggal berikut ini di atas kode seperti ini:

<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>

<div class='post-labels'>
        <b:if cond='data:post.labels'>
         <b:loop values='data:post.labels' var='label'>
                                  <b:if cond='data:label.isLast == &quot;true&quot;'>
                                    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                                  </b:if>
                                </b:loop>
  </b:if> | <data:post.timestamp/>
       </div>

4. Save! Simpan template.

Demikian Cara Memasang Label & Tanggal di Atas Postingan Blog Halaman Depan. Good Luck & Happy Blogging! (www.contohblog.com).*

November 18, 2018

Title & Heading Tag SEO Friendly untuk Blogger - Agar Blog Banyak Pengunjung

Title & Heading Tag SEO Friendly untuk Blogger - Agar Blog Banyak Pengunjung

Mengganti kode title tag dan heading tag sangat penting untuk Pengoptimalan Mesin Pencari (SEO).

Penerapan kode judul blog dan mengatur heading tag judul postingan di halaman depan dan halaman dalam (single post) dimaksudkan agar konten blog kita muda dan cepat terindeks mesin pencari, khususnya Google.

Title Tag adalah judul atau nama blog dan deskripsi singkatnya. Title tag ini akan dikenali Google saat melakukan perambahan (crawling) dan indexing untuk menentukan peringkat di halaman hasil pencarian (SERP).

Kode heading tag berikut ini akan mengatur heading judul (title post) halaman depan menjadi H2 dan judul artikel di halaman dalam menjadi H1. Ini untuk mempercepat indeks Google sehingga tampil di halaman depan dan blog banyak pengunjung.

Tips SEO tentang Title Tag dan Heading Tags berikut ini berlaku khususnya untuk blogger pengguna template bawaan Blogger. Template Premium biasanya sudah dioptimalkan Title Tag dan Heading Tagnya.

Cara Memasang Title & Heading Tags SEO Friendly

Cara Memasang Title Tags

1. Tema > Edit HTML
2. Temukan kode berikut ini:

<title><data:blog.pageTitle/></title>

3. Hapus kode tersebut dan ganti dengan kode title tags SEO Friendly berikut ini:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/> | Your Blog Description Here</title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Ganti kata-kata warna merah dengan kata-kata Anda sendiri, misalnya Blog tentang Internet dan Media Sosial.

4. Save!

Cara Memasang Title Tags

1. Tema > Edit HTML
2. Temukan kode berikut ini:

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

3. Hapus kode tersebut dan ganti dengan Heading Tags SEO Friendly berikut ini:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>

4. Save! Simpan template.

Jika ukuran huruf judul depan dan dalam mengalami perubahan, maka ganti semua kode h3.post-title dengan h1.post-tile

Atur ukuran hurufnya di dengan menyimpan kode berikut ini di atas kode ]]></b:skin>

h2.post-tile {font:20px;margin:5px 0}
h1.post-title {font:25px;margin:5px 0}

Demikian Title & Heading Tag SEO Friendly untuk Blogger - Agar Blog Banyak Pengunjung. Good Luck & Happy Blogging! (www.contohblog.com).*

November 17, 2018

Cara Kerja Mesin Pencari & Faktor Penentu Peringkat (Tips SEO)

Cara Kerja Mesin Pencari & Faktor Penentu Peringkat (Tips SEO)

Bagaimana cara kerja mesin pencari, mesin penelusuran, atau search engine?

Bagaimana mesin pencari Google dan Bing mengindeks dan memeringkat halaman blog atau postingan dan menampilkannya di halaman hasil pencarian (SERP)?

Ulasan berikut ini menjelaskan tentang cara kerja mesin penelusuran (search engine) pada umumnya. CB sadur dari Rumahweb.

Dengan mengetahui Bagaimana Cara Kerja Mesin Pencari & Faktor Penentu Peringkat, kita bisa melakukan pengoptimalan mesin pencari (SEO) agar mudah diindeks Google/Bing, tampil di halaman dan peringkat pertama, dan mendatangkan banyak pengunjung.

Mesin pencari bekerja secara otomatis melalui sistem tertentu untuk melakukan penelusuran dan memberikan hasil terbaik yang relevan dengan informasi atau artikel yang dicari oleh penggguna (user) atau penelusur.

Dengan memberikan informasi yang dibutuhkan, mesin penelusuran memastikan pengunjung akan mendapatkan informasi seperti yang mereka cari.

Indeks Mesin Pencari

Agar mesin penelusuran dapat mengidentifikasi halaman web yang tepat, ia harus memiliki catatan semua halaman web yang masih online.

Mesin pencari membuat indeks-indeks halaman web/blog. Indeks ini mengidentifikasi dan mengatur setiap website dan halaman web dengan cara menarik korelasi antara kata kunci yang dicari orang dan konten yang disertakan di setiap halaman.

Website Crawler

Mesin pencari tiap saat mengidentifikasi semua halaman web/blog yang ada. Bagian ini dikerjakan oleh website crawler.

Setiap kali website crawler menemukan halaman baru, ia terlebih dahulu menelusuri halaman tersebut. Gambaran cara kerja mesin pencari dan website crawl sebagai berikut:

Agar mudah dirambah dan diideks, pemilik website/blog dapat mempercepat proses crawling dengan mengirimkan peta situs (sitemaps) dan menggunakan tautan internal (intenal link).

Untuk mengirimkan peta situs ke mesin pencari, silakan buka laman Webmaster Tools dan Bing. Daftarkan  blog Anda di sana sekaligus daftarkan sitemapnya.

Di Google, kita bisa sekaligus "mengambil sebagai Google" (Fetch as Google) untuk mempercepat proses crawling dan indexing.

Faktor Penentu Peringkat

Banyak faktor untuk menentukan peringkat website atau halaman mana yang layak mendapat peringkat atas hasil mesin pencarian.  Faktor SEO bahkan mencapai 200. Silakan baca Google Ranking Factors.

Berikut ini beberapa penentu peringkat blog atau website di halaman hasil pencarian.

1. Tautan (links)

Tautan adalah faktor yang paling penting dalam SEO blog, terutama tautan eksternal yang berasal dari satu website ke website lain. Kita mengenalnya dengan nama backlink atau outbound link. (Baca: Cara Mendapatkan Backlink Berkualitas)

Backlink atau tautan website lain ke website Anda akan memberi sinyal kepada Google bahwa ada sesuatu yang otoritatif atau berharga pada laman yang ditautkan.

Jika ada sebuah halaman web yang banyak terhubung dengan website lain, tautan itu akan meningkatkan otoritas halaman tersebut.

Selain backlink, pastikan juga blog Anda memiliki internal link (tautan ke posting lain dalam blog Anda), baik di menu navigasi, sidebar, footer, dan terutama di dalam postingan. Pastikan tulisan Anda berisi minimal satu tautan internal dan satu tautan eksternal.

2. Usia Website

Website yang telah dibuat lama umumnya dianggap lebih terpercaya dan otoritatif daripada website baru. Blog baru jangan terlalu berharap cepat terindeks dan banyak pengunjung, kecuali konten atau postingan Anda benar-benar unik dan langka, belum ditulis blogger lain.

3. Kata kunci

Cara kerja mesin penelusuran adalah dengan mencari istilah di laman yang terkait dengan kueri penelusur. Semakin banyak Anda menggunakan kata kunci yang terkait, semakin banyak memberi sinyal ke mesin penelusuran bahwa konten Anda relevan.

Pastikan kata kunci yang Anda bidik dicantumkan di judul, alinea pertama, di bagian tengah, dan di bagian akhir tulisan. Ini dikenal dengan keywords density (kepadatan kata kunci), maksimal 3% dari jumlah kata dalam tulisan. Jangan berlebihan.

4. Ramah Seluler (Mobile-Friendly, Responsive)

Google menggunakan fitur konten yang ramah seluler sebagai faktor peringkat. Jika website Anda terlihat keren di desktop, tetapi tidak optimal di seluler, maka peringkat Anda bisa menurun karena hal ini.

Pastikan blog Anda ramah seluler dengan menggunakan template blog responsive. Mayoritas pengguna kini mengakses internet atau membuka halaman web/blog melalui perangkat seluler (HP). Google pernah mengingatkan dalam isu Mobile-Geddon.

5. Kecepatan Halaman (Fast Loading)

Laman yang dimuat lambat akan diberi peringkat lebih rendah oleh Google. Pastikan website Anda tampil cepat. Gunakan template ringan atau fast loading.

Jangan terlalu banyak memasan widget di sidebar atau footer. Perhatikan ukuran file foto. Penentu utama kecepatan halaman blog adalah script dan foto. Gak usah pasang macam-macam widget yang tidak perlu --hanya memberatkan loading.

6. Behavior Data

Google melacak apa yang dilakukan orang setelah mereka masuk ke halaman hasil mesin penelusuran. Jika seseorang mengklik sebuah halaman dan segera backtracks, artinya halaman tersebut tidak menyediakan apa yang mereka cari.

Namun, jika pengunjung menghabiskan waktu di laman atau bahkan mengklik ke halaman yang berbeda di situs yang sama, maka Google akan menambah peringkat di situs tersebut.

Google dan mesin pencari lainnya telah memberikan beberapa informasi tentang faktor peringkat yang mereka gunakan, tetapi mereka umumnya tetap merahasiakan cara algoritma mesin pencari mereka bekerja, dengan alasan keamanan dan menghindari peretas yang bisa memanipulasi hasil.

Konten Berkualitas

Selain keenam faktor di atas, konten tetap menjadi faktor SEO utama, sebagaimana dalam panduan Google.

Baca: Tips Membuat Konten Berkualitas dan Disukai Google

Konten atau tulisan Anda harus bermanfaat, unik, asli (bukan hasil copas), lengkap, dan dicari banyak pengguna internet.

Demikian ulasan tentang Bagaimana Cara Kerja Mesin Pencari & Faktor Penentu Peringkat Blog di halaman hasil pencarian. Good Luck & Happy Blogging! (www.contohblog.com).*

November 13, 2018

CB Simple Grid - Template Blogger SEO Friendly Terbaru untuk Segala Jenis Blog

CB Simple Grid - Template Blogger SEO Friendly Terbaru untuk Segala Jenis Blog

CB Simple Grid - Template Blogger SEO Friendly Terbaru untuk Segala Jenis Blog, mulai blog catatan, tips, trik, travel, blog foto, video, galeri, blog berita, hingga toko online (online strore).

Responsive Mobile-Friendly. SEO sudah dioptimalkan. AdSense Ready. Premium Theme!

Didesain dengan konsep tampilan website kekinian dengan sticky header all in one (plus menu responsive dan kotak pencarian).

Data CB Simple Grid - Template Blogger SEO Friendly Terbaru untuk Segala Jenis Blog

CB Simple Grid Responsive Mobile Friendly

CB Simple Grid Speed Fast Loading

Desktop: 100 Mobile: 75

CB Simple Grid Structured Data No Error

DEMO | ORDER

Demikian CB Simple Grid - Template Blogger SEO Friendly Terbaru untuk Segala Jenis Blog. Order Sekarang! Hanya Rp150.000,-

November 12, 2018

Tombol Berbagi Posting ke Media Sosial di Bawah Postingan Blog Fast Loading

Tombol Berbagi Posting ke Media Sosial di Bawah Postingan Blog Fast Loading

Cara Memasang Tombol Berbagi Posting ke Media Sosial (Social Share Button) di Bawah Postingan Blog Tanpa Javascrip Fast Loading.

CB baru saja memasang Tombol Berbagi Posting ke Media Sosial (Social Share Button) di Bawah Postingan Blog, Tanpa Javascrip, biar Fast Loading. Semula, CB menggunakan AddThis.

Biasanya, jika ada yang berubah atau hal baru di blog ini, suka ada yang tanya, bagaimana cara pasangnya, atau minta dikasi tau kode dan cara pasangnya.

Nah, berikut ini CB share kode dan Cara Memasang Tombol Berbagi Posting ke Media Sosial (Social Share Button) di Bawah Postingan Blog Tanpa Javascrip Fast Loading.

Demonya tentu saja ada di bawah tiap artikel di blog ini. Ini Penampakannya. Terdiri dari tombol share ke Facebook, Twitter, Google Plus, Pinterest, LinkedIn, dan WhatsApp (WA).

Cara Memasang Tombol Berbagi Posting ke Media Sosial

1. 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='gplus'><a class='gplus' 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'><span>Google+</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!

Demikian cara memasang Tombol Berbagi Posting ke Media Sosial fast loading tanpa javascript. Good Luck & Happy Blogging! (www.contohblog.com).*

November 04, 2018

Cara Memasang Featured Post by Label di Halaman Depan Blog

Cara Memasang Featured Post by Label di Halaman Depan Blog

Cara Memasang Featured Post by Label di Halaman Depan Blog

Kita bisa memasang widget Featured Post yang sudah disediakan Blogger di Halaman Depan Blog. Namun, hanya satu posting saja yang bisa ditampilkan.

Jika ingin menampilkan lebih dari satu, berikut ini kode dan cara memasangnya. Penampilannya seperti gambar berikut ini. Sudah dibuat responsive.

Cara Memasang Featured Post by Label di Halaman Depan Blog

1. Tema > Edit HTML
2. Pasang kode CSS & Javascript Featured Post by Label berikut ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
div#featured-posts-section{max-height:350px;overflow:hidden;background:#fff;}
#featured-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px}
.featured-post a{font-size:1.2em;color:#fff;}
.featured-post a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-post a{margin:0;font-size:17px}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 25px 0 0}
.featured-post .secondary-post{background:#dadada;width:32%;margin:0 0 20px 0;transition:all .4s}
.featured-post .main-post{background:#dadada;width:65%;padding:0;transition:all .4s}
.featured-post .main-post:before,.featured-post .secondary-post:before{bottom:0;content:&quot;&quot;;display:block;height:50%;width:100%;position:absolute;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%)}
.featured-post .main-post:after,.featured-post .secondary-post:after{content:&#39;&#39;;z-index:1;height:100%;width:100%;background:rgba(0,0,0,0.2);opacity:0;position:absolute;top:0;left:0;border-radius:50%;transform:scale(0,0);transition:all .4s}
.featured-post .main-post:hover:after,.featured-post .secondary-post:hover:after{opacity:1;transform:scale(1.5,1.5)}
.featured-post span{background:#c00;display:inline-block;color:#fff;font-style:normal;position:absolute;transition:all .4s;font-size:11px;line-height:1.4;padding:3px 6px;top:10px;left:10px;z-index:2}
.featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:#4aa3df;}
.featured-post img{height:100%;transition:all .5s}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover;}
.featured-post .secondary-post img{height:165px;object-fit:cover;width:100%;}
.featured-post .main-post:hover img,.featured-post .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d;}
.featured-post header{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png);}
.featured-post .secondary-post header{padding:10px}
.featured-post header h3{font-size:22px;}
.featured-post h4{font-size:15px;}
span.label-info a.label-block:nth-child(n+2),.showpageOf {display:none;}
@media screen and (max-width:768px) {}
@media screen and (max-width:640px) {}
@media only screen and (max-width:1024px){
div#featured-posts-section{padding:0}
}
@media only screen and (max-width:800px){
div#featured-posts-section{max-height:none}
.featured-post .main-post{width:100%;margin-bottom:10px}
.featured-post .secondary-post{width:50%}
.featured-post .secondary-post img{width:100%}
}
@media only screen and (max-width:600px){
.featured-post .main-post img{height:250px}
.featured-post .secondary-post{width:100%}
.featured-post .main-post h3.entry-title{font-size:16px;margin:0 10px;line-height:normal}
.featured-post .main-post h3.entry-title a{line-height:1.3em}
.featured-post header{padding:10px 0 5px}
}
@media only screen and (max-width:300px){
.featured-post .main-post h3.entry-title {font-size: 20px;}
}
</style>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//]]>
</script>
</b:if>

3. Copas kode HTML Featured Post by Label berikut ini di bawah kode penutup navigasi menu blog Anda, atau di atas kode seperti <div class='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ct-wrapper' id='featured-posts-section'>
<div class='featured-post padding clearfix'> 
<script type='text/javaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Featured?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</b:if>
<div class='clear'/>

Kode warna merah (Featured) adalah nama label. Anda bisa ganti dengan nama label posting yang akan ditampilkan.

Jika ingin menampilkan posting terbaru, maka kodenya diubah menjadi /feeds/posts/default.

4. Save!

Demikian Cara Memasang Featured Post by Label di Halaman Depan Blog. Lihat juga Desain Featured Post lainnya.

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

October 30, 2018

Kumpulan Challenge 'Seberapa Gregetnya' yang Bikin Ngakak!

Kumpulan Challenge 'Seberapa Gregetnya' yang Bikin Ngakak!

Kumpulan Challenge 'Seberapa Gregetnya' Yang Bikin Ngakak!

NETIZEN atau warganet di media sosial sedang ramai membuat parodi-parodi "seberapa greget".

Twitter, Instagram, dan Youtube menjadi media sosial yang banyak digunakan untuk menyebarkan kata-kata kocak "Seberapa Gregetnya" ini.

Berikut ini Kumpulan Challenge 'Seberapa Gregetnya' yang Bikin Ngakak. Dikoleksi dari berbagai sumber, terutama di Twitter. Ada juga yang diambil dari tayangan di televisi.

Kumpulan Challenge 'Seberapa Gregetnya' yang Bikin Ngakak

- Seberapa geregetnya elo?
+ Kemaren gue ketemu kuntilanak
- Terus?
+ Kuntilanaknya gue ketawain!

- Seberapa geregetnya elo?

+ Gua beli jamu gendong.

- Trus?

+ Jamunya gua buang, Mbak Jamunya gua gendong!

- Seberapa geregetnya elo?

+ Gw lewat polisi tidur.

- Terus?

+ gua selimutin!

- Seberapa geregetnya elo?

+ Gua lihat polisi tidur.

- Terus?

+ Gua bangunin!

- Seberapa geregetnya elo?

+ Gua yang lapar.

- Terus?

+ Elu yang makan!

- Seberapa geregetnya elo?

+ Gua yang sakit, lu yang ke dokter!

- Seberapa geregetnya elo?
+ Gua ke rumah sakit, dokernya gua obatin!

- Seberapa geregetnya elo?
+ masak indomie, mienya gw buang, bungkusnya gw rebus!

- Seberapa geregetnya elo?
+ Tadi pagi ada tanah liat.
- Terus?
+ Yaudah gua liatin balik!

- Seberapa geregetnya elo?
+ Gua beli lumpia basah.
- Terus?
+ Gua keringin di mesin cuci!

- Seberapa geregetnya lo?
+ Tadi gua makan pisang
- Terus?
+ Kulitnya gua buang lah..!

- Seberapa geregetnya elo?
+ Semalem gw digigit nyamuk
- Trus?
+ Nyamuknya yang bentol!

- Seberapa geregetnya elo?
+ Kemarn ada nasabah yang curhat. 
- Terus?
+ Langsung gua panggil Mamah Dedeh!

- Seberapa geregetnya elo?
+ Gue ambil uang ke ATM.
- Terus?
+ Struknya gua ambil, duitnya gua buang!

- Seberapa geregetnya elo?
+ Gua Beli batagor.
- Terus?
+  gor-nya gua buang, bata-nya gua makan!

Bagaimana dengan Anda? Seberapa Gregetnya Anda ....?  

Silakan tambahkan di kolom komentar. Buat seru-serun aja. Happy Blogging! (www.contohblog.com).*

October 27, 2018

3 Cara Menampilkan Tulisan Terbaru (Recent Post) di Sidebar Blogger

3 Cara Menampilkan Tulisan Terbaru (Recent Post) di Sidebar Blogger

DAFTAR tulisan terbaru, artikel terbaru, atau posting terbaru (recent post) biasanya dipasang di sidebar.

Template bawaan Blogger, bahkan banyak juga template premium, yang tidak menampilkan widget recent post ini, sehingga kita harus pasang sendiri.

Cara Menampilkan Tulisan Terbaru di Sidebar Blogger

Ada tiga Cara Menampilkan Tulisan Terbaru (Recent Post) di Sidebar Blogger

1. Gunakan Widget Feed

Kita bisa menggunakan widget Feed bawaan Blogger untuk menampilkan posting terbaru di sidebar. Cara memasangnya sebagai berikut:

• Klik Layout (Tata Letak) > Add a Gadget > pilih Feed
• Masukkan alamat blog Anda.
• Klik "Continue"
• Ubah judul widget menjadi "Recent Posts" atau "Posting Terbaru"

2. Gunakan Kode

Cara di atas tidak belum tentu cocok dengan template blog yang Anda gunakan. Jika tidak bisa dengan cara di atas, Anda bisa gunakan cara kedua yaitu dengan menggunakan kode.

Cara Mamasangnya:

- Layout > Add a Gadget > pilih HTML/Javascript
- Isi judul widget dengan Recent Post atau Posting Terbaru
- Copas kode berikut ini di kolom konten.

<style>
img.rct-thumb{float:left;margin-right:14px;height:72px;width:72px;margin-top:1px}
.recent-by-tag{width:100%;margin:0;padding:0}
.recent-by-tag li{font-size:12px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
ul.recent-by-tag li {padding: 10px 0;margin-bottom: 0;border-bottom: 1px dashed #f1f1f1;line-height: normal;}
.recent-by-tag a {font-size: 16px;font-weight:500;margin: 0;padding: 0;line-height: normal;}
.recent-by-tag strong{padding-left:0;font-weight:500}
span.showdates{font-size:11px;margin:10px 0 0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>
<script>
document.write("<script src=\"/feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Save! 
Kode di atas menampilkan Posting Terbaru berupa Judul dan Gabar Thumbnail seperti gambar ilustrasi di atas.

3. Menggunakan Feedburner

Cara ketiga Posting Terbaru Menampilkan Tulisan Terbaru (Recent Post) di Sidebar Blogger adalah dengan menggunakan Feedburner.

Cara Mamasangnya:

- Layout > Add a Gadget > pilih HTML/Javascript
- Isi judul widget dengan Recent Post atau Posting Terbaru
- Copas kode berikut ini di kolom konten

<script src="https://feeds.feedburner.com/contohblognih?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/contohblognih"></a><br/>Powered by FeedBurner</p> </noscript>

- Ubah contohblognih dengan username atau ID FeedBurner Anda.
- Jika belum punya, buat dulu akun Feedburner, daftarkan blog Anda untuk mendapatkan kodenya.
- Di akun Feedbuerne blog Anda: klik menu Publicize > BuzzBoost > Save > Copas Kodenya

Demikian 3 Cara Menampilkan Tulisan Terbaru (Recent Post) di Sidebar Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

October 26, 2018

Cara Membuat Tombol Berbagi (Social Share Button) Show Hide Keren Responsive

Cara Membuat Tombol Berbagi (Social Share Button) Show Hide Keren Responsive

Cara Membuat Tombol Berbagi (Social Share Button) Show Hide Keren Responsive di Blogger.

DESAIN atau tampilan Tombol Berbagi (Social Share Button) model Show Hide Keren & Responsive mirip dengan Social Share yang dibagikan sebelumnya.

Tombol Berbagi Posting blog ke media sosial ini cukup lengkap, meliputi Facebook, Twitter, Google Plus, Line, WhatsApp (WA), LinkedIn, dan Pinterest.

Tampilan normalnya hanya tiga (Facebook, Twitter, Google Plus) ditambah tombol hide-show untuk menampilkan link share ke medsos lainnya. Ini penampakannya:

Cara Membuat Tombol Berbagi (Social Share Button) Show Hide

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

<style>
/* CSS Share Button */
#share_btnper{margin:5px;padding:0}
.showother{display:none}
.share_btn{position:relative;margin:0;padding:0;display:block;overflow:hidden}
.share_btn ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px}
.share_btn ul li{float:left;display:inline-block;overflow:hidden}
.share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:block;text-align:center;height:35px;line-height:35px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;letter-spacing:1px;border-radius:4px;overflow:hidden}
.share_btn i{font-size:16px;padding:0;margin:0;line-height:35px;text-align:center}
.shareplus{padding:0;background:#aaa;cursor:pointer}
.share_btn li a.fb i,.share_btn li a.tw i{width:20px;text-align:left}
.share_btn a:hover{background:#333}
.share_btn li a.fb{background:#4867aa;padding:0 35px;width:auto}
.share_btn li a.tw{background:#1da1f2;padding:0 35px;width:auto}
.share_btn li a.gp{background:#dc4a38}
.share_btn li a.pt{background:#ca2128}
.share_btn li a.le{background:#0673ab}
.share_btn li a.tr{background:#43556e}
.share_btn li a.em{background:#141b23}
.share_btn li a.ln{background:#00c300}
.share_btn li a.bm{background:#000}
.share_btn li a.wa{background:#4dc247}
.share_btn li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%);opacity:0.8}
@media screen and (max-width:600px){
.share_btn li a.fb,.share_btn li a.tw{padding:0 37px}}
@media screen and (max-width:480px){
.share_btn li a.fb,.share_btn li a.tw{padding:0 25px}}
@media screen and (max-width:320px){
.share_btn ul li a.fb,.share_btn ul li a.tw{padding:0 14px}}
</style>

3. Copas kode berikut ini di bawah kode
<b:includable id='shareButtons' var='post'> ... </b:includable> 
atau di atas kode     
<b:includable id='status-message'>

          <b:includable id='sharethis' var='post'>
<div class='share_btn'><ul>
<li><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=626,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/> SHARE</a></li>
<li><a class='tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> SHARE</a></li>
<li><a class='gp' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'/></a></li>
<div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-plus'/></span></div>
</ul>
<ul class='showother' id='showother'>
<li><a class='pt' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' target='_blank'><i class='fa fa-pinterest'/></a></li>
<li><a class='le' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on LinkEdin'><i aria-hidden='true' class='fa fa-linkedin'/></a></li>
<li><a class='tr' href='http://www.tumblr.com/share' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li>
<li><a class='ln' expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target='_blank' title='Share On Line'>
  <svg class='icon icons8-LINE' viewBox='0 0 48 48'>
    <path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23      C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
    <path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637      c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185      c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001      C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687      C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652      c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688      c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035      c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z      M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917      c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603      c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604      c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/>
  </svg>
  </a></li>
<li><whatsapp expr:href='data:post.url' expr:text='data:post.title'/><a class='wa' expr:href='&quot;whatsapp://send?text=&quot;+ data:post.url'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:24px!important'/></a></li>
<div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-minus'/></span></div>
  </ul>
  </div>
</b:includable>

4. simpan kode berikut ini di bawah judul posting dan/atau di bawah postingan.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-wrapper' id='share_btnper'>
<b:include data='post' name='sharethis'/>
  </div>
</b:if>

- Untuk ditampilkan di bawah judul, simpan di atas kode <data:post.body/> yang kedua atau ketiga.
- Untuk di bawah judul posting, simpan di bawah kode <data:post.body/> yang kedua atau ketiga atau di atas kode  <div class='post-footer'>

Demikian Cara Membuat Tombol Berbagi (Social Share Button) Show Hide Keren Responsive. Sumber dari codepen.io. Good Luck & Happy Blogging! (www.contohblog.com).*

October 25, 2018