Related Post/Artikel terkait adalah salah satu unsur penting yang mempengaruhi Search Engine Optimization (SEO) blog, percaya tidak percaya, navigasi yang satu ini dapat meningkatkan Pageview (PV) anda sebanyak 20-40%, angka ini akan semakin meningkat seiring dengan banyaknya artikel yang memiliki kesamaan topik di blog anda. Berikut adalah fungsi lain Related Post yang perlu anda ketahui:
- Meningkatkan pageview (PV)
- Mempercantik tampilan blog
- Memfasilitasi pengunjung untuk mempermudah mereka mencari artikel lain yang memiliki kesamaan topik
- Menjadi salah satu syarat yang harus dipenuhi blogger jika ingin menjadi publisher adsense (Kategori Navigasi)
Pemasangan related post sendiri tidak terlalu sulit, dimana anda hanya harus melakukan copy-paste pada script yang saya berikan dibawah ini.
Pada kesempatan kali ini, saya akan memberikan sejumlah script dengan berbagai style, mulai dari related post yang hanya memperlihatkan tulisan (judul) ataupun gaya yang menampilkan gambar. Jadi, silahkan pilih style related post yang sesuai dengan selera anda. Berikut adalah beberapa style related article yang kami sediakan:
Related Post dengan Thumbnail (Gambar)
Style ke-3 ini adalah salah satu style yang paling saya suka, selain karena design/tampilannya yang menarik perhatian pengunjung, style ini juga berisi animasi CSS, dimana ketika anda mengarahkan kursor anda ke Related Post, tampilan related post akan memperlihatkan animasi yang menarik (gambar thumbnail menjadi berputar).
Tidak hanya itu, script ini juga memungkinkan anda untuk membuat related post dengan summary (kutipan dari artikel terkait). Berikut cara pemasangannya:
Tidak hanya itu, script ini juga memungkinkan anda untuk membuat related post dengan summary (kutipan dari artikel terkait). Berikut cara pemasangannya:
1. Login ke Dashboard Blog Anda
2. Pilih menu Template--> Edit HTML
3. Tekan CTRL+F dan cari kode </head>
4. Copy-paste script dibawah ini diatas kode </head>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6e1vxvRfLq5OtlouKf6x2hE7FwK405gU4GjnZGNh8TS4XWS09ct-20NC4P1LnC7Q7GavNMM_JBgM_MB36YsN-CrKGcsFTgosGyTUAe0NyZVg21-LULsMOXd_vdWQgQOBM8tkC0zJR_cQo/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbs-and-summaries.js" />
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6e1vxvRfLq5OtlouKf6x2hE7FwK405gU4GjnZGNh8TS4XWS09ct-20NC4P1LnC7Q7GavNMM_JBgM_MB36YsN-CrKGcsFTgosGyTUAe0NyZVg21-LULsMOXd_vdWQgQOBM8tkC0zJR_cQo/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbs-and-summaries.js" />
5. Sekali lagi, copy-paste script dibawah ini diatas kode </head>
<style>
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 120px;
height: 200px;
border-right: 1px solid #E5E5E5;
display: inline-block;
}
.relatedsumposts:active {
background-color: #F7F7F7;
}
.relatedsumposts img:active {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.relatedsumposts a {
/* link properties */
color: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 3em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
#relatedpostssum {
background: #F3F3F3;
height: 200px; /* related posts container */
padding: 5px;
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
font-weight: bold;
border-top: 3px solid #FB8227;
color: #777;
display: inline-block;
padding: 5px 10px;
width: 190px;
float: left;
margin: 0px -200px 0px 20px;
transform: rotate(90deg);
transform-origin: left top 0;
-ms-transform: rotate(90deg);
-ms-transform-origin:left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left top 0;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>
6. Tekan CTRL +F dan cari kode <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> atau <a expr:href='data:label.url' rel='tag'><data:label.name/> (kadang terjadi perbedaan tanda titik (.) atau koma (,) Jadi disarankan untuk mencari kode kedua)
7. Setelah anda menemukan kode <a expr:href='data:label.url' rel='tag'><data:label.name/>, copy-paste script dibawah ini tepat dibawah baris kode tersebut
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
8. Jika anda sudah menyelesaikan langkah nomor 6 dan 7, pastikan script yang dihasilkan mirip dengan script dibawah ini:
10. Tepat diatas kode </b:includable>, tambahkan script berikut ini:
11. Lihat di Pratinjau, kalau sudah sesuai dengan selera Simpan template
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
8. Jika anda sudah menyelesaikan langkah nomor 6 dan 7, pastikan script yang dihasilkan mirip dengan script dibawah ini:
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>9. Tekan CTRL+F dan cari kode </b:includable>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
10. Tepat diatas kode </b:includable>, tambahkan script berikut ini:
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
<div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>
11. Lihat di Pratinjau, kalau sudah sesuai dengan selera Simpan template
Tidak suka dengan Related Post versi Polosan? anda bisa mencoba ini :
0 komentar:
Post a Comment