French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Kamis, 26 Agustus 2010

Menambahkan Scroll Pada Setiap Postingan

Menambahkan Scroll Pada Setiap Postingan
Bagi Anda yang tak ingin setelah readmore artikel tetep 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;
}

Jika Ingin 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 {
height:100px;
width:400px;
overflow:auto;
}

Nah, ketika Anda menulis sebuah postingan awali postingan dengan model penulisan seperti berikut ini.

<div class="scrollpost">

Tulis postingan Anda disini

</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.

Permasalahan Scroll Pada Kode Verifikasi Komentar
Untuk permasalahan satu ini sangat mudah membenarkannya.

* Login blogger
* Tata Letak
* Edit HTML
* Centang Expand templates widget
* Cari kode berikut
* 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
Alternatif lain untuk memperbaiki kotak komentar dengan verifikasi error adalah dengan menambah tinggi form, menghilangkan verifikasi atau membuat isian komen pada jendela baru


Bagaimana Membuat Widget Dengan Scroll
Cara ini digunakan untuk memberi scroll pada teks atau html kode. Nah, caranya mudah sekali. Silahkan gunakan script seperti ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">

Tambahkan teks atau script disini

</div>

yang berwarna merah adalah pengaturan lebar dan tinggi widget Anda. Dan masukkan teks atau script Anda pada yang bercetak tebal.

Menambahkan Scroll Pada Widget Bawaan Blogger
Kasus lain, ketika Anda ingin menambahkan scroll pada widget bawan blogger seperti archives. Tentu saja ketika Anda ke elemen halaman da klik edit, maka akan muncul pengaturan otomatis dan bukan script. Bagaimana Anda mencari scriptnya dan menambah scroll?

* Masuk ke tata letak, pilih Edit HTML.
* Jangan lupa centang Expand Widget Templates
* Cari kode widget yang Anda inginkan

(cara mencari yang paling mudah adalah dengan ctrl+f lalu masukkan judul gadget di kotak pencari (di bagian bawah untuk firefox dan di atas untuk google chrome). Jika sudah ketemu perhatikan contoh pemasangan script untuk gadget recent posts advanced berikut ini:

<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 != &quot;&quot;'>
<b:if cond='data:title != &quot;&quot;'>
<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 != &quot;&quot;'>
<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, dan yang berwarna kuning adalah rambu-rambu bagaimana Anda menambahkan. Perhatikan benar posisinya.

Selamat Mencoba

Tidak ada komentar:

Posting Komentar