Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online
Jasa Review

Pasang Bottom Bar dengan Text Berjalan

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJspYaygXI0pUs5M36o1Uk4z3VSZ6tNRSB1ge7j5Rz-G7yPqTcWAChN9jvivSL9sbCoKDCR6eS4f2Ces0eGkqwMTqc_HwEYvLSJYblsIk4yFi3WiKY5SLNtKyrdvJMBHATh5g2Eqi0CFc/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

1 komentar untuk "Pasang Bottom Bar dengan Text Berjalan"