Cara Menampilkan Jumlah User yang Terdaftar di WordPress

Pernahkah Anda berpikir untuk menampilkan jumlah user yang terdaftar di situs WordPress anda? Terbukti bahwa menunjukkan jumlah user yang terdaftar di situs anda, mendorong orang lain untuk mendaftar juga. Pada artikel kali ini, kita akan mempelajari cara untuk menampilkan jumlah user yang terdaftar di WordPress.

Cara Menampilkan Jumlah User yang terdaftar di wordpress

Metode 1: Menampilkan Jumlah User yang terdaftar dengan plugin

Hal pertama yang dapat anda lakukan adalah menginstal dan mengaktifkan Simple Blog Stats. Setelah aktivasi, Anda harus masuk ke halaman Settings » Simple Blog Stats untuk mengkonfigurasi pengaturan plugin.

Halaman pengaturan

Plugin ini memungkinkan anda untuk menampilkan statistik yang berbeda dari situs WordPress Anda. Anda harus klik pada tab shortcode untuk memperluas dan kemudian gulir ke bawah sampai pada baris "number of users".

Pengaturan penggunaan Shortcode

Anda akan melihat shortcode [sbs_users] dengan dua bidang teks di kedua sisi. Bidang teks ini terdapat HTML plugin akan menambahkan sebelum dan setelah jumlah user.

Secara default, output shortcode kehendak HTML seperti ini:

<span class="sbs-count-users">856</span>

Jika Anda tidak yakin, kemudian copy shortcode [sbs_users]dan klik pada tombol menyimpan pengaturan.

Anda sekarang dapat menambahkan shortcode ini untuk setiap Wordpress posting atau halaman . Anda juga dapat menambahkannya ke widget sidebar.

Metode 2: Menampilkan Jumlah User yang Terdaftar di WordPress dengan Kode Manual

Pada metode ini anda harus menambahkan kode untuk situs WordPress. Jika anda tidak melakukan ini sebelumnya, kemudian lihat panduan tentang cara menyisipkan Cuplikan dari web ke WordPress anda bisa searching di google atau tunggu tutorial kami berikutnya.

Tambahlah kode berikut untuk tema Anda pada file functions.php:

// Function to return user count
function wpb_user_count() {
$usercount = count_users();
$result = $usercount['total_users'];
return $result;
}
// Creating a shortcode to display user count
add_shortcode('user_count', 'wpb_user_count');

Kode ini membuat shortcode [user_count] yang dapat anda gunakan dalam postingan WordPress, halaman, atau widget sidebar anda untuk menampilkan jumlah pengguna.

Function tidak menambahkan format HTML untuk jumlah user dan hanya mengembalikan nomor. Anda mungkin ingin untuk mendesign/membungkus sekitar shortcode HTML menggunakan CSS atau format dasar html. Sebagai contoh:

<p>Join <strong>[user_count]</strong> other users who share your interest:</p>

Preview user-count

 Itu Saja, kami harap artikel ini dapat membantu anda tentang Cara Menampilkan Jumlah User yang Terdaftar di WordPress. Good Luck!!!.

Read more

Cara Menambahkan Form Email Subscribe di blogger

Ketika anda memberikan informasi yang berguna di blog anda, maka beberapa dari pembaca anda ingin mendapatkan update post terbaru dari blog anda. Untuk itu, anda perlu Form Email Subscribe di blog anda, sehingga pengunjung yang tertarik dengan artikel anda dapat dengan mudah mendapatkan update post terbaru dari anda.

Untuk menambahkan Feed Email atau Form Email Subscribe ke blog blogger Anda (blogspot) itu sangatlah mudah, Cukup ikuti langkah-langkah Di bawah.

Demo

• Demo

Cara Menambahkan Form Email Subscribe di blogger

Langkah 1. Login ke Blogger, kemudian pergi ke Tata Letak(Layout) > klik pada link "Add Gadgets" :

Add Gadget

Langkah 2. Dari jendela pop-up, gulir ke bawah dan klik pada gadget "HTML/JavaScript" :

Gadget Html/JavaScript

Langkah 3. Paste kode berikut dalam kotak kosong:

<style>

#feedform{margin-bottom:12px;}

.hl-email:before,.hl-email:after{content: "";

    position: absolute;

    bottom: -3px;

    left: 2px;

    right: 2px;

    height: 1px;

    border-top: none;

    background: #F0F0F0;

    border: 1px solid #ccc;

}

.hl-email:after{left: 4px;

    right: 4px;

    bottom: -5px;

    box-shadow: 0 0 2px #ccc;

}

.hl-email{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzhd5n_UBlmWYhiMXGDULv2daN5yD15Ig3ZNL-U26ZcmDIwspmkgdY_3BXPTN3aBH0xbsD_rp4xfAo-B8cFieZtGKKLl5OVsXqkqcDK6tRT7B0LFf6FWkIuPr3FQIOnHLnpJ2jcz4nIZs/s1600/mail.png) no-repeat 12px 12px ;

width:270px;

background-color:#f0f0f0;

padding:10px 65px 5px;

padding-right:2px;

float:left;

font-size:1.4em;

font-weight:bold;

margin:0 12px 10px 0;

position: relative;

color:#686B6C;

box-shadow:0 0 13px #cecece;

}

.hl-emailsubmit{

background:#9B9895;

cursor:pointer;

color:#fff;

border:none;

padding:3px;

text-shadow:0 -1px 1px rgba(0,0,0,0.25);

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

font:12px sans-serif;

}

.hl-emailsubmit:hover{

background:#E98313;

}

.textarea{

padding:2px;

margin:25px 10px 6px 2px;

background:#f9f9f9;

border:1px solid #ccc;

resize:none;

box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;

width:150px;

color:#666;}

.copyright{text-decoration:none;color:#9A9794;font-size:11px;font-family:calibri;float:right;margin:0 35px 0 0;}

.copyright:hover{color:#000;}

</style>

<div class="hl-email">

Get More Free Article!!!<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=duniatutorials', 'popupwindow', 'scrollbars=yes,width=750,height=520');return true">

<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email here&quot;;}" onfocus="if (this.value == &quot;Enter your email here&quot;) {this.value = &quot;&quot;;}" value="Enter your email here" type="text" />

<input type="hidden" value="duniatutorials" name="uri"/><input type="hidden" name="loc" value="en_US"/>

<input class="hl-emailsubmit" value="Get It!!!" type="submit" />

</form>

<a class="copyright" href="http://duniatutorials.blogspot.com/2016/09/cara-menambahkan-form-email-subscribe.html" target="blank"> feedburner</a>

</div>

Pengaturan Lanjutan (Optional):

• Ganti Teks "Get more free article!!!" yang berwarna biru dengan teks yang anda inginkan.
• Ganti alamat url warna hijau untuk mengubah icon email.
• Untuk mengubah lebar atau text area, peningkatan / penurunan 150px nilai merah 
• Gantikan http://feedburner.google.com/fb/a/mailverify?uri=duniatutorials dengan link atau url feed email Feedburner anda. Anda bisa mendapatkannya dengan mengunjungi akun feedburner anda kemudian arahkan ke "publicize" dan kemudian "Email Subscriptions". 
• Ganti duniatutorials dengan judul feed anda. Terlihat pada akhir link feed anda. Dalam kasus saya itu adalah http://feedburner.google.com/fb/a/mailverify?uri=duniatutorials

Langkah 4. Sekarang Simpan widget dan periksa pada blog anda. Saya rasa itu akan bekerja dan selamat Menikmati!, dan rasakan perbedaannya.

Read more

Cara Membuat Pop Up Facebook Melayang di Samping

Tutorial sebelumnya kita sudah tahu cara membuat Pop Up Facebook like box dimana itu akan tampil di tengah-tengah halaman dilengkapi dengan tombol close. Dalam tutorial ini, saya akan menunjukkan cara membuat pop up Facebook keren melayang dan slide ke kiri pada saat mouseover. 

Demo: Anda dapat melihat pop up Facebook melayang di sisi kanan blog ini:

Demo

• Demo

Membuat Pop Up Facebook Melayang di samping

Langkah 1. Masuk ke akun Blogger anda, pergi ke tab "Template" dan tekan tombol "Edit HTML".

Tab Template on blogger

Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian:

Buka search box on blogger

Langkah 3. Cari (CTRL + F) untuk tag ini:

 </ Head>

Langkah 4. Tambahkan kode berikut sebelum tag di atas </ head>:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </ script>

Langkah 5. Simpan Template

Langkah 6. Pergi ke Layout > Add a Gadget baru > pilih 'HTML / JavaScript' gadget dan paste kode di bawah ini pada kotak HTML:

<style type="text/css">#fbplikebox { display: block; padding: 0; z-index: 99999; position: fixed; background: #ffffff;}
.fbplbadge { background-color: #3B5998; display: block; height: 150px; top: 50%; margin-top: -75px; position: absolute; left: -47px; width: 47px; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoT5E9isxmWDHXYEdJEgpBVJReWKMUStOpg7-mCskUYQfZ4UXQTc6wUsJ0qoh7w6ihl3Cb7KbaKd-hjT4TSfdtNHOKHc6Noo3aE41iUa7bnpdhzJttfVG889feNHI7OflHbq8mArLGyww/s1600/vertical-right.png"); background-repeat: no-repeat; overflow: hidden; -webkit-border-top-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}</style><script type="text/javascript">/*<![CDATA[*/ (function(w2b){ w2b(document).ready(function(){ var $dur = "medium"; // Duration of Animation w2b("#fbplikebox").css({right: -250, "top" : 100 }) w2b("#fbplikebox").hover(function () { w2b(this).stop().animate({ right: 0 }, $dur); }, function () { w2b(this).stop().animate({ right: -250 }, $dur); }); w2b("#fbplikebox").show(); }); })(jQuery);/*]]>*/</script><div id="fbplikebox" style="display:none;"> <div class="fbplbadge"></div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe></div>

Langkah 7. Ganti teks YOUR-FACEBOOK-PAGE dengan Url fanspage facebook anda. Kemudian, Anda akan harus mengganti karakter berikut di URL, sebagai berikut:

Ganti simbol : dengan:

%3A

Ganti simbol / dengan:

%2F

Misalnya, fan page Facebook dari blog ini:

https://www.facebook.com/duniatutorials

Setelah mengganti simbol di atas, fanspage Facebook akan terlihat seperti ini:

https%3A%2F%2Fwww.facebook.com%2Fduniaturorials

Pengaturan lanjutan (opsional):

• Untuk mengubah warna latar belakang dari kotak kipas, ganti #ffffff yang berwarna merah. anda dapat memilih warna favorit menggunakan ini Color Code Generator .
• Untuk mengubah warna lencana Facebook, ganti kode hex yang berwarna #3B5998 dengan kode anda sendiri.
• Untuk mengubah lebar dan tinggi kotak Facebook, mengubah nilai-nilai warna merah ( 250)

Langkah 8. Sekarang Simpan gadget/widget fanspage Facebook like boxini dengan menekan tombol 'Simpan'.

Recommend: 5 Cara Cepat Meningkatkan Like Facebook Menggunakan WordPress

GOOD LUCK!!!

Read more

Cara membuat Simple Related Post di blog

Dalam tutorial sebelumnya tentang Widget Related Post, kita telah menjelaskan bagaimana cara menambahkan Related Posts widget yang akan menampilkan related post dengan thumbnail dari kategori atau label yang sama, berdasarkan pada label yang diberikan, ini akan muncul pada akhir posting blog anda. Jika anda lebih suka memunculkan widget related post diatas postingan silahkan saja. Tapi kali ini kita akan memunculkannya di bawah postingan dengan versi yang sederhana dan menarik yang hanya akan menampilkan judul posting.

pic demo

Jika anda tertarik dengan kesederhanaan dari simple related post diatas dan ingin menambahkannya di blog anda, silahkan ikuti langkah-langkah dibawah ini dengan benar:

Cara menambahkan Widget Related Post untuk Blogger

Langkah 1. Terlebih dahulu masuk ke dashboard blogger, kemudian masuk ke tab 'Template' dan tekan tombol 'Edit HTML'.

Langkah 1

Langkah 2. Setelah template editor terbuka, klik di mana saja pastikan di dalam area kode dan tekan tombol CTRL + F, kemudian ketik tag berikut di dalam kotak pencarian ( tekan Enter untuk menemukannya):

</head>

membuka kotak pencarian di editor template blogger

Langkah 3. Tepat di atas tag </ head>, tempelkan kode dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
margin: 15px 0px;
}
#related-posts h2 {
font-size: 27px;
font-weight: normal;
color: #fff;
text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 13px;
color: #949494;
text-transform: capitalize;
border-bottom:1px dotted #E2E2E2;
display:block;
padding:13px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #F4F4F4;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #f9f9f9;
border-left: 5px solid #f2f2f2;
}
#related-posts li {
padding: 0px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script></b:if>

Sesuaikan Widget Simple Related Posts untuk Blogger

• Untuk mengubah ukuran (27px) dan warna (#fff) pada judul 'Related Posts', ubah nilai-nilai yang berwarna merah. 
• Untuk warna link related posts, ganti nilai # 949494 hijau. 
• Untuk mengubah warna latar belakang, ganti warna #f9f9f9 hex warna ungu (Anda bisa menggunakan kode generator Color ini untuk memilih warna favorit anda). 
• Untuk warna latar belakang pada mouseover/hover, ubah nilai # F4F4F4 berwarna biru. 

Langkah 4. Sekarang cari (CTRL + F) kode pada baris di bawah ini:

<b:includable id='postQuickEdit' var='post'>

Langkah 5. temukan tag </ b: includable> di atas kode yang kita cari dan kita temukan - lihat screenshot untuk bantuan lebih lanjut: 

Bantuan lebih lanjut

Langkah 6. Tepat di atas </ b: includable> pastekan kode di bawah:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://duniatutorials.blogspot.com/2016/09/cara-membuat-simple-related-post-di-blog.html" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>

Catatan: Untuk mengubah jumlah related posts maksimum untuk setiap label, ubah "nilai 5 dari" max-results = 5 

Langkah 7. Simpan update dengan mengklik tombol 'Save Template', silahkan lihat blog anda dan klik salah postingan untuk melihat widget simple related post. Hanya itu!!!

Related Posts: Widget Related Posts dengan Thumbnail dan summary untuk Blogger

Jika ada error silahkan periksa dengan seksama setiap langkah diatas!!!, jangan lupa untuk meninggalkan komentar anda di kolom komentar!!!

Read more

Widget Related Posts dengan Thumbnail dan Ringkasan untuk Blogger

Ada beberapa tutorial cukup tua di mana Anda telah melihat metode yang berbeda untuk menampilkan Post yang Terkait di Blogger seperti widget Related Post dengan thumbnail.

Tutorial kali ini, kami akan menunjukkan cara untuk menerapkan widget Related Posts yang benar-benar mengagumkan yang akan muncul di bawah semua postingan blog Anda.

Jika Anda ingin mendapatkan gambaran bagaimana tampak seperti, silakan kunjungi demo blog ini .

Sekarang mari kita lihat bagaimana cara menambahkan Widget Related Posts dengan thumbnail dan cuplikan di Blogger :

Menambahkan Widget Related Posts dengan Cuplikan ke Blogger Posts

Langkah 1. Buka Blogge Dashboard, pergi ke Template dan klik Edit HTML

Langkah 2. Klik di mana saja di dalam area kode dan kemudian tekan CTRL + F untuk membuka kotak pencarian Blogger.

Langkah 3. Ketik atau paste tag ini di dalam kotak pencarian dan tekan enter untuk menemukannya:

</head>

Setelah Anda menemukannya, sisipkan script ini tepat di atas itu:

<script type='text/javascript'>//<![CDATA[var relatedTitles = new Array();var relatedUrls = new Array();var relatedpSummary = new Array();var relatedThumb = new Array();var relatedTitlesNum = 0;var relatedPostsNum = 4; // number of entries to be shownvar relatedmaxnum = 75; // the number of characters of summaryvar relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMD97abdY9w3ccb3SxQNMU59uvDCBWRGjq56hWQC_PtTDnAbKJMFlxx2SLCsdYx905NkBDnROvMVIwYqB1QFjuZiB9oq-Hbkcl4a-kNfxHr8hQXt10NkXCZeBhCni0Cgvb3_3RrbRgAkIb/s1600/no_image.jpg"; // default picture for entries with no imagefunction readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1}//]]></script>

Catatan:

- Untuk mengubah jumlah posting yang ditampilkan, Ubah nilai merah (4)

- Untuk mengubah jumlah karakter yang akan ditampilkan dalam ringkasan posting, memodifikasi nilai hijau (75)

- Untuk mengubah default pic untuk posting tanpa gambar, tambahkan URL Anda bukan yang ditandai dengan warna biru

Langkah 4. Sekarang kita menambahkan script, kita perlu menambahkan CSS. Hanya paste kode berikut di atas tag <head /> :

<style>.relatedsumposts {padding: 0px 10px;text-align: center;/* width of the related posts area */width: 120px;float:left;margin-bottom:15px;border-right: 1px dotted #E5E5E5;display: inline-block;}.relatedsumposts h6 {margin: 5px 0;}.relatedsumposts h6 a {/* link properties */color: #linkcolor;text-transform: uppercase;font-size:12px;}.relatedsumposts img {/* thumbnail properties */height: 82px;width: 82px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.relatedsumposts p {/* summary properties */border-top: 1px dotted #E5E5E5;border-bottom: 1px dotted #E5E5E5;color: #summarycolor;font-size: 10px;height: 4em;line-height: 1;margin: 5px 0 0;padding: 5px 0 15px 0;}#relatedpostssum {width: 100%;}.relatedpoststitle {font-size: 19px;margin-bottom:15px;}</style>

Menyesuaikan Posting terkait Widget:

- Memodifikasi nilai merah ( 120px ) untuk menyesuaikan lebar area widget

- Ganti #linkcolor dengan nilai hex warna untuk mengubah warna judul posting

- Jika Anda ingin mengubah ukuran thumbnail, Ubah nilai yang ditandai dengan warna Ungu( 82px )

- untuk menentukan kebulatan perbatasan, memodifikasi nilai yang berwarna orange (50%)

- untuk mengubah warna potongan pos, perubahan #summarycolor dengan warna nilai hex

Langkah 5. Selanjutnya, pencarian (CTRL + F) untuk potongan kode berikut:

<b:includable id='postQuickEdit' var='post'>

Ketika Anda menemukannya, klik tanda panah ke samping untuk memperluas kode dan gulir ke bawah sampai Anda menemukan </ b: includable>

- lihat screenshot untuk bantuan lebih lanjut:

Langkah 6. Hanya ATAS tersebut </ b: includable> tag, tambahkan berikut kode html:

<!-- Related Posts with Thumbnails Code Start--><b:if cond='data:blog.pageType == &quot;item&quot;'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/></b:loop>  <div class='post-footer-line post-footer-line-4'>   <div class='relatedpoststitle'>RELATED POSTS</div><div id='relatedpostssum'>      <script type='text/javascript'>showrelated();</script>    </div>    <div style='clear:both;'/>  </div></b:if><!-- Related Posts with Thumbnails Code End-->

Langkah 7. Klik pada tombol "Save Template" untuk menyimpan perubahan dan Anda selesai!

Catatan: jika anda melihat 'undefined' pesan, pastikan bahwa Anda telah menambahkan label yang tepat untuk postingan Anda -yang dapat ditemukan setidaknya satu posting, jika script tidak mungkin bisa menemukan posting terkait untuk entri tersebut.

Read more

Cara Tambah Related Posts Widget Untuk Blogger dengan Thumbnail

Sekarang di sini adalah tutorial yang  untuk menampilkan related post di bawah setiap posting blog Anda, bersama dengan thumbnail. Related Posts dipilih dari posting lain yang sama kategori/label/tag. 

Dengan Cara ini banyak pembaca Anda akan tetap di situs Anda untuk waktu yang cukup lama ketika mereka melihat Related Posts sesuai kepentingan.

Menambahkan Related Posts Widget untuk Blogger/Blogspot

Langkah 1. Masuk ke Anda akun Blogger dan pergi ke Template> Edit HTML

Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F:

Langkah 3. Cari potongan kode ini menambahkan di dalam kotak pencarian (tekan Enter untuk menemukannya):

</head>

Langkah 4. Copy dan paste kode di bawah sebelum / di atas </ head> tag:

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts{float:left;width:auto;}

#related-posts a{border-right: 1px dotted #eaeaea;}

#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}

#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }

#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}

</style>

<script type='text/javascript'>

//<![CDATA[

var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGYOWX7HaF9OsUPgAs_i38swp6FefTL7nBP335l23uFRgJ2Nuvb7unrmb4lWUi84InKN-6IncyqzQX15W3E9qpPDJ8ek-SVsbhs3MDPu7nAOuIRZ_AoX_tizy_pqp1SoylUQmGyzFjo59Q/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}

//]]>

</script>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Catatan:

- untuk mengubah lebar dan tinggi thumbnail, Ubah 110 px dan 100 px yang berwarna merah 

- untuk mengubah warna dan ukuran judul Related Posts, mengubah nilai dalam biru

- Hapus bagian berwarna ungu jika Anda ingin Related post yang akan ditampilkan baik di homepage dan halaman posting. 

Langkah 5. Cari baris dibawah (Anda akan menemukannya dua baris, tetapi Anda cukup pilih yang pertama):

<div class='post-footer'>

Langkah 6. Tepat di atas <div class = 'post-footer'> sisipkan kode ini:

<!-- Related Posts with Thumbnails Code Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://duniatutorials.blogspot.co.id/2016/08/cara-tambah-related-posts-widget-untuk.html" rel="nofollow" >Related Posts Widget</a></div>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

Catatan:

- Ubah nilai 5 dari  max-results = 5 sesuai dengan jumlah postingan yang ingin ditampilkan 

- jika Anda ingin Related Posts yang akan ditampilkan pada homepage juga, hapus bagian yang berwarna ungu

Update! Jika Anda tidak dapat melihat widget related posts setelah menyimpan template, Tambahkan kode (langkah 6) tepat di atas </ b: includable> tag yang dapat ditemukan di atas garis ini (CTRL + F untuk menemukannya):

<b:includable id='postQuickEdit' var='post'>

Untuk info lebih lanjut, klik gambar di bawah ini:

Langkah 7. Simpan Template dan hanya itu.

Untuk Lebih Jelasnya nonton video berikut: 

Sekarang Related Posts widget akan muncul di bawah setiap posting blog yang memiliki label di atasnya. Enjoy it!

Read more