Membuat scroll bar pada widget blogger

Pasti temen-temen blogger pernah kan melihat scroll pada sebuah widget di blogspot, misal scroll label, scroll archive, atau penembatan scroll pada widget-widget yang lain.

Sebenernya untuk membuat sebuah scroll bar sangatlah mudah. Jadi begini tag untuk membuat suatu scroll ;

<div style="overflow:auto;width:auto;height:500px;padding:5px;border:1px solid #096DB0">
[coding disini]
</div>

Jadi sesuatu yang ingin anda beri scroll harus berada diantara code yang saya  beri warnah merah. Untuk mengatur area scroll tinggal ubah saja width:auto; untuk lebar (dalam scrip saya beri ancho = otomatis menyesuaikan jatah ) dan height:500px untuk mengatur tingginya.

OK. saya kasih sebuah contoh misal anda ingin memberikan scroll pada widget archive maka berikut scripnya ; {ini template standart bawaan blogger}

<div id='ArchiveList'>
<div style='overflow:auto; width:auto; height:400px;'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>

Nah, begitu ! mau contoh lagi ? OK misal pada widget label. Maka kita edit scripnya jadi seperti ini ;

<b:widget id='Label1' locked='false' title='categories-1' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:auto; height:250px;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
Jadi kurang lebih seperti itu. Kalau belum jelas silakan berikan komentar anda .

20.04.00 | 3 komentar | Read More

Widget comment facebook di blogger

Untuk membuat widget ini pertama anda harus membuat sebuah aplikasi di facebook, OK langsung saja anda masuk ke Facebook developers, Dan anda tinggal klik dan klik jadi dah .

Setelah itu anda catat Aplikasi ID, dari aplikasi yang telah anda buat tadi. Kemudian anda login ke blogspot dan pilih Rancangan –> Edit Html trus centang Expand widget templates cari kode : <data:post.body/> atau <div class=’post-header-line-1′/>

dan copykan kode berikut dibawahnya ;

<!-- fb comment -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b>
<a expr:href='data:post.url'>Bagaimana pendapat anda tentang artikel diatas ?</a></b></div>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=164679980244672&amp;xfbml=1'/>
<fb:comments numposts='10' publish_feed='true' width='540' xid='55577'/>
</b:if>

Keterangan :

• Ganti text warna merah dengan Aplikasi ID anda.
• numposts='10'  = jumlah comment yang ditampilkan.
• width='540'  = lebar form comment.
• xid='55577' = Unix ID, ini digunakan untuk mengantisipasi jika anda memasang lebih dari satu widget facebook. (silakan ganti dengan angka lain yang anda suka )

Jika kurang jelas silakan tinggalkan pesan di commen.

19.01.00 | 2 komentar | Read More

Bagaimana cara membuat widget related posts ?

Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'.

langsung saja silahkan ikuti langkah-langkah dibawah ini:

1. Login dan masuk pada halaman dashboard blogger, buka menu Design -> Edit HTML
2. Backup terlebih dahulu template blog anda, (buat jaga-jaga kalau da sesuatu yang tak diinginkan. he.. :D )
3. Beri centang pada "Expand Widget Templates"
4. Cari kode ]]></b:skin>
5. Letakkan kode berikut di atas ]]></b:skin>
   
   #related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; }
   #related-posts a{ color:#4b4b4b; }
   #related-posts a:hover{ color:#ca1717; }
   #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 { margin : 10px 5px 5px 20px; padding : 0; }
6. Kemudian cari </head>
7. Letakkan kode javascript berikut diatasnya
   <script src='http://hermanblog.googlecode.com/files/Related-posts.js' type='text/javascript'/>
8. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>
9. Jika ada dua kode yang sama, pilih yang pertama
10. Letakkan kode berikut dibawahnya

    <div id='related-posts'>
    <div style='font-size:18px'><b>Related Posts:</b></div>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'/>
    <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=5&quot;' type='text/javascript'/></b:if>
    </b:loop>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div>

11. Simpan tempalate anda dan related post sudah jadi.., he.. :D

scrip warna hijau “max-results=5”, menunjukkan banyaknya list yang akan tampil.., OK :D semoga bermanfaat..

16.17.00 | 1 komentar | Read More

Cara Membagi Footer Blogger menjadi 3 coloum

Bagi rekan rekan blogger pasti sudah mahir  melakukan editing template blog mereka. Jadi maaf saja ya kalau repost .. he… :D . Buat yang baru belajar ini ada beberapa trik untuk melakukan editing template blogger kalian. kali in saya akan membahas tentang bagaimana caranya membagi footer menjadi 3 kolom. Langsung saja ya berikut langkah-langkahnya ;

1. Login ke blogger.com dan buka halaman edit html.

2. Backup terlebih dahulu template anda, agar jika terjadi kesalahan anda dapat mengembalikannya seperti semula.

3. kode   ]]></b:skin> pake saja cntrl + f untuk mempermudah.

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

dan cari kode dibawah ini.
div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

5. Hapus kode <b:section class='footer' id='footer'/>  lalu ganti dengan kode dibawah ini.
Jika ingin membuat footer 3 kolom. Gunakan kode dibawah ini:

<div id='footer-column-divide'>
<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Preview terlebih dahulu, jika sudah benar baru bisa sahabat Save Template
Selesai, selamat mencoba.. :D

17.34.00 | 0 komentar | Read More