cara membuat kolom scroll pada blog archive ( arsip blog )
Home »
Tutorial Blog
» cara membuat kolom scroll pada blog archive ( arsip blog )
cara membuat kolom scroll pada blog archive ( arsip blog )
cara membuat kolom scroll pada blog archive - Trik cara membuat scroll pada arsip blog, cara membuat scroll pada arsip blog (blog archive), cara membuat kolom blog archive dengan scroll. apapun itu judulnya pasti hasilnya tetap sama.
cara membuat kolom scroll pada blog archive ini tergolong cara untuk mempercantik blog, pada umumnya arsip blog itu puanjang buanget. hehehe namun bisa dipendekkan tanpa merubah subtansinya. ok dengan membuat efek scroll widget jadi ringkas dan keren. sobat blogger juga bisa membaca postingan saya kemarin Cara Membuat Scroll Pada Kolom Komentar sobat akan lihat hasilnya betapa menarik dan ringkas menggunakan efek scroll. lebay...... hahaha
Ini cara membuat kolom scroll pada blog archive, sobat ikuti tutorialnya. OK !!! cekidot......
Cara/tutorial 1
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F.
6. Jika sudah ketemu Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:
<div class='widget-content'>
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">
<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>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
Keterangan :
- Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara : klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.
- Harap disesuaikan saja kodenya, karena tidak semua templates sama,
- 200px : Adalah Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height:
- Jika sudah klik Save templates dan lihat hasilnya.
Cara/tutorial 2
1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,
3. Cari kode berikut :
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
4. Lalu Terapkan Seperti di bawah ini.....
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<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></div>
<b:include name='quickedit'/>
</div>
</b:includable>
5. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
200px adalah tingginya, dan kalian bisa ubah seseuai ke inginann kalian..
Demian cara membuat kolom scroll pada blog archive. ikuti selalu software mania pc akan selalu update dengan tutorial yang baru.
Referensi:
~~~ Good Luck ~~~
cara membuat kolom scroll pada blog archive ( arsip blog )
.
ko belum bisa gan.. ane udah coba nih....
ReplyDeleteada saran???
Ok, agan perhatikan tutorialnya,, dsitu ada kode scroll dan kode penutup, yang berwarna merah.
Deletegan, sedikit kritik tentang blog ini.
ReplyDeleteane kurang nyaman sama widget lalat yang ada di blog agan, karena buat ane ini gak enak dilihat -_-
#sorry kalo gak enak
thanks infonya
terimakasih banyak, gan. jabat erat..
ReplyDeletesekedar tambahan gan, di template ane gak perlu ada, mungkin kalo ada agan-agan lain yg gak bisa work widgetnya, hapus aja kode itu
ReplyDelete@Chandra Septian:sip gan,,, dah ikut share pengalaman,, thx dah mampir
ReplyDeletethanks informasinya gan
ReplyDeletehttp://kumpulankonsultasi.blogspot.com/
Makasih infonya gan..
ReplyDeletehttp://nuryan79.blogspot.com
@Nur Yanto:sama2 gan,,, thx dah mampir. salam kenal dari software mania pc
ReplyDeleteMakasih sob infonya..
ReplyDeleteSalam persahabatan dan semoga sukses selalu sob.....
jangan lupa ya Sob , kunjungi balik ya di http://planetajaib.blogspot.com/ dan jangan lupa komentarnya ya dan bila sahabat berkenan harap follow blog saya agar nambah akrab kita.
makasih ilmunya sob,...
ReplyDeletesaya coba gan dan sudah berhasil
ReplyDeleteberhasil gan,sudah diterapkan
ReplyDeletemakasih infonya
@aplikasimob:ok sob,.,.,makin berkrasi, slm knl
ReplyDeletedi templte aku gak ada kode seperti itu ,apa mungkin karna aku baru buat blog ya? oh ya salam kenal,blog qm udah aku follow , follow back ya,makasih
ReplyDeleteTriknya berhasil. terima ksih atas ilmunya gan.
ReplyDelete@yohanes19:sip gan,.,, lanjutkan.
ReplyDeleteko di ane ga bisa yah gan ?/
ReplyDelete-_________- http://ranginangx.blogspot.com/
@Arman Syah:penempatannya mungkin slh gan.,., dipelajari dulu,, ntsr dtnyakn lge bagian mna yang sulit, hehe
ReplyDeletesy jg belum bisa sob, gmna ya, uda coba bolak-balik tp tetep gak bisa, apa karena templatenya gak mendukung ya? btw trims atas infonya..
ReplyDeleteterimakasih gan,,, berhasil saya terapkan di arsip blog... :)
ReplyDeleteMakasih infonya,
ReplyDeletelangsung di coba,
BTW, followed :D
@maryam ishmatullah:siap,,, slhkan neng maryam,, langsung tancap gas.,,,.
ReplyDeleteikutan mencoba, biar rapi nih blog archivenya.
ReplyDeletethanks tutorialnya. salam dari negeri sakura.
kok di blogspot tanda kagak ada bro
ReplyDeleteThanks min 100% Work :) , Semoga blognya sukses selalu
ReplyDeletehttp://caranyablogspot.blogspot.com/
trims infonya http://www.bisnis.kaltimonline.com/
ReplyDeletethx infonya sob
ReplyDeletewww.idcheat.com
www.duniagame.info