View AllFeatured

Cara Mengaktifkan HTTPS untuk Blog Custom Domain

Cara Mengaktifkan HTTPS untuk Blog Custom Domain

Cara Mengaktifkan HTTPS untuk Blog Custom Domain
Cara Mengaktifkan HTTPS untuk Blog Custom Domain.

Di posting sebelumnya CB sudah ulas ringkas pengertian dan perbedaan http dan https. Intinya, HTTPS lebih aman dan lebih SEO Friendly.

Jika ingin pengunjung mengakses blog melalui HTTPS saja, Anda dapat mengaktifkan pengalihan HTTPS. Blogger sudah memandunya di laman Mengaktifkan pengalihan HTTPS untuk blog.

Kelebihan HTTPS

Disebutkan, ada tiga manfaat utama menggunakan HTTPS dibandingkan HTTP untuk mengakses blog Anda:
  1. Membantu memeriksa bahwa pengunjung Anda membuka situs yang benar dan tidak dialihkan ke situs berbahaya.
  2. Membantu mendeteksi jika ada penyerang yang mencoba mengubah data yang dikirim oleh Blogger ke pengunjung.
  3. Menambahkan langkah-langkah keamanan yang membuat lebih sulit bagi orang lain untuk mendengarkan percakapan pengunjung Anda, melacak aktivitas, atau mencuri informasi mereka.

Bila mengaktifkan pengalihan HTTPS, pengunjung selalu menjangkau versi terenkripsi blog Anda di https://contohblognih.blogspot.com.

Untuk mengaktifkan pengalihan HTTPS di blog belum Custom Domain
  1. Masuk ke Blogger.
  2. Pilih blog untuk diperbarui.
  3. Di menu sebelah kiri, klik Setelan > Dasar.
  4. Di sebelah kanan, pilih Ya di bagian "HTTPS" > "Pengalihan HTTPS".

Jika Anda menonaktifkan pengalihan HTTPS, pengunjung memiliki dua pilihan untuk melihat blog:
Melihat versi tidak terenkripsi blog Anda di http://contohblognih.blogspot.com
Melihat versi terenkripsi blog Anda di https://contohblognih.blogspot.com

Cara Mengaktifkan HTTPS untuk Blog Custom Domain

Blogger sudah menyediakan fitur HTTPS untuk blog Custom Domain atau blog dengan nama domain sendiri. Misalnya, http://www.cbblogger.com diubah atau dialihkan menjadi https://www.cbblogger.com.

Jika pengunjung membuka http://www.cbblogger.com atau http://cbblogger.com atau cbblogger.com, maka akan dialihkan otomatis ke https://www.cbblogger.com

Untuk mengaktifkan HTTPS di Blog Custom Domain, berikut ini langkahnya:

1. Login ke Blogger
2. Buka Draft Blogger (https://draft.blogger.com/)
3. Klik Setting > Basic > pilih Yes di HTTPS Availability


Cara Mengaktifkan HTTPS untuk Blog Custom Domain


4. Halaman akan refresh otomatis
5. Tunggul 5-10 menit.
6. Refresh halaman (Tekan F5)
7. Pilih Yes di menu HTTPS Redirect

Hasil akhirnya seperti dalam gambar ini:

Cara Mengaktifkan HTTPS untuk Blog Custom Domain

Demikian Cara Mengaktifkan HTTPS untuk Blog Custom Domain.

PASTIKAN!
Agar blog tampil normal setelah https diaktifkan, pastikan SEMUA kode atau link http di dalam widget dan template diubah juga menjadi https.

Namun, untuk kode yang disimpan di http://yourjavascript.com tidak bisa diubah menjadi https://yourjavascript.com karena alamat url yang digunakan yourjavascript http, bukan https.

RISIKO
Karena blog kita menggunakan alamat baru, yakni tadinya http menjadi https, maka Google butuh waktu untuk menyesuaikan hasil perambahan dan indeksinya (crawling and indexing). 

Dalam satu-dua hari atau lebih, trafik kemungkinan menurun. Demikian juga penghasilan AdSense. Namun, setelah itu akan normal kembali, bahkan bisa naik karena https lebih ramah mesin pencari (seo friendly).

Demikian Cara Mengaktifkan HTTPS untuk Blog Custom Domain. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Membuat Featured Post Slider di Halaman Depan Blogger

Cara Membuat Featured Post Slider di Halaman Depan Blogger

Cara Membuat Featured Post Slider di Halaman Depan Blogger. Penampakannya seperti gambar di bawah ini. Cek demonya yang jadi sumber kode.

Featured Post Slider di Halaman Depan Blogger

Cara Membuat atau Memasangnya

1. LINK
Simpan di bawah kode <head>

<link href='http://s3.envato.com/files/376136/css/siteFeature.style_screen.css' rel='stylesheet' type='text/css'/>
<link href='http://s3.envato.com/files/376136/css/demo.css' rel='stylesheet' type='text/css'/>

2. CSS
Simpan di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#slider {width:99%;padding:15px 0 5px;float:left;}
#siteFeature {width:100%!important;}
#siteFeature #imgBgContainer div {}
#siteFeature.left #imgBgContainer {}
#siteFeature.left #tabContainer {width:200px !important;}
#siteFeature #tabContainer a:link, #siteFeature #tabContainer a:visited {width:200px !important;}
#siteFeature.left #tabContainer a.selected span {width:200px !important;}
#siteFeature-nav #SF-n-prev {top:210px !important;}
#siteFeature-nav #SF-n-next {top:496px;}
</style>
</b:if>

3. JavaScript
Simpan di atas kode </head>

<script src='http://s3.envato.com/files/376136/js/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='http://s3.envato.com/files/376136/js/jquery.siteFeature.pack.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#preFeature').siteFeature({
autoPlay: true,
autoPlayInterval: 5000,
tabBgImg: "http://s3.envato.com/files/376136/images/arrow-left.png" });
}); // end $(document).ready

//]]>
</script>
<script src='http://s3.envato.com/files/376136/js/demo.js' type='text/javascript'/>

4. HTML
Simpan di bawah kode <div id='main-content'> atau <div id='content-wrapper'> atau <div id='main'> dan sejenisnya (area postingan utama).

<div id='slider'>
<div id='preFeature'>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.' width='540px !important'/>
<h3>Tab number #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
</div>
<!-- // end --></div>
</b:if>

Ganti tulisan warna merah

CARA KEDUA
Cara kedua ini dengan menyimpan kode HTML di Layout agar memuahkan edit link gambar dan deskripsnya.

Langkah 1 s.d. 3 sama dengan langkah di atas. Yang beda cuma langkah ke 4 dan ditambah langkah 5 dan 6.

4. Membuat Widget Baru

Simpan kode berikut ini di bawah kode <div id='main-content'> atau <div id='content-wrapper'> atau <div id='main'> dan sejenisnya (area postingan utama).

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider'>
<b:section class='slider' id='slider' showaddelement='yes'>
</b:section>
</div>
</b:if>


5. Save Template!
6. Klik Layout/Tata Letak.

Akan muncul area widget baru seperti ini. Jika belum muncul, refresh halaman (Tekan F5)

widget baru slider

7. Klik Add a Gadget > Pilih HTML/JavaScript
8. Masukkan kode berikut ini:

<div id='slider'>
<div id='preFeature'>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.' width='540px !important'/>
<h3>Tab number #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
</div>
<!-- // end --></div>
</b:if>

Ganti kode warna merah

9. Save!

Demikian Cara Membuat Featured Post Slider di Halaman Depan Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Top 10 Situs Berita Terpopuler Dunia & Indonesia

Top 10 Situs Berita Terpopuler Dunia & Indonesia

Top 10 Situs Berita Terpopuler Dunia & Indonesia
Top 10 Situs Berita Terpopuler Dunia & Indonesia. Terbanyak Dibaca/Dikunjungi.

Didorong rasa ingin tahu situs berita (media online, media siber, news site) terbanyak dibaca, dikunjungi, atau terpopuler di dunia dan di Indonesia, CB buka Alexa.

Kayaknya Alexa masih jadi rujukan utama soal peringkat situs web dunia.

Situs berita terpopuler di Indonesia, Alexa menempatkan Tribunnews dan Detik sebagai dua situs berita terbanyak dikunjungi.

Tribunnews unggul dari kategori Trafik dari Pencarian (56%), Detik  20%. Namun, untuk tiga kategori lainnya, Detik yang unggul: Daily Times on Site 10:6, Daily Pageviews 7:3, Link 93:41.

Dapat dimengerti kenapa Tribunnews unggul di trafik pencarian karena nulis bertanya "niat banget" untuk diindeks Google dengan baik, khususnya dalam hal Internal Linking dan Multiple Page untuk meningkatkan PageViews.

Top 10 Situs Berita Terpopuler di Indonesia

1. Tribunnews
2. Detik
3. Kompas
4. Liputan6
5. Merdeka
6. Sindonews
7. IDN Times
8. Kumparan
9. Okezone
10. Tempo

Sumber

Top 10 Situs Berita Terpopuler di Dunia


  1. CNN
  2. NY Times
  3. The Guardian
  4. Washington Post
  5. BBC
  6. India Times
  7. Forbes
  8. FOX News
  9. Huffington Post
  10. Bloomberg


Sumber

Demikian Top 10 Situs Berita Terpopuler Dunia & Indonesia. (www.contohblog.com).*

Meta Open Graph Twitter & Facebook untuk Munculkan Gambar & Deskripsi Saat Share Medsos

Meta Open Graph Twitter & Facebook untuk Munculkan Gambar & Deskripsi Saat Share Medsos

Berikut ini kode Meta Open Graph (OG) Twitter & Facebook. Fungsinya untuk memunculkan gambar & deskripsi posting saat share di medsos Twitter dan FB.

Meta Open Graph Twitter & Facebook untuk Munculkan Gambar & Deskripsi Saat Share Medsos

Meta Open Graph Twitter & Facebook

Meta Open Graph Twitter & Facebook

Jika postingan Anda tidak tampil lengkap --judul, link, gambar, dan deskripsi-- saat dibagikan di Facebook dan Twitter, silakan pasang kode berikut ini di bawah kode <head> atau sebelum kode CSS Template <b:skin>

<!-- Twitter Card Start -->
<meta content='summary' name='twitter:card'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='URL Gambar Alternatif' name='twitter:image:src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<!-- Twitter Card End -->
<!-- Facebook OG Meta Tag Start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='blog' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL Gambar Alternative' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='xxxxxxx' property='fb:admins'/>
<meta content='xxxxxxx' property='fb:app_id'/>
<!-- Facebook OG Meta Tag End --> 

Ganti kode warna merah dengan versi Anda. Demikian Meta Open Graph Twitter & Facebook untuk Munculkan Gambar & Deskripsi Saat Share Medsos. Good Luck! (www.contohblog.com).*

Cara Pasang Iklan di Awal Postingan, Bawah Judul, dan di Bawah Artikel

Cara Pasang Iklan di Awal Postingan, Bawah Judul, dan di Bawah Artikel

Berikut ini cara memasang iklan (Google AdSense atau Iklan Apa Pun) di awal postingan, di bawah judul tulisan, dan di akhir artikel blog.

Untuk iklan di awal postingan, penampakannya seperti dalam gambar berikut ini:

Cara Pasang Iklan di Awal Postingan, Bawah Judul, dan di Bawah Artikel


Cara Pasang Iklan di Awal Postingan

1. Tema > Edit HTML
2. Simpan kode CSS iklan di awal postingan berikut ini di atas kode ]]></b:skin>

.iklan_atas{display:inline-block;width:auto;height:auto;margin:0 15px 15px 0;float:left}
.iklan_atas img{width:100%;max-width:336px;max-height:280px}

3. Simpan kode HTML iklan di awal tulisan ini di atas kode <data:post.body/> yang ketiga atau keempat.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='iklan_atas'>
<div style="width:336px;height:280px;line-height:280px;text-align:center;background-color:darkgreen;color: white;">336x280</div>
</div>
</b:if>
4. Ganti kode warna merah dengan kode iklan yang akan Anda pasang.

Catatan: ukuran Iklan di atas 336x280. Anda bisa ubah misalnya menjadi 300x250 Pixel.

Cara Pasang Iklan di Bawah Judul dan di Bawah Artikel

Iklan di bawah judul dan di akhir postingan, demonya seperti di blog CB ini. Cara memasangnya sebagai berikut.

1. Untuk memasang iklan di bawah judul, simpan kode berikut ini di atas kode <data:post.body/> yang ketiga atau keempat.

<div style='margin:15px 0'>
<!-- KODE IKLAN DI SINI-->
</div>

2. Untuk memasang iklan di akhir postingan, copas kode berikut ini di bawah kode <data:post.body/> yang ketiga atau keempat.

<div style='margin:15px 0'>
<!-- KODE IKLAN DI SINI-->
</div>


Jika kedua kode tersebut digabungkan, maka hasilnya seperti ini:

<div style='margin:15px 0'>
<!-- KODE IKLAN DI SINI-->
</div>
<data:post.body/>
<div style='margin:15px 0'>
<!-- KODE IKLAN DI SINI-->
</div>

Mudah 'kan Cara Pasang Iklan di Awal Postingan, Bawah Judul, dan di Bawah Artikel? Good Luck and Hapy Blogging! (www.contohblog.com).*


Cara Membuat Tulisan yang Baik untuk Blog

Cara Membuat Tulisan yang Baik untuk Blog

Cara Membuat Tulisan yang Baik untuk Blog agar Ramah Pengguna.
Cara Membuat Tulisan yang Baik untuk Blog agar Ramah Pengguna.

Format posting merupakan isu penting dalam desain blog atau website. Ini menyangkut aspek scannability dan readability.

Bagaimana format posting blog yang baik? Salah satunya adalah gunakan rata kiri (text align left)!

Perhatikan tampilan posting blog Anda. Apakah tampilan teks (naskah tulisan)-nya rata kiri ataukah rata kiri-kanan (justify)?

Jika rata kiri-kanan (justify), sehingga tampilannya seperti format teks tulisan di koran, buku, atau surat resmi, itu artinya blog Anda menganut "aliran resmi-formal" dan "kaku".

Tampilan posting rata kiri-kanan alias full-justified tidak lazim. Selain membuat kaku, memperlambat user untuk membacanya, tampilan teks justify ini juga akan tampak buruk jika ada di kolom sempit.

Sebaliknya, tampilan posting atau teks rata kiri (align-left), akan lebih mudah dibaca, lebih enak dilihat (dipindai/scanned), dan ini artinya memenuhi aspek "readability naskah online".

Bandingkan kedua format posting ini

format posting


Agak sulit mencari referensi soal text-alignment ini. CB menemukan salah satu yang "agak lengkap" di forum Stack Exchange: Best Way to Align Text on a Website.

Disebutkan, rata kiri digunakan secara umum di situs-situs populer, termasuk Google dan Facebook. User membaca dari kiri ke kanan, kecuali dalam bahasa Arab. Sehingga, jika posting blog kita tidak menggunakan rata kiri, maka itu akan mengurangi tingkat keterbacaan (decrease readability).

Kebiasaan user membaca format naskah rata kiri ini jangan diubah di blog kita. Maka, gunakan rata kiri di format posting blog Anda.

Cara mengeditnya, cari kode berikut ini atau yang mirip, lalu ubah justify menjadi left

.post {margin:.5em 0 1.5em;border-bottom:1px dotted $bordercolor;padding-bottom:1.5em;text-align:justify;}

HURUF KAPITAL

Selain soal rata kiri, jangan gunakan ALL CAPS atau semua huruf kapital, baik buat judul posting (post title) maupun isi posting (post body).
Full capitalisation is more tiring and slower to read, because it reduces recognition by making all letters a similar size.

Banyak penulis hebat kurang memperhatikan soal format posting ini di blognya atau di media sosialnya. Tulisan mereka bagus, namun kurang diminati karena soal format naskahnya yang tidak scannable dan readable.

Baca: Jangan Gunakan Huruf Kapital Semua di Judul Tulisan Blog

Hal penting lainnya

  • Gunakan alinea pendek. Hindari anak kalimat.
  • Perbanyak ruang kosong atau ruang putih (white space), yakni gunakan jarak antar alinea. 
  • Gunakan bullet-point dan/atau numbering biar lebih enak dibaca.
  • Gunakan huruf tebal (bold) untuk poin penting.
  • Gunakan subjudul (Subheading) untuk membagi isi posting panjang menjadi beberapa bagian
Format Posting Blog yang Baik disukai user. Apa pun yang disukasi user, disukai pula oleh mesin pencari. Dan apa yang disuka mesin pencari, itulah SEO Blog!

Demikian Cara Membuat Tulisan yang Baik untuk Blog agar Ramah Pengguna. Good Luck and Happy Blogging! (www.contohblog.com).*

Jangan Gunakan Semua Huruf Kapital (All Caps) di Judul Posting Blog

Jangan Gunakan Semua Huruf Kapital (All Caps) di Judul Posting Blog

Selain Tidak User Friendly karena Sulit Dibaca, Penggunaan Semua Huruf Kapital (ALL CAPS) di Judul Posting Blog juga melanggar etika internet.

BANYAK template blog menggunakan "semua huruf kapital" (ALL CAPS) di judul posting. Tidak ada yang salah, tapi penggunaan All Caps di judul posting, sangat tidak dianjurkan oleh para pakar usability & visibility web.

Banyak juga blogger yang masih membuat judul tulisan dengan menggunakan huruf semua kapital semua.

Ini contoh template blog yang menggunakan ALL CAPS di judul posting:

template blog yang menggunakan ALL CAPS

Silakan bandingkan dengan judul yang sudah diubah menjadi "normal" (tidak All Caps):

tidak All Caps

Jelas bedanya. Judul yang "normal" (tidak All Caps) lebih scannable, readable, dan visible sehingga user friendy, mudah dibaca, nyaman di mata, dan mudah dicerna.

All Caps Tidak User Friendly & Langgar Etika Internet

Alasan utama kita harus menghindari judul tulisan semua huruf kapital adalah:
  1. All Caps sulit dipindai mata (scan), sulit dibaca, sehingga tidak user friendly.
  2. All Caps dalam dunia tulis-menulis berarti "berteriak". All Caps means Shouting!
Kode etik menulis email melarang penggunan All Caps. Wikipedia juga melarang All Caps dalam penulisan naskahnya.

Penggunaan "semua huruf kapital" juga melanggar kode etik internet (netiket). Salah satu etika internet (netiquette) menyebutkan: "Don't use All Caps". Selengkapnya silakan simak: How Capital Letters Became Internet Code for Yelling.

Bahan telaah atau referensi lainnya, guna meyakinkan kita bahwa kita harus menghindari All Caps (Semua Huruf Kapital) dalam judul posting blog, cukup banyak, antara lain sbb:

Demikian ulasan "ringkas" tentang penggunaan huruf kapital semua (All Caps) dalam judul berita, judul tulisan, judul posting blog, ataupun judul & isi email.

Baca Juga: Cara Menulis Posting Blog yang Baik

Semoga kita tercerahkan. (http://www.contohblog.com/).*

Cara Membuat Breaking News di Blog

Cara Membuat Breaking News di Blog

Cara Membuat Breaking News di Blog

Breaking News atau Headline News yaitu widget blog berisi posting terbaru yang tampil di bagian header, di atas logo atau di bawah menu. Desainnya seperti running text (teks berjalan).

Cara Membuat Breaking News di Blog


Breaking News ini biasanya dipasang di template blog magazine style atau blog berita. CB sih tidak menganjurkan pasang. Soalnya, selain hanya bikin loding blog jadi berat, juga kayaknya gak penting dipasang.

Namun, masih aja ada blogger yang mau pasang, seperti klien layanan premium CB. Maka, jaga-jaga ada yang mau pasang lagi, CB simpan kodenya berikut ini plus cara memasangnya.

Cara Membuat Breaking News di Blog

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

#breakingnews {
  float: left;
  height: 40px;
  line-height: 42px;
  overflow: hidden;
  width: 100%;
  background: #eee;
  box-shadow: 0 2px 7px -3px #000;
  -ms-box-shadow: 0 2px 7px -3px #000;
  -moz-box-shadow: 0 2px 7px -3px #000;
  -o-box-shadow: 0 2px 7px -3px #000;
}
#recentpostbreaking li a {
color:#949494;
font-family: sans-serif;
font-weight: bold;
}
#recentpostbreaking li a:hover {
color:#e91b23;
}
 #breakingnews .tulisbreaking {
background:#e91b23;
}
 #breakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#breakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
  background: url(http://3.bp.blogspot.com/-xD-8rredGa0/VYhMCriYg2I/AAAAAAAAF1U/8-DoLAjUM04/s1600/ticker-bg.png) no-repeat right center;
  color: #fff;
  float: left;
  font: 700 20px/20px 'Oswald',sans-serif;
  max-width: 155px;
  height: 20px;
  padding: 10px 25px 10px 20px;
  text-transform: uppercase;
}
#recentpostbreaking {
    float: left;
    margin-left: 155px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
div#fontoo {
width: 100%;
display: block;
line-height: 0;
overflow: hidden;
border-bottom: 1px solid #dfdfdf;
}
div#fontoo p {
margin: 0px 30px;
font-size: 16px;
text-shadow: 0 1px 0 #fff;
color: #333;
font-family: 'Ubuntu', Arial, Lucida, sans-serif;
}

Kode HTML:
Pasang di posisi di mana breakingnews ini mau ditampilkan, misalnya di bawah kode menu navigasi.

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='fontoo section' id='fontoo'>
   <div id='breakingnews'>
            <span class='tulisbreaking'>
              DON&#39;T MISS
            </span>
            <div id='recentpostbreaking'>
              Loading...
            </div>
          </div>
          <script type='text/javascript'>
            //<![CDATA[
            $(document).ready(function () {
              var url_blog = 'https://contohblognih.blogspot.com/', // Replace With your Blog Url
                  numpostx = 20; // Maximum Post
              $.ajax({
                url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
                type: 'get',
                dataType: "jsonp",
                success: function(data) {
                  var posturl, posttitle, skeleton = '',
                      entry = data.feed.entry;
                  if (entry !== undefined) {
                    skeleton = "<ul>";
                    for (var i = 0; i < entry.length; i++) {
                      for (var j=0; j < entry[i].link.length; j++)
                      {
                        if (entry[i].link[j].rel == "alternate")
                        {
                          posturl = entry[i].link[j].href;
                          break;
                        }
                      }                       posttitle = entry[i].title.$t;
                      skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
                    }
                    skeleton += '</ul>';
                    $('#recentpostbreaking').html(skeleton);
                    // kode untuk efek pada breaking news
                    function tick(){
                      $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
                    }
                    setInterval(function(){ tick () }, 5000);
                  } else {
                    $('#recentpostbreaking').html('<span>No result!</span>');
                  }
                },
                error: function() {
                  $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
                }
              });
            });
            //]]>
          </script>
      </div>
      </b:if>

3. Ganti alamat blognya.
4. Save Template!

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

SEO Magz - Template Blog SEO Friendly Terbaru, Gratis, Free Download

SEO Magz - Template Blog SEO Friendly Terbaru, Gratis, Free Download

SEO Magz - Template Blog SEO Friendly Terbaru, Gratis, Free Download. Versi Magazine dan Simple.

Berikut ini CB bagikan gratis Template Blog SEO Friendly Terbaru, Gratis, Free Download! Ada dua Versi,  Magazine bernama SEO Magz dan versi dan Simple dengan nama SEO Magz Lite.

SEO Magz & SEO Magz Lite Blogger Template sudah SEO Optimized, AdSense Ready, Responsive Mobile Friendly, dan Fast Loading. Ringan, Cepat.

Dua-duanya gratis. Syaratnya, Anda hanya tidak boleh menghapus credit link CB Blogger di bagian footer. Jika mau hapus credit link, silakan kontak CB via email.

Tidak tersedia versi premium. Dua-duanya gratis. Jika mau yang premium, silakan cek di Galeri Template.

SEO Magz

SEO Magz Blogger Template



SEO Magz Lite

SEO Magz Lite


Panduan Setting

Setting halaman depan SEO Magz

1. featured-post

Cari dan ganti alamat blog.

2. label1 > Headline

Tambahkan Label Headline ke minimal 5 posting, atau ganti nama labelnya.

3. label2 > Featured

Tambahkan Label Featured ke minimal 5 posting, atau ganti nama labelnya.

Cara Edit Menu 
Edit dalam template: Tema > Edit HTML

Demikian SEO Magz - Template Blog SEO Friendly Terbaru, Gratis, Free Download. Good Luck and Happy Blogging! (www.contohblog.com).*

Cara Custom Domain Blogger di Hostinger Indonesia

Cara Custom Domain Blogger di Hostinger Indonesia

Cara Custom Domain Blogger di Hostinger
Cara Custom Domain Blogger di Hostinger - Mengganti Nama Blog ke Nama Domain Sendiri

Custom Domain Blogger yaitu mengganti nama dan alamat blog di blogspot, yang tadinya misalnya contohblognih.blogspot.co.id menjadi contohblog.com.

Jadi, dengan custom domain ini, nama domain blogspot.co.id hilang. Keren 'kan?

Pengalaman, setting custom domain blogger ini hanya butuh waktu 5-10 menit, selesai. Yang lama itu  menunggu Propagasi, sekitar satu jam, bisa kurang bisa lebih. Sabar aja, Lur!

Keuntungan Custom Domain atau blog dengan nama sendiri sangat banyak, antara lain:
  1. Blog menjadi lebih ramah seluler (seo friendly) dan mudah diindeks Google karena mesin pencari seperti Google lebih suka blog yang menggunakan Top Level Domain (TLD).
  2. Lebih kredibel 
  3. Lebih Profesional.
  4. Lebih Komersial.
  5. Lebih ringkas dan mudah diingat, plus branded.
  6. Gak ketahuan banget gratisannya :)

Cara Custom Domain Blogger di Hostinger

Caranya, setelah Anda membuat blog di Blogger, beli domainnya di Hostinger, lalu lakukan Cara Custom Domain Blogger dalam dua langkah mudah sebagai berikut.

LANGKAH 2 Custom Domain di Dashboard Blogger

1. Klik Setelan / Setting > Basic

2. Di menu Blog Adress, klik Add a custom domain, seperti gambar di bawah ini:

Cara Custom Domain Blogger di Hostinger

3. Masukkan Nama Domain Anda. Misalnya,contohblog.com

Cara Custom Domain Blogger di Hostinger

4. Klik Save / Simpan.

Akan muncul error dan berisi kode CNAME Blogger. Dalam contoh gambar di bawah, kode CNAME ada di kotak, yaitu:

www | ghs.google.com
6jnaxvzb4vr3 | gv-x7qwnjgw53yke4.dv.googlehosted.com (contoh saja, punya Anda nanti beda kode)


5. Copy Paste kode tersebut di Notepad.

Tinggalkan dulu halaman dashboard blogger Anda.  Jangan ditutup, biarkan aja dulu, karena nanti kita akan kembali ke Blogger.

LANGKAH 2 di Akun Cpanel Hostinger

Cara Setting Custom Domain Blogger di Hostinger

1. Buka Hostinger dan Login ke Akun Anda: Klik menu Masuk di kanan atas.
2. Akan terbuka halaman Cpanel Anda di Hostinger.

halaman Cpanel Anda di Hostinger

3. Klik KELOLA.

Akan terbuka halaman baru dan klik DNS ZONE

klik DNS ZONE

4.  Centang kotak Saya paham bahwa .....

5.  Klik Atur Ulang

custom domain blogger hostinger

5. Tunggu sekitar satu menit, lebihin dikit biar pasti, lalu Refresh halaman (Tekan F5).

Akan terbuka halaman baru.

6. Isikan A Host dengan klik Tambah Baru, lalu masukkan 4 kode berikut ini satu per satu:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Langkah Detailnya:

- Klik Tambah Baru
- Kolom pertama (Host) isi dengan nama blog tanpa www, misalnya romelteamedia.com
- Kolom kedua isi dengan kode 216.239.32.21
- Simpan!
- Ulangi Tambah baru dst untuk kode kedua, ketiga, dan keempat.
- Hasilnya Seperti gambar di bawah ini.


custom domain blog

4. Copy Paste kode CNAME yang tadi sudah di dapatkan dari Blogger di Langkah No. 4, yang ada kode ghs.google.com.

Masukkan kode pertama di kolom pertama dan kode kedua di kolom kedua. Lihat Gambar CNAME (Alias) di bawah ini.


setting cname custom blogger

BERES!!!

Kini kembali ke Dashboard Bloger Anda untuk klik Save di Setting Custom Domain.

Jika masih error, sabar... tunggul beberapa saat, dan ulangi. Menurut pengalaman sih, satu-dua menit sudah bisa disimpan.

Jika sudah bisa disave, centang "Alihkan domainanda.com ke www.domainanda.com" dan simpan.

Alihkan Domain Custom Blogger

5. Tunggu 24 Jam lagi untuk Propagasi.

Propagasi adalah waktu yang diperlukan untuk melakukan update terhadap informasi dari DNS blog kita. Disebut juga masa propagasi nama domain yaitu jeda waktu yang diperlukan sebuah nama domain untuk mengenali atau tersambung dengan server.

6. Selesai. Kini alamat blog Anda sudah tanpa domai .blogspot.co.id lagi, sudah berubah menjaid nama domain sendiri. Lebih keren, seo friendly, kredibel, dan profesional!

Itu dia panduan detail bagi pemula tentang Cara Custom Domain Blogger di Hostinger.

Pengaruh Custom Domain

Pengaruh gak cutom domain ke trafik atau jumlah pengunjung? Jadi turun misalnya? 

Ya, pengaruh, tapi sifatnya sementara, karena mesin pencari butuh waktu untuk menyesuaikan url atau permalink blog dan postingan ke link yang baru.

Dalam satu-dua hari kemudian, trafik blog akan kembali normal, bahkan bisa naik karena blog Anda menggunakan nama domain yang lebih disukai Google. 

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

Contact Form

Name

Email *

Message *