Tips-Trik Upload dan Menyimpan Gambar Berukuran Super Besar di Blogger-Blogspot

Bagi beberapa sobat blogger mungkin masih ada yang belum tahu secara persis bahwa sebenarnya semua gambar, baik berukuran besar atau kecil bisa kita upload dan menyimpannya di blogger. Jika biasanya kita hanya melihat tampilan gambar yang hanya berukuran kecil di halaman posting sebenarnya itu hanyalah untuk penyesuaian dengan ukuran ruang halaman posting saja. Dibalik gambar yang terlihat kecil itu tersimpan sebuah gambar berukuran besar yang sesuai dengan ukuran gambar yang terupload. URL gambar (yang berukuran besar) tersimpan dalam kode HTML-nya dan terdapat pada tag a. URL gambar ukuran riil dapat kita ambil dan digunakan dengan mengambil dengan klik posting MODE EDIT HTML. Agar lebih jelas silahkan ikuti panduan di bawah ini. O ..., ya ..., jika sampeyan ingin melihat seberapa besar gambar yang bisa diupload dan disimpan di blogger silahkan klik gambar di atas. Ada dua gambar berukuran besar hasil upload di blogger lengkap dengan URL-nya. Silahkan klik saja maka dua gambar tersebut akan terlihat secara bersamaan!

Cara upload dan ambil kode HTML gambar

• Login ke Blogger.
  • Tulis Email Address.
  • Tulis Password.
  • KLIK LOGIN.
• Setelah halaman DASBOARD (Dasbor) terbuka, cari dan klik link POSTING.
• KLIK NEW ENTRI.
• Pilih pada posting Mode Compose atau EDIT HTML.
• Upload gambar sebuah gambar dengan ukuran besar dengan cara klik fitur INSERT IMAGE (fitur bergambar pemandangan) kemudian klik CHOOSE FILE.
• Pilih dan tentukan gambar yang akan di upoload (di folder PC) kemudian "OK".
• Setelah gambar terupload dan terlihat atau tersimpan di halaman posting. Lanjutkan dengan klik MODE EDIT HTML hingga kode HTML gambar hasil upload terlihat.
• Ambil URL gambar dari kode terdepan (tag a) dan jangan yang di tag img karena gambar besarnya ada di tag a tersebut. Sebagai contoh silahkan lihat kode di bawah ini (yang digunakan URL yang berwarna oranye!).

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4oBdfP0IgU_uRlmC1WJPov1zar6OXCpph4c3ihVTrZEYpEdQlX43o4t4jUrgWiLgXW-H7-PG_XyTgnW7tyGyvNLtvlw9Y9HgMcPfDdycpU1zx35BFKn18B-aAwPrRZl7N9NOB_NluMo/s1600/Widodari.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4oBdfP0IgU_uRlmC1WJPov1zar6OXCpph4c3ihVTrZEYpEdQlX43o4t4jUrgWiLgXW-H7-PG_XyTgnW7tyGyvNLtvlw9Y9HgMcPfDdycpU1zx35BFKn18B-aAwPrRZl7N9NOB_NluMo/s1600/Widodari.jpg" /></a></div>

Atau dalam bentuk kode yang berbeda seperti ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJUzrYdLUyQjSiHXFJ-w5ZRuMt235eLZQt8u1LRtq2kP1m_hyxAutblmeC468tO3VmjmVBjlfbXJBk_q7mcuNyXYwuO3MYrfcgEq-Zl9zN7mmfAZDf5MeiphLiSk-25Gn5k6nMO-JfWM/s1600/21kwal1.jpg"><img style="cursor:pointer; cursor:hand;width: 289px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJUzrYdLUyQjSiHXFJ-w5ZRuMt235eLZQt8u1LRtq2kP1m_hyxAutblmeC468tO3VmjmVBjlfbXJBk_q7mcuNyXYwuO3MYrfcgEq-Zl9zN7mmfAZDf5MeiphLiSk-25Gn5k6nMO-JfWM/s400/21kwal1.jpg" alt="" id="BLOGGER_PHOTO_ID_5552462025449302034" border="0" /></a>

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

• 
• 

» Happy Blogging - gubhugreyot «

Tips dan Trik Cara Upload Gambar Animasi gif di Blogspot - Blogger

Gambar di bawah ini adalah file gambar animasi gif yang merupakan hasil upload di blogger/blogspot, dengan URL gambar:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_cp6qkjYlTFfe3Z0tM8bUVSL7f-70POJ-V9Z8jF5oBPLjKps8hyW-WKIrP2WFgj45xNd4RA-JEEs5UdvhLaU8CPEfjM1xfysN8WvPvlEunVVwE660Q49gX688d0A8g7ZjXlpU6BgEnr4/s1600/ManusiaPurba.gif

Trik untuk upload gambar animasi gif di blogspot ini adalah sebagai salah satu solusi yang wajib kita ketahui agar kita tak terlalu bergantung pada image hosting gratisan yang sering jadi sumber petaka (karena banned). Bagi sobat-sobat blogger yang masih menggunakan Template Lama atau Template Tata Letak (layout Tempaltes) mungkin beberapa masih belum mengetahui tentang layanan upload dan simpan file animasi gif di blogger/blogspot karena mungkin pengaturan atau setting blognya masih menggunakan setting lama seperti di bawah ini:

Membuat Scroll Box Widget Recent Post dengan Thumbnail Bawaan Blogger

Setelah di posting sebelumnya kita bahas cara buat widget recent posts yang serba fleksible dan dilengkapi dengan beberapa pengaturan tampilan termasuk dengan thumnail ataupun mau dibuat tanpa thumnail, mungkin masih ada yang menjadi ganjalan saat widget ini selesai dibuat dan terpajang dengan cantik di salah satu sudut blog. Jika posting yang dimunculkan di recent posts hanya 4 atau 5 posting tentu masalah tak akan terlihat, namun ketika kita ingin menampilkan posting di recent posts dfalam jumlah cukup besar barulah persoalan mulai terlihat dan terasakan. Ya .... karena posting akan terlihat berderet meninggi dengan ketinggian yang .... heh ... heh ... ngudubilah .... seperti tangga hotel bertingkat seribu .... He ... heh ... tinggiiiiiiiiiiii .... sekali!

Tidak boleh tidak masalah ini harus segera diatasi jika blog tak ingin terlihat runyam di mata. Scroll box menjadi solusi paling tepat hingga ketinggian widget terbatasi dan dapat diatur.

Widget Recent Posts Blogger dengan dan tanpa Thumbnail

Jika mungkin kita lebih teliti mencoba memanfaatkan widget yang telah disediakan blogger/blogspot maka mungkin widget recent posts tak perlu lagi kita cari dari luar yang membuat kita juga cukup repot saat mencoba menggunakannya. Widget recent posts yang telah disediakan blogger ini sangat fleksible dan memberi banyak alternatif pengaturan yang membuat kita bisa mengatur bentuk tampilannya. Berbagai pilihan tersebut di antaranya: bisa pakai thumbnail atau hanya teks, ukuran dan warna font bisa diatur, jumlah posting bisa kita pilih sesuka hati, ukuran thumbnail juga bisa dirubah disesuaikan dengan ruang widget yang tersedia, bahkan teks read more bisa kita tentukan sendiri kata-katanya.

Tampilkan Navbar Blogger di Halaman Bawah Blog

Melihat navbar blogger di blog pada ujung teratas adalah hal yang lumrah karena posisi yang disediakan oleh desain templatenya memang di situ. Melihat blog tanpa navbar juga bukan lagi barang aneh karena memang bisa tidak ditampilkan (dihilangkan). Bagaimana seandainya navbar ini tetap kita tampilkan atau kita manfaatkan namun posisinya kita pindah di halaman terbawah blog. Navbar kita buat selalu terlihat biar halaman digulung naik ataupun turun, tetapi dibuat terlihat samar-samar (transparan) dan baru tampak jelas ketika tersentuh cursor? Biar sedikit efek membuat tampilan navbar lebih cantik, bagaimana kalau kode CSS3 kita dayagunakan? Lebih menarikkan blog jadinya? Bagaimana kalau kita coba saja dan lihat hasilnya? Perlu demo? He ... eh .... Sebaiknya nggak usah, ya .... He ... he ... Biar makin penasaran dengan gaya navbar yang sedikit lain dari biasanya ini!

Untuk membuatnya silahkan copy paste kode CSS berikut di atas kode

Membuat Tanda Tangan di Blog

Menampilkan ciri khas atau identitas diri bisa menggunakan berbagai cara. Selain nama blog, favicon di address bar dan seabreg cara dan ciri khas lain, sebuah tanda tangan, selain membuat ciri khas super khusus dan pasti berbeda dengan yang lain, dia juga mampu ditampilkan sebagai alat untuk mempermanis gaya atau style blog.

Membuat sebuah tanda tangan selain bisa dilakukan sendiri dengan membuatnya menggunakan berbagai software seperti Adobe Photoshop, Corell Draw dan yang lain, bisa juga dibuat dengan memanfaatkan situs pemberi layanan gratis membuat tanda tangan. Berbagai gaya dan variasi tanda tangan bisa kita ciptakan dengan cara yang sangat mudah. Cara ini merupakan yang paling gampang dan bisa dilakukan semua blogger tanpa kecuali. Keahlian menggunakan software pembuat gambar tak diperlukan lagi dan yang jelas waktu membuatnyapun amat singkat. Mau coba?

Membuat Teks Terbalik Menggunakan Kode CSS3

Silahkan baca dengan hati-hati agar tidak keliru:

• Dilarang membaca sambil njengking atau menungging!
• Dilarang mengumpat sebelum dan sesudah membaca.
• Selama membaca dilarang keras mengambil nafas panjang atau bahkan mengambil tempe dan pisang goreng.
• Peraturan ini berlaku untuk semua umur, baik umur tua nafsu muda ataupun umur uzur nafsu tak terukur.

Membuat teks terbalik tak harus dengan cara memanfaatkan jasa situs tertentu yang melayani pembuatan teks dalam bentuk terbalik. CSS3 bisa menjadi solusi mudah dan sebanyak apapun teks yang ingin dibuat dalam bentuk terbalik dapat diciptakan secara instant. Hanya perlu beberapa kode CSS dan semua bisa terjadi dengan cepat bagai permainan sulap si Deddy Corbuzier atau Romy Rafael.

Special Tab View Untuk Widget di Blogger Baru dan Blogger Lama

Ini adalah Tab View atau Tab Content yang memang didesain secara khusus untuk widget di blogger atau blogspot. Sampeyan dapat menyimpan semua jenis widget yang tersedia tanpa kecuali. Semua widget seperti labels, archive, profile, recent posts hingga widget follower dapat dimasukkan dalam tab hingga halaman blog sedikit lebih simple karena 3 widget langsung terwadahi dalam sebuah tab. Tentang penampilan tab kita tak perlu kuwatir karena tab untuk widget ini telah dipermak sedemikian rupa hingga tak akan terlihat mengecewakan ketika dipajang di blog. Desain tab telah dilengkapi dengan beberapa background image hingga membuat tampilannya terlihat cantik.

Karena ada perbedaan dalam penggunaan tab di blogger lama (template tata-letak) dan di blogger baru (new blogger templates), maka kita akan coba bahas 2 cara yang harus dipergunakan di ke-2 template tersebut.

Mengatasi Comments Box Yang Tak Mau Nongol: Cara Menampilkan Comments Box di Blogger

Sekalipun usaha untuk menampilkan box komentar (comments box) agar muncul di bawah posting (entri) telah dilakukan berulang kali tanpa satupun kesalahan dilakukan saat proses setting tetapi boks komentar yang diharapkan muncul tetap tak terlihat juga. Harapan untuk memberi kemudahan pada pengunjung agar lebih cepat dan gampang dalam memberikan komentar pupus sudah! Segenap angan untuk melakukan modifikasi di kolom komentar menjadi berantakan karena box yang mau di othak-athik justru menyembunyikan diri tak tentu rimbanya.

Mungkin sampeyan telah mencoba melakukan proses atau prosedur seperti di bawah ini tak hanya sekali demi nongolnya comments box:

Javascript Window dengan Animasi

Kata yang lebih familiar di telinga atau di pandangan mata ketika kita menelusuri tutorial demi tutorial adalah javascript pop-up window, dimana javascript ini berfungsi untuk membuka sebuah alamat (URL) dalam sebuah window baru yang berukuran dibawah ukuran normalnya (mini). Beberapa pop-up window dilengkapi dengan perubah ukuran (width dan height) serta sebuah scroller.

Window dengan animasi tidak jauh berbeda dengan pop-up window. Yang membedakan keduanya hanya pada bentuk animasi saat window terbuka dan ukurannya saja. Window dengan animasi akan langsung terbuka dalam ukuran normal/penuh (satu halaman). Jika sampeyan ingin memanfaatkan window dengan animasi ini, javascript bisa disimpan di bawah kode/tag pembuka <head>. Tak banyak script yang harus disimpan. Sampeyan bisa menyimpannya langsung atau dengan cara meng-upload-nya terlebih dahulu di file hosting.

Menampilkan Situs, Web atau Blog Berbeda di dalam Blog

Dengan memanfaatkan tag iframe yang di dalamnya disertakan sebuah alamat web, blog atau situs tertentu maka ketika blog yang kita miliki dibuka akan terlihat web, blog atau situs tersebut di halaman blog kita. Mungkin sampeyan punya beberapa blog dan ingin satu blog tertentu yang paling disayang selalu terlihat di halaman blog milik sampeyan yang lain? Atau mungkin ingin menampilkan situs tertentu seperti http://id.yahoo.com atau mungkin situs faforit sampeyan yang lain? Penasaran? Simpan saja xHTMLnya melalui Add a Gadget atau Tambah Gadget kemudian segera lihat hasilnya.

xHTML

Membagi Kolom Widget Secara Horizontal

Jika beberapa waktu yang lalu telah terpostingkan tentang cara membagi kolom widget dalam arah vertical dan horizontal serta di posting sebelum ini juga telah terpostingkan "Membagi Kolom Widget Secara Vertical", maka agar lebih lengkap hingga bisa dipergunakan sebagai pembanding dalam menggunakan kode, maka kali ini coba kita bahas salah satu cara membagi kolom widget dalam arah horizontal.

Karena telah terdukung oleh dua artikel yang telah terposting dan karena permainan kode yang digunakan sebenarnya juga tak jauh berbeda, maka untuk yang ini kita

Page Navigation for Blogger using CSS3 and Javascript

Mengapa membuat navigasi halaman Blog kita sebut paling praktis? Teramat sederhana sebenarnya yang menjadi alasan. Kode CSS dan javascriptnya telah terupload di file hosting sehingga sampeyan tinggal pasang linknya dan sedikit menambahkan script yang berfungsi untuk pengaturan jumlah posting yang akan ditampilkan setiap lembarnya! He ... he ... nggak ribet, khan?! Satu kelebihan lain dari navigasi halaman untuk blogger ini adalah pada penggunaan kode CSS3 yang berfungsi untuk menimbulkan beberapa efek pada background, warna teks/font, warna border dan transparansi (opacity effects). Menarikkah? Cantik nggak klo dipasang di blog sampeyan? Ho ... ho ... mana aku tahu! Coba saja, dah, biar jadi ngerti cocok nggaknya! Yang jelas model beginian blom satupun yang pernah buat. Nggak percaya? He ... he ... coba saja browsing sebentar. Yah ... klo ada aku kasih bonus, dah! Wisata gratis ke Mars naik kuda kepang atau sapunya si Sirik! Hua ... ha ... biar kesurupan dan pintar menangkap meteor yang lagi terbang di langit sono !!!!

Membagi Kolom Widget Secara Vertical

Sebuah widget tak harus hanya diisi dengan sebuah widget saja. Hanya dengan menggunakan xHTML maka kolom tersebut bisa dimanfaatkan untuk menempatkan beberapa buah widget, gambar dan/atau teks sekaligus. Bahkan, jika scroll box digunakan, maka setiap box dapat dibuat dengan ketinggian yang kecil sehingga kolom mampu memuat lebih banyak lagi scroll box yang didalamnya berisi widget serta teks dan/atau gambar. Sebagai contoh sampeyan bisa melihat gambar di bawah ini yang memperlihatkan cara pembagian kolom menjadi beberapa box/scroll box dengan ukuran yang bisa di atur.

Dalam gambar disebelah terlihat bahwa box pertama mempunyai ketinggian terendah dan dilengkapi scroller (scroll box-1). Box yang di tengah merupakan box yang tertinggi dan dilengkapi scroller juga (scroll box-2). Box yang terabawah sedikit berbeda dengan box pertama dan ke-2 karena box ini dibuat tanpa sebuah scroller. Jika kita ingin menggunakan box seperti ini kita hanya perlu membuang kode height: ..px; dan overflow:auto;. Untuk membuat bentuk scroll box ke-2 kode di atas harus digunakan karena 2 kode itulah yang menjadi kunci terbentuknya sebuah scroll box.

xHTML Box Tanpa Scroller

Optimalkan Search Engine (SEO) dengan Merubah Tag Title Blog

Trik ini sebenarnya sudah banyak digunakan blogger untuk mengoptimalkan daya tangkap mesin pencari terhadap judul posting yang kita buat. Yah ..., karena judul posting inilah sebenarnya yang menjadi sasaran pencarian netter dikala browsing. Upaya optimalisasi dilakukan dengan perubahan kode HTML (tag style) yang terdapat di template bagian atas. Perubahan tag style dimaksudkan agar judul posting lebih mudah ditangkap (terindeks) mesin pencari.

Bagaimana memahami kaitan perubahan tag title, search engine dan browsing para pengguna internet dengan SEO?

Kemudahan dan kecepatan sebuah "data yang berupa teks" untuk terindeks oleh mesin pencari sangat bergantung kepada

Pengaturan Jumlah Posting tak Berfungsi?

Sangat jarang dijumpai kasus "jumlah posting di halaman utama tidak dapat di atur melalui fitur yang disediakan blogger/blogspot", baik melalui pengaturan di :

Add a Gadget --> Posting Widget --> Edit --> jumlah Posting

ataupun melalui:

Settings/Pengaturan --> Formatting/Format --> Show at most/Tampilkan sebanyak mungkin --> jumlah Posting

Hal yang sepertinya mustahil seperti di atas, sebenarnya "bukanlah sesuatu yang mustahil terjadi". Yah ..., namanya juga buatan manusia. Pasti sekali waktu

Ciptakan Banyak Efek dg Menggabungkan Opacity Property dengan Beberapa Property Lain dengan CSS3

Setelah sebelumnya sampeyan mengikuti tutorial tentang bagaimana menciptakan efek transparansi atau opacity effect dengan memanfaatkan CSS opacity property serta membuat box sederhana dari paduan opacity property dan CSS3 transition yang didalamnya juga telah ditambahkan background effect, kali ini kita akan coba kupas lebih dalam tentang bagaimana cara memadukan opacity effect tersebut dengan beberapa CSS property yang lain hingga tercipta efek yang lebih fantastis dan menarik untuk dijadikan tempat bernaung widget atau desain yang lain. CSS3 masih akan menjadi "kekuatan utama" yang menjadi penentu keindahan efek yang kita ciptakan.

Agar supaya lebih mudah dipahami dan sekaligus dapat dimanfaatkan di blog, kita akan buat sebuah scroll box yang dilengkapi dengan berbagai efek seperti, height, background-color dan background-image, transparansi, color serta munculnya scroller hanya saat cursor digerakkan di atas box. Dengan beberapa efek seperti di atas, sebuah widget atau apapun yang nantinya kita letakkan dalam box maka sebelum cursor berada di atas box maka yang terlihat hanya sebuah box dengan ketinggian minimal (bisa diatur). Jika sampeyan ingin melihat sebagian kecil dari efek yang akan kita ciptakan, silahkan kunjungi link di bawah ini (DEMO) dan cobalah sentuhkan cursor pada kolom yang berisi data komentar. Kolom ini hanya berketinggian beberapa mm saja tetapi saat cursor disentuhkan maka seluruh bagian akan meninggi dan terlihat keseluruhan isi dalamnya.

D E M O

Scroll Box dg berbagai efek dan CSS3

Kode CSS

.boxwidget {
       width: 300px;
       height: 70px; 
       overflow: hidden;
       margin: 20px 4px 10px;   
       padding: 15px 8px;
       background: #0066FF url(http://i828.photobucket.com/albums/zz208/tantytm/TemplatesImg/bgCommentsTantyTM.png) right bottom  no-repeat;
       color: #996600; 
       border: 2px solid #555;
       border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
       opacity: 0.7;
       filter:alpha(opacity=70);
      -o-transition: all ease-in 1.2s;
      -moz-transition: all ease-in 1.2s;
      -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
       background: #660000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2L0XDckRYtZEiOmvGoDv6vdVj5jfFqU2w7q2ASWNYlooUqzsP0f8Jt1LLgD88dKbZM_BH1W5w3Dqi6m8JKT1ROfDkmCa-KFTZIoFo01I-z9_tO47j-hwAlPLxpC71Yjs2pBs7syr6FeY/s320/bgBukuBNewH93V89.png) left top no-repeat;
       height: 250px;
       overflow: auto;
       color: #bbb;
       opacity: 1.0;
       filter: alpha(opacity=100);
}
.boxwidget h3 {
       font-size: 14px;
       background:#000 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBlueFadeV57H4.jpg) top left repeat-x;
       font-weigt: bold;
       text-transform:uppercase;
       color: #FF9900;
       margin: 0 6px 15px 37px;
       padding: 3px 5px;
       border-radius:4px;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;
       text-shadow: 1px 1px 1px #000;  
}
.boxwidget:hover h3{
       background: red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/Transparent-1.jpg) center;
}

<div class="boxwidget">
<h3>Tuliskan Widget Title disini!</h3>
Letakkan widget atau teks disini!
</div>

Catatan/Keterangan:

• Width bisa dirubah nilainya atau bahkan dihilangkan hingga lebar langsung menyesuaikan diri dengan lebar kolom/ruang yang tersedia.
• Height bisa diatur untuk mengatur ketinggian box. Height pertama (pada .boxwidget) merupakan tinggi box saat awal sedang height yang kedua (pada .boxwidget:hover) merupakan ketinggian box setelah cursor menyentuh bagian box.
• Opacity untuk mengatur transparansi saat awal dan ketika cursor berada di atas box.
• background menggunakan 2 buah background image dengan posisi di bottom right dan left top. Pengaturan posisi ini untuk menciptakan efek gerakan/pergeseran background-image.
• color pada hover dibuat berbeda agar ada penambahan efek. Usahakan color pada teks disesuaikan dengan warna background yang digunakan.
• h3 difungsikan untuk title/judul widget atau apapun yang terpasang di scroll box.
• Agar teks tidak seluruhnya ditampilkan dan menabrak box maka digunakan overflow:hidden;, sedang overflow: auto; berfungsi menciptakan membentuk scroll box.
• Pengaturan durasi waktu efek dilakukan dengan merubah nilai yang terdapat pada css transition (nilai 1.2s). Semakin besar maka durasi waktu efek semakin lambat.
• Berbagai perubahan kode dan komponen pendukungnya dapat dilakukan berbagai perubahan hingga dihasilkan berbagai variasi efek yang berbeda.

• Simpan kode CSS di atas kode ]]></b:skin>
• Simpan xHTML melalui Add a Gadget/Tambah Gadget atau di antara tag pembuka <body> dan tag penutup <body>.
• Untuk menggunakan kode CSS tersebut di blog, sampeyan bisa baca Special Tutorials yang terletak di menu sebelah kiri. Di situ tersedia beberapa tutorial dasar yang berkaitan dengan posting ini.
• Baca juga posting sebelumnya (KLIK di sini!) untuk lebih memperlancar pemahaman soal opacity property dan cara menggunakannya!

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

• 
• 

» Happy Blogging - gubhugreyot «

Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition

Jika sampeyan mencermati beberapa box widget di blog ini, maka akan terlihat beberapa box widget akan terlihat terang hanya ketika cursor berada di atasnya. Opacity effect menjadi kunci terjadinya perubahan box gelap ke terang.

Opacity effect sebenarnya sebuah CSS property yang berfungsi untuk menciptakan efek transparansi atau sering disebut juga efek blur. Semua browser sudah support terhadapnya, hanya untuk Internet Explorer harus digunakan kode yang berbeda dari yang lain. Memanfaatkan opacity property dalam sebuah desain sangat mudah dilakukan, hanya agar supaya ketika cursor diarahkan di atasnya keadaan berubah menjadi terang/gelap maka harus ditambahkan sebuah hover effect. Secara sederhana penulisan opacity effect dalam sbuah kode CSS adalah sebagai berikut:

Penulisan opacity property di kode CSS

Membuat Anti Block dan Copy dengan Kode CSS User-Select Property

Judul di atas mungkin akan membuat pembaca bingung. Anti copy yang sudah sering kita dengar dan ketahui adalah sebuah cara untuk membuat desain blog tidak mudah diexplorasi pengunjung untuk dicopy kemudian dipasang/diterapkan diblognya, sehingga desain blog yang kita buat dengan mudah ditiru atau dipergunakan orang lain. Anti jiplak seperti diatas umumnya dibuat menggunakan javascript.

Penggunaan user-select property berbeda dengan pengertian di atas. Meskipun tujuan dan fungsinya hampir sama, namun user-selecty property hanya berfungsi pada teks di halaman posting atau atau bagian lain dari halaman blog. Ketika user-select property kita gunakan, maka teks tidak bisa dicopy oleh pengunjung karena cursor tidak akan dapat difungsikan untuk memblock bagian tertentu yang sudah diprotect.

Jika sampeyan penasaran apa maksudnya, silahkan coba teks yang saat ini sedang dibaca. Cobalah block dengan cursor! Bisa nggak? Pasti nggak bisa, khan?! Yah ... seperti inilah maksudnya. Fungsi seperti ini bisa sampeyan pergunakan dalam berbagai tag seperti p, b, i, em, strong, serta tag yang lain.

Recent Posts Cantik dari Feddburner dengan CSS3

Sekalipun banyak widget recent posts telah disediakan secara gratis oleh beberapa situs termasuk blogger, namun mungkin sampeyan akan tertarik untuk coba memasang dan menggunakan widget recent posts yang diberikan secara cuma-cuma oleh feedburner yang tak lain dan tak bukan merupakan saudara laki-laki dan masih satu darah dengan blogger/blogspot. Atau mungkin sampeyan masih ragu-ragu dan mengatakan, "apa sih untungnya pakai widget recent posts milik feedburner?", dan masih sembari memicingkan mata menelusuri kata demi kata mungkin terselip sebuah pernyataan, "toh blogger sendiri sudah menyediakan widget ini? Huh ..., ngapain musti repot-repot cari yang lain!".

Hmmm... jika mungkin sampeyan ragu atau malas, akan lebih afdol sekiranya untuk mencoba melihat terlebih duhulu seperti apa sih sebenarnya tongkrongan widget recent posts pemberian feedburner yang telah dimodifikasi dengan menambahkan kode CSS3 ini. He ... he ... perlu sampeyan ketahui juga satu hal yang spesial dari widget ini. Ho ... ho ... Dia mempunyai kecepatan sangat baik dalam inventarisasi data posting kita, lhoh. Hi ... so pasti loadingnya jadi wus ... wus ....wus... atau dalam istilah lain: dia punya kecepatan sangat bagus saat inventarisasi data posting hingga blog juga tetap lancar loadingnya. Heh ... heh .... Gimana? Jadi sedikit penasaran? Makanya ... nih lihat dulu demonya ... trus ... segera buat dan pasang widgetnya!

Comment Box Center of Position: Cara Mengatur atau Merubah Posisi dan Membuat Center Comment Box

Sepertinya tidak ada satupun desain blog yang dalam desainnya menempatkan Comment Box pada posisi center (di tengah dan center dengan halaman posting). Hampir semua template selalu menempatkan Comment Box di ujung sebelah kiri (rata kiri) hingga kadang terasakan membuat wajah blog sedikit terlihat tidak simetris karena ruang kosong disebelah kanan menjadi lebih lebar dibandingkan dengan yang di sisi sebelah kiri. Merubah atau menggeser posisi Comment Box sekaligus teks yang bertuliskan Post a Comment/Poskan Komentar (di atasnya) bisa menjadi salah satu cara untuk membuat tampilan kolom komentar terlihat lebih rapi, cantik dan simetris (center) dengan Posting Blog. Cara yang sederhana, gampang dan praktis serta dapat dibuat dalam tempo sesingkat-singkatnya menjadi sebuah solusi yang dengan mudah bisa dipahami sekaligus dilakukan oleh semua blogger. Kode CSS! Itulah jawabannya. Dengan menambahkan 2 baris kode CSS yang ditempatkan di atas ]]></b:skin>, maka sebuah wajah berbeda yang terlihat lebih rapi akan membuat blog sampeyan semakin manis saja.

Cara Cara Mengatur Posisi Comment Box dan Teks Poskan Komentar

Menampilkan Avatar (Thumbnail) di Depan Post Author

Jika sebelumnya telah terpostingkan Cara Menampilkan Photo Blogger melalui Post Author yang terletak di bawah judul posting, dalam posting :
Memanfaatkan Post Author untuk Menampilkan Photo Blogger/Image dengan Animasi Menggunakan CSS3
maka kali ini kita akan mencoba menampilkan avatar atau thumbnail yang berupa photo blogger dalam ukuran yang amat kecil sebagai penghias post author yang terletak di bawah posting atau di atas kolom komentar. Photo dalam sekitar 15px x 20px (width x height) akan kita letakkan tepat di depan post author dalam bentuk seperti gambar di bawah (perhatikan tanda panah!):

Untuk membuat tampilan avatar lebih menarik, kembali kita akan manfaatkan kode CSS3 yang berupa CSS3 transition dan CSS3 transformation untuk membentuk sebuah animasi serta merubah ukuran avatar ketika mouse/cursor berada/disentuhkan pada avatar tersebut. Dengan kode CSS3 ini, maka apabila pengunjung membuka blog dengan browser yang support terhadap CSS3 (Mozzila 4 Beta, Opera 10.63, Safari dan Google Chrome) sebuah penampilan yang semakin berbeda dan lebih atraktif akan terlihat.

Jika sampeyan masih penasaran untuk melihat wujud nyata dari desain menarik ini (tidak hanya berupa gambar tetapi yang telah diaplikasikan dalam blog), silahkan klik link berikut

Cara Menyimpan File Gambar, Javascript, Kode CSS di Google Sites

Setelah banned tinypic menimpa GR dan banyak sobat blogger yang lain, beberapa pilihan lain menyimpan file patut menjadi prioritas selama blogging dilakukan. Sekalipun masih banyak file hosting gratis yang memberi layanan dengan baik, namun Google Sites mungkin menjadi sebuah pilihan yang paling aman dan tepat untuk kita menyimpan file javascript, image (gambar) kode CSS ataupun file yang lain. Layanan seperti Google Sites hampir bisa diyakini nggak bakalan "bangkrut" ataupun bikin banyak "tingkah" yang buntutnya menyengsarakan pengguna seperti file hosting gratis yang lain. Beberapa hari ini selain mengalihkan beberapa file gambar di Photobucket.com, GR juga mencoba membackup beberapa file gambar dan javascript serta CSS di Google Sites. File-file ini selain dimanfaatkan secara langsung untuk memenuhi kebutuhan design blog, juga dimanfaatkan sebagai upaya berjaga-jaga (backup) kemungkinan terjadinya banned oleh file hosting gratis yang tetap kita manfaatkan.

Proses registrasi hingga proses penyimpanan file di Google Sites sangatlah sederhana dan berlangsung dalam waktu yang teramat singkat. Hanya beberapa data terkait email dan password saja yang diperlukan saat sebuah blog telah kita miliki. Jika mungkin sampeyan tertarik unruk menyimpan file-file desain blog ataupun file posting, silahkan ikuti panduan berikut.

Cara Menghilangkan Footer di Blogger Baru

Bicara tentang blog tak ubahnya bicara tentang selera. Ya ... blog tak jauh dari sosok pasangan hidup atau kekasih. Masing-masing pasti punya beragam selera. Ada yang lebih suka punya kekasih atau isteri berbadan tinggi langsing body seperti guitar yang sekali disentuh bisa memacu sirkulasi darah, ada yang lebih suka kekasih (lelaki) berbadan kerempeng dengan pertimbangan sekali terjadi adu otot tinggal membanting, tetapi ada juga yang lebih suka kekasih/isteri berbadan subur/gemuk. Bisa "mentul-mentul dan selalu memberi kehangatan", katanya! He ... he ... jadi semakin jelas bahwa tak bisa satu dan yang lain sama dalam selera! Bagaimana sampeyan sendiri? Suka yang hitam, pendek, gemuk atau yang putih, tinggi, langsing dan berambut panjang?

Tentang Blog?

Font Spesial untuk Blogger Menggunakan Google Font API

Mungkin sampeyan tertarik untuk menggunakan jenis-jenis font yang selama ini belum tersedia dan biasa digunakan di blogger/blogspot? Ditanggung font ini akan terlihat secara sempurna saat dibuka oleh siapapun juga sekalipun kompu/PC mereka tidak dilengkapi "diinstal" dengan font dimaksud. Mengapa bisa demikian dan bagaimana cara melakukannya?

He ... he ... inilah salah satu kelebihan yang blogger miliki. Dengan memanfaatkan Google Font API yang disediakan dalam bentuk kode CSS, maka beberapa font bergaya berbeda dengan gampang bisa kita manfaatkan untuk membuat penampilan blog yang berbeda. Cukup dengan meletakkan link kode CSS di bawah tag pembuka <head> serta sedikit menambah atau merubah kode CSS yang terdapat di template maka dalam kerjapan mata berbagai pilihan baru jenis font dapat dinikmati.

Cara menampilkan jenis font baru menggunakan Google Font API

Lakukan ini sebelum "banned" yang dilakukan file hosting terjadi

Sangat benar apa yang dikatakan pepatah "pengalaman adalah guru terbaik" karena banyak diantara kita biasanya lebih banyak yang baru bisa mengerti artinya sakit dan menyesal setelah semua terjadi dan ternyata membuat diri kalang kabut bagai kehilangan pacar atau isteri/suami, serta pepatah "sedia payung sebelum hujan" yang juga biasa kita rasakan setelah semua terlanjur terjadi tanpa sebelumnya melakukan tindakan preventif untuk berjaga-jaga.

Kedua pepatah tersebut sangat terasakan artinya ketika "banned" tinypic.com terjadi pada account saya yang akibatnya sungguh amat menyesakkan dada. Banned tinypic membuat "login tak mungkin dilakukan lagi serkaligus hilangnya seluruh file gambar yg sebelumnya telah tersimpan rapi di image hosting ini". Yang akan sampeyan jumpai pertama kali ketika "banned" terjadi adalah rusaknya desain blog karena file gambar hilang dan menjadi tak muncul di blog. Semua bagian blog yang melibatkan gambar yang tersimpan di tinypic.com hanya akan terlihat sebagai gambar kosong dengan tulisan besar tinypic. Ini akan terjadi termasuk di posting sampeyan yang menggunakan file gambar dari tinypic. Semua lenyap ... musnah .... dan hanya menyisakan file gambar dengan bentuk seperti di bawah ini:

Cara Mengetahui Harga Jual Blog

Sebuah parameter yang bisa digunakan sebagai tolok ukur tentang seberapa jauh prestasi kerja (kinerja) yang telah dicapai seorang blogger benar-benar sangat dibutuhkan. Beberapa data yang diperoleh dapat dimanfaatkan sebagai bahan eveluasi tentang materi yang telah terpostingkan, baik dari sisi kwalitas dan kwantitas posting ataupun materi posting berkaitan dengan segmen yang berusaha disentuh.

Untuk mengetahui data yang berkaitan dengan hasil kinerja blogger tersebut, kita bisa memanfaatkan jasa beberapa situs terpercaya yang melayani secara gratis semua hal yang berkaitan dengan data perkembangan blog yang bisa dimonitor hari demi hari atau bahkan detik demi detik. Penelaahan data yang bisa termonitor setiap saat diharapkan juga bisa dimanfaatkan sebagai bahan koreksi diri terhadap beberapa kekurangan dan kesalahan yang mungkin kita terjadi selama aktrivitas blogging dilakukan.

Mengatur atau Membuat Tinggi dan Lebar Marquee Effect

Sekalipun tidak banyak kode yang diperlukan untuk membuat sebuah marquee effect, namun sampeyan bisa menambahkan beberapa kode baru hingga tampilan marquee effect bisa lebih afdol (menarik). Selain effect onmouseover dan onmouseout, sampeyan bisa melengkapinya dengan padding, border, border-radius, background serta beberapa kode lain yang disesuaikan dengan hasil yang diinginkan. Bagaimana mengatur tinggi dan lebar marquee effectt? Untuk menambahkan tinggi dan lebar, sampeyan bisa memanfaatkan height dan width, atau dengan kode lain serti padding. Penggunaan padding akan lebih memudahkan saat kita ingin membuat teks pada marquee effect tepat ditengah-tengah (center pada posisi vertical). Dibawah ini adalah contoh marquee effect yang menggunakan padding guna memudahkan penataan obyek dalam tag marquee.

Terima kasih atas kunjungan anda !!!!

Marquee effect bisa juga dimanfaatkan untuk menampilkan text dan gambar secara

Membuat Judul Posting Center of Position (Judul Posting di Tengah)

Beberapa perubahan dalam bentuk sederhana mungkin diperlukan dengan tujuan menciptakan keseimbangan penataan, membuat tampilan berbeda yang menjadikan blog terlihat lebih rapi atau menarik, atau mungkin dimaksudkan untuk beberapa tujuan berbeda. Satu perubahan kecil yang dapat kita lakukan adalah pada Judul Posting atau Posts Title.

3 Kemungkinan Perubahan Posts Title:

Manfaat Penulisan Title Pada Widget

Jika pada beberapa saat yang lalu blogger mengharuskan setiap penggunanya menuliskan title pada widget terpasang, maka kini kewajiban itu tiada lagi. Mewajibkan penulisan title pada widget adalah sebuah kebijakan yang dibeberapa aspek bisa dikatakan menguntungkan (bermanfaat), tetapi dibeberapa kasus yang lain (misalnya widget javascript cursor image) justru menjadi sebuah "perlakuan jauh dari tepat dan bahkan lucu serta membingungkan blogger". Yah ..., beruntunglah tindakan ceroboh tersebut segera "ditinjau ulang dan bahkan kemudian dihapuskan".

Beberapa macam (jenis) widget

Cara Merubah dan Mengatur Jarak antar Komentar

Setelah orang terlibat dalam keasyikan sebagai seorang blogger, perkembangan demi perkembangan baru pasti akan selalu diikuti sejalan dengan kebutuhan pengembangan ruang yang tersedia. Ketidakpuasan atau keinginan untuk merubah tampilan blog menjadi satu hal yang tak dapat ditolak. Contoh sederhana yang beberapa waktu lalu tersampaikan melalui kolom komentar adalah "terlalu sempitnya jarak antar komentar (dalam istilah jawa: dempet!)" yang mengakibatkan bentuk deret komentar seakan tiada terlihat berbatas atau komentar satu dan yang lain lain terlihat seperti tanpa spasi yang "wajar/seharusnya".

Mengatasi persolan seperti ini dapat kita lakukan dengan melakukan penambahan kode CSS di atas kode ]]></b:skin>. Dengan penambahan kode yang tepat maka sampeyan bisa merubah atau bahkan mengatur jarak antar setiap komentar sesuai selera. Kode tunggal "padding" akan kita manfaatkan sebagai pengatur jarak, dimana semakin besar nilai padding maka jarak antar komentar semakin besar.

Untuk melihat bagaimana bentuk komentar yang telah di atur jaraknya (antar komentar), sampeyan bisa buka link di bawah ini (DEMO). Perhatikan pada Test komentar-1 dan Test Komentar-2. Di sini sampeyan akan melihat betapa jarak antar komentar terlihat sangat lebar. Padding yang digunakan di kolom komentar blog ini sebesar 30px.

D E M O

Cara Praktis Membuat Floating Image Link

Floating Image Link sebenarnya adalah sebuah gambar yang ditempatkan di salah satu bagian blog yang akan selalu terlihat setiap saat. Floating image ini kita gabungkan dengan sebuah link sehingga ketika pengunjung meng-klik gambar/image yang terlihat maka akan terbuka sebuah halaman yang baru. Beberapa blogger memanfaatkan untuk menempatkan gambar animasi, gambar statis dan gambar animasi flash. Jika yang digunakan animasi flash, tag yang dipergunakan dalam bentuk DIV, akan tetapi jika sampeyan menggunakan gambar yang berekstensi jpg, jpeg, gif, dan png, sebuah tag img sudah bisa digunakan.

Untuk menggabungkan floating image dengan link, kita letakkan tag image di antara tag pembuka <a> dan tag penutup </a>, dalam bentuk seperti di bawah ini:

<a href="URL"><img src="image.jpg" style="position:fixed;height:..px;height:..px; ... dst;"></a>

Bagaimana bentuk sebenarnya dari floating image yang dimaksud di atas dan diposisi sebelah mana floating image ditempatkan, apa saja gambar yang bisa ditampilkan sebagai floating image? Untuk lebih jelasnya, silahkan sampeyan buka link DEMO berikut ini (lihat di ujung kanan bawah):

Membuat - Menambah Link Title di Judul Posting

Link title di judul posting memang tak pernah ada. Dia hanya bisa ada dengan cara melakukan sedikit modifikasi kode HTML yang berada di antara tag pembuka <body> dan tag penutup </body> setelah kita klik Expand Widget Template. Penambahan link title pada judul post akan terlihat dalam bentuk munculnya "tips" ketika cursor menyentuh (berada di atas) judul blog. Jika pada beberapa link yang biasa kita buat di posting atau widget sebuah link title dengan mudah kita sertakan melalui penambahan title="Bla.... bla ..... bla....." dan mungkin di tambahkan kode lain seperti misalnya target="_blank", maka ketika kita menambahkan link title di judul posting, kita harus mencari terlebih dahulu kode (link) yang di dalamnya berisikan judul posting. Link title yang kita buat ini nantinya secara otomatis akan bekerja di semua posting (judul) yang berhasil/sudah diterbitkan.

Bentuk dasar sebuah link yang menyertakan link title:

<a href="URL" title="Silahkan klik di sini .... dst">Teks Link</a>

Jika mungkin sampeyan tertarik untuk membuat link title seperti dimaksud di atas, mungkin sampeyan perlu melihat blog/judul posting yang sudah dimodifikasi hingga mampu memunculkan tips berkat sudah ditambahkannya link title. Setelah klik DEMO, arahkan cursor pada judul posting!

D E M O

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

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!

Trik Menipu Pengunjung dengan Merubah Jumlah Komentar

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?

Adding Tooltip on Read More: Menambah Tooltip di Read More

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

Pasang Auto Scroll di Widget SMS Gratis dengan CSS3

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

Membuat Javascript-jQuery ZigZagLap Tooltip

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

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

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

Scroll Bar with Effects in Box Comments using CSS3 Transition

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 «

Cara Membuat: Create Show Hide Bottom Toolbar using CSS3:

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

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

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

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

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

Pasang Energy Saving/Power Save Mode di Blog

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

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

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

Membuat Elemen Footer untuk Tambah Gadget

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?

Tambah/Tampilkan Nama Author di Bawah Judul Posting

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

Strike Baru dengan CSS3 Transition

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 «

Cara Buat Blockquote CSS3: How to Create Blockquote using CSS3

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

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

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

4 Pilihan Perubahan di Widget Profile

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