ketika kita menulis blog, sering sekali kita membutuhkan scrolling text agar tulisan gak keliatan terlalu panjang. Apalagi kalau artikel yang kita buat adalah tutorial coding yang njliimet :P . pastinya codenya akan panjang sekalii.
maka dari itu scrollling text lah solusinya. Namun terkadang kita bingung bagaimana code/tag html untuk membuat scrol pada blog. nah buat anda yang penasaran bagaimana caranya hayuuk kita coba ikuti langkah2 berikut.
1. pastikan postingan berada pada edit html (lihat pilihan yang terletak di kanan atas posting editor)
2.gunakan code berikut
<div style="overflow:auto; padding:5px; width:180px; height:180px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">
Tambahkan teks atau script disini
</div>
ganti text yang berwarna merah untuk menentukan width (lebar) dan height(tinggi) dari scrol.
contonya :
Tulisan
didalam
scrol :)
keren
kaan ^^
membuat scrol pada widget Archive blog
pada artikel yang ini sudah dijelaskan bagaimana membuat scrol pada widget Label. nah kali ini menjelaskan bagaimana caranya membuat scrol pada widget archive blog.
1. yang mesti dilakukan adalah login blogger, klik rancangan, edit html, Expand Template Widget.
2. Ctrl F untuk mempermudah pencarian script pada pemasangan widget archive. kemudian perhatikan code berikut
<b:widget id='Gadget1' locked='false' title='Recent Posts' type='Gadget'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:renderingUrl != ""'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div style='border: 0px solid #F5003D; overflow: auto; width: 310px; height: 100px; text-align: left;'>
<b:if cond='data:gadgetSnippet != ""'>
<data:gadgetSnippet/>
<b:else/>
<div class='widget-content'>
.................................................................................................................................
</div>
</b:if>
</div>
<b:else/>
<data:errorMessage/>
</b:if>
<b:include name='quickedit'/>
...............................................
yang berwarna merah adalah tambahan kode scroll yang harus Anda tambahkan, yang berwarna hitam adalah yang harus kita perhatikan untuk patokan meletakkan code berwarna merah.
kalo sepintas di lihat akan sangat membingungkan tapi coba di perhatikan lagi. nantinya akan mengerti. :)
intinya sih pertama coba search widget archive (dan ini pada setiap template ga selalu sama. seperti pada template saya <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
selanjutnya cari <h2 class='title'><data:title/></h2>
dan pastekan code <div style='border: 0px solid #F5003D; overflow: auto; width: 310px; height: 100px; text-align: left;'> setelah code tersebut.
lalu coba scrol kebawah cari code
<b:else/>
<data:errorMessage/>
atau
</b:if>
<b:include name='quickedit'/>
jika sudah ketemu coba hitung berapa banyak tag <div> diantara code <h2 class='title'><data:title/></h2> dan <b:include name='quickedit'/>
lalu sesuaikan dengan tag penutup </div>, nah misalnya di antara code tersebut ada 3 <div> maka setelah tag </div> yang ke 3 tambahkan lagi 1 tag </div> untuk menutup tag <div style='border: 0px solid #F5003D; overflow: auto; width: 310px; height: 100px; text-align: left;'>.
contoh pada code template yang saya punya.
<h2><data:title/></h2>
</b:if>
<div style='border: 0px solid #F5003D; overflow: auto; width: 220px; height: 150px; text-align: left;'>
<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>
</b:includable>
nah code yang berwarna hitam dan tebal adalah div tambahan.
begituh.. semoga berhasil yah :)
membuat scrol pada Setiap Postingan
Bagi Anda yang ingin membuat full artikel (setelah di klik readmore)tetap terlihat pendek sehingga tidak memnajang ke bawah, tambahkan saja kode scroll pada setiap postingan Anda secara otomatis. Mudah saja untuk cara ini, tinggal Anda tambahkan kode css seperti di bawah ini.
.post {
height:200px;
overflow:auto;
}
membuat scrol hanya pada postingan tertentu
Untuk kasus ini sebenarnya bisa dilakukan dengan cara pertama yaitu penambahan scroll pada text atau html code. Namun akan lebih mudah jika Anda membuat atributnya dengan css dan Anda bisa memanggilnya kapan saja dengan mudah.
Masukkan kode dibawah ini di atas ]]></b:skin>
.scrollpost {Nah, ketika Anda menulis sebuah postingan awali postingan dengan model penulisan seperti berikut ini.
height:100px;
width:400px;
overflow:auto;
}
<div class="scrollpost">
</div>
Kode tersebut bisa diletakkan ditengah postingan tergantung bagian postingan mana (misal paragraf kedua, berarti gunkan kode tersebut untuk apit paragraf kedua) yang akan di beri scroll.
membuat scrol pada Kotak komentar
terkadang dikarenakan terlalu banyak komentator yang menkomentari artikel kita, blog menjadi terlalu panjang ke bawah. maka dari itu untuk mensiasatinya kita bisa menggunakan scrol agar blog tidak terlalu panjang ke bawah.
Untuk permasalahan satu ini sangat mudah membenarkannya.
- Login blogger
- Rancangan/design
- Edit HTML
- Centang Expand templates widget
- Cari kode berikut <div class='comment-form'>
- Nah rubah kode scroll dari 'no' menjadi 'yes' perhatikan script lengkap di bawah ini
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='yes' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
Jika Anda tidak menemukan, Beberapa template bukan menggunakan kode comment-form namun menggunakan kode comment-editor
1 comments:
mantap komplit sekali
Post a Comment