Image Hover Shadow Effect With CSS

I'm sure you would have noticed the images that appear as a thumbnail on my blog have shadow effect. If not, hover your mouse over the image to the left. Interesting effect. Right? You can find this effect on blogs like Techiemania and other blogs run on WordPress Thesis Theme. Interested to have this effect on your blog?

I'm sure many webmasters would have installed this hack on their blogs long before but few newbies kept mailing me regarding this hack. So, to all those who asked for this hack, here it is. You may also consider reading this article if you wish to have captions on your images on hovering your mouse - Add Image Caption On Hover With CSS3. Let's get started with this tutorial - Image Hover Shadow Effect.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Place the following piece of code just above the line mentioned in step 1.

.imagedropshadow {
padding: 5px;
border: solid 1px #EFEFEF;
}
a:hover img.imagedropshadow {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}

3. Save your template. Now, navigate to your post editor. To make this hack really working, you need to follow these steps.

    1. Insert a picture in your post using the post editor.

    2. Shift your tab from the Compose mode to Edit HTML mode. 

    3. Look for the img tag.

    4. Place the following code just after the img tag with a space. Then, publish your post.

class="imagedropshadow"

If you find the above steps difficult to understand, then have a look at the following example. The final coding should be something like this.

<img border="0" class="imagedropshadow" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8WboZQt4K-6oilMsQu-q6KfBQ906ns9BpFFDNtvHVmVUuRKW_SnJ_QA3oB1Xx7MGznOv1Ouh2fzkHalo9S1Jxs5XM7fzM70lphPm5TL4kAyHsQXqUUmLRgM8j_fpkbUOtc4VW2qwFP1E/s200/CSSEditLogo1.jpg" width="75"/>

POSSIBLE CUSTOMIZATIONS:

You can change the color of the text shadows by changing the numbers highlighted in green on the code mentioned in step 2. Those numbers represent the HTML color codes. The following link may be useful in identifying the HTML color codes for you - HTML Color Names. The border thickness may also be varied by increasing from 1px(highlighted in orange) to the value you want. Even the color could be changed. I think it's pretty self-explanatory.

I hope you enjoyed this hack. If you have any difficulties in installing this hack on your blog, you can always reach me via email. Share your opinions via comments. See you soon with another interesting hack!!!

Click4more... 8 Comments

Floating Share Buttons With Counter Using CSS

I'm sure many people would have seen the floating share icons on various sites. Most of the floating share buttons which I found from Google search was the one similar to Mashable. These tutorials used JavaScript - jQuery to achieve a smooth gliding but, doing so will add too much of weight on your blog. It increases the size of your template apart from the script involved in loading those buttons.

You may very well notice that the facebook like boxes or buttons occupy a huge space because the scripts that they use are by default heavy and nothing could be done as such especially as a blogspot user. Thus, it becomes our responsibility to reduce the load time as much as we can. So, this post illustrates on adding floating share icons just with a simple CSS. I suggest you to read the following article for speeding up your blog - Speed Up Your Blog : Tips And Tools.

Biggest Advantage: No script is involved for the floating feature. Only scripts involved are those associated with the share buttons - facebook, twitter, etc... Take a look at the screenshot below for better understanding.

So, let's get started with this tutorial.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, expand your template and search for the following piece of code.

<div class='post-footer-line post-footer-line-1'/>

2. Just paste the following piece of code just below the line mentioned in step 1.

<div style='position: fixed; top: 1%; right: 1%;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<br/>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='box_count' send='false' show_faces='false'/>
</div>

3. I have used only facebook and twitter share counters in my coding. You may add any number of share widgets as you want within the div tags. But, make sure you add a break tag (<br/>) after each and every script - makes the share buttons look neat. In order to make the facebook share button work, add the following piece of code above </head> in your template.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>

4. You may further customize the position of the widget. Note the code highlighted in green. It depicts the position of the widget. The default coding places the share buttons to the top right corner. You may replace this coding with the following codes for different positions.

TOP LEFT - top:1%; left:1%;

BOTTOM LEFT - bottom:1%; left:1%;

BOTTOM RIGHT - bottom:1%; right:1%;

5. That's it!!! Save your template. 

If you find the above tutorial little difficult or if you don't find the coding mentioned in step 1, then just add the code mentioned in step two on your "Design>>Page Elements" page as a "Gadget>>HTML/JavaScript". That's it. Save the gadget and view the result!!! I hope you enjoyed this tutorial. You may share your opinions via comments.

Click4more... 10 Comments

Simple Trick To Increase Your Blog Subscribers

It's been quite some time since I made a post on my blog. This post basically illustrates on increasing the Feedburner subscriber's count to your blog with the help of a simple script - Alert box. You might have seen few websites like sitesketch101.com or famousbloggers.net that loads a popup box from PopUp Domination 2.0 displaying a form to subscribe to their newsletter/blog.

More About PopUp Domination 2.0

PopUp Domination 2.0 is a plugin that lets you build your email list to a whooping level that you never imagined to happen in a week. It's easy to build attractive forms using PopUp Domination 2.0. As far as I know, both the WP plugin and the standalone versions supports all the major email list services as shown below.

 You get 8 variety of themes with flexible color combinations. If you wish to improve your list in a quick time, then I strongly suggest you to try PopUp Domination 2.0. You have a 60 day money back guarantee offer. It is currently priced at $47.00 which may go up in a week's time. But, wait there's a small trick that lets you save $10.00. 

1. Hit the following link - PopUp Domination 2.0.

2. Once the page is opened in a new tab. Try closing the tab. 

3. You will see a Popup that offers a $10.00 discount. Hit the cancel tab and purchase the plugin now for $37.00.

So, no half measures, just hit the link and try it yourself - PopUp Domination 2.0.

PopUp Domination Alternative - WP Users

So, what do I do if am not able to afford the price that is quoted there. Well, we have a solution for you my WP readers. Just hit this link - FasterIM Opt-In and try the alternative to PopUp Domination. Note: I said only WP users. What if I'm a blogspot user unable to afford the price? Bad luck, we have no other option but to use the alert box that I mentioned at the start of my post (or) pay the price for the standalone version of PopUp Domination 2.0 and get the code.

Alternative to Blogspot Users

I would like to highlight the disadvantages in using this alert box before I start the tutorial. The first one being the inability to modify the box that pops up. Secondly, the alert box might disturb the user who visits your blog because of its ugly look. If you can bear the above two disadvantages, then proceed with the tutorial below to achieve the ultimate aim - navigate the readers to your blog's subscription page. One big advantage in using this alert box is that it loads much faster than any of the above mentioned plugins because it does not involve any external JavaScript - uses only one script defined internally. So, lets get started with this tutorial on alert box.

LIVE DEMO OF THIS HACK - ALERT BOX

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the backup is over, search for the following piece of code.

</body>

2. Place the following piece of code with just above the code mentioned in step 1.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
var t=setTimeout("alertMsg()",5000);
function alertMsg()
{
var stay=confirm("Can we navigate you to our blog subscription page?")
if (stay)
window.location="http://feeds.feedburner.com/EverythingAboutBlogging"
}
</script>
</b:if>

3. The timer which I have set on the coding is highlighted in green. This parameter depicts the time after which the alert box should load. For example, if you set the parameter to 6000 instead of 5000, then the box will appear after 6 seconds. Note: 1000 milliseconds make one second. 

4. The text which I used in my coding is highlighted in blue. You may change it as per your wish. Moreover, the code I mentioned will load the alert box only on homepage. If you wish to have it on all pages, then remove the first and last line in the coding mentioned at step 2.

5. Replace the link highlighted in orange with your feed link - obtained from Feedburner.

6. That's it. Save your template.

I am currently working on the coding to load an alert box/popup box similar to PopUp Domination 2.0. In fact, we achieved 75% success in our coding. There are little more bugs/issues that need to be solved before we launch the coding for you. So, keep your fingers crossed and wait for the launch. Hope we come up with the coding for you. I would like to hear your thoughts and views about this post. So, share it with us via comments!!! 

Click4more... 12 Comments

How to Use Search Engines to Find Golden Keywords to Promote your Products?

There are some little known methods you can use to build a highly-optimized keyword list and increase your online sales. I’d like to share four of these methods to help you find keywords your competition has missed – some novel methods that will help you catch extra search engine traffic. Following these four steps will put you on the right path to building your internet business.

KNOW YOUR MARKET

Research your niche market thoroughly – knowing your buyers well is key to forming an effective keyword list. While researching,

1. Make notes on potentially effective keyword phrases.

2. Join special interest groups online and offline.

3. Subscribe to the newsletters of your competitors.

4. Visit forums relevant to your market niche.

Once you have thoroughly acquainted yourself with your niche market, it will be time to make up a seriously effective keyword list.

 MAKE A LIST

With pen and paper, brainstorm possible keywords and keyword phrases. Just let your mind run free and capture all you possibly can. The list can be narrow or broad – anything from one word to six word phrases relevant to your product niche. An example in the weight loss niche would be “weight loss products” as a broad keyword phrase, and a narrower phrase like “diary-free weight loss products”.

 UNCOVER EFFECTIVE KEYWORDS

Try these different methods to expand and add variety to your keyword list: 

1. Misspellings - With a little lateral thinking, you can come up with possible misspellings in your market niche; misspellings like “loose weight” can pull a lot of traffic. 

2. Author or Product Names - By adding an author name or a product name to your list can garner a surprising number of searchers near the end of the purchase cycle.

3. Appeal to today’s “I want it and I want it NOW” mentality - Remember the reason many people use the internet is their desire to fulfill a need immediately. They can’t even wait till tomorrow so use immediate words like “stop”, “now” or “fix”.

4. Informative Wording - Know that not everyone going online plans to buy, but you want them to visit your site anyway. To attract this type of traffic, you might add words like “how to…”, “homemade” or “free guide”.

 SORT YOUR LIST TO FOCUS YOUR AIM

Start by dividing your keywords list into three types of visitors:

1. Buyers - the highest quality traffic available because they are at the end of the purchase cycle and are usually close to making a buy. It’s unfortunate this high quality is also the lowest volume. Words which buyers use are the money words referred to above and also product or author names. 

2. Product seekers – This type of traffic is greater, but is lower quality since they are not actually as close to buying as the group above. This group knows about your niche and is seeking a product which will improve their lives but don’t yet know which products are available. The keywords in this group are much like the information seekers but lean more toward solving immediate problems and acknowledging the need for help. 

3. Information Seekers – This group is the lowest quality traffic but it also has the highest volume which means it is easier to attract plenty of visitors. The keywords used here will be the broadest and most general. These shorter or broader phrases usually have more competition, so you should target the long tail keywords which are more focused but have less competition. With experience, you will be able to use your natural intuition to recognize “money keywords”. Spend some time studying the search engine ratings for your targeted keywords, monitor the traffic you attract by using stats tracking, refine, tweak and experiment.

SHARE YOUR VIEWS

I would be interested in knowing what works best for you in targeting your buyer traffic, which methods do you use to find the best quality keywords, etc. Could you take time to share your views?

Click4more... 3 Comments

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