Tutorial blog

Membuat Widget Label Tertentu dengan Satu Thumbnail

Theby plg 17.44

www.bantencom.com
Sebelum nya tanks to buat agan maskolis yang sudah memberikan tutorial ini setelah di praktekan dan berhasil,maka sekarang saatnya untuk di publiskan di blog saya supaya kalau2 misal kan lupa bisa buka lagi di sini,selain itu siapa tau bisa berguna buat teman2 yang secara tidak sengaja menemukan postingan saya ini yang berawal dari blog nya agan maskolis.oke tidak perlu untuk berlama-lama nanti malah bosan kebanyakan ngelantur nya berikut ini tutorial yang saya dapat kan dari agan maskolis:

pn.png.Silahkan login dahulu ke akun bloger kamu.

pn.png.Pilih blog yang mau di pasang widget di tutorial ini ,itu pun kalau di akun mu ada banyak blog

pn.png.Klik TEMPLATE selanjutnya EDIT HTML jangan lupa di backuap dulu templatenya

pn.png.Terbuka kode html blog kamu tekan CTRL+F dan pastekan code ini di pencarian ]]></b:skin> 

pn.png.Letak kan kode di bawah ini tepat di atas kode ]]></b:skin> brikut kodenya dari maskolis:
 img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
  pn.png.Lihat warna merah di dalam kode di atas itu adalah Lebar & Tinggi gambar yg akan tampil

   pn.png.Selanjutnya masukan kembali code berikut di kotak pencarian dan enter </head>

  pn.png.Saya anggap sudah ketemu Letak kode di bawah ini tepat di atas code </head> ingat di atas.

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYNbZoPKiy5-q2fgGbQ84eqxOr-O8qw_j1mIrAW_z1x7cUCQxbBPC_k4OpV0w74bzgoktunKnACqgF9p9_ocbiZn42pZwRCWeoGMvPENptgtoySXSIIbWr2a4K2UPCLJcfW53CtoR7KRRN//';}
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('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><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('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');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">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Menurut agan maskolis kalau terlalu panjang bisa kita gunakan code di bawah ini:
<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>

pn.png.Kalau sudah klik Simpan template selanjutnya kita beralih ke TATA LETAK 
pn.png.Klik Tata letak Selanjutnya Tambakan gadget Tergantung selera kamu mau di mana
pn.png.Setelah Klik Tambakan gadget kamu pilih HTML/Javascript pastekan kode dibawah ini:
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Daerah?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://www.bantencom.com/feeds/posts/summary/-/Daerah?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://www.bantencom.com/search/label/Daerah" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>  
Keterangan :
Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna merah : Ganti URL dengan URL blog anda.

Selanjutnya save dan lihat hasilnya.
Tampilan dari widget ini mengikuti kode CSS sidebar (jika Anda meletakkan di sidebar) pada template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.
NB:
  • var numposts = 1; adalah Jumlah label thumb yang akan tampil,Rubah angka 1.
  • var showpostthumbnails = true; Berfungsi menampilkan gambar atau menghilangkan gambar.
  • var displaymore = true; berfungsi untuk menampilkan link read more .Ganti false jika tidak ingin tampil.
  • displayseparator = true; adalah sepasi di kata.
  • var showcommentnum = true; adalah garis pemisah sepasi
  • showpostsummary = true; Tampil tidaknya keterangan di bawah judul,jika tidak ingin tampil ganti dengan kode false.
  • var showpostdate = true; berfungsi untuk menampilkan hari bulan tangal publhise artikel.
  • var numchars = 90; adalah keterangan banyaknya yang akan tampil di bawah judul.

 

Tags

Posting Komentar

0 Komentar

Posting Komentar