Membuat Widget Fixed Recent Post dengan Efek Slide di Blog

Fixed Recent Post widget

Fixed Widget Recent Post

Tata letak HTML / Javascript

<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/3.7.0/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="https://www.sepeser.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"></script>

</ul>

</div> <!-- script end -->

  <!-- /end -->

</div></div></div>

Setting Widget:

Video Tutorial

Penutup