2014

في 0
Live Preview 1Live Preview 2

Popular Posts Gadget of Blogger has a specific fixed style that isn't changed. Here we will provide a new style for this widget. You can edit it easily by yourself if you have basic information in HTML, CSS and JAVA.


Popular Posts Style 1 - Live Demo

Step 1: the CSS code
Copy the following css code and paste it before </head> tag


<style type='text/css'>
.popular-posts ul {
  list-style: none;
  padding: 0;
}
.popular-posts ul li {
  float: left;
  width: 150px;
  height: 150px;
  padding: 10px !important;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.popular-posts .item-thumbnail {
  margin: 0;
  background-color: #000;
}
.popular-posts img {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding:0;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover img,
.popular-posts .item-thumbnail-only:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0.5;
}
.popular-posts .item-title a {
  color: #fff;
  position: absolute;
  text-align: center;
  left: 12px;
  right: 12px;
  bottom: 40px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover .item-title a,
.popular-posts .item-thumbnail-only:hover .item-title a {
  opacity: 1;
  visibility: visible;
}
.popular-posts .item-snippet {
  display: none;
}
</style>

Step 2: the Java code
Copy the following java code and paste it before </body> tag


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript'>
  $('.popular-posts .item-snippet').remove();
  $('.popular-posts img').attr('src', function(e, t) {
    return t.replace('/s72-c/', '/s200-c/')
  });
</script>

Popular Posts Style 2 - Live Demo

Step 1: the CSS code
Copy the following css code and paste it before </head> tag


<style type='text/css'>
.popular-posts ul {
  list-style: none;
  padding: 0;
}
.popular-posts ul li {
  width: 100%;
  height: 100%;
  padding: 10px !important;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.popular-posts .item-thumbnail {
  margin: 0;
  background-color: #000;
  overflow: hidden;
}
.popular-posts img {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding:0;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover img,
.popular-posts .item-thumbnail-only:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0.5;
}
.popular-posts .item-title {
  padding: 10px 0px;
  display: inline-block;
}
</style>

Step 2: the Java code
Copy the following java code and paste it before </body> tag


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript'>
  $('.popular-posts img').attr('src', function(e, t) {
    return t.replace('/s72-c/', '/s350-c/')
  });
  $('.popular-posts ul li .item-snippet').each(function(){
    var txt=$(this).text().substr(0,60);
    var j=txt.lastIndexOf(' ');
    if(j>10)
      $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,' ...'));
  });
</script>
Continue reading

في 0
Live PreviewFree Download

Template Porto Responsive Blogger Template
Authorar-themes
Date16 / 9 / 2014
Labelsresponsive - 2 columns - portfolio - free - blue - white - tooltips
FeatruesFully responsive template
Compatible with IE 9.0 and heighr, firefox, safari, opera and chrome
Support font Awesome CSS icons
Social icons area
Posts grid view
Infinite scroll
Supports blogger template designer
Customized error 404 page
Customized archive and labels pages
Enhanced footer posts navigation
Comments with better style
CSS tool tips for posts
Fast loading with clean codes
SEO optimized and Ads ready
Files IncludedPorto-Template.xml file
Backup Javascript Files
Full Documentation (How to upload and edit template)
Background Images
Continue reading

في 0
Live PreviewFree Download

Template Infinite Responsive Gallery Blogger Template
AuthorAr-themes
Date12 / 8 / 2014
Labelsresponsive - 1 column & 2 columns - Portfolio - Premium - orange - dark
FeatruesResponsive Template
Compatible with IE 9.0 and heighr, firefox, safari, opera and chrome
Nested Layout
Masonry Grid
mMenu Plugin
Font Awesome Icons
SEO optimized and Ads Ready
Tipsy Plugin
Custom Error 404 - Archive -Label Pages
Footer with Social Icons Included
Files IncludedInfinite_Template.xml file
Backup Javascript Files
Full Documentation (How to upload and edit template)
Background Images
Continue reading
الاشتراك في: الرسائل (Atom)