Pasang Bottom Bar Dengan Teks Berjalan

Pasang Bottom Bar Dengan Teks Berjalan
Oleh: Muhammad Adam Hussein
[Penulis Buku Fenomena Remaja]


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.

Ilustrasi Widget Bottom Bar
Ilustrasi Widget Bottom Bar
[Klik gambar untuk memperbesar]

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(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    
         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"

  1. Wew keren mas, mungkin kpn bisa ane terapin. Thanx atas tutorialnya

    BalasHapus
    Balasan
    1. Yupz, sama-sama, kalau blog saya sih udah dipasang.
      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.

      Hapus

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 dengan isi pembahasan artikel dan komentar yang berbobot dan bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Teh Celup Herbal Bidara Ruqyah

Rp. 30.000 (isi 25 celup/belum ongkir)

PESAN MELALUI WHATSAPPS : 08997527700