Tuesday, December 1, 2015

Membuat Sendiri Related Post plus Gambar Thumbnail di Blog

Related Post plus Gambar Thumbnail
Cara Mudah Membuat Related Post (Artikel/Posting Terkait) plus Gambar Thumbnail di Bawah Posting Blog.

KAYANYA semua blog saat ini sudah punya widget related posts di bawah tiap postingan. Namun, hati-hati, suka ada sisipan link dalam kodenya jika kita tidak berhati hati.

CB sedah sering memposting soal artikel terkait ini. Anda bisa buka Related Post Widget untuk melihatnya. Posting ini merupakan UPDATE dari semua tips posting terkait itu.

Agar related post kita aman dari sisipan link, "intip" saja jika kode posting terkait itu menyertakan link javascript, dengan cara copas linj js-nya ke browser.

Baca juga: Related Post yang Aman dari Sisipan Link.

Untuk keamanan dan kenyamanan, kita bisa membuat related post sendiri, pilihan sendiri, di laman yang sudah disediakan dengan sangat baik oleh DTE.

Ada enam jenis related post yang bisa kita pilih di sana, seperti dalam gambar berikut ini. Sangat lengkap. Jadi, Anda gak usah pergi ke tempat lain untuk mendapatkan kode related post. Cukup di sini:

Macam-macam Related Post plus Gambar Thumbnail


CB sendiri memilih  Related Post plus Gambar Thumbnail. Kayaknya lagi "trending" model related post begini. Lebih berat ketimbang yang simple (judul posting doang), namun lebih menarik dan seo friendly karena menggunakan gambar.

Kita bisa lakukan konfigurasi sendiri di sana, melihat previewnya, dan mengambil/memasang kodenya dengan aman di blog kita.

Sebagai contoh, kode related post plus thumbnail image yang dipasang di blog ini sebagai berikut:

KODE CSS
Dipasang di atas kode ]]> atau 

/* ==== Related Post Widget Start ==== */

.related-post {
margin:2em auto 0;
font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
font-size:150%;
margin:0 0 .5em;
}

/* Style 2 */
.related-post-style-2,
.related-post-style-2 li {
margin:0;
padding:0;
list-style:none;
}
.related-post-style-2 li {
padding:10px;
border-top:1px solid #eee;
overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
width:80px;
height:80px;
max-width:none;
max-height:none;
background-color:transparent;
border:none;
padding:0;
float:left;
margin:2px 10px 0 0;
}
.related-post-style-2 .related-post-item-title {
font-weight:bold;
font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
display:block;
overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}

/* ==== Related Post Widget End ==== */

KODE XML & JAVASCRIPT
Disimpan di atas kode

Membuat Auto Readmore Dua Kolom di Halaman Depan Blog

YANG dimaksud Auto Readmore Dua Kolom di Halaman Depan (Home) Blog adalah menampilkan posting terbaru berupa ringkasan dan gambar thumbnail dibagi menjadi dua kolom. Di luar soni dikenalnya "Post Summaries and Thumbnails Magazine Style".

Contohnya? Ya, blog CB ini dan banyak template blog lain yang di halaman depannya berisi auto readmore dua kolom. Contoh yang sudah dimodif biar lebih enak dilihat, bisa diintip di NJW V5.

Ini penampakan  Readmore Dua Kolom di Halaman Depan. Posting terbaru banget satu kolom (paling atas) dan posting sebelumnya, bisa 4-10 posting atau lebih, ditampilkan dua kolom berdampingan:

Auto Readmore Dua Kolom

Cara Membuat Auto Readmore Dua Kolom

1. Template > Edit HTML
2. Cari (CTRL + F) kode
3. Hapus kode  yang kedua dan GANTI dengan kode berikut ini:

 
 
Read more ?

4. Cari (CTRL + F) kode 
5. Hapus dan ganti dengan kode berikut ini:
























Read more?












6. Copas kode berikut ini di atas kode  










Catatan:
Angka-angka 290, 240, 80, 600, 540, 145, dan 165 adalah ukuran gambar thumbnail, area teks, dan jumlah ringkasan posting. Atur-atur aja biar pas!

7. Save Template!

Kini Auto Readmore Dua Kolom (ringkasan & gambar thumbnail) sudah muncul di Halaman Depan Blog Anda.

Tips desain blog ini berlaku terutama bagi template blog yang BELUM auto readmore. 

Yang sudah auto readmore, butuh "kemampuan ekstra" karena harus menghapus dulu kode-kode autoreadmore, menjadi posting penuh (lihat bagian bawah tips Cara Menghapus Autoreadmore). Good Luck! (http://contohblognih.blogspot.com/).*

Sumber


reff : http://www.contohblog.com/2015/03/membuat-auto-readmore-dua-kolom-di-home.html

Keuntungan Menggunakan Chrome Bagi Blogger

Setelah membahas keuntungan menggunakan Firefox browser, sekarang saya akan mengulas tentang keuntungan menggunakan browser chrome bagi para blogger. Keuntungan yang dimaksud disini adalah dalam hal berkomentar dan memberikan backlink bagi blog kita.

Kalau biasanya kita berkomentar dan menggunakan akun google dan jika diklik maka akan diarahkan ke google plus. Kita juga bisa berkomentar sehingga ketika nama kita diklik maka akan langsung diarahkan ke alamat blog kita. Dapat dah backlink lagi.. Bagaimana caranya? Ok, simak langkah berikut.

Lihatlah gambar disamping ini. Ketika mengunjungi suatu blog dengan menggunakan browser chrome dan anda kita akan berkomentar, maka pilihlah dulu pilihan yang ada. Disini ada beberapa pilihan seperti google account, open ID dan lainnya. Saran saya pilihlah "Name/URL". Mengapa disarankan itu? Karena banyak blog yang tidak mau diisi dengan live link pada komennya. Jadi agar sekalian dapat  backlink dan tidak dianggap nge-spam, pakailah "Name/URL" ini. Bisa dilihat pada bagian yang dilingkari merah ya. Setelah itu pilihlan "Name/URL" dan kemudian kita akan melihat gambar seperti dibawah ini.

Gambar disamping akan muncul setelah memilih "Name/URL" tadi. Isikanlah nama kita dan pada kolom "URL" isikan alamat blog kita. Kemudian pilih lanjutkan dan isilah komentar anda pada langkah selanjutnya. Sangat mudah sekali kan?

Jika sudah selesai mengisi komentar dan mempublishnya, maka akan terlihat nama yang kita ketikkan tadi. Jika nama itu di klik, maka akan diarahkan langsung ke blog. Nah, dapat dah backlink.

Memang tidak semua blog berisi pilihan "Name/URL" ini, dan kalau kebetulan menemukan blog yang ada "Name/URL"-nya, boleh dicoba untuk dikomentari dengan baik dan sopan tentunya.

Itulah manfaat chrome bagi kita para blogger. Semoga bermanfaat ya..


reff : http://puteka85.blogspot.com/2013/05/keuntungan-menggunakan-chrome-bagi.html

Masalah Tanggal dan Hari di Posting Blog

Haruskah menggunakan tanggal dan hari di posting blog? Itu lho... di bawah judul tulisan biasanya ada yang kayak gini "Posted by Nama Blogger on Sunday, 25 May 2014". Nama blogger OK, 'gak masalah, tapi bagaimana dengan hari dan tanggal (posting day and date)? Haruskah ada?

Posting ini CB buat setelah Googling dengan kata kunci "mengganti template blog". Posting CB soal itu ada di Numero Uno di hasil pencarian (SERP)!

CB juga coba cek kata kunci lainnya "Template Blog Terbaru". Lagi-lagi "number one"! Bukti dan fakta ke-SEO-an template blog yang CB modif dan gunakan: New Johny Wuss.

Ini Screen Shot-nya:

Tanggal dan Hari di Posting Blog


Tanggal dan Hari di Posting Blog

Yang jadi masalah buat CB adalah munculnya tanggal di hasil SERP Google itu. CB pikir itu hanya mengurangi jumlah kata atau karakter alinea pertama posting yang terindeks Google.

CB berpikir, Haruskah Menggunakan Tanggal dan Hari di Posting Blog? Adakah kaitannya tanggal dan hari di posting blog dengan SEO Blog?
Maka... Googling!  Hasilnya dan kesimpulannya: HAPUS HARI DAN TANGGAL di Posting Blog!

Tapi, tunggu, menghapus hari dan tanggal tanggal di posting blog itu "hanya berlaku" bagi blog yang berisi tips atau tulisan yang tidak terikat dengan aktualitas. Hari dan tanggal diperlukan oleh blog berita (situs berita) untuk menunjukkan aktualitas posting.

Fungsi Hari dan Tanggal Posting

Dari hasil "studi online" CB, hari/tanggal di posting blog itu tidak terlalu diperlukan. Karena posts date itu hanya berfungsi sebagai informasi kepada pembaca, tentang kapan posting itu dibuat dan dipublikasikan. Itu saja!

Tanggal itu akan jadi masalah jika posting dibuka tahun 2014, sedangkan di sana tercantum posted on 2010 misalnya. Artinya, posting sudah berusia 4 tahun! Wah... bisa-bisa dianggap "basi" (timeless) deh, padahal postingannya masih relevan dengan kondisi masa kini.

Itulah sebabnya, seorang pakar SEO, Mike Piper, memberi saran begini: Remove all dates from your posts and comments! Hapus semua tanggal dari postingan dan komentar!

Alasan utamanya, itu tadi... khawatir pengunjung tidak mau baca karena menganggap posting kita sudah "out of date"!

Masalah lainnya, hari dan tanggal itu muncul di hasil pencariaan (SERP). Lihat lagi deh gambar di atas.... Nah, bisa jadi 'kan, karena tanggalnya satu atau dua tahun lalu, pengunjung gak mau klik karena berpikir posting itu tulisan lama, meskipun masih relevan.

Jadi? CB sih memilih hapus saja tanggal posting itu karena mayoritas posting CB adalah tips blogging yang tidak tergantung tanggal dan hari. CB akan buat posting baru jika ada yang berubah.

Cara Menghapus Hari dan Tanggal Posting

Ini yang CB lakukan di blog ini. Cara ini juga berlaku bagi pengguna New Johny Wuss. Yang bukan New Johny Wuss, sesuaikan saja.... biasanya kodenya HTML-nya sama.

1. Template > Edit
2. Temukan (CTRL+F) kode  
. Ada dua, pilih yang kedua, dan tambahkan kode berikut ini di bawahnya. Jangan lupa ganti URL Google Plus dengan punya Anda.


   

   

Posted by https://plus.google.com/106869251529186655236?rel=author' target='_blank'>CONTOH BLOG




Sehingga hasilnya menjadi begini:

   


   

   

Posted by https://plus.google.com/106869251529186655236?rel=author' target='_blank'>CONTOH BLOG

 

   


3. Save!
4. Klik menu "Layout" di Dashboard
5. Klik kotak "Blog Post" dan klik "Edit" (Configure Blog Post)
6. Centang HANYA di bagian "Comments" ("Kommentar") doang! Lainnya gak usah dicentang!
7. SAVE!

Tanggal dan Hari Posting dan SEO Blog

Apakah menghapus hari/tanggal posting ada pengaruh pada SEO? Jawabnya NO! Ketika CB cek kembali ke Chkme, ini hasilnya:
SEO Score for http://contohblognih.blogspot.com/ 100 % - Congratulations!

Referensi:
http://doncrowther.com/blogging/blogpostdating
http://www.problogger.net/archives/2008/07/22/dates-on-blogs/
http://www.blogthority.com/540/easy-seo-tip-remove-dates-from-posts-and-comments/

reff : http://www.contohblog.com/2014/05/masalah-tanggal-dan-hari-posting-blog.html

Cara Membuat Toolbar Statis di Atas Header Blog

Toolbar Statis di Atas Header Blog
TOOLBAR Statis (Floating/Static Toolbar) yaitu "palang" (bar) mirip menu navigasi yang muncul di atas header atau bagian atas halaman blog. Biar lebih jelas, lihat contohnya di blog demo New Thesis SEO. Di sana ada "pengumuman" bahwa telah tersedia New Thesis SEO V2 dan V3 Responsive!

Anda bisa menggunakan Toolbar Statis ini jika ingin mengumumkan sesuatu yang sangat penting. Bisa juga digunakan di blog toko online untuk mengumumkan sale, promo, diskon, atau produk baru.

Karena sifatnya statis, fixed, atau floating, Toolbar ini muncul terus saat halaman blog discroll ke bawah. Pokoknya lihat aja demonya deh. Variasi Toolbar Statis lainnya juga akan di-share di blog CB ini.

Cara Membuat Toolbar Statis di Atas Header Blog

Cara membuatnya gampang, tanpa javascript, cuma kode HTML & CSS, sehingga tidak pengaruh sama loading ataupun seo blog. Proses pembuatannya mirip cara membuat Navigasi Menu Statis di Atas Header.

1. Template > Edit HTML
2. Temukan kode
3. Copas kode berikut ini di bawah kode  


   

Kini hadir New Thesis SEO V2 dan V3 Responsive!!! Silakan meluncur ke CB Blogger



4. Temukan kode ]]>
5. Copas kode berikut ini di atas kode ]]>

#toolbar {
position: fixed;
width: 100%;
height: 15px;
top: 0;
left: 0;
padding: 0px 10px 25px;
background: #777;
z-index: 999;
border-bottom: 3px solid #ddd;
}

6. Save Template!

Anda bisa mengubah warna latar belakang dan warna huruf. Lihat: Kode Warna HTML.

Demikian Cara Membuat Toolbar Statis di Atas Header Blog. Good Luck! (http://contohblognih.blogspot.com).*

Code Source

reff : http://www.contohblog.com/2015/02/cara-membuat-toolbar-statis-di-atas-header.html