Ini adalah bar yang melayang dan berada di bagian bawah blog Anda, Widget ini berhasil saya dan teman saya ciptakan setelah dua hari menghabiskan waktu untuk membuatnya.
Scrolling bar ini di sertai dengan scroll dan bisa di sertai tombol hide show yang dimana bar ini tidak akan menghabiska tempat pada blog Anda, karna pengunjung bisa meyembunyikannya bila merasa terganggu. Dengan memasang Scrolling Bar Berlangganan Dengan Tombol Hide Show ini akan memungkinkan Anda untuk mendapatkan pembaca setia Anda via email dan pengikut di akun jejaring sosial Anda.
Fitur Scrolling Bar Berlangganan Dengan Tombol Hide Show
Fitur dari Scrolling Bar Berlangganan Dengan Tombol Hide Show di antaranya:
- Mudah di gunakan karna menggunakan jQuery dan CSS jadi tidak akan memperlambat laju blog Anda.
- Di optimalkan dengan terpasangnya Touch Me Sharing Widget.
- Di bangun dengan Tombol hide show, memungkinkan Pembaca untuk menyembunyikan atau menampilkan kembali Scrolling Bar.
- Desain menarik dan profesional menyediakan pengalaman pengguna yang luar biasa.
- Dioptimalkan dengan JavaScript, memungkinkan Scrolling Bar Anda menggulung atau bawah pada halaman.
Cara menginstall Scrolling Bar Berlangganan Dengan Tombol Hide Show
Jika anda telah melihat demonya sekarang mari kita bahas cara menginstallnya pada blogger Anda. Ikuti langkah berikut ini untuk mulai menginstallnya pada blogger Anda.
1. Login ke akun blogger Anda.
2. Pada Dasbor klick Template ➨ Edit HTML.
3. Centang Expand Template Widget ➨ Backup template Anda.
4. Lalu dalam Edit Template Anda cari kode ]]></b:skin> atau <style> blia kesulitan mencarinya coba lihat Cara Cepat Mencari Kode HTML.
5. Bila sudah ketemu sekarang letakkan kode CSS berikut tepat di atasnya.
/*----- OW Scrolling Subscribe Now Bar-----*/
#bobar {
z-index: 100000;
}
.barimage {
height: 91px;
padding: 0px 0px 0px 3px;
float: left;
background: transparent;
line-height: 1em;
}
.bartext {
height: 50px;
padding: 0px 0px 0px 5px;
float: left;
text-align: left;
text-transform: none;
background: transparent;
}
.bartext .bartitle {
margin: 8px 0px 0px -10px;
font-size: 42px;
letter-spacing: -1px;
font-weight: bold;
font-family: 'Share';
color: #ffffff;
line-height: 28px;
}
.bartext .barsubtitle {
font-size: 24px;
font-family: 'Share';
font-weight: normal;
letter-spacing: -2px;
padding: 0px 0px 0px 0px;
color: #ffffff;
line-height: 12px;
word-spacing: 3px;
margin: -5px 0px 0px 0px;
}
.bartext .fineprint {
color: #ffffff;
padding: 0px;
line-height: 10px;
font-size: 10px;
margin: 0px 0px 0px 1px;
font-family: Arial;
font-weight: normal;
}
#bobar #bar_topborder {
width: 100%;
border-top: 3px solid black;
padding: 0px;
margin: 0px;
}
#bobar .searchbox_header {
color: #ffffff;
padding: 2px 0px 2px 0px;
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
letter-spacing: 0px;
}
#bobar #inner {
width: 1030px;
height: 65px;
margin: 0 auto;
}
#bobar .bar_arrow {
padding: 0px 20px 0px 10px;
}
#bobar div.search {
margin: 0;
padding: 1px 0px 0px 320px;
text-align: left;
line-height: 18px;
}
#bobar div.search input[type="text"] {
color: #000000;
height: 24px;
width: 250px;
padding: 3px 0px 3px 7px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 12px;
font-family: arial;
margin-top: 1px;
}
#bobar div.search input[type="submit"] {
color: black;
width: 120px;
height: 34px;
font-size: 14pt;
font-weight: normal;
margin: 0px;
}
#bobar div.search input[type="submit"]:hover {
cursor: pointer;
}
#bobar div.plusone {
float: right;
margin: 0;
padding: 9px 0 0 10px;
width: 80px;
}
#bobar div.twitter {
float: right;
margin: 0;
padding: 5px 0 0 0;
width: 116px;
}
#bobar div.fb {
float: right;
margin: 0;
padding: 5px 0 0 0;
width: 96px;
text-align: left;
}
#bobar .message {
font-size: 14px;
line-height: 25px;
}
#bobar .success {
color: #039c33;
font-weight: normal;
}
#bobar .error {
color: #ff0000;
font-weight: normal;
}
/*----- bar style -----*/
.jx-bar {
height: 65px;
padding: 0px;
width: 100%;
background-color: #00B0E6;
border-top: 1px solid black;
margin: 0px;
}
.jx-bar-rounded-tl {
-webkit-border-top-left-radius: 0px;
-khtml-border-radius-topleft: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
}
.jx-bar-rounded-bl {
-webkit-border-bottom-left-radius: 0px;
-khtml-border-radius-bottomleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
}
.jx-bar-rounded-tr {
-webkit-border-top-right-radius: 0px;
-khtml-border-radius-topright: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
}
.jx-bar-rounded-br {
-webkit-border-bottom-right-radius: 0px;
-khtml-border-radius-bottomright: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
}
/*----- bar separator -----*/
.jx-bar span {
width:1px;
height:100%;
background-color: #000000;
}
.jx-separator-left {
float:left;
}
.jx-separator-right {
float:right;
}
/* tooltip point direction */
.jx-tool-point-dir-down {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5sG9dmMhbrVrBjoI6tsZnmBENcXnJiKDuroVflQi_3Tto7xopelyQ_2KqWL2cerNSmslw6oBH0uVywe8CQ2pKr8XDj-HgCMw6jj24K9vnhfjejKqzAoAeeUBVym7x554hsL29ggTVYg/s1600/ow-ttd.gif');
background-repeat:no-repeat;
background-position:center bottom;
height:5px;
width:auto;
}
.jx-tool-point-dir-up {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL7hPJS95B2PT4JJqtN_Ux5W5dBTgSCugeNgcnIOPAbso9Kkeas5PZ57Q8Vdbp0ysDJ-Bx2Yqk3bsw9Lwvy1uSnh9pVWYpRqf41u-AgsB9ZyC-v21874gjpibT3X0PCOGK6nAsR0YlFg/s1600/ow-ttu.gif');
background-repeat:no-repeat;
background-position:center bottom;
height:5px;
width:auto;
}
/*----- bar button -----*/
.jx-bar-button ul {
margin:0px;
padding:0px;
}
.jx-bar-button li {
float:left;
list-style:none;
}
.jx-bar-button-right li {
float:right;
list-style:none;
}
.jx-bar-button li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
cursor:pointer;
padding: 4px 8px 4px 8px;
border: 1px solid #00B0E6;
margin: 2px;
line-height: 1em;
background: transparent;
}
.jx-bar-button li:hover {
background-color: #000000;
border: 1px solid #000000;
padding: 4px 8px 4px 8px;
margin: 2px;
}
.jx-bar-button-rounded li:hover {
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* default button's anchor text style */
.jx-bar-button li a:link, .jx-bar-button li a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
text-decoration: none;
padding: 1px;
}
.jx-bar-button li a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
}
/*----- bar text container and button arrow indicator -----*/
.jx-bar div, .jx-bar iframe {
}
.jx-bar div {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
padding: 2px 8px 2px 8px;
margin: 2px 0px 2px 0px;
padding: 0px;
margin: 0px;
}
.jx-bar div a:link, .jx-bar div a:visited {
color: #666666;
text-decoration: none;
}
.jx-bar div a:hover {
color: #0099FF;
text-decoration: none;
}
.jx-bar iframe {
margin:4px 0px 4px 10px;
}
/*----- button tooltip -----*/
.jx-bar-button-tooltip {
height: auto;
padding: 5px 10px 5px 10px;
color: #fff;
background-color: #36393D;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
/* rounded tooltip */
.jx-bar-button-tooltip {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
/*----- nav menu -----*/
.jx-nav-menu {
padding: 2px;
background-color: transparent;
border:#ccc solid 0px;
}
.jx-nav-menu-rounded {
-webkit-border-radius:3px;
-khtml-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.jx-nav-menu ul {
margin:0;
padding:0;
list-style:none;
}
.jx-nav-menu a:hover {
background-color:#4096EE;
color:#fff;
text-decoration:none;
}
/* styles for menu items */
.jx-nav-menu ul li a {
display:block;
text-decoration:none;
color:#777;
background:#fff; /* IE6 Bug */
padding:8px;
border:1px solid #eee; /* IE6 Bug */
border-bottom:0px;
}
/* active menu button */
.jx-nav-menu-active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
cursor:pointer;
background-color:transparent;
padding:4px 8px 4px 8px;
margin:2px;
}
/* active menu button (rounded) */
.jx-nav-menu-active-rounded {
-webkit-border-radius:3px;
-khtml-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
/* hide and show/unhide item */
.jx-hide {
float:right;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIyTKF30cfMWW3tusteZq2iunthPpeO6uMShy_l6yLrxD7CQFc-fWHwqpxoosR-X0ZI3TYI9HagLV8Bxl6NNhAV6VnExeROYAGVhU4BLuy6wvqHhK1ZMfqVWCYeLQKITfVbQ75iiT-pQ/s1600/ow-hide_dark.gif);
background-repeat:no-repeat;
height:16px;
width:16px;
}
.jx-hide-top {
float:right;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidQBAD36hS3g16oXwh2zYOcl0wSHczrWYc5VYzRui2VUbiLIkLWJdVkqzWLhJIu1CRPqI8lXcEBmsatAf2dgOstQznpFEwtSBOIsGQ-mfk3TJR9mR_RVmv3Aa5PPU36xg4uyG9Yr2tpA/s1600/ow-show_dark.gif);
background-repeat:no-repeat;
height:16px;
width:16px;
}
.jx-show {
height:30px;
padding:0px;
width:40px;
background-color: #00B0E6;
border: 2px solid yellow;
border-bottom: 0px;
}
.jx-show-button {
float:right;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidQBAD36hS3g16oXwh2zYOcl0wSHczrWYc5VYzRui2VUbiLIkLWJdVkqzWLhJIu1CRPqI8lXcEBmsatAf2dgOstQznpFEwtSBOIsGQ-mfk3TJR9mR_RVmv3Aa5PPU36xg4uyG9Yr2tpA/s1600/ow-show_dark.gif);
background-repeat:no-repeat;
height:16px;
width:16px;
}
/* if showOnTop is TRUE, use "hide.gif" instead of "show.gif" */
.jx-show-button-top {
float:right;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIyTKF30cfMWW3tusteZq2iunthPpeO6uMShy_l6yLrxD7CQFc-fWHwqpxoosR-X0ZI3TYI9HagLV8Bxl6NNhAV6VnExeROYAGVhU4BLuy6wvqHhK1ZMfqVWCYeLQKITfVbQ75iiT-pQ/s1600/ow-hide_dark.gif);
background-repeat:no-repeat;
height:16px;
width:16px;
}
.jx-hide-separator {
width:1px;
height:100%;
background-color: #335c9d;
float:right;
}
.jx-bar-button li {
margin: 2px 0px 0px 0px;
}
.jx-bar-button li:hover {
margin: 2px 0px 0px 0px;
}
/*--------Subscription Form ------*/
.emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 185px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:40px;
padding:0 4px;
float:right;
background:transparent url(http://otowebsite.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
6. Selanjutnya cari kode </body> dan letakkan kode berikut di atasnya.
<div id='bobar'>
<div style='float: right;'><ul class='jx-bar-button-right'/></div>
<div id='inner'>
<div style='height: 100%; width: 100%;'>
<table border='0' cellpadding='0' cellspacing='0' id='t_bdakfjl' style='padding: inherit; border: 0px; margin-top: inherit; margin-bottom: inherit;'>
<tr>
<td style='padding: inherit;'>
<ul>
<li style='border: 0px;'><a href='#' id='logoclick'/>
<ul id='barlogo'>
<li class='barimage'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIBVr4L_tukFR_kMedSGAVY4bkf7MPb2XL4M1243ZDxMJyADUJgG5kMrfyg9beILvFEn0PasTFgDIJ84qtbCtvnKuERPoEv1YAhhdO7UjpYh4-GCPKo4rHpPVvd5_DMeBx5_kuw2YjMQ/s1600/Email_OW.png'/></li>
<li class='bartext'>
<div class='bartitle'>Free Pro Tricks</div>
<div class='barsubtitle'>in your Inbox every day!</div>
<div class='fineprint'>Delivered directly to your email. Get it now.</div>
</li>
</ul>
</li>
</ul>
</td>
<td style='vertical-align: top; padding: inherit;' valign='top'>
<div class='text-container search' id='bobar_search'>
<td class='bar_arrow' style='padding-top: inherit; padding-bottom: inherit;'>
<img align='top' border='0' src='http://cdn.utilcave.com/bobar/arrow.gif' style='vertical-align: top;padding-top: inherit; padding-bottom: inherit; padding-top: inherit; padding-bottom: inherit;'/>
<td style='vertical-align: top; padding-top: inherit; padding-bottom: inherit; padding-left: inherit; padding-right: inherit;'>
<table border='0' cellpadding='0' cellspacing='0' style='padding-top: inherit; padding-bottom: inherit; border: inherit; margin-top: inherit; margin-bottom: inherit;'>
<div class='touchme'>
<!--RSS-->
<a class='rss' href='http://feeds.feedburner.com/otowebsite' rel='external nofollow' target='_blank'/>
<!--Google Plus-->
<a class='googleplus' href='https://plus.google.com/115780777398536909642' rel='external nofollow' target='_blank'/>
<!--Facebook-->
<a class='facebook' href='https://www.facebook.com/dekrif' rel='external nofollow' target='_blank'/>
<!-- Twitter -->
<a class='twitter' href='https://twitter.com/otowebsite' rel='external nofollow' target='_blank'/>
<div class='emailupdatesform'>
<br/><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input class='emailupdatesinput' gtbfieldid='10' name='email' onblur='if (this.value == '') {this.value = 'Enter your email here...';}' onfocus='if (this.value == 'Enter your email here...') {this.value = '';}' type='text' value='Enter your email here...'/><input name='uri' type='hidden' value='Oto Website'/><input class='joinemailupdates' type='submit' value='Submit'/></form></div></div></table></td></td></div>
</td></tr>
<tr>
</tr>
</table>
</div>
</div>
</div>
7. Masih dalam Edit HTML sekarang cari kode </head> lalu letakkan kode berikut di atas kode tersebut.
<script src="https://www.google.com/jsapi? key=ABQIAAAAWvH7lmtbXPVbvOqmVVU9VRQdDxq4C7wyBnVikl0uwU8F0c1b7hTtX9ZL_MgGQCkMAayuC2BlaK4QRQ" type="text/javascript"></script><script type="text/javascript">google.load("jquery", "1.4.3");</script><script type='text/javascript' src='https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery.cookie.js'></script><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> <script src='http://cdn.printables4kids.com/ez_display_au_fillslot.js' type='text/javascript'></script><script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script><script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-23768243-22']); _gaq.push(['_trackPageview']);_gaq.push(['_trackPageLoadTime']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script><script type="text/javascript">window.google_analytics_uacct = "UA-23768243-22";</script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery.jixedbar.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery-fonteffect-1.0.0.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/bobar.js"></script>
8. Simpan Template.
Melakukan Sedikit Perubahan atau Editing
Setelah selesai meningstal Scrolling Bar Berlangganan Dengan Tombol Hide Show ini sekarang waktunya Anda Melakukan Sedikit Perubahan atau Editing pada kode tersebut agar sesuai dengan ID Anda.
- Ganti https://plus.google.com/115780777398536909642' dengan Url Google plus Anda.
- Ganti https://www.facebook.com/dekrif' dengan Url Facebook Anda.
- Ganti https://twitter.com/otowebsite' dengan ID twitter Anda.
- Ganti http://feedburner.google.com/fb/a/mailverify?uri=otowebsite dengan Url RSS berlangganan Anda.
Apa Selanjutnya ?!?
Tidak ada!!! karna bila Anda sudah menginstall Scrolling Bar Berlangganan Dengan Tombol Hide Show berarti Anda tinggal melihat hasilnya saja. Bila Anda butuh bantuan silahkan bertanya saya akan secepat munkin membalasnya! Silahkan tunggu Articel selanjutnya yang lebih menarik lagi.
Posting Komentar Blogger Disqus
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.
Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.
Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Konversi Kode di Sini! Daftar Member Aktif