-->






Iklan

Cara Membuat Link Baca Juga di Postingan Web

Cara membuat Link Baca Juga di Postingan atau cara membuat link baca juga di blog/web atau cara menampilkan baca juga di blog , untuk membuat kolom/link baca juga di postingan ini sangat mudah silahkan ikuti pandua dari jasa web murah meriah ini.

cara membuat link baca juga

Membuat link baca juga di sela-sela postingan ini biasanya di gunakan oleh situs-situs berita seperti kompas.com tribunnews , detik,com , liputan6.com , merdeka.com dan yang lainya.
Fungsi atau kegunaan link baca juga ini menurut saya juga sangat bagus diterapkan di post-post web/blog karena bisa mempermudahkan pembaca untuk melanjutkan bacaan yang sedang di bacannya , sehingga sebuah artikel post bisa selesai di baca semuanya.

Ok kawan-kawan mari kita mulai caranya membuat link baca juga di tengah-tengah postingan

1.buka blog/web anda masing-masing kemudian masuk ke dashboard blogger
2.pilih tema " jika sebelum nya pengen mengunduh template nya silahkan klik unduh di kanan atas ) fungsinya untuk jaga-jaga jika nanti anda tidak benar memasukan kode link baca juga bisa anda kembalikan template anda.
3.selanjutnya klik edit HTML
4.kopi kode ke 1 di bawah ini dan pastekan di atas kode ]]></b:skin> atau di atas kode </style>

kode ke 1

.post-terkait {position:relative;background:#D8D8D8;padding:0;margin:10px 15px 0 0;float:left;width:640px;border:0px solid #1b71bc} .post-terkait h4{background:#A4A4A4 !important;padding:5px 0 !important;margin:0;text-align:left !important;font-size:17px !important;font-weight:400;text-transform:uppercase;color:#fff !important} .post-terkait ul {margin:0;padding:0} .post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important} .post-terkait ul li:last-child{border:none !important} .post-terkait a {color:#0000ff;font-size:16px !important} .post-terkait a:hover {text-decoration:underline}


5.kopi lagi kode ke 2 di bawah ini dan pastekan di atas kode </head> atau &lt;/head&gt;


kode ke 2

 <style type="text/css">
/*Artikel Terkait Tengah Postingan*/
.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
.bacajuga ul{padding:11px 41px 0;list-style:none}
.bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
</style>
<script type="text/javascript"> 
//<![CDATA[ 
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}('2 4=g f();2 9=0;2 6=g f();d z(m){c(2 i=0;i<m.u.5.3;i++){2 5=m.u.5[i];4[9]=5.v.$t;c(2 k=0;k<5.h.3;k++){b(5.h[k].A==\'y\'){6[9]=5.h[k].x;9++;C}}}}d B(){2 7=g f(0);2 8=g f(0);c(2 i=0;i<6.3;i++){b(!q(7,6[i])){7.3+=1;7[7.3-1]=6[i];8.3+=1;8[8.3-1]=4[i]}}4=8;6=7}d q(a,e){c(2 j=0;j<a.3;j++)b(a[j]==e)p M;p L}d D(){2 r=s.K((4.3-1)*s.I());2 i=0;n.l(\'<o>\');E(i<4.3&&i<F){n.l(\'<w><a x="\'+6[r]+\'" J ="G" v="\'+4[r]+\'">\'+4[r]+\'</a></w>\');b(r<4.3-1){r++}H{r=0}i++}n.l(\'</o>\')}',49,49,'||var|length|relatedTitles|entry|relatedUrls|tmp|tmp2|relatedTitlesNum||if|for|function||Array|new|link||||write|json|document|ul|return|contains||Math||feed|title|li|href|alternate|related_results_labels|rel|removeRelatedDuplicates|break|printRelatedLabels|while|20|_blank|else|random|target|floor|false|true'.split('|'),0,{}))
//]]> 
</script>


6.kopi kembali kode ke 3 di bawah ini dan pastekan di bawah kode <data:post.body/>

kode <data:post.body/> dalam template anda biasanya ada 3 - 5 kode cari kode <data:post.body/> yang di bagian Post

kode ke 3

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<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>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'>

</div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

7.selanjutnya simpan perubahan template web anda.
8.selesai.

Keterangan :
1.jika nanti hasilnya postingan anda menjadi dobel silahkan hapus salah satu kode  <data:post.body/>
2.untuk merubah tampilan warna tulisan , warna background , ukuran panjang kolom nya silahkan ganti di rangkaian kode ke 1.

Untuk merubah warna background atau warna tulisanya bisa mengunjungi kode warna HTML di DISINI

Sampai disini tutorial blogger Cara membuat link baja juga di dalam postingan , semoga bermanfaat jika masih ada kendala silahkan tanya di kolom komentar di bawah ini ya...

Komentar

Tampilkan

Komputer

+