Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, August 16, 2013

widget post per label satu thumbnail valid html5

Cara membuat widget post perlabel dengan satu tampilan gambar unik pada halaman blog anda akan menambah kesan elegan pada tampilan halaman blog anda. Disamping tampilannya yang unik scriptnya juga ringan, dan valid HTML 5 jadi untuk template HTML 5 anda jangan ragu untuk memasangnya. Penulisan code tag yang mendukung sistem SEO Friendly menambah widget ini semakin layak anda gunakan pada halaman blog kesayangannya. Sistem kinerja dari widget post perlabel with 1 image ini adalah menampilkan artikel postingan dari satu kategori atau label dengan menampilkan 1 gambar dari postingan label tersebut. Oke langsung saja menuju TKP simak tutorial berikut ini.

Untuk DEMO silahkan " KLIK DISINI " Lihat bagian sebelah kanan halaman, bagaimana menurut anda ?


Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code </head>
  4. Copy Code script CSS dibawah ini, pastekan tepat diatas code </head> yang tadi

<style type='text/css'>
/*****************************************
Name : Post perlabel with 1 image
By : Rivai Silaban | Blog Design
Update : 16/08/2013
******************************************/
#BD-rlabel {
width:300px;//lebar widget
background-color: #FFFFFF;
list-style-type: none;
text-align: left;line-height: normal;
}
#BD-rlabel ul li {margin-right:-50px;line-height: normal;
list-style-type: none;margin-top:-5px;
}
#BD-rlabel a{
padding:0 0 0 18px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #990000;
text-decoration: none;
list-style-type: none;line-height: normal;
}
#BD-rlabel li a{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg') 0px 50% no-repeat;
border-bottom:dotted #CCCCCC 1px;
list-style-type: none;
text-decoration: none;
width: 300px;line-height: normal;

}
#BD-rlabel li a:hover {
list-style-type: none;
text-decoration: none;
color: #0000FF;
background-color: #E2E2E2;
}
.BD-text {
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-size: 10px;
padding:0 0 0 5px;
list-style-type: none;line-height: normal;

}
.BD-text a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-size: 10px;
padding:0 0 0 0px;margin-right:-35px;
list-style-type: none;

}
.BD-text a;hover{
color: #0000FF;

}img.BDLABEL_thumb{
float:left;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:60px;
width:60px;
padding:2px;
border-radius:50%;margin-left:-10px;
}
img.BDLABEL_thumb:hover{background:#f7f6f6}
.BDLABEL-tumb{
float:left;
width:100%;
min-height:70px;
margin:0 5px 2px 0;
background-image: url(none);
list-style-type: none;margin-right:-50px;
}
ul.BDLABEL-tumb li{min-height:65px;margin:2px 0;padding:4px 0;margin-right:-50px;}
#BD-rlabel .BD-more a{
color:#000000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
text-decoration: none;
text-shadow: 1px 1px #ccc;
padding:3px 15px;
border:solid #F3F3F3 1px;
font-weight: bold;
margin-top:10px;
background-color: #F8F8F8;
float: right;
}
#BD-rlabel .BD-more a:hover{
color:#000000;
box-shadow:0 0 2px #999;
background-color: #F8F8F8;
border:solid #BEBEBE 1px;
text-shadow: 0px 0px 1px #000;
}/*** Blog Design CSS and ***/
</style>
<!-- BLOG DESIGN script post/label start --><script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="BDLABEL-tumb">');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/AVvXsEgeDq52rWhgSslt0lTRjxNLI_jmt3299TRhjB0ky2Dkl66n2IBdX5sdigQQh6f2Sz3ZqQ6rtObG7GGDIgPvjEPqPW60n8pp8STRkxtJFLnKUK2MMtVM6ru3lWUXiRPQ9QieoYqMLO1_ZKk/h120/rss-bulat.png';}
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('<div class="BD-text">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img alt="'+posttitle+ '" class="BDLABEL_thumb" src="'+thumburl+'" title="'+posttitle+ '" /></a>');document.write('<a href="'+posturl+'" target ="_top" title="'+posttitle+'">'+posttitle+'</a><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><!-- BLOG DESIGN script post/label and -->


Install Program Tag HTML


  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
  • Silahkan pilih " Tata Letak " pada dasbor blog anda.
  • klik "Add gadget " ( Tambahkan gadget )
  • Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
  • Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
  • Edit script dan save .

<!-- BDRS Script post/label start -->
<div id="BD-rlabel">
<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 = 120;</script>
<script type="text/javascript" src="URL BLOG ANDA/feeds/posts/default/-/LABEL ANDA?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('');
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" title="' + entryTitle +'">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="URL BLOG ANDA/feeds/posts/summary/-/LABEL ANDA?max-results=8&alt=json-in-script&callback=recentpostslist"></script>
<div class="BD-more"><a href="URL BLOG ANDA/search/label/LABEL ANDA" title="more kategory" >See more &#187;</a></div></div>
<!-- BDRS Script post/label End -->

Keterangan Code
  • Untuk kode CSSnya warna hijau [ 300px ] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
  • Untuk tulisan warna HIJAU pada script/html jumlah 120 adalah banyaknya huruf yang akan ditampilkan sebagai keterangan postingan tersebut.
  • Tulisan kode warna MERAH ganti dengan URL blog anda.
  • Kode tulisan warna BIRU ganti dengan nama label / kategori anda bila label anda memakai spasi Cth " Trik Blog " maka anda harus mengganti spasi dengan kode [ 20% ] sehingga penulisannya demikian " Trik20%Blog ". Untuk penulisan label semua huruf sangat sensitiv jadi anda harus menuliskan nama label sesuai dengan label atau kategori halaman blog anda.
  • Kode tulisan warna KUNING lihat angka 8 pada script, silahkan anda ganti menurut selera anda. angka 8 adalah jumlah post yng akan ditampilkan.


Kesimpulan

Bila anda menginginkan ataupun menambahkan widget lagi dengan nama label / kategori lain tetapi tampilannya sama ( hanya berbeda nama label saja ) silahkan ganti tulisan kode warna biru pada script dengan nama label yang lain

script widget post perlabel dengan satu tampilan gambar ini memakai script Json yang terkenal, jadi sudah di rekomendasikan pemakaiannya keberbagai server jadi sudah benar benar stabil. CSS valid CSS 3, HTML valid HTML 5, penulisan script dan tag html sesuai standart SEO, script ringan. Silahkan anda coba di halaman blog kesayangan anda, bila anda mengalami masalah dalam pemasangan script, CSS dan tag HTMLnya pada halaman blog anda silahkan share bersama saya melalui form komentar dibawah ini, dengan senang hati saya akan membantu anda.

Salam Bloger.
16/08/2013

By : Admin

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 5:26 PM

13 comments :

  1. Pertamax Master. Saya sedot dulu Master, Setelah saya beres-beres widgets saya yang masih berantakan, pasti saya Trial Widget Post per Label Satu Thumbnail dari Master Silaban ini.

    Terima kasih sudah berbagi "Widget Post per Label Satu Thumbnail".

    Oh ya Master, OOT dikit neh, setelah menggunakan Domain baru, OpenID saya sering "Not Verify" lagi.
    Teruss, saya check domain, dengan menuliskan URL domain, Kenapa harus menyertakan www ya master? kenapa ya?.

    ReplyDelete
    Replies
    1. silahkan sob.

      tentang penulisan domain memakai www itu tentang pengaturan DNS domain tersebut. waktu transfer domain ke server blogspot coba di cek lagi. atau jika sudah aman silahkan daftarkan lagi domain barumu ke search google balik. Daftarkan domain barunya kembali seperti waktu memakai domain sub blogspot.

      Open Id dipengaruhi penulisan kode yang harus tepat dibawah kode <head>. memang terkadang domain baru masih belum stabil, sabar saja sob entar juga pasti stabil, yang penting DNS domain yang terhubung ke server harus tepat.

      Delete
  2. halo gan ane mau tanya lagi nih hehehhehe gan kalo buat witget label yg tampil thumb gambarnya doank n rata kiri,kanan ,atas,bawah,mohon pencerhannya gan

    ReplyDelete
    Replies
    1. kalo untuk menampilkan itu harus ada script khusus sob biar hanya gambar sja yang ditampilkan, Tapi menurut saya bila kita hanya menampilkan gambar saja, pengunjung kurang memahami apa arti gambar tersebut sehingga pengunjung tidak akan membuka linknya, makanya script untuk itu kurang diminati orang.

      Delete
  3. oh gitu ya gan.. gan ane mau tanya nih ane kan habis edit template yg lalu itu gan..trus udah jadi.. tapi pas aq download templatenya dan aq masukin templatenya ke blog baru walah malah amburadul.. padahal tata letaknya aq udah samaain.. gan mohon pencerahannya gan
    nih gan template yg habis aq modif
    http://uji-coba-dulu.blogspot.com.. tapi aq pindahin ke blog baru itu yg jadi masalahnya gan

    ReplyDelete
    Replies
    1. heheh iya yah padahal sudah cape 2 modif eh ternyata nyesalin he he ...

      Memang pada dasarnya server selalu merekam setiap aktivitas pada server tersebut tidak terkecuali pada server blogspot. dimana sebuah modivikasi pasti meninggalkan cokie. tapi untuk mengantisipasinya coba dulu pake template buatan langsung blogspot ganti sampe 3 kali, tapi harus template bawaan blogspot setelah sudah di gonta ganti sama template bawaan blogspot baru ganti kembali templatenya dengan yang kamu edit..

      Delete
  4. hehehhe berhasil gan.. 10 jempol buat gan .. wah kalo tadi kaga bisa hadow stres tingkat dewa dah.. udah 3 mlm begadan edit2 hehehehe... gan makasih atas infonya.. tapi kalo aq ada kesulitan aq nanya lagi ya gan :)

    ReplyDelete
    Replies
    1. sama sama gan..
      iya saya akan bantu bila saya mengetahuinya..
      semoga blognya makin maju dan trafiknya meningkat.
      kalo begadang minum kopi yang banyak biar ngak ngantuk heheheheh...

      Delete
  5. Mantab luar biasa atas info dan ilmu ngeblog nya gan, thxs.

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog