Cara membuat Related Posts dengan icon

Selamat sore hadirin yang berbahagia.hari ini saya akan share salah satu Tips Blogger lagi nih. wlaupun sbnarnya sudah banyak sih yang share tntang ini. tapi saya pengen share aja. sekaligus ada teman yang mintak dibuatin artikel ini :)

okeh ini SS nya . .

Nah udah liat kan sob ?? kalo buat demonya liat aja dibawah artikel ini sob :) hehehe
jadi malu nih :imalu:

okeh langsung aja dech . .

Copy code dibawah ini di atas kode ]]></b:skin>

#related-posts { float : left; width : 620px; margin-top:0px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url('http://chenkgelate.googlecode.com/files/related_thumb.jpg') no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 2px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }

 Selanjutnya sobat cari kode seperti ini <data:post.body/>


Setelah bertemu sobat copy code dibawah ini dan letakkan dibawah kode <data:post.body/>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#c20000'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
    </b:if>

 Sobat liat tulisan yang berwarna biru Silahkan sobat ganti dengan sesuka sobat . .

Okeh sekian dlu tutorial hari ini dan selamat mencoba.
salam blogger and Happy Blogging :D

Read more »

Cara membuat Recent post menurut label "Berita Foto"

 Ass. pada hari ini saya pengen share salah satu dari Trik di Blogger. yaitu: membuat Recent post per label. ini salah satu permintaan dari salah satu sobat blogger di salah satu komentar nya. jadi untuk itu saya pengen berbagi. untuk SS nya silahkan di lihat ya . .

 Nah udah liat kan sobat ?? atau untuk demonya silahkan sobat liat pada Footer Blog ini . .
jadi, langsung saja . .
Copy paste script dibawah ini dan letakkan pada widget Blog sobat . .

<style>

    /*** Labels Thumbs ***/

    img.label_gambar{

    float:left;

    padding:5px;

    width:125px;

    height:125px;

    margin-right:1px;

    margin-bottom:1px;

    }

</style>

    <script type='text/javascript'>

    //<![CDATA[

    function labelthumbs(json){document.write('<div>');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='';}

    document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_gambar" src="'+thumburl+'"/></a>');

    if(i!=(numposts-1))

    document.write('');}

    document.write('</div>');}

    //]]>

    </script>

    <script type='text/javascript'>var numposts = 5;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/Wallpaper?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan:
Untuk tulisan yang Merah sobat edit dengan Lebar gambar sesuai selera kalian
Untuk tulisan yang Biru sobat edit dengan Tinggi gambar sesuai selera kalian
Untuk tulisan yang Ungu sobat edit sesuai dengan Label sobat yang ingin tampil gambarnya . .

Nah itulah tadi tutorialnya. semoga bermanfaat untuk sobat2 semua.
Happy Blogging

Read more »

Cara merubah Blog menjadi dofollow

Sebenarnya sudah banyak jgk sih Artikel Tentang merubah blog menjadi dofollow. namun saya hanya Share bagi teman2 Sahabat Chenkgelate bagi yang blum tau :)
SUpaya agar Ringkas Langsung saja.

Langkah-langkah yang harus dilakukan : 
1.  Login ke Blogger 
2.  kemudian klik menu Layout / Tata Letak 
3.  Masuk Edit HTML sehingga akan kelihatan kode HTML dari blog anda.
4.  Jangan lupa untuk memberi tanda contreng ( seperti pemilu aja ) pada kotak disebelah tulisan “Expand Widget Templates”

5.  Cari kode kode script  dibawah ini :

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> 

6.  Langkah selanjutnya hapus tulisan yang bercetak tebal merah sehingga kode HTML blog anda menjadi :

 <a expr:href='data:comment.authorUrl'><data:comment.author/></a>

7.  Ok “SAVE TEMPLATE”

Sekarang blog blogspot anda telah menjadi Dofollow blog, satu hal yang perlu diingat bahwa langkah-langkah diatas harus anda ulang kembali jika anda mengganti template dari blogspot anda.

Untuk mengetahui apakah blog andasudah Dofollow atau belum, anda bisa melakukan pengecekan dengan cara klikkanan dihalaman blog anda klik “view page source” jika anda masihmenemukan tulisan rel=’Nofollow‘ pada kode :

<a href='http://domain.com' ' rel='nofollow'>nama penulis komentar</a>
contoh : <a href='www.chenkgelatecom' rel='nofollow'>cheat gunbound</a>

Ini menandakan bahwa blog anda belum Dofollow. Tapi jika anda tidak menemukannya berarti blog anda telah menjadi dofollow. atau,

Cara mudah untuk mengeceknya tuliskan komentar di blog anda dengan alamat blog siapa saja.

jika saat di klik alamat blog tersebut mengarah ke blog atau alamat yang anda tuju, itu artinya blog kamu sudah menjadi do follow

Refrensi : http://www.seby-antoe.com

Read more »

Cara menambahkan Scroll Bar pada Widget

Cara Menambahkan Scroll Pada Artikel Terbaru Atau Recent Post. Penambahan scroll ini bertujuan untuk mengirit tempat atau mengatur tinggi dan lebar widget dari Artikel Terbaru yang kita buat tadi.Triks Test ini bisa sahabat teraokan juga untuk kepentingan lain semacam penambahan scroll pada Label atau Arsip Blog kita.Jika tertarik untuk membuatnya silahkan ikuti langkah dibawah ini;

Masuk Akun Blogger kita.
Klik fitur rancangan.
Klik edit HTML dan centang kotak expand template widget.
Gunakan Ctrl + F untuk mempermudah pencarian dalam edit HTML
Tambahkan <div style='overflow:auto;width:320px;height:190px;'> Pada kode HTML4,dibawah kode

<div class='widget-content'>

Tambah pula penutup kode div class-nya </div> diatas kode </b:includable> atau <b:includable name='quickedit'/>

<b:widget id='HTML4' locked='false' title='Artikel Terbaru' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto;width:320px;height:190px;'>
 <data:content/>
 </div>
</div>
<b:includable name='quickedit'/>
</b:includable>
</b:widget>

Klik simpan Template
Keterangan :
Dalam kode berikut  <div style='overflow:auto; width:ancho; height:320px;'> rubah angka 190px dan 320px untuk mengatur ketinggian dan lebar widget dengan scroll agar sesuai dengan template blog kita.
Semoga berhasil dan bermanfaat,happy blogging.

Read more »

Cara Menyembunyikan kode CSS di Blogger

Jika anda ingin membuat pemangilan file CSS ini dalam template anda, Saya sarankan agar anda memback up template anda terlebih dahulu.

1. Login ke Blogger.com Pergi ke Rancangan/Template > Edit HTML 
2. Potong (Cut) script CSS diantara tengah-tengah kode berikut
   

   <b:skin><![CDATA[ script css (cut) ]]></b:skin> 

3. Paste script tersebut dalam sebuah notpad dan simpan dengan nama style.css (selain nama style juga tidak apa-apa asalkan ada .css)
4. Upload file style.css tersebut dalam sebuah hosting. Jika anda tidak mempunyai sebuah hosting anda bisa mengunakan Google Sites sebagai hosting anda. klik berikut untuk cara Membuat Hosting Dari Google Site
5. Setelah anda upload tahap selanjutnya membuat script pemanggil, masi pada halaman Edit HTML
   anda ganti kode <b:skin><![CDATA[ ]]></b:skin> dengan kode dibawah ini
   

   <link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <b:skin><![CDATA[ ]]></b:skin>
   </b:if>

   Teks yang berwana biru anda ganti dengan URL file CSS yang anda copy dari file hosting anda.
6. Terakir klik Save Template dan lihat pada blog anda apakah script CSSnya sudah menghilang pada open source.

Bagi anda yang mempunyai 2 atau lebih script CSS yang berbeda dan hanya berfungsi pada saat di halaman tertentu MISALNYA seperti kode di bawah ini yang berfungsi hanya di halaman post

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style  type='text/css'>
SCRIPT CSS (cut)
</style>
</b:if>

Cara membungkusnya cukup sederhana ikuti langkah 1-4 dan setelah selesai proses 1-4 sampai proses upload anda ganti kode

<style  type='text/css'>
</style>

Dengan kode

<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>

Sehinga menjadi seperti ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
</b:if>

Teks yang berwana biru anda ganti dengan URL file CSS yang anda copy dari file hosting anda.

Read more »