Kamis, 17 Juni 2010

Cara Memasang Fungsi Scrol Pada Label Atau Arsip Blog

Bismillahirrohmanirrohim

Di sini saya akan coba mempraktekan cara buat fungsi scrol pada label ataupun arsip blog dan manfa'at fungsi scrol tersebut .
Biasanya kalau kita berkunjung ke sebuah blog kadang kita akan menjumpai sebuah widget yang berisi Arsip dan label / category yang di situ terdapat fungsi scroll.
Sepintas lalu berfikir...... O.. ya ternyata fungsi scroll pada label atau arsip bisa sedikit lebih menghemat space pada blog. Nah itu salah satu manfa'at yang saya maksud, di samping itu fungsi scroll akan mempercantik tampilan halaman blog Contohnya gambar di samping.

Ok sekarang kita mulai praktek
Untuk membuat fungsi scrol pada label ikuti langkah berikut ini.

1. Login ke akun BLOGGER dulu setelah itu akan mengarah ke dashboard.
2. Pilih Layount / Desing / Rancangan.
3. Pilih Edit HTML lalu beri tanda centeng pada kotak Expand Template Widge.
Untuk menghindari terjadinya kesalahan lebih baik di download dulu template nya dan kalau terjadi kesalahan bisa di kembalikan seperti semula.

4. Ok sekarang kita cari code berikut ( type='Label' )  untuk label / category.
untuk lebih mudah mencarinya Pakai fasilitas Fine pada menu edit broswer anda atau tekan Ctrl+F dan masukan code yang akan di cari
Jika sudah ketemu Copy code di bawah ini.
<div style='overflow:auto; height:200px'>     ---> (Atur tinggi sesuai selera)

dan paste tepat tepat di bawah code ini
<h2><data:title/></h2>
</b:if>

Lalu di tutup dengan code </div>   tepat di bawah code ini  <b:include name='quickedit'/>

Logikanya seperti di bawah ini

<b:widget id='Label1' locked='false' title='Labels' type='Label'> ---> ( ini code yang di cari tadi)
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div style='overflow:auto; height:200px'>  ----> ( ini code yang di tambahkan)
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<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>  ---> (code penutup )
</b:includable>
</b:widget>


Masih di menu Edit Kita Lanjutkan memasang scroll pada Arsip blog. Cari code ini  ( type='BlogArchive' ) agar lebih mudah mencarinya menggunakan cara di atas. Ok kalau udah ketemu copy dan paste code ini <div style='overflow:auto; height:200px'> dan letakkan tepat di bawah code ini <h2><data:title/></h2></b:if>

Contohnya di bawah ini

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'> ---> (code yang di cari)
 <b:includable id='toggle' var='interval'> <b:if cond='data:interval.toggleId'> <b:if cond='data:interval.expclass == &quot;expanded&quot;'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'>&#9660;&#160;</span> </a> <b:else/> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'> &#9668;&#160; <b:else/> &#9658;&#160; </b:if> </span> </a> </b:if> </b:if> </b:includable> <b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='i'> <ul class='hierarchy'> <li expr:class='&quot;archivedate &quot; + data:i.expclass'> <b:include data='i' name='toggle'/> <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a> <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span> <b:if cond='data:i.data'> <b:include data='i.data' name='interval'/> </b:if> <b:if cond='data:i.posts'> <b:include data='i.posts' name='posts'/> </b:if> </li> </ul> </b:loop> </b:includable> <b:includable id='menu' var='data'> <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'> <option value=''><data:title/></option> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option> </b:loop> </select> </b:includable> <b:includable id='flat' var='data'> <ul class='flat'> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable> <b:includable id='posts' var='posts'> <ul class='posts'> <b:loop values='data:posts' var='i'> <li><a expr:href='data:i.url'><data:i.title/></a></li> </b:loop> </ul> </b:includable> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if>
<div style='overflow:auto; height:200px'> --->( Code yang di tambahkan )
 <div class='widget-content'> <div id='ArchiveList'> <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>
<b:include name='quickedit'/>
</div&gt;</div> ---( ini Code penutup )
</b:includable> </b:widget>

Jangan lupa di simpan dan lihat hasilnya.


Cara ke 2 ini adalah cara yang lebih mudah dan fungsinya sama yaitu untuk menambahkan scroll pada label atau arsip .

Ok langsung praktek ajah  Sebelum utak atik code alangkah baiknya di download dulu. Cari code di bawah ini

<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/> <b:widget id='HTML6' locked='false' title='Jam' type='HTML'/> <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> <b:widget id='Label1' locked='false' title='Kategori' type='Label'/> <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/> <b:widget id='HTML7' locked='false' title='Statistik Blog Ini' type='HTML'/> <b:widget id='HTML1' locked='false' title='Kotak Chatting' type='HTML'/>

Mana di antara code di atas yang akan di pasang fungsi scroll.
 Di sini saya akan coba jelaskan cara memasang fungsi scrol pada Arsip dan Label maka code yang di cari seperti ini 
<b:widget id='BlogArchive' locked='false' title='Arsip Blog' type='BlogArchive'/>

Yang di bawah ini untuk Label /Category

<b:widget id='Label' locked='false' title='Kategori' type='Label'/>

Berarti Nama atau Id kedua widget di atas adalah BlogArchive dan Label.
Nah sekarang cari code ini    ( ]]></b:skin> )
copy code di bawah ini dan letakkan sebelum code di atas.

 #BlogArchive .widget-content{
height:200px; /* Tinggi yang diinginkan */
width:auto;
overflow:auto;}
Simpan jika sudah.

Jika ingin membuat secrol pada widget yang lainya tinggal ganti aja Nama atau ID widgetnya.
Sampai di sini kita sudah berhasil membuat scroll pada label dan arsip blog.
O.. ya, Saya Mohon ma'af jika ada kesalahan menulis, Satu lagi jangan sungkan untuk bertanya bila tidak mengerti.

Terimakasih dan Semoga berhasil.

Rabu, 16 Juni 2010

Cara Menampilkan Komentar Terbaru Di Blog( Recenct Comment )

Menampilkan comentar terakhir di blog berfungsi untuk memudahkan si pemilik blog untuk mengetahui comentar terbaru itu salah satunya , Disamping itu pengunjungpun akan tahu kalo blog tersebut memang ramai pengunjung ngak kayak kayak blog saya ini bikin tutorial kayak gini tapi blognya masih belum ada comment nya jadinya kelihatan betul kalo blog saya ini sepi pengunjung, Nah dari itu juragan2, Mas2se and mbak2E jangan sungkan untuk berkomentar biar gak kelihatan sepi hehehe......

 
Ok kembali ke laptop... tok tukul hehehe........

 
  • Langkah pertama Sesudah login akan di bawa ke bagian Dashboard.
  • Terus Masuk ke bagian Rancangan / Layount  dan tambah Klick Tambah Gadget.
  • Pilih html Javascrip.
Lalu Copy dan paste Code di bawah ini ke gatget

 

<script style="text/javascript" src="http://recen1.googlecode.com/files/daftar_isi.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script><script src="http://Nama-Blog.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>



Katerangan
Ganti code yang berwarna
  • Jumblah coment yang akan di tampilkan.
  • Tanggal comment di posting.
  • Ganti dengan nama blog anda.
Kalau  sudah tinggal di simpan
Kalao kalo mudeng bisa di tanyakan Eh.. maksudnya kalo gak mudeng  hehehe....
Dah semoga berhasil !!

 
Powered by Blogger