From Galeri Template

Latest Posts

Template Blog AMP - Trik Diterima Google AdSense

Template Blog AMP - Trik Diterima Google AdSense
Template Blog AMP - Trik Diterima Google AdSense.

UNTUK bisa diterima jadi penayang iklan Google (Pulisher Google AdSense), blog kita harus banyak pengunjung. Prediksi CB, pengunjung blog setidaknya 500-1000 unique visitor per hari.

Salah satu trik agar diterima Google AdSense adalah denga menggunakan Template Blog AMP. Apa itu AMP, Anda bisa simak di AMP Project atau Penjelasan Google tentang AMP.

Dengan menggunakan Template Blog AMP, pengunjung akan meningkat, trafik naik, maka otomatis akan jadi pertimbangan Google untuk menerima blog kita sebagai penayang Google AdSense.

Nati, setelah diterima jadi penayang iklan Google, punya akun di AdSense, kita bisa bikin maksimal 500 blog untuk menayangkan iklan Google, tapi jangan gunakan Template AMP, karena template blog AMP bisa menurunkan penghasilan AdSense.

Berikut ini Template Blog AMP untuk digunakan di blog baru Anda. Tidak disarankan digunakan di blog yang sudah banyak postingan karena harus edit lagi agar Valid AMP.

Template Blog AMP - Premium

Template Blog AMP


[Hanya Rp 140.000]

Valid AMP page
Page is eligible for AMP search features in Google search results:
Both Homepage & Single Post is VALID AMP

Cek:

Valid AMP page

Page is mobile-friendly
This page is easy to use on a mobile device


Page is mobile-friendly

SKOR SEO: 100%

SEO Score for http://contohblogamp.blogspot.co.id/
100 %
Congratulations!

SKOR SEO: 100%


Performance Scores
PageSpeed Score: A (92%)
YSlow Score: B (80%)

Template Blog AMP - Trik Diterima Google AdSense


DEMO | ORDER

Hanya Rp 140.000

== Panduan Posting Ada di Blog DEMO ==

Features:
  • SEO Optimized
  • Clean and User Friendly
  • Fast Loading
  • Responsive-Mobile Friendly
  • Sratic Image Thumnail Related Post
  • Komentar Facebook dan Disqus
  • Header normal seperti template blog biasa
  • AdSense Ready
  • Stylish Popular Post
  • Featured Post Homepage - Posting Terbaru Otomatis Jadi Featured Post
  • ... more...
Template Blog AMP Recommended for New Blog but Not for New Blogger. Blogger baru (newbie) tidak disarankan menggunakan template AMP karena postignya ribet.*

Keuntungan dan Kerugian Menggunakan Template Blog AMP

Keuntungan dan Kerugian Menggunakan Template Blog AMP
Keuntungan dan Kerugian Menggunakan Template Blog AMP. 

Selain Ribet, Template Blog AMP Bisa Menurunkan Pendapatan AdSense.

AMP adalah singkatan dari Accelerated Mobile Pages atau Halaman Seluler yang Dipercepat.

Menurut Google, Accelerated Mobile Pages (AMP) adalah standar pembuatan halaman yang dapat dimuat dengan cepat, yang terlihat bagus di perangkat seluler.

Memiliki situs yang mobile-friendly menjadi bagian penting di dunia online. Di banyak negara, traffic smartphone kini sudah melebihi traffic desktop.

Menurut laman resminya, AMP Project adalah inisiatif sumber terbuka yang bertujuan untuk membuat web lebih baik bagi semua kalangan.

Proyek ini memungkinkan pembuatan situs dan iklan dengan performa tinggi, cepat, dan konsisten di berbagai perangkat dan platform distribusi.

Lalu, apa kelebihan atau keuntungan menggunakan template blog AMP? Apa pula kerugiannya?

Ringkasnya, template blog AMP itu ringan, simple, dan lebih mudah diindeks Google di perangkat mobile (seluler). Kerugiannya, postingnya ribet, butuh kerja ekstra, dan banyak fitur blogger yang tidak bisa digunakan di template AMP.

Selain Ribet, Template Blog AMP Bisa Menurunkan Pendapatan AdSense. Kerugian menggunakan Temple Blog AMP lebih banyak dibandingkan keuntungannya.

Anda bisa simak ulasan mendalam soal keuntungan dan kerugian menggunakan template blog AMP di MBT. Keuntunggannya hanya 4 poin berbanding 12 poin kerugiannya.

Umumnya, blogger beralih ke template AMP  untuk mengejar FAST LOADING atau kecepatan tampilan blog, terutama di seluler (mobile devices).

Namun, Template Blog non-AMP sekarang juga banyak yang ringan nan cepat, bahkan bisa lebih cepat dari AMP.

Keuntungan dan Kerugian Menggunakan Template Blog AMP

Ini dia keuntungan dan kerugian menggunakan Template Blog AMP menurut MBT.

Keuntungan:

1. Template  AMP tampil lebih cepat dibandingkan template blog biasa.
2. Template AMP bisa meningkatkan peringkat (ranking) di Google.
3. Pageviews bisa naik karena tampilannya cepat sehingga disukai pembaca.
4. Template AMP sangat cocok untuk blog baru.

Kerugian:

1. Berdampak Buruk bagi Pendapatan iklan AdSense. (AMP Badly Effects Your Ad Revenue). Anda tidak akan memperoleh penghasilan sebanyak menggunakan template blog biasa.

2. Anda sama sekali tidak bisa menggunakan JavaScript. Desain blog Anda tidak bisa seindah tampilan yang biasa dibangun dengan kode JS.

3. Anda tidak bisa menggunakan Form Komentar Blogger. Anda hanya bisa menggunakan kotak komentar Disqus.

4. Anda tidak bisa menggunakan Blogger Template Editor. Edit tampilan hanya bisa dilakukan di dalam template. Itu pun harus ekstra hati-hati agar tetap Valid AMP.

5. Semua gambar atau foto harus diedit. Cara memasang gambar di postingan juga "rumit" --menggunakan kode khusus dan di mode HTML.

6. Anda tidak bisa menggunakan widget di sidebar sebagamana template blog biasa.

7. Anda tidak bisa berjualan di blog Anda, dalam hal ini tidak bisa menambahkan "Add-to-Cart button".

8. Semua kode tempel video dan audio (Videos and Audios embedded) di postingan harus diedit.
9. Semua tag iframe di postingan harus diedit.

10. Tidak bisa menggunakan "Email Subscription Form" atau Kotak Berlangganan.
11. AMP mendukung jaringan iklan terbatas.
12. Atribut XMLNS harus dihapus.

Bagi CB sih, intinya menggunakan template blog AMP itu ribet, butuh banyak waktu, juga butuk tenaga dan pikiran ekstra saat posting, kecuali mau posting teks doang tanpa gambar.

Soal kelebihan utama AMP, yakni kecepatan, template blog biasa juga banyak yang cepat dan ringan.

Soal indeks mobile, template blog responsive juga mudah dan cepat terindeks Google kok!

Nah, pilihan di tangan Anda. Posting ini tidak bermaksud menghalangi Anda menggunakan template blog AMP.

Link: Koleksi Template Blog AMP Gratis.

Saran / Rekomendasi

1. Jangan gunakan template blog AMP di blog lama yang sudah banyak postingan, kecuali jika Anda "ngabuburit" dengan meluangkan waktu sangat banyak untuk mengeditnya satu per satu.

2. Gunakan Template Blog AMP di blog baru sama sekali, belum ada postingan satu pun, agar postingannya Valid AMP ke depannya.

3. Template Blog AMP tidak disarankan buat blogger baru atau belum mendalami kode-kode template blog dan dasar-dasar CSS dan HTML.

Demikian ulasan tentang Keuntungan dan Kerugian Menggunakan Template Blog AMP. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Memasang Link Media Sosial di Sidebar Blog

Cara Memasang Link Media Sosial di Sidebar Blog.

SEBELUMNYA CB sudah share tentang cara memasang link media sosial di bawah postingan blog. Link widget media sosial di sidebar blog juga sudah pernah.

Kali ini CB share Cara Memasang Link Media Sosial di Sidebar Blog dengan desain tampilan sebagaimana gambar berikut ini:

Cara Memasang Link Media Sosial di Sidebar Blog


Keren 'kan? Link Media Sosial ini bisa juga dipasang di bawah postingan blog. Namun, dalam tips kali ini cara memasangnya di sidebar blog dengan cara mudah, tanpa harus edit template, sehingga mudah dilepas jika mau diganti.

Cara Memasang Link Media Sosial di Sidebar Blog

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

<style>#social_profiles-wrap{background:rgba(255,255,255,0.3);width:94%;height:auto;float:left;margin:10px 0 10px 0;padding:20px;text-align:center;border-radius:4px;font-family:'Open Sans Condensed',Verdana;border:1px solid #f2f2f2;-webkit-border-radius:4px;-moz-border-radius:4px;-webkit-box-shadow:1px 0 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:1px 0 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:1px 0 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);text-decoration:none}
#social_profiles-wrap p{color:#446cb3;font-size:16px;font-weight:700;text-align:center;text-decoration:none!important}
.social_profiles{display:inline-block;padding:5px 0}
ul.social_profiles{background:0;float:none;margin:0 37px;text-decoration:none}
ul.social_profiles li{background:none!important;padding:0!important}
.social_profiles li{display:inline;margin-top:40px;list-style-type:none}
.social_profiles li a{display:inline-block;list-style-type:none;width:40px;height:40px;outline:0;margin-right:7px;position:relative;vertical-align:middle;z-index:3;text-decoration:none}
.social_profiles li a>:last-child{margin-right:0!important}
.social_profiles li .facebook{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat}
.social_profiles li .twitter{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -45px}
.social_profiles li .gplus{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -90px}
.social_profiles li .pinterest{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -135px}
.social_profiles li .rss{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -180px}
.social_profiles li .linkedin{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -225px}
.social_profiles li .tumblr{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -270px}
.social_profiles li .youtube{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -315px}
.social_profiles li .mail{background:url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0 -360px}
.social_profiles li a span{width:60px;height:auto;padding:2px;left:50%;margin-left:-38px;font-family:"Open Sans Condensed",sans-serif;font-weight:400;font-size:12px;color:#fff;text-align:center;border:5px solid #446cb3;background:#446cb3;text-indent:0;position:absolute;pointer-events:none;border-radius:5%;opacity:0;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.social_profiles li a span:before,.social_profiles li a span:after{content:'';position:absolute;bottom:-15px;left:50%;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent}
.social_profiles li a span:after{bottom:-15px;margin-top:6px;margin-left:-10px;border-top:10px solid #446cb3}
.social_profiles li a:hover span{opacity:.9;bottom:50px}
</style>
<div id='social_profiles-wrap'>
<p>Don&#39;t Miss Any Update, Join Us on Social Networks.</p>
<ul class='social_profiles'>
<li><a class='facebook' href='https://www.facebook.com/' target='_blank'><span>Facebook</span></a></li>
<li><a class='twitter' href='https://twitter.com/' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='https://plus.google.com' target='_blank'><span>Googl+</span></a></li>
<li><a class='pinterest' href='https://www.pinterest.com/' target='_blank'><span>Pinterest</span></a></li>
<li><a class='rss' href='https://feeds.feedburner.com/' target='_blank'><span>RSS</span></a></li>
<li><a class='linkedin' href='https://www.linkedin.com/' target='_blank'><span>LinkedIn</span></a></li>
<li><a class='youtube' href='https://www.youtube.com/' target='_blank'><span>Youtube</span></a></li>
</ul>
</div>

3. Ganti link media sosialnya, yang warna merah, dengan link media sosial kepunyaan Anda.
4. Save!

Beres!

Jika hasilnya tidak memuaskan, Anda bisa coba desain link media sosial lainnya.

Demikian Cara Memasang Link Media Sosial di Sidebar Blog. Good Luck! (www.contohblog.com).*

Cara Membuat Header Blog Responsive ala Contoh Blog

Cara Membuat Header Blog Responsive ala Contoh Blog

BERIKUT ini cara membuat header blog responsive ala Contoh Blog. Demonya bisa dilihat di blog ini. Ukuran header (logo dan iklan di sampingnya) menyesuaikan dengan ukuran lebar layar screen perangkat mobile yang digunakan.

Cara Membuat Header Blog Responsive ala Contoh Blog

Untuk menggunakan kode header responsive ini, Anda harus hapus dulu seuma kode header di template blog Anda.

KODE CSS
Dipasang di atas kode ]]></b:skin>

#header-wrapper{height:100px;margin:0 auto;padding:15px 15px 10px;overflow:hidden;max-width:980px;background:#fff}
#header1{float: left;width: 300px;margin:0 auto;padding:10px;}
#header1 img,#header-inner img{width:auto;max-width:100%}
#header-inner h1,#header-inner img, #header1 h1,#header-inner h2,#header1 h2, #header-inner .title{font:normal normal 40px Oswald,&quot;Arial Narrow&quot;,Sans-Serif;margin:0;padding:0;color:#222;text-transform:uppercase}
#header-inner h1 a,#header-inner .title a{color:#222}
#header2{float:right;width:468px;margin:5px;padding:0;}
@media screen and (max-width:980px){
#header-wrapper{height:auto}
#header{margin:0;padding:15px;overflow:hidden}
#header1{float:none;width:100%;margin:0 0 15px;padding:0;text-align:center}
#header2{float:none;width:100%;margin:10px 0 0;padding:0;text-align:center}
#header-inner img{max-width:100%;width:auto;margin:0 auto;padding:0;text-align:center}
}
@media screen and (max-width:384px){
#header-wrapper{margin:0;padding:10px 10px 5px;overflow:hidden}
}

KODE HTML
Dipasang di bawah kode <body>


<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section class='header1' id='header1' maxwidgets='1' showaddelement='yes'/>
<b:section class='header2' id='header2' preferred='yes'/>
</header>

KODE LAYOUT
Disatukan dengan kode body#layout  yang sudah ada di template Anda. Ini untuk mengatur posisi widget header di layout / dashboard.

body#layout #header-wrapper{width:100%;margin-top:70px}
body#layout #header1{float:left;width:20%;}
body#layout #header2{float:right;width:70%;}

Save!

Demikian  Cara Membuat Header Blog Responsive ala Contoh Blog. Good Luck! (www.contohblog.com).*

Cara Membuat Menu Responsive di Blog - Pure CSS Tanpa Javascript

Cara Membuat Menu Responsive di Blog - Pure CSS Tanpa Javascript - Plus Link Media Sosial

Menu Responsive di Blog - Pure CSS Tanpa Javascript ini mirip dengan Menu ala New Johny Wuss atau Menu Responsive Keren dan Top Menu Dropdown plus Media Sosial.

Penampakannya seperti ini:

Cara Membuat Menu Responsive di Blog - Pure CSS Tanpa Javascript


Menu Responsive ini Pure CSS dan HTML, Tanpa Javascript, sehingga selain ringan (fast loding), juga bebas error yang biasa disebabkan konflik javascript.

CB dapatkan menu jenis ini dari Blogger Origin. Berikut ini cara memasangnya di blog blogger.

Cara Membuat Menu Responsive di Blog 

1. Tema > Edit HTML

Tema > Edit HTML


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

#topnav-outside {background:#fff;width:100%;min-height:30px;margin:0 auto;padding:0;-moz-box-shadow: 0 8px 6px -6px #ccc;-webkit-box-shadow: 0 8px 6px -6px #ccc;box-shadow: 0 8px 6px -6px #ccc;}
#topnav-intside {max-width:1120px;min-height:30px;margin:0 auto;padding:0;}
.bofollowbutton-nav{float:right;margin:0;padding:8px 5px 0 5px;overflow:hidden;clear:both;}
.status-msg-wrap{display:none;}
#bonav li.has-child {background-image: url(https://3.bp.blogspot.com/-udDmmA77Cv4/WBnvafIeE8I/AAAAAAAAD84/Dp8DbiKr1WE0njmWZpgH9EeoZYsRW-9FQCEw/s1600/bo_arrow_dropdown.gif);background-repeat: no-repeat;background-position: 95% 50%;}
#bonav{max-width:950px;text-transform:uppercase;}
#bonav > a{display: none;}
#bonav li{list-style-type: none;position: relative;}
#bonav li a{display: block;color: #4285f4;text-decoration:none;}
#bonav li a:active{background-color: #c00 !important;}
#bonav span:after{height: 0;width: 0;border: 0.313em solid transparent;border-bottom: none;border-top-color: #efa585;content: '';display: inline-block;vertical-align: middle;position: relative;right: -0.313em;}
#bonav > ul{background-color: #fff;height: 3.75em;margin:0;padding:0;}
#bonav > ul > li{width: 15%;height: 100%;float: left;}
#bonav > ul > li.home-icon{max-width:120px;}
#bonav > ul > li > a{font-family:'Oswald', sans-serif;height: 100%;text-align: center;font-size: 1.0em;line-height: 3.7em;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#bonav > ul > li:not( :last-child ) > a{border-right: 1px solid #f4f4f4;}
#bonav > ul > li:hover > a,#bonav > ul:not( :hover ) > li.active > a{color: #333;}
#bonav li ul{background-color: #f9f9f9;position: absolute;display: none;top: 100%;margin:0;padding:0;}
#bonav li:hover ul{display: block;left: 0;right: 0;}
#bonav li:not( :first-child ):hover ul{//left: -1px;}
#bonav li ul a{font-family:'Oswald', sans-serif;font-size: 1.0em;border-top: 1px solid #f4f4f4;padding: 1.0em;-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;}
#bonav li ul li a:hover,#bonav li ul:not( :hover ) li.active a{background-color: #333;}
@media only screen and ( max-width: 60em )
#bonav{font-size: 75%;position: relative;top: auto;left: auto;}
#bonav > a{font-size: 1.25em;text-decoration: none;color: #fff;background: #3d5c99;text-align: center;padding: 15px 0;display: none;text-align:center;overflow:hidden;}
#bonav > a:after{top: 60%;}
#bonav:not( :target ) > a:first-of-type,#bonav:target > a:last-of-type{display: block;}
#bonav > ul{height: auto;display: none;position: absolute;left: 0;right: 0;}
#bonav:target > ul{display: block;}
#bonav > ul > li{width: 100%;float: none;}
#bonav > ul > li > a{height: auto;text-align: left;padding: 0 0.833em;}
#bonav > ul > li:not( :last-child ) > a{border-right: none;border-bottom: 1px solid #f4f4f4;}
#bonav li ul{position: static;padding: 1.25em;padding-top: 0;}
#bonav li ul{background-color: #f8f8f8;}
#bonav > ul{background-color: #f8f8f8;}
#bonav li ul a{border-top: 1px solid #f1f1f1;}
#bonav > ul > li > a{border-top: 1px solid #f1f1f1;}
}

3. Copas kode berikut ini di bawah kode <header> 

<div id='topnav-outside'>
<div id='topnav-intside'>
<div class='bofollowbutton-nav'>
<a href='https://www.facebook.com/' target='_blank'>
<img src='https://3.bp.blogspot.com/-9uvViy476uA/WBnvaVnTJ9I/AAAAAAAAD88/SBb3JAM9MYUX2u1AP4EODrCqFJPbgY6ewCLcB/s1600/facebook_bo.png'/>
</a>    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp    <a href='https://twitter.com/' target='_blank'>
<img src='https://2.bp.blogspot.com/-Llms3b5Feik/WBnva0SFZfI/AAAAAAAAD9E/qv5l7aixry0yUYHfEdmoz_h107xu9XUbwCLcB/s1600/twitter_bo.png'/>
</a>    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp    <a href='https://plus.google.com/' target='_blank'>
<img src='https://2.bp.blogspot.com/-qdOhOn1kH28/WBnvaXbQYnI/AAAAAAAAD9A/i1eHncGso_g9ICGPBSeWO68WE52TZDJ6QCEw/s1600/gplus_bo.png'/>
</a>
</div>
<div id='bonav' role='navigation'>
<a href='#bonav' title='Show navigation'>
&#9776; Show Menu
</a>
<a href='#' title='Hide navigation'>
&#9776; Hide Menu
</a>
<ul>
<li class='home-icon'>
<a href='/'><img src='https://4.bp.blogspot.com/-dNtJRo_QsMY/WBnv-7WZyBI/AAAAAAAAD9I/HCxJTkIOqQwzWAK8CynKtEl9C7L-2rSgACLcB/s1600/blog-ornate-home-icon.png' style='height:20px;width:20px;margin:14px 0 0 0;'/></a>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 1</a>
<ul>
<li><a href='#'>Sub Menu Item 1</a></li>
<li><a href='#'>Sub Menu Item 1.1</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 2</a>
<ul>
<li><a href='#'>Sub Menu Item 2</a></li>
<li><a href='#'>Sub Menu Item 2.2</a></li>
<li><a href='#'>Sub Menu Item 2.3</a></li>
</ul>
</li>
<li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 3</a>
<ul>
<li><a href='#'>Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href='#'>Menu Item 4</a></li>
<li><a href='#'>Menu Item 5</a></li>
</ul>
</div>
</div>
</div>

4. Save!

Demikian Cara Membuat Menu Responsive di Blog - Pure CSS Tanpa Javascript.

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


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

Cara Membuat Kolom Komentar Blogger Keren

Cara Membuat Kolom Komentar Blogger Keren. Threaded Comments for Blogger With Awesome Style.


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:

Cara Membuat Kolom Komentar Blogger Keren

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. 

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}

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 Template Blog Sendiri

Cara Membuat Template Blog Sendiri - SEO Friendly, User Friendly, Responsive, Fast Loading.

Cara Membuat Template Blog Sendiri
MEMBUAT Template Blog sendiri itu mudah. Mengapa mudah? Karena sudah banyak tutorialnya. Kita tinggal mengikuti langkah-langkah yang dipandu pada tutorial cara membuat blog itu.

Namun, semua cara membuat template berikut ini didasarkan kode bawaan blogger.

Artinya, kode-kodenya berasal dari blogger juga, yakni template bawaan blogger (default blogger template).

Para desainer "hanya" memodifikasinya, dengan penambahan, pengurangan, terutama kode CSS dan HTML yang mengubah tampilan atau desain template, juga membuatnya responsive (mobile-friendly).

Membuat template blog sendiri akan membuat Anda bebas credit link di footer yang biasa ada di template-tempalate blog gratis (free download).

Struktur kode template Blogger itu sederhana, yakni terdiri dari tiga jenis kode:
  1. CSS 
  2. HTML 
  3. JavaScript (Optional)

Cara Membuat Template Blog Sendiri

Ada tiga cara membuat template blog sendiri:
1. Membuat Sendiri
2. Memodifikasi Template Bawaan Blogger
3. Membuat secara Online

Membuat Sendiri
Untuk membuat template blog sendiri, Anda bisa ikuti paduannya di link berikut ini:

CONTOH 
Contoh template blog yang dibuat dengan mengikuti salah satu panduan di atas, dengan penambahan dan perubahan, adalah Starter Template.

Membuat Template Online

Kita juga bisa membuat template blog sendiri secara online. Sebenarnya tidak membuat, tapi mengedit atau modifikasi template sesuai selera sendiri.

Silakan buka link berikut ini: doTemplate atau Artisteer.

Modifikasi Template Bawaan Blogger

Ini cara paling mudah dan terpopuler, khususnya bagi blogger baru (newbie). Anda boleh menghapus credit link blogger (menghapus powered by blogger) setelah melakukan editing.

Salah satu template hasil modifikasi template bawaan blogger adalah CB Theme yang dibagikan secara gratis, meski tersedia premium version-nya. Itu contoh hasil modifikasi template bawaan blogger.

CB sudah share cara modifikasi template bawaan blogger ini sebagai berikut:

1. Membuat Responsive Template Bawaan Blogger
2. Cara Membuat Autoreadmore
3. Membuat Related Post
4. Membuat Social Share
5. Memasang Schema Org Microdata (Optional)
6. Cara Membuat Breadcrumbs
7. Membuat Navigasi Menu Responsive

Demikian Cara Membuat Template Blog Sendiri. Benar, posting ini bukan berisi panduan lengkap dan detail, melainkan "pengantar" untuk membuat template blog sendiri. Good Luck & Happy Blogging! (www.contohblog.com).*

Tukar Link (Link Exchange) Membahayakan Blog

Tukar Link (Link Exchange) Membahayakan Blog
Tukar Link (Link Exchange) Membahayakan Blog. Komentar Spam Juga!

APA benar tukar link (Link Exchange) sesama blogger membahayakan blog? Alih-alih menambah backlink, malah bisa dibanned Google?

Jawaban ringaksnya: Ya, bahaya.

Blog bisa turun ranking (peringkat), bahkan dibanned Google karena link hasil tukeran itu dinilai sebagai SPAM dan TIDAK ALAMI (unnatural links).

Jadi, alih-alih meningkatkan ranking dan jumlah backlink, justru tukeran link ini menurunkan SEO Blog.

Para pakar seo menyebut Link Exchange ini sebagai "manipulasi link". Google menyebutnya link schemes (skema tautan).

Berikut ini penjelasan Google tentang Skema Tautan termasuk Tukar Link

Menurut Google, setiap tautan yang ditujukan untuk memanipulasi PageRank atau peringkat situs di hasil penelusuran Google mungkin dianggap sebagai bagian dari skema tautan dan melanggar Panduan Webmaster Google. 

Ini mencakup perilaku apa pun yang memanipulasi tautan ke situs atau tautan yang keluar dari situs Anda.

Berikut adalah contoh skema tautan yang dapat berdampak buruk pada peringkat situs di hasil penelusuran:
  • Pembelian atau penjualan tautan yang lolos dari PageRank. Termasuk menukarkan uang dengan tautan atau pos yang berisi tautan; menukarkan barang atau layanan untuk tautan; atau mengirim produk "gratis" kepada seseorang sebagai ganti tulisan mereka tentang produk tersebut yang menyertakan tautan
  • Pertukaran tautan yang berlebihan ("Tautkan ke situs saya lalu saya akan menautkan ke situs Anda") atau membuat laman eksklusif untuk mitra demi tautan silang
  • Pemasaran artikel berskala besar atau entri blog tamu berisi kampanye dengan teks tautan kaya kata kunci
  • Menggunakan program atau layanan otomatis untuk membuat tautan ke situs.
Selain itu, membuat tautan yang tidak ditempatkan atau dijamin secara editorial oleh pemilik situs di sebuah laman, atau yang biasa disebut sebagai tautan tak wajar, dapat dianggap melanggar panduan. 

Komentar Spam juga termasuk melanggar kebijakan Google. Misalnya: 

Terima kasih, informasi yang sangat bagus!
- Paul
link aktif, link aktif, link aktif


Cara terbaik agar situs lain membuat tautan relevan dan berkualitas tinggi ke situs Anda adalah membuat konten relevan dan unik yang secara alami meraih popularitas di komunitas Internet.

Intinya, tukar link adalah melanggar kebijakan Google karena link building ini tidak alami, dibuat-buat, direkayasa. 

Demikikian ulasan ringas tentang bahaya tukar link untuk mendapatkan backlink blog. Happy Blogging! (www.contohblog.com).*

Contact Form

Name

Email *

Message *