Tips Membuat dan Menuliskan Kode Box Shadow di IE Internet Explorer, Opera, Safari dan Mozzila

Membuat shadow effects menggunakan css3 yang kompatible di semua browser menjadi teramat penting agar apa yang kita desain atau buat bekerja dengan sempurna di semua browser yang ada. Kompatibilitas ini setidaknya akan memberi kelegaan hati serta mengurangi kekecewaan yang mungkin timbul karena apa yang telah kita kerjakan dengan susah payah ternyata tak dapat dinikmati dengan baik di salah satu browser penting yang sering digunakan penikmat internet atau pengunjung blog. Meskipun di Internet Explorer atau IE hasil yang kita peroleh masih terkendala pada css3 rounded corners, namun untuk efek box shadow beruntung karena masih dapat kita fungsikan. Tentu saja kode yang digunakan juga teramat berbeda dengan browser-browser lain yang kodenya dalam bentuk yang mirip satu dengan yang lain. Entah apa sebenarnya yang dimaui oleh IE. Sepertinya persoalan juga terlalu lama dibiarkan sehingga membuat "pening kepala" kita-kita yang mencoba membuat semua desain bisa berfungsi sempurna di semua browser. Yah ... semoga saja segera ada kesepakatan bersama atau setidak-tidaknya usaha untuk saling menyesuaikan diri di browser-browser besar yang sementara ini jadi andalan dan punya pengguna banyak. Bukan mustahil jika masing-masing tidak secepatnya menyesuaikan diri dengan "browser yang menciptakan kemajuan baru terlebih dahulu", maka para penggunanya akan berlarian mencari browser yang paling nyaman, cepat, selalu bisa menampilkan efek dari kode-kode css terbaru.

Bentuk dan Penulisan kode box-shadow

Cara Memuat CSS3 Image Slider

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

Cara Buat CSS-3 Accordion Menu Serbaguna

Meskipun hingga detik ini beberapa kode css3 belum mampu tersuport oleh Internet Explorer, tapi tampaknya perkembangan pesat yang kian hari terasakan tak mungkin akan di abaikan begitu saja. Banyaknya kemungkinan penciptaan fungsi baru dengan hanya menggunakan kode css ini membuat pengguna internet mempunyai banyak pilihan selain javascript. Tentu saja dengan hanya menggunakan kode css akan membuat beban yang ditanggung blog menjadi banyak terkurangi, dus ... akhirnya banyak kemungkinan penggunaan css-3 menjadi sebuah pilihan terfavorit. Mengenai Internet Explorer (IE) dan kompatibilitasnya, besar kemungkinan browser keras kepala ini akhirnya mau tak mau akan merobmak segala kebijakan yang selama ini membuatnya banyak ditinggalkan pengguna. Sykur-syukur kebijakan baru yang lebih akomodatif terhadap kepentingan pengguna ini akan secepatnya direalisasikan. Ya ... bukankan hal yang terjadi seperti selama ini akhirnya membuat mereka sendiri yang paling dirugikan?!

CSS-3 Accordion Menu selain irit kode dan yang jelas tanpa sedikitpun javascript, namun jangan sekali-kali menyepelekan fungsi, kinerja dan tampilannya. Desain yang minim penggunaan background image ini selain cantik dan menarik juga andal untuk digunakan sebagai wadah menu blog dan segala tetek bengek yang mungkin butuh tempat sebagai wadah tanpa perlu banyak makan tempat. Sampeyan dapat menggunakan setiap bagian dari accordion ini sebagai tempat meletakkan dan menyimpan seluruh daftar posting blog atau menggabungkannya dengan image, teks atau yang lain. Cukup gunakan kode yang sesuai di tiap box yang tersedia dan semua dengan indahnya akan tertampilkan.

Meskipun pada kode yang disertakan membuat css-3 accordion menu serbaguna ini hanya mempunyai lebar 200px, namun dengan amat mudah pula sampeyan merubahnya menjadi sesuai kenutuhan hanya dengan mengganti 2 kode saja yang berkaitan dengan width. Simple dan amat mudah dilakukan siapapun. O .., ya tentu saja semua yang tersajikan ini sudah melalui uji tampil di blogspot dan pastinya kompatible untuk semua browser (fungsi accordion-nya). Jangan kecewa apabila di awal posting ini kita katakan masih terkendala dengan IE karena sekalipun beberapa tidak mampu disuguhkan dengan baik dan sempurna di IE, namun setelah sampeyan melihatnya pasti tak akan kecewa. Ya ... karena si accordion ini masih mampu memperlihatkan kecantikannya di IE.

Kode CSS "CSS-3 Accordion Menu Serbaguna

Kode CSS-1

Cara Membuat Animated jQuery Accordion Menu Serba Guna

Yang praktis, cantik, irit javascript dan dapat dipadukan dengan berbagai fungsi yang lain merupakan sebuah fasilitas dan kelengkapan blog paling nyaman digunakan. Kembali kita akan memanfaatkan jQuery-1.3.2.js atau jQuery-1.3.2.min.js untuk membuat sebuah "Animated Accordion Serbaguna" yang tidak saja dapat digunakan untuk memuat seluruh daftar posting, melainkan dapat juga sampeyan gunakan untuk berbagai kepentingan di luar masalah menu. Gambar ataupun berbagai bentuk teks lainnya bisa mejadi obyek untuk accordion cantik ini.

Kembali javascript kurang dari 10 baris akan membantu membangkitkan jQuery meciptakan sebuah fungsi indah dengan dibantu kode css yang menjadi pilar hingga terbentuk desain menarik. Permainan pada background image, background position serta padding, margin border serta text-shadow dan rounded corners di bagian dalam accordion mampu menghasilkan tampilan eksotik yang layak untuk dipertimbangkan sebagai satu fungsi penambah gaya dan maksimalisasi ruang. Ada dua buah desain yang bisa menjadi pilihan bagi sampeyan. Ke duanya sama-sama menarik, dan mungkin saja membuat kita kesulitan untuk menentukan pilihan. Bagaimana bentuk "Animated Accordion Serba guna ini? Silahkan arahkan cursor pada gambar di bawah ini dan sampeyan akan melihat seperti apa kira-kira bentuk tampilannya.

Earthquake Effects on No Right Click: Javascript No Right Click-3

Mungkin ini jadi pilihan yang cukup tepat untuk sampeyan. Sebuah javascript No Right Click yang disertai semacam efek gempa bumi dan ditanggung akan membuat bingung dan mengacaukan konsentrasi pengunjung blog. Beberapa sobat blogger telah memanfaatkan, akan tetapi yang satu ini telah aku modifikasi sehingga efek yang muncul menjadi semakin parah. Javascript "Earthquake Effects on No Right Click" sudah ter-upload di file hosting sehingga sampeyan hanya perlu menyimpan link-nya di antara tag <head> dan tag </head> . Untuk menggunakannya ikuti langkah berikut.

Cara Buat dan Pasang Javasript No Right Click-2

Yang ini adalah cara ke-2 untuk membuat right click pada mouse tidak berfungsi dengan tanpa komentar (allert) sama sekali. Dia akan diam seribu bahasa dan membuat pengunjung blog jadi sedikit bingung dan pasti penasaran. Javascript yang kita gunakan juga teramat sederhana dan tinggal simpan saja di bagian head antara tag <head> dan tag </head>.

D E M O

Langkah untuk memasang dan menggunakan javascript No Right Click-2

Pasang No Right Click Script di Blog : Javascript No Right Click-1

Disable right atau disebut juga no right click dan dalam bahasa Indonesia bisa dikatakan sebagai anti klik kanan berfungsi untuk membuat fungsi klik kanan pada mouse tidak bisa dilakukan. Penggunaan script sederhana ini umumnya dimanfaatkan agar pengunjung tidak mencoba untuk membongkar atau melihat desain blog yang berupa kode html dan javascript. Karena klik kanan pada mouse kehilangan fungsi maka secara otomatis semua aktifitas pengunjung hanya dapat dilakukan melalui fungsi klik kiri.

Cara menggunakan javascript no right click di blog

1. Login to Blogger (Login ke Blogger).
2. Dasboard (Dasbor) : KLIK "Design (Rancangan)".
3. Design (Rancangan) : KLIK "Edit HTML".
4. Edit HTML : Cari kode ]]></b:skin>.
5. Letakkan javascript di bawah ini tepat di bawahnya.

Animated CSS Vertical Menu

Sebuah permainan background membuat menu vertical ini bagai sebuah menu beranimasi. Hanya segelintir kode css tanpa sedikitpun javascript tidak mengurangi gaya dan penampilannya. Kelebihan penggunaan kode css secara murni akan membuat beban blog tidak menjadi begitu bertambah, apalagi background image yang kita gunakan juga sudah didesain dengan bentuk dan ukuran teramat kecil. Bisa dikatakan bahwa vertical css menu ini hanya mengandalkan kelengkapan penggunaan kode saja. Bagaimana wujud menu cantik ini? Silahkan sampeyan coba saja dan silahkan gunakan jika cukup menarik untuk digabungkan sebagai pelengkap blog. Bentuk CSS Vertical menu seperti gambar di bawah ini :

Arahkan cursor di atas gambar untuk melihat tampilan Vertical Menu dalam ukuran besar!

Kode CSS "Animated CSS Vertical Menu"

Cara Membuat Animated Vertical Menu Dengan jQuery

Sampeyan pasti tak akan menyangka javascript yang tak seberapa banyak ini mampu menghasilkan sebuah menu vertikal dengan bentuk animasi dan dilengkapi fade effects. Script kurang dari 10 deret ini mampu membuat setiap link title pada menu bergoyang ke kanan dan ke kiri saat mouse menyentuh setiap link. Apabila blog sudah menggunakan jquery-1.3.2.js atau jquery-1.3.2.min.js, tinggal tambahkan javascript di bawahnya maka sebuah menu cantik yang sangat indah akan hadir dihalaman blog sampeyan. Boleh percaya atau tidak, tetapi silahkan lihat dulu scripnya yang hanya beberapa baris ini.

D E M O

Silahkan buka demonya agar lebih jelas bagaimana animasi yang tercipta pada vertical menu yang dibuat dengan menggabungkan kehebatan jQuery dan CSS3 ini.

DEMO: jQuery animated vertical menu

Javascript Animated Vertical Menu

Javascript :

<script type="text/javascript">  
//<![CDATA[
/* gubhug reyot - Vertical Animated Menu */ 
$(document).ready(function() {  
$(".bgsGRVMnu li").hover(function(){  
$(this).find('span').animate({ opacity: 0 }, 800);        
$(this).find('a').animate({paddingLeft:"50px"}, 800); },
function(){  
$(this).find('span').animate({ opacity: 1 }, 800);  
$(this).find('a').animate({paddingLeft: "28px"}, 800);  
});
});  
//]]>
</script>

Script di atas inilah yang akan menghadirkan menu vertical indah dengan animasi menarik. Untuk memberikan hasil maksimal pada bentuk tampilan menu, kita juga manfaatkan rounded corners effects, opacity effects dan text shadow sehingga nilai lebih menu animasi ini semakin terasakan.

Screenshoot Animated Vertical Menu Menggunakan jQuery-1.3.2.min.js

Cara Membuat JQuery-Prettify Sintax Highlighter

Syntax Highlighter atau Syntax Highlighting merupakan sebuah fungsi yang terbangun dari javascript dan kode css yang mampu menciptakan pewarnaan pada posting kode html. Pemanfaatan syntax highlighting akan membuat sebuah posting dalam bentuk kode html menjadi lebih mudah dipahami/dicermati karena beberapa kode tertentu mempunyai warna yang saling berbeda. Sebagai contoh hasil pemanfaatan syntax highlighter sampeyan bisa melihatnya dari beberapa kode HTML baik yang berupa kode css, javascript ataupun xHTML yang terposting di blog ini. Meskipun sebenarnya ada cukup banyak syntax highlighter atau syntax highlighting yang dikenal dan bisa dimanfaatkan untuk melengkapi blog, namun untuk kali ini kita akan utamakan Prettify Syntax Highlighting dengan pertimbangan penggunaan javascript yang terbilang relatif paling ringan dengan beban tak lebih dari 13kbyte. Untuk membuat javascript dan kode CSS bisa bekerja menciptakan kode html dalam tampilan berbagai warna, kita hanya memerlukan tambahan jquery-1.3.2.js atau jQuery-1.3.2.min.js.

Cara Membuat Prettify Syntax Highlighter

The simplest post code for tooltip and image preview

Tooltip yang mampu menampilkan gambar dengan kode posting paling sederhana ini masih menggunakan jQuery-1.3.2.min.js. Javascript pembentuk tooltip dibangun dengan memanfaatkan fade effect, blink effects, text-shadow serta box shadow. Penggunaan kode yang sederhana diharapkan mampu mengurangi kepadatan kode di ruang posting atau widget. Selain itu kode yang teramat praktis ini membuat semua blogger akan dengan amat mudah menggunakannya.

Untuk membuat tooltip agar mempunyai tampilan menarik dan terlihat atraktif, kita juga memanfaatkan kode css sebagai pembentuk box tooltip. Tooltip didesain mampu menampilkan gambar dalam tiga variasi ukuran. Yang pertama dengan ukuran lebar (width) 200px, yang kedua 400px dan yang terbesar dengan ukuran gambar 600px. Penggunaan ukuran maksimal 270px dilakukan dengan pertimbangan bahwa sebuah gambar dalam tooltip dengan lebar 600px adalah sebuah ukuran yang sudah teramat besar. Karena ketinggian gambar dibuat dalam bentuk otomatis, maka apabila gambar mempunyai perbandingan 2:3 untuk width dan height, maka gambar akan terlihat dalam ukuran 600px x 900px. Sampeyan bisa melihatnya dalam DEMO berikut ini :

Link Dalam Bentuk Teks

Link Dalam Bentuk Teks

Arahkan cursor di atas gambar dan tunggu!

Cara Merubah Tampilan Zippy Expand Colapse di Widget Archieve

Ini hanya sekedar triks sederhana untuk merubah tampilan zippy expand colapse pada widget arsip yang berupa tanda berbentuk segitiga dengan ujung segitiga yang bisa berubah arah ke kanan atau bawah ketika di "KLIK" dilakukan. Toggle zippy berfungsi untuk expand dan colapse hingga data arsip bisa dibuka atau ditutup. Salah satu bentuk modifikasi dan pengembangan zippy bisa sampeyan lihat di bagian kanan di widget archieve. Dengan menambahkan border serta beberapa efek yang lain, bentuk zippy expand colapse ini bisa kita rubah dalam bentuk berbagai macam variasai.

Beberapa kode CSS beserta efek yang mungkin di tambahkan antara lain background color atau background image, blink efects, rounded corners, text shadow, box shadow, color serta border dan opacity effect. Untuk merubah tampilan zippy expand colapse ini kita hanya perlu menambahkan kode CSS di atas kode ]]></b:skin> . Cukup sederhana dan mudah sehingga siapapun dapat melakukannya.

Cara Membuat CSS Drop Down Menu

Untuk membuat CSS Drop Down Menu, silahkan sampeyan baca dulu posting tentang "Cara Membuat Horizontal Tabs Menu, karena cara pembuatannya sama persis. KLIK link di bawah ini untuk melihat langkah yang diperlukan :

Click here! Horizontal Tabs Menu

Kode CSS dan Kode HTML CSS Drop Down Menu

Cara Membuat Horizontal Tab Menu di BloGGeR Baru

Setelah diposting sebelumnya kita telah mencoba membuat tab horizontal berdasarkan kode css yang ada di template, kali ini kita akan buat tab baru dengan seluruh kode css baru yang sama sekali tidak berkaitan dengan seluruh kode css bawaan blogger baru. Sekaligus kita juga akan melakukan modifikasi pada kode html template supaya tab horizontal maupun berbagai menu yang lain bisa kita pasang di semua bagian yang dikehendaki.

Horizontal tam menu ini masih menggunakan kode css tanpa tambahan sebuah script sehingga beban pada blog juga tidak akan terasakan, apalagi background image yang kita gunakan juga amatlah kecil. Pembuatan tab ini bisa juga dimanfaatkan sebagai bahan latihan buat sobat blogger untuk melangkah pada pembuatan menu yang lebih kompleks diposting selanjutnya. Meskipun demikian, tidak ada ruginya jika tab menu horizontal ini digunakan untuk menambah kelengkapan blog sekaligus memperindah karena tampilannya yang sangat menarik.

Semua kode tinggal sampeyan copy dan simpan melalui penambahan widget blog tanpa harus upload satupun gambar/images karena semua sudah dalam bnetuk siap pakai. Beberapa perubahan terutama dilakukan untuk menempatkan tab pada posisi yang paling ideal dengan cara merubah margin di kode cssnya. Untuk link dan nama link-nya silahkan dirubah sesuai blog yang sampeyan kelola.

Kode CSS dan HTML Horizontal Tabs Menu-1

Menampilkan Tab Horizontal di BloGGeR Baru

Horizontal Tab Menu di BloGGeR Baru yang akan kita bahas untuk pertama kali ini adalah bagaimana cara membuat tab horizontal dengan memanfaatkan kode css bawaan blogger baru, sehingga desain tab ini bisa dibuat sesuai harapan blogger, atau setidak-tidaknya kita bisa melakukan beberapa perubahan pada variabel pembentuk tab hingga bisa mendekati hasil optimal.

Sebelum berlanjut pada teknik pembuatan horizontal tab sederhana ini, sebaiknya kita pahami dulu beberapa hal yang berkaitan dengan pemanfaatan tab bawaan ini.

1. Kode HTML Tabs Horizontal : Horizontal Tabs Blogger Baru hanya menggunakan kode CSS murni tanpa melibatkan javascript.
2. Simple atau Sederhana : Karena hanya menggunakan kode CSS yang sangat terbatas, maka bentuk tabs menjadi sangat sederhana.
3. Posisi : Hanya dapat di tempatkan di bagian bawah header (crosscol).
4. Perubahan Variabel Tab Horizontal
   

Cara Merubah Ukuran Tag Cloud Cumulus dengan Box Fleksibel

Supaya tag cloud cumulus full color yang sampeyan buat berdasar posting beberapa waktu yang lalu bisa ditempatkan di widget manapun dengan lebar kolom yang tersedia di blog, maka harus kita ubah desain boxnya dengan yang lebih fleksibel hingga ketika ukuran tag cloud di rubah maka box akan langsung menyesuaikan diri secara otomatis. Satu persatu akan kita bahas perubahan beberapa varible tag cloud dan box-nya secara berurutan.

Untuk mengikuti tutorial ini sebaiknya buka dulu tutorial tentang cara membuat label animasi tagcloud cumulus melalui link di bawah ini:

• Panduan membuat label animasi cumulus
• Panduan membuat tagcloud cumulus full color

Rubah Box Tag Cloud Cumulus Full Color

Bentuk Susunan Desain Tag Cloud Full Color - Box

<DIV>
Javascript Tag Cloud Full Color
</DIV>

Untuk lebih jelasnya silahkan buka kembali posting tentang tag cloud full colornya dengan KLIK link di bawah ini:
Membuat Tag Cloud Cumulus Full Color

Kode HTML dan Javascript Tag Cloud Full Color - Box yang digunakan sesuai posting sebelumnya

<div class="menuTitle" style="text-align:center;font:18px Droid Serif;font-weight:bold;color:blue;">Label Tag Cloud gubhug reyot</div>
<div class="box4" style="background:#222; width:278px;border:8px solid #333;margin:20px 0 20px 16px;">
<div class="box3" style="background:transparent url(http://tagcloud-cumulus.googlecode.com/files/bg_cumulus-gubhugreyot-1.png) center repeat-x;border:3px solid #555;width:272px;">
<div class="box2" style="background:transparent;width:266px;border:3px solid #777;"> 
<div class="box1" style="background:#999; width:250px; background:transparent url(http://tagcloud-cumulus.googlecode.com/files/bg_cumulus-gubhugreyot-2.png) center no-repeat;border:3px solid #999;padding:0  5px">
Javascript Tag Cloud Full Color
</div>
</div>
</div>
</div>

Rubah kode HTML Box Tag Cloud Full Color menjadi seperti di bawah ini :

Membagi kolom posting menjadi 2 (dua) Bagian

Membuat judul posting tentang membagi halaman blog menjadi dua kolom benar-benar membuat pusing kepala. Bagaimana tidak karena pasti akan terjadi dua pengertian yang berbeda. Dari kata dan kalimat serta maksudnya, membagi halaman posting menjadi 2 kolom bisa di artikan :

1. Membagi posting atau setiap posting dibntuk dalam 2 kolom terpisah, kiri dan kanan.
2. Membuat halaman posting menjadi 2 kolom, kiri dan kanan dengan setiap kolomnya berisi satu buah postingan.

Coba .... Bingung, khan?! He .... ndak apa-apa ... Biar kita sama-sama bingungnya. Yang buat tutorial bingung, yang baca bingung dan yang pasti yang mau buat juga sedikit bingung. He ... he ....

Biar sedikit berkurang bingungnya, kita akan buat dulu panduan yang berkaitan dengan pengerian dan maksud yang tertulis di poin ke-2.

Cara Membuat Show-Hidden atau Expand-Colapse di Widget Blog

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

css3 Buttons: Cara membuat Button Keren dg CSS3

Selama ini bentuk dan rupa button hanyalah dalam bentuk yang itu-itu saja dan kadang melihatnya terasa sangat membosankan. Kini bentuk usang dan kuno button akan semakin ditinggalkan oleh pengguna blog. Desain butoon yang lebih inovatif mampu dikembangkan dengan berbagai pengembangan melalui css3 dengan berbagai bentuk dan variasinya. Untuk menciptakan button yang lebih menarik kita bisa gunakan background image, background color, text-shadow, box-shadow, border-radius, opacity-effects, blik effects, berbagai jenis dan ukuran serta warna font serta beberapa penambahan kode css yang lain. Beberapa contoh berikut hanyalah sebagian dari css3 button yang telah aku buat dan mungkin akan bermanfaat bagi kita :


css3 buttons

Buttons-1

buttons-2

buttons-3

buttons-4

button-5

buttons lain

Cara membuat css3 buttons

Cara Membuat JQuery LightBox

Meskipun ada berbagai macam cara membuat lightbox dengan berbagai javascript seperti halnya menggunakan mootool dan prototype.js, namun kita akan utamakan terlebih dahulu cara pembuatan lightbox image viewer menggunakan jquery-1.3.2.js atau jquery.1.3.2.min.js. Tujuannya tak lain adalah sebagai upaya untuk memaksimalkan fungsi jquery-1.3.2.js. Gambaran sederhana tentang light box adalah, saat kita KLIK sebuah image atau thumbnail di halaman blog, maka akan terlihat preview image dalam ukuran yang jauh lebih besar yang ditampilkan seperti layaknya pada sebuah window baru di halaman blog dengan disertai efek layar gelap (transparency effects). Beberapa controll disertakan di dalamnya seperti next, previous dan close. Beberapa lighbox yang lain bahkan menggunakan contoll baru yang berfungsi untuk mengontol fungsi slideshow yang sekaligus disertakan.

Supaya mudah untuk di aplikasikan oleh semua blogger, jquery LightBox ini akan kita buat dalam bentuk "paket langsung tempel" dengan penggunaan kode HTML posting teramat sederhana sehingga siapaun dengan mudah mampu menggunakan dan menciptakan sebuah blog yang luar biasa atraktif. Semua kode telah terupload di file hosting dan dalam bentuk link siap pakai. Silahkan pasang dan simpan di template di bawah kode <head> atau di atas kode </head> kemudian segera coba di ruang posting, terbitkan, buka blog dan nikmati cantiknya tampilan Jquery LightBox.

Cara membuat JQuery LightBox

Farbastic Color Picker: Cara Buat jQuery Farbastic Color Picker

Farbastic Color Picker merupakan satu dari beberapa color picker yang amat populer. Penampilanya yang sangat indah dan menarik, dengan bentuk selector warna sebuah bingkai pelangi berbentuk bulat sungguh menjadikannya terlihat bagai sebuah lingkaran pelangi menyala yang luar biasa cantik. Farbastic Color Picker widget ini didesain oleh Steven Witten dengan mengembangkan kemampunan yang dimiliki jQuery-1.2.6.js.

Dari pengalaman selama ini, menentukan kode warna yang akan kita pakai, bila kita hanya melihat tampilan warna dalam bentuk teramat kecil, kadang-kadang apa yang terlihat ternyata tidak sesuai dengan yang kita harapkan. Oleh karena itu melalui posting ini, beberapa kode CSS telah aku modifikasi dengan pertimbangan agar warna terpilih bisa terlihat dengan sempurna dalam ukuran yang lebih luas (lebar). Ada tiga pilihan untuk menampilkan warna output dari Farbastik Color Picker, untuk menggantinya silahkan tinggal lakukan sedikit perubahan pada kode html-nya. Selain itu untuk lebih praktis saat pemasangan javascript di template, JQuery-1.2.6.js dan farbastik-1.1.js juga telah aku gabung dalam bentuk satu paket javascript.

Karena Farbastik ini telah berubah desainnya menjadi lebih besar, untuk menggunakkannya sebaiknya di lakukan melalui penambahan widget footer (ujung terbawah). Apabila sampeyan menggabungkannya dengan spoiler yang sudah kita postingkan juga beberapa waktu yang lalu, maka Farbastik Color Pikcker akan menjadi tersembunyi dalam spoiler. Farbastik hanya akan terlihat saat button "SHOW" di KLIK. Jadilah sebuah widget cantik yang menjadi lebih bertambah luar biasa. Agar lebih mudah dan praktis cara membuatnya dalam bingkai spoiler, maka sekaligus kita akan buat secara lengkap panduan memasangnya.

Javascript - CSS Code : Farbastic Color Picker in the container spoiler

Buat Daftar Isi Label Open in New Window (in New Tab)

Hanya perlu menambah kode baru target='_blank', maka semua daftar isi label blog sampeyan akan terbuka di window baru atau boleh diistilahkan juga terbuka di tab yang baru (di opera dan Mozzila). Kita hanya perlu sedikit teliti dan telaten saat mencari kode html yang akan dirubah.

Cara Membuat Daftar Label Blog Supaya Berubah Menjadi Terbuka di Tab yang Baru/Window Baru

1. Login to BloGGeR atau Login ke BloGGeR
2. Setelah masuk halaman Dasboard, KLIK link Layout (Tata Letak) atau Design (Rancangan).)
3. KLIKEdit HTML
4. BackUp Template dengan cara :
   - KLIK Download Full Template (Download Template Lengkap.
   - Simpan File template di folder PC (file berekstensi .xml).
   - Kembali di Halaman Edit HTML.
5. Tetap di Edit HTML, lanjutkan dengan KLIK Expand Template Widget.
6. Cari kode <b:widget id='Label1'. Dibawah kode html yang terpotong ini (supaya mudah mencarinya!), terdapat beberapa kode yang lain seperti terlihat di bawah ini :

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' ><data:label.name/></a>

Rubah kode HTML menjadi seperti berikut :

Buat dan Pasang Translator di blog

Translator ini ini berfungsi untuk menterjemahkan blog sampeyan ke dalam bahasa Inggris. Yah ..., memang untuk apa gunanya kita pasanga translator ke terlalu banyak bahasa? Bukankah kita semua juga tahu betapa translator yang hingga detik ini bisa kita manfaatkan tetap saja tak mampu memberikan hasil terjemahan sesuai harapan? Dus ... itu sama artinya untuk saat ini cukuplah hanya gunakan translator yang mampu menterjemahkan ke bahasa Inggris saja. Yah sekedar sebagai sebuah pelengkap blog yang mungkin saja berguna bagi yang membutuhkan. Tentu saja si pengguna juga masih harus banyak mengumpulkan segenap energi dan memeras keringat untuk bisa mengerti secara maksimal apa yang terbaca dala bahasa terjemahan. Atau mungkin saja mereka yang membaca justru jadinya lebih banyak mengerutkan dahi sambil tersenyum simpul membaca hasil translate yang bisanya jadi aneh nggak karuan?!

D E M O

Cara membuat dan Memasang Translator

Tag Cloud Cumulus Full Color: Buat dan Pasang Label Cloud Cumulus Full Color

Berbagai pertanyaan seputar widget label tag cloud cumulus full color berikut cara membuat background pada tag cloud cumulus spektacular ini kiranya akan langsung terjawab melalui panduan dan tutorial blogger cara membuat dan memasang widget label tagcloud animasi cumulus full color ini.

Untuk membuat tag cloud spesial ini, silahkan sampeyan membuka terlebih dahulu Panduan Praktis Cara Membuat Tag Cloud Animasi Cumulus Suka2 yang telah terposting beberapa waktu yang lalu. Silahkan KLIK link di bawah ini :

Tag Cloud Animasi Cumulus Suka-Suka

Kode HTML dan Javascript untuk membuat Tag Cloud Cumulus Full Color

Cara Termudah Buat Scroller Box Kolom Komentar Blog

Meskipun beberapa waktu sebelum ini telah terpostingkan cara membuat scroller box di kolom komentar, namun kali ini kita akan dengan cara berbeda yang terhitung paling mudah, cepat dan praktis. Dalam tempo sekejap akan jadilah sebuah scroller box yang menjadi wadah bagi seluruh bagian kolom komentar. Penggunaan scroller box ini akan membuat halaman blog menjadi lebih ringkas karena komentar yang masuk berikut semua hal yang berhubungan dengan komentar akan ditampilkan dalam ukuran terbatas. Ketinggian scroller dapat diatur sesuai selera blogger.

Cara Membuat Scroller Box di Kolom Komentar Blog BloGGeR - BlogSPOT

Cara I ♦ Seluruh Kolom Komentar dalam 1 Scroller Box

Cara Buat Scroller Bar Blog Posts (Posting)

Bukan hanya di sidebar widget saja sebuah scroller bar dapat dibuat. Seluruh halaman posting (judul berikut artikel) atau sebagian halaman posting (hanya di artikel tidak termasuk judul) juga bisa dibuatkan sebuah scroller bar. Hanya dengan menambahkan beberapa kode CSS yang teramat sederhana maka jadilah sebuah posting dalam scroller box. Penggunaan scroller bar blog posts ini akan membuat halaman posting dapat diatur ketinggiannya (height) dan dalam bentuk yang seragam (sama) di semua posting. Apabila cara ini digunakan, halaman blog akan terlihat manis saat halaman utama di set menampilkan cukup banyak posting (lebih dari satu posting di halaman utama), karena semua posting akan tampak dengan ketinggian yang sama dan semuanya dalam bentuk scroller box. Dari 2 macam scroller bar blog posts, pilihan yang kedua (hanya artikel) menjadi alternatif terbaik karena judul posting (posts title) tidak terwadahi dalam scroller bar, sehingga akan selalu tetap terlihat. Sampeyan bisa mencoba membandingkan hasil dari 2 macam scroller bar blog posts kemudian menentukan pilihan yang terbaik.

Cara Praktis Membuat Scroller Bar Sidebar Widget BloGGeR BloGSPOT

Ada dua kemungkinan yang mungkin kita lakukan terhadap scroller bar widget. Yang pertama adalah membuat scroller untuk keseluruhan widget dalam sekali kerja, dan yang kedua dengan membuat scroller bar tersendiri di masing-masing widget yang kita gunakan. Kalau dengan cara pertama, bewgitu kode CSS kita simpan dalam template, maka secara semua widget akan terwadahi dalam sebuah box yang diperlengkapi dengan scroller (semua scroller bar akan seragam bentuk dan ukurannya) sedang apabila kita menggunakan cara kedua, maka setiap widget akan bisa diatur seberapa tinggi yang dibutuhkan. Menilik dari bervariasinya widget dan penting tidaknya sebuah widget dipasang scroller, maka menurut saya cara kedua merupakan pilihan yang paling tepat. Meskipun demikian, semua bergantung kepada sampeyan sendiri, karena setiap blogger tentunya mempunyai pertimbangan yang berbeda. Di bawah ini adalah cara paling praktis untuk membuat scroller bar di widget BloGGeR atau BlogSPOT.

Membuat Scroller Bar Langsung di Semua Sidebar Widget (Scrollbar in All Sidebar Widgets)

Kode CSS yang digunakan :

.sidebar .widget{
     height:220px;
     overflow:auto;
     }

Letakkan kode CSS ini di atas kode

Cara Membuat jQuery Transparent Floating Menu

Jquery Transparent floating Menu ini sudah di coba di template BlogSPOT dan hasilnya teramat memuaskan. Jika sampeyan ingin melihatnya silahkan KLIK link DEMO di bawah ini.

D E M O

Pada prinsipnya, jQuery Transparent Floating Menu bekerja mengandalkan JQuery-1.3.2.js. JQuery ini digunakan dengan pertimbangan kemampuannya yang luar biasa sehingga pemanfaatannya tidak hanya dapat dipergunakan untuk sebuah fungsi (desain) tunggal saja. Seandainya sampeyan sebelumnya sudah menggunakan jQuery-1.3.2.js atau JQuery-1.3.2min.js, maka hanya tinggal menambahkan sedikit kode CSS dan javascript saja.

Floating menu dibuat dalam bentuk transparan sehingga beberapa teks yang nantinya tertindih oleh oleh pergerakan floating menu akan tetap akan terlihat dengan baik. Penggunaan efek opacity sama sekali tidak mengganggu atau bahkan merusak penampilannya karena kita menambahkan juga efek opacity pada hover sehingga ketika cursor menyentuh salah satu titik box menu, maka seluruh bagian Transparent Floating Menu akan terlihat dengan amat sempurna. Untuk semakin memperindah bentuk dan penampilan, kita juga menambahkan sebuah background image serta background arrow (panah) pada link menu serta efek rounded corners di sebelah kiri box. Pada bagian sebelah kanan yang bersinggungan di garis tepi blog kita buat tanpa border sehingga terlihat seakan melekat ujung kanan blog.

Cara Membuat JQuery Transparent Floating Menu

Cara Buat Rounded Corner Horizontal Scrolling: Amazing Scrolling

Horizontal Scrolling ini amat cantik desainnya karena telah ditambahkan efek rounded corner dan dapat ditampilkan tanpa harus merubahnya dalam bentuk file html.Cukup simpan kode HTML dan Javascript melalui penambahan widget. Sampeyan bisa memasukkan link kedalamnya beserta judul dan teks untuk menjelaskan judul secara singkat. Berbagai hal bisa disampaikan di sini, misalnya link sahabat, posting, iklan atau kata sambutan dan ucapan terima kasih. Pengaturan posisinya juga amat mudah dilakukan karena kita hanya perlu mengubah posisi horizontal scroller terhadap bagian sebelah kiri dan atas blog.

D E M O

Cara Buat dan Pasang Ticker 2 Kolom

Ticker yang dibuat dalam bentuk 2 kolom ini mampu memuat teks sebanyak sampeyan suka. Masing-masing teks akan secara bergiliran ditampilkan dalam periode waktu yang telah ditentukan. Kolom pertama sebagai tempat menuliskan judul dan kolom ke dua digunakan sebagai tempat menuliskan teks yang akan disampaikan ke pengunjung blog. Karena melalui javascript sudah didesain sedemikian rupa sehingga teks ini mampu membentuk sebuah link, maka sampeyan bisa masukkan link sebanyak sampeyan suka pula.

Posisi ticker dapat dirubah sesuai keinginan dengan merubah nilai margin-top dan margin-left. Apabila tanpa dilakukan perubahan di margin-left dan margin-topnya, maka ticker ini akan nangkring di bagian pojok kiri atas, menutup Navbar bagian tersebut atau jika navbar tidak ditampilkan maka dia akan terletak di bagian header blog. Untuk menambah gaya tampilannya, tentu saja ada sebuah efek yang difungsikan di dalamnya.

Javascript DIV/Image Loader for Blog: Cara Membuat Javascript Loading

Panduan BloGGeR Membuat Javascript Loader.

Javascript loading atau biasa dikenal juga sebagai javascript pre-loading dan javascript image loader, sebenarnya adalah sebuah fungsi yang tak jauh berbeda. Kesemuanya digunakan untuk menandai proses loading website atau blog. Dengan memanfaatkan fungsi seperti ini, ketika sebuah blog dibuka, maka akan ditampilkan gambar/image atau teks yang memberi pertanda bahwa blog sedang dalam proses loading/membuka. Sesuai dengan namanya, Javascript DIV loader ini memang didesain dengan memanfaatkan kode/elemen DIV di dalam javascripnya, yang difungsikan untuk membentuk konfigurasi penataan dan tampilan gambar/image serta teks.

Karena javascript ini memang dibuat untuk tidak menjadi penambah beban blog yang jadi pengganggu kecepatan loading, oleh karena itu desain yang sederhana menjadi pilihan yang tidak boleh tidak harus dilakukan. Beban 5kb javascript DIV Loader pastinya terasa sangat entheng ketika dibandingkan dengan hasil yang diperoleh melalui fungsi dan keindahan yang mampu ditampilkan. Untuk membuat dan memasangnya di blog juga teramat mudah karena hanya di dua titik javascript dan kode HTML harus kita simpan.

Cara Membuat dan Memasang Javascript DIV Loader

Cara Buat Spoiler Blogspot - Blogger

Spoiler! He ... eh ...! Mendengar kata spoiler, sebenarnya pikiranku jadi lebih banyak meluncur ke sebuah accecories kendaraan bermotor atau mobil. Sebuah perangkat tambahan yang berfungsi untuk menjaga kestabilan dan mengurangi gaya tarik bumi (down force), sehingga laju kendaraan juga akan bertambah cepat. Kayaknya ungkapan "spoiler" ini merupakan sebuah istilah yang "dipinjam" blogger untuk menamai sebuah fungsi javascript yang berguna untuk menyembunyikan "sesuatu" dalam posting atau widget, dan kemudian hanya akan terlihat ketika "button" trigger "pemunculan" di sentuh atau di KLIK.

Untuk membuat sebuah spoiler dibutuhkan kode html yang terdiri dari beberapa kode css dan javascript serta xHTML. Sebagian kode disimpan dibagian head dan beberapa kode yang lain digunakan dalam posting atau melalui penambahan widget. Dalam sebuah bentuk spoiler yang sederhana, bahkan semua kode bisa langsung digunakan begitu saja saat posting dilakukan.

Cara membuat spoiler blogger/blogspot

1. Login to BloGGer : Tuliskan User Name/Nama Pengguna atau Email Address kemudian lanjutkan dengan menuliskan Password (Sandi).
2. Dasboard (Dasbor) : Setelah masuk di halaman dasbor, KLIK link Layout/Tata Letak atau Design/Rancangan.
3. Layout (Design) : Kita akan menyimpan terlebih dahulu kode CSS-nya dalam template. Oleh karena itu, sesampai di tahap ini KLIK link Edit HTMl.
4. Copy-Paste : Copy Kode CSS kemudian letakkan di atas kode ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode di atas.
5. SAVE Template (Simpan Template) : Setelah kode CSS di letakkan pada posisi yang benar, KLIK SAVE Template/Simpan Template.

Buat dan Pasang Pop Up Image Efektifkan Halaman Blog

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

Cara Buat dan Pasang Javascript Hidden Side Menu (Side Menu Tersembunyi)

Side menu tersembunyi (Hidden Side Menu) satu ini amat berbeda dengan side menu atau menu samping tersembunyi/hidden side menu yang lain. Meskipun sering kali hanya diletakkan pada samping kanan atau kiri blog, tetapi jika sampeyan menginginkan si side menu tersembunyi ini menempati posisi di bagian atas blog, dengan amat mudahnya tinggal ganti saja kode perubah posisi side menu. Jika sebelumnya "left" atau "right", maka gantilah dengan "top". Dalam sekejap si menu akan berpindah posisi di bawah navbar (blog bagian atas). Dengan sekali sentuh, maka seluruh daftar isi blog yang tertulis di side menu akan meluncur ke bawah hingga terlihat semua. Ya ..., karena hidden side menu ini akan bergerak (muncul) melalui sentuhan cursor. Setelah cursor dilepas, maka secara otomatis seluruh menu dan isinya segera kembali bersembunyi di bagian mana dia diletakkan. Sangat irit tempat dan membuat lebih banyak ruang blog dapat digunakan untuk tampilan lain yang diperlukan.

D E M O

DEMO: Floating - hidden menu

Cara Membuat Javascript Hidden Side Menu/Menu Samping Tersembunyi

Buat dan Pasang Fungsi/Fasilitas Print Menggunakan Javascript

Untuk membuat atau menampilkan fungsi/fasilitas print di blog, kita hanya perlu menambahkan sebuah javascript yang amat sederhana serta sebuah link yang bisa berbentuk teks atau gambar/image. Untuk membuat tampilanya supaya terlihat menarik, kita akan gunakan sebuah gambar mini printer (thumbnail) dengan ukuran 54px (width) dan 32px (height) , yang berupa gambar animasi gif. Javascript disimpan di antara tag <body> dan </body> atau apabila mau lebih gampang silahkan simpan melalui penambahan gadget di Element Laman (Page Element).

Cara membuat dan memasang javascript pelengkap fungsi print

1. Login ke BloGGeR (Login ke BloGGeR).
2. Dasboard (Dasbor) : KLIK link Layout/Tata Letak atau Design/Rancangan.
3. Layout (Design) : KLIK Tambah Gadget.
4. Add Gadget (Tambah Gadget) : KLIK HTML/Javascript.
5. Copy-Paste : Letakkan javascript dan kode HTML Print di box yang tersedia, kemudian KLIK Simpan (SAVE).
6. Open Blog (Buka Blog) : Lihat hasilnya dengan membuka blog.

Javascript dan kode HTML Print

Mengganti Template BloGGeR Baru ke Template BloGGer Lama

Ho ... ho ..., template BloGGer Lama yang di lansir sejak tahun 2006 dan yang selama ini menjadi template andalan para blogger, ternyata masih bisa kita gunakan seperti di hari-hari sebelumnya. BlogSPOT masih memberi kesempatan pada kita untuk bisa memanfaatkannya sebagai desain dasar blog kita. Wuh .... terus terang saja sebelumnya aku kira sudah tamat riwayatnya. Bah ... gara-gara nggak sempat lihat informasi di halaman Edit HTML yang menyampaikan informasi tentang hal ini, jadinya sempat keliru juga apa yang aku sampaikan di posting sebelumnya. Apa mau dikata ... barang udah terlanjur .... Ups .... namanya juga manusia. Nggak sekali dua kali salah adalah suatu hal yang wajar. Yah ..., cuman di waktu ke depan jadi harus lebih berhati-hati daripada kekeliruan berulang kembali.

Bagi sobat blogger yang ingin menggunakan template lama sebagai desain dasar blog sampeyan, BlogSPOT masih memberi kebebasan kepada sampeyan semua untuk menggantikan template blogger baru yang kini mulai disosialisasikan dengan maksimal. Untuk proses penggantian template ini sampeyan bisa memulai dengan masuk ke halaman Edit HTML.

Mengapa kita harus menggunakan template blogger lama?

Beberapa pertimbangan mungkin bisa menjadi alasan untuk melakukan perubahan template blogger baru ke blogger lama.
- Masih minimnya tutorial blogger baru.
- Lebih mudah melakukan modifikasi template blogger lama.
- Masih adanya beberapa kelemahan dan kekurangan desain blogger baru.