Griddy Responsive Blogger Template

Live PreviewFree DownloadBuy now

• One time Purchase - Remove footer credits - full time support - Best way to thank us.

Griddy Template Documentation

Griddy is a responsive free blogger template by ar-themes. SEO optimized. Support all brwosers including IE, Firefox, Google Chrome, Opera and Safari. 2 Columns. Grid gallery enhanced style with responsive carousel. Enhanced pages with special typographic style.

1. Featured Slider

+ To add Featured Slider copy the following code and paste it inside HTML/JavaScript Gadget

<script type="text/javascript">
var numposts = 6;
var outerclass = "featured-slider";
var starttag = "";
var endtag = "";
var intag = 'li';
</script>
<script type="text/javascript" src="/feeds/posts/default/-/LABEL?alt=json-in-script&callback=labelthumbs"/></script>

+ Change the word LABEL with your label for posts
+ Change the number "6" inside numposts = 6; with your needed number of posts
+ Number of posts in numposts = 6; must be equal or lower than the number of label posts

2. Mega Menu

+ To add Mega Menu copy the following code and paste it under the link of your menu list

<script class='java' type='text/javascript'>//<![CDATA[
var numposts = 5;
var outerclass = "sub-menu";
var starttag = "<li>";
var endtag = "</li>";
var intag = "div";
//]]></script>
<script class='java' src='/feeds/posts/default/-/LABEL?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>

+ Change the word LABEL with your label for posts
+ Change the number "5" inside numposts = 5; with your needed number of posts
+ Number of posts in numposts = 5; must be equal or lower than the number of label posts

3. Typography Codes

<h1>h1 Typography Title</h1>
<h2>h2 Typography Title</h2>
<h3>h3 Typography Title</h3>
<h4>h4 Typography Title</h4>
<h5>h5 Typography Title</h5>
<h6>h6 Typography Title</h6>

<hr>

Font Size
<span style="font-size: xx-small;">Font Size [font-size: xx-small;]</span><br>
<span style="font-size: x-small;">Font Size [font-size: x-small;]</span><br>
<span style="font-size: small;">Font Size [font-size: small;]</span><br>
<span>Font Size Normal</span><br>
<span style="font-size: large;">Font Size [font-size: large;]</span><br>
<span style="font-size: x-large;">Font Size [font-size: x-large;]</span>

<hr>

Unordered List
<ul>
<li>Etiam nec tincidunt arcu</li>
<li>vitae gravida nisi convallis</li>
<li>Proin suscipit erat</li>
<li>Titin cidunt vitae ex</li>
<li>Praesent eget ante rhoncus</li>
</ul>

<hr>

Ordered List
<ol>
<li>Titin cidunt vitae ex</li>
<li>Praesent eget ante rhoncus</li>
<li>vitae gravida nisi convallis</li>
<li>Etiam nec tincidunt arcu</li>
<li>Proin suscipit erat</li>
</ol>

<hr>

Block Quote
<blockquote>
<p>Pellentesque sed imperdiet massa. Morbi eu neque sed nisi volutpat varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non arcu non velit dapibus vehicula. Proin varius sollicitudin iaculis. Pellentesque feugiat sed augue quis condimentum</p>
<cite>Ar-themes * Griddy</cite>
</blockquote>

Lyrics Responsive Blogger Template

Live PreviewClient Requested

Templates Blogger Template

No Live PreviewClient Requested

NEWS. Responsive Blogger Template

Live PreviewPurchase $ 21

Populare Posts Blogger Gadget New Style

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>

cricket ducks

click here to download

all 3gp and mp4 cricket k lye go down