Muhammad Wafi

Deploy HTML Web Pages with Xampp

mwafiez10@yahoo.co.id (Waff) — Sat, 1 Mar 2014 01:48:00 +0700

If you want a great site, you’ve got to test. After you’ve worked on a site for even a few weeks, you can’t see it freshly anymore. You know too much. The only way to find out if it really works is to test it.

Menurut pengertian saya deployment adalah sebuah proses untuk mempersiapkan segala sesuatu untuk sebuah pekerjaan, artinya ialah dalam mengembangkan aplikasi atau semacamnya perlu ditinjau kembali apakah aplikasi itu layak ditampilkan untuk semua orang ataukah masih ada yang perlu dibenahi.

Seperti halnya dalam pemrograman web setelah selesai membuat sebuah halaman web sebaiknya kita harus melakukan deployment terlebih dahulu agar mencegah hal-hal yang tidak diinginkan terjadi. Untuk itulah saya menulis tutorial ini.

Hal pertama yang harus disiapkan adalah sebuah aplikasi simulasi pengembangan web yaitu xampp anda dapat mengunduhnya secara gratis pada http://www.apachefriends.org/ dan untuk cara menginstallnya silahkan searching di google banyak tutorial yang berkaitan dengan hal ini dan cara mengatasi apabila terdapat kesalahan dalam menjalankannya.

Setelah mendapati komputer anda telah terinstal xampp kemudian jalankan program tersebut!>

Running Xampp

Kemudian jalankan Apache dan MySQL, seperti pada gambar dibawah ini.

Starting Apache and MySQL

Persiapkan file-file yang akan di-deploy (e.g: HTML, CSS, Jpg, etc...) dalam satu folder, dalam contoh ini folder diberi nama biodata karena halaman yang akan ditampilkan berupa halaman tentang biodata atau curiculum vitae.

Ganti nama file HTML anda menjadi index.html. Karena file dengan nama index inilah yang akan dijalankan oleh xampp tersebut.

Salin folder "biodata" tersebut kedalam folder htdocs (C:/xampp/htdocs)

Buka Peramban Web Browser anda (Mozilla, Chrome, Safari, etc...)
Ketikkan pada addressbar http://127.0.0.1:6060/biodata atau http://localhost:6060/biodata

Preview

Note :

127.0.0.1 merupakan url dari localhost itu sendiri.
6060 ialah port yang digunakan pada xampp. Sesuaikan dengan port pada xampp anda (lihat gambar)

biodata adalah nama folder yang telah dipersiapkan sebelumnya

Tips : Better Post Title for SEO

mwafiez10@yahoo.co.id (Waff) — Thu, 2 May 2013 03:29:00 +0700

See the Demo

One of the simplest ways you can improve your Blogger site's search engine optimization (SEO), but also the way that bookmarks display for your users is to change the way the Title of your blog is handled.(source : blogxpertise)

Umumnya xhtml pada judul blog anda seperti ini :

<title><data:blog.pageTitle/></title>

Dan hasil yang akan ditampilkan adalah "Judul Blog Anda" untuk homepage, diikuti dengan "Judul Blog Anda : Nama Halaman" untuk semua halaman lainnya. Hal ini memiliki sejumlah kesalahan, yaitu:

Judul situs Anda tidak memiliki banyak deskripsi ketika ditampilkan di mesin pencari dengan potensi pemirsa
Kurangnya kata kunci dan frase dalam judul mengarah ke peringkat kata kunci mesin pencari miskin

Dalam bookmark dan link judul halaman yang baik akan ditempatkan setelah nama situs tersebut, jadi jika seseorang memiliki beberapa link dari situs Anda, mereka semua mungkin terlihat sama dalam daftar yang terpotong pada ukuran tertentu. Anda dapat merubah itu semua dengan menambahkan sedikit potongan code dibawah ini :

Code

<title/>
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <data:blog.title/> : DESKRIPSI BLOG ANDA
 <b:else/>

  <data:blog.pageName/> : <data:blog.title/>

 </b:if>
</title/>

See the Demo

http://www.blogxpertise.com/2012/03/better-titles-for-your-article-posts.html

Tips : Lazy Loading Images

mwafiez10@yahoo.co.id (Waff) — Thu, 2 May 2013 00:55:00 +0700

Images are one of the important factor that affects blog load time.So, reduce your blog Images load time now.

Lazy Load adalah plugin jQuery yang hanya akan mengakses gambar yang terlihat dari halaman web saja, sehingga dapat meningkatkan waktu loading halaman blog anda. Gambar yang berada di luar daerah dari tampilan beranda akan dimuat apabila user menggulung (Scroll) layar ke bawah, widget ini benar-benar akan mengurangi 50% waktu loading halaman anda.

Taruh kode ini diatas </body> :

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0ML7l-8jyEbrxd3pDG6PCtPKxEs4g_tgf2qiMefMDpDF7sgGA-Ttm9BcwmYCi0vNM0UIq508sdzJHiPjTWVjrtZcQtxxKz5LoIH2bKpA-A5SJw27p1kbk7e5-vRrSwZGGalgghZDChp8/s1600/greys.gif"});
      });
  </script>

Script ini hanya akan bekerja pada area postingan pada blog anda, jika anda ingin menempatkan efek lazy load ini pada bagian sidebar anda maka cobalah script yang satu ini.

Kode untuk menempatkan efek lazy load ini pada bagian sidebar :

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://stylifyyourblog1.googlecode.com/svn/trunk/lazyload.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
      $(function() {
          $(".post-outer img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0ML7l-8jyEbrxd3pDG6PCtPKxEs4g_tgf2qiMefMDpDF7sgGA-Ttm9BcwmYCi0vNM0UIq508sdzJHiPjTWVjrtZcQtxxKz5LoIH2bKpA-A5SJw27p1kbk7e5-vRrSwZGGalgghZDChp8/s1600/greys.gif"});
      });
  </script>

Note :

Jika code jquery 1.6.2 diatas sudah ada di blog anda maka tidak usah disertakan lagi.
Anda bisa mengganti gambar pengganti yang sudah saya tandai diatas

http://www.stylifyyourblog.com/2011/10/integrating-lazy-load-into-blogger.html

Tips : Font Sizing

mwafiez10@yahoo.co.id (Waff) — Sun, 28 Apr 2013 16:37:00 +0700

Determining a unit of measurement to size our text can be a topic of heated debate. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable. (source : snook.ca)

Pertama - tama ada dua teknik utama yang biasanya digunakan dalam menentukan ukuran teks dalam sebuah website. yaitu :

Menggunakan px
Menggunakan em

Mari kita tinjau dua pendekatan.

Sizing with px

Pada pertama kali pembuatan blog, saya menggunakan piksel (px) untuk ukuran teks. Hal ini dapat diandalkan karena konsisten. Sayangnya, pengguna Internet Explorer bahkan dalam IE9 tidak memiliki kemampuan untuk mengubah ukuran teks menggunakan fungsi browser memperbesar atau memperkecil ukuran font.

Bagi orang-orang yang sangat peduli dengan situs web atau blog mereka, ini mungkin akan menjadi masalah besar. Versi terbaru dari IE sudah meliputi fungsi zooming, yang dapat meningkatkan ukuran dari segala sesuatu di halaman yang juga sudah tersedia di hampir semua browser lainnya. Hal ini telah membantu mengurangi masalah ini.

Sizing with em

Seluruh ketidakmampuan untuk mengubah ukuran teks itu dalam IE telah menjadi beban yang berkelanjutan. Untuk menyiasati itu, kita dapat menggunakan em unit.

Teknik ini memodifikasi dasar font-size pada body dengan menggunakan persentase (%). Hal Ini dapat menyesuaikan ukuran, sehingga 1em sama dengan 10px, bukan 16px (default) atau berapapun itu. Untuk mengatur ukuran font-setara dengan 14px, set ke 1.4em.

Mari kita lihat contoh dibawah ini :

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

Masalah dengan ukuran font yang em-based adalah bahwa senyawa ukuran font. Sebuah list dalam list ukurannya tidak menjadi 14px, tetapi menjadi 20px. Untuk list dalam list lain yang lebih banyak maka ukurannya menjadi lebih besar, yaitu 27px. Jadi bagaimana untuk menyelesaikan masalah ini..?

Problem Solved

Untuk menyelesaikan masalah ukuran font yang digunakan dalam elemen list dalam list menjadi lebih besar kita perlu untuk mendefinisikan ukuran elemen-elemen anak dari elemen list.

Mari kita lihat potongan kode berikut :

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

Tetapi hal ini dapat membuat kita menjadi repot dalam hal mendefinisikan ukuran font. Lantas apa yang harus kita lakukan?

Sizing with rem

CSS3 memperkenalkan beberapa unit baru seperti artikel saya sebelumnya yang berjudul CSS3 Introduction - What's New?, termasuk unit rem, yang merupakan singkatan dari "root em". Mari kita lihat bagaimana rem bekerja.

Unit em relatif terhadap ukuran font yang menjadi parent, namun dapat menyebabkan masalah penggabungan tadi. Unit rem relatif memacu ke root atau elemen-html. Itu berarti bahwa kita dapat mendefinisikan ukuran font tunggal pada elemen html dan mendefinisikan semua unit rem menjadi persentase.

Mari kita lihat contoh ini :

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

Tetapi apakah browser dapat mendukung penggunaan rem ini? Anda mungkin akan terkejut bahwa semua browser mendukung adanya rem ini seperti halnya : Safari 5, Chrome, Firefox 3.6 +,Opera 11.60 +, dan bahkan Internet Explorer 9. Bahkan dalam IE9 mendukung text-resize ketika didefinisikan menggunakan rem. Apa yang dapat kita lakukan untuk browser yang tidak mendukung unit rem? Kita dapat menentukan ukuran kembali menggunakan px, Versi lama dari Internet Explorer masih tidak mampu untuk mengubah ukuran teks. Untuk melakukannya, pertama tentukan ukuran font menggunakan unit px dan kemudian menggunakan rem.

Example

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Dan sekarang, kita memiliki teks yang konsisten dan dapat diprediksi ukurannya di semua browser utama.

Sizing with %

Persentase merupakan satuan yang tidak dihitung berdasarkan ukuran elemen itu sendiri, melainkan dihitung berdasarkan perbandingan ukuran elemen tersebut terhadap ukuran induknya.

Elemen-elemen heading (h1,h2,h3 ...) sangat disarankan untuk menggunakan persentase (%) sebagai acuan untuk pengukuran font tersebut. Walaupun beberapa ada juga yang menggunakan satuan em. Sebenarnya itu tidak masalah, karena baik em maupun % keduanya sama-sama merupakan satuan relatif. Yang penting cobalah untuk menghilangkan kebiasaan menggunakan satuan px dalam menentukan ukuran elemen heading.

Example

Dengan menggunakan satuan px

body {
  font-size:13px;
  font-family:Arial,Sans-Serif;
}
h1 {font-size:28px}
h2 {font-size:25px}
h3 {font-size:22px}
h4 {font-size:19px}
h5 {font-size:16px}
h6 {font-size:13px}

Pola penyusutan teks akan berbeda jika Anda menggunakan satuan % saat menentukan ukuran judul artikel. Saat menggunakan satuan %, maka ukuran judul-judul artikel akan menyesuaikan diri berdasarkan perbandingan ukuran teks dasar saat itu, yaitu 13px (Contoh: 200% dari 13px adalah 26px):

Example

Dengan menggunakan satuan %

body {
  font-size:13px;
  font-family:Arial,Sans-Serif;
}
h1 {font-size:200%} /* =26px */
h2 {font-size:180%} /* =22.4px */
h3 {font-size:160%} /* =20.8px */
h4 {font-size:140%} /* =18.2px */
h5 {font-size:120%} /* =15.6px */
h6 {font-size:100%} /* =13px */

http://snook.ca/archives/html_and_css/font-size-with-rem
http://clagnut.com/blog/348/
http://www.dte.web.id/2013/03/satuan-px-em-dan-pada-font.html

Tips : Writing Better CSS Code

mwafiez10@yahoo.co.id (Waff) — Sun, 28 Apr 2013 05:36:00 +0700

The CSS are good to styling your website, but do you know about how to writing a better css code script?, i sure that you can do it better.

Sebelum membaca artikel ini apakah kalian sudah tau mengenai menulis code CSS yang benar pada sebuah website atau blog? mungkin sebagian besar belum begitu tahu bagaimana melakukannya. berikut ini adalah beberapa tips untuk menulis CSS yang baik dan benar.

1. CSS Reset

Hal ini berguna untuk menghapus padding dan margin pada semua elemen web atau blog anda. Apakah sebelumnya anda sudah pernah menggunakan Eric Meyer Rest, YUI Reset, atau anda lebih suka mengatur ulang kustom style pada website anda?

Dibawah ini adalah contoh penulisan css reset pada sebuah stylesheet.

CSS Code Reset

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,  
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Jangan menulis css reset seperti ini !

* { margin: 0; padding: 0; }

Why ?

Tanda (*) merujuk kepada semua elemen pada blog atau website anda selain itu dibutuhkan banyak waktu untuk memprosesnya, dan apa yang anda pikir ketika tombol radio () dan checkbox [] dihapus padding dan margin nya ? tentu akan menjadi berantakan bukan ?.

Elemen form terkadang melakukan hal yang tidak diduga ketika anda menulis css reset menggunakan tanda (*) tadi. jadi akan lebih baik jika anda meninggalkannya.

2. Menulis secara terurut / Alphabetize

Dalam hal ini cara manakah yang lebih mudah apabila kalian menulis deskripsi css menggunakan cara yang terurut atau dengan cara random/tidak beraturan ? mungkin kalian menyepelekan hal ini. Tapi hal ini membantu anda menghemat waktu untuk menemukan properti tertentu yang anda tulis dalam css.

Dibwah ini merupakan contoh penulisan css yang tidak terurut dan yang terurut sesuai abjad.

Random

header h1 {  
    z-index: 101;  //z
    color: #000;  //c
    position: relative;  //p
    line-height: 24px;  //l
    margin-right: 48px;  //m
    border-bottom: 1px solid #dedede;  //b
    font-size: 18px;  //f
}

Bandingkan dengan yang satu ini :

Alphabetizing

header h1 {  
    border-bottom: 1px solid #dedede;  //b
    color: #000;  //c
    font-size: 18px; //f 
    line-height: 24px;  //l
    margin-right: 48px;  //m
    position: relative;  //p
    z-index: 101;  //z
}

Jadi cara manakah yang lebih anda suka ?.

3. Pengelompokkan / Organization

/*****Reset*****/  
Remove margin and padding from elements  
  
/*****Basic Elements*****/  
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.  
  
/*****Generic Classes*****/  
Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc    
  
/*****Basic Layout*****/  
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site  
  
/*****Header*****/  
Define all elements in the header  
  
/*****Content*****/  
Define all elements in the content area  
  
/*****Footer*****/  
Define all elements in the footer  
  
/*****Etc*****/  
Continue to define the other sections one by one

Dengan melihat kode diatas anda lebih mudah untuk menemukan item atau elemen yang anda cari, dan hal ini juga dapat mempersingkat waktu dalam pengeditan kembali kode tersebut. Anda dapat menggunakan komentar untuk pengelompokkan item tersebut.

4. Consistency

Menurut pendapat Saya secara pribadi, Jika Selector memiliki lebih dari 3 properti, saya menulisnya dalam beberapa baris, namun apabila tidak lebih dari itu saya hanya akan menggunakan satu baris.

Example

div#header { float: left; width: 100%; }  
div#header div.column {  
    border-right: 1px solid #ccc;  
    float: rightright;  
    margin-right: 50px;  
    padding: 10px;  
    width: 300px;  
}  
div#header h1 { float: left; position: relative; width: 250px; }

5. CSS Shorthand

Manfaatkan penulisan CSS yang singkat untuk menulis kode CSS dengan cepat dan mengurangi ukuran file. Notasi singkat dapat digunakan untuk margin, padding, border, font, background dan juga untuk color.

Long code writing

li{   
    font-family:Arial, Helvetica, sans-serif;  
    font-size: 1.2em;  
    line-height: 1.4em;  
    padding-top:5px;  
    padding-bottom:10px;  
    padding-left:5px;  
}

Using Shorthand Properties

li{   
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;   
    padding:5px 0 10px 5px;  
}

6. Using External Stylesheet

Ini merupakan cara yang bagus untuk memisahkan code css yang muncul pada tampilan. Tempatkan semua kode CSS Anda ke eksternal stylesheet dengan menggunakan <link> untuk referensi stylesheet dalam halaman web. Dengan menempatkan CSS ke file eksternal, Anda dapat dengan mudah memperbarui tampilan pada web anda.

Example

<style type="text/css" >  
    #container{ .. }  
    #footer{ .. }  
</style>

Setelah menempatkan file ke eksternal maka akan menjadi seperti ini :

<link rel="stylesheet" type="text/css" href="css/styles.css" />

8. Gabungkan Beberapa Selector Sekaligus

Dengan menggabungkannya maka penulisan stylesheet anda tidak akan memakan waktu yang lama, dan juga code akan terlihat lebih simple dan tidak mempengaruhi berat loading halaman.

Bad

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Bandingkan dengan yang ini :

Good

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

9. CSS Inheritance

Jika beberapa elemen anak dari elemen induk menggunakan style yang sama pada halaman web Anda, akan lebih baik untuk hanya mendefinisikan elemen induk nya saja dan biarkan CSS inheritance melakukannya. Anda akan dapat dengan mudah memperbarui kode kemudian dan juga akan mengurangi ukuran file CSS.

Berikut Contohnya :

Bad

#container li{ font-family:Georgia, serif; }  
#container p{ font-family:Georgia, serif; }  
#container h1{font-family:Georgia, serif; }

Good

#container{ font-family:Georgia, serif; }

10. Compress your CSS

Setelah Anda siap untuk menyebarkan proyek desain web anda, kompres kode CSS Anda menggunakan alat bantu seperti CSS Compressor untuk mengurangi ukuran file dan meningkatkan waktu loading halaman web.

Kesimpulan

Ini hanya beberapa tips yang saya terapkan dalam penulisan css jika anda menggunakan cara lain yang lebih efektif ada baiknya anda membagikan cara itu pada kami semua. Sehingga lebih banyak opsi dalam menulis css yang baik.

http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/
http://webdeveloperplus.com/css/tips-to-write-better-css-code/

CSS3 Introduction - What's New?

mwafiez10@yahoo.co.id (Waff) — Sat, 27 Apr 2013 18:32:00 +0700

Cascading Style Sheets, commonly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. Put simply, CSS handles the look and feel part of a web page or a whole website. and the the latest standard for CSS is CSS3(source : css3.com)

Beberapa waktu yang lalu saya memposting artikel pengenalan tentang Mengenal Dasar-dasar CSS #1 dan kali ini saya akan memberitahukan kepada sobat blogger semua tentang fitur baru CSS3, meskipun sudah agak lama sejak CSS3 ini resmi dirilis.

History...

CSS2 muncul kembali pada tahun 1998 dan sejak itu banyak yang telah terjadi di internet. Yang dibuat hanya untuk revisi ialah pada tahun 2011, CSS2.1, namun para ahli mengatakan itu hanya masalah waktu sampai CSS3 seharusnya sudah diresmikan, karena fitur yang datang akan menjawab semua kebutuhan Web designer & Developer.

Walaupun kedengarannya seperti ada perbedaan besar antara CSS2 dan CSS3 (yang mungkin cukup benar), semua browser modern saat ini cukup cepat untuk mengadopsi tambahan-tambahan baru dari keluarga W3C. Semua browser besar mendukung fitur CSS3 yang saat ini telah tersedia. Seperti dengan HTML5, Konsorsium masih menganggap CSS3 berada di bawah pembangunan berkelanjutan dan sangat tidak mungkin untuk mendapatkan versi final.

Different...

Perbedaan terbesar antara CSS2 dan CSS3 adalah bahwa CSS3 telah dibagi menjadi beberapa bagian yang berbeda, yang disebut modul. Masing-masing modul membuat jalan itu melalui W3C dalam berbagai tahap proses rekomendasi. CSS2 diserahkan sebagai dokumen tunggal dengan semua informasi Cascading Style Sheets di dalamnya. Karena masing-masing modul yang sedang dikerjakan secara individual, kita memiliki jangkauan yang lebih luas dari browser dukungan untuk CSS3 modul. Seperti halnya spesifikasi baru, Namun ketika kita berbicara tentang modul, kita akan mendapatkan jumlahnya lebih dari lima puluh, namun empat di antaranya telah diterbitkan sebagai rekomendasi formal. yang terdiri dari :

Media Queries (diterbitkan tahun 2012)
Namespaces (diterbitkan tahun 2011)
Selectors Level 3 (diterbitkan tahun 2011)
Color (diterbitkan tahun 2011)

Media Queries

Media Queries mungkin juga menjadi tambahan yang paling penting untuk CSS. Apa yang dilakukan adalah sederhana, yaitu memungkinkan kondisi tertentu yang harus diterapkan untuk stylesheet yang berbeda, membuat website menjadi fixed atau fluid dan cocok untuk semua jenis ukuran layar. Media queries memungkinkan pengembang untuk menyesuaikan dengan resolusi yang berbeda tanpa harus mengubah atau menghapus konten.

Responsive layout using @media queries

Media queries bekerja sangat mudah namun anda diharuskan untuk mengatur lebih banyak lagi stylesheetnya. Mari kita lihat contoh di bawah ini pada beberapa baris kode.

@media screen and (max-width: 600px) {
    background: #FFF;
}

Dengan melihat code media queries yang di atas, Anda hanya akan merubah style untuk layar dengan lebar maksimum 600px. Dalam contoh di atas, semua layar dengan lebar maksimum 600px akan menampilkan latar belakang putih. Namun, max-width bukanlah satu-satunya kondisi yang dapat diterapkan ke stylesheet. Anda dapat menggunakan max-device-width juga (yang merupakan resolusi layar, max-width yang merupakan area tampilan).

Anda juga dapat menggunakan min bukannya max, tetapi Anda juga dapat menggabungkan dua kondisi, seperti pada contoh di bawah, yang hanya akan berlaku untuk layar dengan area tampilan antara 600px dan 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
    background: #FFF;
}

CSS3 memiliki beberapa stylesheet standar untuk perangkat portabel, seperti iPhone atau iPad, yang dapat Anda lihat di bawah :

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

Dan ini :

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>

Seperti yang Anda lihat di atas, media queries sangat berguna ketika seorang developer harus membuat fluid grid bekerja pada perangkat yang berbeda dengan ukuran layar yang berbeda.

Border

Beberapa hal penting lainnya dari CSS3 adalah, misalnya, border. CSS3 sebenarnya telah memperkenalkan rounded border, yang merupakan bantuan besar bagi desainer dan developer. Namun, banyak dari fitur ini tidak bekerja dalam versi Internet Explorer, tapi ini bukan sesuatu yang baru bagi kita, kita pernah mendengar itu sebelumnya. Satu-satunya kode yang Anda butuhkan untuk menambahkan stylesheet (dalam kelas khusus) adalah sesuatu yang mirip dengan :

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #446CB3;

Text Shadows

Seperti yang Anda lihat, jauh lebih mudah daripada sebelumnya. Gradien juga tersedia dalam CSS3, selain itu CSS3 juga memperlihatkan sesuatu yang simple seperti pembuatan box / text shadow dan border gambar. Untuk menambahkan teks shadows CSS3 hanya memerlukan baris kode berikut :

text-shadow: 2px 2px 2px #ccc;

Columns

Membuat kolom untuk konten lebih mudah dengan CSS3, seperti sekarang terdapat empat baris kode untuk pembuatan columns yang dapat Anda gunakan setiap saat. seperti :

column-count
column-width
column-gap
column-rule

Multiple Backgrounds

Untuk penghematan waktu dalam web designer lain adalah memasukkan beberapa latar belakang langsung dari CSS, lebih mudah dibandingkan anda menggunakan beberapa Hacks untuk template anda. Seperti :

.multiplebackgrounds {
height: 200px;
width: 300px;
padding: 25px;
background: url(top.gif) top right no-repeat,
url(bottom.gif) top left repeat-y,
url(middle.gif) bottom repeat-z;
}

Browser

Ketika CSS3 baru saja dirilis, Browser membantu menginterpretasikan kode. Kadang-kadang Anda masih perlu menggunakan kode ini, jika terdapat kasus browser anda tidak dapat membaca stylesheet yang anda terapkan, maka di bawah ini adalah daftar singkat dengan semua vendor prefix untuk browser yang biasa digunakan yaitu :

-moz- : Firefox
-webkit- : WebKit browser seperti Safari dan Chrome
-o- : Opera
-ms- : Internet Explorer

Menurut sebuah siaran pers resmi dari beberpa minggu yang lalu, Opera akan segera membangun desktop dan mobile browser baru yang menggunakan WebKit, Ini berarti bahwa -o- vendor akan menghilang.

Vendor Prefix

New pseudo-classes

:only-child - jika anda memiliki sebuah elemen dalam tree yang merupakan anak tunggal dari induknya, dapat ditargetkan oleh pseudo-class.
:empty - target elemen yang tidak memiliki anak atau teks apapun, misalnya elemen kosong seperti <p></p>
:nth-child(n) - mengambil keuntungan dari angka (n) nilai-nilai dan sasaran suatu elemen anak dalam kaitannya dengan posisi mereka dalam elemen orangtua/parent. Untuk memberikan contoh yang tepat, daftar komentar blog mungkin akan terlihat lebih menarik dengan warna latar belakang - hal ini dapat dilakukan menggunakan pseudo-class.
:first-of-type - menargetkan elemen pertama dari jenis elemen tertentu dalam orangtua/parent, dan merupakan kebalikan dari :last-of-type.
:first-child - menargetkan elemen anak pertama dari orangtua/parent, terlepas dari jenis elemen itu. Pseudo ini adalah kebalikan dari :last-child
:not(s) - yang satu ini menargetkan elemen yang tidak cocok dengan pemilih tertentu (s)
:root - yang satu ini menargetkan elemen root dari dokumen
:target - mencocokkan elemen yang merupakan target dari URL
:enabled - mencocokkan dengan elemen ketika pseudo ini diaktifkan dan merupakan kebalikan dari :disabled
:checked - mencocokkan elemen ketika pseudo ini aktif (tombol radio atau kotak centang)
:only-of-type - mencocokkan elemen yang mana hanya satu dari type elemen tersebut yang dituju

Sebenarnya ada lebih banyak pseudo-kelas yang ditambahkan ke CSS3 baru, tapi karena pada dasarnya ini adalah sebuah artikel untuk pemula, jadi tidak perlu disebutkan disini.

New Combinator

elementA ~ elementB - selector mencocokkan elemen yang adalah saudara kandung dari elemen tertentu, Maksudnya dalam hal ini elemenB mengikuti gaya elemenA menggunakan tanda (~) yang disebut "tilde"

Mari kita lihat contoh dari penerapan Combinator ini :

<p>This is a first paragraf</p>
<h2>Heading</h2>
<p>This is a second paragraf</p>

Dalam keadaan seperti diatas kondisi paragraf pertama tidak akan sama dengan kondisi elemen h2. dikarenakan posisinya berada diatas elemen h2, sebaliknya yang terjadi dengan kondisi paragraf kedua akan sama dengan elemen induknya yaitu elemen h2. seharusnya penulisan yang benar sama seperti contoh pada paragraf kedua diatas.

CSS Example :

h2~p {
  :declarations
}

Tapi ingat, Combinator ini tidak dapat bekerja sepenuhnya pada browser Internet Explorer

Where you can learn?

Practical CSS3: Developing and Design by Chris Mills
CSS3: The Missing Manual by David Sawyer McFarland
CSS3: Visual QuickStart Guide by Jason Cranford Teaque
The Book of CSS3: A Developer’s Guide to the Future of Web Design by Peter Gasston
CSS3 Tutorials from World Wide Web Consortium

http://www.1stwebdesigner.com/css/css3-introduction/
http://webdesign.about.com/od/css3/a/differences-css2-css3.html
http://www.w3schools.com/css3/default.asp

Mengenal Dasar-dasar CSS #1

mwafiez10@yahoo.co.id (Waff) — Sat, 13 Oct 2012 13:44:00 +0700

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. (source : wikipedia)

Mungkin yang belum pernah dengar kata CSS di dalam benaknya bertanya-taya, "Apa sih CSS itu?", "Bagaimana bentuk dan cara penulisan CSS itu?", Nah Sebelum memasuki kepada pembahasan CSS dasar MWcrew akan menjawab pertanyaan yang ada di atas tersebut, agar kita semua tahu apa itu CSS.

Apa itu CSS?

CSS ialah singkatan dari "Cascading Style Sheet" jika diartikan dalam bahasa Indonesia ialah "Bahasa Lembar Gaya".CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup/markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai :

CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membuat layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling ~~rewel~~ soal layout css adalah IE karena kurang dukungannya terhadap CSS.

Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.

Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu :

Metode Table
Metode Div

Manfaat dari CSS

Dibawah ini adalah beberapa manfaat dari CSS yang saya tahu :

Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
Dapat berkolaborasi dengan JavaScript.
Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header
Menu
Content
Footer

untuk penjelasan mengenai apa itu header,footer,menu dll....baca postingan "Knowing Structure of Blogger Template"

How its Work?

Cara kerja CSS itu sangatlah mudah, kita hanya perlu menulis style nya (selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.

CSS Syntax (Aturan Penulisan)

Aturan penulisan dalam CSS sangatlah mudah dan simple, untuk contohnya lihat gambar dibawah ini :

Struktur Penulisan CSS

Untuk lebih jelasnya lihat contoh langsung dibawah ini.

Contoh 1 :

Selector_id{
   property:value;
}

Contoh 2:

Selector_class {
   property:value;
}

Contoh 3 :

Tag_html {
   property_1:value;
   property_2:value;
   ...
   ..
   ..
   property_n:value;/*anda bisa menambahkan lebih dari 1 property*/
}

Prosedur Penulisan :

Penulisan diawali dengan selector atau tag_html
Kemudian tambahkan kurung kurawal buka ({)
Setelah itu barulah kita tulis property nya
Setelah menulis property lanjutkan dengan : (titik dua)
Setelah : (titik dua), masukan valuenya
Setelah menulis value tambahkan ; (titik koma), fungsinya untuk mengakhiri property dan value
Jika kita tidak menambahkan property:value lagi akhiri dengan kurung kurawal tutup (}) fungsinya munutup selector

Penulisan Comment

Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser. CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */.

Contoh :

/*Membuat heading */
h1 { 
   color :blue; 
   font-size:12px; 
}

Macam-macam Selector

Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus. Ada beberapa selector yang ada di CSS ini, yaitu :

Selector Id
Selector Class

Selector Id

Selector id digunakan untuk menempatkan style pada element yang unik.

Note

Pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama

Attribut id dari elemen HTML di definisikan dengan tanda pagar #.

Contoh :

#coba {
    text-align:center;
    color:blue;
    font-size:12px;
    font-weight:bold;
}

Untuk pemanggilan Id "coba" diatas maka kita perlu menggunakan struktur pemanggilan seperti ini :

<p id="coba">
    ini adalah contoh paragraf
</p>

Selector Class

Apabila selector id ditujukan untuk elemen yang unik, maka selector class digunakan untuk mendefiniskan sebuah grup elemen HTML. Selector class seringkali digunakan untuk memberi gaya pada beberapa elemen HTML. Attribut class dari elemen HTML di definisikan CSS dengan tanda titik [.]

Contoh :

<h1 class="center">
     Contoh penerapan Selector Class
</h1>

<p class="center">
     Ini adalah contoh paragraf
</p>

<a href="http://mwcrew10.blogspot.com.com/" class="center">
     Ini adalah contoh link
</a>

Dengan penerapan CSS berikut maka semua text didalam elemen HTML yang memiliki class="center" akan berada di tengah-tengah.

.center {
    text-align:center;
}

Sebuah elemen HTML diperbolehkan memiliki lebih dari satu selector class namun penamaan class tidak boleh di awali angka, cara penerapan class lebih dari satu adalah dipisahkan dengan spasi.

Contoh

.center {
    text-align:center;
} 
.blue {
    color:blue;
}
.bigfont { 
    font-size:24px; 
}

Semua definisi css di atas akan diterapkan pada tag HTML dibawah ini :

<h1 class="center blue largefont">
   Ini adalah contoh penerapan Selector class yang lebih dari  satu selector
</h1>

Setelah anda mengetahui dasar CSS berikutnya adalah bagaimana Cara penerapan CSS pada dokumen HTML. Ada tiga cara yang bisa dilakukan yaitu dengan cara :

External style sheet
Internal style sheet
Inline style.

Jquery Simple Twitter Count Follower

mwafiez10@yahoo.co.id (Waff) — Sun, 23 Sep 2012 07:19:00 +0700

See the Demo

The Simple and Amazing Twitter Count Folower make your blog look elegant and simple interface

Jika kalian pernah berkunjung ke blog orang lain yang disana terdapat penghitung follower dari twitter hanya menggunakan tulisan saja (bukan tombol dari twitter) semua itu dibuat dengan Jquery.

Untuk menerapkannya ke blog anda langsung saja login ke blogger, kemudian masuk ke Template - Edit HTML kemudian cari code ini </head> kemudian letakkan kode dibawah ini diatas kode </head> tadi

JQuery / JavaScript

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$(function() {
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: { screen_name: 'NAMA ANDA' },
dataType: 'jsonp',
success: function(data) {
$('#followers').html(data.followers_count.
toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ","));
}
});
});
});
//]]></script>

Simpan Template

Tambahkan Gadget baru dengan type "HTML/JavaScript" dan masukkan kode pemanggilan dibawah ini :

HTML

<span id="followers"></span>

Simpan.

See the Demo

Update

The code was not longer work anymore

Amazing Twitter Friends & Follow Widget

mwafiez10@yahoo.co.id (Waff) — Sat, 23 Jun 2012 14:35:00 +0700

See the Demo Download

The most popular jQuery plugin -Twitter Friends and Follow widget. New version and easy to use for your blog and website

Ganti versi widget lama anda dengan widget twitter yang satu ini.
Versi baru Twitter widget yang satu ini berbeda dari yang lain, selain terdapat gambar profil dari teman Twitter anda widget ini juga mengadopsi Friends tweet. widget Twitter Friends&Follow dibuat oleh seorang blogger yang bernama Mike.
Saya hanya sharing saja, karena menurut saya widget ini sangatlah bagus jika diterapkan di blog sobat.
langsung saja copas kode dibawah ini dengan membuat widget baru di blog anda...

Code

<!-- Include javascript and CSS once -->
<link href="http://twitter-friends-widget.googlecode.com/svn/v2/dark.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/11226493145/jquery.twitter-widget-2.0.js" type="text/javascript"></script>

<!-- Required HTML -->
<div class="twitter-friends">
<!-- {
username: 'wafiezpunk'
,friends: 1
,width:358
,users_max:16
,users_height:120
,user_image:40
,user_animate:'width'
,tweet:1
,tweet_height:60
,loop:1
} --><a class="tfw-info" href="#" target="_blank"></a>
</div>
<!-- Required HTML -->

Note

Ganti kata yang sudah saya tandai dengan username twitter anda

username: 'wafiezpunk'

See the Demo Download

http://www.moretechtips.net/

Pure CSS Tooltips

mwafiez10@yahoo.co.id (Waff) — Sat, 23 Jun 2012 07:49:00 +0700

See the Demo Download

Postingan kali ini bertemakan Tooltips, apaan tuh? nah kalau belum tahu juga maka saya akan memberi contoh tooltips yang ada pada blog ini,

apabila sobat menemukan tutorial membuat tooltips biasanya menggunakan Javascript atau Jquery, tetapi pada tutorial yang sobat lihat disini hanyalah sepotong code CSS untuk membuatnya menjadi keren dan tentunya sangat simple.

CSS

.has-tooltip {
background: #ececec;
color: #555;
cursor: help;
font-family: "Gill Sans", Impact, sans-serif;
font-size: 20px;
margin: 100px 75px 10px 75px;
padding: 15px 20px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.has-tooltip .tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
position: absolute;
visibility: hidden;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.has-tooltip .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.has-tooltip .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}

.has-tooltip:hover .tooltip {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}

HTML

<div class="has-tooltip">
Hover me.
<span class="tooltip">I am a tooltip!</span>
</div>

See the Demo Download

CSS Font Stacks

mwafiez10@yahoo.co.id (Waff) — Sat, 9 Jun 2012 16:26:00 +0700

Font Stacks adalah deretan font yang dipisahkan oleh tanda (,) yang berfungsi mengakomodir user yang tidak memiliki font tertentu pada komputernya. Jika OS tidak mampu mengidentifikasi font urutan pertama akan beralih pada urutan kedua dan seterusnya hingga pilihan terakhir jatuh pada generik serif pada komputer tersebut.

Dengan menambahkan Font Stacks maka blog anda akan terlihat lebih menarik dan juga jenis font yang akan anda gunakan juga akan teridetifikasi di semua OS selain Windows.
Oleh karena itu saya menyediakan list Font Stacks dibawah ini yang siap digunakan di blog anda.

Times New Roman-based stack

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

Modern Georgia-based serif stack

font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

Traditional Garamond-based serif stack

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

Helvetica/Arial-based sans serif stack

font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

Verdana-based sans serif stack

font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

Trebuchet-based sans serif stack

font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

Impact-based sans serif stack

font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

Monospace stack

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

http://www.sitepoint.com/article/eight-definitive-font-stacks

20 Exellent Google Web Fonts

mwafiez10@yahoo.co.id (Waff) — Fri, 8 Jun 2012 15:58:00 +0700

Dalam beberapa tahun terakhir penggunaan berbagai font dan tipografi dalam desain web telah lama diterapkan. Sekarang ada beberapa pilihan berbeda untuk pendekatan yang dapat Anda ambil ketika Anda ingin menggunakan font selain font web dasar. Google Web Font dengan cepat menjadi salah satu pilihan terkemuka.

Dengan Font Google Web itu anda dapat dengan cepat dan mudah untuk menerapkan berbagai macam font ke dalam situs web yang Anda desain. Saat ini ada lebih dari 500 font yang tersedia melalui Google Web Font, dan banyak dari mereka yang cukup berkualitas untuk digunakan dalam desain profesional. Dalam posting ini saya akan menampilkan 20 font yang dapat anda pakai untuk menambah unsur ekstrinsik dalam desain web anda. Check it out...

Droid Serif

Droid Sans

Oswald

Signika

Copse

PT Sans Narrow

Open Sans Condensed

PT Serif

Nunito

Arvo

Yanone Keffeesatz

Patua One

Coustard

Berkshire Swash

Ubuntu

Volkorn

News Cycle

Amaranth

Convergence

Doppio One

Amazing 3D Pressed Button

mwafiez10@yahoo.co.id (Waff) — Thu, 7 Jun 2012 17:34:00 +0700

See the Demo

Amazing 3d pressed button will rock your button style, it's look like professional button

Setelah sekian lama udah g di update blog ini akan kembali exist memberikan tutorial yang InsyaAllah bermanfaat bagi semua bloggers di Indonesia ini.
Tutorial kali ini bertemakan 3D Pressed Button. Sebenarnya sudah lama saya ingin memposting tentang tema ini tetapi belum sempat hingga sekarang ini.

Preview

Taruh kode CSS ini diatas ]]></b:skin>

CSS

.button, .button-bevel {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #fff!important;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 7px 20px 9px;
margin: .5em .5em .5em 0;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
-webkit-transition: 0.1s linear;
-moz-transition: 0.1s linear;
-ms-transition: 0.1s linear;
-o-transition: 0.1s linear;
transition: 0.1s linear;
}
.button {border-radius: 2px;box-shadow: inset rgba(255,255,255,0.3) 1px 1px 0;}
.button:active {box-shadow: inset rgba(0,0,0,0.4) 0px 0px 6px;}

.orange {
background: rgb(255,183,0);
background: -moz-linear-gradient(top,  rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,183,0,1)), color-stop(100%,rgba(255,140,0,1)));
background: -webkit-linear-gradient(top,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: -o-linear-gradient(top,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: linear-gradient(to bottom,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
border: 1px solid #e59500;
}

.orange:hover {
background: rgb(255,203,72);
background: -moz-linear-gradient(top,  rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(100%,rgba(255,156,35,1)));
background: -webkit-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
background: -o-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
background: linear-gradient(to bottom,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
}

.magenta {
background: rgb(255,130,172);
background: -moz-linear-gradient(top,  rgba(255,130,172,1) 0%, rgba(247,37,129,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,130,172,1)), color-stop(100%,rgba(247,37,129,1)));
background: -webkit-linear-gradient(top,  rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
background: -o-linear-gradient(top,  rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
background: linear-gradient(to bottom,  rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff82ac', endColorstr='#f72581',GradientType=0 );
border: 1px solid #c60a56;
}

.magenta:hover {
background: rgb(255,155,189);
background: -moz-linear-gradient(top,  rgba(255,155,189,1) 0%, rgba(248,62,143,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,155,189,1)), color-stop(100%,rgba(248,62,143,1)));
background: -webkit-linear-gradient(top,  rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
background: -o-linear-gradient(top,  rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
background: linear-gradient(to bottom,  rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9bbd', endColorstr='#f83e8f',GradientType=0 );
}

.cyan {
background: rgb(130,207,241);
background: -moz-linear-gradient(top,  rgba(130,207,241,1) 0%, rgba(56,174,234,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,207,241,1)), color-stop(100%,rgba(56,174,234,1)));
background: -webkit-linear-gradient(top,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: -o-linear-gradient(top,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: -ms-linear-gradient(top,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: linear-gradient(to bottom,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cff1', endColorstr='#38aeea',GradientType=0 );
border: 1px solid #3cafcf;
}

.cyan:hover {
background: rgb(153,216,244);
background: -moz-linear-gradient(top,  rgba(153,216,244,1) 0%, rgba(79,183,236,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,216,244,1)), color-stop(100%,rgba(79,183,236,1)));
background: -webkit-linear-gradient(top,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
background: -o-linear-gradient(top,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
background: -ms-linear-gradient(top,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
background: linear-gradient(to bottom,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99d8f4', endColorstr='#4fb7ec',GradientType=0 );
}

.red {
background: #e25b53;
background: -moz-linear-gradient(top,  #e25b53 0%, #dd2011 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e25b53), color-stop(100%,#dd2011));
background: -webkit-linear-gradient(top,  #e25b53 0%,#dd2011 100%);
background: -o-linear-gradient(top,  #e25b53 0%,#dd2011 100%);
background: -ms-linear-gradient(top,  #e25b53 0%,#dd2011 100%);
background: linear-gradient(to bottom,  #e25b53 0%,#dd2011 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e25b53', endColorstr='#dd2011',GradientType=0 );
border: 1px solid #c42222;
}

.red:hover {
background: #dd7671;
background: -moz-linear-gradient(top,  #dd7671 0%, #dd2011 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd7671), color-stop(100%,#dd2011));
background: -webkit-linear-gradient(top,  #dd7671 0%,#dd2011 100%);
background: -o-linear-gradient(top,  #dd7671 0%,#dd2011 100%);
background: -ms-linear-gradient(top,  #dd7671 0%,#dd2011 100%);
background: linear-gradient(to bottom,  #dd7671 0%,#dd2011 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd7671', endColorstr='#dd2011',GradientType=0 );
}

.black {
background: #444444;
background: -moz-linear-gradient(top,  #444444 0%, #1c1c1c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#1c1c1c));
background: -webkit-linear-gradient(top,  #444444 0%,#1c1c1c 100%);
background: -o-linear-gradient(top,  #444444 0%,#1c1c1c 100%);
background: -ms-linear-gradient(top,  #444444 0%,#1c1c1c 100%);
background: linear-gradient(to bottom,  #444444 0%,#1c1c1c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#1c1c1c',GradientType=0 );
border: 1px solid #2a2a2a;
}

.black:hover {
background: #686868;
background: -moz-linear-gradient(top,  #686868 0%, #1c1c1c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#686868), color-stop(100%,#1c1c1c));
background: -webkit-linear-gradient(top,  #686868 0%,#1c1c1c 100%);
background: -o-linear-gradient(top,  #686868 0%,#1c1c1c 100%);
background: -ms-linear-gradient(top,  #686868 0%,#1c1c1c 100%);
background: linear-gradient(to bottom,  #686868 0%,#1c1c1c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#1c1c1c',GradientType=0 );
}

.green {
background: #82cc5d;
background: -moz-linear-gradient(top,  #82cc5d 0%, #53b73c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82cc5d), color-stop(100%,#53b73c));
background: -webkit-linear-gradient(top,  #82cc5d 0%,#53b73c 100%);
background: -o-linear-gradient(top,  #82cc5d 0%,#53b73c 100%);
background: -ms-linear-gradient(top,  #82cc5d 0%,#53b73c 100%);
background: linear-gradient(to bottom,  #82cc5d 0%,#53b73c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cc5d', endColorstr='#53b73c',GradientType=0 );
border: 1px solid #429E34;
}

.green:hover {
background: #99cc80;
background: -moz-linear-gradient(top,  #99cc80 0%, #53b73c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99cc80), color-stop(100%,#53b73c));
background: -webkit-linear-gradient(top,  #99cc80 0%,#53b73c 100%);
background: -o-linear-gradient(top,  #99cc80 0%,#53b73c 100%);
background: -ms-linear-gradient(top,  #99cc80 0%,#53b73c 100%);
background: linear-gradient(to bottom,  #99cc80 0%,#53b73c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc80', endColorstr='#53b73c',GradientType=0 );
}

.button-bevel {
vertical-align: top;
border-radius: 4px;
border: none;
padding: 10px 25px 12px;
}

.button-bevel:active {position: relative;top: 5px;}
.button-bevel.orange {box-shadow: #c46d00 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.orange:active {box-shadow: #c46d00 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}
.button-bevel.magenta {box-shadow: #ca075c 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.magenta:active {box-shadow: #ca075c 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}
.button-bevel.cyan {box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.cyan:active {box-shadow: #1994d3 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}
.button-bevel.red {box-shadow: #88180e 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.red:active {box-shadow: #88180e 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}
.button-bevel.black {box-shadow: #000 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;}
.button-bevel.black:active {box-shadow: #000 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;  }
.button-bevel.green {box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.green:active {box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}

Untuk menggunakan nya pakai kode HTML dibawah ini dan anda bisa menaruhnya dimana saja....

Button Orange

<a class="button-bevel orange" href="javascript:void(0)"> Button </a>

Button Magenta

<a class="button-bevel magenta" href="javascript:void(0)"> Button </a>

Button Cyan

<a class="button-bevel cyan" href="javascript:void(0)"> Button </a>

Button Red

<a class="button-bevel red" href="javascript:void(0)"> Button </a>

Button Black

<a class="button-bevel black" href="javascript:void(0)"> Button </a>

Button Green

<a class="button-bevel green" href="javascript:void(0)"> Button </a>

See the Demo

Floating Facebook Like Box

mwafiez10@yahoo.co.id (Waff) — Thu, 12 Apr 2012 01:15:00 +0700

Floating facebook likebox can help to boost your traffic for your blog, because its simple but not sucks!.

Berbicara mengenai facebook dan bagaimana untuk menggunakannya sebagai alat yang dapat membantu meningkatkan traffic blog anda. berikut ini merupakan widget yang akan sedikit membantu mendapatkan facebook like untuk blog anda.

Taruh code ini diatas ]]></b:skin>

CSS

<style type='text/css'>  
#facebook-box {
position:fixed !important;
position:absolute; /* IE6 */
top: -900px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222;  background-color:#6699ff; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;

#facebook-box a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>

Kemudian tempatkan kode html ini di widget anda atau dimanapun yg anda suka.

HTML

<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#facebook-box').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>

<div id='facebook-box'>

Script Like Box Facebook taruh Disini

<a class='close' href='#'>&times;</a>
</div>

Note :

Anda bisa mendapatkan script facebook likebox pada halaman developer facebook, kunjungi link ini http://developers.facebook.com/docs/reference/plugins/like-box/

Blockquote Style Like Styntax Hightlighter

mwafiez10@yahoo.co.id (Waff) — Thu, 5 Apr 2012 14:03:00 +0700

Blockquote Style Like Styntax Hightlighter will improve your blog designing and your blog will look like a professional blog ever.

Sudah banyak sobat-sobat blogger yang mem-posting tentang Blockquote pada blogger, tetapi sekilas saya melihat tips n trik nya tersebut kebanyakan memodif Blockquote nya masih menggunakan gambar yang ternyata dapat membuat blog sobat menjadi berat.
Nah untuk mencari jalan keluarnya saya mencoba membuat Blockquote yang sedikit lebih cantik dengan menambahkan CSS agar lebih elegant. Sekilas tampilan Blockquote ini memang menyerupai Syntax-Highlighter pada umumnya, sengaja saya buat seperti itu agar lebih cantik dan gampang pemakainnya.

Mari kita lihat cara pembuatannya.
Cari kode ]]></b:skin> di template anda (untuk mempermudah gunakan keyboard dan tekan Ctrl+F) kemudian letakkan kode ini tepat diatas kode tersebut

CSS

.post-body blockquote {
border-left: 8px solid #66ff00;
word-wrap: break-word;
display:block;
font:normal 12px/22px Monaco,Monospace !important;
color:#CFDBEC;
background-color:#2f2f2f;
background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
padding:0em 1em;
overflow:auto;
border-left:8px solid #33ff00;
border-radius: 2px 2px 2px 2px;
-moz-transition: all 0.3s ease-out;
}

.post-body blockquote:hover {
border-left: 8px solid #66ff00;
border-radius: 2px 2px 2px 2px;
-moz-transition: all 0.3s ease-out;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.post-body blockquote  p{padding:8px;margin:2px;}

Note :

Jika di template blog sobat sudah ada kode .post-body blockquote { maka ganti kode tersebut dengan css diatas.

Widget Daftar Isi di Blogger

mwafiez10@yahoo.co.id (Waff) — Wed, 21 Mar 2012 16:47:00 +0700

Widget daftar isi di Blogger mungkin sudah tidak asing lagi di telinga anda tetapi mengapa masih juga di posting di blog ini?. Widget yang satu ini berbeda dari widget daftar isi lain selain menggunakan scroll dan tampilannya berdasrkan label widget ini juga mempunyai tambahan script untuk mengatur jumlah Total Post pada Blog anda dan juga Total Komentar yang ada pada blog anda.

Pada Dasbor blog anda masuk ke Rancangan > Tambah gadget > Html / Java Script ,kemudian masukkan kode dibawah ini.

Code :

<div style="overflow:auto;width:auto;height:200px;padding:10px;border:1px solid #eee"><script style="text/javascript" src="http://yourjavascript.com/91721213113/contents.js"></script>
<script src="http://mwcrew10.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<br/>
<div style='border-bottom:1px dashed #333; float:left;'>
<script src="http://mwcrew10.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></div>
<div style='border-bottom:1px dashed #333; float:right;'>
<script src="http://mwcrew10.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></div>

Note :

Ganti tulisan yang telah ditandai dengan alamat blog anda

Knowing Structure of Blogger Template

mwafiez10@yahoo.co.id (Waff) — Tue, 20 Mar 2012 22:53:00 +0700

Knowing the Structure of Blogger Template..??
Yap...Sebelum merancang template, Anda harus memiliki gagasan tentang struktur yang bagaimana yang akan anda terapkan pada template anda. Secara umum, sebenarnya struktur dari setiap template tidak persis sama. Tapi, dengan mengetahui struktur dasar, Anda dapat dengan mudah mendapatkan ide tentang bagaimana untuk men-tweak template Anda yang sudah ada dan bagaimana mengubahnya menjadi struktur yang berbeda.

Beberapa bagian struktur template yang jelas dari apa yang dapat Anda lihat pada kebanyakan blog: header, footer, dan bagian posting. Tapi ada beberapa bagian yang tidak terlihat pada layar komputer.
Untuk memulai, struktur template yang pada dasarnya berisi blok kontainer yang terlihat seperti ini:

Structure Blogger Template

Body

Bagian terluar adalah badan template (body) pada dasarnya semua yang meliputi layar komputer.

Outer-wrapper

Kontainer ini menutupi seluruh template Anda. Secara umum, Outer-wrapper adalah bagian penutup atau pembungkus yang didalamnya terdapat beberapa bagian yang lebih kecil seperti Header, Content, dan Footer.

Header

Bagian ini adalah bagian paling atas blog Anda. Tetapi di dalam Header Anda akan memiliki sub-blok juga - blok header Judul, blok Deskripsi Header, dan lain-lain seperti Adsense banner, menu bar, dll Jadi gunanya untuk membungkus semua sub-blok di dalam satu wadah besar , wadah terbesar di bagian Header biasanya Header-wrapper

Content

Di bawah Header adalah Content-wrapper - pada dasarnya blok kontainer yang paling penting dari semua. Segera di dalam pembungkus ini adalah Sidebar kontainer (1,2 atau jumlah sidebar) dan kontainer utama (yang berisi posting Anda, komentar, atau beberapa iklan).

Sidebar

Merupakan blok yang berisi semua widget sisi Anda - About Me, Label, Arsip, Teks, HTML, Adsense, dll. Untuk template blogger standar Anda biasanya akan menemukan hanya 1 sidebar atau 2 sidebar. Tapi sebenarnya mudah untuk menambahkan sejumlah beberapa sidebars. Yang paling umum adalah 2 sidebar (3 Column Template).

Footer

Adalah bagian yang paling bawah template Anda. Seperti pada bagian Header, Anda juga akan memerlukan Footer-wrapper berisi sub-blok di bagian Footer.

Main

Main-wrapper adalah container paling luar pada bagian Utama yang berjalan di dalam Content-wrapper. Di dalam-wrapper utama adalah Posting, Komentar blok, Header Tanggal, dan widget lain yang dibuat dari pilihan Add Page Element.

Blog Post

Bagian ini berisi hal-hal penting - Post Anda Judul, Pos, Pencipta, Label, dll...

Setelah Anda memahami struktur dasar ini, akan lebih mudah untuk mulai belajar tentang struktur Blogger template kode. Mempelajari struktur kode bukan hanya HTML atau CSS, tapi lebih banyak tentang bagaimana kode template diatur, seperti bagaimana struktur template terorganisir. Bahkan apabila anda hanya mempunyai sedikit pengetahuan tentang pemrograman web, Anda dapat menyesuaikan template Anda hanya dengan memahami struktur dasar dan beberapa bahasa CSS.

Google Followers Widget with Button

mwafiez10@yahoo.co.id (Waff) — Sat, 17 Mar 2012 12:18:00 +0700

Gadget yang satu ini dari Google sangat populer dan tak sedikit Blog-blog yang menggunakan fasilitas ini bahkan bisa dikatakan hampir semua.
Tetapi pernahkah kita berfikir bagaimana caranya agar gadget yang satu ini tidak terlalu menggunakan tempat yang begitu besar? Nah untuk memecahkan masalah tersebut MWcrew akan memberikan sebuah tutorial yang mungkin saja bisa menjawab pertanyaan yang di atas.

Tutorial ini sangat sederhana tapi mempunyai manfaat yang lumayan besar yakni dapat mengurangi berat blog anda, dengan cara apa? Nah dengan sebuah tombol follow yang ukurannya sangat mungil dan bisa diletakkan dimana saja tanpa memakan tempat yang banyak.

Style 1 :

<a href="http://www.blogger.com/follow-blog.g?blogID=Your Blog ID" target="_blank" title="Follow With Google Friend Connect"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMKfgdO-oHiFuDmjMQ_4acqHGM5jmUMf-l5I6rdN_Ym7be9daRAhFonDjDbP1uw9HsdTdkb4wXWW4nTdTvSIBU6nnKZxkbjwno883BTw0soX04TF6F2bedrAI4QMcSGOcVOaHW4JMdK-9/s1600/follow-with-google-friend-connect-button.jpg" /></a>

Style 2 :

<a href="http://www.blogger.com/follow-blog.g?blogID=Your Blog ID" target="_blank" title="Follow With Google Friend Connect"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL7AK8uiwlk1d3W6DY1r_O3XGFXrtE-kGS781Y0e5ckkPExtQhKazy2ivRHjMjX0xSaXFjTPFpeaItIGyyUsKddSyNDoBAJcAP4Y6u0QV4KmpC_WxPEcfGfwkw_Ac-29HQ9bokS39O667k/s1600/google-followers-button.png" /></a>

Note :

Ganti tulisan yang berlatar kuning dengan Blog ID anda
Temukan Blog ID anda dengan masuk ke Dasbor Blogger kemudian Rancangan dan lihat pada Address Bar Browser anda seperti gambar di bawah ini

Google Search Bar For Blogger

mwafiez10@yahoo.co.id (Waff) — Fri, 16 Mar 2012 01:02:00 +0700

Google dengan design barunya yang tampil lebih elegan dan sempurna memang patut diacungi jempol, dengan ciri khasnya yang simple dan unik itulah yang patut ditiru para Bloggers Indonesia lantas apa salahnya mencoba-coba mengcoding sesuatu yang mirip dengan desainnya si google ini.

Yap, pada kali ini MWcrew akan mencoba memberikan sedikit ILmu kepada kalian semua dengan Membuat Tombol Search seperti Google.

Tempatkan kode CSS berikut tepat diatas ]]></b:skin>

CSS

/*Start Css For Google Style Search Box*/

/* div container containing the form */
#searchContainer {
margin:20px;
}

/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}

/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2TS7_XguB6c7_JGbuWViTm582NSLtAm0RsSsloEpPdq-Y3BFfpL_gg6Y90ymzOm88Q7nMaAVTNZJj-3pg8ZzqUV4PnnFxaou12KbPO70PRp14GXPApOk71o0RFk7eHp4uHTRJ3F9LVaB_/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2TS7_XguB6c7_JGbuWViTm582NSLtAm0RsSsloEpPdq-Y3BFfpL_gg6Y90ymzOm88Q7nMaAVTNZJj-3pg8ZzqUV4PnnFxaou12KbPO70PRp14GXPApOk71o0RFk7eHp4uHTRJ3F9LVaB_/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

/*End Google Style Search Bar*/

Untuk mengganti lebarnya ganti kode yang berlatar kuning sesuai ukuran yang di inginkan

Setelah itu cari kode </head> dan taruh kode ini tepat diatasnya.

Javascript

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript' />
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

Letakkan HTML dibawah ini dimanapun yang anda suka

HTML

<div id="searchContainer">
<form name="MWcrew" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

Beautiful Ads Box For Blogger

mwafiez10@yahoo.co.id (Waff) — Wed, 14 Mar 2012 16:35:00 +0700

The philosophy behind much advertising is based on the old observation that every man is really two men - the man he is and the man he wants to be.William Feather

Ads Space? bukannya sudah di posting berkali-kali? eeits... jangan salah yang satu ini beda dari yang sebelumnya, kalau yang sebelumnya MWcrew telah mempostingAdvertise box (Hover Effect) ,yang boxnya hanya satu warna saja kali dengan berwarna-warni gan...dan juga mempunyai efek yang membuat tampilannya semakin elegant.

Mungkin sudah banyak sobat melihat di blog-blog lain menggunakan ads Space seperti ini tapi belum tahu bagaimana cara membuatnya bukan?? Nah dengan menyimak sedikit tutorial dibawah ini maka sobat akan tahu bagaimana cara membuatnya dan jangan hanya diam dan termenung mengaguminya saja tapi langsung diterapkan di blog sobat masing-masing.

CSS

<style type="text/css" >
.squarebanner {
width:296px;
padding:10px 10px 10px 10px;
background:#fff;
border:1px solid #ddd;
margin-bottom:10px;
}
.squarebanner ul{
list-style-type:none;
margin: 0px auto;
padding: 10px 0px 0px 0px;
width:300px;
overflow:hidden;
}  
.squarebanner ul li{
list-style-type:none;
margin: 0px 7px 0px 7px;
float:left;
padding:5px;
display:inline;  
background:#e42b2b;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-webkit-border-top-left-radius:80px;
-webkit-border-bottom-right-radius:80px;
-moz-border-radius-topleft:80px;
-moz-border-radius-bottomright:80px;
border-top-left-radius:80px;
border-bottom-right-radius:80px;
}
.squarebanner ul li:hover{
-webkit-border-top-left-radius:40px;
-webkit-border-bottom-right-radius:40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-bottomright:40px;
border-top-left-radius:40px;
border-bottom-right-radius:40px;
}

.squarebanner ul li a img{
-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);   
-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);
box-shadow:0 0 8px rgba(0,0,0,0.5);
padding:3px;
}
</style>

HTML

<div class="squarebanner ">
<ul>
<li><a href="LINK" ><img src="IMAGE_URL" /></a></li>
<li><a href="LINK" ><img src="IMAGE_URL" /></a></li>
</ul>
</div>

Note :

Ganti kode yang berlatar kuning dengan link anda (misalnya dengan link contact me atau dsb...)
"IMAGE_URL" ganti dengan alamat gambar anda

Membuat Recent Comment Widget dengan Avatar di Blogger

mwafiez10@yahoo.co.id (Waff) — Sun, 12 Feb 2012 13:41:00 +0700

Anonymous comments? You're not in the arena, man. If you can't say it to me in person in front of my kids, don't say it.
Brene Brown

Mungkin sudah biasa widget Recent Comment (komentar terakhir) pada blogger umumnya menggunakan widget bawaan pada blogspot itu sendiri, akan tetapi widget itu sekarang sudah berkembang menjadi widget recent comments yang disampingnya terdapat gambar si pengunjung yang berkomentar atau dengan avatar.

Widget ini sendiri dikembangkan oleh Harish yang memiliki blog yang namanya Way2blogging dengan sedikit pengcodingan maka dihasilkanlah widget recent comment yang memiliki avatar. untuk cara pembuatannya sobat bisa melihat caranya dibawah ini.

CSS & JavaScript

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li {margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments  = 5,
showAvatar  = true,
avatarSize  = 30,
roundAvatar = true,
characters  = 30,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://mwcrew10.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Note :

numComments = 5, Jumlah komentar yang ditampilkan

showAvatar = true, Pilihan untuk menampilkan avatar, jika tidak gunakan 'false'

avatarSize = 30, Ukuran avatar dalam pixel

roundAvatar = true, Avatar bergaya bundar

characters = 30, jumlah karakter yang ditampilkan

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", url default avatar

hideCredits = true; Fungsi untuk menghilangkan credit widget seperti 'Widget by : W2b'

Advertise box (Hover Effect)

mwafiez10@yahoo.co.id (Waff) — Tue, 17 Jan 2012 23:37:00 +0700

Adsense box..?? ada yang sudah tahu? atau bahkan sudah memasangnya di blog?, yup jika sudah maka saya tidak perlu menjelaskannya lagi dengan panjaaaang lebaar, tetapi pada adsense box anda cukup hanya dengan coding atau masih menggunakan gambar biasa? jika masih menggunakan gambar yang tentu saja akan menambah berat blog kalian maka kalian perlu meminimalisir berat blog anda dengan melihat tutorial dari MWcrew kali ini.

Seperti yang dibahas pada postingan MWcrew yang berjudul Adsense Box as like as Buysellads, postingan kali ini hampir sama dengan postingan sebelumnya tetapi letak keunggulan postingan kali ini adalah sebagai berikut :

Tidak menggunakan gambar satupun
Lebih mudah dipakai
Lebih user friendly
Hanya memakai widget (tanpa edit html)
Cocok untuk pemula

Tetapi apabila anda mau menambahkan gambar bisa saja dengan catatan ganti "Image_Url" dengan Url gambar anda jika tidak biarkan saja begitu.
tertarik untuk membuatnya?? Simak tutorialnya....

1. Pada Dasbor blog anda masuk ke Rancangan > Tambah gadget > Html / Java Script.
2. Masukkan kode dibawah ini.

Code :

<style>
/*----MWcrew ads box start----*/
.ads {
display: block;
width: 280px;
}
.ads a {
width: 125px;
}
.ads a img {
padding: 0;
}
.ads a em {
font-style: normal;
}
.ads a {
color: #888888;
display: block;
float: left;
font-family: verdana,sans-serif;
font-size: 11px;
margin: 0 7px 7px 0;
overflow: hidden;
text-align: center;
text-decoration: none;
}
.ads img {
border: 0 none;
clear: right;
}
.ads a.image {
background: none repeat scroll 0 0 #E7E7E7;
border: 1px solid #CCCCCC;
color: #666666;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.ads a.image:hover {
background: none repeat scroll 0 0 #DDDDDD;
border: 1px solid #999999;
color: #333333;
}
.ads a {
line-height: 100%;
}
.ads a.image {
height: 125px;
line-height: 1000%;
width: 125px;
}
html > body .ads a.image {
height: 123px;
width: 123px;
}
#credits {
float: right;
font-size: 10px;
margin-right: 35px;
margin-top: -10px;
}
/*----MWcrew ads box end----*/
</style>
<div id="advert">
<div class="ads">

<a href="#" class="image">Advertise here<img src="Image_Url" /></a>
<a href="#" class="image">Advertise here<img src="Image_Url" /></a>
<a href="#" class="image">Advertise here<img src="Image_Url" /></a>
<a href="#" class="image">Advertise here<img src="Image_Url" /></a>
</div>
<div id="credits">
<p>Widget by <a href="http://mwcrew10.blogspot.com">MWcrew</a></p>
</div>
</div>

Note :

Ganti kode "#" dengan link anda (misalnya dengan link contact me atau dsb...)
Ganti "Image_Url" dengan Url gambar anda (Jika tidak diperlukan biarkan saja seperti itu)

Jangan lupa disimpan. Selamat mencoba.....

See the Demo

"MWcrew:

Cool Dropdown Navigation Menu (Zoom Template Style)

mwafiez10@yahoo.co.id (Waff) — Mon, 16 Jan 2012 17:47:00 +0700

Hari demi hari terus berlanjut, tutorial demi tutorial pun sudah saya sajikan di blog ini tetapi ketika saya iseng-iseng melihat email saya yang masuk di mwafiez@gmail.com eh...ternyata ada yang ngirim email ke saya dan menanyakan cara membuat menu navigasi seperti di blog saya yang satunya yaitu Ailaspark yang sudah lama ini tidak saya Update karena masih sibuk mengurusi blog ini (heheheh...).

Okelah MWcrew akan memberitahu cara membuat Cool Navigation menu ini, dan sebelumnya menu ini merupakan pengcodingan saya sendiri yang terinspirasi dari menunya Zoom Template karena menurut saya menu inilah yang cocok untuk template Ailaspark. Yah langsung disimak cara pembuatannya gan....

1. Masuk ke dasbor blog anda dan pilih Rancangan > Edit Html kemudian cari kode
]]></b:skin> tempatkan kode CSS berikut tepat diatasnya.

CSS

#ailas-wrapper{background: -moz-linear-gradient(top, #F2F2F2, #D8D8D8);  
background: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#D8D8D8));float:center;height:31px;width:100%px;margin:0 auto}
#nav-menu-label{float:center;margin:0;padding:0}
.text-style{color:#333;display:block;font-size:12px;font-weight:400;text-transform:normal;border-left:0 solid #CDCDCD;height:14px;margin:0;padding:8px 4px 8px 14px}
.text-style:hover{color:#045FB4;cursor:pointer;height:14px}
#nav-menu-label li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1r8C96cybk1BGWjxXHV4CYbVqe8iosmuTU7ftIsbe95tDwWDD9V0Ol0N87iInFlgyoUc_hte5LDBlraEBfaWAYc0NL3mowHsVlt9v2cLnvBLVlPKNoB_m-NIUAvl7tkYSS2ne-4Rfi4/s200/bc_separator.png) no-repeat 2px 0;list-style:none;float:right;margin:0;padding:0}
#nav-menu-label li a,#nav-menu-label li a:link,#nav-menu-label li a:visited{color:#333;display:block;font-size:12px;font-weight:700;text-transform:normal;border-left:1px solid #CDCDCD;margin:0;padding:1px 8px 6px}
#nav-menu-label li a:hover,#nav-menu-label li a:active{color:#045FB4;text-decoration:none;margin:0;padding:1px 8px 6px}
#nav-menu-label li li a,#nav-menu-label li li a:link,#nav-menu-label li li a:visited{background:#f5f5f5;color:#333;font-size:12px;font-weight:400;text-transform:normal;text-align:left;width:150px;border-top:1px solid #FFF;border-bottom:1px solid #CDCDCD;border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD;margin:0;padding:7px 10px 6px}
#nav-menu-label li li a:hover,#nav-menu-label li li a:active{background:#fff;color:#000;border-top:1px solid #FFF;padding:7px 10px 6px}
#nav-menu-label li ul{z-index:999;position:absolute;left:-999em;height:auto;width:150px;float:left;margin:0;padding:0}
#nav-menu-label li ul a{width:150px}
#nav-menu-label li ul ul{margin:-31px 0 0 100px}
#nav-menu-label li:hover ul ul,#nav-menu-label li:hover ul ul ul,#nav-menu-label li.sfhover ul ul,#nav-menu-label li.sfhover ul ul ul{left:-999em}
#nav-menu-label li:hover ul,#nav-menu-label li li:hover ul,#nav-menu-label li li li:hover ul,#nav-menu-label li.sfhover ul,#nav-menu-label li li.sfhover ul,#nav-menu-label li li li.sfhover ul{left:auto}
#nav-menu-label li:hover,#nav-menu-label li.sfhover{position:static}
#nav li,#nav-menu-label ul{float:left;list-style:none;margin:0;padding:0}

2. Setelah itu cari kode <body> dan taruh kode ini tepat dibawahnya.

<div id='ailas-wrapper' style='text-align:center'>

<ul id='nav-menu-label'>
<li>
<div class='text-style'>Cartoon &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Cartoon West'>West</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Cartoon Japan'>Japan</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Cartoon'>All Cartoon Movies</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>Malaysia &#9660;</div>
<ul>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>China &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China%20Action'>Action</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China%20Adventure'>Adventure</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China%20Drama'>Drama</a>
</li>
<li>
<a href='#'>Biography</a>
</li>
<li>
<a href='#'>Crime</a>
</li>
<li>
<a href='#'>Fighting</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China'>All China Movies</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>Asian &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Action'>Action</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Comedy'>Comedy</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Drama'>Drama</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Romance'>Romance</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>West &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Action'>Action</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Adventure'>Adventure</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Biography'>Biography</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Comedy'>Comedy</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Crime'>Crime</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Drama'>Drama</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Family'>Family</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Fighting'>Fighting</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Horor'>Horor</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Kids'>Kids</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Sport'>Sports</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/West'>All West Movies</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>Indonesian &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Drama%20Indonesian'>Drama</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Komedi'>Komedi</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Horor%20Indo'>Horor</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Musical'>Musical</a>
</li>
<li>
<a href='#'>All Indonesian Movies </a>
</li>
</ul>
</li>

</ul>
</div>

3. Klik Simpan.

Selesai...Lihat di bagian atas blog anda maka terdapat menu dropdown yang keren.
Selamat mencoba....

"MWcrew"

Cara Membuat Sliding Share Counters Button

mwafiez10@yahoo.co.id (Waff) — Mon, 16 Jan 2012 02:03:00 +0700

Sebelumnya saya berterimakasih kepada Mohammad Mustafa Ahmedzai yang telah membuat widget Sliding Share counters ini.
Umumnya widget ini berbeda dengan floating share counters yang ada pada blog-blog anda, widget ini mempunyai satu keunikan tersendiri yaitu apabila halaman dari blog anda di scroll kebawah maka widget ini pun akan mengikuti gerakan scroll tadi dengan animasi slide secara perlahan, berbeda dengan Floating share counters yang hanya diam dan mengikuti posisi scroll tersebut tanpa adanya animasi slide, oleh karena itu saya menyebutnya dengan Sliding share counters button.

Tutorial ini saya buat berdasarkan request teman saya yang bernama M. Hasan Mabruri yang kerap dipanggil Ruri dan merupakan founder dari MHMcrew17. Yups...langsung saja mari disimak cara pembuatannya...

Buatlah widget Html/JavaScript baru dan kemudian letakkan kode dibawah ini....

Code

<style>
/*-------MBT Floating Counters------------*/
#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:0;
z-index:100
}

#mbtsidebar {
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:220px;
width:55px;
margin:0 0 0 5px;
}
</style>


<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
</td>
</tr>
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="wafiezpunk">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://mwcrew10.blogspot.com/2012/01/cara-membuat-sliding-share-counters.html" target="_blank">Widgets</a></p>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

<!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 0,
targetY: 300,
hasInner: typeof(window.innerWidth) == 'number',
hasElement: typeof(document.documentElement) == 'object'
&& typeof(document.documentElement.clientWidth) == 'number',
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
floatingMenu.computeShifts = function ()
{
var de = document.documentElement;
floatingMenu.shiftX = 
floatingMenu.hasInner 
? pageXOffset 
: floatingMenu.hasElement 
? de.scrollLeft 
: document.body.scrollLeft; 
if (floatingMenu.targetX < 0)
{
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: document.body.clientWidth;
}
floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0)
{
if (floatingMenu.hasElement && floatingMenu.hasInner)
{
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else
{
floatingMenu.shiftY +=
floatingMenu.hasElement
? de.clientHeight
: document.body.clientHeight;
}
}
}
floatingMenu.calculateCornerX = function()
{
if (floatingMenu.targetX != 'center')
return floatingMenu.shiftX + floatingMenu.targetX;
var width = parseInt(floatingMenu.menu.offsetWidth);
var cornerX =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageXOffset
: document.documentElement.scrollLeft) +
(document.documentElement.clientWidth - width)/2
: document.body.scrollLeft +
(document.body.clientWidth - width)/2;
return cornerX;
};
floatingMenu.calculateCornerY = function()
{
if (floatingMenu.targetY != 'center')
return floatingMenu.shiftY + floatingMenu.targetY;
var height = parseInt(floatingMenu.menu.offsetHeight);
// Handle Opera 8 problems
var clientHeight =
floatingMenu.hasElement && floatingMenu.hasInner
&& document.documentElement.clientHeight
> window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight
var cornerY =
floatingMenu.hasElement
? (floatingMenu.hasInner 
? pageYOffset
: document.documentElement.scrollTop) +
(clientHeight - height)/2
: document.body.scrollTop +
(document.body.clientHeight - height)/2;
return cornerY;
};
floatingMenu.doFloat = function()
{
// Check if reference to menu was lost due
// to ajax manipuations
if (!floatingMenu.menu)
{
menu = document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId];
initSecondary();
}
var stepX, stepY;
floatingMenu.computeShifts();
var cornerX = floatingMenu.calculateCornerX();
var stepX = (cornerX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5)
{
stepX = cornerX - floatingMenu.nextX;
}
var cornerY = floatingMenu.calculateCornerY();
var stepY = (cornerY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5)
{
stepY = cornerY - floatingMenu.nextY;
}
if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0)
{
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = element[listener + '_num'] -1; i >= 0; i--)
{
if(element[listener + i](e) == false)
r = false;
}
return r;
}
}
//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
floatingMenu.init = function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.calculateCornerX();
floatingMenu.nextY = floatingMenu.calculateCornerY();
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window, 'onload',
floatingMenu.initSecondary);
}
//-->
</script>

Kemudian disimpan.

Note

Jika pada template anda belum terdapat kode tombol Google +1 maka tombol Google +1 tersebut tidak akan tampil.

Cara menampilkannya ialah masuk ke Edit Html dan cari kode </head> taruh kode ini persis diatasnya.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Kemudian Save, Lihat hasilnya....

Panduan Web Advertisement untuk Pemula (Blogger)

mwafiez10@yahoo.co.id (Waff) — Sun, 15 Jan 2012 23:34:00 +0700

Advertisement di setiap website atau blog hampir semuanya terdapat program per-iklanan sehingga website atau blog semakin sedap bila dipandang oleh mata. Jika itu memang benar mengapa di website atau blog anda belum terdapat program per-iklanan? untuk itulah MWcrew akan menjelaskan tentang Advertisement programs atau dalam bahasa indonesianya kerap disebut Program per-Iklanan.

Dimulai dengan pertanyaan yang sangat mendasar, pertanyaan ini ditujukan kepada kedua belah pihak antara Penerbit (Publisher) dan Pengiklan (Advertiser). Dalam kasus kedua, iklan adalah penting untuk mempromosikan layanan atau produk. Sementara dalam kasus penerbit perdebatan dapat benar-benar berlangsung selamanya.

Beberapa alasan (penting) untuk kecendrungan terhadap si penerbit iklan ialah :

Money, untuk pemula Anda tahu kan kualitas konten bisa mendatangkan harga? Konten akan menjadi raja (content is king) tapi bahkan raja-raja pun perlu koin untuk bertahan hidup. Tidak diragukan lagi mengapa penerbit akan memberikan spot iklan di situsnya. Siapa yang membenci akan datangnya uang? Sungguh? Siapa Orangnya?
Kedua, iklan pada halaman Web membantu pembaca menggali jauh ke dalam kedalaman dari internet dan menemukan konten yang kaya. Selanjutnya, jika Anda baik hati dan bersedia untuk membiarkan pembaca Anda meninggalkan situs web Anda sebagai imbalan untuk beberapa sen maka Anda pasti membantu pembaca dan pengiklan. Hanya pastikan bahwa Anda menampilkan beberapa iklan benar-benar asli atau jika tidak pembaca Anda mungkin akan sedikit kesal.
Ketiga, pengiklan yang berharga membantu dalam membangun citra penerbit. Ini bisa menjadi add-on yang luar biasa (jika Anda beruntung). Bayangkan iklan IBM (IBM Advertising) pada website Anda. Maka anda akan mendapat banyak listers dari website anda di posisi mereka dalam waktu yang singkat.

Anyway.., semua yang saya inginkan adalah untuk memahami bahwa Anda harus tahu mengapa Anda ber-iklan, sebelum Anda mengambil langkah berikutnya (klien sasaran Anda).

Who to Advertise ?

Sekarang Anda tahu bahwa mengapa iklan ini penting dan mengapa Anda ingin masuk ke dunia iklan online, saatnya Anda menyingkirkan semua hambatan yang tidak diinginkan sehingga Anda dapat melihat klien sasaran Anda dengan sangat jelas.

Ada dua tipe dasar target di mana Anda harus memfokuskan talenta Anda :

Pembaca......Benar! Pembaca menjadi alasan yang paling penting bagi keberhasilan situs Web Anda. Jika ada bagian dari website Anda yang dapat membuat pembaca anda tersinggung atau tidak nyaman maka mungkin akan menyebar seperti wabah antara pembaca Anda. Ini kasus yang sama dengan iklan yang muncul pada website Anda. Iklan yang ada pada website anda harus membantu target pembaca. Jika tidak, mereka akan membuktikan bahwa bahwa wabah itu akan menyebar bagi pembaca antara satu dengan yang lainnya. Anda dan pengiklan Anda tidak akan mendapatkan respon yang mereka harapkan. Sebuah suara yang biasa atau posting umpan balik yang dapat membuktikan sangat membantu untuk mengukur skenario tersebut.
Pengiklan.....Sekarang, Pembaca bagaikan Raja dan Ratu sehingga Anda seharusnya membuat mereka nyaman. Bayangkan sebuah organisasi ingin beriklan di situs Anda, tetapi tidak menemukan halaman "Advertise With Us" di situs Web Anda. Jika mereka cukup sabar maka mereka akan menggali halaman kontak situs Web Anda dan mencari email Anda. Jika tidak, mereka mungkin mulai mencari pilihan lain yang lebih mudah. Selain itu, akan menjadi ide yang baik untuk memberikan menu kepada pengiklan yakni yang biasanya disebut "Contact Me" sehingga mereka tidak terjebak di antara kesenjangan komunikasi. Ini akan membantu siapa pun selain pengiklan web atau blog anda.

How to Advertise (menggunakan cara yang jelas) ?

Hmmph! Jadi, Anda siap untuk beraksi? Saya kira sekarang Anda akan mencari beberapa opsi yang layak untuk membuka slot iklan di situs Anda dan mendapatkan dolar dengan cepat. Saya tidak akan fokus pada spot iklan biasa meskipun saya ingin menggunakan melalui iklan tersebut dengan cepat dan nyata :

Iklan spot (persegi atau persegi panjang) pada side bar adalah salah satu spot iklan yang paling umum saat ini tersedia di hampir setiap blog mungkin.
Di bawah judul (dan isi posting di atas) tempat iklan tempat lain yang dapat mengumpulkan jumlah tinggi perhatian.
Di header (sebelah logo) tempat iklan adalah sesuatu yang telah berlaku sejak lama dan tidak menarik banyak perhatian karena posisi prima (tapi kenapa blog ini masih menempatkan iklan disebelah logo?, yah karena blog ini masih dalam maintenance...).

Sama seperti 4 spot iklan ada beberapa posisi yang jelas (Sidebar) di mana orang bisa membuka iklan di blog. Tapi, Saya di sini untuk mendiskusikan sesuatu yang baru jadi let's do it....!!!

How to Advertise (selain menggunakan ide-ide diatas) ?

"Pembaca hampir tidak pernah melihat sesuatu yang terlihat seperti iklan"

Ini adalah semacam peringatan untuk pengiklan dan penerbit. Spot iklan yang terlalu mencolok mungkin memiliki beberapa pesaing di sekitarnya di beberapa situs.
Jangan salahkan ber-iklan menggunakan metode konvensional soalnya metode ini masih populer dan masih membantu sebagian besar blog di luar sana untuk menjaga keuntungan. Jadi, cara apa yang akan anda gunakan untuk mengiklankan produk di website Anda tanpa membunuh experience pembaca...???

Tips...

Melakukan Wawancara - Kedengarannya sederhana tapi itu bisa sangat efektif. Kita tahu (dari pengalaman pribadi sendiri kita) bahwa pembaca cenderung mengabaikan apapun yang terlihat seperti sebuah iklan. Dalam kasus seperti itu mengapa tidak mempublikasikan iklan? Tidak akan yang mendorong bahwa iklan berbasis konten yang benar ke pembaca feed Anda hanya seperti posting informatif lainnya. (Hei, aku tidak bermaksud posting dibayar). Setelah pengiklan menjadi biasa di blog Anda, Anda dapat melangsungkan melakukan wawancara dengan mereka sehingga untuk memahami bisnis dan membantu mereka untuk terkoneksi dengan pembaca Anda. Sebagai tindakan pencegahan, Anda dapat menambahkan "nofollow" untuk link yang keluar sehingga tidak terlihat seperti pasca bayar.
Biarkan pemilik produk menulis posting informatif - ini adalah daerah lain di mana Anda dapat memperluas cakrawala iklan Anda. Ingat, ini tidak harus dibayar jika Google akan mem-penalty anda. Sebaliknya, Anda harus memastikan bahwa posting ini berada di sinkron dengan niche Anda dan mereka tidak terlihat seperti infomersial. Ini akan menjadi kebijaksanaan Anda dan kemudian pada audiens Anda akan memutuskan apakah keputusan Anda sukses, atau bisa juga gagal.

Showcase

Siap untuk mendorong iklan di blog Anda? Siap untuk membuat uang? Berikut daftar menakjubkan mengenai Ad-Network yang harus anda kunjungi "Selain Google Adsense (GA)" karena GA hampir merupakan suatu hal yang wajib dipasang di web atau blog.

Buy Sell Ads

Tribal Fusion

Double Click

CPX Interactive

Advertising

Adtegrity

Burst Media

Casale Media

Value Click Media

Say Media

Hmmp!,,,Saya rasa cukup untuk sedikit panduan web advertisement di atas, Saya harap sobat semua sudah mempunyai gambaran mengenai program-program per-iklanan untuk blog anda.

"MWcrew"