Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!

Ge-eR

Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Buat Widget Related Posts: Pancing Pengunjung Buka Lebih Banyak Posting

Posted by cah ndeso kluthuk

Widget Related Post bekerja berdasarkan label yang dibuat blogger saat posting, sehingga ketika sebuah label digunakan pada banyak posting maka "related posts" akan memuat semakin banyak daftar posting terkait. Hal seperti ini membuat sebuah widget related posts menjadi terasa "sangat pantas dan layak" karena dapat "menjadi salah satu sumber dibukanya lebih banyak posting oleh pengunjung". Jika banyak posting anda mempunyai kwalitas yang baik, dapat dipastikan salah satu atau beberapa link yang terdapat di boks related posts akan "di klik". Menggunakan widget related posts juga memberi nilai lebh sepanjang posting terkait yang ditampilkan tidak terlalu banyak karena akan semakin memudahkan pengunjung memilih posting.

Membuat widget related posts sebenarnya tidaklah sulit. Yang terutama diperlukan adalah ketelatenan untuk memasang dan menyimpan kode yang digunakan, terutama xHTML yang harus disimpan di bagian body diantara tag pembuka dan penutup body (<body> dan </body>). Jika anda menginginkan lebih banyak lagi posting dibaca pengunjung, silahkan ikuti panduan cara menggunakannya di bawah ini:

O..., ya ..., sebelum dilanjut silahkan buka demonya terlebih dahulu. Lihat di kolom posting bagian terbawah (di atas box komentar!

Labels: , , , ,
13 comments
at 3/10/2012

Pasang icon di post-author, post-labels, post-timestamp dan post-comment-link

Posted by cah ndeso kluthuk

Jika anda mencermati di dalam box yang terletak di bawah posting maka akan kita lihat bahwa disana terdapat beberapa data yang berkaitan dengan posting.
  1. Data post autor :
    Berisi nama si penulis posting atau pemilik blog.
  2. Data penerbitan posting:
    Berisi data waktu dan/atau tanggal posting.
  3. Komentar (Comments) :
    Berisi data jumlah komentar posting.
  4. Labels :
    Label berisikan data label yang ditentukan penulis sebelumnya ketika posting dibuat dan diterbitkan.
Seluruh item data inilah yang akan kita tambah dengan 4 buah icon dengan posisi icon tepat di depan teks. Silahkan anda arahkan cursor ke screenshoot di atas untuk memperbesar gambar. Atau mungkin akan lebih jelas lagi apabila anda buka demo melalui link di bawah ini:


D E M O

Labels: , ,
9 comments
at 3/09/2012

Membuat Icon dg Efek css3 di Link List Label Blogger

Posted by cah ndeso kluthuk

Link pada widget label blogger biasanya ditampilkan apa adanya dengan penanda link hanya berupa sebuah penada default yang dihasilkan dari sebuah kode css "list style". Penanda ini biasanya berbentuk cyrcle, disc atau square. Ada cara untuk memberi penanda setiap link list widget label agar berbeda dan bisa dibuat seasuai selera. Sebuah background image dapat kita manfaatkan dan anda dapat secara bebas membuatnya dalam rupa apapun. Icon kecil ini sebaiknya berukuran 10px (height) hingga 16px (height) dengan perhitungan font yang digunakan sebesar 12px atau 11px.

D E M O

Sekalipun dengan merubah penanda link dalam bentuk icon sudah mampu memberi citarasa berbeda, namun apabila kita sedikit menambah kode css3 ke dalamnya tentunya kan menjadi lebih menarik lagi. Efek gerak serupa animasi yang tercipta melalui css3 transition akan membuat icon bergeser ke arah kanan ketika cursor diarahkan di atasnya dan kemudian kembali lagi ketempat semula ketika cursor dipindahkan. Gerak animasi icon link list seperi ini dihasilkan dengan mempermainkan padding atau margin dan css3 transition. Kode css yang digunakan sebagai berikut:

Labels: , , ,
2 comments
at 3/08/2012

Menampilkan Profil Pengunjung dg Hover Effect

Posted by cah ndeso kluthuk

Hoo... ho.... sobat2 blogger tercinta. Kali ini kita akan bermain dengan kode css. Beberapa properti css akan kita manfaatkan dalam sebuah efek hover. Efek yang akan kita dapat cukup mengejutkan sekaligus menghibur, Javascript tidak kita butuhkan, hanya kode css saja bersama beberapa xHTML. Pada intinya, melalui hover effect kita mencoba mengubah atau menukar sebuah image agar ditampilkan sebuah image berbeda. Ya ... ini sangat menarik dan pasti membuat kalian suka atau mungkin saja tertawa sambil geleng-geleng kepala. Ya ... mungkin saja ... atau he ... he ... bisa jadi kalian justru malahan mengumpat nggak karuan. Yahh ... memang bisa2 saja karena segala kemungkinan bisa terjadi.

Sebelum lihat demo berikut kode css dan xhtml serta satu sampel xhtml yang sudah lengkap dengan imagenya, sebaiknya persiapkan dulu cara menyimpan kode css atau xhtml-nya dengan membuka Spesial Tutorials yang terletak disebelah kiri halaman. Anda bisa mempelajari cara backup template, cara cepat cari kode html ataupun berbagai cara menyimpan kode di template. O ... ya ..., setelah buka demo dan mencoba hover effeknya, sampeyan jangan kaget jika image profil sampeyan terpampang dengan cantiknya di halaman blog. Yaaahh... pokoknya jangan marah klo lihat photo sampeyan hilang satu gara-gara tercuri dan tiba-tiba saja bisa muncul melalui efek hover. He ... jangan marah, ya?! Ha.... ha .... ha ...

D E M O

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

Posting » Kamis    KLIWON, Maret, 08, 2012

» Happy Blogging - gubhugreyot «

Labels: , , ,
1 comments
at 3/08/2012

Auto Post Thumbnail - Auto Readmore with CSS3 Effects

Posted by cah ndeso kluthuk

Auto read more pastinya akan sangan bermanfaat bagi semuanya. Dengan auto readmore yang berfungsi secara otomatis menciptakan read more berdasarkan jumlah karakter ini, maka tak perlu lagi ada kata, Aduh ...., read more-nya kelupaan!" Kata yang paling sering terdengar saat posting selesai dan diterbitkan.

Readmore otomatis ini juga tak sekedar read more biasa karena mengikut sertakan javascript yang berfungsi secara otomatis akan menampilkan thumbnail (image berukuran kecil) di setiap box posting dimana read more berada. Anda dapat mengatur ukuran thumbnail dengan merubah nilai width pada javascript. Jika anda menghendaki pengaturan ini sebaiknya lakukan pada desain yang pertama (standart). O,...ya,.. perlu diketahui bahwa kita akan buat 3 macam tampilan thumbnail yang berbeda.

Pilihan tampilan auto post thumbnail:

Labels: , , , ,
5 comments
at 3/06/2012

Cursor Circling Text Trail Teks Berputar

Posted by cah ndeso kluthuk

Cursor ini sebenarnya sangat menarik karena animasinya yang cantik serta mudahnya pengguna melakukan beberapa pengaturan ulang agar circling text trail dapat ditampilkan sesuai keinginan. Hanya satu hal yang terasa amat mengganggu, bahwa circling text trail yang berputar mengitari cursor terlalu sering jadi pengganggu ketika pengunjung mecoba melakukan aktivitas penting seperti copy atau membuka link.

Dalam posting ini kita telah lakukan sedikit perubahan pada javascript agar animasi yang tercipta tidak terlalu berlebihan sekaligus kita juga telah rubah posisi teks terhadap cursor agar sekalipun teks berputar ini selalu setia mengikuti cursor namun tidak lagi menjadi pengganggu yang merugikan. Anda bisa melihat dalam demo dimana terlihat animasi teks berputar sudah berpindah di bawah cursor.

D E M O

Labels: , ,
10 comments
at 3/04/2012

Jozz.. Buat Cursor Animasi ndul Gondal Gandul

Posted by cah ndeso kluthuk

He... masih blom puas dengan persediaan cursor yang sudah terposting? Cihu... Don't worry! Nih satu lagi cursor "antik-cantik" bisa kalian pakai di blogger ato yang lain. Ho.... kompatible lhoh buat semua browser. He... nggak percaya. Buih ... udah cakep, kompabilitasnya bagus, animasi, javascript nggak banyak n..... bisa gondal-gandul seperti "punya sampeyan". Ha .... ha .... ha ... clguk ... glegh .... glegh...

Jika image cursor nggak cocock atau sesuai selera, silahkan ganti imagenya dengan mengganti URL image yang ada di javascript (lihat javascript di bawah!). Beberapa variabel juga bisa diatur untuk memperoleh bentuk paling ideal. Ya,... selera orang khan macam-macam. Ada yang suka kurus kecil hitam, ada yang suka kurus tinggi rambut warna pink dan ada pula yang suka badan tinggi besar plus suka kasih pukulan! He ... he ... iya, nggak?!

Pengaturan dapat dilakukan pada ukuran cursor (image), jarak setiap image cursor, jumlah image cursor, efek pantul cursor serta beberapa yang lain. He ... lengkap banget, ya?!

DEMO : Cursor Animasi

Labels: , ,
4 comments
at 3/03/2012

Trick Membuat Scrollbars di Sebelah Kiri

Posted by cah ndeso kluthuk

Sampeyan semua pasti tahu kalau scrollbars posisinya selalu di kanan box. Scrollbars ini bukan sesuatu yang tabu untuk dipindah tempatnya agar berbeda dari biasanya. Ya ... bukankah membuat sesuatu terlihat berbeda itu cukup penting. Sampeyan juga sudah pada tahu, toh, bangsa kita selalu mengagung-agungkan dan menjunjung tinggi keberbedaan. "Bhinneka Tunggal Ika! Sekalipun betbeda-beda tetapi tetap satu jua. He... he ... ini berlaku juga untuk scrollbars. Sekalipun berbeda dengan posisi di sebelah kiri, namun fungsinya tetap satu jua! Ho... ho ... iya, nggak? Bukankah yang penting fungsinya tetap normal-normal saja?! Klo diseret ke atas dia ikutan naik begitu pula klo di seret ke bawah dianya ikutan turun ke bawah?

Membuat scollbars di posisi sebelah kiri bisa dilakukan dengan 2 cara:

Labels: , ,
4 comments
at 3/01/2012

Cara Membuat Pengunjung Tekun Membaca Posting

Posted by cah ndeso kluthuk

Sekali kali membuat pengunjung blog bingung dan pusing atau bahkan hingga mau muntah-muntah bukanlah hal yang tabu. Ya..., sekali-kali sebagai hiburan bagi gubhugreyot sekaligus anda juga. Bukankah saat ini anda sedang mencoba bertekun untuk membaca kata-demi kata sambil kepala di gelengkan ke kanan dan ke kiri serta mata memicingkan mata dan dahi berkerut-kerut? Ha ... tak apa ... lanjutkan saja saja sambil meringis atau mengumpat sepuas-puasnya.

Membuat posting seperti ini hanya sekedar intermezo ditengah kelelahan akibat keracunan ngeblog. Penyakit yang terasa membelenggu aktivitas lain sehari-hari. Lha, gimana tidak orang klo sehari blom buat posting pantat rasanya jadi gatal-gatal. Yah... daripada kukur-kukur lebih baik pencet keyboard trus beri anda sebuah tablet pemusing kepala. He ... posting ini ibarat tablet yang bikin penasaran sekaligus juga bikin jengkel. Buh..., ya, nggak?

Kode yang digunakan untuk membuat posting seperti ini:

<div style="unicode-bidi:bidi-override;direction:rtl;text-align:left;">Tulis teks di sini !</div>

Sebaiknya anda tidak tidak berlama-lama karena dikuatirkan perut akan menjadi terasa mual hingga kepala semakin berat ... berat .... berat ... kemudian lolongan panjang akan segera keluar dari rumah tetangga. Ha .... Nggak tau tuh lolongan apa. Lolongan anjing kayaknya juga nggak. Lolongan penuh kemikmatan kali, ya?!

Jika pingin baca dengan gampang tanpa perlu mata melotot bekedip-kedip, silahkan copy dan pastekan di manapun anda suka! He .... he .... gampang, ya, ternyata?!!! Ha .. ha ... yo kita ketawa bareng! Satu, dua, tiga .... ha ... ha ... ha ...

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

Update » Rabo PON, February, 29, 2012

» Happy Blogging - gubhugreyot «

Labels: ,
0 comments
at 3/01/2012

Tambahkan 2 CSS 3 property dan Wow .... Keren....!!!!

Posted by cah ndeso kluthuk

Ya... hanya 2 (dua) css3 property dan semua berubah dengan luar biasa. Kita hanya akan gunakan css3 text-shadow property dan css3 transition property. Text shadow berfungsi memberi efek bayangan pada teks dan css3 transition akan kita gunakan pada setiap link blog agar menampilkan transisi warna ketika cursor berada di atasnya (disorot, kang! He... pakai senter, lagi... ha... ha...).

D E M O

Silahkan buka link di bawah ini dan lihat efek yang terjadi pada blog setelah 2 property css 3 digunakan.

D E M O

Labels: , , , ,
0 comments
at 3/01/2012

Trik Percantik Image Posting dg CSS3 Border Radius Property

Posted by cah ndeso kluthuk

Ini benar-benar trik sungguhan. He... Sungguh, lhoh! Tak banyak blogger yang tahu cara ini. Yah ...mungkin saja baru di gubhugreyot saja yang ada (uhuiii...Sombong dikit boleh, khan?!). Bener! Sungguh! Hui ... katanya suruh banyak posting yang original! Yang jelas aku sudah coba browsing dan tak ketemukan satupun yang sama dengan "teknik & trik" yang coba aku gunakan. Tapi .., ya .. itu, nggak tahu klo browsingnya ada nyang kelewat. Oi ... namanya juga manusia, broer..., mas... mbak , bu..., mbah, kek..., ... mbuh sopo maneh... sik rung tak sebut!

Dengan cara baru ini semua menjadi terasa gampang, cepat dan bisa dilakukan siapa saja. Sebenarnya,sih, ada cara lain yang sangat-sangat simpel kode html-nya, tapi sayang di opera nggak support seperti di Safari, Crhome atau mozilla ... Yah ...tak apalah, sementara kita gunakan cara yang ini dulu. Yang penting sampeyan semua jadi lebih bisa berimprovisasi dengan gambar-gambar di blog (gambar posting dan yg lain).

D E M O


Gambar di atas dan yang di bawah ini salah satu contoh image yang dibuat menggunakan css3 border radius (rounded corners) dengan memainkan border radius dalam nilai persen (%). Dalam tutorial ini juga tak disertakan xHTMLnya karena semua kode tersedia di halaman demo.



Silahkan lihat contoh gambar lainnya melalui link demo di bawah ini:

DEMO: Klik untuk lihat demo lain beserta xHTML-nya!

Labels: , , , ,
8 comments
at 3/01/2012
Langganan: Postingan (Atom)
 
GR | Edited by | gubhug reyot