pasang iklan baris gratis
Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Membuat Spoiler Pada Blog

Mungkin anda pada sering lihat Spoiler seperti berikut di forum-forum seperti KASKUS dan lain lain.

Judul Isi Spoiler

isi Yang akan anda spoiler...


Apa Anda Bingung Bagai Mana Cara Membuatnya..??
Baiklah kalau begitu...
kita mulai saja belajar bagai mana sebenarnya cara membuat Spoiler di Blog..
Pertama-tama kita harus mengerti dahulu apa maksud dari Spoiler tersebut..
Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten Blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain Spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca Blog untuk membuka atau tidak isi Spoiler.

Ok.. Kita langsung saja merakitnya jika anda sudah paham maksud dari Spoiler.
Berikut Code yang bisa digunakan dalam membuat Spoiler di Blog :
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul atau isi konten </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi dari spoiler atau Konten anda
</div></div></div></div>
Semoga Berhasil dan Bisa Bermanfaat bagi anda pecinta Blogger..

Membuat Readmore Otomatis Pada Blog

Pembahasan kita kali ini ialah Cara Membuat Readmore atau Baca Selengkapnya pada Blog.
yang tujuannya ialah untuk megurangi halama pemakaian pada Blog.
Bacaan ReadMore atau Baca Selengkapnya akan muncul di Blog. anda untuk mengurangi tampilan postingan anda di halaman utama Blog anda.

Berbagai macam trik untuk membuat Readmore atau Baca selengkapnya mulai dari cara manual dan otmatis. Tapi kali ini saya akan membagi ilmu dengan anda dengan cara Otomatis.
Baiklah, mungkin anda akan mulai bosan dengan ocehan saya. Sebaiknya mari kita mulai.


1.Login Blog Anda.
Silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda centang atau ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

Cari Code </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://facebooks-vacancy.blogspot.com/2011/02/membuat-readmore-otomatis-pada-blog_16.html' type='text/javascript'/>
2. Cari kode html berikut ini :
<data:post.body/> atau <p><data:post.body/></p> 
Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 
Keterangan :
Tulisan yang berwarna Hijau adalah Bacaan Untuk Melanjutkan isi postingan anda..
anda bisa mengganti tulisan dengan keinginan anda sendiri..
Boleh dengan Kata READMORE.. SELENGKAPNYA.. dll

=>>Summary noimg 430 = tinggi artikel terpenggal tanpa image
=>> Summar img 430 = tinggi artikel terpenggal dengan image
=>> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll.

3. klik save template

Cara Membuat Blog

Tutorial Cara Pasang dan Hapus Widget Blog di Blogspot
Buat Sahabat Blogger, baiklah mari kita belajar..
Terlebih dahulu kita akan bahas Cara Menambah/Pasang Widget di Sidebar Blogspot, sebagai berikut:

1. Login dahulu ke Account Blogspot Anda, selanjutnya akan tampil halaman seperti pada gambar di bawah ini:
2. Klik Rancangan/Design, lalu akan tampil halaman berikutnya seperti pada gambar di bawah ini:
3. Klik Tambah/Add Gadget, kemudian tampil lagi halaman baru seperti pada gambar di bawah ini:

4. Cari dan pilih HTML/JavaScript, lalu akan terbuka halaman baru seperti pada gambar di bawah ini:

5. Tulis Judul (wajib) pada kotak Judul/Title, lalu masukkan teks/kode yang ingin tampil di sidebar blog Anda ke dalam kotak Konten/Content. Jika Anda tidak ingin judul widget muncul di sidebar blog Anda, silahkan baca tutorial Cara Menyembunyikan Judul Widget di Blogspot ini;

6. Klik Simpan/Save, selesai.

7. Setelah selesai, apabila Anda ingin mengatur posisi widget berada pada tempat yang Anda inginkan, letakkan crusor mouse pada kotak judul widget lalu tekan dan geser ke posisi yang Anda inginkan, kemudian klik tulisan Simpan/Save yang terletak di pojok kiri atas pada halaman tersebut.

Dan Bagai Mana cara Menghapus Widget.?
Baiklah Mari Kita bahas..
Adapun Cara Menghapus Widget di Sidebar Blogspot adalah sebagai berikut:

1. Seperti biasa Login ke Blogspot, lalu klik Rancangan/Design dan setelah muncul halaman seperti gambar di bawah ini:

2. Cari judul widget yang akan dihapus, lalu klik pada tulisan Edit dan akan terbuka halaman baru seperti contoh gambar di bawah ini:


3. Selanjut klik pada tulisan Hapus/Delete;

4.Klik OK, selesai.

Demikianlah tutorial sederhana tentang Cara Pasang dan Hapus Widget Blog di Blogspot ini.

Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah

Beberapa waktu lalu saya berkunjung ke beberapa blog yang telah berkunjung ke Blog Serba Tersedia ini, maksudnya sih untuk membalas kunjungan mereka, namun ketika saya hendak meninggalkan pesan di kotak komentar blog mereka koq tidak bisa, masalahnya ruang untuk memasukkan Word Verification-nya tidak ada, contohnya seperti gambar di bawah ini:

Dalam hati saya terbersit rasa keinginan untuk memecahkan masalah tersebut, ya hitung-hitung bila suatu saat saya memodifikasi kotak komentar dan mengalami masalah seperti itu, saya sudah tau cara memperbaikinya.

Dengan berbekal rasa penasaran kemudian saya googling dengan mengetikkan kata kunci Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah, akhirnya saya dibawa ke blognya kang Zons di http://www.inimu.com. Setelah saya baca tutorialnya ternyata cocok dengan permasalahan di atas.

Nah di bawah ini adalah Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah, silahkan ikuti langkah-langkahnya dengan benar, sebagai berikut:

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find (Ctrl + F) untuk memudahkan pencarian kode;
2. Sebelumnya Download Template Lengkap dulu untuk jaga-jaga jika terjadi kegagalan, lalu cari kode tag di bawah ini:
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

3. Perbaiki atribut scrolling pada tag tersebut, karena disinilah akar permasalahannya. Ada dua cara untuk memperbaikinya, silahkan pilih salah satu saja yaitu: 1. Hapus atribut scrolling='no' pada tag tersebut; atau:
2. Ganti atribut itu menjadi scrolling='auto', ini bertujuan untuk menampilkan scrollbar di samping form komentar bila form komentar melebihi area yang tersedia.
4.Setelah dilakukan perubahan, Save Template.

Tampilan form komentar Anda nantinya akan dilengkapi dengan scrollbar seperti pada gambar di bawah ini:

Anda juga boleh (tapi tidak harus) mengubah value atribut height menjadi 410px. Tujuannya untuk mempertinggi area form komentar sesuai dengan yang ada pada template standar Blogger.

Demikianlah tutorial tentang Cara Memperbaiki Tampilan Form Komentar Yang Bermasalah ini, semoga bermanfaat.