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: