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!
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

Create Animations on Blogger Profile using CSS3 Transition-Transformation

Semakin banyak kreatifitas bisa kita ciptakan dengan datangnya CSS 3, terutama CSS 3 Transition - Transformation. Hal-hal yang sebelumnya begitu sulit diciptakan, dan kalaupun bisa harus menggunakan javascript atau jQuery dan Motool, kini cukup menggunakan kode CSS terbaru yang kita kenal sebagai CSS 3. Masih cukup terbatas memang, namun cukuplah untuk sementara ini sambil menunggu para browser berlomba untuk melengkapi diri pada dukungannya terhadap CSS 3. Tak lama lagi bila opera (Opera 1062)) dan Mozilla (Segera download Mozilla Firefox 4.0 beta 6! Biar nggak ketinggalan kereta!) juga sudah mempercepat dukungannya terhadap semua kode CSS 3, seperti CSS3 animation, pasti akan lebih banyak lagi desain yang lebih menarik akan tercipta. Saat ini cukup kita manfaatkan semaksimal mungkin CSS3 transition dan transformation yang sudah didukung dengan cukup baik oleh Mozilla dan Opera, serta Google Chrome dan Safari (webkit).

Membuat sebuah tampilan profile blogger-blogspot dalam bentuk animasi tentulah akan sangat menarik sebagai penyegar wajah blog. Kita akan buat sebuah transparansi pada gambar profil, hingga profil blogger ini mampu membuat penasaran pengunjung karena gambar/image yang terlihat samar-samar. Melalui kondisi ini diharapkan mampu membuat pengunjung menyentuhkan cursornya ke salah satu bagian box blogger profile yang terdapat di sidebar widget (umumnya dipasang di sini!). Apabila kondisi ini terpenuhi, maka dengan segera akan terjadi reaksi pada photo yang terpajang untuk bergerak ke arah kiri dan dilanjutkan sebuah putaran untuk sedikit menciptakan keatraktifan dan baru kemudian secara perlahan gambar yang terlihat suram menjadi kelihatan tajam karena efek transparansi hilang. Animasi ini dengan sengaja memang kita buat dengan melibatkan margin supaya gerak yang tercipta lebih dinamis dan bikin mata melotot serta nafas ngos-ngosan (memangnya lagi ngapain pakai ngos-ngosan? Ah ... bikin pikiran kotor jadi muncul di batok kepala. He ... he ... emang kamu suka yang pakai ngos-ngosan?!). Bagaimana bentuk sebenarnya dari animasi di profile blogger ini? Anda bisa melihatnya dengan melihat profile blogger "About Me" melalui link DEMO di bawah ini!

D E M O

Kode CSS Animations on Blogger Profile

Show - Hide Navbar with Animation using CSS3: Cara Menhilangkan Navbar Blogspot

Show Hide Navbar with Animation ini mungkin akan menjadi jalan tengah bagai beberapa sobat blogger yang tidak suka navbar ikutan nongol di halaman blog. Dengan menggunakan CSS3, kita akan membuat navbar tersembunyi (hilang) dan akan nongol lagi ketika cursor diarahkan pada satu titik tertentu. Tentu saja desain ini telah kita rancang secantik mungkin sehingga penampilan blog tetap terjaga. Dengan menyertakan kode CSS3 Transition, maka sebuah bentuk animasi gerak memungkinkan navbar sembunyi dan nongol dengan cara yang halus (tidak sruntal-sruntul kayak kalian, he ... he ...!). Saat blog dibuka navbar tidak akan terlihat. Di bagian atas blog (top bar) hanya akan terlihat sebuah image (gambar) yang kita gunakan sebagai "semacam swith" pembuka navbar. Saat cursor menyentuhnya, maka secara perlahan-lahan "si navbar" terlihat turun untuk memperlihatkan diri. Untuk menghilangkan navbar tersebut cukup lakukan dengan melepaskan cursor dari semua bagian navbar. Secara perlahan dia akan kembali pulang untuk bersembunyi ke habitatnya semula di di bagian atas blog. Sampeyan bisa coba melihat DEMO-nya dengan KLIK link di bawah ini. Carilah di bagian atas blog sebuah gambar (image) yang bertuliskan "Navbar (bertanda -panah-)".


Kode CSS

Create Text Resizer using CSS3 Transition - Perubah Ukuran Teks dg CSS3

Text Resizer ini amat sangat simple tetapi mampu memberikan fungsinya secara penuh sebagai sebuah "alat perubah ukuran teks". Kembali CSS3 transition kita manfaatkan sebagai pelengkap membentuk sedikit animasi tatkala perubahan ukuran teks terjadi. Javascript tetap dibutuhkan dan hanya berfungsi sebagai "saklar" atau "switch" hingga pergeseran pergantian ukuran font bisa dilakukan. Hal yang hingga saat ini masih terlalu sulit untuk dapat dilakukan oleh kode CSS.

Javascript yang digunakan untuk mendukung kinerja Text Resizer ini juga amat sederhana. Sampeyan bisa melihatnya di kode HTML yang akan disertakan di bawah. Script hanya difungsikan untuk merubah "class" pada kode CSS hingga setiap kali "KLIK" terjadi perubahan "class" yang berkorelasi dengan "perubahan ukuran font". Supaya memenuhi syarat sebagai sebuah Text Resizer, desain ini menyertakan 4 (empat) ukuran teks yang berbeda dengan system konversi ukuran dalam skala persen (90%-small, 100%-normal, 105%-big dan 110%-bigger). Jika dikehendaki ukuran atau skala berbeda, sampeyan bisa merubah nilai dalam persen tersebut dengan besaran yang lain.

Text Resizer dapat dipasang di blog sebagai sebuah fungsi permanen (pasang langsung di template pada bagian body) hingga secara otomatis muncul di halaman posting, atau digunakan secara temporer dengan hanya menggunakan di saat-saat tertentu ketika diperlukan (di halaman posting atau lewat Add Gadget).

Bukalah link DEMO di bawah ini untuk melihat bentuk "Text Resizer dan fungsi yang mampu dilakukannya".

Cara menggunakan Text Resizer

Cara Ganti Template - Blogger Lama Blogger Baru

Posting tentang cara mengganti template sebenarnya telah terpostingkan berbulan-bulan yang lalu. Setelah aku coba cek kembali apa yang tersampaikan melalui posting tersebut, eh ...., ternyata isi dalamnya benar-benar sudah "kedaluarsa" alias "ketinggalan sepur" (ketinggalan kereta) bin wayu (basi, broer!). Untung saja, dah, ada satu sobat kita yang menanyakan tentang cara mengganti template di blogger baru! Yap ..., bagaimana aku ndak merasa beruntung sekaligus bersyukur, wong akibat apa yang disampaikan sobat kita ini aku jadi "nge-cek" ke posting-posting lama yang memang ternyata beberapa di antaranya harus di update supaya nggak justru malah membingungkan para sobat blogger. Lha masa ... katanya tutorial kok justru malah bikin posing yang baca. Itu namanya bukan tutorial tapi Toto Royal! Iya, nggak?! Hayo siapa yang punya nama Toto dan suka royal atau kelayapan ke tempat-tempat pembangkit gairah! Ha ... ha... pasti kamu, to?

Mengganti template di blogger baru sebenarnya tidaklah terlalu jauh berbeda dengan cara mengganti template "di blogger lama". Perbedaan yang ada hanyalah pada bertambahnya jumlah pilihan template yang bisa dipergunakan. Yah ...., saat ini para blogger mungkin menjadi lebih beruntung karena punya banyak pilihan untuk mengganti template.

3 (tiga) Pilihan Template Blogspot

Image on Center of Position-Cara Buat Gambar Center (di Tengah)

Membuat gambar pada posisi tengah memang lebih sedikit digunakan blogger dari pada posisi gambar di kiri dan kanan (using float-left, float-right). Sedikit kode yang berbeda diperlukan untuk membuat gambar berposisi seperti itu (tengah). Posisi ini lebih sering dikenal dengan sebutan "center of position". Tidak banyak kode CSS yang kita butuhkan dan kode ini bisa digunakan secara langsung dalam tag img atau dengan menggunakan kode CSS yang kita simpan di template blog. Satu contoh di bawah ini adalah kode html yang berfungsi untuk membuat center gambar dan digunakan secara langsung di tag img:
<img style="display: block; margin: 0 auto; text-align: center; width: 300px; height: 219px;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJ4GCd1zFnI/AAAAAAAAApc/UFMMwG8Q3ok/s320/Pantai-1.jpg" />
Kode di atas adalah kode html pembuat posisi center dengan bentuk yang paling dasar. Jika sampeyan banya menggunakan posting dalam bentuk gambar akan jauh lebih baik seandainya kode dibuat dalam bentuk kode CSS sehingga bisa dimanfaatkan setiap kali posting. Kode CSS ini disimpan di template blog kemudian beri tanda dalam bentuk "class" seperti misalnya img.imgcenter sehingga ketika gambar diterbitkan maka ditambahkan sebuah "class" dalam "tag img" dan berbentuk seperti berikut : img class="imgcenter". Penggunaan kode CSS juga akan membuat ruang posting menjadi lebih praktis (tidak berjejalan dengan kode html). Sampeyan dapat juga menambahkan beberapa kode CSS yang lain dalam "class tersebut" hingga gambar yang dipostingkan akan tampillebih cantik. Kode baru seperti border, border-radius, drop-shadow (box-shadow), CSS3 transition dan transformation serta hover pasti akan membuat bentuk gambar lebih menarik saat ditonton.


Di bawah ini adalah satu contoh penggunaan kode HTML untuk membuat posisi gambar ditengah (center) yang dilengkapi dengan beberapa kode CSS untuk memperindah tampilan gambar.

Example - Image on Center of Position




Beberapa kode CSS untuk membuat gambar "center" dengan berbagai variasi tambahan kode CSS telah aku sediakan berikut demonya. Sampeyan bisa melihat dan menggunakan kode-kode tersebut untuk membuat tampilan gambar posting yang cantik. Silahkan buka link DEMO di bawah ini:




Kode CSS dan xHTML

Using Transition Property, Transition Delay, Transition Duration, Transition Timing Function in Mozilla, Opera, Safari

Standart penulisan kode CSS3 yang hingga saat ini masih belum terwujudkan, membuat sebuah desain HTML menjadi begitu banyak memerlukan kode yang sebenarnya berfungsi sama. Satu hal yang sebenarnya dapat dimaklumi juga karena dukungan browser terhadap CSS3, terutama CSS3 animaton, transition, transformation, border-radius dan box shadow masih belum dapat direalisasikan secara maksimal. Kondisi ini masih diperparah dengan tingkat kompabilitas dimasing masing browser. Seperti di Opera misalnya. Penulisan CSS3 transition dalam bentuk :
-o-transition: all 2s ease-in 700ms
akan mampu membentuk sebuah fungsi secara sempurna, termasuk perubahan yang diharapkan pada border (border-width, border-color, border-style). Hal yang berbeda akan terjadi ketika penulisan kode dibuat dalam bentuk :
-o-transition: border 2s ease-in 700ms
. Dengan cara ini maka bentuk transisi yang diterjadi tak akan sesuai dengan bentuk yang diharapkan. Pada transisi yang lebih kompleks, dengan melibatkan beberapa transition-propery, transition, delay, transition-timing-function dan transition duration (multiple transition), bahkan justru akan merusak desain yang coba kita tampilkan. Untuk mengatasi permasalahan-permasalan seperti ini, alngkah baiknya apabila kita memahami terlebih dahulu cara penggunaan setiap kode transisi serta seberapa dukungan browser terhadapnya.

Untuk lebih memahami beberapa cara penulisan CSS3 transition, silahkan gunakan metode penulisan seperti di bawah ini :


Opera


Penulisan kode berbeda tetapi fungsinya sama


Cara penulisan kode-1


-o-transition-property: width, height, background-color, color, opacity, -o-transform;
-o-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-o-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-o-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2


-o-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background-color 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -o-transform 2s linear 2s;


Mozilla


Penulisan kode berbeda tetapi fungsinya sama


Cara penulisan kode-1


-moz-transition-property: width, height, background, color, opacity, -moz-transform;
-moz-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-moz-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-moz-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2


-moz-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -moz-transform 2s linear 2s;


Safari-Google Chrome


Penulisan kode berbeda tetapi fungsinya sama


Cara penulisan kode-1


-webkit-transition-property: width, height, background, color, opacity, -webkit-transform;
-webkit-transition-duration: 1s, 0.5s, 1.2s, 900ms, 4.5s, 2s;
-webkit-transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, linear;
-webkit-transition-delay: 300ms, 0.8s, 1.3s, 2.7s, 5000ms, 2s;

Cara penulisan kode-2


-webkit-transition: width 1s ease 300ms, height 0.5s linear 0.8s, background 1.2s ease-in 1.3s, color 900ms ease-out 2.7s, opacity 4.5s ease-in-out 5000ms, -webkit-transform 2s linear 2s;


Cara paling sederhana menuliskan kode transisi


Tanpa menyebutkan transition property dan timing function:

-o-transition: 1s 700ms;
-moz-transition: 1s 700ms;
-webkit-transition: 1s 700ms;

Transisi berlaku untuk semua property:

-o-transition: all 0.5s ease-in 0.8s;
-moz-transition: all 0.5s ease-in 0.8s;
-webkit-transition: all 0.5s ease-in 0.8s;

Transisi berlaku untuk semua property tanpa delay:

-o-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;

Catatan - Khusus Opera


  • Untuk sementara ini penulisan property border dan border-radius sebaiknya tidak dilakukan di Opera (CSS3 Transition-property), karena justru merusak desain yang telah dirancang.
  • Background property ditulis sebagai: background-color.
    contoh:
    -o-transition: background-color 2s ease-out 400ms;

DEMO berikut Kode CSS dan xHTML


Beberapa bentuk transisi dengan memanfaatkan seluruh komponen dan property di CSS3 transition seperti transition-delay, transition-timing-function, transition-property dan transition-duraton telah aku siapkan dalam bentuk demo beserta kode CSS dan xHTMl-nya. Silahkan buka link di bawah ini untuk melihat dan copy kodenya:



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








» Happy Blogging - gubhugreyot «


Drop-in Content DIV-Box with Animation Using CSS3 Transition-Transformation

Drop-in Conten Box atau DIV merupakan sebuah desain yang dibuat menggunakan CSS3 untuk membentuk fungsi berikut animasinya. Sedikit javascript hanya dipergunakan sebagai controll menghilangkan box dari halaman blog. Script ini amat simple dan sederhana seperti terlihat di bawah:

onclick = "if (this.className =='.....') (this.className ='.....' ) Else (this.className ='.....' ) "

Sampeyan cukup meletakkan dan menyimpan seluruh kode CSS dan xHTML melalui "Add a Gadget" atau "Tambah Gadget" dan tampilah "Drop-in Conten Box atau DIV" dengan amat manisnya. Jika ingin menyimpan kode CSS di atas ]]></b:skin>, sampeyan harus menghapus tag <style type="text/css"> beserta tag penutupnya </style>, karena penyimpanan dengan melibatkan tag seperti tersebut di atas kode ]]></b:skin> justru akan menjadi perusak desain HTML. Jika ingin menggunakannya simpanlah CSS melaui Add a Gadget atau di bagian body atau bisa juga di bawah ]]></b:skin>.

DEMO

Silahkan melihat demonya dengan membuka link demo berikut!

CSS Code-1 (for browsers other than IE)

rgba Collapsible using CSS3 Transition-Transformation

Sebuah collapsible cantik dengan dilengkapi beberapa animasi yang mampu memberikan suguhan penampilan menarik hanya mungkin dilakukan jika sebuah javascript dipergunakan. Itupun harus melibatkan jQuery untuk bisa memberikan tampilan maksimal. Tapi hal seperti di atas hanya mungkin terjadi setahun yang lalu ketika CSS3 masih belum berkembang seperti saat ini, sobat! Kini banyak desain menarik cukup dilakukan dengan CSS istimewa ini. Sebuah kode yang nantinya akan jauh lebih dahsyat kemampuannya dan pasti bisa memberikan kontribusi luar biasa menarik bagi perkembangan dunia blogger. Yap ..., tidak hanya dalam bentuk desain yang akan semakin menakjubkan, akan tetapi pasti akan semakin memperingan beban sebuah blog hingga loading akan semakin lancar seperti layaknya waktu sampeyan membuang simpanan air di balik pohon beringin di pinggir jalan (ketika perjalanan sudah begitu melelahkan dan membuat pantat di jok mobil serasa dibakar di atas tungku bakul sate Madura). He ... he ... Iya, khan?! Pasti sampeyan suka melakukan hal seperti itu. Kencing di pinggir jalan sambil toleh kanan-kiri kuwatir ada orang lewat! Hi ...

Collapsibel ini aku beri nama seperti di atas bukan karena apa-apa. Hanya disebabkan desain yang dipergunakan menggunakan background rgba dan ternyata cukup simple dan mampu membuat tampilan semakin oye. Untuk membuatnya semakin mudah digunakan, dalam desain ini juga telah disertakan syntag yang khusus untuk mengatur tampilan image. Dengan width 100px aku kira cukup pantas bagi collapsible dengan ukuran lebar tak lebih dari 350px. Itupun jika sampeyan punya keinginan yang berbeda maka silahkan untuk dirubah beberapa CSS yang ada supaya bisa sesuai dan tepat untuk dipergunakan di blog sampeyan. Yah ..., memang apa boleh buat. Beberapa perubahan memang kerap harus dilakukan karena template semua blogger hampir tidak ada yang sama persis desain atau ukuran widgetnya.

Untuk membuat collapsible ini sampeyan harus login dulu ke blogger supaya bisa masuk ke halaman desain dasar blog (template) dan melakukan penambahan kode CSS serta mempergunakan xHTMLnya. Tak akan terlalu susah karena kita hanya perlu meletakkan kode CSSnya di atas kode ]]></b:skin> kemudian melakanjutkan dengan proses penyimpanan. Supaya lebih lengkap dan lebih jelas cobalah ikuti langkah-langkah di bawah ini.
  • Login : Lakukan login ke blogger (login to blogger).
    • Tulis User Name (Nama Pengguna) atau Email Address.
    • Tuliskan Password (Sandi).
    • KLIK "Login" dan tunggu beberapa saat hingga halaman dasboard terlihat.
  • Dasboard (Dasbor) : KLIK link "Design" atau "Rancangan". Tunggu lagi beberapa saat hingga muncul halaman baru (Page Elements).
  • Design atau Rancangan : Yang akan sampeyan jumpai saat pertama masuk halaman Design atau Rancangan adalah Page Elements yang merupakan satu bagian dari design/rancangan. Cari dan KLIK link "Edit HTML". Setelah bagian ini terbuka maka sampeyan akan menjumpai banyak kode yang berupa kode HTMl. Kode-kode inilah yang menjadi pembangun desain blog sampeyan.
  • Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya. Gunakan Ctrl+F untuk memudahkan pencarian kode. Tekan secara bersamaan (pada keyboard) kemudian lanjutkan dengan menuliskan kode baru KLIK Find-Next/Find-Previous.
  • Setelah kode CSS diletakkan pada posisi yang benar, silahkan KLIK SAVE Template/Simpan Template. Perlu diingat bahwa penyimpanan kode CSS di atas kode ]]></b:skin> (dalam bentuk desain apapun) tidak perlu harus menambahkan tag style yang berbentuk <style type="text/css"> dengan tag pentutup </style>. Penambahan kode seperti ini justru akan merusak desain yang telah dibuat hingga desain tampil dalam bentuk yang tidak sesuai rencana dan harapan.

Jika mungkin tertarik untuk melihat bentuk rgba Collapsible using CSS3, silahkan buka DEMO dengan KLIK link di bawah ini:

Image Gallery and Hidden Descriptions with Animation using CSS3 Transition-Transformation

Bagi yang sering menampilkan gambar berikut deskripsinya sebagai materi posting, images gallery and hidden description with animation using CSS3 transition-transformation menjadi amat menarik untuk digunakan. Mini images gallery ini sangat selain dapat digunakan sebagai sebuah images gallery dapat juga digunakan untuk menampilkan gambar dalam bentuk tunggal (satu gambar) dan amat kompatible untuk browser yang sudah mengakomodir CSS3 untuk memberikan berbagai efek terbaru seperti Mozilla Firefox, Opera, Google Chrome dan Safari serta beberapa browser yang lain. Disamping gambar ditampilkan dalam bentuk animasi, deskripsi juga ditampilkan secara tersembunyi sehingga halaman blog menjadi terlihat amat minimalis. Deskripsi gambar dibuat tersembunyi secara rapi dibagian bawah gambar dengan memanfaatkan tag p berikut span. Deskripsi gambar akan terlihat hanya dibagian judul ketika mouse berada di atas gambar, baru kemudian seluruh deskripsi menjadi terlihat secara keseluruhan ketika mouse diarahkan di atas judul deskripsi. Untuk membuat gambar dan deskripsi ini menjadi lebih menarik, sampeyan bisa memberikan judul deskripsi menggunakan kata atau kalimat yang membuat pengunjung blog secara otomatis mengarahkan cursor ke bagian judul. Pasti akan menjadi sangat menarik dan membuat kita tertantang untuk memunculkan kreatifitas yang membuat semua orang mungkin penasaran menyimak deskripsi secara total.

Supaya lebih jelas memahami bagaimana sebenarnya bentuk gambar serta deskripsi yang semuanya terangkai sebuah animasi ini, silahkan sampeyan lihat dengan membuka link demo di bawah ini.


Untuk membuatnya silahkan lakukan prosedur berikut.
  • Login : Login to Blogger (login ke blogger)
  • Dasboard (Dasbor) : Setelah halaman dasboard terbuka, KLIK link "Design" atau "Rancangan".
  • Design (Rancangan) : KLIK ""Edit HTML".
  • Find Code : Cari kode CSS ]]></b:skin>.
  • Copy-paste : Copy dan pastekan kode CSS di atas ]]></b:skin>.
    Catatan : Gunakan Ctrl + F (pada keyboard) untuk mencari kode HTML atau CSS dan Javascript stiap kali melakukan pencarian kode supaya lebih mudah dan cepat.
  • SAVE (Simpan) Template : KLIK SAVE Template dan lanjutkan dengan menggunakan xHTML di bagian body atau di ruang posting blog.
  • Open Blog : Buka blog untuk melihat hasil sekaligus pengecekan hasil.

Kode CSS Image and Hidden Descriptions

Tips Cara Membuat Gambar-Image Berderet Horizontal

Menata gambar dalam sebuah posting memang merupakan kebutuhan vital yang harus tertangani dengan baik oleh blogger yang dengan sungguh-sungguh ingin memberikan sajian terbaik sebuah posting. Sebuah tampilan yang rapi pasti akan memberikan kepuasan batin tidak hanya bagi pemilik blog, namun juga memberikan kenyamanan tersendiri bagi pembaca blog untuk menikmati semua posting yang telah dibuat dengan kerja keras yang tidak hanya melelahkan secara fisik, namun sekaligus membuat pikiran terkadang terasa lunglai bagai tak bertulang! (He ... he ... memang ada otak bertulang?! Otak DinoPatiSaurus kali, ya?!). Ha ... ha ... rajin pangkal pandai, hemat pangkal kaya, rapi dan teliti bukan saja milik anak TK, namun juga menjadi milik ABRI (Asyiknya Blog Rajin dan Indah).

Menata beberapa gambar dalam sebuah posting memang berbeda dengan apabila kita hanya menampilkan sebuah gambar/image. Untuk satu gambar kita cukup letakkan saja dipojok kiri (float: left;) atau di pojok kanan (float:right;), maka semua selesai sudah dan posting mengalir bagai kali ciliwung. Deras dan suka menghanyutkan orang sekaligus bikin banjir! Iya, nggak?! He ... he ...! Ada cara yang cukup sederhana untuk membuat penataan gambar berderet/berjajar dalam arah horizontal dengan tampilan yang rapi. Satu yang perlu dipahami adalah dengan mengetahui kegunaan margin serta fungsi float. Secara sederhana margin merupakan jarak antara satu bidang dengan bidang yang lain dalam sebuah web/ blog, sedang float berfungsi untuk mengatur posisi gambar atau tag (DIV, p dll) supaya berada pada posisi kanan, kiri, tak dikanan dan/atau kiri dan sekaligus float mampu membuat sebuah tag secara otomatis mempunyai luas sebesar isi yang terkandung di dalamnya. Sifat yang seperti ini amat dibutuhkan untuk membuat materi (gambar atau tag lain) dapat tersusun secara berderet horizontal secara otomatis. Penggunaan float menguntungkan karena membuat width atau height terkadang tidak dibutuhkan untuk ditambahkan.

Untuk membangun sebuah desain yang bernilai lebih tentunya tidak hanya margin dan float yang harus dipahami fungsi dan kegunaanya. Kode CSS yang lain seperti border, padding, background serta beberapa yang lain akan banyak memberikan support hingga dihasilkan sebuah tampilan yang lebih cvcantik dan menarik. Hal yang sebenarnya tidak terlalu sulit untuk dilakukan, namun demikian satu hal yang utama adalah ketelatenan dan semangat serta kemauan yang keras untuk mencoba memahami satu demi satu setiap fungsi dan kegunaan kode HTML. Satu fasilitas (software) yang paling diperlukan untuk mempermudah pemahaman tentang kode HTML adalah dengan cara menggunakan software Dreamweaver atau yang kini lebih dikenal dengan Adobe Dreamweaver CS5. Cobalah untuk mencari software ini supaya lebih mudah dan cepat mempelajari kode CSS, xHTML, javascript ataupun PHP.

Sebagai langkah awal untuk memahami penataan gambar dalam posting, ada baiknya sampeyan juga membuka satu posting di blog ini yang mengupas tentang penggunaan margin untuk menata sebuah gambar yang terdapat dalam:


Kode utama untuk membuat sebuah gambar dalam bentuk deret horizontal :
- penggunaan margin
- float-left
- padding (untuk membentuk penataan ruang yang rapi)
- width dan height
- sebaiknya setiap gambar mempunyai tinggi yang sama, dimana ketinggian gambar bisa langsung diatur melalui kode CSS sekalipun gambar sebenarnya mempunyai tinggi yang tidak sama.
sebagai contoh: jika gambar asli tinggi= 200px, maka gambar bisa dibuat menjadi hanya bertinggi 100px atau misalnya 55px hanya dengan membuat kode CSS --> height: 100px; atau height: 55px;
- untuk border, background, border-radius, box-shadow atau yang lain akan dengan mudah dipelajari setelah pemahaman tentang kode-kode di atas sudah terpelajari dengan baik.



Setelah sampeyan membuka link posting berikut DEMO di atas, silahkan sampeyan coba pelajari kode pembentuk gambar berderet di bawah ini, yang dibuat dengan menggunakan 2 cara:

How to Install The Latest Widget from Blogspot: Popular Posts Widget

Cara Pasang Widget Popular Posts. Sebuah Widget Baru dari Blogger-Blogspot

Hari demi hari rupanya blogger terus berpacu untuk menggapai kesempurnaan dengan memberikan layanan yang semakin memberikan banyak kenyamanan bagi para penggunanya. Yah .., layanan ini sebenarnya memang sesuatu yang sudah teramat lama ditunggu dan memang sudah seharusnya menjadi prioritas utama blogger untuk tetap bisa bersaing dengan wordpress, misalnya. Bersyukur kiranya menjadi sesuatu yang wajib kita ungkapkan, disamping harapan lain yang masih kita tunggu. Sebuah harapan besar yang aku kira bukanlah sebuah angan semata. Satu pengharapan bagaimana supaya daya dongkrak popularitas para blogger di blogspot bisa lebih "mampu memberikan sedikit daya saing yang nyata terhadap blogger-blogger Wordpress dan beberapa yang lain". Sesuatu yang jelas amat kita butuhkan hingga mampu membuat para "blogger-blogspot" merasa nyaman, kerasan (enjoy karena makmur, mbul!! He ..., he ...) karena bisa setara dengan mereka-mereka".

Setelah "Template Blogger Baru" atau "New Blogger Template" secara resmi disyahkan sebagai template terbaru blogger, kini sebuah layanan baru telah juga mulai diberikan. Masih dengan bentuk embel-embel "Blogger Dalam Konsep" seperti halnya sebelum "New Blogger Template" secara resmi digunakan sebagai template "syah". Layanan terbaru ini berupa beberapa fitur diantaranya "Popular Posts dan Stats (Statistics)" yang tersertakan sebagai sebuah widget serta sebuah fitur statistics yang bersifat internal dan terpadu. Fitur Stats internal memberikan data statistik yang hanya dapat dimonitor oleh si-empunya blog, sedang fitur stats dan popular posts dalam bentuk widget memberikan keleluasaan bagi pembaca blog untuk mengetahui data statistik blog sekaligus posting terpopuler yang terdata.

Menampilkan ke dua widget di atas tentunya akan memberikan banyak keuntungan baik bagi blogger khususnya dan pembaca pada umumnya. Untuk memasang widget ini juga dengan mudah dan cepat dapat kita lakukan. Sampeyan hanya perlu login ke blogger dengan cara yang sedikit berbeda. Jika selama ini selalu menggunakan https://www.blogger.com/start, maka untuk bisa mendapatkan widget "Popular Posts dan Stats", loginlah dengan membuka http://bloggerindraft.blogspot.com. Langkah selengkapnya adalah sebagai berikut.
  • Login : Login to Blogger(login ke blogger) dengan menggunakan link baru di bawah ini:
    .
  • Lihat di ujung kanan atas halaman. KLIK link "Masuk (Sign-in)".
    • Lanjutkan dengan menuliskan User Name (Nama Pengguna). Sampeyan bisa juga menggunakan Email Address untuk menggantikan User Name.
    • Tulis Password (Sandi).
    • KLIK "login"
  • Dasboard-1 (Dasbor-1) : Setelah halaman dasboard terbuka, gulung halaman dasboard ke bawah hingga sampeyan temukan:
    "Other Stuff - Tools and Resources - Blogger in Draft"
    atau:
    "Item Lainnya - Alat dan Sumberdaya - Blogger dalam Konsep". KLIK pada "Blogger in Draft" atau "Blogger dalam Konsep". Tunggu beberapa saat.
  • Dasboard-2 (Dasbor-2) : Kembali sampeyan akan masuk ke halaman dasboard. Dasboard ini merupakan "Blogger in Draft Dasboard" atau "Dasbor Blogger dalam Konsep".
    KLIK "Design (Rancangan)".
  • Design (Rancangan) : KLIK "Add Gadget (Tambah Gadget)". Untuk mudahnya pilih yang dibagian "Sidebar". Tunggu beberapa saat.

  • Setelah muncul window baru dengan judul "Add a Gadget" atau "Tambahkan Gadget", silahkan pilih dan KLIK widget " Popular Posts New!" atau "Entri Populer (Baru!)". Akan ada beberapa pilihan:
    Most viewed:
    - All time, Last 30 days, Last 7 days.
    - Show Post title and: image thumbnail, snippet
    ,

    atau dalam bentuk:

    Paling banyak dikunjungi:
    - Setiap saat, 30 hari terakhir, 7 hari terakhir.
    - Tampilkan Judul entri dan: thumbnail gambar, cuplikan


    Silahkan sampeyan sesuaikan dengan selera kemudian lanjutkan dengan KLIK "SAVE atau Simpan".
  • Open Blog (buka Blog) untuk melihat hasilnya!


Untuk melihat bentuk "Popular Posts" yang sudah terpasang, silahkan sampeyan buka di link berikut:


Popular posts in this demo has been modified using CSS3 code. If you want to make it, please follow the next tutorial!


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








» Happy Blogging - gubhugreyot «


Image Enlarger with Animation for Image post using CSS3

Image enlarger yang hanya menggunakan CSS3 ini dikhususkan untuk posting yang melibatkan penggunaan gambar. Gambar hanya akan ditampilkan dalam ukuran kecil (thumbnail) dengan lebar (width) dan tinggi (height) sebesar masing-masing 110px. Dengan menyentuhkan cursor pada thumbnail, maka gambar akan menjadi bertambah besar dengan ukuran lebar (width) sebesar 400px sedang tingginya menyesuaikan dengan gambar yang diposting. Dengan menggunakan metode seperti ini diharapkan halaman posting menjadi lebih rapi dan lebih mampu memuat teks tanpa mengurangi kemampuannya dalam menampilkan gambar berukuran besar.

Untuk meciptakan desain halaman posting yang tetap terjaga, dimana perbesaran gambar tidak mempengaruhi tatanan posting, desain telah disesuaikan dengan menggunakan kode CSS untuk membuat teks atau gambar lain tetap diposisi semula saat cursor menyentuh gambar (thumnail) dan proses perbesaran gambar terjadi. Position absolute dan penambahan DIV dalam bentuk float left membuat semua ini mungkin terjadi.

Untuk meletakkan gambar baru (ke-2, ke-3 dst), cukup batasi dengan menggunakan tag p dalam bentuk :

<p> <div class="leftGRie"></div><img class="GRie" src="Image-2.jpg /> Text here! </p> kemudian untuk gambar lain lakukan hal yang sama.

Supaya lebih jelas apa yang dimaksud di atas, silahkan sampeyan lihat DEMO-nya melalui link di bawah ini.



Kode CSS Image Enlarger for post

Simple Javascript to Select all and Copy DIV (Code, Text and everything)

Ini adalah sebuah solusi bagi siapapun yang ingin mempermudah pengunjung blog agar dapat secara cepat mengcopy semua yang sudah terpostingkan. Hanya dengan KLIK pada button "Select All and Copy", maka semua langsung dapat terpindahkan ke pengunjung. Memang untuk memberikan layanan ini kita tak mungkin melakukannya tanpa script. Hal yang teramat berbeda yang terjadi apabila kita menggunakan textarea. Dengan textarea maka kita sama sekali tak memerlukan tambahan script atau kode html satupun. Namun karena menggunakan textarea membuat kita mengalami banyak keterbatasan, maka bisa dikatakan lebih banyak blogger yang lebih suka menggunakan tag yang lain. Yah ... karena dengan leluasa banyak hal yang bisa divariasikan atau dikreasikan sehingga lebih mampu memberikan lebih banyak gaya hingga blog menjadi lebih hidup. Apapun dapat dicopy melalui fungsi ini. Mungkin selama ini sampeyan lebih banyak menggunakan tag DIV, p, pre, b, em, h2, h3 atau apaupun lainya, maka silahkan gunakan script ini dan selesaikan semua permasalahan tentang copy paste yang biasanya harus dilakukan dengan menarik-narik mouse hingga molor-molor nggak karuan. O ..., yah, sebelum sampai ke inti tutorialnya, silahkan lihat DEMO Select All and Copy DIV dengan KLIK link demo di bawah ini.

Javascrip dan Kode CSS "Select All and Copy DIV"

Selain javascript, dalam tutorial ini juga telah aku sediakan kode CSS pembentuk button yang sangat cantik dan bisa mentul-mentul seperti yang terlihat di DEMO.

 
GR | Edited by | gubhug reyot