Home Trick Blog
Showing posts with label Trick Blog. Show all posts
Showing posts with label Trick Blog. Show all posts

Cara Membuat Related Post Di Bawah Postingan Blog

Add Comment
Cara Membuat Related Post Di Bawah Postingan Blog - Cara Membuat Related Post Di Bawah Postingan Blog ini cukup mudah Related Post atau Artikel Terkait adalah posting atau artikel yang berhubungan dengan artikel lainnya berdasarkan atas kesamaan nama kategori atau label postingan, Dengan mengaktifkan fungsi scrolling pada widget related posts maka pengunjung tidak lagi merasa terganggu dengan artikel-artikel terkait yang terlalu kepanjangan ke bawah. Apalagi widget related post ini diletakkan di bawah posting.

Berikut Ini adalah Cara Membuat Related Post Di Bawah Postingan Blog :

Masuk Ke Edit Html.
Lalu Temukan, Cari kode ]]></b:skin> Tekan CTRL + F Untuk Mempermudah PencarianLalu Copy Kode Di Bawah ini Di Atas Kode ]]></b:skin>.
#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0973CF;font:12px Verdana}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpIgllVD9AkbQ6clme24OSHiXxe2WFXyOldSgSpCMcbS6DtI8yO1W5aQTAeor28fGmHNhqS0AFLe4czrfPR-mYwOiLKyYmbb3TnHMjeNKu20PvcUjCJXC5XkNA2jlFJ_mvMfhdewQEcco/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}
Kemudian Cari Kode <Head> 
Copy Kode Di Bawah Ini Di Atas Kode <Head>
<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(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>
Catatan : Tulisan "Related Posts" yang berwarna merah bisa Anda ganti dengan kata-kata lainnya, misalnya "Artikel Terkait" atau "Posting Terkait".

Temukan kode <data:post.body/> 
Copy Kode Di Bawah ini Di Bawah kode <data:post.body/> Jika ada Kode Yang lebih dari  <data:post.body/> Pilih Yang ke 2 atau ke 3 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</b:if>

Kemudiam Simpan Template Dan Lihat hasilnya, Gimana Berhasil tidak jika tidak berhasil sobat kurang teliti dengan cara di atas ikuti dengan teliti tutorial di atas. itu dia Cara Membuat Related Post Di Bawah Postingan Blog, Semoga Bermanfaat.
Read More»

Cara Membuat Popular Post Berwarna

Add Comment

Cara Membuat Popular Post Berwarna - Cara membuat Popular Post Atau Entri Populer Berwarna adalah hal yang mudah, trick ini mudah di coba, dan merubah widget Entri Populer Atau Popular Post Berwarna Seperti Blog Saya Kita Hanya Perlu menambahkan Kode CSS Yang bisa membuat widget popular post menjadi berwarna, Selai itu widget popular post juga berfungsi untuk memikat mata pengunjung agar mereka membaca artikel yang sedang populer tersebut. Agar menarik minat pengunjung atau visitor maka widget popular post sebaiknya dibuat warna-warni.

Berikut Cara Membuat Popular Post Berwarna  :
  1. Masuk Ke Edit Html Lalu Cari Kode ]]></b:skin> atau </style>
  2. Copy Kode Di bawah Ini Tepat Di Atas kode  ]]></b:skin> atau </style>

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}
Lalu Simpat Template Dan Lihat hasilnya. Gimana Sob Kerenkan Widget Popuar Post nya jadi warna warni Gampang kan Trick nya, Nah Itulah Artikel Cara Membuat Popular Post Berwarna semoga bermanfaat ya sob.
Read More»
Subscribe to: Posts ( Atom )