Showing posts with label Responsive Blogger Templates. Show all posts
Showing posts with label Responsive Blogger Templates. Show all posts
Sunday, April 20, 2014
Main Photo Responsive Blogger Template
Features of this template :
- Responsive blogger template both of desktop and mobile view
- Support Template designer. You can edit the background image, font family, font size, font color and others in Template Designer
- Featured image slider with auto recent post per label
- Minimalist and clean design template
- Compatible with modern browsers
- 2 column template
- 3 column footer and more
Setting Main Photo Responsive Blogger template
1. General setting
Before install this template, make sure to change the mobile view.
Go to Template > click the Gear icon > click Yes. Show mobile template on mobile devices. > choose Custom (please see the image below)
* this setting recommended if in your current setting for mobile view is No. Show desktop template on mobile devices
2. Setting Featured Image Slider
This template support image slider with auto recent post per label/category. You just need type the Label name in widget section.
Go to Layout > click "Edit" Looped Slider widget
* Case sensitive. make sure you write correctly
3. Setting social networks
Go to Design > Edit HTML > Proceed and find this code below :
<div class='network'>
<ul>
<li><a href='https://twitter.com/ireng_ajah'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9RmRY6skBfEi9O45vbL_py-MblhFQ89fzwDbRKiGN6mZe3SaRTGrWu1BNlkRFPl01by5M_ysL6H1E56r5a3wYc-k0AXluhrZXJJByjd4a5FyKtSbLgV1PJT2M4xB8yVnsjFzAvovztdM/s1600/twitter.png' title='Main Blogger on Twitter'/></a></li>
<li><a href='https://www.facebook.com/MainBlogger'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0L_Qr_iRYMp0tImM1EKPwICcuSrDozQinaS7mXUyfgDW4XBwvW_AFhMsLE3d5m7V7PKx6B2TSmKIkIjd8B8CzgqaZz9QvhcFP1QwJM9shJWAKHLdQkSzMU2GZOC5G_8xG-I6-gUy4kLWy/s1600/facebook.png' title='main Blogger on Facebook'/></a></li>
<li><a href='https://plus.google.com/111461490683022468168'><img alt='Google+' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmUsPGPKO011Ty_yetkMEupkiJaExzhsBjiFsOXWe11FvE1buy70zLsj1oqrAxuo1CqGw1RCUO-Oer6Nwk1ss5xH7kRD6jC2cqOs2ptTDqsEV-djQTGpKWNpgRPM8inPffjA0Vnxhme0Ld/s1600/gplus.png' title='Main Blogger on Google+'/></a></li>
<li><a href='http://feeds.feedburner.com/mainbloggerz'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo1_GmY1WJuISxnQ6djhNkbVaWpofzuFVnhh2WyWFFbbllMJRgyyKRsYvt5BNNmrq6VEmL37DisJxTlMJFBjrQh16vYRT4ReTt67Chh_X19wtTudlJVeH-vzaJpuMYja4SK2NCLXdRo0jQ/s1600/rss.png' title='Subscribe RSS Feed Main Blogger'/></a></li>
</ul>
</div>
Replace : Red color with you social and RSS feed links
4. Setting Menu navigation on Bottom
Go to Design > Edit HTML > Proceed and find this code below :
<div class='creditl'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/advertise.html'>Advertise</a></li>
<li><a href='/p/contact-us.html'>Contact Us</a></li>
</ul>
</div>
Replace : Link and title menu
5. Setting Banner Ad 125*125px
For perfect view, the structure of banner ad 125*125px should be like this
<ul class='ads'>
<li>YOUR_LEFT_BANNER_CODE_HERE</li> <!-- Left banner -->
<li class='last'>YOUR_RIGHT_BANNER_CODE_HERE</li> <!-- Right banner -->
</ul>
6. Setting Widget on Mobile
To display widget on mobile or/and desktop, you can add these codes
mobile='yes'
mobile='no'
mobile='only'
For example, you want to add Popular Post widget. Default Popular Post widget look like this :
<b:widget id='PopularPosts1' locked='false' title='Popular' type='PopularPosts'/>
Then, you want to display on mobile too. So, the Popular Post widget code will be like this
<b:widget id='PopularPosts1' mobile='yes' locked='false' title='Popular' type='PopularPosts'/>If you need more information please leave a comment i am glad to see your comments here. :)
Template Owner : Main-Blogger
Wednesday, April 9, 2014
Adamz Responsive Premium Blogger Template Free Download
Adamz Responsive Premium Blogger Template Free Download
Blogger template choice is an important things to make a wonderful blog. Because everyone has aim to earn money from his blog. But you need to increase your traffic fast to make it's a source of earning. Perfect choice of your template will increase your blog visitors. Today I will give a wonderful template. Name of this template is Adamz Premium Responsive Blogger Template.
Also Read: Top Easy Ways To Generate Huge Traffic To New Blog
Adamz blogger template is a responsive blogger template. It is SEO optimized and Adsense friendly, especially designed for professionals. Attractive color and it some especial feature easily attracts visitors.
Main Features:
Auto featured post and manual featured post
Lightweight read more button
Load more post feature
Popular post widget, recent comment widget, archive widget
Slide show
And more
Support IE8+,Mozilla,Chrome,Safari
Tuesday, February 4, 2014
Blackomaz Responsive Blogger Template
Live Demo || Download
Blackomaz is essentially professional and far high quality 3 column Blogger Template designed for technology blogs, Magazine and news portal. This theme is second version of our famous theme new mashable. We have named it dynamo to give a respect to world's best Magician "Steven Frayne". This theme also has some dynamic features.
Key Features
- Retina Ready: All images, text and icon in this theme is stretchable and user can see it clearly, We have added a jquery plugin to this theme which automatically resize thumbnail according to their surrounding.
- Social Media Icons: Some real high quality Social plugins are added by default. You can see them on the main header, below post title, and many other high quality places.
- Related Post: We have added morden related post widget to this theme which don't stretch images and make it look worst.
Add Labeled Post on 3rd Column
- Go to blogger dashboard
- Click on layout tab and add gadget on 3rd column and select Html/JavaScript.
- Now paste below code in Html/JavaScript.
<div id='featurebottom1'><h2 class='headingfeature'>Technology</h2>
<div class='left-corner-canvas'/>
<script src='/feeds/posts/summary/-/technology?max-results=9&orderby=published&alt=json-in-script&callback=recentthumbs&' type='text/javascript'/>
<a class='readmoretopic' href='/search/label/technology'>Browse More</a>
</div>
<div style='clear:both;'/></script></div></div>
- Now replace technology with the label you want to show post of in 3rd column.
Fix Your Blog Header
We highly recommend you to use image logo as blog header but if you want to show text in your blog header instead of img then your blog header will look creapy, To fix it follow below steps:
- Go to blogger dashboard
- Click on Template tab
- Now click on Edit HTML button
- Paste below code above </head> tag.
<style>
.header-right {
margin-top: -48px !important;
}
</style>
Click on save button.
NOTE:
- We highly recommend you to use image logo as blog header.
- Don't Show more than 7 post on home page.
- We recommend users to show popular post on 1st column at top most position.
- Don't remove our credit link or it will redirect your blog here.
