Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Cara Buat Komentar Facebook | Pasang Di Blog

Cara Buat Komentar Facebook - Cara Pasang Komentar Facebook adalah kesukaan para blogger untuk memasang widget tersebut, tergantung juga kali ya hehehee,, Ok Pada kesempatan kali ini saya ingin berbagi kepada anda semua bagaimana cara membuat komentar facebook di blogger alias blogspot. pasti bagi anda para blogger sudah banyak yang tahu apa kegunaan komentar facebook di blog, yang pasti nya trafik dan juga mempermudah visitor/pengunjung blog kita berkomentar di sana karena gak semua visitor mengerti cara berkomentar, komentar facebook juga bisa membawa trafik untuk blog anda, di saat dia berkomentar sudah pasti akan otomatis komentar tersebut terlihat oleh kawan nya di beranda facebook, tidak banyak basa basi langsung saja saya akan menjelaskan cara pasang komentar facebook di blog anda yang simple dan pasti bisa, hehehee.. semoga saja ya, karena rata-rata template saya coba semua nya bisa. Berikut ini adalah cara pasang komentar facebook di blog anda

Pertama login ke blogger anda dan pilih rancangan >> Edit Html kemudian jangan lupa Centeng atau ceklist "" dan jangan lupa untuk mem-back up template yang lama nya dulu, cara nya klik "Download Template Lengkap" yang ada di atas

Kedua copas atau salin kode di bawah ini dan cari di edit html, cara mempermudah pencarian tekan CTRL bersamaan dengan F atau CTRL+F kemudian paste kode yang dibawah ini
<b:includable id='status-message'> 
Ketiga jika sudah dapat kode tersebut maka Copy kan kode di bawah ini dan pastekan di atas kode </b:includable>,  tepat nya di atas kode yang anda cari tadi. anda bisa melihat gambar nya supaya jelas
<b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>
Tepat nya seperti gambar di bawah ini :

Kemudian Simpan Template nya dan lihat hasil nya. untuk pembuktian nya bisa anda lihat blog saya ini

Keterangan :
Untuk num_posts='5' adalah banyak nya komentar yang di tampilkan di facebook dan kalau  width='500' adalah untuk melebarkan panjang nya komentar facebook, jadi anda bisa mengubah nya sesuai dengan besark nya template anda supaya bagus.

Sekian dulu kawan Cara Buat Komentar Facebook | Pasang Di Blog semoga bermanfaat bagi anda yang mencari Cara Buat Komentar Facebook | Pasang Di Blog.

Stroke Text CSS

Hello hello, siang sob... dapat Experiment menarik lagi nih :D hehee... kali ini tentang "Stroke Text" udah pernah liat Stroke text? kalau belum liat nih kaya gini nih Stroke text.







Kalau ngga salah Stoke itu adalah Outline (kalo di photoshop).
Stroke Text ternyata hanya menyatukan 4 shadow text, Fungsinya untuk membentuk bayangan di pinggir-pinggir text, sama halnya seperti border yang membuat garis di pinggir objek...
dan oke deh langsung aja cara pembuatannya.

CSS Stoke Text

#stroke{
font-family:arial black;
font-size:50px;
color: white;
text-shadow:
-5px -2px 1px #000,
-3px 3px 1px #000,
4px 3px 1px #000,
3px -3px 1px #000;
}

HTML Stroke Text

<div id='stroke'>STROKE</div>


KLIK DISINI UNTUK DEMO


Eh tapi ada lho yang lebih Rapih, ini fahmi Dapetin dari http://css-tricks.com.
nih liat dulu Gambar example nya...



Langsung saja cara pembuatannya cekidot :

CSS Stroke CSS-Trik

h1 {
font-family:Arial Black;
font-size:60px;
color: black;
text-fill-color: white;
text-stroke-width: 1px;
text-stroke-color: black;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
-moz-text-fill-color: white;
-moz-text-stroke-width: 1px;
-moz-text-stroke-color: black;
-o-text-fill-color: white;
-o-text-stroke-width: 1px;
-o-text-stroke-color: black;
}
Atau seperti ini :

Stroke Text with Text-shadow

h1 {
font-family:Arial Black;
font-size:60px;
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,  
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}


KLIK DISINI UNTUK DEMO CSS-Trick


Selesai

3D text dan Inset text

Iseng-iseng tadi bikin experiment mencoba coba hal baru, eh malah jadi 3D text dan Inset text, disini baru fahmi paham bahwa cara bikin teks 3D ternyata ga susah-susah amat. Terkadang apa yang di lihat bagus ga serumit pembuatannya dan begitu juga sebaliknya... Cuma mainin teks shadow minimal 2 Shadow, di pasin Vertikal sama Horizontal jangan lupa warna di kontrasin terus jadi deh.
Inset juga hampir sama kaya 3D cuma kalau Inset lebih mainin ke Rgba color.
Soalnya untuk mentransparankan warna...
contohnya seperti ini.

CSS Inset Text

body{
background:#C92E2E;
}
#inset{
font-family:Arial Black;
font-size:100px;
color:rgba(0, 0, 0, 0.1);
text-shadow: 3px 3px 5px #C92E2E, 0 0 0 rgba(0, 0, 0, 0.8);
letter-spacing:-10px;
text-transform:uppercase;
}

HTML Inset Text

<div id='inset'>Inset</div>

CSS 3D Text

#IW-Net{
font-family:Arial Black;
font-size:100px;
color:#A60518;
letter-spacing:-10px;
text-transform:uppercase;
text-shadow:0 6px 1px #750000, 1px 5px 10px #000;
}​

HTML 3D Text

<div id='IW-Net'>indonesia</div>




KLIK DISINI UNTUK DEMO


Cara Melangsingkan Alexa Rank

Selamat malam sobat bLogpahMi semua. Sudah gak terasa nih sudah 2 hari gak update post :). Well malam ini saya akan memberikan tutorial mengenai Cara Menaikkan Alexa Rank.
Alexa Rank atau Peringkat Alexa adalah sebuah peringkat yang di buat oleh Alexa.com untuk website atau blog berdasarkan banyaknya trafik atau kunjungan terhadap website atau blog tersebut.
Memang bagi sebagian Blogger ada yang menganggap Alexa Rank tidak perlu, tapi bagi saya pribadi Alexa Rank justru menjadi penyemangat untuk meningkatkan semangat ngeblog karena Alexa Rank mengukur kunjungan ke blog, selain itu terkadang dalam pendaftaran Blog ke iklan PPC biasanya Alexa Rank juga di gunakan sebagai bahan pertimbangan, seperti saat kita hendak mendaftar idBlogNetwork disarankan Alexa Rank blog dibawah 10 juta.
Tahukah Anda bagaimana cara untuk melangsingkan Alexa Rank ? jika belum tahu simak tips-tips berikut ya :
  1. Tingkatkan kunjungan blog Anda
    Poin pertama yang perlu di perhatikan agar Alexa Rank cepat turun adalah meningkatkan visitor ke blog, karena pada dasarnya penilaian Alexa Rank terhadap suatu blog dilihat dari traffiknya.
  2. Akses Blog yang ringan
    Loading Blog ternyata juga berpengaruh lho terhadap peringkat Alexa Rank, jika loading blog kita ringan otomatis pengunjung tidak lama menunggu untuk berkunjung ke blog kita, dan ini membuat mereka nyaman menjelajahi konten yang kita tulis.
  3. Perbanyaklah Posting
    Dengan memperbanyak posting tentu visitor akan suka dengan blog kita, apalagi jika blog kita mempunyai postingan yang bagus, tidak menutup kemungkinan visitor akan kembali mengunjungi blog kita, bahkan ikut berlangganan artikel.
    Dengan begitu kunjungan blog kita akan semakin naik dan Alexa Rank semakin langsing
  4. Pasang Widget dan Alexa Toolbar
    Pasanglah Alexa widget di blog sobat sesuai dengan tipe yang sobat sukai, maka jejak setiap pengunjung Anda bisa terekam di Alexa. Sehingga Alexa bisa mendapatkan data pengunjung website Anda dengan lebih akurat.
    Download dan install Alexa toolbar di komputer soba,trik sederhana tapi tepat dengan memasang Alexa Toolbar di browser anda karena Alexa mendapatkan data pengunjung dari Alexa toolbar yang mereka install di browser.
Itulah beberapa tips yang bisa Anda terapkan untuk melangsingkan Alexa Rank Blog Anda, Saya sendiri sudah membuktikan tips diatas memang manjur dan Alhamdulillah Alexa Rank blog ini cukup langsing di bawah 500.000 berikut ini screenshootnya :
pulauweb

Tips Daftar Id BlogNetwork

Tahukah Anda apa itu idblogNetwork ??? bagi sobat Blogger pasti sudah tidak asing lagi dengan yang namanya IBN. idblogNetwork atau yang biasa di singkat dengan IBN merupakan program iklan PPC lokal yang mempunyai nilai perclick yang cukup tinggi, pendiri IdblogNetwork adalah orang-orang yang berpengalaman
dalam dunia IT dan Digital Advertising seperti Mubarika Darmayanti (Business Director) dan Kukuh TW (Technical Director).

Beberapa hal yang ditawarkan oleh idblogNetwork untuk pengiklan adalah, jaringan blog atau blogger yang cukup luas dan profesional dimana konten yang dimiliki berkualitas serta tersegmentasi, ada tiga pilihan layanan yang ditawarkan yaitu PPP (Pay Per Click), PPA (Pay Per Action) untuk layanan berupa umpan balik berupa isian formulir, permintaan penjualan atau unduhan brosur, serta PPP (Pay Per Post) untuk layanan berupa review atas produk atau jasa dari pengiklan.

Didirikan sejak 1 Agustus 2010 IBN langsung menyedot perhatian para Blogger, tak hayal jika sampai sekarang idblogNetwork mempunyai member sebanyak 10.143 Blog.

Dengan semakin banyaknya blog yang sudah terdaftar menjadi member idblogNetwork membuat pendaftaran blog ke IBN semakin di perketat, tidak semua blog bisa masuk menjadi member idblogNetwork.

Tentu Anda juga inginkan jika blog Anda mudah di approve jadi member idblogNetwork ??? jika ya ikuti tips-tips berikut agar blog Anda mudah di terima di idblogNetwork :

  1. Usahakan Konten Anda original (tidak asal copas) dan tidak mengandung muatan SARA atau Pornografi.
    Poin pertama yang harus Anda penuhi agar mudah di approve adalah konten harus original karena hampir semua program PPC tidak menerima konten yang asal copas.
  2. Blog Anda harus selalu pada performa terbaik (tidak down) hal ini bertujuan agar saat team reveiw idblognetwork mengunjungi blog Anda blog Anda bisa diakses dengan mudah
  3. Gunakan blog Anda sendiri, karena idblognetwork tidak menerima Blog yang di daftarkan itu milik orang lain.
  4. Provider blog yang Anda gunakan harus memperbolehkan pemasangan script iklan, jangan sampai Anda mendaftarkan menggunakan domain wordpress[dot]com karena wordpress[dot]com tidak memperbolehkan pemasangan script iklan.
  5. Langsingkan Alexa Rank Blog Anda, menurut saya ranking Alexa Rank juga memengaruhi cepat lambatnya blog untuk di approve.Untuk mengecek peringkat Alexa Rank blog anda kunjungi link berikut : Cek Alexa Rank

Itulah beberapa tips yang bisa anda terapkan agar Blog yang Anda daftarkan ke idblogNetwork cepat di Approve.

Semoga Bermanfaat :D

Keep Smile And Happy Blogging

Cara Meningkatkan Like Fanspage Facebook

Banyak cara yang bisa dilakukan untuk meningkatkan traffic kunjungan blog salah satunya dengan mempromosikanya ke jejaring social. Tidak dipungkiri lagi seiring berkembangnya teknologi jejaring social mempunyai peran yang sangat penting termasuk juga dalam bidang mempromosikan website.

Facebook sebagai jejaring sosial yang terbesar saat ini juga menyediakan layanan yang berfungsi untuk memmpromosikan blog fasilitas itu di beri nama fanspage facebook dengan fanspage facebook sobat bisa mempromosikan website sepuas-puasnya.

Namun tahukah Anda bagimana cara mempromosikan fanspage facebook agar banyak di like orang ??? Berikut ini akan saya paparkan bagaimana cara menambah like fanspage facebook dalam waktu yang cukup singkat, dalam meningkatkan like fanspage facebook ini saya memakai jasa website liketerus[dot]com, cara ini saya temukan ketika kemarin mempromosikan usaha jasa pembuatan websiteku di lakubgt.com.

Anda tentu juga pengenkan jika fanspage facebook Anda di like orang banyak ??? ikuti step-step berikut untuk meningkatkan like fanspage facebook :

  1. Langkah yang pertama adalah mengunjungi website liketerus[dot]com
  2. Jika Anda sudah mempunyai akun di liketerus langsung saja signin menggunakan akun Anda, jika belum punya akun Anda bisa mendaftar dulu disini
  3. Setelah Anda login anda akan masuk ke halaman home, untuk melakukan konfigurasi masuklah ke halaman facebook like, pindah ke tab tambah facebook page isi form yang tersedia seperti gambar berikut :
    cara meningkatkan like Fanspage Facebook
    Ket :
    Page title : isi dengan page title fanspage facebook Anda
    page url : isi dengan url fanspage facebook Anda
    points : di situ ada pilihan 1-5 disini Anda bisa memilih sesuai poin yang ingin Anda berikan kepada orang lain yang menyukai fanspage Anda.
    Setelah Anda mengisinya dengan benar klik tombol add maka dengan otomatis fanspage facebook Anda sudah masuk ke direktori fanspage facebook liketerus.com



  4. Anda sudah selesai menambahkan fanspage facebook ke liketerus.com, untuk selanjutnya pindah ke tab facebook tambah poin, lalu Anda tinggal menyukai fanspage facebook orang lain untuk menambah poin Anda, namun poin ini terbatas jika Anda ingin menambah poin Anda harus membeli poin.


Lalu bagaimanakah cara kerja liketerus.com ??? liketerus menerapkan sistem kerja sebagai berikut : "Anda menambahkan URL Facebook fan page di liketerus.com maka pengguna lain dapat melihatnya dan me "Like". Ada sistem poin di mana Anda akan mengatur berapa banyak poin yang Anda ingin berikan ke orang lain jika mereka menyukai halaman Anda. Hal yang sama, Anda akan menerima poin dari pengguna lain ketika me "Like" halaman mereka. Saatnya menambah Like Facebook fan page Anda!"

Itulah dia salah satu cara meningkatkan like fanspage facebook secara cepat, untuk hasilnya saya belum tahu entah itu benar atau salah karena saya sendiri baru mencobanya, Silahkan Anda membuktikan sendiri tips ini manjur atau tidak :D

Cara Mendaftarkan Blog ke Feedburner Google

Selamat Malam sobat semua, mungkin pada postingan kali ini sobat akan melihat perbedaan dari posting–posting blogpahmi sebelumnya, Lho kok bisa beda memang yang beda apanya ??? udah deh jangan terlalu banyak mikir tar cepet Tua lho :D, tak kasih bocoranya nih : coba deh jika sobat cermati dan resapi ada perbedaan gak  ragkaian  kata-kata antara postingan kali ini dengan posting-posting blogpahmi sebelumya ??? aku yakin pasti ada karena postigan kali ini yang menulis bukan Fahmi Setiawan.
Lalu who i'm I ??? suatu kehormatan bagi saya ketika mendapat tawaran dari Fahmi buat ikut yumbang tutorial di blogpahmi. Sobat bisa melihat profil lengkapku disini.
Biasanya blogpahmi memberikan tutorial-tutorial yang berbau blogazine , tapi tidak untuk malam ini. Pada kesempata kali ini saya akan memberikan tutorial Cara Medaftarka Blog ke Feedburner Google.
Sobat udah tau kan apa itu Feedburner Google ??? itu lho sebuah tool dari google yang memiliki kemampuan handal dalam layanan diantaranya :
  1. Headline Animator yang berfungsi untuk memasang animasi di atas blog kita yang menyajikan isi posting blog dalam ringkasan, hal ini dapat setting sesuai keinginan kita.
  2. Email Subcription, untuk memasang subcription yang ada pada blog jika menghendaki agar pengunjung blog bisa berlangganan dengan posting yang ada.
  3. Sosiallisasi yaitu layanan feed bagi blog agar dapat berinteraksi dengan layanan situs sosial seperti facebook atau twitter.Feed count layanan feed untuk memamerkan sirkulasi blog dengan para pengunjung.
Selain itu masih banyak lagi layanan-layanan feedburner dari google.
Lalu bagaimanakah cara mendaftarkan blog kita ke feedburner googe ???, ikuti langkah-langkah berikut untuk medaftarkan blog ke feedburner google :
  1. Kunjugi url berikut untuk masuk ke feedburer http://feedburner.google.com/
    Masuk megguakan akun gmail Anda jika belum punya Anda  bisa  membuatnya disini.
  2. Setelah masuk isikan url feed anda  pada form yang tersedia  (biasaya berformat seperti ini http://domainanda.com/feed)  jangan lupa cek tanda centang pada piihan I'm a podcaster Lihat gamber berikut agar lebih jelas :
    Feeds
  3. Setelah itu pilih sumber untuk feedburner kita nanti,  pilih yag dari blog saja, berikut ini screenshootnya :
    Feeds
  4. Next step masukkan title feed dan feed address, biarkan saja default yang muncul saat kita proses pembuatan, lihat contohnya :
    Feeds
  5. Setelah proses ini tinggal klik Next dan Next lagi, jangan lupa pada step terakhir  centang semua fasilitas yang ada.
    seperti ini nih SSnya :
    Feeds
  6. Selesai deh, blog anda sekarang sudah terintegrasi dengan Feedburner google.
Sekian dulu tutorial dari saya, untuk fungsi-fungsi feedburner dan cara mengaktifkanya mugkin akan saya bahas next time, so pantengin terus ya blogpahmi ! jangan pernah pindah channel :D
Semoga bermafaat :D

Menu Pelangi

Selamat Malam sob, malem ini fahmi mau memberikan tutorial Nav Menu yang sangat sederhana ini hasil experiment, heheheee... sengaja ga di kasih Screen shoot sob, tapi ada kok demo nya :D Tapi demo nya nanti belakangan :p . Ok langsung saja.

CSS :
body{margin:40px;}

nav{ font-family:arial; font-size:15px; color:#000; }

nav a{ width:80px; position: relative; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

nav a:hover{ background: #eee; }

nav ul{ display:block; }

nav li{ list-style:none; padding:0; display:inline; margin-right:20px; }

ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }

ol ol{ margin: 0 0 0 2em; }

nav a:hover:before{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); box-shadow:0 0 10px #000; }

nav a:before{ color:#fff; content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #FA0132; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

.yellow a:before{ background:#FAD801; }

.green a:before{ background:#4BFA01; }

.blue a:before{ background:#01A2FA; }

.purple a:before{ background:#FA01DD; }

.yell-green a:before{ background:#A2FA01; }​

HTML :
<nav>
<ul>
<ol>
<li><a href='#'>Homepage</a></li>
<li class='yellow'><a href='#'>About</a></li>
<li class='green'><a href='#'>Blog</a></li>
<li class='blue'><a href='#'>Contact</a></li>
<li class='purple'><a href='#'>Article</a></li>
<li class='yell-green'><a href='#'>Follow me</a></li>
</ul>
</ol>
</nav>

Demo

Nav Menu Fixed Transition

Iseng-iseng tadi sore bikin experiment menu fixed hehehee... sekali-kali bikin artikel tentang tutorial, ya meski tutorialnya terlalu gampang itu juga karena ilmu saya masih cetek :p. Oke langsung aja cekidot :D

nav{ font-family:arial; font-size:15px; color:#000; background:#8400FF; padding-top:24px; padding-left:20px; border-bottom:5px solid #000; width:100%; height:10%; position:fixed; top:0; left:0; z-index:999; } nav a{ color:#000; text-decoration:none; -webkit-transition:all 900ms linear; -moz-transition:all 900ms linear; -o-transition:all 900ms linear; -ms-transition:all 900ms linear; transition:all 900ms linear; } nav ul{ display:block; } nav li{ list-style:none; padding:0; display:inline; margin-right:20px; } nav a:hover{ color:#8400FF; background:#000; padding:24px; -webkit-transition:all 900ms linear; -moz-transition:all 900ms linear; -o-transition:all 900ms linear; -ms-transition:all 900ms linear; transition:all 900ms linear; }

Dan cara pemanggilannya sebagai berikut :D :

<nav>
<ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
</ul>
</nav>

Demo

CSS3 Button Facebook

CSS3 Facebook Buttons

The easiest way to make people think: "Wow, this app must be as good as Facebook!".

Buttons

To create the default "button" add a class of uibutton to any appropriate element. To create the blue variant include an additional class confirm. To create the green variant include an additional class special.

<a class="uibutton" href="#">Button</a>
<button class="uibutton" type="submit">Button</button>
<input class="uibutton" type="submit" value="Button">

Change picture

Request an invitation

Larger buttons

To create larger buttons inclue an additional class of large.

<a class="uibutton large" href="#">Search</a>

Search

Share

Request an invitation

The CSS

The CSS this Buttonuibutton-group.


/*BUTTON */
.uibutton { 
position: relative; 
z-index: 1;
overflow: visible; 
display: inline-block; 
padding: 0.3em 0.6em 0.375em; 
border: 1px solid #999; 
border-bottom-color: #888;
margin: 0;
text-decoration: none; 
text-align: center;
font: bold 11px/normal '
lucida grande', tahoma, verdana, arial, sans-serif; 
white-space: nowrap; 
cursor: pointer; 
/* outline: none; */
color: #333; 
background-color: #eee;
background-image: -webkit-gradient
(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#f5f6f6', 
EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1; 
*display: inline; 
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 0;
border: 0;
}
/*Icons */
.uibutton.icon:before {
content: "";
position: relative; 
top: 1px; 
float:left;
width: 10px; 
height: 12px; 
margin: 0 0.5em 0 0; 
background: url(fb-icons.png) 99px 99px no-repeat;
}
.uibutton.edit:before  { background-position: 0 0; }
.uibutton.add:before  { background-position: -10px 0; }
.uibutton.secure:before  { background-position: -20px 0; }
.uibutton.prev:before  { background-position: -30px 0; }
.uibutton.next:before  { float:right; 
margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }
/* BUTTON EXTENSIONS */
/* Large */
.uibutton.large {
font-size:13px;
}
/* Submit, etc */
.uibutton.confirm {
border-color: #29447E #29447E #1A356E;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient
(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#637bad', 
EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* Special */
.uibutton.special {
border-color: #3b6e22 #3b6e22 #2c5115;
color: #fff;
background-color: #69A74E;
background-image: -webkit-gradient
(linear, 0 0, 0 100%, from(#75ae5c), to(#67a54b));
background-image: -moz-linear-gradient
(#75ae5c, #67a54b);
background-image: -o-linear-gradient
(#75ae5c, #67a54b);
background-image: linear-gradient
(#75ae5c, #67a54b);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#75ae5c', 
EndColorStr='#67a54b'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 
inset 0 1px 0 #98c286;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 
inset 0 1px 0 #98c286;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 
inset 0 1px 0 #98c286;
}
.uibutton.special:active {
border-color: #3B6E22;
background: #609946;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*BUTTON GROUPS */
.uibutton-group {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
/* IE hacks */
zoom: 1; 
*display: inline; 
}
.uibutton + .uibutton,
.uibutton + .uibutton-group,
.uibutton-group + .uibutton,
.uibutton-group + .uibutton-group {
margin-left: 3px;
}
.uibutton-group li {
float: left;
padding: 0;
margin: 0;
}
.uibutton-group .uibutton {
float: left;
margin-left: -1px; 
}
.uibutton-group .uibutton:hover,
.uibutton-group .uibutton:focus,
.uibutton-group .uibutton:active {
z-index:2;
}
.uibutton-group > .uibutton:first-child,
.uibutton-group li:first-child .uibutton { 
margin-left: 0; 
}
/* BUTTON CONTAINER */
.uibutton-toolbar {
padding: 6px;
border-top: 1px solid #ccc;
background: #f2f2f2;
}
.uibutton-toolbar .uibutton,
.uibutton-toolbar .uibutton-group {
vertical-align: bottom;
}

Grouped buttons

To created grouped buttons wrap them in an element, or use a list, given the class uibutton-group.

<div class="uibutton-group">
<a class="uibutton" href="#">Dashboard</a>
<a class="uibutton" href="#">Inbox</a>
<a class="uibutton" href="#">Account</a>
<a class="uibutton" href="#">Logout</a>
</div>
<ul class="uibutton-group">
<li><a class="uibutton" href="#">Dashboard</a></li>
<li><a class="uibutton" href="#">Inbox</a></li>
<li><a class="uibutton" href="#">Account</a></li>
<li><a class="uibutton" href="#">Logout</a></li>
</ul>

Mixed groups

To display a toolbar of buttons and grouped buttons, use a wrapping element given the class uibutton-toolbar.

<div class="uibutton-toolbar">
<a class="uibutton" href="#">Mark as unread</a>
<div class="uibutton-group">
<a class="uibutton" href="#">Report spam</a>
<a class="uibutton" href="#">Delete</a>
</div>
<a class="uibutton" href="#">Unsubscribe</a>
</div>

Buttons with icons

A range of icons can be added (only for links and buttons) by adding a class of icon and any one of the provided icon classes:

<a class="uibutton icon add" href="#">New message</a>
New message
Class Example
.edit Edit post
.add Add a photo
.secure Private account
.prev
.next

Browser compatibility

Full support: Firefox 3.5+, Google Chrome, Safari 4+, IE 9+, Opera 11.10+.

Note: Some CSS3 enhancements are not supported in older versions of Opera and IE. The use of icons is not supported in IE 6 or IE 7.