Buat Variable Definitions u Background, Teks & Border Blogger Threaded Comment

Sebuah cara untuk mempermudah memilih jenis font, warna teks, warna background dan border di kotak komentar blogger. Dengan membuat sebuah variable definitions yang berkaitan dengan ke empat variable di atas, maka blogger akan lebih mudah mengganti font, warna teks, background dan border kotak komentar dengan memanfaatkan fitur Ubah suaian » Perancang Template Blogger. Jika sebelumnya anda hanya bisa merubah beberapa variable deperti warna background header, body, font posting, sidebar dan beberapa yang lain, maka dengan adanya variable definitions kotak komentar akan ada tambahan item kotak komentar ("GR Kotak Komentar") yang berisi pilihan font, warna font, background dan border, seperti yang dapat anda lihat di gambar (Silahkan klik gambar untuk memperbesar)

Solusi jitu ketika button reply comment tak berfungsi - Blogger New Threaded Comments

Kasus tidak berfunginya button reply comment di New Blogger Threaded Comment ternyata tak hanya dialami oleh satu atau dua blogger saja. Sangat banyak yang mengeluhkan permasalahan ini, termasuk satu diantaranya 'gubhugreyot sendiri". Salah satu blog yang aku gunakan selama hampir dua bulan aku biarkan tanpa fungsi reply comment yang normal fungsinya. Button teks reply comment memang tetap "nyanggong" di tempatnya, tapi ketika di klik tak ada reaksi apapun yang muncul. Button reply comment Blogger New Threaded Comments tersebut tetap diam membisu "sekalipun di embat pakai martil". He ... benar-benar bikin jengkel dan putus asa! Dus ... akhirnya setelah dua bulan satu solusi akhirnya aku temukan juga. Javascript Threaded Commentlah yang menjadi masalah mengapa si button reply tak dapat bekerja dan diam membisu sekalipun "di klik beribu kali".

CSS only: Displays "Admin and Signature" on Author Comment in Blogger New Threaded Comments

Mengembangkan apa yang sudah terpostingkan sebelumnya tentang "Cara membuat background berbeda pada Author Comment di Blogger Threaded Comments menggunakan kode css (Only CSS: Hightlight Author Comment in Blogger Threaded Comments)", kali ini kita akan menambahkan sebuah background image yang berupa teks "Admin" atau "tanda tangan pemilik blog". Penambahan "Admin" atau "Tanda Tangan Author" pada Author Comment akan membuat setiap tanggapan komentar yang diberikan author (pemilik blog-penulis) mempunyai warna background berbeda dan disertai "teks Admin" atau "tanda tangan" di sisi sebelah kanan bawah. Anda bisa melihat contohnya (demo) dengan membuat sebuah komentar di posting ini dan kemudian melihat tanggapan komentar yang nantinya akan kami berikan.

CSS Only: Highlight Author Comment Blogger's New Threaded Comments

Setelah beberapa waktu berkutat dengan keruwetan "Bloggers New Threaded Comments", akhirnya ketemu juga sebuah solusi untuk membuat warna background berbeda pada Author Comment di sistem Threaded Comments Blogger yang baru. Jika pada beberapa tutorial yang kini banyak dipostingkan oleh blogger sejagad dibuat menggunakan jQuery (jQuery Highlight Author Comment Blogger's Threaded Comments - dibuat oleh blogger India?), melalui gubhugreyot "Tutorial Blogger | gubhugreyot ini kita akan membuatnya hanya menggunakan kode CSS.

Menggunakan kode CSS untuk membuat "Highlight Author Comment Blogger's New Threaded Comments" tak hanya sekedar untuk membuat warna background berbeda pada author comment. Dengan menggabungkan sebuah image (background image) dapat juga ditampilkan "kata Admin" atau berbagai teks lain seperti misalnya "tanda tangan author", baik dalam bentuk teks ataupun image (melalui background image). Bahkan kode css ini masih bisa dikembangkan lagi dengan menggabungkan css2 dan css3 untuk menciptakan beberapa bentuk animasi melalui hover effect. Satu hal nyata yang membuat penggunaan kode css mempunyai nilai lebih atau keunggulan dibandingkan jika menggunakan jQuery adalah pada pembebanan loading blog. jQuery akan menambah beban blog jauh lebih besar dibandingkan kode css. Diluar hal tersebut "mengembangkan penggunaan kode CSS akan jauh lebih mudah dilakukan siapapun dibandingkan javascript". Dari pertimbangan di atas, kini menjadi hak anda untuk menentukan dan memilih di antara keduanya. Mo pakai jQuery atau yang hanya menggunakan kode CSS?!

Jika anda ingin melihat hasilnya, silahkan coba berikan komentar di posting ini dan untuk selanjutnya akan kita berikan tanggapan komentar agar anda bisa melihat seperti apakah tampilan "Highlight Author Comment Blogger's New Threaded Comments" yang dibuat hanya dengan kode css.

Trick Buat Blog/Template jadi Threaded Comments

Yang dimaksud membuat template atau blog menjadi blog dengan system threaded comment adalah apabila blog/template yang anda gunakan belum dilengkapi dengan button teks yang berfungsi untuk "membalas komentar". Button teks ini terletak tepat di bawah komentar dalam comment box. Threaded Comment adalah barang yang masih cukup baru bagi blogger/blogspot. Threaded Comment kini membuat comment box blogger menjadi sama seperti yang ada di wordpress.

Threaded comment sudah disertakan pada Blogger Template Designer (New Blogger Template). Untuk Template Tata Letak (Layout Template) dan Template Klasik dan beberapa template diluar template blogger (hasil download free blogger template) masih belum menggunakan system threaded comment. Agar template menjadi threaded comment beberapa kode css dan xHTML harus di tambahkan (modifikasi template).

D E M O

Anda bisa melihat dan sekaligus mencoba threaded comment hasil modifikasi yang dilakukan terhadap blog ini dengan cara memberi tanggapan komentar melalui button text "balas" (Modifikasi dilakukan terhadap Template Tata Letak - Layout Template - Template Lama yang sudah digunakan sejak tahun 2009).

Template non-Threaded Comment :

Trick Ampuh Pastikan Ukuran Background Header Blogger Template Designer

Membuat background image di header blog "gampang-gampang susah", tetapi juga "susah-susah gampang". Memilih dan menentukan "image (gambar)" yang akan dijadikan background header jelas-jelas adalah awal "munculnya penyakit bingung" yang bikin kepala mot-mot-an. Banyak memang gambar yang dapat kita cari dan temukan. He.... bagus-bagus lagi! Tapi, begitu saatnya harus menentukan satu yang dirasa cocok dan pas...., uah.... bingun (he..he... bingung, broer!). Mo yang bentuk gambar pemandangan, bunga nyang bru mo mekar, lukisan abstrak, photo monyet menari, kerbau lagi berak atau ..... gambar ayam jago ma betina nyang lagi main-kejar-kejaran? He... kalian ... nggak usah terlalu njelimet mikirnya. Ambil satu gambar, buat ukurannya yang pas lalu upload di blogger dan ... segera lihat hasilnya! And .... klo bosan ... he ... buat lagi yang baru! Hiii... gampang, toh. Satu persoalan nyang bikin bingun (e...eh ... kok bingun lagi, sory ... sory ...!!) teratasi sudah. Kemudian masih ada lagi persoalan baru. Gimana, ya, cara pasangnya?! Hoo... ini mah gampang. Login aja ke blogger kemudian lakukan "Edit pada elemen header di Page Elements (Elemen Laman)". Habis ini baru satu lagi persoalan baru muncul dan benar-benar bikin kepala sedikit "mo pecah". Berapa sih sebenarnya ukuran width dan height yang diperlukan untuk "si background header blog?".

Bagi kalian yang sudah terbiasa pakai "Adobe Photoshop" memang bukan lagi jadi persoalan serius (meski mungkin tetap nggak bakalan sekali jadi membuatnya) namun bagi beberapa sobat blogger yang lain pasti ini akan jadi persoalan besar yang "akhirnya lebih sering jadi pembangkit keputusasaan". Satu yang terpenting ketika akan membuat background image di header Blogger Template Designer (Perancang Template Blogger) adalah "Jangan sekali-kali gunakan tool Susutkan agar sesuai atau dalam bahasa londo-nya Shrink to fit". Menggunakan tool ini hampir tak ada manfaatnya karena background header tak akan pernah sesuai dengan lebar dan tinggi header sesungguhnya. Jika sampeyan pernah mencobanya pasti akan tahu betapa justru blog jadi kacau balau nggak karuan.

Mengatasi persoalan menentukan width dan height background header "dengan tingkat akurasi 99,99% dapat kita lakukan dengan bantuan jQuery dan sedikit script. Sampeyan tak perlu menyimpan kodenya secara permanen karena hanya dibutuhkan untuk sekali penggunaan. Cukup copy seluruh kode kemudian simpan melalui widget HTML/Javascript (Elemen Laman | Add a Gadget | HTML/Javascript). Lanjukan dengan buka blog dan yang terakhir cari serta klik button pencari lebar dan tinggi header blog. Lha.... setelah ketemu tinggi dan lebar header-inner yang dibutuhkan untuk membuat background image, segera hapus kembali jQuery dan scriptnya.

Cara menggunakan kode

Agar lebih cepat dalam membuat background image di header blog, silahkan buka yang ini terlebih dahulu.

Tips & Trick membuat background image header blog

Obeng dan tang di blog sebuah Panduan Quick Edit

Kembali aku pingin sedikit mengungkap tentang obeng dan tang serta berbagai tutorial blogger maupun panduan blogger yang banyak memuat tentang obeng dan tang atau tang dan obeng ini. Anehnya kalau kita coba mengamati gambar tersebut, yang kelihatan sebenarnya bukanlah obeng dan tang, melainkan obeng dan kunci pas seperti yang biasa di gunakan para montir untuk memperbaiki mobil dan sepeda motor. Beruntunglah mereka yang di luar Blogspot! Nggak pernah bingung untuk coba membuang obeng dan tang-nya. Habis memang nggak ada, sih! Di  BlogDETIK, misalnya, setelah aku coba belajar BlogDETIK tentang desain temanya (templatenya), ternyata juga nggak kutemukan barang yang namanya jadi amat terkenal di jagad maya ini. Aneh memang si BlogSpot ini. Nggak pilih yang enak di makan, malahan pilih obeng dan tang yang justru banyak di buang orang, he ....

O ..., ya ... sebelum aku teruskan mengoceh untuk melepas kantuk sehabis posting, jika sampeyan mau menghilangkan gambar obeng dan tang di blog kalian, silahkan KLIK di link ini :

Panduan Blogger: Cara Menghilangkan Gambar Obeng dan Tang

Bung, mas, mbak, pak, dik, bu, tante, mbah, kek .....Pernahkan sampeyan melihat orang membuang tang dan obeng ? Barangnya masih kinyis-kinyis, lho! Masih terbungkus rapi dalam plastik dan belum belepotan oli sama stempet. Ditanggung dijual pun masih laku keras, he .... Kalau memang mau dan buat simpanan atau jaga-jaga barangkali ada orang yang butuh mau perbaiki sepeda kumbang, atau .... eee ... barangkali rumah sampeyan dimasuki pencuri, tang atau obengnya bisa buat mukul atau ngelempar kepalanya biar benjol sebesar telur kerbau kemudian lari terkencing-kencing .. ha ... Klo mau, nich, cari saja disekitar rumah blogger. Banyak, kok, yang pada buang tang sama obeng baru. Benar-benar baru dan asli barang impor, lho. Tu ... tuh ..., yang buat langsung dari

Buat Teks Ucapan Terima kasih di atas Kolom Komentar: Tutorial BloGGeR Edit Template

Arahkan cursor di atas gambar di bawah ini!

Pikiran yang terlalu fokus pada posting akhirnya banyak melupakan hal lain yang bisa dilakukan blogger untuk memoles blog supaya terlihat lebih menarik, cantik dan ramah. Bukankah bukan orang saja yang harus ramah?! Blog tak ubahnya penampilan sampeyan sendiri ketika harus jualan jamu atau obat penumbuh rambut (dari ujung kepala bothak, kumis, bawah perut hingga ujung jari). Harus tampil penuh senyum, sedikit banyak omong dan tampil cantik atau sangar (berewokan : bagi yang jual obat penumbuh rambut!). KLIK gambar di atas untuk melihat bentuk baru kolom komentar yang telah ditambahkan kalimat ucapan terima kasih!

Sebuah kata sambutan atau ucapan terimakasih bisa kita tambahkan di atas kolom komentar untuk memberikan kesan bersahabat pada para pengunjung. Bentuk kalimatnya bisa anda pilih sendiri. Mo pakai bahasa daerah, bahasa indonesia ataupun bahasa Inggris, saya serahkan ke sampeyan. Yang penting

Cara Merubah dan Menghilangkan Kode Verifikasi (Captcha) di Kolom Komentar

Merubah setting kolom komentar mungkin perlu dilakukan untuk mempermudah pengunjung saat menuliskan komentar. Beberapa perubahan dapat dilakukan dan di waktu yang lain bisa dikembalikan lagi ke keadaan semula atau dilakukan setting baru. Beberapa perubahan sederhana, yang bersifat mempermudah pemberian komentar dimaksudkan untuk :

1. Memperbanyak komentar masuk.
2. Mempercepat proses penulisan dan penerbitan komentar.
3. Mempermudah layanan bagi pengguna yang belum terbiasa memberi komentar.

Hal yang perlu kita sadari, bahwa tidak semua pengunjung blog mengetahui secara detail prosedur

Scroller with a size range

Sebuah auto scroller yang super sederhana dan dapat bekerja sebagai auto scroller berdasarkan jarak (range), namun demikian bisa dimanfaatkan sebagai scroll to top controll dan scroll to bottom controll. Saat difungsikan sebagai scroll to top controll dan scroll to bottom controll, javascript ini amat mempermudah blogger untuk menggunakan. Sedikit akan lebih sulit jika kita menggunakan sebagai auto scroller yang berdasarkan range (jarak menggulung) karena harus melakukan perhitungkan (memperkirakan) titik pemasangan scroller dan titik targetnya.

D E M O

Menggunakan sebagai Scroll to top/bottom controll:

Copy text to clipboard

Script ini digunakan untuk menciptakan fungsi copy text to clipboard dan hanya kompatibee di Internet Explorer. Untuk menggunakannya, silahkan simpan script berikut ini di bagian head di antara tag <head> dan tag </head>

Javascript :

<script>
bBool=false
var copiedtext=""
var tempstore=""
function initiatecopy() {
bBool=true;
}
function copyit() {
if (bBool) {
tempstore=copiedtext

document.execCommand("Copy")
copiedtext=window.clipboardData.getData("Text");
if (tempstore!=copiedtext) {
alert(copiedtext);
}
bBool=false;
}
}
document.onselectionchange = initiatecopy

document.onmouseup = copyit
</script>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «

Javascript Auto Page Scroller

Seperti halnya scroll to top controll, page scroller juga berfungsi sebagai penggulung halaman web/blog. Kalau scroll to top controll hanya berfungsi menggulung halaman ke bagian atas, page scroller berguna untuk menggulung halaman ke atas dan ke bawah, sehinngga contoll auto scroll juga menggunakan 2 buah image yang disusun secara berurutan. Untuk menggulung halaman ke atas atau ke bawah dilakukan dengan cara meletakkan cursor di atas auto scroll controll.

Untuk menggunakan auto page scroller anda harus menambah xHTML dan javascript di atas tag penutup body (</body>).

D E M O

xHTML :

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0" style="width:40px;height:40px;padding:80px 0 0 0;"><img src="https://lh5.googleusercontent.com/-f6o-2nvzN_s/T2h9Gz6J9qI/AAAAAAAAAc8/qSYxVe863rg/h120/green-circle-arrow-up-40x40.png.png" style="border:0 solid;padding:0;margin:0;box-shadow:0 0 0 #fff;"></a>
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0" style="width:40px;height:40px;padding:0 0 40px 0;"><img src="https://lh4.googleusercontent.com/-iOtX-VEfSPU/T2h9HeSOUoI/AAAAAAAAAdA/KzaDBjZxbZM/h120/green-circle-arrow-down-40x40.png" style="border:0 solid;padding:0;margin:0;box-shadow:0 0 0 #fff;"></a>
</div>

jQuery-CSS3 Scroll To Top Controll

jQuery Scroll to top Controll berfungsi sebagai sebuah penggulung halaman otomatis yang disertai pengaturan kecepatan menggulung (scroll). Kecepatan scroll bersifat dinamis, dimana semakin jauh jarak ke atas halaman maka kecepatan scroll akan semakin bertambah. Contoll back to top dapat dibuat dalam bentuk bentuk teks link dengan posisi berpindah-pindah dengan jumlah tak terbatas, namun dapat juga dibuat sebagai controll statis dengan posisi selalu terlihat di halaman blog. Posisi controll dapat diatur disudut kanan-bawah, kiri-bawah, kanan-atas, kiri-atas atau berbagai tempat yang lain dengan melakukan pengaturan pada javascript (offsetx:5, offsety:5). Berbeda dengan jQuery Scroll to top controll yang lain, pada scroll to top contoll yang akan kita buat ini telah menyertakan beberapa effek dari css3 serta penambahan kode css2 untuk menggantikan tips/tooltip default. Tentu saja perubahan ini membawa pengaruh yang sangat besar hingga memperlihatkan perubahan tampilan jauh berbeda.

D E M O

Cara Membuat :

Bedah Posting gambar dan photo ; fungsi margin

Aku suka sekali dengan sesuatu yang berkaitan dengan gambar. Dengan mengupas margin di KODE posting gambar berarti ada satu lagi photo wanita cantik yang akan menghiasi blog.

Margin berpengaruh besar dan mempunyai peran vital untuk menciptakan keseimbangan posting, terlebih pada posting yang melibatkan teks dan beberapa gambar. Pengaturan margin akan membuat kita mampu untuk menata mau di bentuk seperti apakah ruangan posting kita. Margin berfungsi untuk menjadi penentu jarak satu bidang dengan bidang yang lain. Misalnya antara teks dengan gambar, gambar dengan gambar yang lain, atau teks dengan tepi ruang posting. Fungsi margin yang lebih luas dalam sebuah blog adalah menjadi penentu jarak setiap ruang blog. (Sepuramu , Dul, aku selalu menggunakan bahasa-bahasa yang gampang dimengerti semua orang karena aku sendiri pusing untuk memahami bahasa dan istilah resmi yang umum digunakan mereka yang cerdas dan mempunyai daya ingat brillian sehingga apaun istilah yang ada di blog, template, internet, dst..dst.., pasti tahu dalam bahasa "pakem"nya. Gen wae, ya, Dul?! Cen bisa ku yo gur semene, kok!!! he....ha...hua...guk..guk..!!!).

Margin umumnya dituliskan dalam nilai pixel atau px (atau biasa juga pakai em --> 1em berkisar 18px) dengan nilai dari minus (-) , 0(nol) dan +(plus). Tanda yang disertakan hanya ketika kita menggunakan nilai minus (-). Besarannya terserah kita mau pakai berapa. Untuk pemakain nilai nol (0) , kadang-kadang nilai pixelnya juga tidak disertakan, sehingga ditulis nol (0) begitu saja.

Margin di gunakan di semua sisi ruang (ada 4 sisi). Dalam penerapannya bisa digunakan secara bersama-sama ataupun terpisah.

- Contoh :

Mengenal lebih dekat ruang untuk posting (4)

Panduan BloGGeR dan Tutorial BloGGeR Halaman Posting :

1. Opsi Entri : memberikan pilihan bagi anda untuk mengijinkan komentar terhadap posting atau tidak.
2. Judul : Judul Posting --> Sebaiknya di tulis sebelum menuliskan posting.
3. Pratinjau : berfungsi untuk melihat hasil sementara posting sebelum diterbitkan.
4. Label : Label merupakan bagian kelompok terbesar dari posting yang mempunyai materi serupa. Label biasa disebut juga sebagai kategori. Pada Setiap blog materi posting akan terbagi menjadi beberapa label sesuai dengan content/isi posting. Penggunaan label akan mempermudah para pengguna blog dalam mencari posting yang di inginkan.
Jika anda memperhatikan halaman blog, label ini akan membuat hasil posting anda yang diberi label sama terkelompokkan menjadi satu.
5. Tunjukkan semua: hanya berfungsi untuk membuka/memperlihatkan semua bagian yang disembunyikan dan tidak akan berpengaruh apapun.
6. TERBITKAN ENTRI: berfungsi untuk menerbitkan entri atau posting yang telah selesai dikerjakan.
7. SIMPAN SEKARANG: dilakukan dalam kondisi tertentu yang

Mengenal lebih dekat ruang untuk Posting (3)

Panduan BloGGeR dan Tutorial BloGGeR Halaman Posting :

Fungsi Toolbars pada MODE HTML

1. b : Membuat huruf/teks tebal.
2. i: Membuat huruf/teks italic atau miring.
3. Untuk membuat link : caranya pilih text yang akan di jadikan tautan kemudian isi URL-nya. Misalnya :Buat blog gratis , URL untuk tautan http://www.blogger.com. Ketika Buat blog gratis di KLIK maka akan muncul halaman bogger. bentuk KODE HTMLnya seperti ini :,

Mengenal lebih dekat ruang untuk Posting (2)

Panduan BloGGeR dan Tutorial BloGGeR Halaman Posting :

Fungsi Toolbars pada MODE Tulis

\

Ayo, Jo .., belajar lagi bareng-bareng. Kita lihat bersama gambar di atas. Klo mau lihat lebih jelas buka kau punya gambar atau KLIK gambarnya. Oke, Kita nggak kasih tanda apa-apa, karena akan fokus satu persatu mulai dari sebelah kiri. (Sisih kiwo, Jo!)

01. Font : ada 8 jenis font yang bisa kita gunakan sehingga bentuk teks bisa kita buat sesuai dengan pilihan. Caranya : KLIK tanda panah --> KLIK Jenis font-nya
02. TT : ada 5 ukuran font. Cara penggunaanya :

Mengenal lebih dekat ruang untuk Posting (1)

Panduan BloGGeR dan Tutorial BloGGeR Halaman Posting :

Aku nich mau nulis jadi terhenti secara tiba-tiba. Pikiranku spontan melayang ke arah yang sama sekali nggak ada kaitannya dengan apa yang aku mau tulis. Mak..dheg...Aku kok tiba-tiba kepikir tentang susunan kabinet baru yang katanya siap bekerja untuk rakyat (bukan untuk korupsi, Jo!) di masa baktinya tahun 2009 s/2014 ini. Kenapa, ya...Kok hanya ada 5 wanita (klo kupingku nggak penuh kapuk dan kapas, lho?!) yang ikutan duduk di kursi putar (jatah kursinya khan di puta-putar keliling partai dulu, JO!)? Ah..., aku jadi prihatin banget sama "makhuk ciptaan terindah di bumi (wanita)" ini. Khususnya di negeri kita yang adil makmur kaya raya (?!) dengan pertumbuhan ekonomi yang melesat bagai nak panah (bukan anak ayam yang bisanya cuman ciat...ciet.., Jo), ditengah keterpurukan ekonomi dunia, yang bahkan membuat sang kaisar (Amrik, Jo) juga ikutan mengerang kesakitan, dan di era ketika untuk pencalonan legislatif saja sudah diupayakan untuk dapat jatah (kayak jatah raskin saja, ya...,Jo..?) 30% kuota perempuan... e...e...kok mak penthelus gur limo...(cuma lima maksudnya, Jo...Mbok ya mudhengan dikit, Jo). Ah...Seandainya...,