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('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 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='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 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.

40 komentar:

  1. Ok bos, dicoba dulu tutorialnya..
    :D

    BalasHapus
  2. kira2 ini melanggar TOS gak ya?
    katanya kan navbar di blogger itu tidak boleh dihilangkan atau ditutupi dengan stripe ads.
    masih bingung sampai sekarang.
    tapi sementara cari aman dulu :D

    BalasHapus
  3. makasih tutornya sob, nanti dicoba, salam

    BalasHapus
  4. @Cucu Hermawan:

    semoga berhasil ya.
    trims sudah berkunjung.

    BalasHapus
  5. @Kevin:

    setahu saya banyak yang bilang seperti itu. blog ini sendiri juga secara resmi melanggar TOS dengan tidak menampilkan navbar.

    tapi saya pikir jika google tidak akan sekejam itu dalam menindak blog yang tidak menampilkan navbar bawaannya. karena bagaimana pun juga blog2 itu merupakan media pemasaran bagi google dalam menampilkan bisnis iklannya/Google Adsense.

    BalasHapus
  6. @Nurmayanti Zain:

    karena tutorial ini masih berkutat dengan editing HTML template, maka tidak saya berikan screen shotnya. sebab di dalamnya hanya tampilan kode-kode HTML saja.

    tapi saya sudah menampilkan preview untuk bentuk stripe ad yang sudah jadi. silakan klik gambar stripe ad di postingan ini untuk memperbesar ukuran agar gambarnya terlihat jelas.

    BalasHapus
  7. @Tutorial Blog:

    ditunggu ya kunjungan berikutnya.

    BalasHapus
  8. Dari sisi load memang agak lebh cepat dibandingkan wibiya. Saya pernah pasang script demikian di blog lainnya. hanya saja isinya saya ganti dengan iklan. intinya, mungkin ini salah satu cara untuk mengefektifkan tempat di halaman blog kita...nice share and happy blogging!

    BalasHapus
  9. ini dia yang ane cari,
    slalu ada tips dan ttorial menarik disini
    thanks gan

    BalasHapus
  10. Kunjungan balik y gan ^^
    Info bgus tu

    http://4share-information.blogspot.com

    Salam blogger Indonesia
    Jangan lupa komentarnya ^^

    BalasHapus
  11. jadi delema,,, melanggar TOS pa nggak ya,,,?? main aman aja deh mas,,,,, saya hehehehe,,,,

    BalasHapus
  12. oohh,, jadi posisinya tetep ya sob,, gak ilang pas di scroll,, hehhe,, keren2,, :)

    BalasHapus
  13. di coba ahhh mudah-mudahan bisa,love,peace and gaul.

    BalasHapus
  14. @Iskaruji dot com:

    iya, fungsinya antara lain sebagai alternatif untuk menghemat space di halaman blog dan untuk mempercantik desain agar blog tampak lebih profesional.

    BalasHapus
  15. wah saya baru tahu nih mengenai Stripe ad sobat...

    BalasHapus
  16. @zaenal blog:

    trims atas apresiasinya.
    semoga semakin banyak berkontribusi dalam kemajuan dunia blogging! :)

    BalasHapus
  17. @anime lover:

    salam kenal.
    ditunggu ya untuk kunjungan selanjutnya.

    BalasHapus
  18. @Test Drive Mobil:

    saya juga belum tahu apakah menghilangkan navbar blogger ini melanggar TOS atau tidak. setahu saya menurut penuturan banyak orang itu menghilangkan navbar adalah salah satu bentuk pelanggaran terhadap TOS. tetapi, saya juga banyak melihat masih ada blog yang menghilangkan navbar bawaannya dan masih saja eksis tidak terkena banned.

    BalasHapus
  19. @Rama88:

    iya, mirip di blogmu bro. :)

    BalasHapus
  20. @saryadinilan:

    memangnya planet remaja? :-|
    #peace, love, and gaul.

    BalasHapus
  21. @Century 21 Broker Properti Jual Beli Sewa Rumah Indonesia:

    senang bisa membantu.

    BalasHapus
  22. @Jocky:

    silakan klik gambar stripe ad yang sudah saya pasang di atas untuk memperjelas.

    BalasHapus
  23. mantab nih, bener-bener terlihat profesional

    BalasHapus
  24. berkunjung sambil baca tutorialnya. kalo lagi kepengen ngutak-ngatik template, saya coba deh.
    salam

    BalasHapus
  25. mantap gan...
    Oya aku udah follow blog ini...
    Kutunggu follow baliknya ya. . .

    BalasHapus
  26. @Helmy Satria:

    iya bro, silakan dicoba ya.

    BalasHapus
  27. @SHUDAI AJLANI (dot) COM:

    silakan dibookmark.
    semoga bermanfaat dan ditunggu ya kunjungan berikutnya.

    BalasHapus
  28. @pepep:

    silakan disimpan dan semoga bermanfaat ya.

    BalasHapus
  29. @puisi:

    segera difollow balik.
    ditunggu ya kunjungan berikutnya. :)

    BalasHapus
  30. baru tau stripe Ad :)
    makasi sharing infonya ni,,

    BalasHapus
  31. trims infonya...saya baru tahu nih :)

    semoga bermanfaat bagi yang lain juga :)

    BalasHapus
  32. Ow.. itu namanya Stripe Ad ea mas bro...

    Mkasih infonya...

    Semangatz bloging

    BalasHapus
  33. @Momentum of Learning:

    amin. jika berminat, silakan dipasang di blognya.

    BalasHapus
  34. @Simple Share:

    silakan dicoba ya. :)

    BalasHapus