PPC (Pay Per Click) Terbaik Indonesia Lokal

Pay Per Click atau disingkat PPC adalah sebuah metode kerjasama periklanan di internet dimana webmaster atau pemilik situs akan dibayar atas setiap klik pengunjung situs pada link iklan yang terpasang di website atau blog miliknya. Mungkin loe udah tahu PPC yang paling terkenal adalah PPC milik google adsense, tetapi google adsense sekarang udah nerapin syarat yang sangat ketat sehingga banyak publisher indonesia sering di tolak waktu mendaftarkan web atau blognya.

Syarat yang paling harus dipenuhi oleh para publisher adalah kita harus daftarin blog yang berkualitas, tidak boleh situs download mp3 dll. Oleh karena itu sekarang PPC asal Indonesia banyak diminati .

Berikut ini gue kasi beberapa situs PPC indonesia yang bergerak dalam bidang seperti google adsense . Persyaratan yang di berikan pada situs-situs dibawah ini tergolong tidak terlalu sulit dibandingkan persyaratan yang diberikan oleh google adsense.

1. Kumpulblogger.com
Kumpul blogger merupakan jaringan Blogger Indonesia untuk mendapatkan alternatif penghasilan tambahan, dengan cara menyediakan spot/ruangan pada blognya sebagai tempat menyampaikan pesan komersial dari Advertiser. Publisher akan mendapatkan 1 kali Klik Type Text Links senilai Rp.300, Type Mini Banner senilai Rp. 350 , maka bisa dihitung sendiri jumlah revenue yang didapat perbulan.

2. Pub.Kliksaya.com
KlikSaya adalah pasar periklanan online khusus untuk wilayah Indonesia.
Publisher akan mendapatkan komisi sebesar 50% dari harga per klik yang ditawarkan oleh pemasang iklan.

3. Ppcindo.com
Ppcindo merupakan bentuk usaha jasa layanan pemasangan iklan secara online pada jaringan situs ppcindo. Publisher akan mendapatkan komisi yang lebih tinggi berdasarkan Alexa Rank (50% untuk publisher).

4. Klikrupiah
Klikrupiah adalah suatu website pemasang iklan dimana setiap anggota melihat iklan akan dibayar Rp 100 untuk setiap iklan dengan waktu 31 detik dan anda akan mendapatkan pemasukan juga jika anda mengajak teman anda .

5. Adsensecamp.com
AdsenseCamp merupakan website yang memberikan kesempatan bagi Anda untuk memperoleh penghasilan tambahan dengan menyediakan ruang pada website Anda sebagai tempat pemasangan iklan bagi advertiser.

6. Ppcinbox.com
Ppcinbox.com merupakan website yang memberikan kesempatan bagi Anda untuk memperoleh penghasilan tambahan dengan menyediakan ruang pada website Anda sebagai tempat pemasangan iklan bagi advertiser.
Publisher akan dibayar Rp 100,- Rp 150,- untuk iklan teks dan Rp 200,- Rp 300,- Rp 500,- untuk iklan banner untuk setiap iklan yang diklik oleh pengunjung web anda (CPC).

7. Adspeedy
Adspeedy adalah portal periklanan online yang berfungsi untuk mempertemukan Advertiser (pemilik iklan) maupun Publisher (penerbit iklan).
Pemberian komisi klik & impression adalah sebesar 50% hingga 80%.
Persentasi kenaikkan komisi akan dilakukan secara bertahap berdasarkan reputasi, sedangkan pembayaran akan ditransfer langsung ke-rekening bank.

8. Adsentra.com
Adsentra menghadirkan layanan Jaringan Periklanan Indonesia atau istilah populernya Indonesia Advertising Network.

9. Bagus.coTampilkan iklan BAGUS.CO pada situs Anda, dapatkan bayaran untuk setiap unik klik pada iklan. BAGUS.CO memberikan sistem afiliasi bagi Publisher. Pembayaran komisi dilakukan setiap bulan melalui Paypal atau rekening bank dengan minimal jumlah komisi Rp 25.000.

10. Pesan.comPelajari cara untuk meningkatkan penghasilan Anda dari halaman web Anda menggunakan PESAN.com account penerbit. - Tampilkan teks / banner iklan yang paling relevan dengan konten situs Anda. - Pertama di Asia, PPC system membayar publisher harian !!. - Pembayaran komisi dilakukan setiap hari melalui rekening bank Anda dengan minimal jumlah komisi Rp 100.000,- - Pembayaran komisi yang sangat besar untuk publisher, minimal Rp 150 per klik sampai rp 3000 per klik tergantung dari bid para pengiklan.

11. Adsoke.comadsoke.com adalah ad.soebat.com perubahan domain ini kami lakukan, agar Advertiser dan Publisher mudah browsing ke adsoke Bergabung di adsoke sebagai program kemitraan penerbit iklan dan mulailah untuk mendapatkan penghasilan dari situs web/blog Anda mulai hari ini

12. Sitti.co.idIklan kontekstual adalah iklan terpasang di halaman situs/blog yang tepat, menjangkau pengunjung situs yang sesuai dengan profil yang disasar pemasang iklan. Profil ini termasuk umur, jenis kelamin, profesi, sampai gaya hidup. Teknologi yang dipakai adalah berdasarkan kata kunci (keyword). Sistim SITTI membaca dan mengolah kata kunci untuk memilih iklan yang relevan/sesuai untuk ditampilkan di situs yang sedang dibaca pengunjung. Untuk pemasang iklan, jaringan ini membantu menjangkau sasaran pasar yang luas. Selain itu impresi iklan gratis, anggarannya fleksibel dan pengiklan bebas menentukan di kota mana iklan akan ditayangkan. Sedangkan untuk pemilik blog dan situs, halaman dalam blog/situs bisa dimanfaatkan untuk mendapat keuntungan dari pemasangan iklan melalui SITTI dan bisa menjadi sumber penghasilan bulanan.

13. IdBlogNetwork.comIdblogNetwork siap bekerjasama dengan blogger/publisher yang memiliki mayoritas kriteria pembaca blog seperti dibawah ini 1. Anak Muda P/W berumur antara 17-22 tahun 2. Wanita / Karir/Ibu rumah tangga berumur 21-45 tahun 3. Eksekutif professional / Pengusaha P/W berumur 25-45 tahun ke atas Siapa saja boleh bergabung apabila memiliki konten orisinal, Tidak ada SARA, passion terhadap dunia blogging, memiliki tulisan inspiratif. Dengan konten blog yang berkualitas, target market yang sesuai pada jaringan IdblogNetwork kami yakin dapat membantu advertiser dalam melakukan kampanye marketing yang efektif

14. BloggerBersatu.comBloggerBersatu.com adalah Website Jaringan Periklanan Online berbasis PPC / Pay Per Klik atau Bayar Per Klik dengan harga termurah yang menawarkan jasa periklanan kepada anda para Advertiser (Pemasang Iklan) yang berkeinginan mempromosikan website atau usaha onlinenya yang bakal disebarkan kepada ribuan web owners / blogger yang telah terdaftar di BloggerBersatu.com. BloggerBersatu.com juga merupakan website yang memberikan kesempatan bagi anda para Publisher (Penerbit Iklan) untuk memperoleh pulsa gratis dengan menyediakan ruang / space pada website atau blog anda sebagai tempat pemasangan iklan bagi advertiser.

15. Adstars.co.idMerupakan salah satu PPC premium yang mengutamakan nilai traffic dan konten blog. Adapun syarat dari PPC ini adalah blog harus memiliki page view min 150.000 selama 3 bulan terakhir. Untuk lebih lengkapnya silakan langsung membuka

16. TugasBlogger.comTugasblogger.com Sebuah Media website dengan system payperklik atau PPC yang berfungsi untuk meraih penghasilan bagi Publisher maupun Advertiser. Kami Jaringan Iklan Terbaik. Kami membuat Advertiser menjual lebih banyak dan membuat Publisher (Blogger) mendapat komisi lebih besar. Memampukan kata kunci iklan anda tertarget pada jaringan PPC kami yang telah dibuat dengan benar dan terbuka. Jaringan PPC kami memfasilitasi antara pengiklan dan penerbit. Memberikan pengiklan dan penerbit kontrol penuh pada kampanye iklan yang tidak dapat ditemukan dalam jaringan iklan lainnya. Dengan iklan banner dan teks, Tugasblogger telah menciptakan pasar iklan sederhana dan kuat dan akurat bagi perusahaan dan individu dari semua ukuran Raih tambahan penghasilan Anda Manfaatkan iklan dari TugasBlogger untuk mendapatkan penghasilan dari situs Anda. Situs Anda akan kami lengkapi dengan link iklan teks dengan system bayar per klik. Anda akan mendapatkan penghasilan apabila ada yang melakukan klik terhadap iklan kami di situs Anda.

17. Pusatklik.comJika Anda memiliki website atau blog, Anda berpeluang mendapatkan penghasilan tambahan hanya dengan bergabung menjadi Publisher kami. Publisher dapat memasang script link iklan dari Advertiser yang tergabung di PusatKLIK dengan system bayar per klik. Anda akan mendapatkan penghasilan apabila ada yang melakukan klik terhadap iklan kami di situs Anda. Raih penghasilan pasif income melimpah dari website atau blog Anda. Gue pikir akan bermunculan lebih banyak lagi program PPC dari Indonesia seperti ini, mengingat peminat yang semakin besar dalam usaha bisnis online ini!!!

18. iklanblogger.com IklanBlogger.com adalah website media promosi Iklan PPC (Pay Per Click) Indonesia yang menghubungkan pemasang iklan (advertiser) dengan para penerbit iklan (publisher)dalam menayangkan promosi melalui media internet sebagai sarana dalam pengembangan bisnis di Indonesia.

Selain dari itu kami juga memberikan kesempatan bagi Anda untuk mendapatkan penghasilan online secara radikal (mudah, sederhana & instant), hanya dengan menjadi publisher disini secara gratis, hanya dengan sediakan sedikit ruang pada website atau blog Anda untuk tempat link iklan dari IklanBlogger.com, dan raih tambahan penghasilan online sekarang juga.

Keuntungan Menjadi Advertiser

Bergabunglah bersama IklanBlogger.com disini untuk menyebarkan iklan anda dengan mudah, murah dan efektif.

Sebagai advertiser, Anda dapat memasang iklan pada website/blog yang bekerjasama dengan IklanBlogger.com dengan sekali kirim saja. Sebar iklan Anda dan minimalkan waktu promosi Anda bersama IklanBlogger.com disini.

Untuk memulai promosi Anda disini haruslah  register terlebih dahulu sebagai pemasang iklan/advertiser, selain dari itu pasang iklan disini dengan minimal Rp 30.000,- sudah bisa pasang iklan dan harga perklik iklannya sangatlah terjangkau mulai 400/klik dan selain dari itu Anda juga akan mendapatkan bonus tambahan lagi hingga 60% secara GRATIS dari deposit yang Anda lakukan nantinya. Kami menggunakan sistem Pay Per Click, dimana Anda hanya perlu membayar dari per unik klik saja pada iklan Anda. Jadi Anda hanya membayar untuk setiap pengunjung dengan IP yang berbeda.

Dengan menggunakan perlindungan sistem fraud protection (1 IP / iklan )yang teruji kehandalannya, disini setiap rupiah yang Anda keluarkan tidak akan sia-sia. Iklankan apa pun produk Anda. IklanBlogger.com merupakan pilihan tepat bagi product owner, affiliate ataupun reseller dll.

Keuntungan Menjadi Publisher

Bergabunglah sekarang juga bersama IklanBlogger.com untuk mendapatkan penghasilan tambahan Anda secara mudah dan gratis. Anda bisa daftar menjadi penerbit iklan/publisher disini tanpa bayar sama sekali, setelah Anda pasang kode iklan kami diblog/website Anda untuk pertama kalinya dan zona iklan tersebut pastikan telah disetujui IklanBlogger.com selanjutnya akan bisa mendapatkan komisi per klik.

Website/blog Anda akan kami pasangi iklan-iklan dengan sistem bayar per klik unik. Anda akan mendapatkan komisi mulai dari Rp 200 (hingga lebih) untuk setiap klik valid (1 IP / iklan )yang terjadi pada iklan-iklan tersebut. IklanBlogger.com memberikan sharing profit yang sangat menguntungkan sekali kepada publisher dengan persentasi mulai dari 40% untuk network owner IklanBlogger.com dan 60% untuk publisher/penerbit iklan.

Setelah terkumpul nominal Rp 25.000,komisi akan kami bayarkan langsung kerekening Anda setiap awal bulan berikutnya. Semakin cepat Anda bergabung disini sebagai publisher, semakin cepat peluang Anda mendapatkan komisi sebagai publisher. Pendaftaran 100% GRATIS, tanpa modal.

Jadikanlah website/blog Anda sebuah mesin uang sekarang juga !!.

Cara Pembayaran Komisi

Bagi publisher yang sudah terdaftar di IklanBlogger.com dapat menerima pembayaran komisinya melalui Bank BCA, Mandiri, BNI, Niaga, Muamalat, Danamon, Mega dan juga berbagai bank berlogo ATM Bersama di seluruh Indonesia.

membuat tulisan marquee keren dengan menambah css

Biasanya default efek marquee di buat dengan kode html berikut.
<marquee>SELAMAT DATANG DI BLOG ANDOELSEAN</marquee>,hasilnya seperti di bawah ini.  
SELAMAT DATANG DI BLOGNYA ARIEADIE
  Namun pada postingan saya kali ini saya akan menambahkan kode css,untuk memperindah efek marquee,sehingga hasilnya akan menjadi seperti di bawah ini.

SELAMAT DATANG DI BLOGNYA ARIEADIE,SILAHKAN BACA ARTIKEL MENARIK LAINYACode untuk membuat marquee seperti di atas adalah:

<div class="marqueeart2">
<marquee style="color: white; font-family: Times New Roman; font-size: 30px; text-shadow: 2px 2px 4px #000;">SELAMAT DATANG DI BLOGNYA ARIEADIE,SILAHKAN BACA ARTIKEL MENARIK LAINYA</marquee></div>
<style>
.marqueeart2 {
border-radius:6px;
border:1px solid #1E90FF;
border-left:5px solid #1E90FF;
border-right:5px solid #1E90FF;
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
}
</style>

Untuk menggunakan kode di atas,pada saat akan memasukan effect marque pada postingan beralih dulu dari mode Compose ke HTML,kalau belum mengerti lihat gambar dibawah ini. . ! !

Nah jika anda ingin mengedit kode marquee'nya,silahkan ganti kode yang berwarna sesuai yang anda inginkan. .

KETERANGAN:

• Kode yang berwarna ORANGE di atas adalah untuk kata-kata dalam marquee,silahkan ganti dengan kata-kata yang anda inginkan. 
• Border-radius:itu untuk sudut lengkung pada kotak marquee,nilai 6px bisa anda ganti dengan yang anda inginkan 
• Border:untuk garis tepi pada kotak marquee,silahkan disesuaikan nilai dan warnanya sesuai yang anda inginkan 
• Border-left:itu untuk border sebelah kiri silahkan atur ketebalan dan warnanya. 
• Border-right:Untuk border sebelah kanan 
• Dan kode yang berwarna MERAH,itu untuk css background gardient,silahkan anda ganti sesuai yang anda inginkan,

 

Modifikasi crusor blog dengan efek kurang kerjaan

cara memasang di blog

1. Masuk ke dashboard blog > design > add a gadget > HTML/javascript.

2. Copy dan paste kod di bawah ke dalam kotak HTML/javascript.

<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event; 
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
} 
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

3. Kalau sudah simpan perubahan,lalu refresh blog anda dan lihat hasilnya.

KETERANGAN:
Setelah anda memasang script di atas,dan kalau ingin merubah warnanya silahkan cari  kode sperti dibawah ini pada script diatas,dan sesuaikan kode warnanya sesuka anda.

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

Cara Mudah Membuat Logo Keren di Blog

Berikut media online untuk membuat logo blog yang keren dan menarik, bisa sobat modif sesuai denghan keinginan. cekidot !!!!

1. www.textspace.net

Generator yang satu ini menawarkan beberapa bentuk model desain logo yang cukup memuaskan. Untuk contoh model text yang di tawarkan seperti misal: patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.

2. www.flamingtext.com

FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview darihasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.

3. cooltext.com

Sama halnya dengan flamingtext,cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.

4. simwebsol.com

Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

5. www.logomatik.net

Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yangdihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.

6. www.thelogoshop.info

Cukup sederhana, atau bisa dibilang sangat sederhana, selainkarena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo .
Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog.

Cara Memasang Banner iklan 125x125 di Blog

                     

Jika sobat tertarik dengan Cara Memasang Banner iklan 125x125 di Blog seperti gambar diatas, silahkan ikuti tutorial dibawah ini, ada dua cara yang akan saya share kali ini yaitu efek yang keren dengan Css dan pasang Banner biasa.:

Cara Membuat Kotak Iklan 125x125 4 Kolom Di Blog Dengan Css

1. Masuk ke Akun Blog sobat.

2. Klik Template Lalu klik Edit HTML

3. Sobat cari kode masukkan kode ]]></b:skin> lebih mudah dengan Ctrl+F, Lalu letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/*Kotak Iklan 125x125*/
#kotak-iklan-125x125 {
margin: 0px;
padding: 1px;
text-align: center; }
#kotak-iklan-125x125 img {
margin: 3px 3px 6px 6px;
padding: 1px;
text-align: center;
border: 3px dotted #000;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:10px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}
#kotak-iklan-125x125 img:hover {
margin: 3px 3px 6px 6px;
padding: 3px;
text-align: center;
border: 3px solid #ff0000;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:10px;
}

4. Simpan terlebih dahulu

5. Setelah sobat simpan, sekarang Klik Tata Letak >>Tambahkan Gadget >> HTML/Javascript.

Masukkan kode dibawah ini dalam kotak HTML/Javascript.

<center><div id="kotak-iklan-125x125">
<a target="_blank" href="@"><img alt="banner ads" src="@" border="0"/></a>
<a target="_blank" href="@"><img alt="banner ads" src="@" border="0"/></a>
<a target="_blank" href="@"><img alt="banner ads" src="@" border="0"/></a>
<a target="_blank" href="@"><img alt="banner ads" src="@" border="0"/></a>
</div></center>

Keterangan:

Kode yang berwarna Merah Silahkan sobat ganti dengan URL Banner sobat.

Kode yang berwarna Biru Silahkan ganti dengan URL gambar banner iklan sobat.

6. Selesai, Sobat simpan dan lihat hasilnya.

Cara Memasang Banner iklan 125x125 di Blog 4 Kolom

1. Masuk ke Akun Blog sobat.

2. Sekarang Klik Tata Letak >>Tambahkan Gadget >> HTML/Javascript. Masukkan kode dibawah ini dalam kotak HTML/Javascript.

<div align="center">
 </p>
<p>
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#000000"> </p>
<p>
<tbody>
<tr> </p>
<p>
<td><center>
<a href="URL/Alamat Iklan Sobat" rel="nofollow"><img border="0" alt="cara membuat banner iklan kotak 125x125 di blog" width="125" src="@" height="125"/></a></center>
</td></p>
<p>
<td><center>
<a href="URL/Alamat Iklan Sobat" rel="nofollow"><img border="0" alt="cara membuat banner iklan kotak 125x125 di blog" width="125" src="@" height="125"/></a></center>
</td> </p>
<p>
</tr>
</p>
<p>
<tr></p>
<p>
<td><center>
<a href="URL/Alamat Iklan Sobat" rel="nofollow"><img border="0" alt="cara membuat banner iklan kotak 125x125 di blog" width="125" src="@" height="125"/></a></center>
</td> </p>
<p>
<td><center>
<a href="@" rel="nofollow"><img border="0" alt="cara membuat banner iklan kotak 125x125 di blog" width="125" src="@" height="125"/></a></center>
</td></p>
<p>
</tr>
</p>
<p>
</tbody></table>
</p>
</div>

Keterangan:

Kode warna MERAH adalah alamat iklan sobat

Kode warna BIRU adalah Alamat Gambar iklan sobat.

3. Simpan dan lihat hasilnya.

Cara Membuat Profil Blog Keren di Blogger

1. Login akun blogger Sobat.
2. Pilih Tata Letak » Tambah Gadget » HTML/JavaScript
3. Masukkan kode berikut ini kedalam kotak HTML/JavaScript

<style>
#aboutme {
  background-color:#fff;
  -moz-box-shadow:0 0 3px #e0e0e0;
  -webkit-box-shadow:0 0 3px #e0e0e0;
  box-shadow:0 0 3px #e0e0e0;
  border:1px solid #666;
  padding:3px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  margin:0 auto;
  margin-top:15px;
  padding:10px;
  width:270px;
  height:auto;
}
.name-author {
  margin:0 0 7px;
  display:block;
  width:100%;
}
.name-author h3 {
  position:relative;
  display:inline;
  background-color:#0097BD;
  color:#FFF;
  font-family:Segoe UI;
  font-size:15px;
  font-weight:bold;
  margin:0 0 0 -3px;
  padding:3px 5px 3px 10px;
  width:100%;
  -moz-text-shadow:0 1px 0 black;
  -webkit-text-shadow:0 1px 0 black;
  text-shadow:0 1px 0 black;
}
.name-author h3:after {
  content:" ";
  width:0;
  height:0;
  position:absolute;
  left:100%;
  top:0;
  border-width:13px;
  border-style:solid;
  border-color:transparent transparent transparent #0097BD;
}
@-webkit-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-moz-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-keyframes name-author {
  0% {color:white}
 20% {color:Orange}
 40% {color:pink}
 60% {color:Orchid}
 80% {color:gold}
 100% {color:white}
}
/* Penerapan efek pada element yang akan diberi efek*/
.name-author h3 {
/* Waktu 10 detik */
  animation:10s infinite name-author linear;
  -webkit-animation:10s infinite name-author linear;
}
.aboutme-text {
  font-size:12px;
  text-align:left;
  margin:0;
}
.aboutme-image-container {
  float:left;
  width:70px;
  height:70px;
  margin-right:75px;
        z-index:1;
}
.aboutme-image-container {
  margin:-20px 0 5px 0;
  padding:9px;
  position:relative;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:100%;
  -moz-border-radius-bottomright:100%;
  -moz-border-radius-bottomleft:100%;
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%;
  -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  background-color:#59B52E;
}
.aboutme-image-container:before {
  content:' ';
  position:absolute;
  top:0;
  left:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:transparent transparent #333 transparent;
}
.aboutme-image-container:after {
  content:' ';
  position:absolute;
  top:0;
  right:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:10px 0 0 10px;
  border-color:transparent transparent transparent #333;
}
.aboutme-image-container img {
  width:100%;
  height:100%;
  border:2px solid yellow;
  border-radius:100%;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
.aboutme-image-container img:hover {
  border:2px solid GOld;
  cursor:pointer;
  margin-left:0;
  -moz-transform:scale(1.2) rotate(360deg);
  -webkit-transform:scale(1.2) rotate(360deg);
  -o-transform:scale(1.2) rotate(360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(360deg);
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
</style><div id='aboutme'>
<div class='aboutme-image-container'>
<img src="#" />
</div>
<div class='name-author'>
<h3>arieadie</h3></div>
<div class='aboutme-text'>Belajar ngeblog jangan setengah-setengah, nanti hasilnya juga setenagh-setengah. ada kalanya kita mencoba berekspresi dengan CSS keren seperti ini untuk merespon otak agar tetap bisa berkarya. hehe. <a href="YOUR LINK BLOGGER PROFIL" style="color: #666;">...Read More</a>
</div></div>

Keterangan:

#fff; adalah Baground kotak widget profil sobat.
270px; adalah Lebar kotak widget Profil sobat.
# adalah URL gambar/foto sobat.
Zain Elhasany adalah nama profil sobat.
Belajar ngeblog jangan setengah-setengah, nanti hasilnya juga setenagh-setengah. ada kalanya kita mencoba berekspresi dengan CSS keren seperti ini untuk merespon otak agar tetap bisa berkarya. hehe. adalah kalimat buat profil sobat.
YOUR LINK BLOGGER PROFIL adalah URL profil sobat bisa About Us atau profil Google+

4. Save dan lihat hasilnya. sobat bisa merubah bentuknya sesuaiketerangan diatas.

cara membuat kolom scroll pada blog archive ( arsip blog )

cara membuat kolom scroll pada blog archive - Trik cara membuat scroll pada arsip blog, cara membuat scroll pada arsip blog (blog archive), cara membuat kolom blog archive dengan scroll. apapun itu judulnya pasti hasilnya tetap sama.

cara membuat kolom scroll pada blog archive ini tergolong cara untuk mempercantik blog, pada umumnya arsip blog itu puanjang buanget. 

Ini cara membuat kolom scroll pada blog archive, sobat ikuti tutorialnya. OK !!! cekidot......

Cara/tutorial 1

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F. 

6. Jika sudah ketemu Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:

<div class='widget-content'>

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">
<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

</div>

<b:include name='quickedit'/>
</div>
</b:includable>

Keterangan :

• Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara : klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.
• Harap disesuaikan saja kodenya, karena tidak semua templates sama,
• 200px : Adalah Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height:
• Jika sudah klik Save templates dan lihat hasilnya. 

Cara/tutorial 2

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,
3. Cari kode berikut :


    <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

4. Lalu Terapkan Seperti di bawah ini.....

    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:200px;'>
    <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div></div>
    <b:include name='quickedit'/>
    </div>
    </b:includable>

5. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
 200px adalah tingginya, dan kalian  bisa ubah seseuai ke inginann kalian..

Teks Box CSS Keren

Cukup menarik saya rasa bila pada kolom text area sobat coba pasang efek seperti ini,yang mana efek ini akan memberikan kesan tersendiri,bila sobat arahkan mouse pada kolom text area dia kan memberikan warna efek terang dan bila di lihat secara biasa tanpa mengarahkan mouse maka di seakan meredup warnanya,gimana tertarik bukan silahkan ajah langsung.

1. Seperti biasa sobat login dulu ke akun blog sobat.
2. Kemudian pilih menu Template dan pilih Edit HTML
3. Centang dulu kotak kecilnya ( Expand Widget Template)
4. Cari Kode ]]></b:skin> kemudian letakan kode CSS di bawah tepat di atas kode ]]></b:skin>.

.code1 {
overflow:auto;width:503px;height:200px;
font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(http://1.bp.blogspot.com/-nic37VqULoA/UDdTubWtwcI/AAAAAAAABbs/zv-i-PbnWHQ/s1600/labstrike-1.png) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.code1:hover{
background : #000000 url(http://1.bp.blogspot.com/-alUx-JlZsZw/UDdT4qYXglI/AAAAAAAABb0/7ili3p2WHa4/s1600/
labstrike-2.png) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}

5. kemudian Simpan Template.

Keterangan

Untuk penulisan dalam postingan bisa sobat gunakan script text area di bawah ini

<div class="code1"> Your Code Here </div>

Selamat mencoba semoga berhasil

Cara Membuat Efek Hover Pada Judul Postingan

1. Seperti biasa login dulu ke blog sobat.
2. Pilih menu  Rancangan > Edit HTML (jangan lupa ceklist kotak kecil atas)
3. kemudian cari kode </head>
4. masukkan kode berikut dan taruh diatas kode </head>

Quote:
<style type='text/css'>
h3{font-family:veranda !important; font-style:italic !important}
.post h3{color:#666; border-left:10px solid #666; border-right:10px solid #666; padding:3px 5px 3px 20px; border-radius:15px; -moz-border-radius:15px; box-shadow:0px 0px 13px #666; -webkit-box-shadow:0px 0px 13px #666; -moz-box-shadow:0px 0px 13px #666}
.post h3:hover{color:#FF133F; border-left:10px solid #FF133F; border-right:10px solid #FF133F; box-shadow:0px 0px 13px #FF133F; -webkit-box-shadow:0px 0px 13px #FF133F; -moz-box-shadow:0px 0px 13px #FF133F}
</style>

5.kemudian save atau simpan template dan silahkan lihat hasilnya.

Demikianlah tutorial kali ini,bagi yang tertarik silahkan coba langsung.

Button CSS Hover Style For Blog

 

 

Gimana tertarik untuk mencobanya,silahkan ikuti tutorialnya di bawah ini.

1. Pastikan sobat dalam keadaan login.

2. Pilih menu Template > Edit HTML,centang Expand Widget Templates.

3. Cari kode ]]></b:skin> dan letakan kode di bawah tepat di atasnya.

.hb-buttons{
background-color:#4b3f39;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.hb-buttons:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.hb-buttons:before {
background-color:#322620;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgalzDXh_53LDoPGqMDy79ud9XDuyIGiYFmg5h_Lo3aP_zcNrpLeorizPJmpQwY3JyHofIjVlXrNd42Uz2juEnp-yfmplJ_fGh_67r-x2jH1s6vjuJkjNw8UihtglUpS8KqWS_v3RHrc-Y/h80/
helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.hb-buttons:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

4.Kemudian save.


Untuk pemakaiannya gunakan kode di bawah dan letakan dalam kolom HTML bukan Compase

<a href="YOUR LINK " class="hb-buttons">Button name</a>

Keterangan :

Letakan link pada kata berwarna merah
Letakan nama Button sesuai kebutuhan pada kata berwarna hijau


Demikian tutorial kali ini semoga bermanpaat.

Button Google Plus CSS3 For blog

seperti ini


Google+ GreenGoogle+ BlueGoogle+ RedGoogle+ YellowGoogle+ Gray

 1. login terlebih dahulu.
2. Pilih Template > Edit HTML,centang Expand Widget Templates.
3. Cari kode ]]></b:skin> (gunakan CTRL+F).
4. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>.

<style>
.PlusGreen {
    display: inline-block;
    background: #45ad45;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#47af47), color-stop(100%,#43ab43));
    background: -moz-linear-gradient(center top, #47af47 0%, #43ab43 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: background-color .218ss 0;
    -moz-transition: background-color .218ss 0;
    -o-transition: background-color .218ss 0;
    transition: background-color .218ss 0;
    text-shadow: 1px 0px 0px #1a8f1a;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #1a8f1a;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusGreen:hover {
    background: #33a833;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #284c28;
    border-color: #284c28;
}
.PlusGreen:active {
    background: #359c35;
    -webkit-box-shadow: 1px 1px 3px #329432 inset;
    -moz-box-shadow: 1px 1px 3px #329432 inset;
    box-shadow: 1px 1px 3px #329432 inset;
    border-color: #2d4d2d;
}

.PlusYellow {
    display: inline-block;
    background: #fbfb00;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFD22), color-stop(100%,#f9f911));
    background: -moz-linear-gradient(center top, #FCFD22 0%, #f9f911 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow: 1px 1px 0px #FFFFF;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #e4e416;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    font-weight: bold;
}
.PlusYellow:hover {
    background: #ffff19;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #ffe01a;
    border-color: #ffe01a;
    color: #333;
}
.PlusYellow:active {
    color: #000;
}
.PlusGray {
    display: inline-block;
    background: #f3f3f3;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#f1f1f1));
    background: -moz-linear-gradient(center top, #f5f5f5 0%, #f1f1f1 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: border-color .218s 0;
    -moz-transition: border-color .218s 0;
    -o-transition: border-color .218s 0;
    transition: border-color .218s 0;
    text-shadow: 1px 1px 0px #ffffff;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    text-decoration: none;
    border-color: #DCDCDC;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    font-weight: bold;
}
.PlusGray:hover {
    -webkit-box-shadow: 0px 2px #00002;
    -moz-box-shadow: 0px 2px #00002;
    box-shadow: 0px 2px #00002;
    border-color: #999;
    color: #333;
}
.PlusGray:active {
    -webkit-box-shadow: 1px 1px 3px #dedede inset;
    -moz-box-shadow: 1px 1px 3px #dedede inset;
    box-shadow: 1px 1px 3px #dedede inset;
    border-color: #444;
    color: #000;
}
.PlusBlue {
    display: inline-block;
    background: #3079ed;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327BEF), color-stop(100%,#2E77EB));
    background: -moz-linear-gradient(center top, #327BEF 0%, #2E77EB 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: border-color .218s 0;
    -moz-transition: border-color .218s 0;
    -o-transition: border-color .218s 0;
    transition: border-color .218s 0;
    text-shadow: 1px 0px 0px #1a378e;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #0066cc;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusBlue:hover {
    background: #2D71EE;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #001AA6;
    border-color: #291f93;
}
.PlusBlue:active {
    background: #2A69EF;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327aef), color-stop(100%,#2e76eb));
    background: -moz-linear-gradient(center top, #327aef 0%, #2e76eb 100%);
    -webkit-box-shadow: 1px 1px 3px 0px #0066cc inset;
    -moz-box-shadow: 1px 1px 3px 0px #0066cc inset;
    box-shadow: 1px 1px 3px 0px #0066cc inset;
    text-shadow: 1px 1px 0px #001AA6;
    border-color: #444444;
}
.PlusRed {
    display: inline-block;
    text-decoration: none;
    background: #eb3232;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FC2222), color-stop(100%,#F81111));
    background: -moz-linear-gradient(center top, #FC2222 0%, #F81111 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: background-color .218s 0;
    -moz-transition: background-color .218s 0;
    -o-transition: background-color .218s 0;
    transition: background-color .218s 0;
    text-shadow: 1px 1px 0px #a60000;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #cc0000;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusRed:hover {
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 1px #a60000;
    border-color: #912020;
}
.PlusRed:active {
    background: #ed2b2b;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed3232), color-stop(100%,#eb2f2f));
    background: -moz-linear-gradient(center top, #ed3232 0%, #eb2f2f 100%);
    -webkit-box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    -moz-box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    border-color: #ad4b4b;
}
</style>

5. Kemudian save

Untuk penggunaanya,silahkan sobat buat dalam postingan dan letakan/pilih salah satu kode yang di perlukan dan letakan pada bagian HTML bukan Compase.

<a href="#" class="PlusGreen">Google+ Green</a>
<a href="#" class="PlusBlue">Google+ Blue</a>
<a href="#" class="PlusRed">Google+ Red</a>
<a href="#" class="PlusYellow">Google+ Yellow</a>
<a href="#" class="PlusGray">Google+ Gray</a>

Gimana mudah kan,buat yang tertarik selamat mencoba semoga berhasil.

Cara Membuat Tombol Download Dan Demo Dengan CSS

1. Sepeti biasa login dulu ke akun blog sobat.
2. Pilih Template > Edit HTML,kemudian centang Expand Widget Templates
3. Cari kode [[></b:skin> dan letakan kode di bawah tepat di atas kode ]]></b:skin>

.SRB{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.SRB a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

.SRB a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.SRB a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.SRB a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.SRB a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.SRB a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.SRB a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

.SRB a:hover, .SRB:hover { color: #fff; opacity: .7 }

4. Kemudian save.


Untuk penggunaan dalam postingan bisa sobat gunakan kode kode di bawah.

Button Text

<span class="SRB"><a class="green" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="orange" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="red" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="gray" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="dark" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="blue" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Keterangan :

Untuk tulisan berwarna merah menunjukan tempat URL
Untuk tulisan berwarna hijau menunjukan nama button


Selesai sudah tutorial kali ini terima kasih atas partisipasinya semoga dapat sedikit membantu buat sobat semuanya.