Cara Membuat Artikel Terkait Blog Dengan Gambar
Cara Membuat Artikel Terkait Untuk Blog dengan gambar. Artikel terkait adalah salah satu artikel di salah satu halaman blog yang terletak di bagian bawah artikel utama dan kegunaan atau manfaat artikel terkait ini adalah memberi informasi lajutan yang relevan sebagai artikel yang menyangkut artikel suatu halaman di atasnya atau url yang sedang terbuka. Kenapa seorang admin blog memodifikasi template bawaan blogger karena agar dengan artikel terkaitnya maka memberi yang terbaik kepada pengunjung bisa betah lama lama di dalam blognya.
Cara Membuat Artikel Terkait Untuk Blog dengan gambar. Sebagai faktor pelengkap artikel utama, artikel terkait ini bisa meningkatkan traffic ke halaman-halaman lainya yang tidak pernah di temukan di SERP mesin pencari, mungkin karena kalah bersaing dengan pesaing judul artikel yang sama dari blog lain, atau artikel baru kita di buat maka artikel belum muncul SERP, jadi artikel yang hilang di SERP google akan bisa terbuka di bawah artikel utama dengan label sama maka akibatnya sangat baik akan memberi sinyal ke mesin pencarian agar artikel tekait tadi bisa di ingat SERP mesin pencarian google bila ada yang mengunjungi judul halaman artikel terkait dengan gambar with thumbnails ini.
Cara Membuat Artikel Terkait blog dengan gambar
Bagaimana cara membuat artikel terkait di blog dengan gambar? dengan cara menyematkan javascript artikel terkait yang di tanam simpan atau di letakan di template, maka blog kita sudah menyajikan suatu ke puasan terhadap pengunjung untuk memudahkan bila membutuhkan artikel lainnya dengan membuka judul di bawah artikel dengan label atau kategori artikel terkait ini sebagai solusi yang tepat bagi artikel lainnya agar bisa lebih di kenal di SERP google, artikel terkait ini juga selain menambah trafik pengunjung ke halaman lainnya ada satu yang tak kalah penting yaitu memberi sarana ke pengunjung bahwa artikel yang yang mengangkat tema yang sama bersangkutan sudah di sediakan oleh admin dengan cara membuat atau menanam javascript di simpan di template agar tampilan blog lebih inovatif bila di lihat di sebut dengan artikel terkait atau related articel.
Membuat artikel terkait tidaklah sulit, bila sobat ingin memoles template bawaan blogger, alangkah baiknya membuat artikel terkait di blospot dengan cara berikut:
1). Login ke akun blogger
2). Masuk ke menu template > edit HTML/Javascript
3). Pastekan kode di bawah tepat diatas
</head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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=8;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src=' https://bloggergubug.googlecode.com /files/grelposttumb.js' type='text/javascript'/>
<!--Related Posts with thumbnails Scripts and Styles End-->
4). Cari kode di bawah:
<data:post.body/>
Silahkan pastekan kode berikut tepat dibawahnya
<!-- 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 != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data: label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
5). Simpan
Untuk peletakannya dibawah post footer cari kode ini
<div class='post-footer'>
Baca juga artikel lainnya yang lebih keren:
* Templates Evo Magz V2 SEO RESPONSIVE
* Cara Membuat Blog Full SEO Friendly
* Templates Fastest Magz v3.5 Terbaru
* Ciri Backlink Berkualitas SEO Untuk Menaikan SERP
Itulah tips sederhana tentang cara membuat artikel terkait untuk blogspot dengan gambar, semoga bermanfaat. Terima kasih.
http://ciriseo.blogspot.co.id/2015/06/cara-membuat-artikel-terkait-blogspot.html
Cara Membuat Artikel Terkait Dengan Gambar di BlogspotAndri Hamdani 10/02/2015 Cara Membuat Artikel Terkait Dengan Gambar di Blogspot2016-04-09T14:58:21+00:00 Blog, Blogspot, Tutorial 8 Comments
IKLAN SIENTA 3Artikel terkait atau releated artikel di blogspot khusus untuk template bawaan atau asli dari Blogspot memang tidak tersedia, sementara untuk artikel terkait untuk template editan atau custom yang biasanya sudah di edit oleh pembuat template kadang tersedia widget releated artikel terkadang juga tidak tersedia. Releated post pada intinya berfungsi untuk meningkatkan page view sebuah blog dengan tujuan untuk meningkatkan optimasi atau SEO sebuah blog.
Widget releated artikel pada umunya terdiri dari beberapa jenis, ada berbentuk list saja atau tulisan maupun disertai dengan gambar atau thumbnail, mana yang lebih baik tentu saja tergantung jenis template yang Anda gunakan, pengaruh cepat dan lambatnya dari widget artikel terkait tentu saja sedikit berpengaruh karena berupa gambar, namun biasanya semakin baik template di buat kecepatan loading gambar juga akan berpengaruh.
Jika Anda penasaran ingin membuat menu releated artikel disertai gambar di blogspot template custom ada baiknya memperhatikan terlebih dahulu ukuran lebar postingan di blog Anda untuk memudahkan Anda mensesuiakan dengan ukuran blog Anda. Untuk mengetahui ukuran dari lebar posting blog gunakan software Inspec element, silahkan cari di Google software ini, download gratis dan ukuran juga tidak terlalu besar. Jika sudah paham tentang menu Inspect element lakukan langkah-langkah berikut ini
Masuk ke dasboard Blog pilih menu template , edit HTML
Klik tepat pada kotak menu edit HTML selanjutnya pada keybord tekan menu Ctrl+F setelah muncul menu search masukkan kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Selanjutnya masih pada menu edit HTML cari kode <div class=’post-footer’>, jika Anda tidak menemukan kode ini, close terlebih dahulu menu Search setelah itu ulangi lagi dengan menekan tombol Crtl+F di keyboard PC Anda. Selanjutnya pastekan kode HTML di bawah ini tepat di atas menu <div class=’post-footer’>. Jika terdapat lebih dari satu kode <div class=’post-footer> masukkan satu persatu sampai proses berhasil.
<!-- Related Posts with Thumbnails Code Start-->
<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 != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEIvW4jOg3YIyBl0m2A5mzzaSDdMN_8xeY_cajvH_F0dfFVKX6LFjn-qS4Al3eX-fvLMYE4K01Q3q3tujEBGyjGor3VTq_iuW9E-y2_YzjZTK-miNGc_rQ5Ln2nJu3d9MFQjZNoHtlHJmt/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Untuk angka 5 bertanda merah adalah maksimal gambar yang ingin ditampilkan, untuk Releated Post bisa diganti sesuai dengan selera Anda. Setelah selesai simpan template. Lihat hasilnya, jika kurang sesuai dengan ukuran di postingan blogspot Anda lakukan editing pada menu yang berwarna merah yang terdapat di atas kode </head>.
Lihat hasil demonya disini. Pada contoh blog ini ukuran lebar dan tinggi sudah dirubah, jumlah posting maksimal yang ditampilkan hanya empat. Selamat mencoba jika ada pertanyaan silahkan tinggalkan komentar.
http://andrihamdani.blog.uns.ac.id/2015/02/10/cara-membuat-artikel-terkait-dengan-gambar-di-blogspot/
Posted by Jak Rapp - Blogging, Widget
Salah satu cara yang relatif tepat untuk meningkatkan aktivitas dari pengunjung adalah dengan membuat Artikel Terkait / Related Posts. Baik itu dengan Gambar / Thumbnail atau url link biasa yang disertai dengan Judul Artikel. Fungsi dari penggunaan gambar Thumbnail itu sendiri lebih ke arah pmbuatan tampilan yang menarik sehingga meningkatkan minat dan simpati pengunjung untuk membaca artikel / postingan lain yang telah saudara buat. Contoh dari hasil pemasangannya adalah sebagai berikut :
Cara Membuat Artikel Terkait Dengan Gambar
Artikel terkait ini dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan menjadi antusias meneliti lebih lanjut setiap halaman yang berkaitan di dalam posting artikel anda.
Cara Membuat Artikel Terkait (Related Posts) dengan Gambar Thumbnail:
Pada dashboard di blogger.com pilih menu Template > Klik Edit Template agar bidang kerja pengeditan sudah aktif.
Kemudian tekan CTRL + F dan cari code ]]></b:skin>Setelah ketemu, COPAS kode berikut ini di atas dibawah kode ]]></b:skin>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG09TKNDKpNehJSVVPrK91Zeo-7tZvPI2xBJERg3y2Uwhukc7KW34f-MSbcCl41f03wMtqC7BEP-uGQYnvRdiiYhbTQ0EiHrjt9orb8SZFiQDSK4ZNXNPHG0cM4ad2sKKrjhF4-UNdhLI/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>
Penerapan Kode HTML Artikel Terkait Bergambar
Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnailyang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna yang dapat anda EDIT serta disesuaikan sendiri berdasarkan keinginan, caranya
Silahkan Anda cari kode <data:post.body/> gunakan CTRL + F untuk memudahkan pencarian.
Kemudian letakan kode di bawah ini setelah kode <data:post:body/>
http://www.jakrapp.com/2016/02/cara-membuat-artikel-terkait-dengan-gambar.html
0 Response to "Cara Mudah Membuat Artikel Terkait Dengan Thumbnail di Blog"
Post a Comment