Related post atau artikel terkait adalah sekumpulan link yang menuju ke postingan atau konten lain yang memiliki kesamaan topik dengan artikel yang sedang dibaca. Keberadaannya sudah cukup lumrah dan sepertinya belakangan ini menjadi wajib karena dapat membuat pengunjung tertarik untuk menjelajahi postingan lainnya.
Beberapa keuntungan memasang related post dari segi SEO adalah:
- Meningkatkan page views (PV)
- Menurunkan bounce rate
- Meningkatkan waktu kunjungan rata-rata pengunjung
- Melengkapi navigasi blog agar terlihat lebih profesional
Posisi paling umum untuk menempatkan related post adalah di akhir artikel. Bayangkan saja ketika pengunjung selesai membaca satu artikel berkualitas, mereka pasti penasaran dengan artikel lain yang memiliki pembahasan serupa. Dengan adanya related post ini akan membantu pengunjung untuk langsung menuju artikel terkait yang dicari.
Cara Memasang Artikel Terkait dengan Thumbnail di Akhir Artikel
Related post ini dilengkapi dengan thumbnail (gambar) agar lebih menarik dengan gaya tampilan model grid. Saya pun pakai script ini untuk Fiksioner Free Blogger Template dan hasilnya cukup bagus. Rapi, terlihat sederhana dan elegan namun tidak terlalu berlebihan.A. 3 Kolom
Tampilan grid ini memiliki 3 kolom. Cocok untuk blog yang area postingannya tidak terlalu lebar.Pertama, tambahkan dulu kode CSS berikut "SEBELUM / DI ATAS"
</style> atau ]]></b:skin>./* Related Post Grid by igniel.com */
#ignielRelated{
display:block;
margin:20px 0px;
line-height:1.5em;
}
#ignielRelated h3.title{
font-size:16px;
font-weight:600;
text-align:center;
text-transform:uppercase;
line-height:initial;
}
#ignielRelated h3.title span{
background-color:#fff;
padding:0px 15px;
position:relative;
z-index:1;
}
#ignielRelated h3.title:before{
content: '';
display: block;
position: relative;
top:10px;
width: 100%;
border-top: 2px solid #cccccc;
}
#ignielRelated ul{
margin:20px 0px 0px;
padding:0px;
display:flex;
display:-webkit-flex;
flex-wrap:wrap;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
}
#ignielRelated ul li{
list-style:none;
width:calc((100% / 3) - 15px);
text-align:center;
margin-right:20px;
margin-bottom:20px;
padding:0px;
-webkit-margin-start:0px !important;
}
#ignielRelated ul li .thumb{
overflow:hidden;
line-height:0px;
border-radius:7px;
}
#ignielRelated ul li:nth-of-type(3n){
margin-right:0px;
}
#ignielRelated ul li a{
display:block;
}
#ignielRelated ul li a.judul{
color:#000; /* Warna Huruf */
font-weight:600;
margin-top:7px;
}
#ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul{
color:#ff5722; /* Warna Huruf Ketika Disorot */
}
#ignielRelated ul li a img{
width:100%;
max-height:143px;
transition:all .3s ease;
border:0px;
margin:0px;
}
#ignielRelated ul li a img:hover, #ignielRelated ul li:hover img{
transform:scale(1.1) rotate(-5deg);
filter: brightness(75%);
-webkit-filter: brightness(75%);
}
#ignielRelated .norelated{
text-align:center;
font-weight:600;
}
@media screen and (max-width:480px){
#ignielRelated ul li{
width: calc((100% / 2) - 7.5px);
margin-right:15px;
margin-bottom:15px;
}
#ignielRelated ul li:nth-of-type(3n){
margin-right:15px;
}
#ignielRelated ul li:nth-of-type(2n){
margin-right:0px;
}
}Yang bisa diganti:
#ignielRelated ul li a.judul: warna huruf di judul artikel.#ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul: warna huruf di judul artikel ketika disorot.Lalu simpan kode ini "SESUDAH / DI BAWAH"
<data:post.body/>.<!-- Related Post Grid by igniel.com -->
<b:if cond='data:view.isPost'>
<div id='ignielRelated'>
<h3 class='title'><span>Related Posts</span></h3>
<script>//<![CDATA[
var jumlah = 6;
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('d a=["\\y","\\x\\1f\\f\\k\\h","\\f\\e\\q\\C\\h\\E","\\w","\\k\\q\\A\\e\\1Y\\1d\\P","\\x\\z\\U\\x\\h\\n\\k\\q\\C","","\\1l\\F\\k\\q","\\e\\q\\h\\n\\1E","\\P\\e\\e\\A","\\1H\\h","\\h\\k\\h\\f\\e","\\S\\F\\q\\h\\e\\q\\h","\\x\\z\\v\\v\\g\\n\\1E","\\v\\e\\A\\k\\g\\1H\\h\\E\\z\\v\\U\\q\\g\\k\\f","\\z\\n\\f","\\A\\g\\h\\g\\2n\\k\\v\\g\\C\\e\\D\\1f\\q\\C\\2q\\U\\g\\x\\e\\1M\\1z\\2p\\k\\1t\\1w\\1d\\1C\\1i\\2k\\2j\\2e\\C\\F\\b\\b\\b\\b\\1I\\1n\\Z\\E\\V\\Z\\C\\b\\b\\b\\b\\V\\b\\b\\b\\b\\1w\\O\\b\\1r\\b\\b\\b\\O\\W\\A\\1b\\2f\\e\\b\\b\\b\\b\\b\\1A\\1I\\O\\1n\\1t\\W\\1r\\O\\b\\1l\\U\\1z\\Z\\D\\C\\b\\b\\b\\b\\2h\\V\\f\\V\\W\\1t\\W\\1r\\v\\1T\\1d\\F\\n\\1M\\2g\\2b\\b\\b\\1B\\1X\\b\\1W\\1V\\1j\\1d\\1K\\1G\\1J\\b\\b\\b\\b\\b\\V\\f\\1K\\1J\\1k\\1n\\z\\W\\v\\O\\O","\\f\\k\\q\\1k","\\n\\e\\f","\\g\\f\\h\\e\\n\\q\\g\\h\\e","\\E\\n\\e\\P","\\n\\g\\q\\A\\F\\v","\\P\\f\\F\\F\\n","\\Z\\1C\\1B","\\y\\f\\k\\w","\\y\\A\\k\\1j\\K\\S\\f\\g\\x\\x\\I\\p\\h\\E\\z\\v\\U\\p\\w\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\h\\k\\h\\f\\e\\I\\p","\\p\\w\\y\\k\\v\\C\\K\\x\\n\\S\\I\\p","\\D\\1i\\1b\\2a\\1b\\X\\E\\1b\\1G\\1A\\X\\1f\\X\\1k\\X\\q\\F\\X\\q\\z","\\n\\e\\1f\\f\\g\\S\\e","\\p\\K\\g\\f\\h\\I\\p","\\p\\D\\w\\y\\D\\g\\w\\y\\D\\A\\k\\1j\\w","\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\S\\f\\g\\x\\x\\I\\p\\1l\\z\\A\\z\\f\\p\\w","\\y\\D\\g\\w","\\y\\D\\f\\k\\w","\\1i\\n\\k\\h\\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|ignielRelatedGrid|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.split('|'),0,{}));
//]]></script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=25"'/>
</b:loop>
<ul>
<script>ignielRelatedGrid();</script>
</ul>
<b:else/>
There is no other posts in this category.
</b:if>
</div>
<div class='clear'/>
</b:if>var jumlah adalah jumlah artikel terkait yang ingin dimunculkan. Kamu bisa ganti angkanya sesuka hati. Karena jumlah kolomnya ada 3, lebih baik pakai angka kelipatan 3 juga. Misalnya 6, 9, 12, dll agar tampilanya rapi.Hasil dari artikel terkait grid 3 kolom dengan gambar.
B. 4 Kolom
Jika area postingan blog kamu cukup lebar, maka related post yang berjumlah 4 kolom cocok dipakai untuk menutupi area yang luas.Simpan kode CSS berikut "SEBELUM / DI ATAS"
</style> atau ]]></b:skin>./* Related Post Grid by igniel.com */
#ignielRelated{
display:block;
margin:20px 0px;
line-height:1.5em;
}
#ignielRelated h3.title{
font-size:16px;
font-weight:600;
text-align:center;
text-transform:uppercase;
line-height:initial;
}
#ignielRelated h3.title span{
background-color:#fff;
padding:0px 15px;
position:relative;
z-index:1;
}
#ignielRelated h3.title:before{
content: '';
display: block;
position: relative;
top:10px;
width: 100%;
border-top: 2px solid #cccccc;
}
#ignielRelated ul{
margin:20px 0px 0px;
padding:0px;
display:flex;
display:-webkit-flex;
flex-wrap:wrap;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
}
#ignielRelated ul li{
list-style:none;
width:calc((100% / 4) - 7.5px);
text-align:center;
margin-right:10px;
margin-bottom:20px;
padding:0px;
-webkit-margin-start:0px !important;
}
#ignielRelated ul li .thumb{
overflow:hidden;
line-height:0px;
border-radius:7px;
}
#ignielRelated ul li:nth-of-type(4n){
margin-right:0px;
}
#ignielRelated ul li a{
display:block;
}
#ignielRelated ul li a.judul{
color: #000; /* Warna Judul */
font-weight:600;
margin-top:7px;
}
#ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul{
color: #ff5722; /* Warna Judul Ketika Disorot */
}
#ignielRelated ul li a img{
width:100%;
max-height:143px;
transition:all .3s ease;
border:0px;
margin:0px;
}
#ignielRelated ul li a img:hover, #ignielRelated ul li:hover img{
transform:scale(1.1) rotate(-5deg);
filter: brightness(75%);
-webkit-filter: brightness(75%);
}
#ignielRelated .norelated{
text-align:center;
font-weight:600;
}
@media screen and (max-width:480px){
#ignielRelated ul li{
width: calc((100% / 2) - 7.5px);
margin-right:15px;
margin-bottom:15px;
}
#ignielRelated ul li:nth-of-type(4n){
margin-right:15px;
}
#ignielRelated ul li:nth-of-type(2n){
margin-right:0px;
}
}Yang bisa diganti:
#ignielRelated ul li a.judul: warna huruf di judul artikel.#ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul: warna huruf di judul artikel ketika disorot.Lalu simpan kode ini "SESUDAH / DI BAWAH"
<data:post.body/>. Sebenarnya kodenya sama saja sih seperti yang 3 kolom sebelumnya.<!-- Related Post Grid by igniel.com -->
<b:if cond='data:view.isPost'>
<div id='ignielRelated'>
<h3 class='title'><span>Related Posts</span></h3>
<script>//<![CDATA[
var jumlah = 8;
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('d a=["\\y","\\x\\1f\\f\\k\\h","\\f\\e\\q\\C\\h\\E","\\w","\\k\\q\\A\\e\\1Y\\1d\\P","\\x\\z\\U\\x\\h\\n\\k\\q\\C","","\\1l\\F\\k\\q","\\e\\q\\h\\n\\1E","\\P\\e\\e\\A","\\1H\\h","\\h\\k\\h\\f\\e","\\S\\F\\q\\h\\e\\q\\h","\\x\\z\\v\\v\\g\\n\\1E","\\v\\e\\A\\k\\g\\1H\\h\\E\\z\\v\\U\\q\\g\\k\\f","\\z\\n\\f","\\A\\g\\h\\g\\2n\\k\\v\\g\\C\\e\\D\\1f\\q\\C\\2q\\U\\g\\x\\e\\1M\\1z\\2p\\k\\1t\\1w\\1d\\1C\\1i\\2k\\2j\\2e\\C\\F\\b\\b\\b\\b\\1I\\1n\\Z\\E\\V\\Z\\C\\b\\b\\b\\b\\V\\b\\b\\b\\b\\1w\\O\\b\\1r\\b\\b\\b\\O\\W\\A\\1b\\2f\\e\\b\\b\\b\\b\\b\\1A\\1I\\O\\1n\\1t\\W\\1r\\O\\b\\1l\\U\\1z\\Z\\D\\C\\b\\b\\b\\b\\2h\\V\\f\\V\\W\\1t\\W\\1r\\v\\1T\\1d\\F\\n\\1M\\2g\\2b\\b\\b\\1B\\1X\\b\\1W\\1V\\1j\\1d\\1K\\1G\\1J\\b\\b\\b\\b\\b\\V\\f\\1K\\1J\\1k\\1n\\z\\W\\v\\O\\O","\\f\\k\\q\\1k","\\n\\e\\f","\\g\\f\\h\\e\\n\\q\\g\\h\\e","\\E\\n\\e\\P","\\n\\g\\q\\A\\F\\v","\\P\\f\\F\\F\\n","\\Z\\1C\\1B","\\y\\f\\k\\w","\\y\\A\\k\\1j\\K\\S\\f\\g\\x\\x\\I\\p\\h\\E\\z\\v\\U\\p\\w\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\h\\k\\h\\f\\e\\I\\p","\\p\\w\\y\\k\\v\\C\\K\\x\\n\\S\\I\\p","\\D\\1i\\1b\\2a\\1b\\X\\E\\1b\\1G\\1A\\X\\1f\\X\\1k\\X\\q\\F\\X\\q\\z","\\n\\e\\1f\\f\\g\\S\\e","\\p\\K\\g\\f\\h\\I\\p","\\p\\D\\w\\y\\D\\g\\w\\y\\D\\A\\k\\1j\\w","\\y\\g\\K\\E\\n\\e\\P\\I\\p","\\p\\K\\S\\f\\g\\x\\x\\I\\p\\1l\\z\\A\\z\\f\\p\\w","\\y\\D\\g\\w","\\y\\D\\f\\k\\w","\\1i\\n\\k\\h\\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|ignielRelatedGrid|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.split('|'),0,{}));
//]]></script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=25"'/>
</b:loop>
<ul>
<script>ignielRelatedGrid();</script>
</ul>
<b:else/>
There is no other posts in this category.
</b:if>
</div>
<div class='clear'/>
</b:if>var jumlah adalah jumlah artikel terkait yang ingin dimunculkan. Javascriptnya sama saja dengan versi 3 kolom. Yang perlu diganti hanya var jumlah untuk menyesuaikan tampilan. Angkanya bisa diubah sesukanya. Karena jumlah kolomnya ada 4, pakailah angka kelipatan 4 seperti 8, 12, 16, dll agar tampilanya rapi.Hasil dari artikel terkait grid 4 kolom dengan gambar.
Selesai sudah tutorial tentang cara memasang artikel terkait dengan gambar di bawah postingan Blogger. Pilih model yang paling sesuai dengan template agar tampilan blog kamu makin keren. Jika kurang suka dengan model grid, coba juga jenis tampilan lain yaitu related post model list dengan thumbnail dan snippet.
Kalau sudah ada bawaanya bagaimana mb ? Apakah perlu d hapus atau akan otomatis tergantikan?
BalasHapusHarus dihapus dulu biar nggak bentrok.
Hapuscara nambahin gambar untuk yang gak ada image nya gimana mbak (no image) ?
BalasHapusIni sudah dilengkapi dengan noimage.
HapusBoleh tulis ulang artikelnya kak dengan Gaya saya sendiri
BalasHapusIya boleh banget. Cantumkan sumbernya ya.
HapusTerimakasih mbak igniel... Related post nya mantap... Sudah saya pasang di blog saya. Makasih banyak tutorialnya... Terus berkarya...
BalasHapusSama-sama. Makasih mas, sukses buat blognya.
HapusGambarnya bisa di kecilin ga min? gambar sama pembatas template jadi mentok banget :3
BalasHapusLiat kode ini:
Hapus#ignielRelated ul li{
list-style:none;
width:calc((100% / 4) - 7.5px);
Perbesar angka 7.5 px dan sesuaikan sendiri.
Terima kasih banyak mba,
Hapusmbak cara pasang nya di home page gimana biar bisa related post sesuai label,? udah saya ganti link feed nya sesuai label tetap ga muncul
BalasHapusIni khusus buat di halaman post.
HapusKalau saya pake buat blog saya terus saya edit lagi sesuai keinginan sendiri boleh ngga mba?
BalasHapusIya boleh
HapusUntuk menambah ukuran tinggi gambar dibagian mana..?? udah acak2
BalasHapus#ignielRelated ul li .thumb{
overflow:hidden;
line-height:0px;
border-radius:7px;
dan
#ignielRelated ul li a img{
width:100%;
max-height:143px;
transition:all .3s ease;
border:0px;
margin:0px;
}
tapi gambarnya masih mentok...
Maunya sih seperti ini
https://1.bp.blogspot.com/-m8sBP-MN4eY/XFrjWosgNMI/AAAAAAAADeA/aKlU73eYEjw5cbCWY8hb82abKgxnRS4KACLcBGAs/s1600/Screenshot_4.png
Ganti
Hapusmax-height:143px;
Jadi
max-height:auto;
gak support gambar yang gak di hosting di blogger ya mbak?
BalasHapuswah sangat bermanfaat ka
BalasHapusKalau related post yang seperti blog ini bagaimana cara pemasangnga pak? Bagus sekali soalnya, rapih.
BalasHapusItu iklan AdSense jenis matched content, bapak.
HapusUntuk mengubah link aktifnya menjadi open new tab bagaimana ya?
BalasHapusmbak mau nanya nih, kode related bawaan template saya sudah saya hapus dan ganti dengan punya mbak igniel, kok tumbnailnya gak muncul ya?
BalasHapusAlamat blognya apa?
Hapusini sudah berdasarkan label mbak ?
BalasHapusBerdasarkan label dari postingan yang sedang dibuka.
Hapusmbak gimana ya mengatasi thumbnail tidak muncul,
BalasHapuskarna image post bloggernya dia awali tag p
soalnya postingan bloggernya expord dari wordpress
teh igniel untuk ada tiga yang pertama, kedua atau yang terakhir, mksh sebelumnya saya masih tahap belajar
BalasHapuscara nambahin wrappernya gimana mba? itu ga ada wrapper soalnya hehe
BalasHapusbackground maksudnya mba
Hapussupaya random gimana mba?
BalasHapusTujuan dari related post itu buat menampilkan artikel yang mempunyai label yang sama. Kalau random nggak bisa disebut related dong.
HapusKalau masih mau pake random yang ini.
https://www.igniel.com/2018/11/random-post-thumbnail.html
Mbak Igniel tutorialnya mantap banget. Untuk varian template terbaru dengan layout versi 3 bagus diterapkan pada emporio dan terkemuka, ...tapi gambarnya jadi kacau saat ditempatkan di template contempo yang hanya punya satu satunya: <data:post.body/>
BalasHapusBisa bantu dong...soalnya saya kepingin banget menerapkannya pada contempo
bikin tutor tampilan home grid dong , ,hhe
BalasHapuskayak template ini
Maaf mba mohon bantuannya, kalo misalkan judul post nya tidak dimuat seluruh dan saya ingin hanya dimuat sebagian. Kode yang harus diubah apa ya mba? Terimakasih..
BalasHapusBisa, tingga di potong mas 😅
Hapusthanks it works..caranya simple makasih gan
BalasHapusNeng Inel mantaf, di blog akang berhasil ditrapkan tutornya.
BalasHapusMakasih ya.
Salamm ti Papua.
cara ngilangin gambarnya bisa gak?
BalasHapuskalau pasang di template contempo bawaannya blogger, apa ada yang perlu di hapus biar gak bentrok?
BalasHapusNggak ada. Langsung pasang aja.
Hapuskak izin rewrite ya :)
BalasHapusSilakan. Cantumkan sumbernya ya.
Hapusit works kak igniel ,, thanks 😃
BalasHapusTerima Kasih, It's workssss
BalasHapusMbak kalau dibuat tampilannya jadi grid Dan list seperti pada blog ini bagaimana caranya mbak??
BalasHapusMaaf nanya lagi mbak?? Melanjuti pertanyaan saya yang sebelumnya....
BalasHapus"Tresponsive grid 2 dan list seperti pada blog mbak ini" bagaimana caranya, jika berkenan?? karena menurut saya sangat bagus dan keren.
Ask!
BalasHapusKira-kira bisa di edit jdi postingan popular ngga mbak?
Hallo mbak? Matur sewun 😁
Nggak bisa. Khusus artikel terkait berdasarkan label.
HapusSaya ada problem saat di aplikasikan ke layout blogget v3, related post hanya mncul pda tampilan mobilr saja, ktika sya inspect element jga tetap tdak mncul, bgaimana fix nya Mba?
BalasHapusBtw bkin tutorial buat komentar seperti di blog ini bgus Mba, mksh
Semua template yang saya buat sudah menggunakan layout v3 dan muncul. Jadi pastikan kamu nyimpen scriptnya BUKAN di dalam tag kondisional mobile.
HapusBaik, sya cba atur lgi, klau tetep tdak bsa sya blik lgi 😅
Hapusmbak kalo cara pasang iklan adsense di related nya gmna?
BalasHapusUbah no imagenya gimana mbak
BalasHapusentah kenapa semua kebanyakan trik yang berhungan dengan JS di sini gak work di template terbaru bawaan Blogger. gak tampil
BalasHapusSemua template buatan saya udah pake layout v3 terbaru. Udah pasti script pun disesuaikan sama layout v3. Kalo gak work pasangnya ada yang salah.
Hapusdi tempalate siginfikan bawaan blogger gak tampil, tetapi saya pasang di template contempo tampil tetapi gambarnya jadi kecil dan menyamping. di buka di browser hp gak responsive jadi kesusun 3 doble kayak versi dekstop
HapusPastikan simpan CSS di tempat yang tepat. Kalau sesuai tutorial pasti work .
HapusEmang bedanya apa teh pasang CSS di atas bskin dengan membuat <style csss sendiri? Apakah berpengaruh ya ?
HapusTerimakasih tutorialnya.
BalasHapusTeh buat tutorial juga dong tentang vertical scroll recent post untuk blogger jadi dia recent post nya otomatis scrol sendiri, saya search di google tapi belum ada satupun blogger indonesia yang membuatnya.
Nuhun teh.