Tutoring Content: Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Cara Menyulap Gambar Header Blog Berjalan Otomatis

Sebelumnya, anda telah membaca bagaimana Cara Membuat Judul Blog Bisa Berjalan di Header. Tapi sekarang, bagaimana pula caranya agar gambar header yang berjalan seperti contoh diatas? Silahkan ikuti beberapa langkah dibawah ini:

Seperti biasa silahkan login dulu ke halaman dasbor Blogger anda. Setelah dasbor blog anda terbuka, lihat pada menu-menu yang terdapat di sebelah kiri. Tampilannya seperti ini:

Sekarang kliklah pada menu Tema, sehingga terbuka tampilan seperti gambar di bawah ini:

Nah seperti gambar diatas kliklah pada tombol Edit HTML, sehingga terbuka form edit HTML template anda seperti ini:

Nah di sinilah semua script atau kode yang membentuk template anda tersimpan, termasuk kode untuk mengatur tampilan header blog anda. Sekarang carilah kode seperti dibawah ini, yang letaknya satu rumpun dengan kode header:

<!--Show the image only-->

Yang dibawahnya ada kode seperti ini:

<div id='header-inner'>

#Gratis, AdSense, Blogger, CSS, Free, HTML, JavaScript, JQuery, Tutorial, Website, Widget

Tutorial Lengkap Cara Membuat Iklan Penelusuran Bersponsor Google Adsense di Blog

Maret 16, 2020 No comments

Sebelumnya apakah anda pernah melihat dimana ada iklan yang bernama penelusuran bersponsor di situs - situs yang anda kunjungi, dan ya pada kali ini artikel kita akan mengulah habis apa itu iklan penelusuran dan cara membuat serta memasangnya.

Apa itu Iklan Penelusuran ?

Iklan Penelusuran atau yang juga sering juga di istilah lain kan dengan beberapa teman blogger kita sebagai iklan tulisan, bersusun, iklan link dan sebagainya adalah iklan berbentuk seperti susunan link penelusuran.

Iklan Penelusuran ini bisa anda dapatkan dengan mudah di akun adsense lama atau tahun 2018, karena baru - baru ini pada tahun 2019 iklan ini sudah tidak bisa di akses dari dashboard google adsense yang versi terbaru.

Tapi, tak usah berkecil hati untuk itulah saya membuat tutorial berikut ini agar anda bisa membuat iklan penelusuran bersponsor dengan penjelasan lengkap dan mendetail, berikut ini adalah beberapa manfaat membuat iklan penelusuran.

Kelebihan Iklan Penelusuran

Banyak manfaat dan juga kelebihan yang bisa kita peroleh dengan membuat iklan penelusuran, beberapa diantaranya akan saya sebutkan dibawah ini.

Meningkatkan Click Rate Google Adsenae, yang berdampak
Meningkatkan penghasilan seorang blogger, yang membuat
Anda senang dan bahagia, serta
Iklan yang ringan dan sangat Responsif
Serta enak dilihat oleh pembaca

Contoh atau Preview Iklan Penelusuran

Diatas anda bisa lihat contoh iklan penelusuran dari salah satu blog saya lainnya yang bisa dengan mudah anda kunjungi di www.chord.blogbot.site, blig yang berisi seputar lagu, music video dan semacamnya.

Selain kelebihan dan manfaat yang telah saya sebutkan diatas iklan penelusuran memiliki tingkat klik rate yang lebih besar dan lebih baik dari iklan pada umumnya karena penyesuaian dan tampilannya yang mungkin tidak bisa dibedakan dengan tampilan iklan pada umumnya.

Cara Membuat Iklan Penelusuran Adsense

Nah telah sampailah kita pada inti dari semua perbincangan singkat kita pada kesempatan kali, berikut ini saya akan membagikan tutorial mudah cara membuat iklan penelusuran hanya dengan beberapa detik saja.

1. Silahkan anda akses google adsense anda jika anda memiliki akun lama tahun 2018, dan pilih iklan link atau penelusuran.

2. Jika tidak ditemukan next ke tutorial kedua, yakni copy kode berikut ini.

<ins class="adsbygoogle iklan_susun" style="display:block" data-ad-client="ca-pub-**kodeanda**" data-ad-slot="**kodeanda**" data-ad-format="link"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script&gt

3. Selanjutnya isi tulisan **kodeanda** dengan kode iklan di google adsense anda.

4. Buka dahboard blogger anda, lalu klik layout atau mode html.

5. Letakkan kode iklan susun atau penelusuran tersebut di mana saja yang anda inginkan.

Penutup

Demikian informasi seputar tutorial cara membuat iklan susun atau iklan penelusuran link di google adsense selanjutnya jika ada pertanyaan yang berkaitan dengan tutorial pada kesempatan kali ini silahkan tanyakan dibawah ini.

Kotak kritik dan saran terbuka bagi anda jika ada beberapa kesalahan baik pengucapan kata dan sebagainya, mohon dukungan dari sobat blogger lainnya.

#Blogger, Blogger, Extension & Plugin, JQuery, Widget

5 Widget Recent Post Keren Untuk Blogger

Maret 03, 2020 No comments

Kebanyakan tampilan widget Recent Post (Artikel Terbaru) kurang menarik. Kadang kita juga bosan melihat tampilan sederhana seperti biasanya. Ingin merubah tampilan widget recent post? Tenang Sobat...

Sekarang saya akan berbagi 5 model beserta penampakan gambar widget Recent Post (Artikel Terbaru). Tertarik?

Ini kode 5 Widget Recent Post Keren Untuk Blogger

1. Recent Post Style 1

Kode

2. Recent Post Style 2

Kode

<div class="recentpoststyle"><script type="text/javascript">function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}</script><script type="text/javascript">var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts"></script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><style type="text/css">.recentpoststyle {counter-reset: countposts;list-style-type: none;}.recentpoststyle a {text-decoration: none;color: #49A8D1;}.recentpoststyle a:hover {color: #000;}.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}</style></div>

3. Recent Post Style 3

Kode

4. Recent Post Style 4

Kode

5. Recent Post Style 5

Kode

Cara Pemasangan

1. Login ke akun anda.

2. Pilih Tata Letak => Tambah Gadget
3. pilih HTML
4. Copy paste salah satu kode widget yang ingin anda pasang diblog
5. Simpan & lihat hasilnya

Sekian dulu artikel kali ini. Selamat Berkreatifitas & Semoga Artikel Ini Bermanfaat.

AdSense, Blogger, Tutorial, Widget

Tutorial Lengkap Cara Memasang Adblock Killer Pada Blog

Februari 29, 2020 No comments

Namun apa yang akan saya bagikan kali ini berbeda dengan script yang dibagikan Kang Ismet di blognya tetapi masih memiliki fungsi yang sama yaitu mematikan fungsi dari ekstensi Adblock yang menghilangkan banner iklan pada situs yang memasangnya.

Disini anda hanya perlu menambahkan script di widget blog maka kode akan berjalan secara otomatis jika anda memakai ekstensi adblock pada browser yang anda pakai.

Langsung saja, berikut cara penerapannya :

Buka Blogger > Tata Letak > Klik Tambahkan Gadget > Klik HTML/JavaScript

Kemudian salin dan terapkan kode dibawah ini didalamnya

<style scoped='' type='text/css'>#h237{position:fixed !important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:0;width:102%;height:102%;background-color:#fcfcfc;opacity:.99;display:block;padding:7% 0;bottom:0;right:0;z-index:9999!important;}#h237 *{text-align:center;margin:0 auto;display:block;font:bold 14px Verdana,Arial,sans-serif;text-decoration:none}#h237 * a {padding:12px 15px!important;background-color:#f77c6a;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;display:block;margin:15px auto;clear:both;width:20%;transition:all 0.3s ease-out;}#h237 * a:hover {opacity:.9;}#h237 ~ *{display:none}</style><div id="h237">
<span>Mohon Aktifkan Javascript!<a href="http://www.enable-javascript.com/">Enable JavaScript</a></span></div>
<script>window.document.getElementById("h237").parentNode.removeChild(window.document.getElementById("h237"));(function(l,m){function n(a){a&&h237.nextFunction()}var h=l.document,p=["i","s","u"];n.prototype={rand:function(a){return Math.floor(Math.random()*a)},getElementBy:function(a,b){return a?h.getElementById(a):h.getElementsByTagName(b)},getStyle:function(a){var b=h.defaultView;return b&&b.getComputedStyle?b.getComputedStyle(a,null):a.currentStyle},deferExecution:function(a){setTimeout(a,250)},insert:function(a,b){var e=h.createElement("span"),d=h.body,c=d.childNodes.length,g=d.style,f=0,k=0;if("h237"==b){e.setAttribute("id",b);g.margin=g.padding=0;g.height="100%";for(c=this.rand(c);f<c;f++)1==d.childNodes[f].nodeType&&(k=Math.max(k,parseFloat(this.getStyle(d.childNodes[f]).zIndex)||0));k&&(e.style.zIndex=k+1);c++}e.innerHTML=a;d.insertBefore(e,d.childNodes[c-1])},displayMessage:function(a){var b=this;a="abisuq".charAt(b.rand(5));b.insert("<"+a+'><img src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVyG9nk51ZhA5mFBRJkaMlktstxpkoVmV-9PAeSthEvxKMu9W0qQ0GZVbgdaVovx82fUyhTaFhuuFhlLkih5dHRzli9WD2PpWxXggeDT8_-EWr7NIuKX7Cz-TGvzlwpVPpleQbx5y0dn-/s1600/Disable+Adblock.png" height="350" width="699" alt="" /> <a href="JavaScript:window.location.reload()">Reload</a>'+("</"+a+">"),"h237");h.addEventListener&&b.deferExecution(function(){b.getElementBy("h237").addEventListener("DOMNodeRemoved",function(){b.displayMessage()},!1)})},i:function(){for(var a="DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense".split(","),b=a.length,e="",d=this,c=0,g="abisuq".charAt(d.rand(5));c<b;c++)d.getElementBy(a[c])||(e+="<"+g+' id="'+a[c]+'"></'+g+">");d.insert(e);d.deferExecution(function(){for(c=0;c<b;c++)if(null==d.getElementBy(a[c]).offsetParent||"none"==d.getStyle(d.getElementBy(a[c])).display)return d.displayMessage("#"+a[c]+"("+c+")");d.nextFunction()})},s:function(){var a={'pagead2.googlesyndic':'google_ad_client','js.adscale.de/getads':'adscale_slot_id','get.mirando.de/miran':'adPlaceId'},b=this,e=b.getElementBy(0,"script"),d=e.length-1,c,g,f,k;h.write=null;for(h.writeln=null;0<=d;--d)if(c=e[d].src.substr(7,20),a[c]!==m){f=h.createElement("script");f.type="text/javascript";f.src=e[d].src;g=a[c];l[g]=m;f.onload=f.onreadystatechange=function(){k=this;l[g]!==m||k.readyState&&"loaded"!==k.readyState&&"complete"!==k.readyState||(l[g]=f.onload=f.onreadystatechange=null,e[0].parentNode.removeChild(f))};e[0].parentNode.insertBefore(f,e[0]);b.deferExecution(function(){if(l[g]===m)return b.displayMessage(f.src);b.nextFunction()});return}b.nextFunction()},u:function(){var a="ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare.".split(","),b=this,e=b.getElementBy(0,"img"),d,c;e[0]!==m&&e[0].src!==m&&(d=new Image,d.onload=function(){c=this;c.onload=null;c.onerror=function(){p=null;b.displayMessage(c.src)};c.src=e[0].src+"#"+a.join("")},d.src=e[0].src);b.deferExecution(function(){b.nextFunction()})},nextFunction:function(){var a=p[0];a!==m&&(p.shift(),this[a]())}};l.h237=h237=new n;h.addEventListener?l.addEventListener("load",n,!1):l.attachEvent("onload",n)})(window);</script>

Simpan dan lihat hasilnya.

Untuk mengganti gambar serta tulisannya, temukan link gambar berikut pada script di atas.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVyG9nk51ZhA5mFBRJkaMlktstxpkoVmV-9PAeSthEvxKMu9W0qQ0GZVbgdaVovx82fUyhTaFhuuFhlLkih5dHRzli9WD2PpWxXggeDT8_-EWr7NIuKX7Cz-TGvzlwpVPpleQbx5y0dn-/s1600/Disable+Adblock.png

Script akan berjalan jika :

User memasang / mengaktifkan ekstensi Adblock pada browser
User Menonaktifkan Javascript pada situs
User memasang / mengaktifkan ekstensi Anti Adblock Killer pada browser.

Bisa dibilang ini merupakan pengembangan dari Adblock Killer yang dapat menahan ekstensi Anti Adblock Killer

Selamat mencoba dan semoga bermanfaat.

Source : arlinadesign.blogspot.com

Blogger, CSS, HTML, Widget

Tutorial Lengkap Cara Memasang Artikel Terkait di Dalam Postingan

Februari 28, 2020 No comments

Namun sedikit berbeda dari sebelumnya, di sini saya akan memberikan tutorial Cara Memasang Artikel Terkait di Dalam Postingan. Seperti yang saya singgung sebelumnya di artikel Cara Memasang Iklan Adsense di Tengah Postingan bahwa sobat juga bisa memasang kode atau widget lain di dalam kode tersebut, tutorial blogger kali ini pun masih menggunakan kode yang sama. Tutorial ini saya dapatkan dari blog http://www.bungfrangki.com/2015/12/membuat-related-pos-dalam-postingan.html dan telah saya modifikasi kembali disesuaikan dengan style saya.

Manfaat lain yang didapatkan dari memasang artikel terkait di dalam postingan ini yaitu untuk menambah jumlah pengunjung serta meningkatkan kualitas Internal Link di blog sobat.

Bagi yang ingin memasangnya di blog, silakan ikuti langkah-langkah Cara Memasang Artikel Terkait di Dalam Postingan atau lebih tepatnya di tengah konten artikel berikut ini

Cara Memasang Artikel Terkait di Dalam Postingan

1. Buka Blogger > Template > Klik tombol Edit HTML > Tambahkan kode di bawah ini sebelum tag </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

2. Tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify 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-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify 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)}}

Contoh tampilan widget Artikel Terkait Style 1

/* Related Post Style 2 */
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify 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-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Contoh tampilan widget Artikel Terkait Style 2

/* Related Post Style 3 */
.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}
.related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}
.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#fff;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Pastikan di blog sobat sudah memasang Font Awesome agar icon bisa muncul

3. Selanjutnya, cari dan ganti kode <data:post.body/> dengan kode di bawah ini

Di dalam template sobat akan menemukan beberapa kode <data:post.body/> tergantung template yang digunakan, coba satu persatu sampai artikel terkait muncul di dalam halaman artikel

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><p><data:post.body/></p></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/2);
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>

4. Simpan template dan lihat hasilnya.

Jadi dengan memasang kode ini sobat tidak perlu lagi repot-repot memasang link secara manual di artikel blog. Demikian tutorial Cara Memasang Artikel Terkait di Dalam Postingan yang bisa Arlina Design berikan. Terima kasih sudah berkunjung dan semoga bermanfaat.

Blogger, Widget

Tutorial Cara Memasang Artikel Terkait di Blog

Februari 28, 2020 No comments

Di sini saya tidak akan panjang lebar untuk menjelaskan secara rinci fungsi dari artikel terkait ini, karena saya anggap Anda sudah mengerti tentang fungsinya secara garis besar. Oke, langsung saja ikuti caranya di bawah ini.

Cara Memasang Artikel Terkait di Blog

1. Login ke blog > Buka Template > Salin kode di bawah ini sebelum ]]></b:skin> atau </style>

/* WikibLogKu Related Post */
#related_posts{margin-top:20px}
#related_posts h4{color:#fff;background:#3498db;padding:10px;margin:0 0 5px;font-size:110%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;}
#related_img img{float:left;margin-right:10px;width:60px;height:60px;max-width:100%;background:#fff}

2. Kemudian salin kode di bawah ini sebelum </head>

<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQFRNodTslzQntEe2AK4hCRDRYfOgKOnF10-dbTfhDs2fQ0GdkXActIs7tuxLTJh7QxXsmeW3LwtG-zKMLSuw1bmoTvhYkODwLamxulHQyJGgkjiQSWMwl54mJ9_1ois-CGbnSyRYbCKYO/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>

3. Selanjutnya cari kode <data:post.body/> dan letakkan kode di bawah ini, tepat di bawah kode <data:post.body/>

<div id='related_posts'>
<h4>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>

4. Simpan template

Biasanya dalam template terdapat lebih dari 3 kode <data:post.body/> jadi letakkan di bawah kode <data:post.body/> yang ke 2 dan bilah tidak bisa coba letakkan pada kode yang saya maksud satu persatu sampai berhasil.

Demikian Cara Memasang Artikel Terkait di blog, semoga dengan tutorial di atas berhasil diterapkan pada blog Anda.

Tutoring Content

Tutorial Lengkap Cara Menyulap Gambar Header Blog Berjalan Otomatis

Tutorial Lengkap Cara Membuat Iklan Penelusuran Bersponsor Google Adsense di Blog

Apa itu Iklan Penelusuran ?

Kelebihan Iklan Penelusuran

Contoh atau Preview Iklan Penelusuran

Cara Membuat Iklan Penelusuran Adsense

Penutup

5 Widget Recent Post Keren Untuk Blogger

Tutorial Lengkap Cara Memasang Adblock Killer Pada Blog

Tutorial Lengkap Cara Memasang Artikel Terkait di Dalam Postingan

Cara Memasang Artikel Terkait di Dalam Postingan

Tutorial Cara Memasang Artikel Terkait di Blog

Cara Memasang Artikel Terkait di Blog

Popular Posts

Recent Posts

Categories

Unordered List

Text Widget

Pages

Blog Archive

Cari Blog Ini

Video of the day

Laporkan Penyalahgunaan

About the author

Our team

About Us

Formulir Kontak