Open top menu
Tutorial # 37 - Fancy E-mail Subscription Form of Blogger

If you want a simple E-mail Subscription Form, see the previous tutorial - Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot. However if you want to make it a little bit fancy, this tutorial will help you in making so.

Step 1: Follow the Steps 1-6 of the previous tutorial - Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot.

Step 2: Now copy and paste the following code into any webpage or HTML JavaScript widget (by going to Blogger Dashboard > Layout) and make the changes given below.

Customization
- Replace the URL address in line # 3 to change the email icon

- To change the width or the text area, increase/decrease the 190px value in line # 36

- Replace http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog with your Feedburner Email Feed link in line # 40. You can get it by visiting your feedburner account then navigate to "Publicize" and then to "Email Subscriptions".

- In line # 42, replace EarningViaBlog with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog.


Step 3: Now Save your widget and you're done. Check and Enjoy!
Read more
Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot

Before you add Email Subscription Form to your blog, you need to "Burn" Blogger RSS Feeds at Feedburner.

What is RSS

A RSS (Really Simple Syndication) feed is a XML-based format for your content. Most blogging platforms, for example, will have an RSS feed built in. Whenever you start publishing posts, your latest posts will be updated in the RSS feed. Visitors to your website can subscribe to your blog’s RSS feed.

What is Feedburner

Feedburner is a free web service which enhances bloggers ability to manage their RSS feeds and track usage of their subscribers.

The following steps show you how to Burn Blogger RSS Feeds:

Step 1: Go to Feedburner and sign in to Feedburner with your Google Account (create a Google Account first if you don’t have one).

 Step 2: To set up your RSS feed with Feedburner, simply copy the URL of your RSS feed and paste it into the “Burn a feed right this instant” box. Then click Next >>

Step 3: On the next screen, choose the second options - RSS

Step 4: On the next screen you will be given your RSS feed’s new URL on Feedburner. You will want to use this URL anywhere you reference your RSS feed on your blog. Change the feed title and address with your own.


Step 5: At this stage, just click on "Skip directly to feed management".

Step 6: Now you can change the default "Communication Preferences" if you want. This is basically the format of the E-mails which are to be sent to the subscribers.


Step 7: Now copy and paste the code (See screenshot below) into any webpage or HTML JavaScript widget. Your subscription form will be automatically. From there readers can subscribe to receive daily email regarding your newest content.


Now you're done. If you want a fancy type of Subscription Form, see the next tutorial - Tutorial # 37 - Fancy E-mail Subscription Form of Blogger

Step 8: Redirecting All Your Blog Feed To Feedburner - (Optional)
Unless you redirect all your blog feed to Feedburner you won’t get accurate subscriber numbers because some of your readers subscribe using your original blog feed.

To do this:

1. Go to Settings > Site Feed in your blog dashboard

2. Add your Feedburner address to Post Feed Redirect URL and click Save Changes.


3. Now all your feeds is automatically redirected through FeedBurner and you’ll be able to track subscribers. And now newest content will be automatically sent to your subscribers. Enjoy! You may check it by subscribing your E-mail. After subscribing you will receive an E-mail for confirmation which needs to be confirmed before getting daily updates of the newest content of your blog.
Read more
Tutorial # 35 - Numbered Comments on Threaded Comments for Blogger/Blogspot

This tutorial helps you to understand how to add numbered comments with comment bubbles on the threaded comments as shown in the picture below:

This will help you to specify any comment using its 'reference' number.

Step 1: From your Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2: Click anywhere inside the code area and press the CTRL + F keys to open the Blogger's search box. Type ]]></b:skin> inside the search box then hit Enter to find it.

Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3: Just above ]]></b:skin>, add the following CSS code:

- If you want to have no bubble icon, remove lines # 12-18.

- To change the comment bubble, replace the URL with the URL address of your own icon. [URL address of bubble/icon will be made by inserting it somewhere in your blog and then right-click on it and click on "Copy image address". Then the address will be saved in your clipboard which can be used to replace the URL in line # 14 of the above CSS code. After doing so, you may remove the picture inserted.]

- To change the position of comments count, increase/decrease the values (10 & 3) from padding-left and padding-top in lines # 12 and 13 respectively

- To change the position of comments bubble/icon, change the values (7 & 10) from margin-top and margin-left in lines # 15 and 16 respectively.

- To change the font and color of the comments count, change the values in lines # 10, 11 and lines # 27, 28.

Step 4: Now Save the Template and you're finished!

Read more
Tutorial # 34 - How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

This tutorial will help you to enlarge the first letter of posts and comments which stretches down three or four lines with the text wrapped around. That letter is called as "Drop Cap" The drop cap letter can also use a different font and have a different color from the rest of the text. This style can be often seen in newspapers, and magazines.


For Posts

Step 1: From your Blogger Dashboard, go to Template and click on the Edit HTML button:


Step 2: Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type ]]></b:skin> inside the search box then hit Enter to find it.

Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3: Just above ]]></b:skin>, add the following CSS code:

Font size and color can be edited by amending the lines # 5 and 6 respectively.

Step 4: Now search for this code: <data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below: <div class='capital'><data:post.body/></div>

Step 6. Save the changes by clicking on the Save template button

Note: If the above code is not working, add one of following codes from this example: <p class="capital"><data:post.body/></p> OR try this instead: <span class="capital"><data:post.body/></span>


For Comments

Step 1: Follow the above Step 1, 2 & 3 (if you have already added the CSS code, skip above Step 2 & 3)

Step 2: Then Search for this piece of code:<data:comment.body/>

Step 3: Add <p class="capital"> before and add </p> after the above searched code

Step 4: Save your Template
Read more
Tutorial # 33 - How to add Calender Dates Next to Blogger Posts

If you want to have a calendar style dates next to your Blogger posts, you need to look no further than this blog. In this tutorial, we'll learn how to create a calendar style for your Blogger posts date!


Step 1: Go to "Settings" > "Language and Formatting" - "Date Header Format" and change the date format as you can see in this example below (first add day, month and then year)

Step 2: Go to Template > click the "Edit HTML" button

Step 3: Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 4. Type or paste the following line inside the search box and hit Enter to find it:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Step 5. In case you find it twice, replace it twice with this code:
<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Step 6. Now type this tag inside the search box and hit Enter to find it:
</head>

Step 7: Just above the </head> tag, paste this code:


Before saving the Template, here we can make some changes:

- To change the calendar style, replace the url in line # 22 with yours;
- If the calendar doesn't appear as it should, change -108 line # 27 with 0;
- Lines # 38, 46, 53 where you can change the color of the dates

Step 8: Now Preview your Template and if everything looks ok, hit the Save Template button.
Read more
Subscribe to: Posts (Atom)