Fixed Recent Post Widget Blogger. Apa itu widget recent post? widget recent post adalah widget yang menampilkan artikel terbaru yang baru kamu publikasikan. Widget recent post yang ini bisa kamu atur apakah ingin menampilkan widget terbaru di semua label atau widget terbaru berdasarkan label.

Fixed recent post ini saya tambahkan efek slide dengan css keyframe, agar lebih menarik dan tentu saja untuk menarik perhatian pengunjung blog. Fixed recent post ini letaknya tetap di sudut kanan blog, jadi walaupun halaman di scroll letaknya tetap di tempatnya.

Widget Fixed Recent Post Slide Effect For Blogger Blog
Fixed Recent Post

Baca:

Membuat Fixed Recent Post widget di Blogger

1. Di Blog Blogger.
2. Pilih menu tata letak > Tambahkan widget/Tambahkan gadget > HTML/Javascript
3. Masukan kode dibawah ini
<style>
.bw-seocips a:link,.bw-seocips a:visited{color:#222;text-decoration:none}
.bw-seocips a:hover,.bw-seocips a:active{color:#222;text-decoration:none}
.bw-seocips {background:#fff;width:300px;margin:0;padding:0 10px 10px 10px;border:1px solid #ddd;box-shadow:0 2px 2px #ccc;font:13px arial;line-height:1.7em;position:fixed; bottom:1%; right:1%; z-index:9999; box-shadow:0 3px 4px #ddd; border:1px solid #ddd; -moz-animation:seocips-kiri 4s;-webkit-animation:seocips-kiri 4s;animation:seocips-kiri 4s;}
.bw-seocips ul, .bw-seocips li, .bw-seocips ul li {padding:7px 7px ;border-bottom:1px dotted #ddd;list-style:none;}
.bw-seocips a:link, bw-seocips a:visited {color:#222;text-decoration:none}
.bwTitle-seocips {Font:15px arial;border-bottom:1px solid #ddd;margin-bottom:10px;margin-left:-10px;margin-right:-10px;padding:12px;background: repeating-linear-gradient(45deg,transparent 0,transparent 70%,#6aa84f 100px,#6aa84f 1000px);box-shadow:0 2px 2px #ddd;}
.bwcontent-seocips{border:1px solid #ddd;padding: 5px 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}
#rcp2-seocips { height:112px; overflow:hidden; padding:0; background-color:#fff; width:auto; border:solid #ddd 1px; box-shadow:0 0 5px #eee; }
#rcp2-seocips:hover {  overflow:hidden; padding:0;width:auto; border:solid #ccc 1px; box-shadow:none; }
#rcp2-seocips ul { list-style-type:none; margin:0; padding:0; }
#rcp2-seocips li { list-style:none; height:80px; padding:10px; border:dotted #ddd 1px; margin:5px; background-color:#FFFFFF; }
#rcp2-seocips li:hover { border:solid #ddd 1px; }
#rcp2-seocips a { color:#222; font-family:Verdana; font-size:12px; font-weight:bold; text-decoration:none; }
#rcp2-seocips .news-title { margin-bottom:5px; font-size:12px; color:#990000; }
#rcp2-seocips .news-text { font-size:10px; color:#333; text-align:left; font-family:Verdana; font-style:italic; font-weight:normal; padding-bottom:10px; }
#rcp2-seocips img { float:left; margin-right:10px; margin-top:10px; width:60px; height:60px; border-radius:50%; border:4px double #6aa84f; box-shadow:0 0 2px #e06666; }
@-webkit-keyframes seocips-kiri{from{transform:translate(-2000px, 0px);}to{transform:translate(0px,0px);}}
@keyframes seocips-kiri{from{transform:translate(-2000px, 0px);}to{transform:translate(0px,0px);}}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/XedRcpSeocips.js"></script>
<div class="bw-seocips">
  <div class="bwTitle-seocips">
 <i class="fa fa-plus fa-spin"></i> <b>Recent Post</b>
    </div>
  <div class="bwcontent-seocips">
    <div class="bwcontent-seocips2">
  <!-- start -->
<!-- script start -->
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rivaiscript();
interval = setInterval(rivaiscript, pause);
});
</script>
<div >
<ul id="rcp2-seocips">
<script style="text/javascript">
var numposts = 10;
var numchars = 0;
</script>
<script
src="http://www.seocips.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"></script>
</ul>
</div> <!-- script end -->
  <!-- /end -->
</div></div></div>

Setting Widget:

Kode berwarna merah adalah lebar widget, silahkan ubah nilainya untuk menambah atau mengurangi lebar widget.
Ganti kode berwarna biru diatas dengan link blog kamu.
Jika kamu ingin menampilkan widget berdasarkan label, ubah kode seperti dibawah ini:
http://www.seocips.com/feeds/posts/default/?orderby=published
Menjadi:
http://www.seocips.com/feeds/posts/default/-/Tutorial%20Blog?orderby=published
4. Ganti link berwarna biru diatas dengan link blog dan warna hijau dengan nama label blog.
5. Save widget.



Selamat kini di blog kamu telah terpasang widget recent post.
1 Komentar untuk "Membuat Fixed Recent Post Widget Slide Effect Di Blogspot"

cara buat featured post kaya di halaman home gimana
mohon tutorialnya