Pasang Bottom Bar dengan Text Berjalan

5/08/2012

bottom bar dengan text berjalan
Setelah sebelumnya ada pertanyaan mengenai cara memasang bottom bar dengan tulisan berjalan seperti di bawah blog ini, kini saya akan membagikan tutorialnya kepada anda.

Pemasangannya sebenarnya cukup sederhana, karena script sudah ada (saya dapatkan melalui browsing juga). Tidak seperti pemasangan beberapa bar yang lain, dimana  memerlukan edit html pada bagian template Blog, Disini Anda hanya cukup menambahkan elemen HTML/Javascript pada bagian add elemen widget blog. Kemudian cukup dengan copy paste kode script yang saya bagikan ini.

Berikut tutorialnya :
1. Login ke akun blogger anda
2. Menuju ke Layout/tata letak -->> add elemen/tambah gadget -->> pilih HTML/Java Script
3. Copy / Paste kode script di bawah, (sebelumnya rubah dulu beberapa poin di bawah seperti keterangan di bawah)
4. Simpan/Save

<style type='text/css'>
/* --------------------------------------- */
/* Bottom Bar */
/* --------------------------------------- */
#bot-bar img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}
#bot-bar .right {
width:34%;
float: right;
padding-right:20px;
line-height: 1.5;
font-size:12px;
height: 100%;
text-align:right;
}
#bot-bar .left {
width:60%;
float: left;
margin: 0px;
padding-top:4px;
padding-left:5px;
line-height: 1.2;
vertical-align: bottom;
}
#bot-bar a {
color:#666;
text-decoration:none;
}
#bot-bar a:hover{
color: #fff;
cursor:hand;
background-image:url(http://3.bp.blogspot.com/-2fdjVf6eG0w/TuwNasAozjI/AAAAAAAAAkc/d2uffJHOaEI/s1600/linkwarnawarni.jpg);
}
#bot-bar {
padding:5px 0 5px 0;
align: center;
position: fixed;
background: #000;
width: 100%;
left: 0px;
text-align: left;
color: #666;
font-size:12px;
z-index:10000;
bottom:0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
#subbox{background:#fff;width:150px;color:#000;font-size:12px;font-family: Arial, Tahoma, Verdana;font-weight: normal;margin: 0;padding: 2px;border-top:1px solid #666;border-right:1px solid #ddd;border-left:1px solid #666;border-bottom:1px solid #ddd;display: inline;    -moz-border-radius:3px;-webkit-border-radius:3px;}
#subbutton{background: #ddd;color:#111;width:70px;font-size: 11px;font-family: Arial, Tahoma, Verdana;margin:0 0 0 5px;padding:2px;border: 1px solid #ccc;font-weight: bold;-moz-border-radius:3px;-webkit-border-radius:3px;color:#111;}
#subbutton:hover{background: #000;color:#fff;border: 1px solid #333;}
</style>
<div id='bot-bar'>
<div class='left'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
    <td width='13%'>Baca Juga:</td>
    <td width='87%'>
<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> | ";
var pComment = " (" + feed.value.items[i].commentcount + " comments)";
var pList = "</a>" + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment);
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://namabloganda.blogspot.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>
<!-- Alphabetical Post Title Listing End -->
    </td>
  </tr>
</table>
</div>
<div class='right'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
    <td><a style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">Terima Kasih Atas Kunjungan Anda di </span></a><a style="font-weight: bold;" href="http://www.namabloganda.blogspot.com"><span style="color: rgb(255, 0, 0);">BLOG INI</span></a> - SEMOGA BERMANFAAT</td>
  </tr>
</table>
</div>
</div>

Keterangan:
  • YourBlogUrl=http://namabloganda.blogspot.com
  • Ganti text berwarna merah berikut, sesuaikan dengan keinginan anda:
>Terima Kasih Atas Kunjungan Anda di </span></a><a style="font-weight: bold;" href="http://www.namabloganda.blogspot.com"><span style="color: rgb(255, 0, 0);">BLOG INI</span></a> - SEMOGA BERMANFAAT<
Preview hasilnya adalah seperti pada bottom tab di bagian bawah  blog ini.

Selamat Mencoba

All posts here about online store, tips, tricks, SEO, Store Service, store builder with Blogspot, Wordpress or Opencart.
Contact me if You need help or more question about service. Enjoy reading.....

Artikel Terkait

Previous
Next Post »

1 komentar:

Write komentar
30 April 2013 21.53 delete

terima kasih, pasartokoonline MANTAP

Reply
avatar

#/ Dilarang melakukan SPAM.
#/ Dilarang Komentar mengandung Link/URL di kolom komentar
#/ Dilarang Komentar SARA dan Makian
#/ Dilarang ngiklan
Melanggar ketentuan di atas, komentar langsung dihapus..!!!
Emoticon