Rabu, 13 Agustus 2014

memasang bottom bar dengan tulisan berjalan


By on 20.41

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


About The Blogger

"Belumkah datang waktunya bagi orang-orang yang beriman, untuk tunduk hati mereka mengingat Allah dan kepada kebenaran yang telah turun (kepada mereka), dan janganlah mereka seperti orang-orang yang sebelumnya telah diturunkan Al Kitab kepadanya, kemudian berlalulah masa yang panjang atas mereka lalu hati mereka menjadi keras. Dan kebanyakan di antara mereka adalah orang-orang yang fasik." (QS. Al Hadid 57 : 16)

0 komentar:

Posting Komentar