Latest Templates :
Recent Templates
View As:

Blogspot Tip: Add Widget WordPress Style Subscribe Box For Blogger


This article I will share a style of WordPress Email Subscribe Box to Blogger. With this trick you will have a framework subscribe receive free new article via email like blogs on WordPress platform. You can see in the illustration image below:


Blogspot Tip: Add Widget WordPress Style Subscribe Box For Blogger


Here are the steps taken:

Add Widget WordPress Style Subscribe Box For Blogger:


1. In Admin page, you click Layout, create a gadget using click Add a Gadget button, next click HTML/Javascript in place want to display.

2. Paste the following code in the Content part:

<!--WP Subscribe Box by researchtowork-->
<div align="center" id="kjmagic">
<div id="kjsubscription" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;">
<h4 id="kjmagic-title-text" style="color: 000; font-size: 20px;">
Subscribe to receive news via your Email</h4>
<div id="kjmagic-sub-title-txt" style="color: 000; font-size: 14px;">
Subscribe to receive free new article via your Email</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=researchtowork', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="kjmagic-subscriber-name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter your Name" /><br />
<input class="email" id="kjmagic_subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter your Email" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="researchtowork" /><input name="loc" type="hidden" value="en_US" /> <input id="kjmagic-submit-text" style="height: auto; padding: 5px 0;" type="submit" value="Subscribe Now !" /></form>
</div>
</div>
<style type="text/css">>
#kjsubscription {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#kjsubscription p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#kjsubscription input.name {
background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;}
#kjsubscription input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#kjsubscription input.email {background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#kjsubscription input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#kjsubscription h4 {margin-bottom: 8px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#kjsubscription input[type="submit"] {background: #f6640e; border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#kjsubscription input[type="submit"]:hover {color: #FFFC00;}</style>
<!--WP Subscribe Box by researchtowork-->


Customize code:
Editing blue words into your Feedburner ID. If you have not registered site feeds you can view the installation guide and sign up for free Here.
Rate it :

Blogspot Tip: The Only Show Post Of ONE LABEL In Home Page Of Blogspot


When design blog, you sometime only want to display post of ONE LABEL in Home Page.


Blogspot Tip: The Only Show Post Of ONE LABEL In Home Page Of Blogspot


Characteristics: With this tip, at your home page show only posts of a single label and the posts belong other labels are hidden.

Method only allowing show posts belong a specific lablel in Home Page:


1 Log in into your blog.

2 Select the template => Choose Edit HTML (Edit HTML)

3. Find the code <b:includable id='main' var='top'> and drag the mouse down a few lines you will find similar code as shown below (these code lines might different depending on each blog).

<b:loop values='data:posts' var='post'>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:include data='post' name='comments'/>

</b:if>

<b:if cond='data:post.includeAd'>

<b:if cond='data:post.isFirstPost'>

<data:defaultAdEnd/>

<b:else/>

<data:adEnd/>

</b:if>

<data:adCode/>

<data:adStart/>

</b:if>

<b:if cond='data:post.trackLatency'>

<data:post.latencyJs/>

</b:if>

</b:loop>



4. Replace it into the code below:

<b:loop values='data:posts' var='post'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == "Show Label"'>

<b:include data='post' name='printPosts'/>

</b:if>

</b:loop>

</b:if>

<b:else/>

<b:include data='post' name='printPosts'/>

</b:if>

</b:loop>


Here Show Label is name label that you want to display the article of that label in the homepage.

5. Now, we will find closing tag </b:includable> of <b:includable id='main' var='top'> tag. And put the following code below into AFTER the </b:includable> this closing tag.

<b:includable id='printPosts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>


6. Finally, save template and checking result.
Rate it :

Analysis Structure Of Linezap Responsive Blogger Template


Linezap Responsive Free Blogger Templates
Demo | Download


Name Template: Linezap Blogger Template

Author: ThemeXpose

File Type: XML Document

File Size: 191 KB

Here we will analysis based on code of template. There are around 4711 code lines.


These are 10 first code lines in Linezap Responsive Blogger Template.

1. <?xml version="1.0" encoding="UTF-8" ?>

2. <!DOCTYPE html>

3. <html b:version='2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  4. <head>

   5.  <!--[if lt IE 9]>

6. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>

7. <![endif]-->

   8.  <meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/>

   9.  <meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>

   10.  <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>



Analysis:

Line 5,6,7 is comment, we can ignore them.

Line 1: <?xml version="1.0" encoding="UTF-8" ?> is XML declaration, and when use it so must declare in first line in the document.

There are 2 parts in XML declaration:

1. The version number of XML document: <?xml version="1.0"?> - This is mandatory. 1.0 is current version
2. The character encoding declaration: <? encoding="UTF-8" ?> - This is option. It appears after the version information.
Rate it :

Download Johny Cassia Responsive Free Blogger Template


Johny Cassia Responsive Free Blogger Template is a Clean & responsive blogger template. Suitable for all kinds of personal blog, niche blog, corporate blog, marketing blog, authority blog or any type of creative blog or simple magazine..


Features of Johny Cassia Responsive Free Blogger Template:

Fully Responsive Design - Auto resize thumbnail image - Well Documentation - Threaded Comment - Optimize SEO - Auto Author Image - Newsletter Subscription - Custom Error 404 Page - Compatible with major browsers (IE8+,Mozilla,Chrome,Safari) - Professional admin layout, help you easy work with blog layout.



Download Johny Cassia Responsive Free Blogger Template

Demo | Download
Rate it :

Download Johny Mag Responsive Free Blogger Template


Johny Mag Responsive Free Blogger Template is a Magazine Style responsive blogger template. Suitable for all kinds of magazines, news websites, Technology, Reviews, Games, story and other related projects, with an emphasis on mixed media and typography.


Features of Johny Mag Responsive Free Blogger Template:

Fully Responsive Design - Auto resize thumbnail image - Well Documentation - Threaded Comment - Optimize SEO - Auto Author Image - Newsletter Subscription - Custom Error 404 Page - Compatible with major browsers (IE8+,Mozilla,Chrome,Safari) - Professional admin layout, help you easy work with blog layout.



Download Johny Mag Responsive Free Blogger Template

Demo | Download
Rate it :

Download Johny Ajaib Responsive Free Blogger Template


Johny Ajaib Responsive Free Blogger Template is a simple responsive blogger template with 3 column named Johny Ajaib. It's just a simple template blogger with black and grey color, 2 readmore methods with table of content, 3 column footer and 1 right sidebar. Tag H1 and H2 ready for more SEO and visitor friendly to your blog, and clean design You can use this template for your daily blog. Feel free to get this template.


Features of Johny Ajaib Responsive Blogger Template:

Fully Responsive Design - Auto resize thumbnail image - Well Documentation - Threaded Comment - Optimize SEO - Auto Author Image - Newsletter Subscription - Custom Error 404 Page - Compatible with major browsers (IE8+,Mozilla,Chrome,Safari) - Professional admin layout, help you easy work with blog layout.



Download Johny Ajaib Responsive Free Blogger Template

Demo | Download
Rate it :

Download Boxed Free Blogger Template


Boxed Free Blogger Template is a clean & elegant responsive magazine Blogger template designed specifically for great bloggers, writers and designers to help they can share their content to readers easily.


Features of Moviexpose Boxed Free Blogger Template:

Responsive - SEO Friendly - Ads Ready - Clean Layout - Fast Loading - Drop Down Menu - Slider - Social Sharing - Browser Compatibility



Download Boxed Free Blogger Template

Demo | Download
Rate it :

Minimalia Free Blogger Templates


Minimalia is a multi layout blogger template with minimal design. You can use this template for news site as well as for simple magazine sites. Minimalia is the perfect combination of design and technology. We have made our theme more dynamic and more performing, and it's our belief that this is the best blogger template which is perfect combination of design, technology and SEO.
Requirement: You need to save your own image on Blogger rather than do hotlinking from the various sources to run this template.

Features of Moviexpose Responsive Free Blogger Templates:

Minimalia is the modern blogger template with minimal design and looks.
This template has two different layouts one is news style layout and another is simple magazine style layout.
Lot of amazing features have been installed in this template like featured posts, Fontawesome icon fonts, recent and related posts etc.
We have attached a small guide so that you can easily use this blogger template without any problem.
This blogger template comes with pre-installed google fonts to make your contents look more fresh and attractive.



Minimalia Free Blogger Templates

Demo | Download
Rate it :

Expose Responsive Free Blogger Templates


Expose is a blogger theme with responsive layout and it’s High User Friendly Blogger Template. It’s design simple and clean, perfect for a variety of purposes, although focused towards Photographers and those using Portfolios to display their past and present work collections.
Requirement: You need to save your own image on Blogger rather than do hotlinking from the various sources to run this template.

Features of Moviexpose Responsive Free Blogger Templates:

Fully Responsive Design - Auto resize thumbnail image - Responsive Flexslider - Well Documentation - Threaded Comment - Optimize SEO - Custom Error 404 Page - Light Box Effect - 2 Comment System (Blogger, Facebook) - Compatible with major browsers (IE8+,Mozilla,Chrome,Safari) - Professional admin layout, help you easy work with blog layout.



Expose Responsive Free Blogger Templates

Demo | Download
Rate it :

Moviexpose Responsive Free Blogger Templates


MovieXpose is a unique Entertainment Blogger template which is suitable for any type of cinema, movie promotion, Movie Reviews, blogs and movie communities no matter the size. MovieXpose Template comes with two designs - dark background and light background. It is ads ready, two view mode (List and Grid) width cookies and Rating widget inbuilt.

Features of Moviexpose Responsive Free Blogger Templates:

Fully Responsive Design - Auto resize thumbnail image - Two View Mode (List and Grid) width Cookies - Rating widget - Automatic slider - Well Documentation - Threaded Comment - Dropdown Menu - Optimize SEO - Custom Error 404 Page - Two layout - Ads ready - News Ticker Widget - Related Post Widget - Compatible with major browsers (IE8+,Mozilla,Chrome,Safari) - Professional admin layout, help you easy work with blog layout.



Moviexpose Responsive Free Blogger Templates

Demo | Download
Rate it :

Trendy Responsive Free Blogger Templates


Trendy theme, it’s a creative Responsive Blogger Template that is suitable for personal blog or show the portfolios. Fully responsive, it has really great look and is very attractive on any device. It provides everything you’ll need to create a professional looking website. Trendy comes with two designs - Red background and Green background.

Features of Trendy Responsive Free Blogger Templates:

Fully Responsive Design - Auto resize thumbnail image - Well Documentation - Threaded Comment - Optimize SEO - Auto Author Image - Grid based Design - Newsletter Subscription - Custom Error 404 Page - Compatible with major browsers (IE8+,Mozilla,Chrome,Safari) - Professional admin layout, help you easy work with blog layout.



Trendy Responsive Free Blogger Templates

Demo | Download
Rate it :

Straight Responsive Free Blogger Templates


Straight is a grid-based, fully responsive, modern and clean blogger theme. Suitable for all kinds of magazines, news websites, personal blogs, journal, story and other related projects, with an emphasis on mixed media and typography. Straight is Responsive, the theme is highly optimized for both mobile and desktop platforms. The layout also will encourage your viewers to read all of your content and get all attention it deserves.

Features of Straight Responsive Free Blogger Templates:

Fully Responsive Design - Auto resize thumbnail image - Well Documentation - Threaded Comment - Optimize SEO - Auto Author Image - Grid based Design - Newsletter Subscription - Custom Error 404 Page - Compatible with major browsers (IE8+,Mozilla,Chrome,Safari) - Professional admin layout, help you easy work with blog layout.



Straight Responsive Free Blogger Templates

Demo | Download
Rate it :
 
TOP
Copyright © 2014. Templates - All Rights Reserved
Template Created by ThemeXpose | Distributed By Blogger Template