Cara Memasang Related Artikel Terkait Di Dalam Postingan
Baiklah Kali ini aku akan membuatkan tips blogger mengenai bagaimana cara menciptakan Related artikel terkait untuk di tengah ataupun didalam postingan. Banyak sekali kegunaan dan keunggulan dari meletakkan artikel terkait di tengah postingan.
Pertama, Mempunyai presentasi klik yang lebih tinggi dari pada related artikel yang berada di bawah postingan. Karena biasanya orang atau para pembaca melihatnya sangatlah sedikit bahkan tidak lebih dari 70%.
Ketiga, Bisa digabungkan dengan script iklan.
Cara menciptakan related artikel ini cukup mudah. Anda hanya peru mengikuti isyarat yang akan aku berikan beriukut ini:
1. Seperti biasa buka blogger, kemudian masuk ke tema dan pilih edit html. Copy dan pastekan script berikut ini diatas </head>
2. Search kode <data:post.body/> (Yang Ketiga Biasanya), tapi bila tidak muncul coba satu persatu saja.
3. Agar tampilannya dapat di kustomisasi anda dapat menambahkan script CSS berikut ini pada template anda dengan cara copy scriptnya sehabis itu letakkan sebelum kode ]]></b:skin>. Disini ada 3 desain yang akan aku berikan dan silahkan anda pilih desain yang mana yang sesuai untuk anda.
4. Silahkan Simpan template tapi jangan di tutup dulu, tunggu sehabis anda melihat alhasil sudah bekerja maka sudah dapat anda tutup.
Oke, Sekian saja tutorial or tips mengenai bagaimana cara menciptakan related artikel atau artikel terkait untuk di dalam postingan. Sebelumnya aku menutup, terima kasih kepada arlina deisgn yang jadi inspirator artikel ini.
Sumber https://oremagz.blogspot.com/
Pertama, Mempunyai presentasi klik yang lebih tinggi dari pada related artikel yang berada di bawah postingan. Karena biasanya orang atau para pembaca melihatnya sangatlah sedikit bahkan tidak lebih dari 70%.
Kedua, Lebih Seo alasannya termasuk kedalam kategori internal link yang dapat menambah kualitas artikel anda. Kaprikornus dengan ini anda tidak perlu menciptakan internal manual yang sering aku praktekkan sebelum mengetahui cara ini.
Sama halnya dengan related artikel yang biasa, Script ini juga mengamil postingan yang dari satu label yang sama. Untuk anda yang ingin mempraktekkanya aku sarankan untuk memback-up terlebih dahulu template anda, untuk mengantisipasi hal yang tidak diinginkan di kemudain waktu.
Cara menciptakan related artikel ini cukup mudah. Anda hanya peru mengikuti isyarat yang akan aku berikan beriukut ini:
1. Seperti biasa buka blogger, kemudian masuk ke tema dan pilih edit html. Copy dan pastekan script berikut ini diatas </head>
<script type='text/javascript'> //<![CDATA[ var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}} function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}} relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;} function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<3){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;} i++;} document.write('</ul>');document.write();}; //]]> </script>.2. Search kode <data:post.body/> (Yang Ketiga Biasanya), tapi bila tidak muncul coba satu persatu saja.
<div class='inline_wrapper' id='inline_wrapper'> <div class='related-post-by-title'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <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=3"' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </div> <div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById("post1<data:post.id/>"); var obj1=document.getElementById("post2<data:post.id/>"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>3. Agar tampilannya dapat di kustomisasi anda dapat menambahkan script CSS berikut ini pada template anda dengan cara copy scriptnya sehabis itu letakkan sebelum kode ]]></b:skin>. Disini ada 3 desain yang akan aku berikan dan silahkan anda pilih desain yang mana yang sesuai untuk anda.
- Style 1
/* related and ads on middle postpage */ #inline_wrapper{display:block;padding:0;margin:0 auto} .related_inline_wrapper{width:100%;display:block;overflow:hidden} .related-post-by-title{width:60%;position:relative;display:block;border:1px solid #DDD;margin:20px 0} .related-post-by-title ul{padding:7px;list-style:yes} .related-post-by-title h4{display:inline-block;background:#fff;z-index: 99;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700} .related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important} .ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;} .ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;} @media screen and (max-width:600px){.related-post-by-title{width:100%;}}- Style 2
/* Related Post Style 2 */ .related-post-by-title{position:relative;padding:0;margin:15px auto;width:100%;} .related-post-by-title h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5} .related-post-by-title ul{margin:0;padding:0} .related-post-by-title 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} .related-post-by-title ul li:nth-child(odd){background:#fefefe} .related-post-by-title ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)} .related-post-by-title ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s} .related-post-by-title ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} .related-post-by-title a{color:#0383d9;font-size:13px;margin:0 0 0 30px;} .related-post-by-title a:hover{color:#0383d9;text-decoration:underline} .related-post-by-title 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)}}- Style 3
/* Related Post Style 3 */ .related-post-by-title{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)} .related-post-by-title h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%} .related-post-by-title ul{margin:0;padding:0} .related-post-by-title ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-post-by-title ul li:before{content:'\f0c8';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} .related-post-by-title ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;} .related-post-by-title a{color:#000;font-size:14px;margin:0 0 0 30px;} .related-post-by-title a:hover{color:#0383d9;} .related-post-by-title ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-post-by-title{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-post-by-title h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-post-by-title a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c} .related-post-by-title ul li{padding:5px 0} .related-post-by-title ul li:before,.related-simplify ul li:hover:before{display:none}}4. Silahkan Simpan template tapi jangan di tutup dulu, tunggu sehabis anda melihat alhasil sudah bekerja maka sudah dapat anda tutup.
Oke, Sekian saja tutorial or tips mengenai bagaimana cara menciptakan related artikel atau artikel terkait untuk di dalam postingan. Sebelumnya aku menutup, terima kasih kepada arlina deisgn yang jadi inspirator artikel ini.