Cara Membuat Artikel Terkait dengan Gambar

Posted by Eddy Wijaya Thursday, 27 December 2012 10 komentar

Cara Membuat Artikel Terkait dengan Gambar

Topik yang akan saya bahas kali ini adalah bagaimana cara membuat artikel terkait. Kalau biasanya artikel terkait itu hanya berupa link menuju artikel lain di blog kita, kali ini akan saya tambahkan juga yang beserta gambar. Sebenarnya apa itu artikel terkait ? 

Artikel terkait adalah artikel yang saling berhubungan atau memiliki keterkaitan dengan artikel lainnya di blog kita. Gunanya untuk apa diberi arikel terkait pada blog kita ? banyak sekali guna artikel terkait ini sendiri.
Selain memberikan opsi lebih kepada pengunjung blog untuk membaca artikel yang lain, dengan adanya artikel terkait ini memungkinkan anda untuk menyebar point pagerank kepada artikel-artikel lain di blog anda. Contohnya sederhana saja, apabila dalam 1 artikel anda terdapat 5 buah artikel yang terkait. Itu sama saja artinya dengan anda menyebarkan point pagerank kepada 5 artikel tersebut.

Apakah hal itu akan berpengaruh kepada halaman yang menyebarkan point tersebut, tentu iya. Tapi apalah ruginya bila anda menyebarkan pointnya masih ke dalam artikel di dalam blog anda ? saya rasa tidak ada ruginya sama sekali. Jadi saya rasa anda semua sudah memiliki sedikit gambaran untuk apa artikel terkait itu sendiri.
Cara Membuat Artikel Terkait dengan Gambar

Sekarang, bagaimana cara membuatnya ? sebenarnya ada situs-situs yang menyediakan widget untuk artikel terkait. Kita ambil contoh saja linkwithin, situs ini menyediakan layanan berupa widget berupa artikel terkait yang siap dipasang di blog. Tapi sebenarnya kita pun bisa membuat widget ini sendiri dengan sedikit script yang harus kita letakan di dalam template kita. Lalu, apa saja scriptnya ? Berikut dibawah ini lebih jelasnya !

Script 1 


<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, Times New Roman , Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<a href='http://digitalareas.blogspot.com/'><small><font color='#555555'>Blogger Widget</font></small></a>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Script 2

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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'/> <a href='http://digitalareas.blogspot.com/'><small><font color='#555555'>Digital Areas</font></small></a> <!-- remove --></b:if> <!-- Related Posts with Thumbnails Code End-->

Nah, Bagaimana cara memasangnya ke dalam blog kita ?

1. Pertama silahkan anda buka blogger.com dan login menggunakan akun anda.
2. Silahkan pilih menu TEMPLATE kemudian pilih EDIT HTML.
3. Setelah itu, cari kode  </head> (Untuk memudahkan dalam pencarian, gunakanlah CTRL +F)
4. Copy kode yang ada pada SCRIPT 1 di atas, dan paste di atas tulisan </head>
5. Sekarang, cari lagi kode bertuliskan <data:post.body/>
6. Berikutnya adalah, copy kode yang ada pada SCRIPT 2 di atas, dan paste di bawah tulisan <data:post.body/>
7. Kemudian SIMPAN template anda.

Bila di dalam template anda terdapat lebih dari 1 <data:post.body/> , silahkan di coba satu per satu..

Note : Perhatikan kode pada SCRIPT 1, khususnya tulisan yang berwarna merah. Untuk kode var maxresults=5; digunakan untuk menentukan berapa banyak artikel terkait yang ingin ditampilkan. Sedangkan var relatedpoststitle="Related Posts"; bisa anda ganti dengan tulisan Artikel Terkait, Baca ini juga ( Sesuai keinginan anda )

Demikian topik saya kali ini mengenai Cara Membuat Artikel Terkait dengan Gambar selamat mencoba, dan jangan lupa nantikan terus update dari saya.




Silahkan Masukan Email Anda Untuk Mendapatkan Notifikasi Setiap Ada Artikel Baru Di Blog ini.


Berikut adalah caranya :
1. Masukan Email Anda dikotak yang disediakan.
2. Klik Tombol Suscribe
3. Buka Email Anda dan Segera Klik Link yang diberikan Untuk Mengaktivasi

Delivered by FeedBurner


Artikel Komputer
Blinkie Text Generator at TextSpace.net
Terima Kasih Atas Kunjungan Anda
Judul: Cara Membuat Artikel Terkait dengan Gambar
Ditulis Oleh Eddy Wijaya
Semoga artikel ini bermanfaat bagi saudara. Dilarang melakukan Copy Paste secara langsung, Jika anda ingin membuat artikel serupa, buatlah dengan narasi anda sendiri. Untuk pengutipan silahkan sertakan link ke Cara Membuat Artikel Terkait dengan Gambar ini. Setiap pelanggaran yang dilakukan akan kami proses dengan cara DMCA Takedown. Terima kasih atas pengertiannya dan sudah singgah membaca artikel ini.


Artikel apakah yang anda inginkan tampil di blog ini ?

SITE INFO

DMCA.com