Recent Posts Widget With Auto-Animation

I hope everyone is well. Today i will share Recent posts widgets for your blogger blog. It will not show any image in the style of today in the form of a list with a beautiful effect, and it can say that it is auto-animation. Earlier I posted about this widgets those of you that prefer a different style of Today you have a choice. Anyway, see the details below.

Recent posts oyedageta's style is very typical of this style, but you would like to add to the bottom line with the live demo to check its progress.

Loading...

Do not worry I hope you all have liked it very easy to add the simple steps below to see the.

1. blog account, please login.

2. Dashboard Layout> Add a Gadget> HTML / Javascript click.

3. The Content of the house, copy and paste the following code.

. <style>
. gfg-root {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
margin: 0 auto;
text-align: center;
font-size: 12px;
border: 1px solid # DBDBDB;
}
. gfg-title {
font-size: 16px;
font-weight: bold;
color: # 6B6B6B;
background: # F3F3F3;
background-repeat: repeat;
line-height: 1.4em;
overflow: hidden;
white-space: nowrap;
padding: 5px;
text-shadow: 0px 2px # fff;
}
. gfg-entry {
background-color: # FFFFFF;
width: 100%;
height: 9.2em;
position: relative;
overflow: hidden;
text-align: left;
margin-top: 3px;
}
. gf-title a {
text-transform: capitalize;
color: # 0000ff;
font-size: 14px;
}
. gfg-subtitle {
display: none;
}
. gfg-list {
position: relative;
overflow: hidden;
text-align: left;
}
. gfg-listentry {
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 15px;
padding-right: 5px;
}
. gfg-listentry-odd {
background-color: # F3F3F3;
border-bottom: 1px dotted # CCCCCC;
padding: 5px;
}
. gfg-listentry-even {
background-color: # F3F3F3;
border-bottom: 1px dotted # CCCCCC;
padding: 5px;
}
. gfg-listentry-odd a {
color: # 595959;
padding: 0 0px 0 10px;
}
. gfg-listentry-even a {
color: # 242424;
padding: 0 0px 0 10px;
}
. gfg-listentry-highlight {
background: # FFFFFF;
}
. gfg-listentry-highlight: before {
position: absolute;
left: 0;
content: '\ 25BA';
font-size: 14px;
color: # DBDBDB;
}
. gfg-listentry-highlight a {
color: # 242424;
}
. gfg-root. gfg-entry. gf-result {
position: relative;
background-color: # ffffff;
width: auto;
height: 100%;
padding-left: 20px;
padding-right: 5px;
}
. gfg-root. gfg-entry. gf-result. gf-title {
font-size: 14px;
line-height: 1.2em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 2px;
margin-top: 5px;
}
. gfg-root. gfg-entry. gf-result. gf-snippet {
height: 3.8em;
color: # 000000;
margin-top: 3px;
}
. clearFloat {
clear: both;} </ style>
<script src="http://www.google.com/jsapi" type="text/javascript"> </ script> <script src = "http://www.google.com/uds/solutions/dynamicfeed/ gfdynamicfeedcontrol.js "type =" text / javascript "> </ script>
<script type="text/javascript">
function showGadget () {var feeds = [{title:'List',url:'http://learn2easyblog.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl (feeds, 'feedGadget', {title: 'Latest Posts', numResults: 10, displayTime: 5000, hoverTime: 500});} google.load ("feeds", "1");
google.setOnLoadCallback (showGadget);
</ script>
<div id="feedGadget"> Loading ... </ div>

Note: The above code http://learn2easyblog.blogspot.com to delete just enter your blog URL.


4. Then click Save to save the diameter. The job done.

If you like today's post is far better to love and share it with friends. Inshallah, I'll help if you tell me any problems. Take care of yourself, be healthy. Thank God.

Posted by Unknown

Tweet