Cumulus swf - flash

Bru masuk angin!

Arsip...

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

Memanfaatkan Post Author untuk Menampilkan Photo Blogger/Image dengan Animasi Menggunakan CSS3

Posted by cah ndeso kluthuk

Dengan memanfaatkan celah yang ada, kita akan buat blog semakin mengejutkan bagi pengunjung. Melalui Post Author yang terletak di bawah judul posting sebuah photo blogger muncul secara tiba-tiba ketika cursor menyentuh teks Post Author. Untuk membuat animasi cantik yang sama sekali belum tersentuh oleh satupun tutorial blogger ini, kita akan memanfaatkan CSS3 transition yang dipadukan dengan kode HTML yang lain guna menciptakan sebuah bentuk animasi. Tak banyak kode yang diperlukan, tetapi sebuah modifikasi template perlu dilakukan. Nggak akan sulit, sobat! Dalam waktu setengah jam pasti akan kelar dan sebuah "animasi atraktif layaknya sulap" siap menghiasi blog sampeyan. Mau lihat yang sudah terpasang di blog? Nih..., klik link demo di bawah ini!

D E M O

Setelah membuka link demo, silahkan arahkan cursor pada Post Author di bawah judul posting sebelah kanan dan lihat apa yang akan terjadi!

Labels: , , ,
0 comments
at 10/28/2010

Trik Menipu Pengunjung dengan Merubah Jumlah Komentar

Posted by cah ndeso kluthuk

Menipu pengunjung? Pantaskah hal seperi ini dilakukan? He .... he .... he .... Semua tergantung sampeyan! Mo dilakukan, boleh, mo, tidak, juga boleh! Heh ... he ... ini bukan sebuah "kalimat restu" untuk menggunakan trik ini, tapi memang beberapa pengunjung blog lebih suka sedikit ditipu dengan hal yang terlihat manis. Entahlah ..., ini "sudah suratan" atau memang "kebiasaan jelek yang nikmat". Dalam banyak kasus (tentu saja tentang blog) acap kali terjadi pengunjung lebih suka melihat atau belajar dari blog-blog dengan "nama besar" sekalipun sebenarnya apa yang terposting tak lebih dari "omongan manis semata". Ya ..., dan hal seperti ini membuat blogger baru dengan "posting berkualitas" hanya bisa "berjalan bagai siput" untuk sekedar meningkatkan popularitas. "Ah ...., blogger baru, nich! Buh ..., posting juga cuma belasan", dan "slap", blog kembali menghilang dari layar hanya karena posting masih sedikit serta tak satupun komentar tertulis. Di bagian kolom komentar akan tertulis "0   Komentar:". Yah mereka sering hanya melihat permukaan tanpa mencoba menelaah isi dalamnya. Mungkin saja blog tersebut sebenarnya berisikan banyak posting berkualitas. Yah ... bisa saja terjadi!

Merubah pernyataan jumlah komentar blogger merupakan sebuah trik untuk mempengaruhi pengunjung secara psikologis dengan mencoba memunculkan rasa penasaran ketika melihat jumlah komentar yang masuk sudah mencapai angka lebih dari 10 komentar. Trik seperti ini banyak dilakukan sekalipun dengan cara berbeda. Mungkinkah trik ini akan berhasil? He ... he .... Tentu saja sampeyan harus mencoba membuatnya terlebih dahulu baru kemudian melihat hasilnya melalui monitoring dan evaluasi!

D E M O

Bagaimana membuat trik ini?

Labels: , , ,
4 comments
at 10/27/2010

Adding Tooltip on Read More: Menambah Tooltip di Read More

Posted by cah ndeso kluthuk

Sebuah tootip cantik "si ZigZagTooltip" telah terposting dan semoga bisa memberi nilai lebih pada blog sampeyan semua para sobat ngeblogh. Kini sebuah pengembangan penggunaan "si ZigZagTooltip" dapat sampeyan manfaatkan. He ... he ... Tentu saja "sebuah gaya yang baru lagi". He ... he ... Lihat saja judul di atas!. Ini namanya memaksimalkan apa yang sudah kita miliki. Tooltip tidak sekedar bisa dipakai untuk posting atau di widget blog semata. Dia bisa dimaksimalkan untuk berbagai kebutuhan yang lain.

Membuat tooltip di read more cukup dilakukan dengan menambah sebuah DIV (berlaku di ZigZagTooltip) di antara tag pembuka <body> serta tag penutup </body> . Jika sampeyan ingin membuat tampilan baru di blog seperti yang dimaksud dalam judul di atas, maka silahkan sampeyan buat dulu ZigZagLap Tooltip dengan membuka link di bawah ini:

ZigZagLap Tooltip

Sampeyan juga bisa mencarinya di blog ini di tutorial sebelumnya yang hanya berselisih satu posting. Yah ..., sekaligus sambil lihat-lihat tutorial yang lain barangkali ada yang cocok di hati.

Cara Membuat atau Menambah Tooltip di Read More

Labels: , , ,
0 comments
at 10/24/2010

Pasang Auto Scroll di Widget SMS Gratis dengan CSS3

Posted by cah ndeso kluthuk

Sebuah trend baru agaknya memang harus diikuti sepanjang bermanfaat bagi pengunjung. Satu lagi yang lagi banyak penyuka! Widget SMS Gratis! Layanan SMS tanpa bayar yang membuat siapapun boleh kirim SMS sesuka hati tanpa bayar! Hooo ho .... Siapa yang nolak? Sampeyan mau? He... heh ....

Ada satu catatan yang sedikit membuat hati "agak kurang sreg" dengan widget baru ini. Tampilannya yang terkesan apa adanya sungguh membuat sedikit kekecewaan. Yah widget semenarik ini kenapa nggak dibuat lebih keren. Yap , stidak-tidaknya klo dipajang di blog nggak justru membuat tampilan tambah amburadul gitu, lhoh!

Heh ... heh ... Tapi nggak usah kuwatir, nggak usah bingung. Nih, ada sebuah auto scroller yang khusus aku buat untuk mempercantik tampilan si widget SMS gratis. Dengan auto scroller yang menggunakan CSS3 border-radius, CSS3 drop-shadow/box-shadow dan CSS transition serta bebeapa kode CSS lain, tampilan widget nggak lagi terlihat "ndeso"! Ho .... sampeyan nggak percaya?! He ... eh ... Emang dasar! Klo nggak lihat barangnya pada nggak mo percaya! Nih, buka link demonya! Jangan lupa lihat di bagian bawah sebelah kanan! Oi .... Cantik, khan?! (Eit .... blom buka demonya kok nanya! Dasar, gubhug derita!)
D E M O

Ada dua macam widget yang saat ini digunakan (ukuran tinggi dan lebar), dalam tutorial blogger ini juga akan aku sertakan dua macam kode CSS. Yang pertama untuk widget SMS Gratis berukuran (lebar 240px) dan yang ke-2 untuk Widget SMS Gratis dengan ukuran lebar 270px.

Auto Scroller Widget SMS Gratis dengan Lebar/width 240px

Labels: , , , ,
8 comments
at 10/23/2010

Membuat Javascript-jQuery ZigZagLap Tooltip

Posted by cah ndeso kluthuk

Tooltips! Ah ..., aku sungguh sangat menyukai ini. Sebuah desain yang tidak saja bermanfaat bagi pengunjung, akan tetapi dia juga merupakan sebuah "barang berharga" yang mampu membuat sebuah blog terlihat lebih cantik, lebih keren serta mampu mencerminkan sebuah kesungguhan dalam "pribadi pengelola blog". Maaf..., itu hanya penilaian subyektif dari aku. Yang jelas bahwa toolttip memang menambah "gaya" dan "penampilan". Rasa suka akan tooltip ini membuat aku mencoba menuangkannya dalam beberapa posting. Yah ..., moga-moga saja memberi manfaat bagi para sobat blogger. Hanya perlu aku sampaikan bahwa posting "javascript tooltip-4" yang sudah aku terbitkan beberapa bulan yang lalu "tidak diperuntukkan bagi blogspot". E ..., barangkali saja ada yang ngeblog di luar blogspot dan tertarik untuk menggunakannya. O..., ya..., sebagai pelengkap koleksi tooltip, aku punya sebuah tooltip yang sangat menarik yang pada saat ini juga masih aku gunakan (23-Okt-10), mungkin sampeyan tertarik untuk memanfaatkan sebagai pelengkap blog. Silahkan coba untuk dibuat.

Javascript ZigZagLap Tooltip

Labels: , , ,
19 comments
at 10/23/2010

Create 2 New Elements Under the Posting Blog: New Blogger Templates

Posted by cah ndeso kluthuk

Pembuatan Element Baru di Bawah Widget Post New Blogger Templates.
Membuat elemen baru untuk pemasangan beberapa wifget blog sangat penting dilakukan. Pembuatan elemen baru berguna untuk lebih memudahkan pengaturan posisi/tempat widget yang terpasang atau mau dipasang. Kita akan coba bahas cara membuat elemen baru di bawah kolom/box posting atau tepatnya di bawah kolom komentar. Sisi menguntungkan dari elemen baru dengan lokasi di bawah boks posting adalah kedekatanya dengan posting yang setiap saat di baca pengunjung serta lebar bidang yang cukup luas. Bila kita menggunakan template 2 kolom maka 2 buah elemen baru dengan lebar masing-masing 250px bisa termanfaatkan. Sampeyan juga bisa merubahnya menjadi 2 elemen dengan lebar (width) berbeda (misalnya 300px dan 200px). Sangat efektif dan tepat sebagai sebuah wadah widget! Beberapa widget seperti Stats, Recent Posts, Popular Posts, Related Posts, atau mungkin Profile Blogger dan beberapa widget lain bisa di tempatkan di sini.

Cara Membuat Element Baru di bawah Posting di New Blogger Template

Labels: , , ,
1 comments
at 10/22/2010

Scroll Bar with Effects in Box Comments using CSS3 Transition

Posted by cah ndeso kluthuk

Memanfaatkan CSS3 transformation dengan mempermainkan opacity effect (transparency Effect) serta tinggi box menjadi salah satu kunci perubahan desain di kolom komentar. Tak banyak kode yang digunakan karena kita hanya mencoba menambah sebuah scroll bar hingga kolom komentar terbatasi ketinggiannya. Dengan membuat ketinggian kolom sebesar 260px maka apabila blog menggunakan bentuk kolom komentar yang terpasang di bawah halaman posting, ukuran ini menjadi sangat tepat. Semua bagian masih akan terlihat (seluruh box untuk menulis komentar saat belum ada komentar) ketika blog dibuka pengunjung. Apabila telah ada dua, tiga atau lebih komentar masuk, yang akan terlihat hanya sebagian, baru seteleh pengunjung menyentuh kolom maka semua bagian akan langsung terlihat dengan ketinggian 400px. Pengunjung yang akan menuliskan komentar atau melihat hanya perlu menggeser scroller di sisi kanan kolom. Sangat simple akan tetapi sangat menarik untuk di coba di blog karena efek transparansi akan membuat kolom terlihat sedikit temaram. Sentuhan cursor secara perlahan membuat kolom bertambah tinggi hingga mencapai 400px dibarengi dengan tampilan kolom yang semakin tajam. Yah ... sebuah efek sederhana tapi cukup memberi darah segar bagi blog!

Membuat bentuk seperti apa yang tersampaikan di atas cukup muda dilakukan, karena hanya perlu menambah kode CSS di atas ]]></b:skin>, kemudian klik "SAVE Templates" dan ... selesai sudah!

Kode CSS


.comments {
        opacity:0.6;
        filter:alpha(opacity=60);                
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";  
        height: 260px;
        overflow:hidden;
       -o-transition: opacity 1s 1s, height 1s 0.2s;
       -moz-transition: opacity 1s 1s, height 1s 0.2s;
       -webkit-transition: opacity 1s 1s, height 1s 0.2s;
}
.comments:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
       -ms-filter:"progid.DXImageTransform.Microsoft.Alpha(opacity=100)";
        height:400px;
        overflow:auto;
        overflow-x:hidden;
       -o-transition: opacity 1s 0.1s, height 0.6s 1s;
       -moz-transition: opacity 1s 0.1s, height 0.6s 1s;
       -webkit-transition: opacity 1s 0.1s, height 0.6s 1s;  
}

Cara Membuat


  • Login ke Blogger.
  • KLIK "Design/Rancangan".
  • KLIK "Edit HTML".
  • Cari kode ]]></b:skin>.
  • Copy dan pastekan kode CSS di atasnya.
  • KLIK "SAVE Templates/Simpan Templates".
  • Buka Blog dan Lihat hasilnya!


Catatan/Keterangan

  • Bila dari langkah di atas belum jelas, baik dalam mencari kode atau yang lain, silahkan buka Special Tutorials yang terletak di sidebar kiri. Sampeyan bisa mempelajari tentang "Cara Cepat Cari Kode HTML", "Cara Back-up Templates", "Cara Menyimpan Kode CSS, Javascript dan xHTML" serta beberapa tutorial penting lainnya.
  • Untuk merubah tinggi kolom komentar saat halaman blog mulai terbuka (sebelum tersentuh cursor), silahkan rubah pada height:260px;.
  • Untuk merubah tinggi kolom komentar setelah tersentuh cursor, rubah nilai pada height:400px;. Semakin bertambah nilainya maka kolom akan semakin tinggi.
  • Maaf kali ini tak ada DEMO! Silahkan coba dan nikmati hasilnya. Semoga bisa memperindah blog sampeyan dan memper-irit pemakain ruang!

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





» Happy Blogging - gubhugreyot «


Labels: , , ,
3 comments
at 10/20/2010

Cara Membuat: Create Show Hide Bottom Toolbar using CSS3:

Posted by cah ndeso kluthuk

Sebuah cara membuat bottom toolbar di blogspot atau blogger tanpa harus memanfaatkan layanan pembuatan toolbar gratis dari situs tertentu!

Sebuah desain yang sangat menarik dan jarang terpostingkan di tutorial blogger. Sebuah toolbar yang terletak di bagian bawah blog. Dia akan selalu terlihat sekalipun halaman blog ditarik hingga ujung terbawah. Untuk menggunakan toolbar semacam ini biasanya para blogger memanfaatkan sebuah widget dari situs tertentu (seperti Wibiya), namun dengan "Show Hide Bottom Toolbar using CSS3" ini sampeyan bisa membuatnya sendiri dan terserah mau diisi dengan apa box toolbar tersebut. Toolbar cantik ini sudah dilengkapi dengan fasilitas "scroll to top control" atau "back to top control pada sisi sebelah kanan. Dibagian sebelah tengah hingga ujung kiri dapat dimanfaatkan untuk menempatkan link atau yang lain. Satu hal yang jelas, dengan memasang bottom toolbar ini pasti akan membuat blog bertambah menarik.

Dengan memanfaatkan fungsi "onmouseover", semua bagian bottom toolbar hanya akan terlihat setelah blog dibuka hingga penampilannya tidak akan menggangu keseluruhan isi blog. Bersamaan dengan terbukanya blog, bottom toolbar akan terlihat secara penuh, baru kemudian setelah tersentuh cursor dia akan "menyembunyikan diri" (bagian box-nya). Untuk membuatnya terlihat kembali hanya perlu dilakukan dengan menyentuhkan cursor pada bagian tertentu yang dibuat tetap bisa terlihat sekalipun toolbar dalam keadaan tersembunyi. Untuk menciptakan efek pada toolbar, kembali kita manfaatkan CSS3 transition dan beberapa kode CSS3 yang lain.

Mungkin akan menjadi pertanyaan seperti apa yang dimaksud keterangan di atas. Agar lebih jelas memang cara termudah harus dengan melihat bentuk dan rupa serta tampilannya. Yah ...., kata-kata panjang lebar terkadang susah untuk diartikan, tetapi sebuah visualisasi dalam rupa barang sekalipun hanya sebongkah kecil dapat membuat banyak orang langsung dapat mengerti. Ok ...., silahkan buka saja demonya dan lihat pada bagian terbawah halaman blog yang di dalamnya terdapat "back to top controll".

D E M O


Kode CSS Bottom Toolbar

Labels: , ,
1 comments
at 10/20/2010

Cara Membuat Recent Posts Dilengkapi Gambar Thumbnail Animasi dengan jQuery-CSS3

Posted by cah ndeso kluthuk

Judul posting semrawut seperti di atas adalah wujud bingungnya gubhug reyot ketika berusaha membuat kalimat yang tepat dan pendek. Mungkin bila dituliskan secara panjang lebar akan seperti ini:

Cara Memasang dan Membuat Recent Posts dilengkapi Gambar/Image atau Thumbnail dengan Efek Animasi Menggunakan Javascript, Kode CSS, JQuery dan CSS3 Transition-Transformation serta CSS3 yang lain!

Ha .... ha .... ha ....! Masih nggak bener juga? Ada yang salah? Uh .... biar saja, emang buat judul nggak pusing?! He .... he ....

D E M O

Mungkin ini bisa menjadi bahan baru buat blog sampeyan. Bagus, ko'! Jozhlah, pokoknya...! Coba saja lihat di DEMO. Jangan bingung carinya. Letaknya di ujung paling bawah dengan judul (ushh ... judal-judul terus!) "Recent Posts using jQuery-CSS3". Bagi sampeyan yang selama ini sudah menggunakan jQuery, maka silahkan copy javascript, kode CSS dan xHTML-nya saja. Bagi yang belum menggunakan jquery.1.3.2.min.js, silahkan copy semua kode yang ada termasuk link jquery.1.3.2.min.js-nya. Kita akan buat dengan cara yang paling mudah dengan menyimpan seluruh kode melalui Add a Gadget. Kecuali ... ini kecuali, lho.... Bagi yang mau

Labels: , , , , , ,
12 comments
at 10/18/2010

Cara Membuat: How to Create Energy Saving Mode using CSS3 (di blog)

Posted by cah ndeso kluthuk

Hebohnya Energy Saving Mode yang di release 2009 lalu benar-benar membuat banyak blogger penasaran dan tertarik untuk ikut menggunakannya di blog. Bagi beberapa sobat blogger yang sebelumnya telah menggunakan jQuery.1.3.2.js atau jQuery.1.3.2.min.js adalah sebuah keberuntungan karena pemanfaatan jquery.1.3.2.min.js dalam desain energy saving mode sekaligus dapat digunakan untuk meng-cover kebutuhan blog akan jquery.1.3.2.js.

Hal sebaliknya akan terjadi pada blogger yang selama ini blognya sama sekali tidak menggunakan jQuery.1.3.2.min.js atau jquery.1.3.2.js untuk berbagai fungsi/fasilitas blog. Pemaksaan untuk menggunakan Energy Saving Mode justru bukan sebuah tindakan yang menguntungkan sekaligus bukan suatu langkah sebagai cerminan maksud dan tujuan dibuatnya energy saving mode. Ya ..., karena jelas-jelas beban blog akan bertambah dengan sebuah jQuery.1.3.2.min.js. Sekalipun jquery.1.3.2.min.js tidak akan menjadi beban tambahan yang fatal, namun setidaknya beban loading pasti akan cukup meningkat. Diluar hal ini "kemubaziran" akan terjadi. Yah jika memang tak satupun fungsi lain terdukung dengan digunakannya jQuery.1.3.2.min.js yang terdapat di desain Energy Saving Mode, trus apa ya nggak rugi jika jQuery.min.1.3.2.min.js yang jelas-jelas menambah beban dan loading blog ini hanya dimanfaatkan "untuk sekedar bisa menggunakan Energy Saving Mode?"

Menyikapi trend baru yang banyak menghanyutkan "nafsu" dan "keinginan" untuk ikut-ikutan menggunakan Energy Saving Mode tanpa melihat untung ruginya ini (karena bagi yang blognya tidak menggunakan jQuery.1.3.2.min.js jelas bikin kerugian), satu desain menarik Energy Saving Mode yang hanya menggunakan kode CSS telah coba aku buat. Energy Saving Mode hasil produksi anak negeri yang asli dalam negeri ini merupakan wujud kepedulian terhadap sementara blogger yang sebenarnya tidak membutuhkan jQuery.1.3.2.min.js dalam desain blognya, akan tetapi ingin menggunakan dan memasang Energy Saving Mode sebagai upaya mempercantik blog sekaligus untuk ikut mendukung upaya penghematan energy bagi dunia. Jika mungkin sampeyan tertarik dan ingin melihat seperti apa, sih, Energy Saving Mode tanpa jQuery.1.3.2.min.js, cantik atau buruk rupakah dia? Kira-kira cocok atau tidakkah buat blog sampeyan? Silahkan lihat demo-nya dengan klik link DEMO di bawah ini.
D E M O -1

Keterangan sebelum lihat demo!

Untuk melihat aksi saat Energy Saving Mode using CSS3 mulai bekerja, silahkan jangan letakkan cursor di halaman blog selama 10 detik!

Perbandingan Energy Saving Mode Menggunakan JQuery dan CSS3

Labels: , , ,
23 comments
at 10/16/2010

Pasang Energy Saving/Power Save Mode di Blog

Posted by cah ndeso kluthuk

Berikut ini akan kita jelaskan (semampu aku, broer!) tentang cara membuat, cara memasang, cara menggunakan dan cara menyimpan javascript "Energy Saving Mode" yang dikhususkan untuk blog, terutama di Blogger atau BlogSPOT.

Energy saving mode merupakan sebuah desain yang dimaksudkan untuk penghematan energy yang diaplikasikan pada blog (sementara arti sebenarnya dan fungsi penghematan energy ini, hingga detik ini masih aku coba untuk mengerti dengan memasangnya di blog!). Desain dibentuk dalam sebuah javascript dengan memanfaatkan jquery-1.3.2.js. Jika akhirnya dapat tercipta tampilan yang demikian menarik dari desain ini, hal tersebut tak lepas dengan tambahan kode CSS yang sekaligus di aktifkan dalam script. Energy Saving Mode diperkenalkan oleh http://www.onlineleaf.com dan hingga detik ini telah banyak digunakan di berbagai blog. Sampeyan bisa datang ke sana untuk copy scriptnya yang bisa dicopy secara bebas.

Hal terpenting ketika sampeyan menggunakan Energi Saving Mode: karena di dalamnya sudah menyertakan penggunaan jquery.1.3.2.js, maka ketika di blog sampeyan juga memanfaatkan jQuery, akan menjadi sempurna jika link jquery yang selama ini telah sampeyan pakai segera di buang. Bukan sebuah masalah yang membahayakan bagi blog ataupun hal-hal yang mengkawatirkan sebenarnya, ini hanyalah berdasar atas pertimbangan bahwa dengan dengan telah digunakannya jquery dalam desain Energy saving mode, maka semua fungsi dalam blog sampeyan yang dibangkitkan dengan jquery secara otomatis akan langsung di ambil perannya oleh jqury yang terdapat dalam javascript energy saving mode. Dengan cara seperti ini sekaligus apa yang diharapkan dengan dibuatnya desain energy saving mode semakin terwujud. Yah ... sampeyan khan dapat menganalogikan ini dengan seperti misalnya ketika sampeyan pakai 2 buah CD/CW secara bersamaan. He ... he ... selain lucu, aku yakin bahwa sabun cuci jadi lebih boros, juga tenaga sampeyan akan terkuras habis hanya sekedar untuk kepentingan kecil mencuci 2 buah CD/CW! He ... he ... (jangan ikutan ketawa, broer! ini sungguhan, lhoh! wong aku ketika masih kost dulu juga setiap hari sibuk cuci CD... He .... he ... mmmmm..mmm sekarang, sih, udah nggak pernah wong nggak punya! Tiap hari cuma pakai sarung! Hiiii...)

Hus ... yo lanjutin lagi ... Huh.... cerita yang model begini buat sampeyan senang plus ketawa ngakak! Akunya, nih yang repot! Hmmmm ... posting jadi nggak kelar-kelar, mbul! Udah ... jangan cekakakan lagi. N'tar tetangga pada dateng!

Cara menggunakan dan Menyimpan Javascript Energy Saving Mode

Labels: ,
5 comments
at 10/15/2010

Trend Baru: Cara Membuat Read More dan Nama Author di atas Posting

Posted by cah ndeso kluthuk

Yang bisa berada di posisi atas tidak hanya blog title, header image atau para petinggi negeri dan mereka yang berkantong tebal semata. Atau bukan pula hanya para lelaki atau perempuan dewasa saja. Read more..., barang secuil yang biasanya hanya dengan pasrah menerima takdir di buatkan gubhug di bawah posting, dia bisa saja diletakkan di atas posting. Ibarat putaran roda nasib, jika dipindah ke atas mungkin dia akan merasa lebih senang karena sedikit bisa "memamerkan betapa pentingnya dia". Ya ...! Mengapa tidak?! Membuat read more di atas posting aku kira belum banyak dilakukan blogger. Berbeda dalam tampilan blog tentu akan menarik, apalagi bila yang kita lakukan sama sekali tidak akan membuat penampilan bertambah buruk. Sampeyan bisa menghilangkan/membuang read more yang sudah sekian lama bernasib mengenaskan di bawah posting, atau bisa juga tetap mempertahankannya. Jika itu yang dilakukan maka dalam blog sampeyan akan mempunyai dua buah read more. Yang satu "nangkring di atas posting" (sambil plempas-plempus mengepulkan asap rokok!) dan yang satunya tetap dengan setia akan menunggu datangnya kentut di bawah posting! He .... he .... Pasti asyik, antik, menarik dan pokoknya .... ehmmmm coba dulu saja, dah!

Ehh ... eh .... kelupaan lagi! Uh...! Dasar otak klo sudah "terjangkit virus kepikunan". Ah ... apapun pasti ada yang terlewat. Ini, lhoh ... Di depan read more yang di atas posting itu masih ada embel-embelnya! Sebuah tampilan menarik berupa nama author/blogger. Jadi pada intinya di atas posting (artikel) yang kta buat, di sebelah kiri ditampilkan nama author dan disebelah kanan akan bertengger si read more dengan penuh keanggunan! Heh ... heh ... heh ... pasti cantik, ya?! Mo coba, nggak? Pasti penasaran, khan?! Heh ... heh.... heh .... padahal kali ini nggak ada demo, nih! Biar saja, dah! Biar sampeyan pada penasaran sekalian! Heh ... heh ... heh ...! Tuh ... biar nggak ada demo tapi sudah aku siapkan sebuah screenshot. Yah .... daripada nggak ada sama sekali.

O... ya ..., kali ini kita nggak akan buat pakai kode CSS segala. Kita buat yang simple-simple saja. Kita hanya akan pakai sederet xHTML yang bisa langsung di simpan di bagian body. Sederhana, cepat, gampang dan hasilnya... Hmmmmm. Tapi tidak menutup kemungkinan, lhoh ... Jika sampeyan mau, buat saja menggunakan kode CSS, kemudian padukan dengan CSS3. Pasti akan jauh lebih josh!

Buat Read More di atas Posting plus read more lama tetap dipakai

Labels: , ,
5 comments
at 10/15/2010

Membuat Elemen Footer untuk Tambah Gadget

Posted by cah ndeso kluthuk



Beberapa template memang tidak menyertakan Elemen Footer yang bisa dimanfaatkan untuk menyimpan widget melalui Add Gadget/tambah gadget. Kadang kala bagian footer hanya menggunakan sebuah DIV dengan nama id='footer' atau dengan nama lain. Pada template yang tidak menggunakan elemen footer, penulisan teks dan link (xHTML) langsung di tulis dan disimpan melalui "Edit HTML", pada bagian terbawah template di atas </body>. Penyimpanan secara langsung di Edit HTML seperti ini membuat blogger kurang leluasa untuk berimprovisasi. Membuat sebuah elemen baru menjadi jalan tengah untuk lebih mempermudah dan lebih memperluas kegunaan footer. Untuk membuat sebuah elemen tersendiri yang membuat kita bisa menyimpan teks, link dan beberapa yang lain seperti image dengan memanfaatkan "Add Gadget" di "Page Elements/Elemen Laman", maka kita harus membuat sebuah kode HTML baru yang berupa kode CSS dan xHTML. Untuk kode CSS sampeyan bisa memanfaatkan kode CSS yang telah ada atau bisa juga menggunakan kode CSS yang baru.

Buat Elemen Footer dg Memanfaatkan Kode CSS bawaan template


Apabila kita menggunakan kode CSS yang sebelumnya telah ada di template, maka kita hanya perlu sedikit menambahkan kode CSS baru. Bagaimana mengetahui kode CSS yang dipergunakan sebagai kode CSS untuk footer?

Labels: ,
6 comments
at 10/12/2010

Tambah/Tampilkan Nama Author di Bawah Judul Posting

Posted by cah ndeso kluthuk



Banyak desain template selalu menempatkan nama author di bawah posting, bahkan dalam ukuran relatif kecil. Hal seperti ini sebetulnya juga bukan jadi masalah besar. Tetapi Jika kita bisa selalu menampilkan nama author tepat dibawah judul posting tanpa selalu harus stiap kali menuliskan di halaman posting, mengapa tidak? Bukankah posting tersebut juga sudah kita buat dengan segala pengorbanan. Jadi apa salahnya jika "nama kita sebagai author" kita "tongkrongkan" di bagian teratas posting?! Bukan untuk kesombongan, sih. Hanya sekedar sebagai "pertanda" supaya sobat-blogger" lebih banyak mengenal tentang "si penulis posting" sekaligus sebagai "obat atas pengorbanan" yang telah diberikan selama mengelola blog. Terlebih, melalui satu bagian kecil ini kitapun dapat melakukan beberapa perubahan dan penambahan kode CSS atau HTML untuk membuat tampilan blog semakin menarik. Dan ada satu lagi yang lain: Sampeyan bisa memasukkan sembarang link di nama author tersebut! Ho...ho ... Sekali lagi..., kenapa tidak di coba?!

Labels: , ,
15 comments
at 10/12/2010

Strike Baru dengan CSS3 Transition

Posted by cah ndeso kluthuk

Strike sebetulnya sudah mulai digunakan beberapa waktu lalu. Tag strike berfungsi untuk membuat sebuah coretan tepat ditengah dalam arah horizontal (garis horizontal sepanjang teks) yang penggunaannya sebenarnya juga amat tergantung pada "apa yang berkembang di otak". Beberapa blogger sudah menggunakan tag ini untuk berbagai "kepentingan" (terutama berkaitan dengan tutorial) tetapi beberapa blogger yang lain menggunakannya dengan "tendensi" berbeda. Dari sisi positif, tag ini bisa dimanfaatkan untuk memberikan beberapa contoh tentang "kesalahan/hal yang tak boleh dilakukan" (misalnya dalam tutorial), namun pada sisi yang lain juga bisa dipergunakan untuk beberapa hal hal berbau negatif (menipu/menjebak). Adakah sampeyan juga pernah atau mungkin tertarik menggunakan tag strike ini? Jika mungkin tertarik, silahkan sampeyan coba menggunakannya dan rencanakan mau dibuat untuk apakah tag strike ini?. Yah ...., silahkan pergunakan sesuai selera sampeyan. Mo buat tutorial contoh tentang teks yang salah, boleh! Mo buat menjebak orang juga boleh!

Membuat strike di Blogger Baru (New Blogger Templates), bisa dilakukan di posting mode tulis/compose hanya dengan mem-blok teks yang akan di buat dalam bentuk tercoret, kemudian klik di fitur strike. Apabila sampeyan menggunakan posting mode Edit HTML, maka harus menambahkan tag strike di kanan kiri tag yang akan di coret. Cara seperti ini berlaku juga untuk yang menggunakan template lama (Template Tata Letak(Layout Templates).

Contoh penggunaan strike dalam posting mode Edit HTML sbb:
<strike>Teks yang akan di coret! <strike>

Hasil penulisan dengan kode di atas adalah seperti ini:

Teks yang akan di coret!

Model yang sederhana seperti ini akan kita rubah dalam bentuk yang berbeda dengan melibatkan background-image, opacity (efek transparansi) dan CSS3 transition. Tentu saja hasilnya akan berbeda jauh jika dibandingkan dengan strike yang apa adanya. Bentuk akhir hasil perubahan melalui kode CSS terhadap tag strike kira-kira akan seperti di bawah ini:

Kode CSS

strike {
     background: red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgjaring.png);    
     opacity: 0.6; /* original code by: */
     font-weight: bold;
     cursor: help; /* gubhugreyot.blogspot.com */
     filter: alpha(opacity=60);
    -o-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
}
strike:hover {
     background: transparent;
     opacity: 1.0;
     filter: alpha(opacity=100);
}

Cara Menggunakan Kode strike

  • Login : Login kee Blogger.
    • Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
    • Tuliskan "Password (Sandi)".
    • KLIK "Login".
  • Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..
  • Design/Rancangan : Cari dan klik link Edit HTML.
  • Cari kode ]]></b:skin>. Letakkan dan simpan semua kode CSS tepat di atasnya.
  • KLIK SAVE Templates/Simpan Template.
  • KLIK link Posting.
  • KLIK Entri Baru/New Entry.
  • Buat kalimat dalam posting, kemudian blok (dg mouse/cursor) teks yang akan di buat dalam bentuk tercoret. Lanjutkan dengan klik fitur strike. Untuk mode Edit HTML, letakkan teks yang akan dibuat dalam bentuk tercoret diantara tag strike.

    <strike>Tuliskan teks di sini!</strike>

  • Buka hasil posting di halaman blog untuk melihat hasilnya.

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



» Happy Blogging - gubhugreyot «


Labels: , ,
4 comments
at 10/11/2010

Cara Buat Blockquote CSS3: How to Create Blockquote using CSS3

Posted by cah ndeso kluthuk

Blockquote yang lain daripada yang lain ini dibangun dengan melibatkan CSS3 transition, CSS3 transformation, CSS3 border radius, CSS3 text shadow dan 3 (tiga) buah background image untuk background blockquote dan dua tag span yang kita manfaatkan. Bagaimana cara membuat blockquote yang benar-benar lain dari pada yang lain ini? Cocokkah untuk blog sampeyan? Adakah manfaatnya?

Blockquote bukanlah "gadis yang jelek" atau "gadis kaya raya" yang tak layak dipinang untuk melengkapi blog. Aku juga heran kenapa jarang sekali blogger yang memanfaatkan tag spesial yang sebenarnya amat pantas dipakai ini, ya? Oho ... atau barangkali tak begitu kenal dengan blockquote? Atau kalian merasa antipati terlebih dahulu? Ataukah sampeyan ketularan blogger lain yang jarang menggunakan blockquote? Heh... heh.... Coba rasakan betapa mudah dan pentingnya memanfaatkan "si gadis jelita ini". Dia bisa digunakan untuk wadah teks-teks tertentu yang perlu ditonjolkan di posting, lhoh! Sampeyan tak perlu membuat tag baru untuk melakukan itu. Cukup blockquote! Dan tampilannya? Hoooohoooo coba lihat saja yang ini!

D E M O

Cara Membuat Blockquote dg CSS3

Labels: , , ,
0 comments
at 10/11/2010

Buat Tampilan Beda Komentar dan Jawaban (Autor Comments) dengan CSS3

Posted by cah ndeso kluthuk

Untuk Template Lama (Template Tata Letak/Layout Templates) dan New Blogger Template).

Salah satu cara memberikan "servis terbaik" kepada pembaca atau pengunjung blog adalah dengan memberikan ciri khusus pada jawaban komentar yang dibuat autor. Dengan cara ini maka komentar pengunjung dan jawaban yang berupa komentar dari author akan terlihat dengan sangat jelas. Beberapa cara bisa dilakukan misalnya dengan membuat bentuk teks berbeda atau dengan cara memberi background pada box yang berisikan komentar pengunjung atau sebaliknya pada komentar autor (jawaban komentar). Untuk membuat bentuk kolom komentar yang sangat menarik ini, tidak boleh tidak kita harus membongkar template guna menyimpan kode CSS dan xHTML pada bagian header dan body. Untuk penyimpanan xHTML dengan amat terpaksa juga harus kita lakukan melalui Expand Widget Template, karena tanpa melalui proses ini tidak mungkin apa yang kita rencanakan bisa terwujud. Heh ... heh ..., tapi jangan kuatir! Kita akan berikan panduan sedetail mungkin hingga semua sobat blogger, terutama yang masih dalam tahap belajar memahami isi dalamnya template juga bisa belajar dan menyelesaikan desain baru ini dengan tanpa kesulitan. Iya, toh! Lhoh ..., buat apa buat tutorial klo nggak bisa dicerna dengan baik. Heh ...heh ... berkali-kali sudah banyak yang mengalami. Akibat terlalu banyak makan (tutorial atau makanan?) yang susah atau sulit dicerna di perut akhirnya masuk rumah sakit. Heh ... heh ... Usus buntunya kena! Ho ... ho... apa nggak repot jadinya?

Bentuk baru kolom komentar ini pastinya tidak hanya menguntungkan buat pengunjung, tetapi akan banyak manfaatnya juga buat tampilan blog. Yah..., jika mau sampeyan bisa utak-atik sendiri nantinya. Baik ganti bentuk dan warna teksnya atau mungkin cari-cari atau buat background lain yang "pas" dengan background blog sampeyan. Hoo... Asyik, toh! Heh ... heh ..., banyak ngomong, jadinya repot juga. Yok, kita mulai saja!

Ho ... hoo ... demo? Silahkan klik link demo di bawah dan lihat bentuk sebenarnya dari perubahan di kolom komentar. Silahkan sampeyan gerakkan mouse di kolom komentar setelah demo terlihat!

D E M O

Kode CSS

Labels: , ,
9 comments
at 10/10/2010

4 Pilihan Perubahan di Widget Profile

Posted by cah ndeso kluthuk

About me

'cah ndeso kluthuk

Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

Lihat profile lengkapku...(no.1)

About me

'cah ndeso kluthuk

Hidup haruslah mengucurkan keringat! Tidak perlu ngomongin buruknya tetangga dan terlalu banyak cingcong, tetapi banyaklah bertindak! Banyak bicara adalah kesia-siaan karena air ludahmu bukan ludah berapi seperti milik mereka yang berdasi mengkilap!!!

Lihat profile lengkapku...(no.2)

About me

'cah ndeso kluthuk

Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

Lihat profile lengkapku...(no.3)

About me

Gitosamin

Aku ?! Aku bukan siapa-siapa hanya bocah kecil yang demen pipis di celana serta paling suka makan sama sambal kecap + kerupuk. Yang penting bagiku, tiap hari nggak telat makan dan kepala nggak dedel2x amat...

Lihat profile lengkapku...(no.4)



4 (empat) pilihan menata widget profile seperti di atas bisa menjadi pilihan bagi sampeyan untuk widget profile. Dengan menyandingkan keempatnya, kita bisa mengetahui secara persis pilihan terbaik, yang paling rapi dan yang terutama adalah yang paling cocok dengan selera sampeyan. Mengatur widget profile seperti di atas tidak sesulit yang dibayangkan. Hanya dengan menambah sedikit kode CSS maka sampeyan dengan cepat bisa membuat berbagai konfigurasi sesuai keinginan. Bahkan jika mau dalam 2 menit sekali sampeyan bisa merubahnya! Heh .... heh .... heh ... jadi ketawa sendiri, nih, aku! Yaaaph .... trus posting, makan, pipis ma eok-nya kapan klo mo dua menit sekali merubah tatanan widget profil! Emang betah begituan terus?! Ha ... ha ...

O, yah, sebelum kita bahas teknis pengubahan setiap tatanan di widget profil, perlu di ketahui terlebih dahulu bahwa panduan ini diperuntukkan bagi pengguna "New Blogger Template" sekaligus siapapun yang menggunakan "Template Lama" atau "Template Tata Letak".

Cara Melakukan Perubahan Tatanan Widget Profile

Labels: , ,
3 comments
at 10/09/2010

Lengkapi Blog dengan Search Form-Box Manis: Creating a Search Form using CSS3

Posted by cah ndeso kluthuk

Search form manis yang semanis si hitam manis ini amat pas dengan trend blog saat ini. Sebuah search form mungil yang terbangun dari paduan sedikit script untuk menciptakan tampilan dinamis dan CSS3 yang memberikan tampilan elegan yang terlihat manis. Membuat search form atau search box dengan cara seperti ini akan sangat efisien untuk sebuah blog daripada menggunakan kode html "nggedabyah" (bahasa Indonesia:sangat banyak) plus perlu loading lama untuk inventarisasi posting. Sampeyan hanya perlu menyimpan semua kode melalui "Add a Gadget" atau "Tambah Gadget" di "page Elements (Elemen Laman)", maka tanpa "ba bi bu", si Search Form akan nongol dan siap melaksanakan perintah semua pengunjung termasuk sampeyan yang tentu saja sekali-sekali pasti juga akan menggunakannya selain saat mencoba! He ... he ... Apa perlu nyoba? Ha .... ha ...boleh, dong! Yang nggak boleh dicoba khan cuma' calon isteri (he ... he ... itu kalau nggak di ijinkan, ya?!). He ... he tapi dasar sampeyan ..., uhuh .... biar nggak diijinkan sukanya pakai rayuan gombal. "Udah dek..., satu kali saja, dah... Entar mo minta apapun tak kasih, dah! Mo minta gunung? Mo minta tak seberangkan di Samodera Indonesia? Atau mo wisata ke bulan?". Hooo... hooo... Rayuan gombal, kuno, jadi senjata pamungkas!!!! He .... gadis-gadis...! Ingat pesan eyang! "Jangan sekali-kali berikan yang satu itu kepada siapapun sampai ajal menjemput mu!". (He? Apa-apaan 'tuh. Eyang gila kali, ya! Masa sampai ajal menjemput! Ah ... mungkin maksud eyang "sampai janur kuning menjemput mu, ya?!").

He ... heh ... gubhug reyot ngelantur lagi! Ayo balik ke tutorial! He ..eh ... demonya dulu, nih!

D E M O

Cara Menggunakan Kode Search Form

Labels: , ,
2 comments
at 10/08/2010

Cara Buat Textarea yang Penuh Pesona - Beautiful Textarea using CSS3 Transition

Posted by cah ndeso kluthuk

Textarea bukan sebuah box sederhana saja yang sekedar tampil apa adanya untuk wadah link exchange, banner exchange atau kode html dan teks yang lain. Dengan sedikit polesan bedak berupa kode CSS dan CSS3, tak seorangpun akan menduga bahwa yang mereka lihat adalah sebuah textarea. Sampeyan dapat menggunakan textarea penuh gaya ini di blog untuk wadah baru yang tampil penuh pesona.

Menghilangkan border bawaan yang berupa warna border dan tebal border, serta menghilangkan outline menjadi kunci hingga textarea menampilkan diri dalam perwujudan yang berbeda. Tentu saja itu tak cukup. Kode CSS dan CSS3 menejadi baju baru yang menjadikan textarea seakan baru keluar dari salon dengan dandanan yang serba"wah" dan penampilan "elegan, manis, cantik sekaligus macho!". He .... he ... apa ada ya, katanya cantik tapi macho! Ha ... ha ... Ada, dhong! Tuh tetangga sebelah sampeyan yang suka kenes tapi ketawanya ngakak kaya' gondhoruwo! Kita akan gunakan CSS3 border-radius, CSS3 drop shadow (box shadow), CSS3 text-shadow, CSS3 text-shadow, CSS3 Transition serta beberapa kode CSS seperti margin, padding, border dan outline. Mengapa kita gunakan "outline"?

Outline: none; berfungsi untuk melenyapkan border yang muncul ketika bagian di textarea "di klik", baik untuk copy code ataupun sekedar sebuah "klik" tak sengaja. Tanpa menghilangkaan "outline" tentu saja bagi beberapa yang tahu kode html akan segera sadar bahwa apa yang di hadapannya adalah sebuah textarea. Sampeyan bisa tambahkan atau rubah beberapa kode CSS yang disertakan di sini bila ingin membuat textarea ini tampil dengan gaya yang berbeda.

DEMO Textarea Penuh Pesona


Biar kita sama-sama ngerti bagaimana wujud textarea yang berpenampilan berbeda dari biasanya ini, silahkan klik link DEMO di bawah ini.
D E M O

Cara Membuat Textarea Penuh Pesona

Labels: , , ,
7 comments
at 10/08/2010

Tips dan Trik Berbagai Cara Menuliskan dan Menyimpan Kode HTML (xHTML, kode CSS, Javascript) di Blog-Template

Posted by cah ndeso kluthuk

Posting kali ini memang denagn sengaja mengupas secara lengkap cara-cara menyimpan kode HTMl di template blogger-blogspot secara khusus dengan harapan bahwa para blogger yang masih dalam tahap belajar memodifikasi blog dapat melakukan proses penyimpanan kode HTML dengan benar.
Penyimpanan kode HTML oleh beberapa blogger, terutama kode CSS, hingga detik ini masih terjadi bannyak
kekeliruan pada penggunaan tag style (<style type="text/css"> dan </style>). Bukan cara menuliskannya tetapi ketika kode CSS di simpan di atas kode ]]<>/b:skin>. Kasus yang banyak terjadi adalah melakukan penyimpanan kode CSS di atas kode tersebut dengan tetap mengikutsertakan tag style. meskipun kelihatannya seperti hal yang teramat sederhana, namun penggunaan tag tersebut di atas kode ]]<>/b:skin> justru akan merusak desain yang telah direncanakan (di buat).

Selain hal tersebut di atas tutorial ini juga mempunyai manfaat lain saat sebuah blog memberikan tutorial tentang kode HTML.
  • Lebih mengefektifkan halaman posting.
  • Menghemat waktu posting.
  • Memberi tutorial penyimpanan kode HTML secara komprehensif.

Menyimpan Kode CSS


Ada 4 cara dan tempat menyimpan kode CSS:

Labels: ,
2 comments
at 10/08/2010

How to Create Elastic Box using CSS3

Posted by cah ndeso kluthuk

Elastic Box dapat digunakan di posting atau di widget. Box spesial ini berupaya memaksimalkan penggunaan beberapa kode CSS3 seperti drop shadow (box shadow), border radius, text shadow dan tentu saja CSS3 transition yang merupakan "nyawa bagi Elastic Box". Dengan kemampuannya yang "cukup aduhai", diharapkan Elastic box mampu membuat posting "lebih seronok" (he ... he ...) sekaligus bisa dimanfaatkan untuk memuat bagian posting yang "bersifat khusus". Apa pengaruhnya terhadap blog? He ... he ... Yah ..., Elastic Box tak ubahnya "sebuah gincu (lipstick, mbul! masa' gincu saja nggak ngerti!) bagi seorang wanita! Sedikit polesan akan membuat nafas lelaki ngos-ngosan! (he ... he ... nafas ku, broer. bukan nafas sampeyan! klo sampeyan nggak ngos-ngosan tapi justru nafas jadi "senin-kamis" he ... he ...).

Elastic Box didesain dengan menggunakan ukuran lebar 170px dan tinggi 200px. Gambar/image dalam box dibuat dalam ukuran lebar 70px dan ketika box bertambah besar gambar akan berubah berukuran lebar 170px dengan tinggi berbanding lurus dengan skala gambar sebenarnya (gambar orisinil-nya). Box-nya sendiri ketika tersentuh cursor akan bertambah besar dengan ukuran lebar 400px dan tinggi 300px. Untuk menjaga apabila isi box cukup melimpah (banyak), maka box kita lengkapi dengan sebuah scroller dalam arah vertical. Sampeyan dapat memuat banyak hal di dalam box spesial ini. Mo gambar, mo teks, mo link atau bentuk yang lain boleh-boleh saja.

D E M O

Cara membuat Elastic Box

  • Login : Login ke Blogger.
    • Tuliskan User Name (Nama Pengguna) atau bisa juga gunakan Email Address.
    • Ketik Password (Sandi) milik sampeyan pada box yang tersedia.
    • Jika semua sudah benar, silahkan klik "Login".
  • Beberapa saat setelah klik login maka halaman dasboard akan nongol di hadapan sampeyan. Cari dan klik link "Design (Rancangan)".
  • Di Page Elements (Elemen Laman) ini juga terdapat beberapa link. Satu di antaranya "link Edit HTML". Temukan link ini dan klik.
  • Setelah halaman Edit HTML terbuka, silahkan sampeyan cari kode ]]></b:skin>.
  • Copy dan pastekan kode CSS di bawah ini tepat di atas ]]></b:skin>, kemudian klik "SAVE Templates (Simpan Template)".

Kode CSS Elastic Box

Labels: ,
3 comments
at 10/06/2010

Buat Link "Poskan Komentar" Tampil Beda dengan CSS3

Posted by cah ndeso kluthuk

Ada tiga pilihan bentuk tampilan kolom komentar (Comment Form Placement/Default Komentar untuk Entri) yang dapat kita gunakan:
  • Full page (Halaman Penuh).
  • Pop-up window (Jendela munculan)
  • Embedded below post (Disemat di bawah entri)
Catatan: Panduan ini bisa digunakan di New Blogger Template dan Template Lama.

Untuk memilih bentuk tampilan kolom komentar ini bisa kita lakukan dengan KLIK "Settings (Pengaturan)", kemudian KLIK "Comments (Komentar)".
Dari 3 pilihan yang tersedia, hampir kebanyakan blogger menggunakan pilihan ke-2 dan ke-3. Bentuk kolom komentar yang ke-2 sering dipilih demi efisiensi ruang dan keinginan terciptanya halaman blog yang lebih minimalis. Kolom komentar ke-3 menjadi pilihan favorite juga karena tampilnya kolom komentar akan dapat lebih memudahkan pengunjung blog saat ingin menuliskan sebuah komentar. Selain hal ini, seorang blogger dapat melakukan banyak improvisasi terhadap desain kolom komentar hingga bagian ini juga mampu memberi kontribusi lebih terhadap "gaya dan penampilan blog". Tentu saja masing-masing mempunyai kelebihan dan kekurangan.
Kembali pada pilihan bentuk kolom komentar yang ke-2 (Pop-up window atau Jendela munculan), sekalipun kelebihan yang dia miliki seperti tersebut di atas, setelah kita cermati ternyata ada satu kekurangan yang sebenarnya akibatnya akan cukup terasakan oleh pemilik blog. Rata-rata link "Pos a Comment" atau link "Poskan Komentar" mempunyai bentuk dan ukuran yang kurang menonjol jika di bandingkan dengan teks atau link di sekitarnya. Bagi yang sudah berpengalaman memberikan komentar tentu saja tak akan menjadi masalah. Masalah baru akan muncul ketika beberapa "aktivis baru" ingin memberikan komentarnya terhadap posting yang telah ia lahap secara tuntas. beberapa di antara mereka mungkin akan ragu, bingung mencari kotak komentar. Lha ini repotnya! Sesaat setelah bingung dia justru nggak berusaha untuk mencari cara untuk bisa memberikan komentar dan meluapkan hasratnya yang membeludak, e .... malah dianya ngacir sambil nggedumel "hmmmm ...., susah amat, nich, blog! Masa mo kasih komentar saja nggak di kasih kolomnya! Uh ..., dasar!". E ....., nggak "matur nuhun" justru mengumpat, dia! Dus, jika kejadian seperti ini terjadi berulang siapa yang akan terugikan jika bukan sampeyan sendiri? Lha ..., bukankan komentar adalah spirit untuk terus menciptakan posting baru?

Mengatasi persoalan seperti ini bisa kita lakukan dengan sedikit melakukan modifikasi pada template dengan menambahkan kode CSS baru dan menambahkan "class" serta "title" (biar muncul tooltip) di satu tag (a) yang terletak di bagian body. Untuk melihat bentuknya, silahkan sampeyan buka link di bawah ini.

D E M O

Langkah Merubah Link "Poskan Komentar"

  • Login : Login ke Blogger.
    • Tulis User Name (Nama Pengguna) atau Email Address.
    • Tuliskan Password (Sandi).
    • KLIK "Login".
  • Dasboard : KLIK link "Design (Rancangan)".
  • Design/Rancangan : KLIK "Edit HTML".
  • Back-up Templates : Lihat caranya di "Special Tutorials" di menu kiri atas.
  • Cari kode ]]></b:skin>, kemudian copy dan pastekan kode CSS di atasnya. (Lihat cara cepat cari kode HTML di "Special Tutorials").
  • Lanjutkan dengan mencari kode <p class='comment-footer'>. Kode seperti ini ada 2 buah. Cari yang di kode berikutnya terdapat kode seperti terlihat di bawah ini.

Labels: , ,
4 comments
at 10/06/2010

Create animations on Header Image (New Blogger Templates) using CSS3

Posted by cah ndeso kluthuk

New Blogger Template adalah sebuah tantangan baru bagi semua blogger. Ya ..., template yang sangat jauh berbeda dengan "Template Lama Blogger" atau "Template Tata Letak (Layout Template)" ini sungguh membuat semua penasaran untuk mengobrak abrik isi dalamnya (he ...., tapi jangan kaya' si Paijo tetangga rumah sampeyan yang kerjanya bukan mengobrak-abrik template tapi justru "mengobrak-abrik rumah tangga orang". Aha .... jangan-jangan justru sampeyan yang jadi gurunya si Paijo?! Iya, broer? Wah ... malah cengar-cengir! Wah ..., bahaya, nih! Biasanya yang suka cengar-cengir suka melakukan hal seperti itu? He .... he ...). Dan ini broer, salah satu hasil suka mengobarak-abrik jerohan orang ( he ... eh ..., maksudku jerohan template!): Sebuah paduan kode CSS yang mampu menciptakan animasi pada header image blog!

CSS3 menjadi andalan untuk melakukan aksi menarik ini. Dengan memanfaatkan opacity effect, CSS3 border radius, CSS3 background rgba dan CSS3 Transition-transformation maka jadilah sebuah animasi cantik hasil penggabungan beberapa efek tadi. Sebuah gambar terjungkir akan menjadi header image blog dan pasti akan membuat orang penasaran. Lha ketika orang penasaran, maka secara otomatis cursor akan dibawa ke bagian header. Saat itulah aksi animasi terjadi dengan bergeraknya header image kearah kanan dengan di dahului sebuah putaran melebar yang membuat dia dalam sesaat menghilang dari pandangan kemudian tiba-tiba sudah berada di tengah-tengah header dengan ukuran yang lebih besar. Penasaran? Hoho .... jangan sekali-sekali rasa penasaran dibiarkan menggerogoti hati dan perasaan sampeyan. Kata orang tua, "Rasa penasaran yang tak tersalurkan ibarat birahi yang tersumbat!" He .... he ... kaya si Paijo! He .... he .... Makanya jangan diam saja! Nih, KLIK link demo di bawah ini! Ssstt ... di KLIK, lho! Jangan di raba-raba nanti terbangun! Wua ... ka' ka' ka'...

D E M O

Jika sampeyan mencermati kolom header yang terlihat di demo, maka sebenarnya ada sesuatu yang berbeda karena dengan menampilkan header image sekecil itu harusnya "blog title" tidak akan terlihat. Yang akan ditampilkan hanya header image dan header description. Supaya bisa dalam rupa seperti di demo, maka sedikit penambahan kode harus kita lakukan untuk "memunculkan" blog title. Modifikasi ini kita lakukan di tag header yang ada di dalam tag body. Satu kelebihan tambahan dengan modifikasi di tag header ini adalah dengan dimungkinkanya kita menambahkan atau membuat link yang berbeda dengan link blog (link yang seharusnya ada di header). Contohnya jika sampeyan punya blog lain, maka link-nya bisa di pasang di link blog title yang kita buat sendiri ini. Bagaimana cara membuatnya? Yo ... kita buat bareng-bareng!

Labels: , ,
11 comments
at 10/05/2010

Tips-triks Cara Buat 2 (dua) Sidebar (Kanan-Kiri) di Blogger

Posted by cah ndeso kluthuk

Membuat tutorial tentang modifikasi blog memang kadang-kadang terasa malas karena tak urung tutorial tak mungkin dibuat dalam bentuk pendek atau singkat. "Awang-awangen" kata"wong jowo" atau dengan kata lain "sungkan" atau gampangnya bisa kita sebut "ogah-ogahan". Yah, ...., terkadang kejenuhan menuliskan posting tak dapat dipungkiri dan ditolak, apalagi posting dalam bentuk tutorial html dengan kode yang begitu banyak. Menuliskan secara sederhana memang bisa saja dilakukan, tapi terkadang aku merasakan betapa sis-sianya sebuah tutorial yang terlalu sederhana dan membuat banyak orang merasa jauh dari rasa puas atau setidak-tidaknya mampu sedikit menambah pengertian atau wawasan tentang sesuatu yang "sangat ingin dipelajari". Sebuah kondisi yang sering juga aku alami hingga detik ini.

Terkait dengan tutorial modifikasi blog, kali ini kita akan coba bahas tentang cara membuat "blog 2 (dua) kolom" atau "blog dengan 1(satu) sidebar" di rubah menjadi "blog 3 (tiga) kolom" dengan 2 buah sidebar di dalamnya. Pembuatan 2 sidebar ini pastinya hanya diperuntukkan bagi blogger yang menggunakan "Template Lama" atau "Template Tata Letak" yang hingga saat ini hanya menyediakan template dengan 2 buah kolom (seperti template minima, tic-tac blue dll). Untuk "New Blogger Templates" perubahan seperti ini tak diperlukan lagi karena telah tersedia berbagai variasi penggunaan kolom sidebar dan bahkan hingga elemen di atas footer.

Kita akan memulai tutorial ini dengan memahami penggunaan kode html di template yang berhubungan dengan penamaan syntax pembentuk kolom blog.
  • Setiap template acap kali menggunakan nama syntax berbeda untuk sidebar, main, header atau footer, seperti misalnya : #sidebar-wrapper, #sidebar-wrap, #main-wrapper, #main-wrap, #footer-wrapper, #footer-wrap, #bottom-wrap dan beberapa nama yang lain seperti misalnya #kotak-sidebar.
  • Penamaan-penamaan pada syntax tersebut sebenarnya hanyalah untuk memudahkan pengguna blog untuk dalam menentukan posisi dan ciri setiap bagian template, dimana main biasanya di tengah, sidebar di kanan atau kiri serta footer di bawah dan header di atas.
  • Sampeyan bisa merubah kode-kode di atas dengan nama-nama baru (syntax baru) sesuai selera. Bahkan sampeyan bisa menamainya dengan nama seperti : #header-wrapper dirubah menjadi #kepala-wrap, #sidebar-wrapper menjadi #tangan-wrapper, #footer-wrapper menjadi #kaki-wrap dan #main-wrapper menjadi #perut-wrap atau #pusar-wrap. Lha, jika menginginkan elemen baru di bawah main-wrapper dan di atas footer-wrapper sampeyan bisa memberi nama #bawahperut-wrap atau #bawahpusar-wrap. Ya ...., harus dibuat seperti itu jangan ditulis pakai nama aslinya (yang di bawah pusar!). Nggak lucu jadinya , he ...., he ....
  • Setelah perubahan nama pada syntax-syntax ini, kita harus sesuaikan kode HTML yang ada di tag body antara tag pembuka <body> dan tag penutup </body>. Tanpa dilakukan perubahan tentu saja blog tidak akan terbentuk.
  • Saat melakukan perubahan atau modifikasi penambahan elemen sidebar tak perlu dilakukan (KLIK) "Expand Widget Templates".

Labels: ,
3 comments
at 10/05/2010

Buat Tempat Adsense, Banner di Header: Buat Elemen Baru di Header Blog

Posted by cah ndeso kluthuk

Membuat sebuah elemen baru yang berada di dalam header mempunyai fungsi yang sama dengan elemen-lemen lain dalam blog, dimana melalui sebuah elemen baru ini akan memungkinkan kita menambah sebuah widget baru. Menambah widget dalam "kolom header" terkadang memang amat diperlukan ketika seorang blogger ingin menempat sebuah "widget khusus" dimana widget spesial ini memang menjadi sebuah prioritas untuk ditonjolkan. Beberapa widget yang biasanya diletakkan di dalam kolom header selain title blog, image blog dan descriptions adalah tampilan gambar dan teks baik yang berkaitan dengan posting ataupun banner untuk kepentingan iklan. Menambahkan widget secara langsung melalui template memang dimungkinkan, akan tetapi sebuah persoalan baru akan muncul dimana widget tersebut akan tertampilkan di "Page Elements". Untuk mensiasati hal inilah maka sebuah "elemen baru" di dalam header amat diperlukan". Meskipun cara ini mengatasi persoalan yang muncul di "Page Elements" atau "Elemen Laman", tak dapat dipungkiri bahwa "persoalan ini" mengharuskan kita untuk membuat sebuah "elemen baru pengganti header" yang harus kita letakkan tepat di atas header. Pembuatan Eelemen baru pengganti header ini akan berlaku untuk blog sebelumnya memanfaatkan "penambahan elemen baru header" guna menempatkan widget di atas header. Widget di atas header ini bisanya berisi daftar menu atau search box (box pencarian). Kita akan coba bahas satu-persatu, dan untuk kali ini kita akan melakukannya pembuatan widget di dalam header ini di "New Blogger Templates" yang mungkin masih cukup menjadi persolan besar bagi beberapa sobat blogger karena kode HTML-nya memang sedikit lebih rumit dan berbeda dengan "Blogger Lama" atau "Template Tata Letak".

Membuat element baru di dalam header memang membutuhkan sedikit kecermatan dan ketelitian, oleh karena itu bagi sobat blogger yang akan mencoba melakukan hal ini aku harap untuk melakukan percobaan terlebih dahulu di "blog khusus percobaan", dimana sampeyan boleh melakukan berbagai experimen modifikasi blog. Setelah percobaan selesai dengan sempurna, dengan sekaligus melakukan beberapa penambahan dan perubahan desain seperti background, lebar, tinggi border dan beberapa yang lain, maka selanjutnya lakukanlah di "blog aktif". Itupun untuk melakukannya aku sarankan untuk melakukan "back-up (mengamankan)" template terlebih dahulu sebagai tindakan preventif apabila terjadi kesalahan yang tidak di harapkan. O ..., ya, perlu di catat bahwa pembuatan Elemen baru di dalam header ini, percobaannya aku lakukan di template "Mudah" (New Blogger Templates) by Josh Peterson.

Sebelum melanjutkan mengikuti tutorial ini, silahkan apabila ingin melihat bagaimana bentuk, posisi dan penempatan widget baru di header sebelah kanan, silahkan KLIK link demo di bawah ini.

D E M O

Sebagai langkah awal untuk melakukan proses penambahan elemen baru di dalam header seperti biasanya kita harus kita harus login terlebih dahulu untuk kemudian membuka "halaman Edit HTML". Silahkan ikuti langkah-langkah berikut.

Labels: , , , ,
11 comments
at 10/04/2010

Create Scroll to Top Control using CSS3

Posted by cah ndeso kluthuk

Scroll to top Control atau biasa juga disebut sebagai Back to top Control berfungsi untuk menggulung halaman blog kembali ke halaman teratas. Scroll to top control yang kita buat ini hanya menggunakan kode CSS terutama CSS3 yang melibatkan CSS3 transition, CSS3 rgba, CSS3 box shadow (drop shadow) dan CSS3 border radius. Link Scroll to top Control tidak akan kita letakkan di bawah tag pembuka body (<body>), akan tetapi di atas tag penutup body (</body>) supaya tidak hanya berguna ketika halaman blog di buka, namun link scroll to top control ini juga bisa dimanfaatkan saat kita berada di "Page Elements" atau "Elemen Laman".

Penggunaan Scroll to Top Control akan menjadi sangat bermanfaat ketika sebuah blog menampilkan posting yang cukup panjang atau halaman blog menampilkan beberapa posting sekaligus (karena di-set untuk menampilkan beberapa posting atau ketika pengunjung membuka link categories/label). Selain itu tentu saja scroll to top control ini bisa dimanfaatkan untuk memperindah penampilan blog. Dan ini sangat memungkinkan berkat digunakannya CSS3.

Cara Membuat Scroll to Top Controll

Labels: ,
0 comments
at 10/04/2010

Fantastic Scroll Box using CSS3 RGBA

Posted by cah ndeso kluthuk

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Labels: ,
3 comments
at 10/04/2010

Box Serba Guna Sidebar Widget dengan CSS3 Transition

Posted by cah ndeso kluthuk

Box serbaguna untuk sidebar widget ini dibuat dengan memanfaatkan kode CSS3 yang saat ini menjadi satu pilihan terbaik desain HTML, seperti border-radius, box-shadow atau drop-shadow serta sedikit CSS3 transition untuk membuat animasi. Box bisa secara langsung digunakan sebagai box (wadah) untuk semua widget yang ada di sidebar, termasuk setiap judul widget akan terwadahi di dalamnya. Meskipun demikian, bila diinginkan, dengan sedikit merubah kode maka box ini bisa berfungsi hanya sebagai box untuk isi widgetnya saja (judul widget di luar box). Pada pengembangan selanjutnya, jika sampeyan hanya akan menggunakan box ini untuk salah satu widget saja, maka tinggal lakukan perubahan satu kode maka box hanya akan menjadi wadah bagi 1 (satu) buah widget. Apabila sampeyan ingin merubahnya sebagai scroll box, maka tinggal tambahkan height: ...px; dan overflow: auto;. Jadilah sebuah box serbaguna yang siapapun dengan mudah mampu melakukannya. Ya ... karena semua hanya perlu dilakukan tanpa mengadakan perubahan pada kode-kode yang ada di template. O ..., ya, kali ini kita tidak menggunakan bentuk demo karena dengan mudah dan cepat akan dapat sampeyan lakukan sendiri dengan hasil yang secara cepat pula dapat sampeyan lihat.

Kode CSS Box Serbaguna Sidebar Widget

Labels: , ,
5 comments
at 10/02/2010

Tampilkan Text, Images atau link di bawah Posting dengan CSS3

Posted by cah ndeso kluthuk

Teks, gambar atau image dan link bisa sampeyan tampilkan di bawah posting tanpa setiap kali menuliskan kode HTML-nya, atau dengan istilah lain membuat sebuah box yang secara permanen akan terlihat di bawah posting. Tentu saja sampeyan dapat mengembangkan menjadi fungsi lain seperti menampilkan profil pribadi (author), emak sampeyan atau mungkin wajah nenek supaya bisa mejeng di blog.

Membuat desain ini supaya mampu disuguhkan secara menarik, cantik dan membuat air ludah mengalir sederas "air terjun" sudah menjadi kewajiban. CSS3 kita manfaatkan dengan melibatkan CSS3 drop shadow, CSS3 text shadow, CSS3 border-radius, CSS3 background gradient dan CSS3 transition. Untuk mengoptimalkan tampilan agar terlihat "jreng" dan bisa dipadukan dengan berbagai background blog, kita juga berusaha mensuportnya dengan pemanfaatan warna yang "mudah padu" di semua blog. Sampeyan bisa melihat "wajah" desain menarik ini dengan membuka link di bawah (DEMO). Setelah terbuka, meluncurlah ke bawah posting. Di sana akan sampeyan jumpai "barang" itu!

D E M O

Kode CSS

#sigilabox {
      margin: 10px auto;
      background: #aaa;
      padding: 5px;
      float: left;
      border: 1px solid #333;
      border-radius: 8px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      text-shadow: 1px 1px 1px #000;
      -o-transition: all 2s ease-in;
      -moz-transition: all 2s ease-in;
      -webkit-transition: all 2s ease-in;
}
#sigilabox:hover {
      box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000;
      -moz-box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000;
      -webkit-box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000;
}
#sigilabox h3 {
      font-size: 18px;
      font-weight: bold;
      color: #00CCFF; 
      margin: 0;
}
.sigila {
      height: 100px;
      overflow: auto;
      margin : 10px 0 10px 0;
      padding :10px;
      box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000;
      -moz-box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000;
      -webkit-box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000;
      border-radius: 10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      background : #eee;
      background: -moz-linear-gradient(top, #aaa, #eee);
      background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#eee)); 
      font-size: 14px;
      font-family: Arial;
      font-weight: normal;
      color: #000000;
      text-shadow: 1px 1px 1px #eee;
}
.sigila a {
      font-weight: bold;
      font-family: Times;
      color: #FFCC99;
      text-shadow: 1px 1px 1px #000;
      text-decoration: none;
}
.sigila a:hover {
      color: #FF0000;
}
.sigila img {
      float: left;
      width: 90px;
      border: 3px solid #fff;
      border-radius: 8px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      padding: 2px;
      background: #ddd;
      opacity: 0.5;
      margin: 0 10px 2px 0;
      -o-transition: all 2s ease-in;
      -moz-transition: all 2s ease-in;
      -webkit-transition: all 2s ease-in;
}
.sigila img:hover {
       opacity: 1.0;
      -o-transform: scale(1.2) rotate(-30deg);
      -moz-transform: scale(1.2) rotate(-30deg);
      -webkit-transform: scale(1.2) rotate(-30deg);
}

xHTML

Labels: , ,
3 comments
at 10/02/2010

Background Image dengan Efek Transparansi dan Animasi di Profil Blogger-Blogspot dengan CSS3

Posted by cah ndeso kluthuk

"Making a Background Image with Transparency Effects and Animation on Blogger Profiles with CSS3 Transition". He ... he ... nih .... gubhug reyot berlagak pintar. Nulis pakai bahasa Inggris, he ....! Benar nggak, ya, teks di atas?! He ... eh ... biar saja,dah. Kata orang gila: "Orang yang takut berbuat maka tak akan pernah bisa! Orang yang takut berbuat salah, maka berarti orang tersebut tak pernah mau mencoba dan melakukan." He ... he ... itu cuma kata orang gila. Jadi bagi yang waras dan sehat jangan pernah ikutan. 'ntar jadi ikutan gila!

Menampilkan sebuah background image dengan efek transparansi disertai animasi di widget Profile blogger-blogspot pasti akan jadi sesuatu yang menarik untuk di buat. Sesuatu yang baru dan sepertinya belum pernah ada dan di coba. Hayo .... siapa yang berani mencoba (biar ikutan gila!)? Sampeyan bisa melihat tampilan baru widget profile dengan backckground-image yang menggunakan efek transparansi dan animasi CSS3 di sini (After the demo page open, move the cursor on "si gubhug reyot" in the right sidebar):

D E M O

Cara membuat Background Image dengan Efek Transparansi dan Animasi di Profil Blogger

Labels: , , ,
5 comments
at 10/02/2010

Membuat Animasi pada Read More (Create Animations on Read More) using CSS3

Posted by cah ndeso kluthuk

He ... he ... Lucu juga tak pikir-pikir. Aha ... mengapa aku begitu "ngebet" sama CSS3? Aneh nggak, ya?

Berhari-hari sudah dan beberapa posting terakhir yang berjumlah belasan, semuanya hampir tak pernah lepas dari CSS3 Transition dan Transformation. He ... heh .. Kadang aku heran juga sama diri ku sendiri. Knapa CSS terbaru ini begitu membelenggu pikiran hingga semua konsentrasi posting dan tutorial tercurah ke sana. Bahkan aku punya sedikit ide gila (membuat sebuah demo CSS3) yang pastinya akan mengejutkan bagi pengunjung blog tertentu. Nggak perlu aku omongkan dulu karena hal ini masih aku pertimbangkan dalam "otak sinting ku". Tentu saja ide gila ini sering-membuat aku tersenyum sendiri membayangkan berbagai hal yang pasti akan terjadi seandainya jadi aku buat. Gila, lucu, konyol (bukan konyol jaran "kuda", broer. Ah ..., pikiran kalian selalu ngeres "kotor"), bikin penasaran, bikin marah dan tentu saja beberapa orang akan senang dan sebaliknya beberapa orang akan malu, kaget atau mengumpat. He ... he ... coba tebak apa yang ada di otak jelek si gubhug reyot?!

CSS3 adalah sebuah obsesi besar untuk membuat desain blog menjadi lebih simple, dinamis sekaligus bikin decak kagum pengunjung. Ini pasti akan segera terjadi dan tak lama lagi semua desain akan berubah total dengan melibatkan 90% CSS3. Pertimbangan inilah yang melandasi konsentrasi posting ku belakangan ini. Di bawah ini adalah satu desain kecil untuk merubah tampilan read more blogspot. Membuat animasi pada read more blogspot baru. Hanya dengan menambahkan kode CSS di atas ]]></b:skin>, maka selesai sudah. Sampeyan tinggal lihat hasilnya dengan membuka blog. Gampang, toh! Mau lihat bentuk read more beranimasi ini?! KLIK link di bawah ini dan lihat demo-nya!

D E M O

Cara membuat read more beranimasi dengan CSS3

Labels: , , ,
2 comments
at 10/01/2010
Langganan: Postingan (Atom)
 
GR | Edited by | gubhug reyot