Cara memasang artikel terkait (baca Juga) di dalam postingan blog telah dianggap sebagai alternatif terbaik untuk menurunkan score bounce rates blog. Karena cara ini membuat pengunjung terpancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang dibaca. Cara ini juga merupakan salah satu tehnik Onpage SEO untuk blog.

Pada dasarnya, membuat baca juga / artikel terkait di tengah postingan ini prinsip kerjanya mirip dengan related posts yang berada dibawah postingan. Masing-masing menampilkan judul yang berkaitan dengan tags / labels yang sesuai dengan postingan blog. Bedanya adalah, related posts dibawah postingan biasanya di lengkapi dengan gambar sedangkan yang dalam postingan, Image tidak dimunculkan dan pada judul diatasnya terdapat tulisan Baca Juga.

Cara Memasang Artikel Terkait di Dalam Postingan
Anda mungkin sudah sering melihat pada blog yang Anda kunjungi, biasanya kode ini di awali dengan tulisan "Baca Juga" dan berisikan 3 sampai 4 judul postingan yang sesuai dengan label yang biasanya dimunculkan pada tempat khusus mirip sebuah kotak (tergantung Jenis CSS yang digunakan). Artikel terkait dalam postingan ini diharapkan mampu mendatangkan klik bagi para pengunjung blog. Olehnya itu, patutlah bagi Anda untuk mempercantik bagian ini agar visitor Anda terpancing untuk klik link judul baca juga di tengah postingan ini. Nah, apakah Anda tertarik untuk memasangnya pada blogger Anda, jika iya, maka silakan ikuti proses penerapannya pada tutorial dibawah.


Artikel Terkait di Tengah Postingan Keren Responsive

Pada tutorial cara membuat baca juga di blog, akan disajikan dengan beberapa tampilan. Disini saya membagikan 3 jenis style berbeda, jadi silakan pilih yang menurut Anda cocok untuk dipasang sebagai Artikel Terkait di dalam Postingan.

Sebenarnya semua sama saja, yang terpenting adalah penerapan pada kodenya serta cara Anda menempatkan "tag / label" pada masing-masing artikel yang dibuat agar script ini betul-betul berguna sebagai artikel terkait pada postingan.

Cara Membuat Baca Juga (Artikel Terkait Dalam Postingan)

Pada proses cara membuat baca juga ini, saya akan bagikan 3 jenis tampilan kotak / kolom baca juga yang menarik untuk pemasangan artikel terkait ditengah postingan ini.

Sebelumnya silakan Masuk ke menu Theme ➢ Klik tombol Edit HTML ➣ Tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

Baca Juga Tampilan Pertama

/* dp baca juga 1 */
.dewa-bacajuga{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:84%;border:6px double #fff;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px 8px 30px;margin:0;font-size:15px;font-weight:700;text-transform:uppercase;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga h4:before{content:'\f05a';font-family:fontawesome;position:absolute;font-weight:400;margin:0 5px 0 2px;color:#fff;overflow:hidden;left:10px;transition:all .3s}
.dewa-bacajuga ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.dewa-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.dewa-bacajuga ul li:before{content:'\f087';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:100%;left:10px;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f058';font-family:fontawesome;color:#f1c40f;}
.dewa-bacajuga a{color:#fff;font-size:15px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#fff;text-decoration:underline}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.dewa-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.dewa-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.dewa-bacajuga a{font-size:14px;margin:0}.dewa-bacajuga a:hover{color:#e74c3c}
.dewa-bacajuga ul li{padding:5px 0}
.dewa-bacajuga ul li:before,.dewa-bacajuga ul li:hover:before{display:none}}

cara membuat baca juga di blogspot
Baca Juga style 1

Baca Juga Tampilan Ke Dua

/* dp baca juga 2 */
.dewa-bacajuga{position:relative;padding:0;margin:15px auto;width:100%;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga ul{margin:0;padding:0}
.dewa-bacajuga ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.dewa-bacajuga ul li:nth-child(odd){background:#fefefe}
.dewa-bacajuga ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.dewa-bacajuga ul li:before{content:'\f026';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#a158e4;overflow:hidden;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f026';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.dewa-bacajuga a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#0383d9;text-decoration:underline}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

cara memasang baca juga di tengah artikel
baca juga style 2

Baca Juga Tampilan ke tiga

/* dp baca juga 3 */
.dewa-bacajuga{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:87%;background:#e2e2e2;border:4px double rgba(0,0,0,0.2)}
.dewa-bacajuga h4{background:#ca4444;padding:8px 10px;position:absolute;margin:0;font-size:16px;color:#fff;border-radius:20px;top:-21px;left:2.5%}
.dewa-bacajuga ul{margin:0;padding:0}
.dewa-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.dewa-bacajuga ul li:before{content:'\f02b';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f02b';font-family:fontawesome;color:#0383d9;}
.dewa-bacajuga a{color:#000;font-size:14px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#0383d9;}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.dewa-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.dewa-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.dewa-bacajuga a{font-size:14px;margin:0}.dewa-bacajuga a:hover{color:#e74c3c}
.dewa-bacajuga ul li{padding:5px 0}
.dewa-bacajuga ul li:before,.dewa-bacajuga ul li:hover:before{display:none}}

cara membuat related post baca juga di tengah artikel
baca juga style 3
Kode CSS ini menggunakan Font Awesome, Silakan check pada template Anda, apakah sudah menggunkan font Awesome. Jika belum, silakan dipasang agar iconnya bisa tampil.


Related Posts Baca Juga Otomatis ditengah Postingan

Setelah menempatkan CSS tadi, sekarang adalah pemasangan script Baca juga otomatis ini. Tambahkan kode di bawah ini sebelum tag </head>
<b:if cond ='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
var dewaBacajuga=new Array,dewaBacajugaNum=0,relatedUrls=new Array;function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var r=e.feed.entry[l];dewaBacajuga[dewaBacajugaNum]=r.title.$t;for(var t=0;t<r.link.length;t++)if("alternate"==r.link[t].rel){relatedUrls[dewaBacajugaNum]=r.link[t].href,dewaBacajugaNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=dewaBacajuga[r]);dewaBacajuga=l,relatedUrls=e}function contains(e,l){for(var r=0;r<e.length;r++)if(e[r]==l)return!0;return!1}function printRelatedLabels(){var e=Math.floor((dewaBacajuga.length-1)*Math.random()),l=0;for(document.write("<ul>");l<dewaBacajuga.length&&l<20;)document.write('<li><a href="'+relatedUrls[e]+'">'+dewaBacajuga[e]+"</a></li>"),e<dewaBacajuga.length-1?e++:e=0,l++;document.write("</ul>")}
//]]>
</script> </b:if>


Selanjutnya, cari dan ganti kode <data:post.body/> dengan kode di bawah ini
Kemungkinan akan ada beberapa kode <data:post.body/> dalam template Anda, tergantung template yang digunakan, maka coba saja satu persatu sampai artikel terkait muncul.
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='dewa-bacajuga'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

Untuk menambah jumlah judul yang muncul, silakan ubah nilai max-results=3&quot;  sesuai dengan keinginan Anda. Tapi saran saya cukup untuk 3 saja, karena script ini mempengaruhi kecepatan blog. Dan silakan atur CSS sesuai keinginan Anda.

Saatnya untuk melihat hasil dari tutorial diatas. Silakan check tiap postingan di blog Anda. Apakah script baca juga otamatisnya sudah muncul. Jika belum, coba periksa lagi prosesnya dari awal.


Demikian tutorial kali ini tentang Cara Memasang Related Post (baca Juga) di Dalam Postingan Blog, Semoga bisa diterapkan dengan baik diblog Anda.

Sumber : https://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html

Cara Memasang Related Post (Baca Juga) di Dalam Postingan Blog

Cara memasang artikel terkait (baca Juga) di dalam postingan blog telah dianggap sebagai alternatif terbaik untuk menurunkan score bounce rates blog. Karena cara ini membuat pengunjung terpancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang dibaca. Cara ini juga merupakan salah satu tehnik Onpage SEO untuk blog.

Pada dasarnya, membuat baca juga / artikel terkait di tengah postingan ini prinsip kerjanya mirip dengan related posts yang berada dibawah postingan. Masing-masing menampilkan judul yang berkaitan dengan tags / labels yang sesuai dengan postingan blog. Bedanya adalah, related posts dibawah postingan biasanya di lengkapi dengan gambar sedangkan yang dalam postingan, Image tidak dimunculkan dan pada judul diatasnya terdapat tulisan Baca Juga.

Cara Memasang Artikel Terkait di Dalam Postingan
Anda mungkin sudah sering melihat pada blog yang Anda kunjungi, biasanya kode ini di awali dengan tulisan "Baca Juga" dan berisikan 3 sampai 4 judul postingan yang sesuai dengan label yang biasanya dimunculkan pada tempat khusus mirip sebuah kotak (tergantung Jenis CSS yang digunakan). Artikel terkait dalam postingan ini diharapkan mampu mendatangkan klik bagi para pengunjung blog. Olehnya itu, patutlah bagi Anda untuk mempercantik bagian ini agar visitor Anda terpancing untuk klik link judul baca juga di tengah postingan ini. Nah, apakah Anda tertarik untuk memasangnya pada blogger Anda, jika iya, maka silakan ikuti proses penerapannya pada tutorial dibawah.


Artikel Terkait di Tengah Postingan Keren Responsive

Pada tutorial cara membuat baca juga di blog, akan disajikan dengan beberapa tampilan. Disini saya membagikan 3 jenis style berbeda, jadi silakan pilih yang menurut Anda cocok untuk dipasang sebagai Artikel Terkait di dalam Postingan.

Sebenarnya semua sama saja, yang terpenting adalah penerapan pada kodenya serta cara Anda menempatkan "tag / label" pada masing-masing artikel yang dibuat agar script ini betul-betul berguna sebagai artikel terkait pada postingan.

Cara Membuat Baca Juga (Artikel Terkait Dalam Postingan)

Pada proses cara membuat baca juga ini, saya akan bagikan 3 jenis tampilan kotak / kolom baca juga yang menarik untuk pemasangan artikel terkait ditengah postingan ini.

Sebelumnya silakan Masuk ke menu Theme ➢ Klik tombol Edit HTML ➣ Tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

Baca Juga Tampilan Pertama

/* dp baca juga 1 */
.dewa-bacajuga{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:84%;border:6px double #fff;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px 8px 30px;margin:0;font-size:15px;font-weight:700;text-transform:uppercase;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga h4:before{content:'\f05a';font-family:fontawesome;position:absolute;font-weight:400;margin:0 5px 0 2px;color:#fff;overflow:hidden;left:10px;transition:all .3s}
.dewa-bacajuga ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.dewa-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.dewa-bacajuga ul li:before{content:'\f087';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:100%;left:10px;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f058';font-family:fontawesome;color:#f1c40f;}
.dewa-bacajuga a{color:#fff;font-size:15px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#fff;text-decoration:underline}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.dewa-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.dewa-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.dewa-bacajuga a{font-size:14px;margin:0}.dewa-bacajuga a:hover{color:#e74c3c}
.dewa-bacajuga ul li{padding:5px 0}
.dewa-bacajuga ul li:before,.dewa-bacajuga ul li:hover:before{display:none}}

cara membuat baca juga di blogspot
Baca Juga style 1

Baca Juga Tampilan Ke Dua

/* dp baca juga 2 */
.dewa-bacajuga{position:relative;padding:0;margin:15px auto;width:100%;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga ul{margin:0;padding:0}
.dewa-bacajuga ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.dewa-bacajuga ul li:nth-child(odd){background:#fefefe}
.dewa-bacajuga ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.dewa-bacajuga ul li:before{content:'\f026';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#a158e4;overflow:hidden;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f026';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.dewa-bacajuga a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#0383d9;text-decoration:underline}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

cara memasang baca juga di tengah artikel
baca juga style 2

Baca Juga Tampilan ke tiga

/* dp baca juga 3 */
.dewa-bacajuga{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:87%;background:#e2e2e2;border:4px double rgba(0,0,0,0.2)}
.dewa-bacajuga h4{background:#ca4444;padding:8px 10px;position:absolute;margin:0;font-size:16px;color:#fff;border-radius:20px;top:-21px;left:2.5%}
.dewa-bacajuga ul{margin:0;padding:0}
.dewa-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.dewa-bacajuga ul li:before{content:'\f02b';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f02b';font-family:fontawesome;color:#0383d9;}
.dewa-bacajuga a{color:#000;font-size:14px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#0383d9;}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.dewa-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.dewa-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.dewa-bacajuga a{font-size:14px;margin:0}.dewa-bacajuga a:hover{color:#e74c3c}
.dewa-bacajuga ul li{padding:5px 0}
.dewa-bacajuga ul li:before,.dewa-bacajuga ul li:hover:before{display:none}}

cara membuat related post baca juga di tengah artikel
baca juga style 3
Kode CSS ini menggunakan Font Awesome, Silakan check pada template Anda, apakah sudah menggunkan font Awesome. Jika belum, silakan dipasang agar iconnya bisa tampil.


Related Posts Baca Juga Otomatis ditengah Postingan

Setelah menempatkan CSS tadi, sekarang adalah pemasangan script Baca juga otomatis ini. Tambahkan kode di bawah ini sebelum tag </head>
<b:if cond ='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
var dewaBacajuga=new Array,dewaBacajugaNum=0,relatedUrls=new Array;function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var r=e.feed.entry[l];dewaBacajuga[dewaBacajugaNum]=r.title.$t;for(var t=0;t<r.link.length;t++)if("alternate"==r.link[t].rel){relatedUrls[dewaBacajugaNum]=r.link[t].href,dewaBacajugaNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=dewaBacajuga[r]);dewaBacajuga=l,relatedUrls=e}function contains(e,l){for(var r=0;r<e.length;r++)if(e[r]==l)return!0;return!1}function printRelatedLabels(){var e=Math.floor((dewaBacajuga.length-1)*Math.random()),l=0;for(document.write("<ul>");l<dewaBacajuga.length&&l<20;)document.write('<li><a href="'+relatedUrls[e]+'">'+dewaBacajuga[e]+"</a></li>"),e<dewaBacajuga.length-1?e++:e=0,l++;document.write("</ul>")}
//]]>
</script> </b:if>


Selanjutnya, cari dan ganti kode <data:post.body/> dengan kode di bawah ini
Kemungkinan akan ada beberapa kode <data:post.body/> dalam template Anda, tergantung template yang digunakan, maka coba saja satu persatu sampai artikel terkait muncul.
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='dewa-bacajuga'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

Untuk menambah jumlah judul yang muncul, silakan ubah nilai max-results=3&quot;  sesuai dengan keinginan Anda. Tapi saran saya cukup untuk 3 saja, karena script ini mempengaruhi kecepatan blog. Dan silakan atur CSS sesuai keinginan Anda.

Saatnya untuk melihat hasil dari tutorial diatas. Silakan check tiap postingan di blog Anda. Apakah script baca juga otamatisnya sudah muncul. Jika belum, coba periksa lagi prosesnya dari awal.


Demikian tutorial kali ini tentang Cara Memasang Related Post (baca Juga) di Dalam Postingan Blog, Semoga bisa diterapkan dengan baik diblog Anda.

Sumber : https://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter