Pasang Bottom Bar Dengan Teks Berjalan
Pasang Bottom Bar Dengan Teks Berjalan
Pasang
Bottom Bar Dengan Teks Berjalan, ini menjadi pilihan terbaik bagi Blogger untuk
menghiasi tampilan blog ataupun untuk mempermudah pengunjung membaca peringatan
atau pemberitahuan pemilik Blog. Ada fasilitas recent post berjalan disertai
jumlah komentar (ini menjadi satu kelebihan dari Widget Bottom Bar). Selain
itu, saya juga memodifikasi lagi dengan menambahkan Widget Jam Animasi dari
Alim Mahdi. Sehingga diharapkan menjadi komplit. Tapi perlu dipertimbangkan
juga saat meloading akan mengambil file server dari beberapa http://pipes.yahoo.com/pipes/pipe.run?,
www.alimmahdi.com, dan sebagainya. Jadi jangan heran kalau tiba-tiba loading
blog menjadi bertambah karena adanya script animasi kecuali Sobat tidak
menyertakannya. Bottom Bar tidak
berlaku untuk Wordpress hanya berfungsi untuk Blogger.
Bottom Bar merupakan bagian widget
yang
Pemasangan
Bottom Bar Dengan Teks Berjalan ini juga tidak ribet karena tidak perlu mengakses
dari Edit HTML pada bagian template Blog. Jadi, benar bisa dikatakan
widget ini berbeda widget bar lainnya. Jadi caranya hanya cukup menambahkan
elemen HTML/JAVASCRIPT, kemudian masukkan kode scriptnya. Untuk lebih jelasnya
ikuti langkah bertahap berikut ini.
Langkah
Pemasangan Bottom Bar Dengan Teks Berjalan, sebagai berikut:
1. Login
terlebih di Akun Blogger Sobat tentunya di www.blogger.com
2. Menuju Layout/Tata Letak Ă Selanjutnya
Add Element/Tambahkan Gadget Ă Selanjutnya Pilih HTML/JAVASCRIPT.
3. Copy/Salin
dengan tekan CTRL dan C berbarengan, kemudian paste/menempatkan hasil
salinan tekan CTRL dan V berbarengan. Kode script di bawah, (sebelumnya ubah
dulu beberapa poin di bawah seperti keterangan di bawah).
4.
Simpan/Save.
5. Semoga berhasil.
<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/AVvXsEjY0AMyP4rCAnkcwGaitfamSQRzAZLPNdGQuoM5EHqWBNETpp1iE9R_nnsyXaLHni1xKY-JWHqMLXWEoWhEN9TaB2fT_1r_N4Bmef4I90nBkIMamCUYavcmnJ8OJ8nZJvvtu_Qa_s41foc/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
Sebagai contoh: YourBlogUrl=http://www.adamsains.us
Ganti text berwarna merah berikut, sesuaikan
dengan keinginan anda:
Terima Kasih Atas Kunjungan Anda di
http://www.namabloganda.blogspot.com";BLOG INI - SEMOGA BERMANFAAT
Sebagai contoh:
JANGAN LUPA BERKOMENTAR SEBELUM MENINGGALKAN </span></a><a
style="font-weight: bold;" href="http://www.adamsains.us/"><span
style="color: rgb(255, 0, 0);">BLOG INI</span></a> <div align="center"><embed
pluginspage="http://www.macromedia.com/go/getflashplayer"
src="http://alimmahdi.webs.com/Jam&kalender/jam_kalender.swf"
width="175" height="40" type="application/x-shockwave-flash"
wmode="black"></embed></div>
</td>
Bila ingin
menambah widget jam dan hari animasi, letaknya ganti tulisan - SEMOGA BERMANFAAT dengan
kode berikut ini <div
align="center"><embed
pluginspage="http://www.macromedia.com/go/getflashplayer"
src="http://alimmahdi.webs.com/Jam&kalender/jam_kalender.swf"
width="175" height="40" type="application/x-shockwave-flash"
wmode="black"></embed></div>
Untuk
melihat hasilnya adalah seperti pada bottom tab di bagian bawah blog ini.
Akhirnya dicukupkan sekian artikel Pasang
Bottom Bar dengan Teks Berjalan ini semoga bermanfaat banyak Blogger.
Jangan sungkan berkomentar !
SUMBER
PUSTAKA:
Muhammad
Adam Hussein. November 2012. Pasang Bottom Bar dengan Teks Berjalan.
Pasar Toko Online. Mei 2012. Pasang Bottom Bar
dengan Teks Berjalan.
2 komentar untuk "Pasang Bottom Bar Dengan Teks Berjalan"
Perlu diketahui juga bisa menaikkan jumlah kunjungan karena link tersebut terbaca oleh mesin pencari.
Makanya, saya memakainya.
Sayangnya dalam template ini hanya bekerja pada halaman depan saja, tergantung pada template bisa keseluruhan posting sebetulnya bila berbeda template.
BACALAH SEBELUM BERKOMENTAR
Dilarang berkomentar dengan akun Unknow, akun Profil Tidak Tersedia, akun yang tidak dengan nama asli. Dilarang berkomentar dengan menaruh link didalam komentar baik link hidup maupun link mati.
Kenapa?
Karena kami tidak akan menayangkan komentar-komentar tersebut. Kami hanya menayangkan komentar yang relevan (sesuai dengan topik yang sedang dibahas) dan komentar yang berbobot dan bermanfaat. Tidak untuk komentar basa-basi seperti: nice info, keren gan, makasih infonya, mantap, dan lainnya. Jadi daripada sia-sia lebih baik ikuti aturan main berkomentar di blog ini.