Posted by 100Share 4U on 21:53
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='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<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='"label-size label-size-" + 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 == "expanded"'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'>▼ </span> </a> <b:else/> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> <b:if cond='data:blog.languageDirection == "rtl"'> ◄  <b:else/> ►  </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='"archivedate " + 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 + "_ArchiveMenu"'> <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 + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div></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.
Tidak ada komentar:
Posting Komentar