Stylish Featured Content Slider For Blogger

It's been few days since I modified my template. Many people loved the new look while few highlighted mistakes which I'm rectifying from time to time. I found that many people loved the smooth sliding featured content on home page - recently removed for increasing the page speed. Want a slider running on your blog? Then, let's get started...

A LITTLE MORE ABOUT THE SLIDER

The slider works on jQuery and the styles are incorporated with a little CSS. The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left. Although I have modified the slider to my recommendations, the credit actually goes to "css-tricks.com". 

LIVE DEMO

WHY THIS SLIDER???

The basic reason behind choosing this slider rather than the ones available on various other sites is that it occupies the least space on our blog and can be the JavaScript files can be defined internally on blogs which indirectly means that your site will load faster even with the scripts installed - no HTTP requests from the JavaScript file hosting sites. Secondly, it is more feasible and runs perfectly the same on all the web browsers. Finally, it is very easy to understand and customize the coding.

GET THIS INSTALLED ON YOUR BLOG
Let us split the customization into two parts. The first one deals with the CSS and JavaScript installation while the second part deals with the HTML coding. Now, let's get started with the first set of installation procedures.
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.

</head>

2. Download the following text document - JAVASCRIPT FOR THE SLIDER and paste the code present in it just above the line mentioned in step 1.
Note: The code which you pasted now, is the internally defined JavaScript that makes the slider work. The only possible customization here could be the timer which is by default set to 4000 milliseconds. You may vary it by changing the number in the following piece of code.

var delayLength = 4000;

3. Next, search for the following piece of code.

]]></b:skin>

4. Paste the following piece of code just above the line mentioned in step 3.

#slider{background:#fff url(https://lh6.googleusercontent.com/-ZnqHeWEnlfc/TeeanqTM9aI/AAAAAAAABCM/iDzYJsrifRg/s800/slider-bg-new-1.jpg) no-repeat; height:180px; overflow:hidden; margin-top:-3px; margin-bottom:7px;  position:relative; width:600px; border:1px solid #ddd}
#mover{width:2880px; position:relative}
.slide{padding:40px 30px; width:600px; float:left; position:relative}
.slide h1{color:#444; font-size:22px; font-family:Georgia,"Times New Roman",Times,serif; line-height:23px;  font-style:bold; font-weight:normal; margin-top:-25px;  margin-bottom:-8px;  color:#ac0000}
.slide p{color:#555; font-family:Georgia,"Times New Roman",Times,serif; font-size:15px; line-height:20px; width:370px}
.slide img{position:absolute; top:20px; left:420px}
#slider-stopper{position:absolute; top:1px; right:20px; background:#ac0000; color:white;  padding:3px 8px; font-size:10px; text-transform:uppercase; z-index:1000}

Note: The above mentioned code represents the CSS part of the slider. You may customize it the way you want. Various possible customizations include changing the width of the slider or the background picture of the slider. The font style can be varied to match the fonts present in your blog. I feel these are pretty self-explanatory.
5. I recommend you to save your template temporarily.

HTML PART OF THE CODING
1. Search for the following piece of code in your blogger template. Use CTRL+F to fasten your search results.

<b:section class='main' id='main' showaddelement='no'>

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

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='slider' style='margin-left:5px;'>
        <div id='mover'>
              <div class='slide' id='slide-1'>
                        <h1>Review On Camera</h1>
                      <div style='text-align: justify;'><span style='font-family:verdana; color: rgb(0, 0, 0);'><p>This Digital Camera comes with 12.1 Mp lens and great performance with tonnes of features. One of my friends purchased this camera and got it delivered few weeks before, after having a thorough analysis read in many websites about digital camera. First of all, lets talk about the package contents which includes...</p></span></div>
                        <a href='http://www.newbloggingtipz.com'><img alt='learn more' src='https://lh4.googleusercontent.com/-WJaGQt_oYVY/TeeanGUQIJI/AAAAAAAABCI/cqEc0X10I6g/s800/read-more.png'/></a>
                </div>
                <div class='slide' id='slide-1'>
                        <h1>Review On Blackberry Storm</h1>
                       <div style='text-align: justify;'><span style='font-family:verdana; color: rgb(0, 0, 0);'> <p>The new Vodafone&#8217;s BlackBerry Storm has stormed the market and has attracted the whole world. BlackBerry&#8217;s parent company says that this phone is something that will really compete with an iPhone. So, here goes an elaborate review about the phone. The Storm has a clickable touch screen, which is really...</p></span></div>
                        <a href='http://www.newbloggingtipz.com'><img alt='learn more' src='https://lh4.googleusercontent.com/-WJaGQt_oYVY/TeeanGUQIJI/AAAAAAAABCI/cqEc0X10I6g/s800/read-more.png'/></a>
                </div>
        </div>
</div>
</b:if>

3. Now, you need to vary the content and the titles along with the link to which they should point to. To do so, you need to vary the text highlighted in green. Just copy a snippet from your blog post or write an attractive one that will drive the readers to click the read more button.
4. Next, to change the title of your post, you need to  change the text highlighted in orange. Just erase the ones highlighted in orange and write the title of your posts. The last customization would be the links to which they should point to. To get this done, replace the link highlighted in pink with the URL of your posts. That's it!!!
5. To add more posts on your featured content widget, just add the following piece of code before the last two div tags and repeat the steps from 1 to 5 mentioned above.

                 <div class='slide' id='slide-1'>
                        <h1>TITLE OF YOUR POST</h1>
                       <div style='text-align: justify;'><span style='font-family:verdana; color: rgb(0, 0, 0);'> <p>WRITE YOUR CONTENT HERE</p></span></div>
                        <a href='URL TO YOUR POST'><img alt='learn more' src='https://lh4.googleusercontent.com/-WJaGQt_oYVY/TeeanGUQIJI/AAAAAAAABCI/cqEc0X10I6g/s800/read-more.png'/></a>
                </div>

6. Now, save your template and view your result. In fact, I recommend you to preview your results before you save them.

Note: The featured content will appear only on the homepage of your site. If you wish to have it on all your pages, then remove the first & the last line in the HTML part of your coding mentioned at step 2.

I hope I made this tutorial look simple and I assume that you enjoyed this post as well. If you feel it's difficult or face any problems during the installation, then you can always reach me via email and get your slider fixed. Please share your opinions about the posts via comments. See you soon in another interesting article!!!

Click4more... 18 Comments

The All New Blogger Dashboard and Design

Blogger today released the new design & interface for its dashboard which can be realized only on Blogger In Draft. It's a common methodology that is adopted by Google to test the new interface on Blogger In Draft and later, update to the main site. Note that this update will be visible only to a few randomly picked users while the rest will be updated soon!

MORE ABOUT THE NEW DESIGN

It is clearly stated that there is no activation or sign-up process is required to get the new UI (User Interface) for your dashboard. Fear not, you will soon be updated with new interface - probably within a couple of weeks time. First reason why you did not have the new design - may be your blog is very new. Second Reason - Since the update is a complete redesign from the scratch, it becomes very difficult for the blogger team to make the new UI available to all its users. You may read more about the new UI here - Official Blogger Blog.

PROS AND CONS

The new design looks more sleek and takes very little time to load when compared to the age old blogger editor. The second advantage with respect to the new design is the ability to translate or define within the post editor using the Define/Translate icon. A number of issues have been solved while the other features which are yet to come are as follows.

Updates to previous issues:

• The “You have unsaved changes” error message after post publishing has been fixed.
• The Labels button now changes status after labels get added. We've also added the labels list and “Click to add” function.
• We've added the “Number of posts to show in one page” option.
• We've fixed the “Back to Blogger” link on the Template Designer.
• We've updated scheduled posting.
• We've fixed the Javascript error on the image uploading from Edit HTML tab of Pages.
• We've also made a variety of other small updates to the user interface.

A few things we're still working on:

• The option to Show/Hide blog list on Global Dashboard.
• Label auto complete.
• Various updates to the user interface.
• Small images embedded in the post, such as “Tweet this” or “Email this,” are enlarged and show up on the Dashboard.

Regarding the cons, the biggest disadvantage which I felt was the inability to edit our template. The only way to do so would be to download the template, make the required changes and upload the stuff back again. Another important feature that I repeat in my feedback forms to Google is about the comments section on blogger. I feel they should modify their algorithm to support threaded comments like WP blogs.

NEW BLOGGER DASHBOARD, CREDIT : OFFICIAL BLOGGER BLOG

The post on Official Google blog says that "We’ve essentially rewritten the entire application from scratch, using the latest web technologies that will enable us to make future updates in more agile and flexible ways. We realize there might be some ‘rough edges’ but fear not, we’ll be continually updating and improving the experience until it’s ready to graduate from Blogger in Draft. So, let's keep our fingers crossed and wait for the best to happen.

You may send a feedback about the new UI to Google via the following form - Send Feedback. You might very well share the same with us via comments.

UPDATE
Read more about the new feature on this page - ONE CLICK FAVICON INSTALLATION. Scroll to the end of the article to find the updated version of the post.

Click4more... 9 Comments

Why To Add Google +1 Button For Blogger?

It's been quite few weeks since the launch of Google +1 button. I'm sure many of you would have added this share button on your blogs. If you have no idea about what I'm talking about, then let me elaborate a little more - Google +1 button is share counter similar to facebook or tweet button that improves our search results.

HOW TO ADD GOOGLE +1 BUTTON FOR BLOGGER???

As per Google, the +1 button is defined as shorthand for "this is pretty cool" or "you should check this out". What should I do to get this button installed on my blog? Just follow these instructions to get the button working on your blog.

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.

</body>

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

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

3. Next, you may place the following piece of code anywhere in between your body tags where you want the button to appear. It is better you place it below your posts. So, search for the following tag.

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

4. Place any one among the following pieces of code just below the line mentioned in step three as per your size requirement.

    For a SMALLER VERSION (15px)

<g:plusone size="small"></g:plusone>

    For a MEDIUM SIZED VERSION (20px)

<g:plusone size="medium"></g:plusone>

    For a LARGER VERSION (60px)

<g:plusone size="tall"></g:plusone>

    For the STANDARD VERSION (24px)

<g:plusone></g:plusone>

WHY GOOGLE +1 BUTTON???

• Google clearly stated that the +1 button provides a stamp of approval meaning to say that your content is worth reading. More over, it states that it improves your search results. 
• We blogspot users have the slightest advantage of better ranking on Google than our competitors like wordpress.com (not .org), joomla,etc... With the +1 button installed, it pushes your blog ranking further to the top.
• When a particular user searches for some content on Google with his/her account signed in, the search results will be annotated with the names of their connections who have +1'd the page. This simply means that the recommendations from their social connections appear beneath the search results. 
• More over, the +1's are public by default so any user who has signed in will be able to see the recommendations. How ever, you may choose whether or not, to have them displayed on your public profile.
• The +1 Button is not the same as Google Buzz, though they share a lot of similarities. They both appear on your Google Profile under different tabs, but +1's don't allow for comments whereas Google Buzz does. 
• Above all, Google will soon launch an analytics for the button that will display accurate results to the webmasters about their content, overall search impacts, geographic search impacts, etc...

You may get more updates about this button by joining the following group - Subscribe to Google Publishers Button. I hope you enjoyed this post. I'm sure many webmasters would know more than what I know about this topic. So, please share your opinions via comments.

Click4more... 15 Comments

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="http://3.bp.blogspot.com/-qhxaAUAJUVQ/TeocW4AuIiI/AAAAAAAABCo/IYy7hQ6-5VQ/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