InBlue Blogger Template

InBlue Blogger Template adalah template blogger dengan style rounded corners atau garis melengkung, memakai 2 kolom dan sidebar pada di sisi kanan. Tampilan background dengan pola gradient biru dan hitam membuat template ini tampak lebih bervariasi dengan warna yang kontras dengan background kolom post dan sidebar.

 

Sedikit tambahan menu di atas header, adalah page list menu atau menu halaman statis yang akan muncul dengan sendirinya ketika sobat membuat halaman statis. Kemudian menu horizontal juga saya sisipkan di bawah header, dan bisa di edit dengan mudah pada elemen halaman tanpa harus masuk ke menu Edit HTML template. Banner dengan ukuran 468x60 juga bisa di tambahkan melalui elemen halaman.

 

• Live Demo
• Download Theme

Escarlata Blogger Template

Escarlata Blogger Template adalah sebuah template blogger menggunakan 2 kolom dan sidebar yang terletak disebelah kanan. Template ini juga sangat simple, penggunaan menu horizontal juga sangat mudah. Menu horizontal sengaja saya buat 2 baris untuk melengkapi jumlah url yang mungkin berlebihan atau jumlah halaman statis yang banyak.

 

Tidak banyak fitur di template ini, selain yang sudah saya sebutkan diatas, social bookmark share dan artikel terkait dengan thumbnail juga saya selipkan di halaman post. Google font API yang saya gunakan disini adalah font Droid Sans, membuat template Escarlata menjadi lebih rapi dari segi tulisan pada umunya.

 

• Live Demo
• Download Theme

Simple Box Shadow Blogger Template

Belakangan memang blog ini sedikit terbengkalai, selain kesibukkan saya dikantor yang padat aktifitas, saya juga mengelola beberapa blog sehingga waktu untuk posting juga sangat sedikit. Kali ini saya coba angkat template yang sebenarnya sudah lama saya buat tapi tidak pernah saya posting disini. Simple Box Shadow adalah sebuah template blogger dengan tipe minimalis dan memanfaatkan kode css.

 

Tetap menggunakan kolom terpisah antara postingan dan sidebar, saya masih mengandalkan 3 kolom dibagian footer dan auto readmore juga saya pilih sebagai bagian dari postingan.

 

• Live Demo
• Download Theme

Penggunaan Google Font API di Blogger

Hal ini sebenarnya sudah pernah saya jelaskan sebelumnya pada artikel Tutorial Penggunaan Google Fonts, namun kebetulan ada yang bertanya mengenai font yang saya gunakan di blog ini jadi tidak ada salahnya saya tulis kembali tutorial ini. Font yang saya gunakan di blog ini adalah Droid Sans, bagi yang belum mengerti silahkan baca kembali postingan saya yang lalu mengenai google fonts. Jika sobat ingin menggunakan font yang lain, silahkan kunjungi langsung Google Web Fonts.

 

Pada halaman depan, silahkan sobat sorting saja berdasarkan Popularity.

 

Setelah itu sobat bisa melihat font yang paling banyak digunakan termasuk 'Droid Sans' yang juga saya gunakan di blog ini, pilih font yang sobat suka dan klik Add to Collection.

 

Jika ingin melihat bentuk tulisan dalam format Paragraph atau Headline, sobat bs klik Review pada tab button yang ada dibagian kanan bawah.

 

Kemudian untuk tahap terakhir, silahkan klik tab button Use pada bagian kanan bawah. Sobat akan mendapatkan kode untuk font yang sebelumnya sudah sobat pilih.

 

Jangan lupa untuk menambahkan tanda [ / ] di akhir kode sehingga menjadi seperti berikut :

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>

 

Tahap selanjutnya memasukkan kode tersebut ke dalam template blogger, silahkan login ke blogger.

1. Klik Rancangan
2. Kemudian klik Edit HTML
3. Tambahkan kode tersebut sebelum kode </head>, sehingga menjadi seperti :

   <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>
   </head>

4. Cari kode css untuk body, contohnya seperti berikut :

   body {
   width: 980px;
   background: #FFF;
   font-size: 13px;
   font-family: 'Droid Sans', verdana, arial;
   text-align: left;
   color: #000;
   margin: 0 auto;
   padding: 0;
   }

5. Perhatikan huruf yang saya tebalkan, itulah kode css yang harus sobat tambahkan.

Kode css tersebut sengaja saya letakkan dibagian body, sehingga font seluruh isi blog akan berubah menjadi Droid Sans. Jika sobat menemukan kode font : verdana, arial, trebuchet ms dan sebagainya dibagian css yang lain silahkan hapus saja, misal seperti ini :

 

.post {
text-align: left;
background: #FFF;
font-family: arial, verdana;
border: 1px solid #CCC;
margin-bottom: 10px;
padding: 10px 10px 0;
}

 

Baiklah selamat mencoba, semoga bermanfaat !

Google Plus Situs Jejaring Sosial Terbaru

Saat ini dunia komunikasi semakin canggih dan komunikatif, hampir semua informasi dan gadget bisa kita dapat dengan mudah di internet. Dan orang-orang hebat pengembang situs jejaring sosial pun mulai mengembangkan fitur-fitur pada situs mereka, bahkan sampai saling sikut katanya sudah biasa demi kemajuan dan keperkasaan situs yang mereka kelola. Apalagi kalau bukan karena nama agar dunia lebih menghormatinya.

 

Konon kehadiran Google plus menjadi ancaman serius bagi situs-situs jejaring sosial lainnya, khusunya Facebook yang sampai saat ini masih merajai dunia jejaring sosial walaupun beberapa waktu yang lalu Twitter masuk ke dunia maya, tetapi Facebook masih menjadi situs jejaring dengan pengguna terbanyak.

 

Kembali ke Google Plus atau yang biasa disebut “G plus”, oleh Larry Page (CEO of Google) diklaim akan menjadi situs jejaring sosial terbesar dan terlengkap fitur-fiturnya. Untuk itu, silahkan sobat sendiri yang menilai ketika masuk dan bermain di G Plus. Karena menurut saya, nilai plus minus pasti ada tergantung penggunanya. Mirip dengan Facebook, tampilan juga tidak terlalu jauh berbeda, mungkin beberapa fitur unggulan G Plus yang sedikit menambah nilai plus.

 

Beberapa fitur tersebut antara lain :

1. Circle : Ketika sobat masuk, sobat bisa mengelompokkan teman berdasarkan kategori sobat, misal teman nongkrong di lingkaran satu, keluarga di lingkaran dua dan teman kerja di lingkaran tiga, dst.
2. Hangout : memungkinkan sobat untuk bertatap muka langsung melalui chat online atau webcam chat, sobat juga dapat mengatur untuk berbicara dengan beberapa orang sekaligus.
3. Sparks : disini sobat dapat mengambil video atau artikel berdasarkan minat sobat, dan bisa menyimpannya sebagai favorit di profil sobat. 

Saat ini, Google Plus masih terbatas pada pengguna akun Gmail saja, karena Google Plus masih dalam tahap pengembangan. Jadi untuk pengguna email lainnya, harap bersabar.

Google Update Pagerank

Hari ini google update pagerank, kira-kira seperti itu yang saya lihat ketika beberapa blog saya mengalami perubahan angka pada pagerank. Seperti biasa google update pada saat yang tidak di duga-duga, dan memang belakangan google sudah tidak teratur dalam melakukan update pagerank. Ada suka ada duka, buat yang PR nya turun jangan kecewa, semoga di update berikut bisa naik lagi dan buat yang naik jangan terlalu besar hati, karena pagerank memang bukan satu-satunya tolak ukur kesuksesan sebuah blog/web, masih banyak tolak ukur untuk menilai kesuksesan sebuah blog.

 

Beberapa blog saya juga ada yang turun termasuk blog ini, namun ada juga yang bisa membuat saya senang karena www.mybloggerthemes.com akhirnya bisa naik kelas. Semoga sukses buat semua yang naik peringkat, dan buat yang turun jangan kecewa. Tetaplah menulis dengan gayamu dan jangan pernah melakukan copy paste, karena itu akan sangat buruk di mata google.

Membuat Label Dengan Thumbnail Hover

Label yang selama ini sering kita jumpai bentuknya hanya berupa tulisan saja, itupun sudah ada dalam fasilitas menu di blogger. Bagaimana jika mengganti label dengan thumbnail atau gambar dari postingan? caranya sangat mudah, hanya manambahkan sedikit kode css dan javascript maka label dengan thumbnail akan menghiasi blog sobat. Kali ini saya coba berikan tutorial blog tentang label dengan thumbnail hover.

 

Untuk demo sobat bisa lihat di mybloggerthemes.com yang terletak di bagian tengah bawah, dimana thumbnail yang muncul akan sesuai dengan label yang kita pasang. Penulisan label juga harus sesuai dengan yang ada di blog sobat, seperti besar kecilnya huruf juga sangat memperangaruhi. Untuk memulainya, ada baiknya sobat backup terlebih dahulu templatenya dengan masuk ke Rancangan –> Edit HTML –> Download Template Lengkap.

 

1. Tambahkan kode css berikut diatas / sebelum kode ]]></b:skin> : 

   img.label_thumb {

   float:left;

   padding:3px;

   background:#CCC;

   border:1px solid #A4A4A4;

   width:100px;

   height:75px;

   margin-right:10px;

   margin-top:10px }

    
   img.label_thumb:hover {

   opacity:0.8;

   filter:alpha(opacity=80);

   -moz-opacity:0.80;

   -khtml-opacity:0.8 }

2. Kemudian tambahkan kode script berikut dibawah / setelah kode ]]></b:skin> : 

   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
   if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
   var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
   {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
   else thumburl='';}
   document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
   if(i!=(numposts-1))
   document.write('');}
   document.write('</div>');}
   //]]>
   </script>

3. Simpan Template.
4. Masuk ke Elemen Laman –> Tata Letak
5. Pilih salah satu gadget yang ingin sobat masukkan label, kemudian klik Tambah Gadget dan pilih yang HTML/Javascript.
6. Kemudian masukkan kode berikut kedalamnya :

   <script type='text/javascript'>var numposts = 6;</script>
   <script type="text/javascript" src="/feeds/posts/default/-/Magazine?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

Keterangan :

• Tulisan yang berwarna hijau adalah lebar dan tinggi thumbnail, sobat bisa sesuaikan dengan lebar widget template sobat.
• Tulisan yang berwarna biru untuk jumlah label yang akan di tampilkan.
• Dan tulisan yang berwarna merah untuk label yang akan sobat tampilkan, jangan sampai salah menulis labelnya, besar kecilnya huruf juga sangat mempengaruhi.

Sekian saja tips dari saya, semoga bermanfaat.

Modifikasi Followers

Sudah hampir sebulan saya tidak update blog ini, di samping kesibukkan saya di luar saya juga cukup kelelahan mengurus blog-blog saya yang lain. Muncul lagi dengan tutorial blog yang ringan, tapi mungkin bermanfaat, kita coba memodifikasi followers blogger.

 

Biasanya followers dipasang langsung pada widget yang sudah tersedia di blogger, tapi kali ini kita akan memasangnya di widget HTML/Javascript. Abaikan tutorial ini jika sobat menggunakan template minima atau template bawaan blogger.

 

Jika sobat menggunakan custom template, maka untuk mengedit link, warna text dan border akan mengalami kesulitan. Untuk itu kita coba menambahkan border dan mengedit sedikit warna pada followers, link color, text color, background color dan border color. untuk memulainya, silahkan sobat login ke blogger.

• Masuk ke Rancangan
• Klik Elemen Laman
• Pilih Tambah Gadget
• Klik yang HTML/JavaScript
• Kemudian masukkan kode followers dibawah ini :

  <script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>

  <!-- Define the div tag where the gadget will be inserted. -->
  <div id="div-eknxr14kfzlq" style="width:280px;border:1px solid #cccccc;"></div>
  <!-- Render the gadget into a div. -->
  <script type="text/javascript">
  var skin = {};
  skin['BORDER_COLOR'] = '#dedede';
  skin['ENDCAP_BG_COLOR'] = '#f0f0f0';
  skin['ENDCAP_TEXT_COLOR'] = '#444';
  skin['ENDCAP_LINK_COLOR'] = '#444';
  skin['ALTERNATE_BG_COLOR'] = '#fff';
  skin['CONTENT_BG_COLOR'] = '#f9f9f9';
  skin['CONTENT_LINK_COLOR'] = '#444';
  skin['CONTENT_TEXT_COLOR'] = '#444';
  skin['CONTENT_SECONDARY_LINK_COLOR'] = '#444';
  skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#444';
  skin['CONTENT_HEADLINE_COLOR'] = '#444';
  skin['NUMBER_ROWS'] = '3';
  google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
  google.friendconnect.container.renderMembersGadget(
  { id: 'div-eknxr14kfzlq',
     site: '06215030860304111239' },
    skin);
  </script>

• Ganti kode yang berwarna merah dan ungu dengan kode id blog sobat
• Simpan.

 

Keterangan :

1. untuk kode yang saya tebalkan bisa sobat ganti sesuai dengan warna dan lebar widget blog sobat.
2. Kode yang berwarna biru sesuaikan dengan lebar widget template sobat.
3. Untuk mencari kode yang berwarna merah dan ungu, jika sebelumnya sobat sudah memasang widget followers, maka sobat bisa klik kanan pada halaman blog kemudian klik “view page source” lalu klik CTRL+F dan ketik saja followers. Dari situ sobat dapat melihat kode id dan site dari blog sobat.

Verde Arriba Blogger Template

Template ini sebenarnya sudah saya publikasikan di www.mybloggerthemes.com semiggu yang lalu, tapi baru sempat saya tulis disini. Verde Arriba saya ambil dari bahasa galician yang artinya hijau atas, karena memang template ini sengaja saya pasang widget dengan background hijau dibagian atas. Widget tersebut berisi link navigasi, search form, slider menu dan widget bebas berukuran 420 x 290 yang bisa diisi dengan html/javascript atau cocok untuk popular post seperti demonya.

 

Untuk yang lain, tidak banyak perbedaan dengan template-template sebelumnya. Seperti kolom di bagian footer yang berisi 3 kolom, hanya sedikit perubahan pada bagian warna dan tulisan. Untuk navigasi di bagian atas bisa sobat isi langsung di Elemen Laman –> Top Menu. Slider menu bisa di edit dengan membaca petunjuk yang saya sertakan di link downloadnya. Semoga bermanfaat dan bisa menjadi alternatif pilihan untuk blog sobat.

 

• Live Demo
• Download Theme

Backlink Gratis Dari Social Monkee

Beberapa hari yang lalu, saya mendapat bocoran dari senior saya kang Rohman dari blognya kolom-tutorial yang menulis tentang free backlink tool. Saya hanya meneruskan postingan ini buat sobat setia pengunjung blog tutorial. Mungkin ada beberapa yang sudah tau akan hal ini, namun tak ada salahnya saya berbagi sedikit tips untuk mendapatkan backlink gratis dengan cara yang sangat mudah. Apa sih Social Monkee itu? Social Monkee adalah sebuah layanan Free Backlink Tool.

 

Social Monkee adalah sebuah situs yang memberikan layanan submit artikel secara otomatis ke banyak situs Social Bookmark (dofollow). Social Monkee terbagi menjadi 2 account, free account dan premium account. Untuk Free account, kita hanya diperbolehkan mensubmit link dari artikel/post blog kita 1 kali dalam sehari, dan langsung tersebar ke 25 situs Social Bookmark. Sedangkan untuk Premium account, sobat diperbolehkan mensubmit sebanyak 3 kali dalam sehari dan setiap artikel/post yang kita submit akan di teruskan oleh Social Monkee ke 100 situs Social Bookmark lainnya. Dengan kata lain, jika kita mensubmit sebanyak 3 kali, maka kita akan mendapat backlink gratis sebanyak 300 setiap harinya.

 

Tapi sayangnya harga yang ditawarkan untuk menjadi Premium account adalah $47 sekali seumur hidup, cukup mahal ya tapi jangan khawatir Social Monkee memberikan kita ganti dari harga tersebut yaitu dengan mencari referral sebanyak 12 orang, maka kita bisa menjadi Premium account. Pilihan ke-2 tentu lebih ringan, ketimbang harus membayar sebesar $47.

 

Silahkan langsung saja kunjungi situs Social Monkee, daftar saja mumpung gratis. Semoga berhasil dan submit artikel blog sobat secara berkala agar bisa dapat backlink yang banyak. Karena backlink erat sekali hubungannya dengan PageRank, cari backlink sebanyak-banyaknya untuk menaikkan PageRank blog. PageRank blog tinggi, bisnis lancar.

Monago Blogger Template

Kembali lagi dengan blogger template, kali ini saya beri nama Monago Blogger Template. Asal usul nama ini saya ambil secara acak saja, untuk arti jelas tidak ada sama sekali. Monago Blogger Template memiliki 1 kolom sidebar di sebelah kanan, 3 kolom di bagian footer, 2 page navigasi (menu di bagian atas template), banner di sebelah kanan header dengan ukuran 468 x 60.

 

Sementara untuk related posts atau artikel terkait sengaja tidak saya pasang di template ini karena selera pengguna yang berbeda-beda, ada yang suka dan ada pula yang tidak suka sehingga kerepotan untuk menghapus widget tersebut. Untuk yang lain-lain tidak banyak yang istimewa, hanya warna putih dibagian utama template, hitam sebagai background body. Dan widget popular posts yang sudah saya modifikasi sehingga bentuknya yang lebih baik ketimbang widget popular posts yang tidak di modifikasi, bisa dilihat di demo template.

 

• Live Demo
• Download Theme

Vudion Blogger Template

Vudion blogger template adalah lanjutan atau variasi dari template azure yang baru saja saya publikasikan. Secara garis besar kedua template ini sama, hanya saja ada beberapa bagian yang mengalami penambahan dan pengurangan. Salah satunya adalah jumlah kolom dalam Vudion yang berjumlah 3. Di Vudion saya hapus navigasi halaman yang ada di bawah postingan, karena ada beberapa sobat blogger yang masih kebingungan cara mengaturnya, maka dari itu saya kembalikan ke bentuk standart.

 

Saya juga mengganti header dan footer dengan warna sedikit lebih tua dibanding Azure. Link navigasi juga saya pindah diatas header menyesuaikan bentuk background template. Dan beberapa bagian seperti border, post footer dan title sidebar saya ubah sedikit. Semoga tertarik !

 

• Live Demo
• Download Theme

Azure Blogger Template

Rasanya cukup lama juga saya tidak membuat template blogger, terakhir kali saya membuat jampete awal desember 2010. Sedikit semangat disela-sela kesibukkan saya mengurus mybloggerthemes.com, saya sempatkan membuat azure blogger template. Saya beri nama azure karena sesuai warnanya yaitu biru. Template ini menggunakan model magazine, saya coba tambahkan auto readmore, related posts with thumbnail, dan share button di setiap postingan.

 

Saya juga tambahkan social media icon (twitter dan facebook) dan banner 125 x 125 yang siap digunakan dan widget untuk banner ukuran 468 x 60 di bagian header. Footer columns yang menjadi andalan saya, juga saya masukkan di azure. Columns di bagian footer ini saya buat 100% dengan float tengah jadi jika manggunakan resolusi komputer yang besar maka bagian footernya akan tampak lebar sejajar dengan headernya.

 

 

• Live Demo
• Download Theme

Google Update Pagerank, Apa Benar?

Apa benar google sudah update? saya juga masih ragu atau saya yang ketinggalan berita. Lama tidak melihat blog zone, blog yang sudah tidak terurus lagi, blog amburadul yang tidak jelas mau dibawa kemana ternyata naik peringkat jadi 4. Untuk mengecek kapan terakhir google update, sobat bisa melihat di http://googlepagerankupdate.com dan ternyata memang google terakhir update tgl 2 april 2010. Lalu kenapa blog zone naik jadi 4 ya? berarti google hanya melakukan update minor ! saya tanya sama teman saya si beben , aisss ternyata dia lagi bengong online sendirian di blognya kang rohman.

 

Bicara masalah pagerank, situasi jual beli link mungkin kembali memperhitungkan yang satu ini. Seperti biasa, blogger-blogger yang maniak uang kembali berseri-seri jika blog mereka naik pangkat, paid review dan jualan link jadi seru lagi.

 

Biar sajalah yang mau bisnis ya bisnis, yang mau iseng ya silahkan teruskan berkreasi untuk blognya. Selamat buat yang naik, yang turun jangan kecewa, kita tunggu update yang sesungguhnya dari google, biasanya beberapa minggu setelah minor google akan update keseluran.

Tutorial Singkat CSS Box Shadow

Kembali lagi dengan pelajaran seputar css, dan kali ini saya akan berikan tutorial singkat tentang css box shadow. Box shadow ini dapat sobat gunakan pada kotak postingan, sidebar atau dapat juga sobat gunakan sebagai pemanis dalam artikel blog sobat. Seperti contoh dibawah ini :

 

Support Firefox, Safari, Chrome, Opera dan IE9

kode css untuk contoh diatas adalah : 

#contoh {

-moz-box-shadow: 10px 10px 5px #222;

-webkit-box-shadow: 10px 10px 5px #222;

box-shadow: 10px 10px 5px #222;

}

 

Adapun 4 bagian yang terdapat dalam box shadow adalah :

• Horizontal offset : Jika nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
• Vertikal offset : Jika nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
• Blur radius : Jika nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
• Warna dari bayangan. 

 

Berikut 6 contoh css box shadow yang bisa sobat pelajari dan gunakan :

 

A	B	C
D	E	F

 

Kode css untuk ke-6 contoh box shadow diatas adalah :

 

#Contoh_A {
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}

 

#Contoh_B {
-moz-box-shadow: -5px -5px 5px #222;
-webkit-box-shadow: -5px -5px 5px #222;
box-shadow: -5px -5px 5px #222;
}

 

#Contoh_C {
-moz-box-shadow: -5px -5px 0 5px #222;
-webkit-box-shadow: -5px -5px 0 5px #222;
box-shadow: -5px -5px 0 5px #222;
}

 

#Contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #222;
-webkit-box-shadow: -5px -5px 5px 5px #222;
box-shadow: -5px -5px 5px 5px #222;
}

 

#Contoh_E {
-moz-box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
}

 

#Contoh_F {
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

 

Jika sobat ingin menambahkan box shadow pada kotak postingan sobat, maka cari saja kode seperti di templates sobat :

 

.Post {…………………………dst

}

 

kemudian tambahkan salah satu kode diatas sehingga hasilnya kurang lebih akan seperti ini :

 

.post {……………………;

-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

 

Bagaimana jika bayangan berada didalam kotak (inner shadow), yang harus sobat tambahkan hanya kode inset pada setiap bagian, contoh :

 

F

 

dan kodenya adalah :

 

#Contoh_F {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

 

Css box shadow bekerja sempurna pada browser mozilla firefox, untuk browser lain hanya beberapa saja yang dapat berfungsi dengan sempurna. Semoga bermanfaat .. tetap belajar ya biar tambah pintar