Thursday, September 19, 2013
AS
Blogspot Membuat Related Post yang Menarik. Related Post adalah internal link yang di generated oleh blog atau website kita. Sangat penting karena selain internal link itu sendiri penting untuk SEO juga untuk membuat pengunjung bisa lebih lama berada di website atau blog kita.
Biasanya terletak di bawah halaman artikel kita. Berisi artikel - artikel yang sejenis dengan artikel yang sedang di baca oleh pengunjung.
Hari ini saya akan mencoba untuk berbagi bagaimana membuat related post yang menarik dengan menggunakan blogspot sebagai platform.
Langkah - Langkah Membuat Related Post yang Menarik :
1. Login ke blogger.com, Masuk ke Dashboard > Template > Edit HTML
2. Cari kode di bawah
3. Tambahkan kode di bawah ini, tepat di atas
4. Cari kode di bawah ini
5. Letakkan kode di bawah ini tepat diatasnya
6. Letakkan kode di bawah sesuai dengan selera anda, namun biasanya di letakkan di bawah artikel.
7. maxresults bisa anda rubah sesuai keinginan anda, berapa jumlah link artikel yang ingin anda tampilkan. Save dan anda sudah berhasil membuat Related Posts pada Blogspot.
Selamat Mencoba...
Biasanya terletak di bawah halaman artikel kita. Berisi artikel - artikel yang sejenis dengan artikel yang sedang di baca oleh pengunjung.
Hari ini saya akan mencoba untuk berbagi bagaimana membuat related post yang menarik dengan menggunakan blogspot sebagai platform.
Langkah - Langkah Membuat Related Post yang Menarik :
1. Login ke blogger.com, Masuk ke Dashboard > Template > Edit HTML
2. Cari kode di bawah
]]></b:skin>
3. Tambahkan kode di bawah ini, tepat di atas
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding:17px 15px 10px;
background-color:#F0F0F0;
-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
margin:10px 0;
}
#related-posts .widget{
margin-bottom:10px;
}
#related-posts .widget h2, #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:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMsnIFx5Fj1JfdU6SvIswtAIQIao3SIO4vTQtdzXNIxKbYwnfws5sftyNe3DLMTADSXLMlnk5ZJVNTWwdTcLPlSJm7nEAfbHfc1oviqzJ_mPUEZ1_tSdrNZkxorJwL7qBGkyn1XRgpR8/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 5px;
padding-left: 30px;
padding-top:0px;}
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding:17px 15px 10px;
background-color:#F0F0F0;
-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
margin:10px 0;
}
#related-posts .widget{
margin-bottom:10px;
}
#related-posts .widget h2, #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:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMsnIFx5Fj1JfdU6SvIswtAIQIao3SIO4vTQtdzXNIxKbYwnfws5sftyNe3DLMTADSXLMlnk5ZJVNTWwdTcLPlSJm7nEAfbHfc1oviqzJ_mPUEZ1_tSdrNZkxorJwL7qBGkyn1XRgpR8/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 5px;
padding-left: 30px;
padding-top:0px;}
4. Cari kode di bawah ini
</head>
5. Letakkan kode di bawah ini tepat diatasnya
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='https://droidvan.googlecode.com/svn/related_articles_2.js' type='text/javascript'/>
var relatedpoststitle="Related Posts";
</script>
<script src='https://droidvan.googlecode.com/svn/related_articles_2.js' type='text/javascript'/>
6. Letakkan kode di bawah sesuai dengan selera anda, namun biasanya di letakkan di bawah artikel.
<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&max-results=6"'
type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
</b:if>
<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&max-results=6"'
type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
</b:if>
7. maxresults bisa anda rubah sesuai keinginan anda, berapa jumlah link artikel yang ingin anda tampilkan. Save dan anda sudah berhasil membuat Related Posts pada Blogspot.
Selamat Mencoba...
