Personal Responsive Blogger Template

Live PreviewFree DownloadBuy now

• One time Purchase - Full time support - Best way to thank us. No footer credits in both Free and Premium Versions. We won't force you too keep the credits but at least we wish you to thank us by keeping our credits. Don't worry this doesn't affect your blog.

Personal Template Documentation

Personal is a responsive free blogger template by ar-themes. 2 Columns could be used for personal blogs about trips, visits, adventures or personal notes. Support all browsers including IE, Firefox, Google Chrome, Opera and Safari. Enhanced pages with special typographic style. SEO optimized and much more awesome features.

1. Header Logo

+ You logo uploaded should be 190px Width and 88px Height
+ Your description must be one small word just like "Ar-themes"

+ Don't forget to check on "Have description placed after the image"

2. Main Header Background

+ To edit Background from your template tab open Edit HTML
+ Find the following words <!-- Main Header Background -->
+ Beneath it change the image URL inside src='......' with your image URL

<!-- Main Header Background -->
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx6JLs1Gdx5r8NV0p9xhNvXGiJoVFBZvggECfEBb9-Zz1wBxwgao3dRwyvDRn3B-ud3TVLUO4Kz_Bqwd2UZufgbw986V7dhsjANdPuQr6buAAgmlw8ip66faE4X-loB0BQkXmMGz8rmJg/s1600/bg.jpg'/>

3. Posts Author Box

+ To edit Posts Author Box from your template tab open Edit HTML
+ Find the following words <!-- Posts Author Box -->
+ Beneath it change the needed edits

<!-- Posts Author Box -->
<h4>Ar-themes</h4>
<p>Proin quis tempus nulla. In sed velit dignissim, consequat est id, varius lorem. Suspendisse tristique quis justo atinterdum dignissim.</p>

4. Other Notes

+ To edit the following things from your template tab open Edit HTML
+ Find the following words respectively to edit the content

• Top Phone Number find <!-- Top Phone -->
• Top Social Icons find <!-- Top Social Icons -->
• Main Navigation find <!-- Main Navigation -->
• Call Out Link find <!-- Call Out Link -->
• Footer Social Icons find <!-- Footer Social Icons -->

+ Beneath it change the needed edits

5. Typography Codes

Paragraph
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor quam, pretium eu placerat eu, semper et nunc. Nullam ut turpis dictum, luctus mi quis, luctus lorem. Nullam porttitor consectetur nunc in tempor. Cras vitae venenatis sem, at pretium arcu. Nulla hendrerit dui quis metus laoreet, eget blandit arcu cursus. Mauris in libero rutrum, consectetur velit vel, blandit neque. Ut sodales, eros id ornare blandit, nulla erat consequat arcu, ac pretium urna nunc nec sapien. 
</p>

<hr>

<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>

Read More

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>

Read More

Lyrics Responsive Blogger Template

Live PreviewClient Requested

Read More

Templates Blogger Template

No Live PreviewClient Requested

Read More

NEWS. Responsive Blogger Template

Live PreviewPurchase $ 21

Read More

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>

Read More

Porto Responsive Blogger Template

Live PreviewFree Download

Template	Porto Responsive Blogger Template
Author	ar-themes
Date	16 / 9 / 2014
Labels	responsive - 2 columns - portfolio - free - blue - white - tooltips
Featrues	Fully 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 Included	Porto-Template.xml file
	Backup Javascript Files
	Full Documentation (How to upload and edit template)
	Background Images

Read More