Hi My Friends,Now i am sharing with yours most stylish & fastest Recent Posts Widget. Visitors Can known about your recently posts with thumbnail. More faster loading, speedy & more attractive widget for your blog. If you like this widget so just follow this post.
How to add This Widget to your blog?
- First Log in your blog
- then go to Layout
- after Add A Gadget
- then Html/JavaScript
- Then Paste Following Code
<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:#494848;
padding:8px;
background-color:#99cc00;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#48D;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOOCbv82U-NSyp1p-91UFyHgd2lT7eWgp93F6_dAiV1Yao0TVbtPhs2IOGlRTXlyHMCGsBXdB1b3JABnrmuKOPNm4X7h1EU6ew1aZg6VVxbJVCjiVfyt6f-zYU_qT11arN5rPyJ6XDYcoB/s1600/loading_small.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #FA7C19;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle = "Recent Post", // Widget Title
numposts = 20, // The number of thumbnail / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiupmGKRapgO8eyCLFRB7XlrqCvm3CamishTK9FZtI5Pt2Ve9OmLkOXJB51kUR7ooIUkz3p4jCIE9MgJh5MNvFOQTiGsT5hA0twpF18sDho7ss4SXsX7GL_BLaIf80GfVE1onHndJXiC_EC/s1600/no-image-found-100x100-s2free-blog.png", // Image that show up if the post doesn't have a image
blogURL = "http://tech-everyday.blogspot.com/"; // Your Blog Address
</script>
<script src="http://f.3eeweb.com/js/post-gallery.js" type="text/javascript"></script>
Change The Following Link & code
- Your Widget Width
- Your Blog Site Link Address
Do you like this post? Please link back to this article by copying one of the codes below.
URL: HTML link code: BB link code:
No comments: