Tampilkan postingan dengan label Widget Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Widget Blogger. Tampilkan semua postingan

Rabu, 16 September 2015

Cara Membuat Widget Artikel Per Kategori Pilihan


Membuat Widget Posting Terbaru Berdasarkan Kategori/Label tertentu, yaitu dengan memasukkan URL Blog dan Memasukkan kode HTML/Javascript.

CARA 1
1. Layout > Add a gadget > Feed
2. Masukkan url:

http://contohblognih.blogspot.com/feeds/posts/default/-/Label

3. Save!

CARA 2
1. Layout > Add a gadhet > HTML/Javascript 
2. Masukkan (Copas) salah satu kode berikut ini, pilih saja, atau tes satu-satu, mana yang cocok menurut selera dan pasa dengan template blog Anda.
3. Save!

Berikut ini Kode-Kode Posting Terbaru Berdasarkan Label yang harus Anda Copas di langkah kedua cara 2 di atas:

KODE 1 : Posting Terbaru Berdasarkan Label  Simple

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

KODE 2 : Posting Terbaru Berdasarkan Label Simple

<div style="border: 1px solid rgb(000, 000, 000); height: 100px; overflow: auto; padding: 10px; width: 90%;">
<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<ul><script src="http://contohblognih.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script> </ul>
</div>

KODE 3 : Posting Terbaru Berdasarkan Label Tanpa Gambar Thumbnail

<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default/-/NAMALABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>

KODE 4 : Posting Terbaru Berdasarkan Label + Gambar Thumbnail

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style><script type="text/javascript" src="http://yourjavascript.com/71374511518/recent-post-label-thumbnail.js"></script><script>
var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 150;
</script><script src="http://contohblognih.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>

KODE 5 : Posting Terbaru Berdasarkan Label + Gambar Thumbnail

<style>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.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=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;
</script><script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Catatan: Perhatina yang warna merah
1. Ganti contohblognih dengan alamat blog
2. Ganti Label dengan Label Posting yang akan ditampilkan
3. Label Dua Kata gunakan kode pemisah %20 sehingga menjadi Nama%20Label

Nah itu dia Cara Membuat Widget Posting Terbaru Berdasarkan Label alias Artikel Per Kategori. Kodenya CB koleksi dari berbagai sumber.
Read more

CARA MEMBUAT RECENT POST PILIHAN SEDERHANA


Berikut Langkah-Langkah Membuat Widget Recent Post Berdasarkan Label / Kategori 


  • Masuk ke akun blogger anda.
  • Pilih halaman tata letak (Layout).
  • Pilih elemen laman >> pilih tambah gadget ( add a gadget).
  • Kemudian pilih HTML/Javascript.
  • Selanjutnya silahkan salin code di bawah ini dan masukkan pada widget tersebut kemudian simpan.


  • <div style="overflow:auto;width:100%px;height:300px;padding:10px;border:2px solid #000000">
    <span id="pbl_labels"></span>
    <div id="pbl_posts"> Recent Posts </div>
    <script type="text/javascript">

    var jumlah_maksimum_post = 10;
    var dengan_ringkasan = true;
    var jumlah_karakter_ringkasan = 100;

    </script>
    <script src="http://septiamujizat.googlecode.com/files/recent-post.js">
    </script>

    <script src="http://okepos.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">

    </script></div>
    Keterangan : 
    • Ganti huruf yang berwarna merah dengan alamat (url) blog Sobat
    • var jumlah_maksimum_post =  adalah jumlah maksimum post yang ingin ditampilkan
    • var dengan_ringkasan = true dan ganti "true" dengan "false" jika tidak mau disertai ringkasan
    • var jumlah_karakter_ringkasan = 100 adalah jumlah karakter ringkasan post Anda

    Demikianlah cara mudah membuat recent post berdasarkan label / kategori. Mudah-mudahan bermanfaat...

    Happy blogging...

    Read more

    Cara Membuat Widget Artikel Acak Terbaru


    Seperti gambar diatas, kali ini saya akan membagikan cara membuatnya. Tak sulit, cukup disimak ya...

    Langkah-langkah :
    1. Login ke akun Blogger
    2. Masuk ke Dasbor, lalu pilih menu Tata Letak
    3. Tambahkan Gadget, kemudian pilih HTML/JavaScripst
    4. Kemudian copy kode dibawah ini dan paste-kan ke kolom konten tersebut.

    <script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=10;function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
    callback=randomposts" type="text/javascript"></script>


    * Catatan : teks berwarna biru merupakan jumlah posting yang akan tampil pada widget tersebut, bisa di rubah sesuai keinginan.
         5.   Klik Simpan
         6.   Selesai.



    Semoga bermanfaat...
    Read more

    Cara Merubah Widget Popular Post Update Terbaru


    Kelebihan widget ini adalah :
    1. Menggunakan Efek Hover
    2. Thumbnail gambar tidak kotak (Menggunakan Round Corner)
    3. Background terpisah di setiap judul posting dan menggunakan efek round corner (Sudut bulat)

    Bagaimana, menarik bukan?
    OK, langsung saja. Disimak ya...


    Cara menerapkan kode widget Popular Post :
    • Sign in di blogger.com
    • Pada menu drop down pilih template dan klik "Edit HTML"
    • Cari kode ]]></b:skin> lalu tempatkan kode berikut sebelum kode ]]></b:skin>
    /* Kode CSS tutorialblogspot.com */
    .popular-posts ul{padding-left:0}
    .popular-posts ul li{background:#FFF url() no-repeat scroll 5px 10px;list-style-type:none;border:1px solid #ddd;border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;-moz-box-shadow:3px 2px 5px #242424;-webkit-box-shadow:3px 2px 5px #242424;box-shadow:3px 2px 5px #242424;margin-bottom:5px;height:40px;padding:5px 5px 5px 20px !important}
    .popular-posts ul li a{font-style:italic}
    .popular-posts ul li:hover{border:1px solid #d10202;-moz-box-shadow:3px 2px 5px #d10202;-webkit-box-shadow:3px 2px 5px #d10202;box-shadow:3px 2px 5px #d10202}
    .popular-posts ul
    li a:hover{text-decoration:none}
    .popular-posts .item-thumbnail img{height:40px;width:40px;webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
    .popular-posts .item-thumbnail img:hover{-moz-box-shadow:0 0 5px #d10202;-webkit-box-shadow:0 0 5px #d10202;box-shadow:0 0 5px #d10202}
    • Simpan template.


    Cara konfigurasi widget popular post
    1. Setelah menerapkan kode di atas, klik Layout (Tata letak)
    2. Klik add a gadget
    3. Tambahkan widget Popular Post
      widget
    1. Hilangkan tanda centang pada "Snippet" atau "Cuplikan"
    2. Klik Save

    Semoga bermanfaat...
    Read more