Cara Membuat Auto Read More (Baca Selengkapnya) pada Postingan Blog

Jika Anda ingin menampilkan isi postingan blog Anda menjadi beberapa postingan dalam satu halaman awal tapi tidak ingin terlihat terlalu panjang ke bawah, maka solusinya adalah menggunakan read more. Read more berarti baca selengkapnya, yakni melanjutkan membaca keseluruhan isi postingan yang bersangkutan. Sebagian bagi yang menggunakan template eksternal mungkin sudah ada 'read more' otomatisnya. Tapi jika belum, ada Anda dapat membuatnya dengan langkah-langkah di bawah ini.

1.   Login ke akun blogger 

2.   Klik Rancangan –>Edit HTML, centang Expand Template Widget

3.   Cari kode </head> kemudian tempatkan kode berikut di atasnya.
(gunakan Ctrl+F untuk mempermudah pencarian)

<script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 275; summary_img = 250; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://sites.google.com/site/hitsukeproject/summarypost.js' type='text/javascript'/>

Anda juga bisa mengubah kode tersebut sesuai dengan selera.

summary_noimg = 275; kode mengatur tinggi uraian tanpa gambar
summary_img = 250; kode mengatur tinggi uraian dengan gambar
img_thumb_height = 100; kode ini untuk tinggi gambar thumbnailnya
img_thumb_width = 120; kode ini untuk lebar gambar thumbnailnya

4.   Cari kode  <data:post.body/>, bagi yang sudah menggunakan read more secara manual akan ada dua kode yang seperti itu, cari yang pertama, ganti kode tersebut dengan kode berikut :

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Kamu juga bisa mengganti kode ‘Read More’ sesuai dengan keinginan kamu, misalnya ‘Baca Selanjutnya’, ‘Baca Selengkapnya’ dan lain-lain. Pada blog ini saya menggunakan ‘Coretan Selengkapnya’.

5.   Simpan template dan lihat hasilnya.

Bagi yang sudah menggunakan read more manual kode yang terlihat seperti di bawah ini, tapi tidak semua kode terlihat seperti di bawah, tergantung template Anda.

<div class='post-header-line-1'/> <div class='post-body entry-conten'> <b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>  <p><data:post.body/></p> <a expr:href='data:post.url'>Read More </a> </b:if>

Hapus kode yang dicetak tebal dan gunakan langkah 3 sampai 5.

Selamat mencoba...

Coretan Selengkapnya...

Cara Memasang Scroll Down pada Widget Sidebar Blog

Teman-teman warna-warni yang hobi blogging (atau mungkin sudah jadi gaya hidup), mungkin artikel yang Anda posting dalam sebulan terlalu banyak atau mungkin juga Anda memiliki begitu banyak kategori tulisan sehingga sidebar blog Anda terlalu panjang ke bawah. Belum lagi jika Anda memasang banyak widget pada sidebar dan ingin ditampilkan semua, maka Anda perlu memasang scroll down pada widget, sehingga dapat menghemat ruang pada sidebar dan sidebar blog kita terlihat lebih rapi.

Berikut  langkah-langkah memasang scroll down Arsip Blog:

1.   Login pada akun blogger Anda.

2.   Klik tab Rancangan

3.   Centang pada kotak Expand Widget.

4.   Cari kode <div id='ArchiveList'>

Gunakan Ctrl+F untuk memudahkan pencarian.

(dalam blog ini saya beri nama kumpulan coretan)

5.   Sisipkan kode <div style='overflow:auto; width:ancho; height:250px;'> di bawah kode <div class='widget-content'> di atas kode <div id='ArchiveList'>

6.   Dan tambahkan </div> di atas <b:include name='quickedit'/> 

Perhatikan penempatan kode di bawah ini: 

<h2><data:title/></h2> </b:if> <div class='widget-content'> <div style='overflow:auto; width:ancho; height:250px;'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'> <b:if cond='data:style == &quot;HIERARCHY&quot;'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == &quot;FLAT&quot;'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == &quot;MENU&quot;'> <b:include data='data' name='menu'/> </b:if> </div> </div> </div> <b:include name='quickedit'/> </div>

Angka 250 pada kode di atas merupakan ketinggian dari kotak scroll. Silakan ganti sesuai dengan selera Anda.

7.   Jika sudah oke, klik Simpan Template

Langkah untuk memasang scroll down pada Label juga mirip.

Mudah, bukan? Selamat mencoba…

Coretan Selengkapnya...

Cara Membuat Gambar Bergerak di Bagian Pojok Blog

Lihat gambar yang ada di pojok kanan atas blog ini?

Kalau kamu mau membuat seperti gambar seperti itu, dan jikalau kamu sudah punya gambarnya maka kamu tinggal upload di photobucket, imageshack atau di layanan webhosting gambar lainnya...

Tapi kalau kamu mau yang praktis dan yang sudah ada di internet, kamu juga bisa langsung cari gambar animasi disini atau disini atau di berbagai situs penyedia gambar animasi lainnya.

1.   Copy alamat URL dari gambarnya dengan cara Klik kanan –> Copy image Location

2.    Login ke blog kamu

3.   Klik pada tab Rancangan –> Edit HTML

4.   Untuk antisipasi bila terjadi kesalahan, download terlebih dahulu Template kamu. Klik pada Download Template Lengkap

5.   Cari kode ]]></b:skin> di template kamu (untuk mempermudah pencarian, gunakan Ctrl+F)

6.   Letakkan kode berikut tepat di bawahnya.

#trik_pojok { position:fixed;_position:absolute;bottom:0px; right:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Kode yang berwarna merah menandakan posisi dari gambar, bisa diganti sesuai dengan.selera kamu.

Misal :         kiri = left                      atas = up        

                   kanan = right               bawah = bottom

7.   Setelah itu, cari kode </body> di template (untuk mempermudah pencarian, gunakan Ctrl+F). Letakkan kode di bawah ini tepat di atasnya.

<div id='trik_pojok'> <a href='http://serbaserbi-rafha.blogspot.com/' target='_blank' title='Harree gene belum punya blog?? Ketinggalan zaman dah lu...'> <img border='0' height='175' src='http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-002.gif' width='150'/></a> </div>

Keterangan:
Gantilah http://serbaserbi-rafha.blogspot.com/ dengan nama blogmu.
Ganti Harree gene belum punya blog?? Ketinggalan zaman dah lu... dengan kata-kata sesukamu. Kata ini muncul pada saat hendak mouse diklik.
Ganti 175 dengan tinggi gambar yang sesuai.
Ganti http://www.nonstopgifs.com/animated-gifs/games/games-animated-gif-002.gif dengan alamat URL sumber gambar.
Ganti 150 dengan lebar gambar yang sesuai.

8.   Jika sudah selesai mengedit, klik Pratinjau

9.   Simpan perubahan dengan klik Simpan Template

Selamat mencoba…

Coretan Selengkapnya...

Cara Membuat Judul dan Teks Berjalan pada Blogger

Hai teman-teman warna-warni, kali ini saya mau berbagi tips dan trik untuk blogger lagi nih. Setelah Anda punya akun blog sendiri dan belajar untuk mulai memposting tulisan, tentunya Anda  ingin memodifikasi dan mempercantik tampilan blog Anda agar lebih menarik untuk dilihat dan pengunjung betah untuk berlama-lama mampir di blog Anda.

Nah, lihat khan pada blog kita tercinta ini ada tulisan berjalan pada tab browser? Teks akan berjalan-jalan sendiri, mungkin dia sedikit bosan jadi perlu untuk meregangkan otot. Hehehe…

Berikut cara membuat teks berjalan di tab browser. Caranya cukup mudah dan simpel, hanya dibutuhkan ‘script’ yang nantinya akan kita pasang di head template kita.

1.   Login ke akun blogger Anda

2.   Klik pada tab Rancangan lalu klik tab Edit HTML

3.   Beri tanda centang pada kotak kecil Expand Template Widget

4.   Untuk antisipasi bila terjadi kesalahan, download terlebih dahulu Template Anda. Klik pada Download Template Lengkap

5.   Copy kode berikut tepat di bawah kode <head>

Untuk mempermudah mencari kodenya, gunakan shortcut Ctrl+F

<script language='JavaScript'> var txt="<data:blog.pageTitle/>"; var kecepatan=200;var segarkan=null;function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

Angka 200 pada kode di atas merupakan kecepatan bergeraknya. Silakan ganti sesuai dengan selera Anda.

6.   Jika sudah oke, klik Simpan Template

7.   Selesai

Selamat mencoba…

Coretan Selengkapnya...

Mengenali Fungsi-fungsi Menu dalam Setting Blogspot

Artikel kali ini masih ada hubungannya dengan tulisan sebelumnya Mengenal Fasilitas Blogspot. Sebagai blogger pemula, kadangkala kita akan kebingungan dengan fungsi-fungsi yang tersedia pada blogger. Padahal jika diatur dengan baik kita bisa mengoptimalkan blog kita dengan maksimal.

Pada postingan ini saya akan memberi sedikit penjelasan mengenai fungsi-fungsi dalam menu setting, supaya teman-teman warna-warni bisa lebih mudah untuk mengoptimalkan blognya.

1.  Menu Settings -> Basic

·       Blog Tools untuk restore (import blog), backup (export blog) dan hapus blog secara permanen (delete blog).

·       Title    untuk mengisi judul blog. Judul ini akan muncul di header blog dan halaman search engine (serp).

·       Description  untuk mengisi deskripsi blog. Deskripsi ini akan muncul di bagian header blog.

·       Add your blog to our listing untuk mengatur apakah blog Anda mau ditampilkan pada menu blogger seperti blogger play dan next blog atau tidak.

·       Let search engines find your blog untuk mengatur apakah blog Anda mau di index di halaman mesin pencari Google dan Weblogs.com atau tidak.

·       Show quick editing on your blog untuk menampilkan icon quick edit pada postingan yang berfungsi untuk mengedit postingan secara langsung dari halaman blog.

·       Show email post links untuk menampilkan icon berbentuk amplop pada postingan yang berfungsi untuk memperbolehkan pembaca mengirim link artikel kita kepada orang lain via email.

·       Adult Content  untuk menentukan apakah blog kita mengandung konten porno atau tidak.

·       Select Post Editor untuk memilih jenis post editor yang ingin Anda gunakan.

·       Enable Transliteration untuk mengaktifkan fungsi terjemahan pada post editor kedalam bahasa yang dipilih.

2. Menu Setting -> Publishing

·       Custom domain untuk mengganti alamat dari blogspot.com ke domain sendiri seperti .com, .net, .org, dll

·       Blogspot Address  jikalau custom domain untuk mengganti alamat blogspot ke domain sendiri, maka yang ini untuk mengganti alamat blogspot yang satu ke alamat blogspot yang lain (yang belum terdaftar).

·       Word Verification kode verifikasi.

3. Menu Setting -> Formatting

·       Show at most untuk menentukan jumlah postingan yang mau ditampil pada halaman blog.

·       Date Header Format untuk menentukan format tanggal yang mau ditampilkan diatas judul posting.

·       Archive Index Date Format untuk menentukan format tanggal yang mau ditampilkan pada menu arsip yang terletak di kolom sidebar.

·       Timestamp Format untuk menentukan format waktu yang mau ditampilkan pada postingan.

·       Time Zone untuk menentukan zona waktu tempat tinggal kita. Misalnya (GMT+07.00) Jakarta untuk wilayah Indonesia.

·       Language untuk memilih bahasa yang mau digunakan.

·       Convert link breaks untuk mengatur apakah mau dikonversi kode tag pada post editor secara otomatis. Biarkan Yes saja.

·       Show Title Field untuk menampilkan judul postingan. Jika pilih No maka blogger akan mengambil beberapa kata pada awal paragraf sebagai judul postingan. Pilih Yes saja.

·       Show Link Field untuk menambahkan link yang berhubungan kedalam setiap postingan. Jika tidak ada, pilih No saja.

·       Enable Float Alignment untuk mengaktifkan fungsi penjajaran pada text dan gambar.

·       Post Template untuk mengisi teks yang mau ditampilkan pada kotak posting.

4. Menu Setting -> Comments

·       Comments untuk menampilkan kotak komentar.

·       Who Can Comment untuk menentukan siapa yang boleh memberi komentar.

·       Comment Form Placement untuk menentukan dimana letak kotak komentar.

·       Comments default for posts untuk mengatur apakah mau diberi komentar pada postingan baru atau tidak.

·       Backlinks untuk mengatur apakah mau diberi notifikasi jika ada yang memasang link pada artikel kita atau tidak.

·       Backlinks default for posts untuk mengatur apakah mau mengaktifkan fungsi backlinks atau tidak.

·       Comments Timestamp Format untuk memilih format waktu yang mau ditampilkan pada kotak komentar.

·       Comment Form Message untuk menampilkan pesan singkat diatas kotak komentar.

·       Comment Moderation untuk menyaring komentar yang masuk sebelum diposting.

·       Show word verification for comment untuk menampilkan kode verifikasi jika ada yang ingin memberi komentar supaya terhindar dari sistem bot yang melakukan spam.

·       Show profile images on comment untuk menampilkan gambar profil dari komentator yang memiliki blog di blogger.

·       Comment Notification Email untuk mendapatkan pemberitahuan dari blogger melalui email jika ada yang meninggalkan komentar.

5. Menu Settings -> Archiving

·       Archive Frequently untuk mengatur frekuensi arsip. Misalnya arsip harian, mingguan atau bulanan.

·       Enable Post Pages mengaktifkan halaman posting untuk setiap artikel.

6. Menu Settings -> Site Feed

·       Allow Blog Feed untuk menentukan jumlah karakter artikel yang dikirim via RSS Feed atau Feed email.

·       Post Feed Redirect URL untuk mengisi alamat URL Feed Anda. Jika belum punya dikosongkan saja.

·       Post Feed Footer untuk mengisi teks tambahan pada feed.

7. Menu Settings -> Email & Mobile

·       Blogsend Address untuk mendapat kiriman postingan ke alamat email Anda setiap kali Anda memposting pada blog Anda.

·       Email posting address untuk menentukan alamat email blogger yang Anda inginkan supaya Anda bisa memposting artikel langsung ke blog Anda via email. Catatan: Jangan memberitahu alamat email ini ke orang lain. Jika tidak, orang lain bisa memposting artikel di blog Anda.

·       Mobile Device untuk memposting artikel ke blog Anda via MMS atau SMS dari hp Anda. Cara register dan penggunaanya baca disini.

8. Menu Settings -> OpenID

·       OpenID

Secara ringkas, OpenID semacam identitas Anda di internet. Dengan OpenID Anda bisa masuk ke dalam website yang berbeda-beda yang mendukung OpenID tanpa memasukkan username dan password Anda seperti lazimnya. Keterangan lanjut tentang OpenID baca disini.

9. Menu Setting -> Permissions

·       Blog Authors memperbolehkan orang lain untuk ikut menulis di blog Anda. Caranya klik Add Authors lalu masukkan alamat email orang yang mau diundang kemudian klik Invite.

·       Blog Readers untuk mengatur siapa yang bisa membaca artikel blog Anda.

Demikianlah penjelasan dari masing-masing fungsi yang bisa diatur pada blog Anda. Semoga tidak membuat Anda tambah bingung.

Coretan Selengkapnya...

Cara Posting di Blog

Setelah Anda memiliki blog di blogger, tentunya langkah selanjutnya yang ingin Anda lakukan adalah memposting sebuah artikel (bisa berupa tulisan, gambar, video atau gabungan dari ketiganya). 

Untuk memposting, caranya sangat mudah. Silahkan ikuti langkah-langkah di bawah ini:

1.   Login ke Blogger dengan menggunakan blog id Anda.

2.   Pada menu Dashboard, klik New Post.

3.   Setelah itu, Anda akan masuk ke menu post editor atau kotak posting. Disini terdapat 2 halaman posting yaitu Edit HTML dan Compose.

      Halaman Edit HTML merupakan halaman dimana kode HTML artikel berada, sedangkan halaman Compose merupakan halaman untuk menulis artikel.

4.   Pilih klik menu Compose untuk memposting artikel.

5.   Pada menu Compose terdapat beberapa tool yang sering digunakan untuk memposting.

    : Mengganti bentuk huruf

         : Mengganti ukuran teks

          : Menebalkan huruf

          : Memiringkan huruf

         : Mengganti warna teks

         : Menambah link ke suatu website

          : Rata kiri

          : Rata tengah

          : Rata kanan

          : Rata penuh

          : Mengurut teks berdasarkan angka numerik

          : Mengurut teks dengan bullet

          : Membuat quote/kutipan

          : Mengecek terjemahan teks dalam bahasa inggris

          : Menambah gambar kedalam artikel. Format yang diterima (.jpg, .jpeg, .gif, .bmp, .png)

          : Menambah video kedalam artikel. Format yang diterima (.avi, .3gp, .rm, .wmv)

          : Menghilangkan efek pada teks

6.   Beri judul artikel pada kotak Title.

7.   Kemudian tulis isi artikel Anda pada kotak posting.

8.   Jika sudah, beri labels atau kategori untuk artikel Anda pada kotak labels for this post. Sebagai contoh saya memberi labels untuk artikel ini dengan "blogger, tutorial blog".

9.   Kalau sudah, klik Preview untuk melihat pra tampilannya apakah sudah bagus dan sesuai dengan keinginan atau belum.

10. Kalau sudah sesuai, Klik Publish Post untuk mempostingnya.

11. Kemudian klik (in a new window) untuk melihat hasil postingan anda pada halaman baru.

12. Jika Anda merasa masih ada keganjalan pada postingan Anda. Klik Edit Post pada halaman utama untuk mengeditnya. Jika sudah selesai klik Publish Post lagi untuk mempublikasi ulang.

Selamat berkarya...

Coretan Selengkapnya...