Showing posts with label releated. Show all posts
Showing posts with label releated. Show all posts
Sunday, February 5, 2017
Cara Membuat Artikel Terkait Releated Article di Bawah Postingan PART 1
Cara Membuat Artikel Terkait Releated Article di Bawah Postingan PART 1
Salam Blogger, Artikel bloggingpasuruan kali ini tentang Cara Membuat Artikel Terkait ( Releated Article ) di Bawah Postingan . Widget yang akan saya ketengahkan ini dilengkapi Auto Read More atau Baca Selengkapnya, Manfaat dengan menambahkan Artikel Terkait di blog Anda sangat banyak, selain sebagai internal link antara artikel di blog juga sebagai menu navigasi artikel yang akan menampilkan posting yang terkait sehingga memudahkan pengunjung dalam menjelajahi blog Sobat. Selain itu juga Artikel Terkait dapat meningkatkan lalu lintas di blog Anda dan mengurangi tingkat bouncing di blog sehingga hal ini akan menjadi nilai plus buat blog Anda. Pada artikel sebelumnya saya juga sharing tentang Cara Membuat Artikel Terkait ( Releated Article ) di Bawah Postingan #PART-1
Langkah-langkah Membuat Widget Artikel Terkait :
1. Login ke Blogger>> Dashboard Blog Anda
2. Klik Template >> dan Pilih Edit HTML
3. Cari tag </head>, tekan Ctrl+F untuk mempermudah pencarian kodenya.
4. Letakkan Kode dibawah ini sebelum kode </head>
<b:if cond=data:blog.pageType == "item">
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type=text/javascript>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = "selengkapnya";
eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){returnw+};c=1};while(c--)if(k[c])p=p.replace(new RegExp(b+e(c)+b,g),k[c]);return p}(2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==1o){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=H-A 1u>";h+="<a v="+5[r]+" U=1v I=J A="+4[r]+"><1w 1x="+b[r]+" /></a>";h+="<a v="+5[r]+" I=J>"+4[r]+"</a>";h+="<17 G=H-18>"+9[r]+" ... <a v="+5[r]+" I=J>"+1y+"</a><17 G=H-18>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}},62,98,||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write.split(|),0,{}))
//]]></script>
</b:if>
Kustomisasi
? var relmaxposts = 5; Keterangan jumlah tampilan postingan ( rubah menurut selera )
? var numchars = 150; Keterangan jumlah karakter huruf ( rubah menurut selera )
? Untuk mengubah style dari widget seperti ukuran huruf, warna, dll. Edit pada script yang ada didalam tag <style> ... </style>
5. Selanjutnya cari tag dibawah ini, gunakan Crtl+F untuk memudahkan pecarian :
<data:post.body/>
6. Kemudian salin script dibawah ini tepat dibawahnya, dalam pencarian Anda akan menemukan beberapa script yang sama gunakan script yang kedua atau ketiga.
<b:if cond=data:blog.pageType == "item">
<div id=related_posts style=margin-top:35px;>
<h4 style=color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;>Artikel Terkait</h4>
<b:loop values=data:post.labels var=label>
<script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50" type=text/javascript/>
</b:loop>
<ul id=relpost_img_sum>
<script type=text/javascript>relatpost();</script>
</ul>
</div>
</b:if>
Keterangan
Judul pada Artikel Terkait kata katanya bisa Sobat rubah menurut selera
Simpan dan lihat hasilnya
Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat Artikel Terkait di Blogger Modifikasi Keren. Semoga bermanfaat dan terima kasih...
Available link for download
Saturday, December 31, 2016
Cara Membuat Artikel Terkait Releated Article di Bawah Postingan PART 3
Cara Membuat Artikel Terkait Releated Article di Bawah Postingan PART 3
Salam Blogger, Kali ini bloggingpasuruan kembali berbagi tutorial “Cara Membuat Artikel Terkait ( Releated Article ) di Bawah Postingan #PART-3 yang biasanya ditempatkan di bawah suatu postingan berdasarkan label postingan juga. Tujuan dari pemasangan Widget ARTIKEL TERKAIT di Bawah Posting Blog ini adalah, selain mempercantik tampilan blog, juga untuk mempermudah pengunjung Blog ( sebagai navigasi ) dan meningkatkan pengunjung/SEO di blog yang Sobat Blogger buat.
Catatan : sebelum mengotak-atik template blog, backup terlebih dahulu agar aman jika terjadi kesalahan. Berikut tutorial Cara Membuat Widget ARTIKEL TERKAIT di Bawah Posting :
1. Login ke Blogger Anda, klik Templatekemudian klik Edit HTML.
2. Copy kode berikut dan tempat di atas </head>, ganti link gambar berwarna merah sesuai keinginan Anda, atau tidak diganti juga tidak apa-apa.
<!-- Artikel Terkait Oleh www.bloggingpasuruan.blogspot.com -->
<style>
#related-posts { float : left; width : auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaEZGojdHHPQTqNFLnmOVxNqIZcSikvYlOjD7KkXYirXVPA4VXyCk8D0jFc_VZe9p6NHJL5EZnjpB1I-9qpEDi3CyXmidQ97Jtgix_315_EihYVL3CF28xZhNJn9ICB2iIyl86GRFgbFU/s1600/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }
</style>
<script src=https://artikel-terkait-by-bloggingpasuruan.googlecode.com/svn/artikelterkait.js type=text/javascript/>
<!—Artikel Terkait Oleh www.bloggingpasuruan.blogspot.com-->
3. Setelah itu cari kode <data:post.body/>atau <div class=post-body> dan letakkan script berikut di bawahnya. Atau, jika Anda sudah ahli dalam mengedit template blog, Anda bisa menempatkan bebas dimana saja, asalkan diletakan di bawah postingan. Ganti kata “ Artikel Terkait “ sesuai kata-kata selera Anda.
<!-- Artikel Terkait -->
<b:if cond=data:blog.pageType == "item">
<div id=related-posts>
<font face=Arial size=3><b>Artikel Terkait : </b>
</font><font color=#FFFFFF><b:loop values=data:post.labels var=label><data:label.name/>
<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=5" type=text/javascript/>
</b:if></b:loop></font>
<script type=text/javascript> removeRelatedDuplicates(); printRelatedLabels();</script>
</div></b:if>
<!-- Artikel Terkait -->
4. Simpan ( Save ) template dan lihat hasilnya.
Saya akan sangat berterima kasih jika Sobat Blogger berkenan untuk berkomentar, memberikan saran atau pertanyaan untuk artikel Cara Membuat Artikel Terkait ( Releated Article ) di Bawah Postingan #PART-3. Semoga bermanfaat...
Available link for download
Monday, December 12, 2016
Cara Membuat Artikel Terkait Releated Article di Bawah Postingan PART 2
Cara Membuat Artikel Terkait Releated Article di Bawah Postingan PART 2
Salam blogger, Sebelumnya saya pernah mempublikasikan cara membuat widget artikel terkait di bawah posting Blog, Sebenarnya yang membedakan dengan tutorial saya kali ini “Cara Membuat Artikel Terkait ( Releated Article ) di Bawah Postingan #PART-2” hanya pada bentuk tampilannya saja.
Bagaimana Cara Membuat Widget Artikel Terkait bawah Posting Blog Sobat
1. Masuk ke Dashboard Blogger >> Template >> Edit HTML dan kemudian gunakan (CTRL + F) untuk mencari tag </ head> di template Anda.
2. Tambahkan kode di bawah ini hanya sebelum / Di atas penutupan tag </head>
<!--Bloggingpasuruan-Related-Posts-Mulai-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohXT3XFYCpDFmw6wJjC3dDAc-erLMgSukpNb1VHAu1aYIDHso7xHIqffQ4LsJ7mqUbpQulLWdSkUKxBah6iG7kHrMUmwB3hFklgPI8owSCmq4xkoMjvzOAHRpVwdlEohry5rFgFHupA/s200/greentickbullet.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src=https://bloggingpasuruan-blogspot-com- artikelterkait.googlecode.com/svn/ARTIKEL_TERKAIT.js type=text/javascript/>
<!--Bloggingpasuruan-Related-Posts-Akhir-->
3. Sekarang mencari baris kode ini:
<data: post.body />
4. Dan setelah baris tersebut, sisipkan kode ini:
<!--BLOGGINGPASURUAN-RELATED-POSTS-MULAI-->
<b:if cond=data:blog.pageType == "item">
<div id=related-posts>
<font face=Arial size=3><b>Related Posts: </b></font><font color=#FFFFFF><b:loop values=data:post.labels var=label><data:label.name/><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=5" type=text/javascript/></b:if></b:loop> </font>
<script type=text/javascript> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
<!--BLOGGINGPASURUAN-RELATED-POSTS-AKHIR-->
5. Catatan: Jika Anda memiliki menggunakan Auto Read More Hack pada blog Anda dan Anda memiliki lebih dari satu <data: post.body /> dalam template blog Anda, mencari salah satu kode di bawah ini dan kemudian melewati kode pada langkah 4 di atas setelah itu.
<p class = post-footer-line post-footer-line-1>
atau
<div class = post-footer-line post-footer-line-1>
atau
<div class = footer>
6.Simpan template Anda.
Related Post Widget Konfigurasi
Untuk mengubah total jumlah posting yang ditampilkan di bawah posting blog Anda, Edit max-results = 5 dengan jumlah dari posting terkait yang Sobat inginkan.
Simpan dan Selesai
Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Membuat Widget ARTIKEL TERKAIT dibawah Postingan BLOG. Semoga bermanfaat dan terima kasih..
Available link for download
Subscribe to:
Posts (Atom)