Bagaimana Cara Menciptakan Stripe Ad Di Blog ?

Apa itu stripe ad?
Mungkin bagi yang pertama kali mendengarnya, stripe ad yaitu sesuatu yang gres dan kurang familiar bagi kita. Stripe ad yaitu sebuah navbar yang sanggup kita modifikasi untuk menampilkan link atau sebuah kalimat pesan tertentu sesuai impian kita.

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

Stripe ad berbentuk sangat seolah-olah terhadap navbar blogspot. Akan tetapi, bedanya yaitu tampilan stripe ad ini akan tetap muncul di bab paling atas meski pembaca blog kita telah melaksanakan scroll ke halaman bawah. Pembaca kita juga sanggup menutup tampilan stripe ad ini kalau mereka tidak menyukainya dengan cara klik tombol silang atau close di bab paling kanan.

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

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

Adapun cara untuk menciptakan stripe ad di blog kita ini yaitu sebagai berikut.

Masuk ke dalam akun blogger kita masing-masing.

Klik rancangan.

Klik edit HTML.

Klik expand template widget.

Cari instruksi berikut.

]]></b:skin>

Masukan instruksi berikut di atasnya.

/*-- (mta bar) --*/
#mta_bar{background:#444 url('http://4.bp.blogspot.com/_C6KkooKXCEw/TIChde9sutI/AAAAAAAAGzk/5DJ4Cbds91E/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('http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/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(http://2.bp.blogspot.com/_C6KkooKXCEw/TICuIqKZqRI/AAAAAAAAG0E/hfkQzQz7h20/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(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/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(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/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(http://3.bp.blogspot.com/_C6KkooKXCEw/TIBf2gtK0UI/AAAAAAAAGwE/Wml7-gPP17U/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(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/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 instruksi berikut.

</head>

Masukan instruksi berikut di atasnya.

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

Cari instruksi berikut.

<body>

Masukan instruksi 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='http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/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 instruksi HTML yang diinginkan.
2. Unduh dan simpan template blog kita terlebih dahulu sebagai langkah antisipasi kalau 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 kini yaitu http://feeds.feedburner.com/panduanbelajarblog maka ID feedburner kita yaitu panduanbelajarblog.

Pemasangan stripe ad ini tidak akan terlalu banyak memperlambat loading blog, alasannya yaitu javascript yang dipakai 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.

Share this post