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

Wednesday, July 17, 2013

Cara membuat widget label post

Script widget post yang satu ini dapat anda andalkan untuk halaman blog kesayangan anda. Widget post ini saya namakan dengan " Widget post perlabel ". Widget ini menampilkan Judul dari artikel yang diposting dalam satu label, sebenarnya widget yang satu ini dapat digandakan menjadi beberapa label anda hanya menggandakan scriptnya untuk menampilkan judul postingan dari beberapa label yang anda miliki, jadi anda dapat dengan leluasa menemtukan untuk menampilkan label mana yang ingin anda tampilkan. Widget post perlabel ini mempunyai script yang ringan dan CSS yang menawan sehingga tampilannya menarik. Widget ini memakai script yang sudah Valid HTML 5 dan dapat anda pakai pada template Valid HTML 5 dan tentunya buat template responsive. Oke silahkan anda simak tutorial dibawah ini :

widget label post valid html5

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#BD_CSS td {
list-style-type: none;
width: 100%;
padding: 0 3px 0 3px;
}
#BD_CSS a {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:12px;
letter-spacing:.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 8px;
background: url("http://2.bp.blogspot.com/-qVbNQFRqzW4/UXLs07LPvJI/AAAAAAAAAsk/88N5KzZSWRc/s1600/mm_arrow.gif") 0px 50% no-repeat;
}
#BD_CSS a:hover {
background: #fff url("http://2.bp.blogspot.com/-qVbNQFRqzW4/UXLs07LPvJI/AAAAAAAAAsk/88N5KzZSWRc/s1600/mm_arrow.gif") 0px 50% no-repeat;
color:#990000;
text-transform: none;
}
.BD_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:10px;
letter-spacing:0.1em;
text-decoration: none;
}


Install Program Tag HTML


Untuk memanggil widget top comentar tersebut silahkan simak penjelasan dibawah ini ;
  • Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
  • Silahkan klik "Add Gadget "( Tambahkan gadget )
  • Pilih " HTML / JavaScript "
  • Copy Code HTML dibawah ini, paste pada gadget anda.

<script style="text/javascript">
var numposts = 5; // Jumlah postingan
var standardstyling = true;
</script>
<script style="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('<div style="border-bottom: dotted #999 1px;"></div>');
document.write(posttitle);}
if (standardstyling) document.write('<div style="border-bottom: dotted #999 1px;"></div>');
document.write('<div style="border-bottom: dotted #999 1px;"></div>');
}
</script>
<div id="BD_CSS">
<div class="BD_list">
<script src="URL BLOG ANDA /feeds/posts/default/-/LABEL ANDA?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</div></div>

Keterangan Gambar
  • Code warna biru adalah jumlah postingan
  • Code warna Merah ganti dengan URL dan label anda sesuai yang tertulis pada code diatas
  • Bila Label anda terdiri dari 2 suku kata atau mempunyai spasi gantikan spasinya dengan code [ %20 ]
    Contoh : Trik Blogspot menjadi Trik%20Blogsot
  • Jika anda ingin menampilkan 2 atau tiga label silahkan gandakan code :

    <script src="URL BLOG ANDA /feeds/posts/default/-/LABEL ANDA?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>


    Bila anda menggandakan scripnya untuk menampilkan label lebih dari satu silahkan anda ganti hanya nama labelnya saja pada code label warna biru diatas


Kesimpulan

Pemasangan widget ini sangat membantu anda untuk menampilkan label yang menurut anda layak untuk ditampilkan untuk pengunjung blog anda agar lebih fokus terhadap artikel yang telah anda posting pada halaman blog anda.

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 : Rivai Silaban Update pada : 9:51 PM

0 komentar :

Post a Comment

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