Bagaimana Cara Membuat Stripe Ad Di Blog ?

Apa itu stripe ad?
Mungkin bagi yang pertama kali mendengarnya, stripe ad adalah sesuatu yang baru dan kurang familiar bagi kita. Stripe ad adalah sebuah navbar yang dapat kita modifikasi untuk menampilkan link atau sebuah kalimat pesan tertentu sesuai keinginan kita.

Biasanya, stripe ad yang dipasang di banyak blog saat ini memasang link jejaring sosial pemiliknya dan link untuk subscribe artikel berlangganan.

Stripe ad berbentuk sangat mirip terhadap navbar blogspot. Akan tetapi, bedanya adalah tampilan stripe ad ini akan tetap muncul di bagian paling atas meski pembaca blog kita telah melakukan scroll ke halaman bawah. Pembaca kita juga dapat menutup tampilan stripe ad ini jika mereka tidak menyukainya dengan cara klik tombol silang atau close di bagian paling kanan.

Pemasangan stripe ad ini bisa dibilang cukup penting dalam sebuah blog. Selain sebagai penghias karena bentuknya yang membuat blog kita terkesan profesional, stripe ad juga bisa dijadikan sebagai solusi untuk menghemat ruang dalam menampilkan link dan pesan kalimat tertentu.

Cara membuatnya juga relatif mudah. Kita hanya perlu memasukan beberapa kode HTML beserta javascript ke dalam HTML template blog kita.

Adapun cara untuk membuat stripe ad di blog kita ini adalah sebagai berikut.

Masuk ke dalam akun blogger kita masing-masing.

Klik rancangan.

Klik edit HTML.

Klik expand template widget.

Cari kode berikut.

]]></b:skin>

Masukan kode berikut di atasnya.

/*-- (mta bar) --*/
#mta_bar{background:#444 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSci2HfKfF1upw8TnmUHhFkQtaynK2-pew0SZdXv2hWokKjOoEMSjmqq4s59qb9RyOIneg5h6vZUBQCyIiwv_Apc3gEU2X_3O8u0kS6e7qUFFQcHFsKg0Gtr7iC2fxzb-0O6nzWvEeiyjM/s200/topnavbar-c.png') repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:8px; padding-bottom:6px}
* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:55%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:30%}
#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}
#mta_bar .right a{font-size:10px; color:#fff; text-decoration:underline}
#mta_bar .right a:hover{font-size:10px; color:#fff; text-decoration:none}
#left_bar a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNOkjXS_FWFDtvVpzms_pfm4PwG1yAEpJMuXQ7fMWn4FiFq4vRghOow6cCHdF7y00F73m4S32QSRrYEBlkOSWfuuAa91Nu7KMEWyxV7T8xIjLSLKDbCr2sKM3YWJykuEgMHBU9sRDe5Jcu/s200/feed-c.png') no-repeat; font-weight:bold;text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:10px}
#left_bar a:hover{text-decoration:underline; color:#fff}
#left_bar2 a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmVY0alAbCGyqwO6qN-UmGgjsCUtzmimiA4GOKX08m-DK_MnGgcu7sbetIDVtk_ZSlShRFdf55jMMY5PM1_97LBuw8R1wN5vcHFXXvK-Mk3GWwZ9v4Mx0rdCZExYpmbEcRTpSHAPIbHFL/s200/check-c.png) no-repeat 2px; text-decoration:none; font-weight:bold; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0px}
.small-comment{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84IUTBU82htwlx22IvNvtA9vyI3KukYfk5oMF2ICTvdglS10o8u7fd4kSXtDfKcZn3Sew-5cOO_fyqKmAh0Nd3sqHPj9Mfq_jPDJzCIPr8hkd7d_iIgcGj3UX_i1OYWvy7dsR5PVEs5jk/s200/smallcommentsx-c.png) no-repeat;
 padding-left:8px;
 height:20px;
 line-height:14px;
 float:right;
 color:#FFF;
 font-weight:bold;
 font-size:11px;
 margin-top:3px;
 margin-left:10px;
}.small-comment div{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84IUTBU82htwlx22IvNvtA9vyI3KukYfk5oMF2ICTvdglS10o8u7fd4kSXtDfKcZn3Sew-5cOO_fyqKmAh0Nd3sqHPj9Mfq_jPDJzCIPr8hkd7d_iIgcGj3UX_i1OYWvy7dsR5PVEs5jk/s200/smallcommentsx-c.png) top right no-repeat;
 padding-right:8px;
 height:20px;
}
#left_bar2 a:hover{text-decoration:underline; color:#fff}
#left_bar3 a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Z-lmz71WCeN7S4X4RWMS0-bk7vO5bQpZ6SUrWMWnOU33ZowHbva1vV4ISDt9iEnpM5yKVGGrDGO7E2Aw0coobbrxBuV4C-6wzhFuVUfQ7KTixolGTehcVTCTivd7SGw2MDWnKcar9jjt/s200/facebook-c.png) no-repeat 2px; text-decoration:none; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}
.feed-small-right-feed,.small-right{font-size:11px;float:right;font-weight:700;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNOkjXS_FWFDtvVpzms_pfm4PwG1yAEpJMuXQ7fMWn4FiFq4vRghOow6cCHdF7y00F73m4S32QSRrYEBlkOSWfuuAa91Nu7KMEWyxV7T8xIjLSLKDbCr2sKM3YWJykuEgMHBU9sRDe5Jcu/s200/feed-c.png) right 0 no-repeat;padding-right:20px;padding-bottom:15px}
#crosscol-wrapper{margin:0 20px;padding:10px 0 0}
#jarak_atas {width:2px;height:20px;}

Cari kode berikut.

</head>

Masukan kode berikut di atasnya.

<script src='http://panduanbelajarblog.googlecode.com/files/Stripe-Ad.js' type='text/javascript'/>

Cari kode berikut.

<body>

Masukan kode berikut di bawahnya.

<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='URL akun facebook' rel='nofollow' target='_blank' title='Add me as friend on Facebook'>Facebook</a>
<a href='URL akun twitter' rel='nofollow' target='_blank' title='Follow me on Twitter'>Twitter</a>
<a href='URL RSS feeds' rel='nofollow' target='_blank' title='Subscribe Me'>RSS feeds</a>
</span></div>
<div id='left_bar'>
<span class='center'><a href='http://feedburner.google.com/fb/a/mailverify?uri=ID feedburner' target='_blank;'>Subscribe via mail, joint now !</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5NR0sAdzUXoCfYxgFguvRV7HJMTwn9dZsDZWGOly7fPYGaChz3r_pIc3yf7lXwJvTSDThL3HpAEZBtUFF95YCD2MuCKiKhmW5OaJjkWIvS19ZiZzUa2Ub2O_luphh2ZQ_qgAHj879rFS/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>

Klik simpan dan selesai.

Keterangan:

1. Tekan tombol Ctrl+F pada keyboard untuk mempercepat proses pencarian kode HTML yang diinginkan.
2. Unduh dan simpan template blog kita terlebih dahulu sebagai langkah antisipasi jika kita mengalami kegagalan dalam proses editing template.
3. Ganti URL akun facebook, URL akun twitter, dan URL RSS feeds dengan URL/alamat link milik kita masing-masing.
4. Ganti ID feedburner dengan ID milik kita masing-masing. Misal alamat feedburner yang sedang kita miliki sekarang adalah http://feeds.feedburner.com/panduanbelajarblog maka ID feedburner kita adalah panduanbelajarblog.

Pemasangan stripe ad ini tidak akan terlalu banyak memperlambat loading blog, karena javascript yang digunakan telah dihosting di google code sehingga requestnya memerlukan waktu yang relatif lebih cepat dibandingkan javascript yang dihostingkan di free hosting lainnya.

Sesuaikan pemasangan stripe ad ini dengan tampilan desain blog dan kebutuhan kita. Usahakan memasang pernak-pernik blog yang match dengan desain template dan jangan memperlambat loading sebuah blog dengan pemasangan widget yang tidak perlu.

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Tool Gadget. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Tool Gadget dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Blog Ryan pada tanggal Thursday, 17 November 2011