Shoutmeloud Thesis Theme Customization - Part 3

Hi friends! I have been receiving a lot of comments and emails ever since the launch of Shoutmeloud thesis theme. Few people said that the read more hack does not work. To all those who faced the same problem, you just need to use the blogger's "Updated Post Editor" and hit the "Insert jump break" icon. To know where that icon is, have a look at the following picture.

If you wish to have an automatic read more hack for your blog, that is, if you are not comfortable with the manual hack, then read the following article to install the automatic version - Automatic Read More Hack For Blogger With Thumbnails. However, there is one main drawback with this widget. The hack crushed the image which makes the thumbnail next to the snippet look worse. So, if you are ready to sacrifice the quality of image being displayed on the thumbnail, well you can go for this hack. However, I recommend manual hack because I use manual hack on my blog:)

Well, coming to the objective of this post, I plan to provide the coding for the subscription widget. It is pretty simple to add this widget on your blog. Requires little customization but very easy to add. So, let's begin with the installation. 

1. Navigate to "Design >> Page Elements" from your blogger dashboard. Now, hit the "Add a gadget" tab and choose "HTML/JavaScript". You will notice that a new window opens up, enter the following text - Receive Free Updates as the title text.

2. For the content part of the widget, just copy the following code and paste it below the space available.

<center>
<form style="padding-top:6px;" id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=EverythingAboutBlogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Enter your email address..." id="subbox" onfocus="if (this.value == &#39;Enter your email address...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}" name="email" style="width:170px;" />
<input type="hidden" value="EverythingAboutBlogging" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input style="
        padding-left:5px;
        padding-right:5px;
        padding-top:1px;
        border: 1px solid #198DC9;
        cursor: pointer;
        -moz-border-radius: 15px 15px 15px 15px;
        background-color: #198DC9;;
        color: #FFFFFF;
        font: normal 15px Times New Roman;"
type="submit" value="Subscribe" />
</form>
</center>
<center>
<table border="0">
<tr>
<td>
<a href="http://twitter.com/mukund2081990" target="_blank" title="Follow Me On Twitter">
<img style="width:42px; height:42px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5jcPApb0QuppZR9afBeubAsZ2n6ISLdRBwpxr5bTV6evJ5JulK20-QXNU-S5ZBr9AnsesJ9ttcBNubS0RktFnGFvtWMWWTc_ToETfgLsHvp1JxNBcVtxMCCzGoNhbL8KrA5gdd-rq5TU/s800/EAB_twitter%2520icon.png" /></a>
</td>
<td>
<a href="http://feeds.feedburner.com/EverythingAboutBlogging" target="_blank" title="Subscribe Via RSS">
<img style="width:42px; height:42px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSdIddFdkT3b5Sv-jd06tWUt2wqcvqoxJGyhLA8ci052dtdp613pJgnZcwFOHH9H_Kc21RIS03tls5bE9-zeHAtt2rHWUAN6UPm6zz5a4W7P4YzqK4PVgqemRCre4KbonaeEXxA1PqPU/s800/EAB_rss.png" /></a>
</td>
<td>
<a href="http://www.facebook.com/pages/Everything-About-Blogging/159556084078530" target="_blank" title="Find Us On Facebook">
<img style="width:42px; height:42px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgybEXxCuAP7S-xjMgtNlJuZHKmfWV21x7V_VxKp-bt6pMoTlzRwy0jXtng8x0WyqfSJsqICznxU3tfb8dlWNZR5WaWb12IPRpA4JBudDKFOzouwCINw1_mTMOekKVgX2ixnihBMUQV1sg/s800/EAB_facebook%20icon.png" /></a>
</td>
<td>
<a href="http://technorati.com/faves?sub=addfavbtn&add=http://www.newbloggingtipz.com" target="_blank" title="Add To Technorati">
<img style="width:42px; height:42px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCjBtmR9XoZRio3NhmUJnCfUQvto5h-E7YlDtVvLgJsOO2zQCjY1PyM0CTknbQUTSE65O7lf_JfsiTsodXTmkmPPkdlz5GXba4n08pAaUfsmQiW3W5rpc3t64yHidta9gBj_PUTJHb7gQ/s800/EAB_technorati%2520icon.png" /></a>
</td>
<td>
<td>
<a href="http://feeds.feedburner.com/EverythingAboutBlogging"><img src="http://feeds.feedburner.com/~fc/EverythingAboutBlogging?bg=000000&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0; padding-top:5px" alt="Fellow Readers" /></a>
<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/mukund2081990/ffffff/111111"></script>
</td>
</td>
</tr>
</table>
</center>

3. Note the links highlighted in green color. Just replace those links highlighted in green with the corresponding links you obtain from social networking sites - Twitter, Facebook, Technorati. Similarly, replace my Feedburner URL with your feed URL. Replacing links are self-explanatory.

4. When it comes to the links highlighted in blue, those associated with the Feedburner forms, please obtain the code from your Feedburner email subscription form. To do so, hit the following link - Feedburner, burn your blog's post feed and obtain the code for your form by navigating to "Publicize >> Email Subscriptions" page from the Feedburner dashboard. 

5. The code for your Feedburner chicklet can also be obtained in the same page - just hit the FeedCount tab and customize the appearance of your chicklet. Replace the text in pink with your twitter username for the twittercounter. 

6. Save your widget by hitting the "Save" tab at the bottom right after these modifications and your subscription box is ready.

I hope you enjoyed this widget. If you have any problems in installing this widget on your blog, then let me know via comments or email and I will help you solve your problems. I have received few requests like the slider for the featured content, background color for the links appearing in the post and so on. To all those who requested these modifications, please wait. Once I find the coding for your customizations, I will post an article on the same.

Click4more... 13 Comments

Utilizing Media Options On Your Blog

I occasionally get in a rut when I blog. I write my article. I upload a photo. I move on. Recently though, I found myself remembering how when I first began blogging I loved doing slideshows, polls, and uploading videos. In an effort to bring back some of the magic, I have even considered doing podcasts, but never got around to it. I would still like to get back in the habit of utilizing multiple types of media on my blog. So being curious about the various ways I could make my blog content more interesting, I started keeping my eyes open.

Recently I stumbled upon an infographic that was kind of cool. I was actually exploring shipping companies for a Mother's Day package that required a speedy delivery. Light bulb moment! I thought, hey, there's another way I can use media to enhance my blog. Infographics. Below is the graphic I ran across while searching for shipping information.

[Via: Fedex Shipping]

And sure, displaying a link to an infographic in a passing post on your personal blog is a great way to stir up some traffic and add some interest. There are however some other benefits to consider as well. I began looking to see who had hosted the infographic on their site, when it struck me. 

Infographics not only add interest to the blog post’s that reference them, but they also raise awareness for the sites that host them. Had the infographic not visually grabbed my attention, I would have never had any reason to visit the site it was hosted on. Bloggers and business owners alike should take notice. Getting others to blog about an infographic you host would certainly attract people that may not find your business, or your blog, naturally.

Click4more... 0 Comments

Problogger's guide to Your first week of Blogging

Hi friends, there's an exciting news from ProBlogger Darren Rowse. I'm pretty sure many people read the earlier versions of his ebook, the best which I felt was "31 Days To Build A Better Blog". The third ebook from the ProBlogger namely, the "ProBlogger's Guide to your First Week of Blogging", provides a dynamic view about niche selection, social promotions, posting ideas and much more that are vital for a long term success on your blog.

So, what's exciting with this release? You might think it's just another ebook that runs for pages serving no value to my blog. May be, you are right with your analysis because most of the eBooks which I personally went through served no use. However, when it comes to Darren Rowse, it's a different issue. I personally recommend his books because if you implement what he says, at least 80% of what is said in his books, I'm sure you will succeed in the blogging world.

There was a small speculation when the second eBook  "The Copywriting Scorecard For Blogger" was released because the beginner's found it difficult to understand. This time Darren has clearly stated to whom this book is addressed for. The promotion page clearly states that it is aimed at bloggers who are beginning to start blogging with solid foundations including, but not limited to, those thinking about starting a new blog, those in their very first week of blogging and those looking to start a 2nd or 3rd blog who want to do it better

To add more spiciness on his new eBook launch, Darren has announced the following bonus.

Launch Bonus: If you buy ProBlogger’s Guide to your First Week of Blogging before 17 May you’ll get it for just $9.99 – that’s 50% off. You’ll also go into the draw to win a prize worth over $850.

Apart from the value for money(50% OFF till May 17th) you get via his eBooks, you will enter into a draw to grab the best WordPress themes. That is, you’ll get access to 37 themes  plus any other theme that StudioPress release going forward. So, what are you waiting for???? Go grab yourself a copy first. Just hit the following link - ProBlogger's Guide to your First Week of Blogging . 

Click4more... 6 Comments

Shoutmeloud Thesis Theme Customization - Part 2

It's been few weeks since the launch of shoutmeloud thesis theme. I received few complaints regarding the template. One of my readers pointed that the Facebook share buttons on the homepage do not share the post - meaning to say, it shares the blog URL instead of the post URL. So, the bug has been fixed and its tutorial along with the customization of navigation bars are explained in this post.

Let me first tell you how to solve the Facebook Share Button issue.

1. Navigate to "Design->Edit HTML" from your blogger dashboard. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.

2. Expand your template. To do so, ensure that you have a tick mark on the box next to the line that says 'Expand Widget Templates". Now, search for the following block of code in your template.

<div class='facebook-share'>
<script>var fbShare =
size: "small",
google_analytics: "true"
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>

3. Replace the above block of code with the following block of code.

<div class='facebook-share'>
<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>

4. That's it, the bug is solved!!! Save your template.

Next, we move on to the customization with the navigation bars. The template has two navigation bars. One above the header and one below it. To those who do not know what navigation bars are, just take a look at the following picture for better understanding. To customize these two bars and add a google adsense link unit, we just need to replace/add few lines of code. So, let's start the customization...

1. Navigate to "Design->Edit HTML" from your blogger dashboard. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.

2. Look out for the following piece of code. Note the links highlighted in green and the corresponding names highlighted in blue.

<ul id='secnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://www.newbloggingtipz.com/p/advertise-on-everything-about-blogging.html' shape='rect' target='_blank'>Advertise</a></li>
<li><a href='#'>Make Money Online</a>
<ul class='children'>
<li><a href='#'>Via Blogging</a></li>
</ul>
</li>
<li/>
<li><a href='#'>Join Us</a>
<ul class='children'>
<li><a href='#'>Write For Us</a></li>
</ul>
</li>
<li><a href='http://www.newbloggingtipz.com/2011/04/shoutmeloud-thesis-theme-for-blogger.html'>Download This Theme</a></li>
</ul>

3. Just replace all the highlighted links in green with the links you wish to point out. This is self explanatory. Also, replace the names highlighted in blue with the names you wish to have. 

4. Repeat the above two steps for the bottom navigation bar too. The coding for the bottom navigation bar is as follows - links are highlighted in green and names are highlighted in blue (similar to the coding in step 2).

<ul id='subnav'><li>
<a href='#'>Label One</a>
</li>
<li>
<a href='#'>Label Two</a>
</li>
<li>
<a href='#'>Label Three</a>
</li>
</ul>

5. Next, you need to create a Google Adsense Link Unit of the following dimensions - 728x15. Obtain the coding for the same. 

6. Search for the following line in your template. Use CTRL+F to fasten your search results.

<div id='adnav'>

7. Erase the following block of code that lies just below the line you searched in step 6 and save your template.

<script type="text/javascript"><!--google_ad_client = "pub-5551438321907005";
google_ad_host = "pub-1556223355139109";
/* 728x15, created 10/3/10 */
google_ad_slot = "2535927729";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

8. Go to the following link - SimpleCode. Paste the coding you obtained from the Adsense unit on the first block and hit the "Process" tab. You will find the processed code the block below. Leaving the two tags at the top and at the bottom (that is, <code> and </code> tags), paste the remaining code, that lies in between them, just after the line you searched in step 6. (Note: Ensure that there are not break tags at the end of each line after you process the coding on SimpleCode site.)

9. Now, save your template. That's it!

I hope you enjoyed this customization. If you have any other issues regarding the template, then feel free to leave your comments below and we will address it in our upcoming posts. So, don't forget to subscribe to our blog. We have lots more interesting articles coming up!!!

Click4more... 32 Comments

Shoutmeloud Thesis Theme Customization - Part 1

I'm happy with the feed-backs for the shoutmeloud thesis theme. If you had missed the template, then I highly recommend you to check out this article - Shoutmeloud Thesis Theme For Blogger. Though I received a lesser number of comments for the article, the response via email was tremendous. Many people raised questions about the footer. So, this issue has been addressed in this article.

If you wish to have an exact thesis footer (non-widgetized version) then, you can check out this article - Thesis Theme Footer For Blogger/Blogspot Blogs. (Note: I use the non-widgetized version because it looks exactly the same as found on shoutmeloud blog.) If you want the widgetized version which comes by default with the template, just add the widgets of your choice by hitting the "Add a Gadget" button on the "Design>>Page Elements" page.

However, when it comes to the "Blog Categories" section, you need to manually alter the footer section. This article will provide you a step by step guide for doing the same. If you are not clear about what section of the footer I'm talking about, just check the following picture.

So, follow these instructions to have a "Blog Categories" Section of your choice.

01. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.

02. Once the backup is made, search for the following line in your template. Use "CTRL+F" to fasten your search results.

<li class='cat-item cat-item-68'>

<a href='http://www.newbloggingtipz.com/search/label/Blogger%20Tutorials' shape='rect' target='_blank' title='Blogger Tutorials'>Blogger Tutorials</a>
</li>

03. You will find the links that point to my labels. So, it is pretty clear that these labels (categories) should point to your blog labels. To do so, first remove all the links that point to my blog.
04. To remove the links that point to my blog, you need to remove the following codes highlighted in GREEN.

<li class='cat-item cat-item-68'><a href='http://www.newbloggingtipz.com/search/label/Blogger%20Tutorials' shape='rect' target='_blank' title='Blogger Tutorials'>Blogger Tutorials</a>
</li>
<li class='cat-item cat-item-387'><a href='http://www.newbloggingtipz.com/search/label/Blogger%20Widgets' shape='rect' target='_blank' title='Blogger Widgets'>Blogger Widgets</a>
</li>
<li class='cat-item cat-item-874'><a href='http://www.newbloggingtipz.com/search/label/Blogging' shape='rect' target='_blank' title='Blogging'>Blogging</a>
</li>
<li class='cat-item cat-item-34'><a href='http://www.newbloggingtipz.com/search/label/Blogging%20Tips' shape='rect' target='_blank' title='Blogging Tips'>Blogging Tips</a>
</li>
<li class='cat-item cat-item-307'><a href='http://www.newbloggingtipz.com/search/label/Design%20Tips' shape='rect' target='_blank' title='Design Tips'>Design Tips</a>
</li>
<li class='cat-item cat-item-2555'><a href='http://www.newbloggingtipz.com/search/label/Free%20Premium%20Blogger%20Templates' shape='rect' target='_blank' title='Free Premium Blogger Templates'>Premium Templates</a>
</li>
<li class='cat-item cat-item-215'><a href='http://www.newbloggingtipz.com/search/label/Make%20Money%20By%20Blogging' shape='rect' target='_blank' title='Make Money By Blogging'>Money By Blogging</a>
</li>
<li class='cat-item cat-item-77'><a href='http://www.newbloggingtipz.com/search/label/Make%20Money%20Online' shape='rect' target='_blank' title='Make Money Online'>Make Money Online</a>
</li>
<li class='cat-item cat-item-64'><a href='http://www.newbloggingtipz.com/search/label/Most%20Downloaded' shape='rect' target='_blank' title='Most Downloaded Templates'>Most Downloaded</a>
</li>
<li class='cat-item cat-item-196'><a href='http://www.newbloggingtipz.com/search/label/Our%20Reviews' shape='rect' target='_blank' title='Our Reviews'>Our Reviews</a>
</li>
<li class='cat-item cat-item-39'><a href='http://www.newbloggingtipz.com/search/label/SEO' shape='rect' target='_blank' title='SEO'>SEO</a>
</li>
<li class='cat-item cat-item-9'><a href='http://www.newbloggingtipz.com/search/label/Tips%20and%20Tricks' shape='rect' target='_blank' title='Tips and Tricks'>Tips and Tricks</a>
</li>

05. You may save your template temporarily. Next, you need to find the links for your labels. To obtain the URL of the various labels in your blog, just hover your mouse over a published post which has got some labels. Check out the following picture for better understanding. 

Alternate method : To get the URL of your labels, just paste your blog URL followed by a '/search/label/' and write down the blog label as such. Note: If you have a space in the name of your labels, then each space should be replaced by %20. For example, let us assume that your blog label is BLOGGER TUTORIAL - has got a space between the word BLOGGER and TUTORIAL. So, the URL of your label should be as follows.

http://www.yourblogname.com/search/label/BLOGGER%20TUTORIAL

06. Now, replace these links with the links you removed in step 4. Add a suitable name to your label as well (Replace those names highlighted in blue in step 4 with your label name). If you are not clear with the instructions I said, just take a look at the example below - your coding should be as follows.

<a href='http://www.newbloggingtipz.com/search/label/Blogger%20Tutorials' shape='rect' target='_blank' title='Blogger Tutorials'>Blogger Tutorials</a>

07. Well, save your template now. Next, you need to design a footer logo with the following dimensions - 166x120 pixels. (Note: The logo should have a transparent background or should match the background color of the footer.) You can contact me via email or hit the services page if you need a footer logo - design charges ($5.00). 
08. Upload your logo to a website such as PICASA and get the URL for the logo you uploaded. Now, find the following link in your template (found in the CSS part of your template).

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJxxScWMHQdn07yrfxp-lHhqzoOGnx-3Y7Tz6ptGcqrOx4o1tOG9kZXWc_UpsAV6a7_QcsKmzrcNeF6siaSgxEU9a8Fj6FQS3sShdyp4u9YIX4cVI1xeLVhN3zMhCgigPB1iw8iyXLHWI/s800/EAB+Footer+Logo+2.gif

09. Replace this link with the URL of your logo (obtained after uploading your logo).
10. That's it!!! Save your template and have a look the footer.

I hope you enjoyed this customization. I will be posting more and more customizations for the shoutmeloud thesis theme in the upcoming weeks. I recommend you to subscribe to my blog so that you don't miss out any article. You can share your views about the post via comments. Your comments are always welcome!!!

Click4more... 24 Comments

Blogging For Fun Vs Blogging For Money

This is a guest article written by Saksham. If you wish to write for EAB, check out this page - Write For Us. If you ask a blogger if he or she blogs for fun or money, it’s likely you won’t get a proper answer. This is because, other than the professional bloggers who are out promoting products or services, most people blog for fun hoping to earn money in the process. Why do you blog? For fun or money?

BLOGGING FOR FUN

Before you blog, decide if you want to blog just for fun and not to make money. In this case, you don’t have to care for anyone’s opinion; just write what feels right to you and post your random thoughts. Keep it humorous and people will read your blogs. You can even write on controversial topics if you like; just know that you might get hate comments along with your fan mail.

If you have the rare talent of being able to make people laugh, start a funny blog and gain a good fan following. You can then use your blog to place Ads and make money. There are many ways that you can apply to convert your fun blog into a profitable blog.

Note that if you manage your blog well, you can always earn money off of it. So even if your initial intent is to start a fun blog, stay away from controversial topics. Earn a steady fan following by posting good and healthy content.

Unless you are a professional blogger who uses all the latest blogging tricks to generate revenue, try blogging just for fun. If your blog helps you earn money, it’s great. If not, just enjoy your blogging experience.

PROFESSIONAL BLOGGING

If you are blogging for money and not just for fun, your strategy and agenda must be totally different. You need to put in a great deal of thought into the reason behind your blog, and what you plan on achieving from it. Determine how much you want to earn in a year and manipulate your blog to earn this revenue for you.

Use all possible basic and advanced methods to attract traffic to your blog. You can do this by posting intelligent articles on different topics and asking for people’s opinion. You can also allow space for promotions for product and service websites on your blog.

You can upload blog posts in other similar blog sites and get your back links that way. You can use keyword optimization, and upload keyword-rich content on profitable niches and get paid by advertisers. One such profitable niche is medifast discounts and nutrisystem coupons; people are constantly scouring the web for articles and information on medifast discounts and nutrisystem coupons. As a professional blogger, did you know you could help promote other people’s businesses for money as well?

Click4more... 9 Comments