Cara Membuat Button ber-link di blog

Cara membuat tombol untuk blogspot sangatlah gampang, karena kita hanya membutuhkan beberapa kode HTML yang amat singkat.
Beberapa tujuan pembuatan tombol atau button ini hanya agar tampilan tulisan maupun link yang kita sediakan terlihat lebih menarik. Selain itu dengan tampilan tombol akan terlihat lebih unik daripada hanya sekedar tulisan saja.
Sebagai contoh, berikut adalah tulisan yang dibentuk dengan gaya tombol/button namun tidak mengandung link.


Untuk membuat tombol di atas, anda hanya membutuhkan kode berikut :

<button>Membuat Tombol di Blog</button>

Lalu, jika anda ingin membuat tombol yang terdapat teks dan link di dalamnya seperti di bawah ini :

Maka kode yang anda perlukan untuk membuat tampilan tombol dengan teks plus link-nya yaitu sebagai berikut :

<button><a href="http://amapara.blogspot.com/">Membuat Tombol ber-Link di Blog</a></button>

Jika anda ingin membuat Button/Tombol agar linknya terbuka di tab baru, maka anda harus menggunakan kode berikut :

<button><a href="http://amapara.blogspot.com" target="blank">Membuat Tombol ber-Link di Blog</a></button>

Maka hasilnya seperti dibawah ini:



Catatan:
Untuk mengetahui perbedaannya, langsung saja klik pada ketiga tombol diatas.

Oh yah, tombol ini  bisa menggunakan di dalam postingan maupun di halaman depan blog (sidebar, header, footer, dll)

Cara Membuat Recent Post Berjalan di Slider

Salam sahabat bloger kali ini kita membahas cara membuat recent post/post popular/artikel terkait yang berjalan top/down di sidebar, Selain memperindah Blog recent post juga membantu pengunjung lebih bebas memilih jdul artikel atau postingan yang ingin mereka baca.

Screenshot 

ini dia contoh gambarnya 

 Nah bagi shabat bloger yang berminat membuat recent post seperti gambar di atas langsung saja copas code script di bawah.

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#A0522D;
    border:solid 1px #FFFAFA;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
  
</style><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script><br />
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script><br />
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
  
</script><br />
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
  
</script>     <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script>     </ul>
<small><a

Cara pasang.

1. Login blog sahabat

2. Klik rancangan >> Tata letak >> tambah Gadget>>HTML java Script

3. Masukkan kode di atas ke dalam teks box.

4. klik Save dan petinjau hasilnya.

Untuk merubah warna layout, tulisan dan ketebalan silahkan ganti kode warna di bawah sesuai dengan keinginan sahabat sekalian.

Pilih kode warna Di Sini..!!

Background-color:#A0522D; border:solid 1px #FFFAFA;} #rp_plus_img a{color:#00000;}

Nah itu saja sob seputar tips cara membuat recent post berjalan.

 

 

sumber : http://fauzan-bachrie.blogspot.com/2013/01/cara-membuat-recent-post-berjalan-di.html