Saturday, June 30, 2012

Membuat Tooltip dengan CSS Manual

Posted by dav On 10:10 AM
Membuat Tooltip dengan CSS Manual
Membuat Tooltip dengan CSS Manual - Tooltip Otomatis dengan CSS sebenarnya juga tidak sulit kita buat hanya saja sekarang saya masih ingin memposting Membuat Tooltip dengan CSS Manual Aregnoz Blog, Sharing Your Imagination.






Script HTML
<a class="tooltip" href="#">Test Demo <span>Blog tutorial CSS dan HTML 5</span></a>
Script Class
a.tooltip {
position:relative;
color:#cf2c2c;
text-decoration:none;
}
a.tooltip span {
padding:5px 10px;
background:#555;
border:1px solid #555;
min-width:140px;
position:absolute;
top:5px;
left:5px;
color:#FFF;
text-align:center;
opacity:0;
-moz-transition: opacity 1s ease,top 1s ease;
-webkit-transition: opacity 1s ease,top 1s ease;
-o-transition:opacity 1s ease,top 1s ease;
transition: opacity 1s ease,top 1s ease;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13px;
font-weight:bold;
}
a.tooltip span:before {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #555;
z-index:5;
content: " ";
position:absolute;
top:-7px;
left:11%;
}
a.tooltip span:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #555;
display:block;
content: " ";
position:absolute;
top:-8px;
left:11%;
}
a.tooltip:hover span {
opacity:1;
top:25px;
Tooltip ini bekerja secara manual namun sangat ringan sekali dan lebih variatif dibandingkan dengan kebanyakan tooltip yang sudah ada dan umum sekali.

Open Graph Metadata Untuk Blogger

Posted by dav On 6:47 AM
Bismillah. Alhamdulillah. Bingung dengan judul artikel ini? Saya juga bingung menentukan judul artikel kali ini, namun bahasan materinya tidaklah terlalu rumit dengan catatan bahwa pembaca artikel ini pernah menggunakan Facebook dan Blogger. Kenapa tidak menggunakan judul "Memperbaiki Snippet Deskripsi Blogger pada Facebook"? Atau "Menampilkan Deskripsi dan Gambar Artikel Blog pada Facebook?" dan lain sebagainya. Judul tersebut sepertinya terlalu praktis untuk digunakan dan mesin pencari sudah terlalu bingung dengan artikel-artikel tersebut. Artikel kali ini masih terkait dengan dua artikel sebelumnya yang membahas Integrasi Blogger Facebook. Fokus materi kali ini adalah Open Graph Protocol. Apa Open Graph? Apa hubungan Open Graph dengan Blogger, Facebook, Twitter dan situs jejaring sosial lainnya? Mari kita diskusikan...
Open Graph Metadata Untuk Blogger

Deskripsi

Blog adalah sebuah objek dihadapan jejaring sosial dan jejaring sosial mau tidak mau harus diakui sudah menjadi subjek bagi para pengguna internet didunia maya. Ketika seseorang membuka jejaring sosial maka mereka berharap dapat bertemu dengan teman-teman lama dan teman baru, menemukan ide-ide baru atau menemukan berbagai ilmu baru, untuk itulah saya menempatkan jejaring sosial menjadi sebuah subjek. Artikel yang kita buat pada blog dapat menjadi sebuah objek yang dapat digunakan untuk memperkaya konten jejaring sosial. Blog-blog dengan artikel-artikel menarik seringkali dibagikan via jejaring sosial, dan trafik pengunjung juga cukup signifikan berasal dari para pengguna jejaring sosial. Lalu bagaimana agar sebuah blog dapat terhubung dengan jejaring sosial dan mampu memperkaya konten jejaring sosial? Sederhananya, bagaimana agar blog kita bisa menjadi salah satu objek pada jejaring sosial?
Open Graph Protocol atau Protokol Grafik Terbuka menjadi sebuah standar yang disepakati bersama antar para pengembang jejaring sosial dan digunakan untuk menghubungkan sebuah objek (blog dan lain sebagainya) dengan subjek (jejaring sosial). Open Graph Protocol memungkinkan halaman web untuk menjadi sebuah objek pada Grafik Sosial (Social Graph). Salah satu situs jejaring sosial yang menggunakan Standar Open Graph Protocol adalah Facebook selain Twitter dan Google. Dengan standar Open Graph ini memungkin halaman-halaman blog kita memiliki fungsi dan posisi sama seperti halnya objek-objek lain pada Facebook.
Blog merupakan situs yang berdiri sendiri, Facebook juga demikian merupakan situs yang berdiri sendiri dan Open Graph berada diantara keduanya agar saling berhubungan dan saling berkomunikasi satu sama lain. Open Graph digunakan sebagai protokol standar untuk mengkombinasikan satu sama lain agar menjadi satu bagian, hal ini karena teknologi dan skema yang berbeda diantara para pengembang teknologi. Tidak ada satu teknologi yang menyediakan informasi sangat melimpah dan beragam yang mampu menandingi konsep Sosial Graph dan Open Graph Protocol dikembangkan berdasar pada teknologi Social Graph. Lalu dimana posisi API (Javascript SDK) yang sudah kita buat sesuai dua artikel sebelumnya? Sederhananya; API adalah kendaraan dan Open Graph Protocol adalah jalan penghubung.

Dasar Metadata

Setiap objek digital seharusnya memiliki metadata, bahkan sebuah photo yang kita sebar memalui internet itu memiliki metadata. Metadata berisi informasi tentang objek tersebut. Misal; sebuah photo memiliki informasi tentang; luas area photo, kepadatan pixel, tipe kamera, model kamera, waktu memotret, versi software, posisi objek tersebut diambil dan lain sebagainya. Informasi-informasi yang ada pada photo tersimpan pada metadata.
Untuk mengaktifkan halaman-halaman blog agar menjadi objek grafik (Graph Object) maka kita harus menambahkan metadata dasar pada halaman blog. Open Graph telah menyiapkan metadata yang berdasarkan pada standar protokol RDFa. Untuk menambahkan metadata pada halaman blog, berarti kita harus memasukan tag <meta> pada bagian <head>. Didalam metadata inilah tersimpan informasi tentang blog dan metadata tidak akan ditampilkan pada browser karena metadata layaknya sebuah informasi yang akan diambil dan ditampilkan apabila diakses oleh situs lain.

Proses Pengambilan Metadata

Dibawah ini gambaran proses sederhana ketika Facebook mengambil informasi metadata dari Blog.
Proses Pengambilan Metadata
Dari gambar diatas dapat diambil kesimpulan sebagai berikut:
  • Ketika pengunjung membuka halaman blog anda dan kemudian melakukan aksi (misal; suka, rekomendasi, berbagi dan lain-lain) melalui aplikasi yang sudah terintegrasi pada blog, maka...
  • Aplikasi akan mengirimkan aksi tersebut ke Facebook melalui otentikasi akun pengguna, jika pengguna belum melakukan login pada Facebook, maka aplikasi akan memintanya untuk login (dibahas pada artikel sebelumnya).
  • Facebook kemudian mengambil informasi halaman yang dikirim oleh pengguna melalui metadata yang disediakan pada halaman blog tersebut.
Beberapa saat yang lalu banyak beredar tutorial blog membahas tentang cara memperbaiki deskripsi blog yang tidak muncul pada Facebook, salah satunya membahas dengan cara menambahkan tag <p> pada awal artikel blog. Cara ini jelas bukan cara terbaik dan merupakan metode yang tidak sesuai dengan Social Graph Protocol, walaupun memang berhasil namun hal tersebut tidak sesuai standar dasar metadata.

Standar Metadata Open Graph

Sifat dasar metadata untuk halaman-halaman situs harus sesuai dengan protokol Social Graph. Sudah menjadi kesepakatan bersama bahwa protokol yang digunakan sebagian besar pengembang jaringan sosial adalah standar protokol Open Graph. Dibawah ini empat sifat Metadata Open Graph yang diperlukan untuk setiap halaman, yaitu:
  • og:title - Judul objek yang akan ditampilkan dalam grafik (misal; "Tampilkan Deskripsi Blog pada Facebook").
  • og:type - Ini jenis obyek halaman blog Anda (misal; "article"). Ini tergantung pada jenis yang Anda tentukan, properti lainnya silahkan baca pada halaman dokumentasi Open Graph.
  • og:image - Sebuah URL gambar yang mewakili objek dalam grafik. URL ini diambil dari halaman blog anda.
  • og:url - URL Canonical dari objek yang akan digunakan sebagai ID tetap dalam grafik (misal; "http://modification-blog.blogspot.com/metadata-tag.html").

Contoh Metadata Open Graph

Dibawah ini adalah contoh metadata standar Open Graph yang harus ada pada halaman situs, yaitu:
<html prefix='og: http://ogp.me/ns#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<meta property='og:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta property='og:type' content='article'/>
<meta property='og:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta property='og:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
...
</head>
...
</html>
Metadata ini diambil dari standar Open Graph yang secara global berlaku pada semua pengembang jejaring sosial baik itu Facebook, Twitter maupun Google Plus. Empat sifat dasar diatas adalah standar kesepakatan bersama, sedangkan properti lain adalah bersifat tambahan. Untuk properti lain dari Metadata Open Graph silahkan merujuk kesitus Open Graph.

Metadata Facebook

Setiap situs pasti punya kebijakan sendiri tentang pengunaan metadata, begitu pula dengan Facebook. Situs jejaring sosial ini menambahkan beberapa sifat dasar metadata sebagai hal wajib jika ingin terkoneksi dengan baik. Berikut sifat dasar Metadata Facebook, yaitu:
  • fb:app_id - Ini berisi ID Aplikasi atau API Key yang sudah kita buat pada artikel sebelumnya (masih ingatkan?).
  • fb:admins - Berisi ID User atau pengguna. Setiap membuat akun Facebook pasti kita diberikan ID User unik, masukan pada bagian ini.
  • og:site_name - Nama dari situs yang anda kelola.
  • og:description - Berisi deskripsi dari halaman situs blog anda.
Dibawah ini adalah contoh metadata standar Facebook yang harus ada pada halaman situs, yaitu:
<html xmls:fb='http://ogp.me/ns/fb#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<meta property='fb:app_id' content='1234567890'/>
<meta property='fb:admins' content='0987654321'/>
<meta property='og:site_name' content='Blogger Tune-Up'/>
<meta property='og:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
...
</head>
...
</html>
Metadata diatas adalah rekomendasi Facebook, hal ini berarti tidak bisa ditawar jika blog anda ingin terintegrasi dengan Facebook. Mengenai properti lain silahkan merujuk pada dokumen Pengembang Facebook.

Metadata Twitter

Twitter sebagai salah satu jejaring sosial besar juga tidak mau ketinggalan dengan menyediakan property metadata sendiri, seperti dibawah ini:
  • name='twitter:card' - Ini berisi informasi tentang situs dan pemilik situs.
  • name='twitter:site' - Anda harus membuat dulu akun Twitter khusus untuk blog anda (misal; @bloggertuneup), ketika seseorang membagikan melalui jejaring twitter maka properti ini akan otomatis dimasukan.
  • name='twitter:creator' - Ini berisi informasi alamat akun Twitter author blog (misal; @dedehendriono). Jadi anda harus memiliki akun twitter pribadi dan ketika seseorang membagikan halaman situs maka otomatis properti ini akan dimasukan.
  • Sedangkah Metadata selanjutnya hampir sama dengan Metadata Open Graph.
Dibawah ini adalah contoh metadata standar Twitter yang harus ada pada halaman situs, yaitu:
<html prefix='og: http://ogp.me/ns#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta name='twitter:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta name='twitter:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
<meta name='twitter:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
...
</head>
...
</html>
Metadata diatas adalah rekomendasi Twitter, hal ini berarti tidak bisa ditawar jika blog anda ingin terintegrasi dengan Twitter. Mengenai properti lain silahkan merujuk pada dokumen Pengembang Twitter.

Integrasi Metadata Pada Blogger

Sudah panjang lebar bahasan mengenai metadata, waktunya kita mengintegrasikan metadata pada Blog kita. Bagaimana cara mengintegrasikan metadata pada Blogger? Apakah semua harus dimasukan kedalam metadata Blog? Dibawah ini adalah contoh metadata secara keseluruhan hasil dari penggabungan Open Graph, Facebook dan Twitter yang dimulai dari Twitter dulu, yaitu:
<html prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<!-- Metadata Twitter -->
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta name='twitter:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta name='twitter:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
<meta name='twitter:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
<!-- Metadata Facebook -->
<meta property='fb:app_id' content='1234567890'/>
<meta property='fb:admins' content='0987654321'/>
<meta property='og:site_name' content='Blogger Tune-Up'/>
<meta property='og:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
<!-- Metadata Open Graph -->
<meta property='og:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta property='og:type' content='article'/>
<meta property='og:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta property='og:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
...
</head>
...
</html>
Metadata diatas jika langsung dipasang pada blog akan menampilkan metadata yang kacau balau. Metadata diatas hanyalah contoh.

Metadata Twitter, Facebook dan Open Graph Untuk Blogger

Dibawah ini metadata yang sudah disesuaikan dengan karakter Blogger. Ingat! Metadata ini khusus untuk pengguna Blogspot sedangkan pengguna platform blog yang lain, silahkan sesuai dengan metadata yang sudah dijabarkan diatas.
Sisipkan Document Conformance dibawah ini (seperti sudah dijelaskan pada artikel sebelumnya) pada tag <html>:
prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'
Masukan metadata dibawah ini pada tag <head>:
<!-- Metadata Twitter -->
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name='twitter:title' expr:content='data:blog.pageTitle'/>
<meta name='twitter:description' expr:content='data:blog.metaDescription'/>
<meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/>
<!-- Metadata Facebook -->
<meta property='fb:app_id' content='1234567890'/>
<meta property='fb:admins' content='0987654321'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
<!-- Metadata Open Graph -->
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:type' content='article'/>
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<meta property='og:image' expr:content='data:blog.postImageThumbnailUrl'/>
Lakukan penyesuaian metadata pada bagian dibawah ini:
  • content='@situsAnda' - ganti dengan akun situs di jejaring sosial twitter.
  • content='@userName' - ganti dengan akun anda di jejaring sosial twitter.
  • content='1234567890' - ganti dengan API Key atau Aplication ID situs anda di jejaring sosial Facebook (API Key sudah dibahas sebelumnya).
  • content='0987654321' - ganti dengan ID User anda di jejaring sosial Facebook.
  • content='article' - ganti dengan jenis blog anda, apakah berjenis artikel, photo, video dan lain sebagainya.
  • Anda bisa menambahkan conditional tag pada metadata sesuai dengan kebutuhan.

Memeriksa Metadata

Jika metadata sudah terintegrasi pada blog anda, lakukan permeriksaan metadata dengan alat Debugger Facebook atau foursquare.
Berikut contoh screenshoot pada Facebook:
Memeriksa Metadata

Masalah Metadata Deskripsi dan Gambar

Beberapa blog bisa saja bermasalah saat diuji metadata. Masalah yang sering ditemukan adalah:
  • Deskripsi Blog tidak tampil - Ini bukan masalah pada metadata diatas, namun pada meta deskripsi Blogger yang belum terintegrasi pada Blog anda. Ini akan dibahas pada artikel berikutnya.
  • Gambar muncul namun ada peringatan - Ini masalah internal pada Blogger yang hanya memberikan gambar thumbnail yang ter-crop pada ukuran 72x72 pixel, sedangkah Facebook memiliki standar ukuran minimal gambar yaitu 200x200 pixel. Mungkin ada yang bisa memecahkan?

Mencari ID Facebook User

Tadinya saya mengira semua sudah tahu ID Facebooknya masing-masing, ternyata ada juga yang kesulitan. Untuk yang kesulitan menemukan ID Facebook-nya, silahkan gunakan tools yang sudah saya buat. Cukup mudah, misal; saya mempunyai URL Facebook https://www.facebook.com/dede.hendriono, ambil namanya saja yaitu dede.hendriono kemudian masukan kedalam form input dan klik Submit. Halaman baru akan terbuka yang berisi informasi cukup lengkap tentang anda.

Kesimpulan

Akhirnya selesai juga menulis tentang Metadata. Lalu bagaimana dengan Google Plus? Kita tidak usah bingung dengan Google Plus karena Blogger merupakan bagian dari Perusahaan Google sudah jelas hal ini pasti diperhatikan tanpa perlu penambahan kode secara manual. Lalu apakah ini bagian dari teknik SEO? dan Apakah ini mempengaruhi SERP? Saya bukan ahli SEO, jadi tidak tahu perkara demikian. Saya menulis tentang artikel diatas hanya untuk mengikuti standar-standar yang disepakati bersama, dan tidak ada hubungan dengan pembahasan SEO. Sampai hari ini Blogger Tune-Up masih memegang prinsip "Tanpa SEO adalah SEO sebenarnya yang murni tanpa intimidasi" Sampai ketemu pada pembahasan berikutnya. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Friday, June 29, 2012

Plugin jQuery Image Maps

Posted by dav On 6:49 AM
Bismillah. Alhamdulillah. Berhenti sejenak dalam mempelajari Facebook API dan kembali ke dunia jQuery. Beberapa saat yang lalu Blogger Tune-Up pernah membahas tentang penggunaan tag HTML Maps Area Coords. Pada artikel kali ini Blogger Tune-Up mencoba menyederhanakan fungsi tag HTML Maps Area Coords dengan menulis sebuah plugin jQuery. Plugin ini memudahkan kita dalam memasukan koordinat XY kedalam peta. Ditambahkan beberapa tambahan mark (penanda) dan tooltip agar tampilan menjadi lebih bagus dan menarik. Bagaimana menggunakannya? Lanjutkan...

Deksripsi

jQuery Image Maps digunakan sebagai metode lain dalam mengganti fungsi-fungsi tag HTML Maps Area Coords. Kode jQuery utama yang digunakan dalam membuat plugin Image Maps adalah jQuery.data(). jQuery.data() akan melakukan pemeriksaan data pada koordinat XY yang dimasukan kedalam peta. Sehingga memudahkan kita dalam menentukan titik koordinat XY. Berbeda halnya dengan tag Coords yang mengharuskan kita menentukan titik koordinat XY lebih dari satu untuk sebuah area, dengan jQuery Image Maps kita cukup memasukan satu titik koordinat XY. Pada saat halaman diload sebuah markah atau penanda ditambahkan pada area peta dengan bentuk yang bisa disesuaikan, kita bisa menggunakan border atau icon sebagai penunjuk lokasi pada map, satu hal yang tidak bisa diterapkan pada tag HTML Maps Area Coords. Pada saat mouse hover atau berada diatas markah, sebuah tooltip yang berisi informasi keluar diatas atau dibawah markah. Posisi dan efek tooltips bisa kita atur sesuai dengan keinginan. Luas area maps atau peta secara otomatis akan menyesuaikan dengan luas (panjang dan lebar) gambar sehingga kita tidak perlu menentukan luas area map.

Kekurangan dan Kelebihan

Plugin jQuery Image Maps ini jelaslah masih mengandung banyak kekurangan, anda bisa saja kemudian memodifikasi dan menambahkan fungsi-fungsi baru untuk menghasilkan tampilan yang lebih sempurna. Beberapa kekurangannya adalah:
  • Tidak menggunakan tag HTML Maps Area Coords sesuai standar W3C, sehingga ada kemungkinan tidak lolos validasi (silahkan periksa sendiri).
  • Untuk membuat area polygon masih rumit, karena masih mengandalkan kode CSS3.
  • Baru diperiksa menggunakan framework jQuery versi 1.7.2 sehingga ada kemungkinan tidak bekerja normal pada versi sebelumnya (silahkan periksa sendiri).
  • Pada IE 8 tampilan tooltips tidak sempurna namun itu karena IE 8 belum mampu merender CSS3 dengan sempurna. Bukan kesalahan pada plugin.
  • Jika menemukan kelemahan, bug atau perbaikan lain silahkan tinggalkan pada komentar.
Sedangkan beberapa kelebihannya diantaranya:
  • Cukup satu titik koordinat XY untuk menentukan suatu area pada peta dengan luas yang bisa kita atur dengan mudah pada kode CSS.
  • Integrasi antara gambar dengan peta dilakukan secara otomatis oleh Plugin.
  • Area koordinat dalam peta bisa diberi mark atau penanda sesuai dengan yang kita inginkan. Bisa menggunakan rectangle, circle, rounded, polygon atau pun image (icon).
  • Dilengkapi tooltip yang akan keluar ketika mouse hover pada markah atau penanda.
  • Ukuran file plugin sangat kecil hanya 950 byte (versi minified).
  • Silahkan temukan sendiri kelebihan lainnya.

Skenario HTML

Dibawah ini adalah kode HTML yang digunakan sebagai area peta:
<div id="peta">

<img width="620" height="346" src="peta.jpg" alt="Peta"/>

<!-- Awal Area Satu -->
<div class="penanda atas" data-posx="255" data-posy="70">
<!-- Awal Isi Tooltips -->
<h2>iMac</h2>
<ul>
<li><b>Harga:</b> Rp 24.000.000</li>
<li><b>Tahun Produksi:</b> 2020</li>
</ul>
<!-- Akhir Isi Tooltips -->
</div>
<!-- Akhir Area Satu -->

<!-- Area Dua dan seterusnya -->

</div>
Hal yang harus diperhatikan pada skenario HTML ini adalah:
  • src pada tag img digunakan sebagai peta.
  • Ukuran gambar akan lebih baik ditentukan dengan width dan height, tetapi tidak menggunakan properti juga tidak apa-apa.
  • Tag alt pada gambar tidak berpengaruh pada plugin.
  • class="penanda": hukumnya wajib, karena class ini akan diakses oleh plugin. Sedangkan class=" atas" digunakan untuk menentukan posisi tooltip, jika dikosongkan (misal; class="penanda") maka tooltip akan muncul dibawah mark atau penanda. Jika ditambahkan class "atas" (misal; class="penanda atas") maka tooltip akan muncul pada bagian atas penanda.
  • data-posx="255": ganti nilai 255 sesuai dengan koordinat X pada gambar yang akan digunakan sebagai area.
  • data-posy="70": ganti nilai 70 sesuai dengan koordinat Y pada gambar yang akan digunakan sebagai area peta.
  • data-posx dan data-posy tidak boleh diganti, karena plugin akan mengambil nilai koordinat XY dari sini.
  • Untuk menentukan titik koordinat XY peta silahkan merujuk pada artikel sebelumnya tentang HTML Maps Area Coords, hanya saja cukup mengambil satu titik koordinat XY untuk setiap areanya.
  • Sedangkan tag yang berada didalam <div class="penanda" data-posx="" data-posy=""> adalah informasi yang akan muncul pada bagian tooltips. Anda bisa saja mengisinya dengan informasi yang sesuai dengan area pada peta.

Skenario CSS

Dibawah ini adalah skenario CSS yang digunakan untuk menentukan area penanda dan tooltips:
#peta {
position: relative;
margin: 20px auto;
border: 1px solid #ccc;
}

.penanda {
display: none;
}

.area {
width: 32px;
height: 32px;
position: absolute;
}

.buble-up, .buble-down {
background: url(../img/mark.png) no-repeat 0 0;
}

.buble-down {
background-position: 0 -32px;
}

.buble {
display: none;
width: 200px;
cursor: pointer;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 10px;
left: 50%;
z-index: 999;
margin-left: -115px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border: 1px solid #ccc;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.buble::after {
content: '';
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
border-bottom: 10px solid #ebf3fc;
border-left: 10px solid transparent;
border-right :10px solid transparent;
}

.buble-down .buble {
bottom: 12px;
top: auto;
}

.buble-down .buble::after {
bottom: -10px;
top: auto;
border-bottom: 0;
border-top: 10px solid #dce9f9;
}

.buble h2 {
font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
margin: 0 0 10px;
text-align: center;
}

.buble ul {
margin: 0;
padding: 0;
list-style: none;
}
Kode diatas tidak akan dijelaskan mendetail, jadi silahkan dipelajari sendiri. Namun ada bagian yang bisa anda modifikasi untuk menentukan bentuk atau jenis penanda, yaitu:
.area {
width: 32px;
height: 32px;
position: absolute;
}

.buble-up, .buble-down {
background: url(../img/mark.png) no-repeat 0 0;
}

.buble-down {
background-position: 0 -32px;
}
Silahkan kode diatas dimodifikasi sesuai dengan kebutuhan.

Skenario jQuery

Secara default skenario jQuery ditulis seperti dibawah ini:
$('#peta').imgMaps();
#peta diambil dari area yang akan digunakan sebagai peta. Perhatikan skenario HTML yang menggunakan id="peta". Anda bisa saja mengganti #peta sesuai dengan keinginan namun perhatikan bahwa id tersebut digunakan sebagai id area peta.
Secara lengkap kode jQuery ditulis seperti dibawah ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script type='text/javascript' src='URL/jquery.imgmaps.min.js'/>
<script>
$(document).ready(function(){
$('#peta').imgMaps();
});
</script>
Silahkan letakan kode diatas pada bagian atas tag </head> atau tag </body> pada halaman situs anda. Sedangkan untuk konfirgurasi tambahan anda bisa melakukan modifikasi kode jQuery menjadi seperti ini:
$('#peta').imgMaps({
speed: 250,
titik: 'penanda'
});
  • speed digunakan untuk menentukan kecepatan tampil tooltips, semakin kecil nilainya semakin cepat tampilannya. Efek yang digunakan adalah efek fade.
  • titik digunakan untuk menentukan class penanda, perhatikan class="penanda" pada skenario HTML diatas.

Kesimpulan

Plugin jQuery Image Maps bermanfaat bagi anda yang biasanya membuat situs sebagai sarana jual beli online. Anda akan dengan mudah untuk menentukan titik lokasi agen atau area dealer dari toko anda. Jika merasa tidak puas dengan fungsi plugin jQuery ini, silahkan lakukan modifikasi agar plugin ini bekerja sesuai dengan keinginan anda. Jika anda tidak keberatan, silahkan kirim informasi kepada author apabila ditemukan bug, perbaikan atau pengembangan pada plugin ini. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Wednesday, June 27, 2012

Bismillah. Alhamdulillah. Setelah kemarin kita belajar membuat aplikasi Facebook untuk Blogger, artikel kali ini adalah lanjutan dari pembahasan tentang Facebook untuk Blog. Application ID atau API Key adalah kunci yang akan kita gunakan pada artikel kali ini. Setelah aplikasi kita buat, sebenarnya banyak plugin dan fungsi yang bisa kita gunakan dari Facebook, namun bagaimana semua ini bisa terjadi? Dan bagaimana mana pula sebuah blog mampu mengambil data dari Facebook? Mari kita pelajari...
 Integrasi Facebook dengan Blog

Apa SDK?

SDK atau Software Development Kit (atau sering disebut "devkit") adalah seperangkat alat pengembangan perangkat lunak yang digunakan dalam pembuatan aplikasi software, framework software, platform hardware, sistem komputer, konsol video game, sistem operasi, atau platform yang serupa. Ini membuat proses pembuatan suatu aplikasi menjadi sangat sederhana seperti halnya sebuah Application Programming Interface (API) yang terbentuk dari beberapa file yang merupakan bagian dari sebuah bahasa pemrograman atau termasuk membuat komunikasi perangkat keras canggih dengan sistem yang sudah tersedia didalamnya. Peralatan ini umumnya menyediakan alat debugging atau utilitas lain yang sering dilampirkan pada Integrated Development Environment (IDE).

Facebook Javascript SDK

Seperti telah dijelaskan diatas mengenai peranan SDK dalam pengembangan perangkat lunak, begitu pula peranan JavaScript SDK yang disediakan oleh Facebook. Javascript SDK Facebook menyediakan beragam pengaturan fungsi client-side (sisi pengguna atau sisi browser) untuk mengakses Facebook melalui pemanggilan server-side API (sisi server Facebook). Termasuk fungsi-fungsi API REST, API Graph, dan Dialog-dialog. Kedepannya, kita dapat melengkapi berbagai mekanisme rendering versi XFBML untuk Social Plugin, dan membuka saluran untuk halaman Canvas sehingga mampu berkomunikasi dengan Facebook.

Proses Otentikasi Facebook

Dibawah ini sedikit gambaran bagaimana ketika user (pengguna Facebook) berkunjung ke halaman website anda dan kemudian melakukan suatu tindakan (berbagi konten atau suka).
Facebook Authentication Process

Penggunaan dan Integrasi Javascript SDK

Setelah cukup panjang membahas Facebook Javascript SDK, sekarang waktunya kita mengintegrasikan fungsi Javascript SDK ini agar mampu memanggil fungsi-fungsi API sehingga blog kita bisa berkomunikasi lancar dengan sisi server (server-side) Facebook. Sebenarnya ada beberapa metode lain yang bisa digunakan namun diantara cara yang disediakan Facebook, Javascript SDK-lah yang cocok untuk pengguna Blogger. Untuk lebih lengkapnya silahkan pelajari jenis-jenis SDK yang disediakan Facebook pada halaman Dokumentasi Developer.

[1] Penyesuaian Dokumen (Document Conformance)
Mungkin sebagian pembaca artikel ini ada yang bertanya-tanya, kenapa membutuhkan penyesuaian dokumen? Pihak Facebook menjelaskan bahwa Document Conformance ini digunakan agar plugin XFBML dapat bekerja dengan baik dan fitur-fitur tambahan lainnya dapat pula bekerja daripada menggunakan metode iframe. Dengan Document Conformance ini berarti diasumsikan bahwa fungsi API benar-benar terintegrasi dari pada metode numpang (iframe). Selain itu, terutama bagi para pengguna browser Internet Explore, Document Conformance digunakan agar XFBML (eXtensible Facebook Markup Language) dapat dirender (ditampilkan) dengan sempurna. Tanpa Document Conformance ini, Internet Explorer tidak akan mampu merender fungsi-fungsi API dengan sempurna.
Sisipkan Document Conformance XFBML dibawah ini pada tag <html>:
xmlns:fb='http://ogp.me/ns/fb#'
Sehingga menjadi seperti dibawah ini (contoh dibawah untuk Blogger yang masih menggunakan HTML 4.0)
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>

[2] Integrasi Javascript SDK Facebook
Setelah penyesuaian dokumen selanjutnya adalah integrasi Javascript SDK pada template blog. Javascript dibawah ini sudah disesuai dengan OAuth 2.0 (Open Standard Co-Authored) seperti dijelaskan oleh Jerry Cain pada blog Facebook dan juga telah dialihbahasakan sesuai dengan standar Facebook Localization.
Masukan (copy paste) kode Javascript SDK Facebook dibawah ini diatas tag </body> :
<div id='fb-root'/>
<script type='text/javascript'>
// <![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId: 'API_KEY',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/id_ID/all.js';
document.getElementById('fb-root').appendChild(e);
}());
// ]]>
</script>
Jangan lupa ganti API_KEY dengan ID Aplikasi yang telah anda buat sebelumnya. Kemudian simpan template anda...

Bersambung...

CSS Membuat Pop Up Button Image

Posted by dav On 4:24 AM
CSS Membuat Pop Up Button Image
CSS Membuat Pop Up Button Image 
Tutorial CSS Membuat Pop Up Button mengeluarkan Image Variatif Zooming dengan CSS 3 pasti anda bingung dengan judul yang saya buat dipostingan ini. Saya juga bingung mau ngasih judul apa, hee. Intinya ketika Button diklik maka akan menampilkan image dengan efek hover zooming. 

Tutorial CSS Membuat Pop Up Button Image ini bisa kamu terapkan di blog kamu dengan sedikit modifikasi sesuain dengan kebutuhan di web/blog kamu.


Jika kamu masih bingung silahkan lihat demo di bawah ini :



~ bagaimana Hot Bukan ~
Seperti itulah demonya, sangat sesuai judulnya yang aneh, hee..
Oke lanjut gan, jika memang anda tertarik silahkan embed script bawah ini :
<input class="popUpControl" id="popup" type="checkbox" />
<label class="elboton" for="popup">
  <span class="click">Gadis Hot</span>
  <span class="hiddenbox">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvnkVysMvX7LqXK7szLokWbxp4MUbiMyS1I8ficH0CEbnbOsnl3ex-K3UMlGcwGc0v1p-LdGDpU-kV8iOaAm2hVFulmIHjhzUU86IrucsAbyxvCDwrC1x6q7qgEMUjpzckB71X_fMTnO_n/s1600/FMI201070104.jpg" />
  </span>
</label>
<style>
  .elboton {
    background-color: #f90e;
    border-radius: 10px;
    box-shadow: 0 0 10px #222 inset;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    padding: 5px 15px;
    position: relative;
    text-shadow: 1px 1px 1px #000;
  }

  .elboton br {display:none;}
   .hiddenbox {
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 0 15px #000 inset;
    left: 0;
    line-height: 0;
    margin: 25px 0;
    opacity: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    top: 100%;
    z-index: 100;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
  }

  .popUpControl:checked ~ label > .hiddenbox {
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
  }

  .popUpControl {display: none;}
  .popUpControl:checked ~ label > span.click {display: none;}
  .popUpControl:checked ~ label:before {content: "Cabe Bugil";}
</style>
Silahkan disesuaikan dengan kebutuhan ente agan-agan.. ^_^

Salam Blogger Donomulyo.

Tuesday, June 26, 2012

Membuat Aplikasi Facebook Untuk Blog

Posted by dav On 6:54 AM
Bismillah. Alhamdulillah. Facebook sebagai salah satu jejaring sosial sudah tidak diragukan lagi manfaatnya oleh para Blogger. Banyak yang kemudian memanfaatkan Facebook sebagai sarana untuk berbagai artikel yang tentunya dapat mendatangkan trafik yang lebih banyak lagi. Telah banyak blogger membahas tentang integrasi Facebook pada blog dari mulai menambangkan tombol "SUKA" sampai dengan integrasi komentar Facebook dengan Blog. Mungkin Blogger Tune-Up baru kali ini membahas tentang Facebook dibandingkan blogger lainnya dan boleh dikatakan tertinggal informasi. Namun tidak ada salahnya Blogger Tune-Up membahas hal ini sebagai tambahan referensi.
Membuat Aplikasi Facebook

Deskripsi

Pada artikel kali ini kita akan membahas cara membuat aplikasi Facebook dengan mengintegrasikan blog didalamnya. Facebook telah memberikan kesempatan untuk memanfaatkan API (Application Programming Interface) yang banyak digunakan sebagai saluran integrasi antara satu aplikasi dengan aplikasi lain. Disini kita akan mengintegrasikan blog dengan Facebook. Manfaatnya cukup banyak, salah satunya adalah blog yang telah terintegrasi menggunakan API Facebook bisa memanfaatkan hampir semua widget yang disediakan oleh Facebook dengan mudah. Blog yang terintegrasi melalui API Facebook mempermudah pengunjung untuk berbagai konten, baik itu berupa rekomendasi artikel, menandai artikel yang disukai, membagi artikel pada jejaring pengunjung dan lain sebagainya. API sekarang sudah menjadi bagian dari situs-situs besar dengan tujuan untuk mempermudah para pembaca menjangkau artikel-artikel atau informasi yang dibuat oleh suatu situs. Penasaran dengan API? (sama... hehehehe...)
Tutorial kali ini mungkin belum membahas secara teknis tentang fungsi aplikasi Facebook yang telah kita buat. Pada artikel berikutnya baru akan membahas lebih mendalam tentang pemanfaatan aplikasi Facebook ini. Tujuan utama dari pembuatan aplikasi Facebook untuk Blog ini sebenarnya sederhana yaitu mengambil "KUNCI" API agar proses integrasi antara Facebook dengan Blog kita semakin mudah. Tanpa kunci maka sulit untuk saling berkomunikasi satu sama lain.

Proses Pembuatan Aplikasi

Mudah-mudahan penjelasan diatas memberikan sedikit gambaran tentang fungsi API Key yang akan kita ambil dari Facebook. Untuk membuat aplikasi pada Facebook ikuti langkah dibawah ini:
Langkah 1
Pastikan anda dalam keadaan login pada situs Facebook dan Blog dengan akun yang telah anda buat (direkomendasikan akun anda telah terverifikasi)
Langkah 2
Masuklah ke Pengembang Facebook (Facebook Developers)
Langkah 3
Klik menu Aplikasi
Membuat Aplikasi Facebook
Langkah 4
Klik tombol "+ Create New App"
Membuat Aplikasi Facebook
Langkah 5
Kotak Dialog "Create New App" terbuka, isilah data yang diperlukan kemudian klik tombol "Lanjutkan"
Mengisi Form Aplikasi Facebook
Langkah 6
Isilah kotak "Pemeriksaan Keamanan" sesuai dengan gambar yang tampil kemudian klik tombol "Kirim"
Verifikasi Form Aplikasi Facebook
Langkah 7
Halaman Aplikas terbuka seperti gambar dibawah ini.
Halaman Setting Aplikasi Facebook
Anda bisa saja menyesuaikan bagian ini sesuai keperluan anda, misal mengganti icon (harus 16x16, tipe file JPG, PNG atau GIF) atau mengganti logo (harus maksimal berukuran 75x75, tipe file JPG, PNG atau GIF). Namun bagian yang terpenting adalah pengisian "App Domains" isilah dengan blogspot.com dan "Site URL" pada "Website with Facebook Login", isilah sesuai dengan URL blog anda. Bagian lain abaikan saja jika masih bingung dalam penggunaannya. Kemudian klik tombol "Simpan Perubahan"
Langkah 8
Nah... Sekarang kita sudah memiliki API Key atau Application ID yang terdapat pada bagian atas. Biasanya tertulis seperti dibawah ini:
Nama Aplikasi
App ID: 12345678901234 (biasanya terdiri dari 15 angka)
App Secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx (bagian rahasia)
Langkah 9
Bersabarlah untuk menunggu artikel berikutnya... (hehehehe...)

Membuat Status via Aplikasi Anda

Ini anggaplah sebagai bonus saja dari pada tidak ada kegiatan setelah membuat aplikasi Facebook. Anda bisa menerbitkan status dari Aplikasi Facebook anda seperti gambar screenshoot dibawah ini:
Update Status dari Aplikasi Facebook
Caranya bagaimana?
1. Siapkan notepad atau yang sejenis kemudian copy paste URL dibawah ini:
https://www.facebook.com/dialog/feed?app_id=<APP_ID>&redirect_uri=http://modification-blog.blogspot.com
2. Ganti <APP_ID> sesuai dengan API Key/App ID (yang terdiri dari 15 angka) seperti terlihat pada langkah 8
3. Ganti URL http://modification-blog.blogspot.com sesuai dengan URL blog yang anda gunakan saat membuat aplikasi
4. Paste URL yang sudah dimodifikasi tersebut pada Adress Bar browser kemudian buka, maka halaman update status akan terbuka seperti dibawah ini:
Update Status dari Aplikasi Facebook
5. Kemudian "BAGIKAN!!!"... Berhasil!!!

Selamat mencoba dan semoga berhasil. Happy Blogging :)

CSS Membuat Caption Image Atraktif

Posted by dav On 2:58 AM
CSS Membuat Caption Image lebih Atraktif dan Gaya dengan CSS sebagian orang akan senang ketika blog atau Web nya bisa memberikan perbedaan dengan blog/web lainnya. Sekarang kita akan coba membuat tampilan image dalam blog kita lebih variatif dan atraktif dengan bantuan CSS.

Lihat Contohnya dibawah ini :


Adobe CS6

Download
Adobe EDGE CS 6
Sudah lihat kan contohnya.

Jika tertarik kamu bisa mengambil scriptnya dibawah ini sob.
1. HTML

<div class="view">
  <img src="URL_IMAGE" />
  <div class="mask">
    <h4> Title </h4>
    <p> Caption </p>
    <a href="#" class="info"> Text Button </a>
</div>
</div>

2. CSS

<style>
.view {
    border: 10px solid #FFF;
    cursor: pointer;
    height: 188px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 300px;
  }
  .view img {
    display: block;
    position: relative;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view:hover img {
    -moz-transform: rotate(720deg) scale(0);
    -webkit-transform: rotate(720deg) scale(0);
    -o-transform: rotate(720deg) scale(0);
    -ms-transform: rotate(720deg) scale(0);
    transform: rotate(720deg) scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view .mask {
    background-color: #ABC;
    height: 188px;
    left: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    width: 300px;
    -moz-transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view:hover .mask {
    -moz-transform: translateY(0px) rotate(0deg);
    -webkit-transform: translateY(0px) rotate(0deg);
    -o-transform: translateY(0px) rotate(0deg);
    -ms-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
    -moz-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view h4 {
    background-color: rgba(255, 255, 255, 0.5);
    color: #FFF;
    text-align: center;
    position: relative;
    font-family: Georgia;
    font-size: 20px;
    margin: 20px 0 0 0;
    padding: 5px 0;
    text-shadow: 0 3px 1px #000;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover h4 {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
  }
  .view p {
    color: #000;
    font-family: Tahoma;
    font-size: 13px;
    margin: 0;
    padding: 15px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #FFF;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover p {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  .view a.info {
    background-color: #456;
    border-radius: 5px;
    box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
    color: #FFF;
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view a.info:hover {
    box-shadow: 0 0 5px #FFF;
  }
  .view:hover a.info {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
</style>
 Oke silahkan dicoba dan disesuaikan dengan kebutuhan masing-masing hee.
^_^


Salam Blogger Donomulyo.

Monday, June 25, 2012

Jasa Maintenance Blog Gratis

Posted by dav On 12:10 AM
Jasa Maintenance Blog Gratis
Jasa Maintenance Blog Gratis
Jasa Maintenance Blog Gratis - Jasa Desain Blog dan Pembenahan Blog Gratis 2012 saya dedikasikan untuk keluarga saya yang telah memberikan saya motivasi dan saling tolong menolong kepada sesama. Bagi Anda yang berminat dengan penawaran saya untuk Jasa Maintenance Blog Gratis ini silahkan Contact saya.

Jasa Maintenance Blog Gratis ini benar-benar gratis Free 90% yang 10% biaya Kopi Om, hee... dan bukan saya menyombongkan diri atau apalah, hanya saja jika memang benar-benar butuh saya akan memberikan jasa maintenance gratis ini. Hanya untuk sekedar berbagi sedikit ilmu yang sudah saya pelajari selama ini, jadi tetep keep positif thinking gan.

Tidak semua yang request akan saya layani, hanya yang benar-benar niat menurut saya pribadi dan benar-benar butuh saja. Fasilitas meliputi redesign dan penataan tata letak serta pemilihan warna yang mungkin bisa disesuaikan dengan keinginan yang request.

Jasa Maintenance Blog Gratis ini sepenuhnya saya dedikasikan untuk keluarga saya dan sahabat-sahabat saya yang terus mendukungku dalam segala keadaan. Thanks a lot of my family and All my friends.

Contact Me :  Effand  [085649905055]
Personal Blog : Mas Effand

Periode : experied 30 November 2012
++++++++++++++++++++++++++++++++++++++++++++++++++

Friday, June 22, 2012

Triks Membuat Cursor Bertabur Bintang

Posted by dav On 10:54 AM
Triks Membuat Cursor Bertabur Bintang
Triks Membuat Cursor Bertabur Bintang - Cara membuat Cursor bertabur bintang saat digerakkan ini adalah cara agar Cursor kita selalu bertaburan Bintang ketika di gerakkan. Cara ini biasanya untuk menghias blog yang mempunyai warna-warna gelap atau selain putih karena akan terlihat lebih bagus dalam keadaan gelap.

Anda bisa mensetting Warna bintang nya dengan mengganti kode warna dalam script Javascript dibawah ini yang diberi warna berbeda.



Triks Membuat Cursor Bertabur Bintang dengan menggunakan script javascript ini bisa anda langsung praktekan sekarang juga dengan menaruh script dibawah ini di atas </head>
<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF"; /*ganti dengan warna sesukamu*/
var sparkles=40;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
 Setelah anda copy diatas </head> silahkan save template dan lihat hasilnya.


jQuery Modal Popup - Form Newsletter

Posted by dav On 4:16 AM
Bismillah. Alhamdulillah. Pada saat kita berkunjung pada suatu situs, sering kita dihadapkan dengan kotak popup yang meminta kita untuk berlangganan Newsletter (berita terbaru yang dikirim via email), dengan memasukan alamat email dan kemudian kita diberi sebuah panduan berupa eBooks sebagai ucapan terima kasih karena telah berlangganan. Nah, pada artikel kali ini kita akan membahas tentang pembuatan Popup Form Signup Newsletter tersebut.
jQuery Modal Popup - Form Newsletter

Deskripsi

Pada saat pengunjung membuka halaman kita maka cookie akan memeriksa, apakah browser yang membuka halaman situs kita sudah menyimpan cookie? Jika belum maka Form Newsletter akan ditampilkan, namun jika browser telah menyimpan cookie yang artinya telah pernah berlangganan maka Form Newsletter tidak ditampilkan. Pada saat Form Newsletter ditampilkan maka semua halaman situs akan ditutup overlay sampai pengunjung melakukan aksi "Close" atau "Submit" pada Form. Jika pengunjung hanya melakukan aksi "Close" maka cookie tidak akan menyimpan data apapun, sehingga saat pengunjung tersebut membuka situs kita lagi dilain waktu maka Form Newsletter akan ditampilkan lagi.
Untuk membuat Form Newsletter ini kita membutuhkan 3 buah plugin jQuery, yaitu:
  1. In-Field Label jQuery Plugin yang dibuat oleh Doug Neiner. Plugin ini digunakan untuk mengatur label pada input, agar ketika cursor aktif maka label akan disembunyikan. (plugin tambahan dan tidak terlalu penting)
  2. jQuery Modal Popup Plugin yang dibuat oleh Bjoern Klinggaard. Ini plugin yang digunakan untuk menampilkan dan mengatur popup. Plugin ini diberi nama jQuery bPopup dan kita akan menggunakan Versi 0.4.1. Untuk versi terbaru silahkan kunjungi situs pembuatnya.
  3. jQuery Cookie yang dibuat oleh Klaus Hartl. Plugin ini yang mengatur penulisan, pengecekan dan penghapusan cookie pada browser pengunjung.

Skenario HTML

Seperti biasa, untuk membuat sebuah elemen maka kita memerlukan sebuah kontener yang disimpan pada halaman HTML. Dibawah ini adalah kode HTML yang digunakan untuk membuat tampilan dari Popup Form Newsletter
<div id="jq-popup" style="display:none; background-color: #2C7BB3;"> 
<div class="pClose exit-button"></div>
<p>
<h1>Berita Gembira: Dapatkan Panduan 10 langkah untuk menjadi jutawan Internet!</h1>
<p>Jangan lewatkan untuk berlangganan informasi dari Blogger Tune-Up!</p>
<form method="post" id="newsletter-signup-form" action="URL Proses">
<fieldset>
<div id="newsletter" class="clear">
<p class="inline-label">
<label class="pInline inline-label" onclick='if (this.value == "Sign up now") { this.value = ""; }' for="email-address">Masukan Alamat Email Anda</label>
<input type="text" id="email-address" name="email" value="" />
</p>
<input type="submit" id="newsletter-submit" class="go-signup" value="Dapatkan Panduan Gratis"/>
</div>
</fieldset>
</form>
<p class="not-ready">Mungkin lain waktu? Baiklah, Kenapa tidak berlangganan <a href="http://feeds.feedburner.com/BloggerTune-up">RSS Feed</a></p>
</p>
</div>
Bagian terpenting dari Form Newsletter diatas adalah sebagai berikut:
  • id="jq-popup" : Ini bagian yang akan kita registrasikan pada plugin. Jika anda menggantinya maka ganti pula pada skenario jQuery-nya. (Sebaiknya jangan diubah jika belum memahaminya)
  • class="pClose exit-button" : Bagian pClose sebaiknya jangan diganti karena bagian ini akan diakses oleh Plugin jQuery bPopup.
  • id="newsletter-signup-form" : Bagian ini yang akan diregistrasikan pada jQuery Cookie.
  • action="URL Proses" : Gantilan URL Proses dengan alamat URL yang telah anda siapkan untuk memproses data input dari form.
  • class="pInline inline-label" : Bagian ini juga akan diakses oleh plugin jQuery bPopup dan jQuery In-Field Label,jadi biarkan seperti itu.
  • Sedangkan bagian-bagian lain silahkan sesuaikan dengan imajinasi dan kebutuhan anda.

Skenario CSS

Skenario CSS dibawah ini digunakan untuk memberikan sentuhan menarik pada form newsletter. Jika anda mengerti tentang bahasa CSS, silahkan manipulasi sesuai dengan imajinasi anda. (Ma'af tidak bisa menjelaskan baris perbaris...)
#jq-popup h1 {
font-family: Arial,Helvetica,sans-serif;
font-size: 1.75em;
line-height: 1.375em;
margin: 0 0 0.5em;
font-weight: 700;
color: #FEFEFE;
}
#jq-popup .hidden {
display: none;
visibility: hidden;
}
#jq-popup input[type="button"], #jq-popup input[type="submit"], #jq-popup button {
cursor: auto;
}
#jq-popup select, #jq-popup input, #jq-popup textarea, #jq-popup button {
font: 99% sans-serif;
}

#jq-popup p.inline-label {
position:relative; color:#000000;
}
#jq-popup label.inline-label {
position:absolute;
top:22px;
left:15px;
text-shadow: none;
}
#jq-popup {
width: 500px;
padding:20px;
background: #2c7bb3;
border: 5px solid #fafafa;
color: #fefefe;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.5em;
text-shadow: 0 1px 1px #444;
box-shadow: 0 0 10px #000, 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset, 0 0 1px rgba(0, 0, 0, 0.4), 0px 16px 14px -10px rgba(0, 0, 0, 0.5);;
-webkit-box-shadow: 0 0 10px #000, 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset, 0 0 1px rgba(0, 0, 0, 0.4), 0px 16px 14px -10px rgba(0, 0, 0, 0.5);;
-moz-box-shadow: 0 0 10px #000, 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset, 0 0 1px rgba(0, 0, 0, 0.4), 0px 16px 14px -10px rgba(0, 0, 0, 0.5);
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#jq-popup form fieldset {
border: none;
}
#jq-popup p {
margin: 0px;
}
#jq-popup a, #jq-popup a:visited {
color: #fff;
}
#jq-popup #email-address {
font-size: 16px;
width: 474px;
border: 3px solid #cecece;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#jq-popup #newsletter-submit {
float: right;
display: block;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,0.45);
font-weight: 700;
background: #d08032 url(img/button-gradient.png) 0 50% repeat-x;
border: 1px solid #d08032;
padding: 7px;
text-align: center;
margin-bottom: 10px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#jq-popup #newsletter-submit:hover {
background: #d05032 url(button-gradient.png) 0 50% repeat-x;
border-color: #d05032;
}
#jq-popup .exit-button {
display: block;
position: absolute;
top: -15px;
right: -15px;
width: 25px;
height: 25px;
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/s800/jquery.imageZoom.png) no-repeat;
}
#jq-popup .exit-button:hover {
cursor:pointer;
}
#jq-popup .exit-phrase {
margin: 15px 0 0 0;
float: right;
}

Skenario jQuery

Perhatikan skenario jQuery dibawah ini agar kita mampu melakukan modifikasi fungsi sesuai kebutuhan dan imajinasi.
jQuery(document).ready(function () {
// Menghubungkan Cookie dengan aksi tombol submit
jQuery("#newsletter-signup-form").submit(function () {
jQuery.cookie("popup_seen_", '1', {
expires: 30,
path: "/"
});
});
// Membuat Popup
if (jQuery.cookie('popup_seen_') != 1)
jQuery('#jq-popup').bPopup({
cookieClose: true,
cookieExpire: 30,
modalColor: "#000",
modalClose: false,
vStart: 100,
closeClass: "pClose",
delay: 1000,
follow: false,
inlineClass: "pInline",
inlineLabel: true,
escClose: true
});
});
Skenario jQuery diatas dibagi menjadi 2 blok, yaitu:
Penulisan Cookie
jQuery("#newsletter-signup-form").submit(function () {
jQuery.cookie("popup_seen_", '1', {
expires: 30,
path: "/"
});
});
Jika pengunjung melakukan submit dengan identitas tombol #newsletter-signup-form maka jQuery Plugin akan menuliskan cookie dengan nama popup_seen_ dengan nilai (value) 1. Cookie ini akan berakhir pada 30 hari kedepan (expires: 30) dan cookie ini berlaku pada semua halaman situs (path: "/").

Pengecekan Cookie dan Pembuatan Form Newsletter
if (jQuery.cookie('popup_seen_') != 1)
Pemeriksaan cookie. Jika cookie bernama popup_seen_ tidak sama dengan 1 maka...
jQuery('#jq-popup').bPopup({
Form Newsletter dengan identitas #jq-popup akan dibuat
cookieClose: true,
Jika bernilai true maka cookie akan ditulis ketika tombol Close diklik. Jika bernilai false maka cookie tidak akan ditulis ketika tombol close diklik.
cookieExpire: 30,
Cookie akan berlaku selama 30 hari kedepan
modalColor: "#000",
Untuk menentukan warna Overlay atau warna latar dari form
modalClose: false,
Jika bernilai false maka ketika overlay/latar di klik maka form tidak akan ditutup. Jika bernilai true maka form akan ditutup ketika overlay/latar diklik.
vStart: 100,
Vertical Start atau jarak form dari atas. Ubah nilai untuk menentukan posisi form saat diload secara vertikal.
closeClass: "pClose",
Ketika tombol dengan class pClose diklik, maka form akan ditutup.
delay: 1000,
Jeda waktu tampil form dimulai saat halaman diload. Idealnya 5000 milidetik.
follow: false,
Jika bernilai false maka form tidak akan mengikuti pergerakan halaman ketika discroll. Jika bernilai true maka form akan selalu berada ditengah halaman ketika pengujung melakukan scroll halaman.
inlineClass: "pInline",
Class pInline digunakan untuk menampilkan label yang akan diakses juga oleh plugin jQuery In-Field Label
inlineLabel: true,
Jika bernilai true maka label akan ditampilkan. Jika bernilai false maka label (Masukan Alamat Email Anda) tidak akan ditampilkan.
escClose: true
Jika bernilai true maka ketika pengunjung menekan tombol Esc maka form akan ditutup. Jika benilai false maka tombol Esc tidak berpengaruh pada form.
});
Fungsi pembuatan Popup ditutup

Total Skenario

Lalu bagaimana integrasi pada Blogger? Pastikan anda berada pada Template - Edit HTML kemudian tempat bagian-bagian dibawah ini.
[1] Tempatkan kode dibawah ini diatas tag </head>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script src='https://raw.github.com/hendriono/Blogger-Plugins/master/js/jquery.infieldlabel.js'/>
<script src='https://raw.github.com/hendriono/Blogger-Plugins/master/js/jquery.bpopup.js'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js'/>
<script type="text/javascript">//<![CDATA[
jQuery(document).ready(function () {
// Menghubungkan Cookie dengan aksi tombol submit
jQuery("#newsletter-signup-form").submit(function () {
jQuery.cookie("popup_seen_", '1', {
expires: 30,
path: "/"
});
});
// Membuat Popup
if (jQuery.cookie('popup_seen_') != 1)
jQuery('#jq-popup').bPopup({
cookieClose: true,
cookieExpire: 30,
modalColor: "#000",
modalClose: false,
vStart: 100,
closeClass: "pClose",
delay: 1000,
follow: false,
inlineClass: "pInline",
inlineLabel: true,
escClose: true
});
});
//]]></script>
[2] Tempatkan kode CSS (Skenario CSS) diatas kode ]]></b:skin>
[3] Tempatkan kode HTML (Skenario HTML) diatas kode </body>

Kesimpulan

Kode diatas hanya dijelaskan secara praktis dan sederhana. Jika anda merasa tidak puas dengan penjelasan diatas silahkan lakukan ekplorasi pada situs pembuat dari plugin-plugin yang sudah disebutkan diatas. Semua kembali kepada imajinasi anda. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Thursday, June 21, 2012

Download Template Toko Online Shopping Cart

Posted by dav On 12:41 AM
Download Template Online Shopping Cart - Template ini sudah lama di share oleh empunya sehingga saya hanya menulisnya ulang dengan bahasa saya. Dan silahkan Download dengan bebas karena memang template Toko Online ini tidak dijual alias GRATIS 100%.

Download Template Online Shopping Cart Template toko online yang simple tapi sangat mudah untuk para customer menggunakannya.

Download Template Online Shopping Cart

Bagi Anda yang ingin menggunakan Template ini silahkan Ikuti cara menggunakan template ini :

Blogging platform lainnya seperti Wordpress memiliki "Custom Fields" pilihan yang memungkinkan kita untuk menambahkan deskripsi tambahan seperti harga dan thumbnail tanpa harus menambahkan kode HTML di editor posting. Tapi, Blogger tidak memiliki fitur itu. Jadi, kita akan coba untuk membuat item posting semudah mungkin dengan menggunakan metode tabel. 












Berikut adalah bagaimana tabel terlihat di editor posting.

Download Template Online Shopping Cart


















Langkahnya adalah silahkan agan-agan menuju custome post Template yang ada di blog anda.
Kemudian paste script berikut ini :
<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8wshshaJz5BZFpwviR8zK57U33BNYCUMC4wbsj8BHMnnxr7uYN3O8tpnAclaWJH8BZJ4-xsc9_e9z52wVrCFGt8pXRNP2ij2Tu8aZIOkoh_7FvOlmn5D0lWZhRokWOFbRRW78Z_DhkHRp/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8wshshaJz5BZFpwviR8zK57U33BNYCUMC4wbsj8BHMnnxr7uYN3O8tpnAclaWJH8BZJ4-xsc9_e9z52wVrCFGt8pXRNP2ij2Tu8aZIOkoh_7FvOlmn5D0lWZhRokWOFbRRW78Z_DhkHRp/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
  <td><input class="item_add" type="button" value="Add to Cart" /></td>
</tr>
<tr>
  <th><b>Item Name</b></th>
  <td class="item_name">Tulis Nama Produk Disini</td>
</tr>
<tr>
  <th><b>Price</b></th>
  <td class="item_price">$99.99</td>
 </tr>
<tr>
  <th><b>Description</b></th>
  <td class="item_Description">Deskripsi Produkmi Disini</td>
 </tr>
<tr>
  <th><b>Stock</b></th>
  <td>Jumlah Stock</td>
</tr>
<tr>
  <th><b>Misc</b></th>
  <td>Tambahkan extra gambar/image lainnya bisa disini</td>
</tr>
</tbody>
</table>

Untuk Setting Paypal
Langsung ke Desain> HTML. Carian simpleCart gunakan CTRL + F. Anda akan menemukan potongan kode ini.
<script type='text/javascript'>
simpleCart.email = &quot;bocahnoz@gmail.com&quot;;
simpleCart.checkoutTo = PayPal;
simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];</script>
Ganti alamat email diatas.

Sekarang, pergi ke Desain> Edit HTML. Tambahkan kode di bawah ini tepat sebelum penutup </ head>.

<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>
Kemudian silahkan anda daftar di Contacr.com
jika sudah daftar kamu perlu mengganti salah satu kode di edit html, cari :- id=39662; kemudian replace dengan Codemu yang sudah kamu daftarkan tadi.


Cari Code :
input.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}
Replace dengan ini :
span.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}
Cari lagi kode berikut :
input.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
}
Replace dengan ini :
span.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
NB : Cari script berikut
<script src='http://introbloggerscripts.googlecode.com/files/cart.js' type='text/javascript'/>
Replace dengan ini :
<script src='http://shopppingcart.googlecode.com/files/simplecart.js' type='text/javascript'/>