Beranda » Tutorial Blog » Membuat Artikel Terkait dengan Gambar

Membuat Artikel Terkait dengan Gambar

T Diposting oleh pada 16 April 2012
F Kategori
b 1 komentar
@ Dilihat 407 kali

Membuat Artikel Terkait dengan GambarMembuat Artikel Terkait dengan Gambar. Sebelumnya pada catatan saya yang lalu sudah pernah memposting mengenai cara membuat artikel terkait untuk menampilkan artikel yang berkaitan dengan judul postingan utama,sehingga memudahkan pembaca untuk mencari topik yang berkaitan.Nah kali ini saya ingin melanjutkan berbagi catatan saya mengenai cara membuat artikel terkait atau related post yang lebih menarik yaitu dengan menambahkan thumbnail atau gambar didalamnya.

Cara ini bisa digunakan bersamaan dengan related post tanpa thumbnail. Bagi anda yang tertarik untuk memasangnya, ikuti langkah-langkah berikut:1. Buka menu Design -> Edit HTML

2. Beri centang pada “Expand Widgets Templates”

3. Letakkan kode berikut diatas </head>

<!–Related Posts with thumbnails Start–>
<!– remove –><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=’text/css’>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type=’text/javascript’>
var defaultnoimage=”http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png”;
var maxresults=3;
var splittercolor=”#cccccc”;
var relatedpoststitle=”You might also like:”;
</script>
<script src=’http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js’ type=’text/javascript’/>
<!– remove –></b:if>
<!–Related Posts with thumbnails End–>

4. Lalu cari <p class=’post-footer-line post-footer-line-1’/>

5. Kalau tidak ketemu coba cari post-footer-line

6. Letakkan kode berikut dibawahnya.

<!– Related Posts with Thumbnails Code Start–>
<!– remove –><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != &quot;true&quot;’>
</b:if>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;’ type=’text/javascript’/></b:loop>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style=’clear:both’/>
<!– remove –></b:if>
<!– Related Posts with Thumbnails Code End–>

7. Kalau sudah Save template anda.

Keterangan:

var defaultnoimage=”http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png” menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain.

var maxresults=3 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.
var splittercolor=”#cccccc” menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.
var relatedpoststitle=”You might also like:” menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.

Bagi sobat yang merasa cara diatas terlalu sulit,sobat bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

1. Buka situs http://www.linkwithin.com

2. Isi data-data yang diperlukan pada form yang telah disediakan

Email: alamat email anda
Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
Platform: pilih Other
Width: pilih jumlah related post yang mau ditampilkan

Beri centang pada kotak kecil jika anda menggunakan background template yang gelap

3. Klik Get Widget

4. Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai

Nah sobat darmanto semua,semoga catatan saya mengenai cara membuat artikel terkait dengan gambar bermnafaat juga ya…ayo terus semangat nge-blog.

Diposting oleh

CV. Studio Web, sebuah perusahaan jasa pembuatan web SEO friendly, jasa desain blog, google adwords, jasa SEO profesional. Hubungi CS Kami telpon/SMS/WA: 082310361484 (Puspa) PIN BB: SEO2402 untuk respon layanan cepat

1 Komentar untuk Membuat Artikel Terkait dengan Gambar

Silahkan tulis komentar Anda

Your email address will not be published. Required fields are marked *

*

a Artikel Terkait Membuat Artikel Terkait dengan Gambar

Cara Mudah Membuat Artikel Lama Selalu Di Homepage

Cara Mudah Membuat Artikel Lama Selalu Di Homepage (1)

T 4 March 2014F A Darmanto SEO

Selamat malam sobat semua.Malam ini saya akan berbagi Tutorial mudah tentang Cara Membuat Posting/artikel Lama Selalu di Homepage.Tutorial ini rupanya masih cukup banyak yang mencarinya.Membuat artikel lama kita selalu berada di halaman utama blog (homepage),biasanya bertujuan untuk membuat ucapan selamat... Selengkapnya

daftar blog dofollow

Kumpulan Daftar Blog Dofollow Terlengkap

T 8 September 2013F , A Darmanto SEO

Mencari Daftar Blog Dofollow yang memiliki PR (Page Rank) tinggi biasanya sering dilakukan oleh para pemilik blog / website yang ingin meningkatkan backlink bagi blog yang dimilikinya. Dalam dunia blog,mendapatkan backlink dofollow dari suatu blog/website dengan page rank tinggi sampai... Selengkapnya

Cara Membuat Sitemap Di blogger

Cara Membuat Sitemap / Daftar Isi di Blogger

T 9 November 2015F A Darmanto SEO

Cara Membuat Sitemap / Daftar Isi di Blog khusus untuk pengguna web platform blogger akan saya share. Hal ini karena ada salah satu sobat blogger yang minta petunjuk cara membuatnya.  Membuat sitemap di blogger ada beberapa cara, cara membuat sitemap... Selengkapnya

+ SIDEBAR

Ada Pertanyaan? Silahkan hubungi customer service kami untuk mendapatkan informasi lebih lengkap mengenai jasa/produk kami.

Legalitas Usaha

CV. STUDIO WEB
SIUP: 503.9/192/KPPT/PMK/11-22/II/2015
TDP: 112236321645
Akta Notaris no. 01
Detail Legalitas Kami Klik disini

Alamat

Office:
Jl. Raya Gili Tugel – Kreo KM 1, Rt. 039 Rw. 005

Desa Cibuyur, Kec. Warungpring

Kab. Pemalang, Jawa Tengah,52358