MyTricksTime - Page 155

Notification Bar For BlogSpot With Facebook Like Button

Most of you liked the new sticky notification bar which is an important way of seizing visitor attention towards an important headline, news or any update or announcement you may wish to share. Today we will take a step further by adding Facebook like button to the sticky bar. This is a great way of increasing your fans on FB. All visitors will be able to see the bar at the top of your blogger header and it will stay fixed their and would scroll as the user scrolls down. It will always be attracting your visitors to like your blog. Lets first see a demo.

Scroll to the bottom of this demo page to see it:

Add Notification bar to Blogger

Go To Blogger > Design > Edit HTML

Backup your template

Search for this,

]]></b:skin>

4. Just above it paste the follow code,

#mbt-stickybar{
background:#FF0000 url(‘http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png’) repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,”Helvetica”,sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
margin-right: 6px;}

To change the background color of the sticky bar, simply change #FF0000 with any hexadecimal color of your choice. Try our color chart.

5. If you wish to add the bar above header then search for this code

<body>

else if you wish to add the bar below footer then search for this code

</body>

and Just below it paste the following code,

<div id=’mbt-stickybar1′>
<div style=’float:left; width:400px;’>
<a href=’#’>Receive Free Updates Via Email. Subscribe Now!</a>
</div>
<div style=’float:right; width:300px;’>
<table style=’margin:0; padding:0;’>
<tr>
<td>
<div id=’fb-root’/><script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/><fb:like font=” href=’BLOG LINK’ layout=’button_count’ send=’false’ show_faces=’false’ width=’80’/>
</td>
</tr>
</table>
</div>
</div>

Replace with your RSS link and replace

Replace BLOG LINK with your blog homepage URL. If you wish to replace the link with your Facebook like page URL then better read the post on link like button to like page.

6. Save your template and you are all done!

Visit your blog to see it hanging either at top or at bottom as you may have set it up. Have fun buddies. do let me know if you needed any help.

Make Sticky Bar For BlogSpot

You can add sticky notification bar in blogger blogs by showing the bar either at the top of header or just below the footer. A sticky bar can is now used widely by all blogs and sites(mashable for instance) for notifying visitors of important updates, offers, coupons and latest news. You can even add your RSS link there and ask you visitors to subscribe to your blog. In this tutorial I will try to keep things simply and will share how to create such a sticky bar widget with simple text and image. I have added drop shadow effects to it using CSS3. The widget is compatible with all browsers. View the demo below and on the demo page scroll to the top to see the bar.

Add Sticky Bar To Blogger

Go To Blogger > Design > Edit HTML

Backup your template

Search for this,

]]></b:skin>

4. Just above it paste the CSS code below,

#mbt-stickybar{
background:#0080ff url(‘http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png’) repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,”Helvetica”,sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
margin-right: 6px;}

To change the background colour of the bar then simply change this #0080ff Use our Color code generator for doing this.

5. Next search for this code

<body>

6. Just below it paste the following code,

<div id=’mbt-stickybar’>
<a href=’#’>ADD TEXT HERE</a>
</div>

Now replace # with your text link (can be your RSS link, important post link etc.) and ADD TEXT HERE with anything you wish to write.

7. Save your template and bingo you are done! 🙂
If you wish to add an image next to the link of text just like the one in the demo page, then use this code instead of the one shared in
Step#6,

<div id=’mbt-stickybar’>
<img src=’IMAGE LINK’/><a href=’#’>ADD TEXT HERE</a>
</div>

Simply replace IMAGE LINK with the URL of your image, picture etc.
Advance versions

In my coming posts I will be sharing more on this topic. We will also learn how to add plugins like FB Like and G+ buttons. We will also learn how to add this sticky bar to the bottom of your blog homepage, how to hide it on specific pages and how to add a close button to it. So it would be great fun trying new versions. Kindly let me know if you needed any further help.

Free High Quality Flash Clocks For Your Blogs

A clock gives a beautiful look to a website. A clock is a must for a personal homepage, forum, blog etc. Isn�t it exciting when you get a highly quality flash Clock absolutely Free?FreeFlashclocks.eu is offering Free download plus embedding of hundreds of highly professional Clocks in different shapes, sizes, colors, themes and styles. Below I have shared some of the clocks from FreeFlashclocks.eu and have provided the embedding code. Simply copy the code below each clock and past that code in Edit Html Section of your blogger editor to display the clock in your posts just like I did! See a Screenshot below,

To add a clock to your sidebar simply paste the code provided in HTML/JavaScript Page Element . Go To Layout > Click Add a Gadget > From the list Select HTML/JavaScript

See screen shots below,

You add these clocks to your websites just the way you embed YouTube Videos. I have altered the code so that it may work just perfectly alright in your BlogSpot blogs.

A Clock plus a Calendar

<object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf”> <embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf” width=”150″ height=”250″ wmode=”transparent”></object>

2. A rotating Silver Clock

<object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

3. A rotating Red belt Round the Clock

<object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf” width=”150″ height=”150″ wmode=”transparent”></embed></object>

4. An Open space Clock with attracting face

<object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

5. Wooden Clock, with A Light Brown Outline

<object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

6. A Clock with a Lively touch to it

<object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

7. Analogue Plus Digital

<object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

8. A Clicking Digital Clock (The ticking Sound that you hear is from this Clock)

<object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

9. Simple yet Attracting

10. Finally a beautiful Clock with a Think Black Outline

<object><param name=”movie” value=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf”><embed src=”http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf” width=”150″ height=”150″ wmode=”transparent”> </embed></object>

Learn How To Show Post Summary using The �Read More Link� or �Continue Reading link�

A good blogger can be identified by the way he manages his blog and organizes his posts. The homepage is the most important part of every blog. The homepage must contain up to 5-6 posts in order to seize the attraction of reader as much as possible. Keeping a reader busy for a longer time is what I call a blogging success. Showing 5-6 posts is load-time and user friendly only if you show a summary of each post. On my homepage you must have seen a Read More Link, clicking which expands the entire post. Look at a screen shot Below,

This link just adds beauty to your blog along with some pro spice to it. So lets learn how to summarize your posts and give them the expandable functionality.

The steps that must be followed for planting this TNT are,

Go to layout > Edit HTML

Now The Most Important Step �> Back Up Your Template

By backing up your template I mean that you must save a copy of your current template in your computer hard drive. If in case something goes wrong, you can restore your template and have everything working as normal as before.
To backup your template click on the link saying Download Full Template , as shown below
backup-template

If suppose something goes wrong , you will simply click the Browse button, locate your saved template and then simply click the Upload button to restore your template back to normal.

Click on “Expand Widget Templates” at the top right hand corner of your Edit HTML page

Now find this code ]]></b:skin>

Tip: Pressing Ctrl + F and then paste this code into the search box, as shown below,

The search box is an easy way of finding codes in your template.
Just after ]]></b:skin> copy paste the code below,

Tip: Highlight the code below and then press Ctrl + c to copy the entire code and then pressCtrl + v to paste the code

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Now find this code <data:post.body/>

And just after <data:post.body/> add the code below,

<!–READ-MORE-STARTS–>

<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’>

<div style=”text-align: right;”>Read More ->></div></a>
</b:if>

<!–READ-MORE-STOPS–>

You can replace the text in red with anything you like, e.g: Continue Reading, Keep Reading

If you want to shift the “Read More->>” text to the extreme-left side, use this code:

<!–READ-MORE-STARTS–>

<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’>

<div style=”text-align: left;”>Read More ->></div></a>
</b:if>

<!–READ-MORE-STOPS–>

Save your template and you are Done!

Read Further to know How to Apply this TNT in your Posts

Now whenever you want to write a post in windows Live Writer, follow the procedure below,
Once you had finished writing your post, as shown below,

Just after completing your post click on the source button at the bottom of your windows live writer page,

You will see something like this,

Now use the code below to hide the portion of your post that you don�t want to be shown on your homepage

<span class=”fullpost”>

</span>

Now suppose if you want to show the post only till the lines

I have explained everything in these images so read carefully!

So you will add the codes as shown below,

the highlighted source code refers to the hidden text

You can see in the image above that I have added <span class=”fullpost”> just above the part of the post I wanted to hide. The text that I want to hide is the one below,

�Please use windows live writer only for writing quality posts. This TNT of Read More link works best with windows Live writer. Blogger Editor is simply annoying and this trick simply just don�t work efficiently with it. If you still want to use blogger editor rather than windows live writer than frustration is what you will encounter! �

I added </span> to the part where the entire post completes or source code ends

In short add <span class=”fullpost”> just before the text to be hidden and add </span>just after it

That�s All!

You can use some of the Images below instead of that Read More �>> text

To add an image instead of text simply replace Read More ->> in the code above with this,

<img border=”0″ alt=”read more” src=”URL Of Your Image”/>

Replace URL Of Your Image with your image link.

Update:-

I have created some high quality Read More Buttons, may be you will like them more. Visit these links,

Blinking Read More Buttons

Animated Read More Buttons
Arrow Head Read More Buttons

12 Useful Tips To Reduce Your Blog Load Time

Almost every newbie blogger fails when it comes to reducing blog load time. Most of the tutorials that are available on reducing the time taken for a website to load are often un-clear or incomplete. We decided to share our way of solving this problem. Below are 11 really interesting and important tips to decrease the load time of your blogs by almost 90%.

Link To All images Inside Your Template From Blogger

I shared an important tip tomorrow about creating an Image Backup in Blogger and then Linking to All Images From there. Most of you use templates that are not officially provided by Blogger. These templates often contain images that are saved on services like tinypic or photobucket. When your blog loads the browser has to connect to all servers which link to your images, as a result leading to immense delay in the loading time of your blog. What you must do is replace all such images with those that you have saved inside blogger as explained in the my previous post. The advantage of doing so will be this that the browser will need to connect only to blogger while loading your images. Thus saving time.

Save All Images in GIF or PNG Format

GIF stands for �Graphics Interchange Format� and PNG stands for �Portable Network Graphics� Both these formats are well compressed, smaller in size and widely supported by all browsers. But if size is concerned PNG compresses far better than GIF. In typical cases up to 5-25%. There are some transparency issues with PNG in IE6 but since IE7 is widely used these days, transparency is nor more an issue. Using any of these image formats will tremendously reduce the load time of your blogs by 60% i.e 70-90KB The size is an approximate for my blog and true size depends on the number of images you use.
Give Proper Dimensions To Images

Giving each image a specific width and height will make it easy for the browser to load the image quickly. Always decrease the size of an image if the original size is larger. The general HTML code for an image looks like the one below,

<img width=�� height=�� src=�URL Of Image� />

The width and height will require a value in pixels. One pixel equals a dot on the screen. A Full size image on my blog will have a width=�590px� and height can be as long as I want. 590px almost equals the width of my posts. Hope that gives you an idea on how to choose width and height values for your images. Browsers find it easy to load images whose dimensions are specified. Make sure you make it your habit to specify a proper size for your images. If you use Windows Live Writer your life will become far easy.
Don�t Use An Image As A Background

If you are using any image as a background then kindly remove it. A background Image repeats itself horizontally and vertically and is responsible for 50% slow load time. Just remove it and see the difference. To remove a background image simply find this CSS code inside your template, (Tip:- Its located just at the top of your blog. Simply search for body)

body { background: #7AA1C3 url(http://xyz.com/blabla.jpg);

width: 980px;

color: #333;

font-size: 14px;

font-family: Georgia;

margin: 0 auto 0;

padding: 0; }

This code will look different in your template but you should be concerned only with thebolded black text. Simply Delete url(http://xyz.com/blabla.jpg) and save your template. Give a simple color to your background. #7AA1C3 refers to Background Color. You can change it by using my Hexadecimal Color Chart
Save All JavaScript Inside Blogger

Why should you link to external sites for storing your JavaScript whilst you can easily save it in Blogger! Save All your JavaScript codes inside your templates just above </head> using the code below,

<script type=’text/javascript’>

//<![CDATA[

Paste Your JavaScript Code Here

//]]>

</script>

The bolded text is where you must paste the JavaScript code that you use in your template by linking to an external site.

To find a JavaScript URL that links to external site, search for <script type=’text/javascript’> inside your template (Make sure to check �expand widget templates� box at top-right corner). Once you find such linking, open that link in a browser. You will see large piece of complex text in the window and that is your JavaScript code. Simply copy it and paste it in the code shared above. Replace All JavaScript codes inside your template with the code above, ensuring that you have extracted the code from the link and pasted it in the code above.
Always Accept Quality and Well Scripted Blogger Templates

The major mistake most bloggers make is to upload any template that attracts them. Most un-official Blogger templates that are available in blogosphere are often created by people who are not well aware with proper use of HTML and JavaScript. A improper scripted template with empty tags ,unwanted tags and broken JavaScript often make Job tough for search engine spiders to crawl the content of your weblog. Further Browsers also waste precious time in reading broken scripts. If a JavaScript is not well coded or optimized, it can cause a readers PC to hang! Imagine this happening to readers accessing your blog. In Short use templates from authorities who have respect in blogosphere and from those who are certified professionals.
Use Limited Advertisements

If you are blogging only to get paid by displaying large chunks of ads from several sources than you are surely misusing this beautiful experience of blogging. Don�t make a blog a Fish Market. Display only few ads at major areas in your blog. Doing so will keep your blog interface clean and easy to be crawled and browse able. Each add that you display uses JavaScript that prolongs the page Load time. Make sure you limit all your ads to three.
Don�t Link To Blog Directories

It is a wrong perception that linking to several blog directories will bring you immense Traffic. When you link to several blog directories on your homepage, search engines loose trust on your blog due to excessive linking and browsers find it difficult to browse those tiny images that link to blog directories. All blog directories ask you to link back using a small image link on your blogs but doing so will only damage the success of your blog. I believe only on blogcatalog and mybloglog as relevant authorities to expect Traffic from. If you really want some amount of traffic from blog directories then trust only on blogcatalog and mybloglog. Moreover accept only the small piece of meta tag from them rather linking to them.
Don�t Use Widgets From Blog Directories that Use Images

I refer to the famous recent Viewers widget by blogcatalog and mybloglog. These widgets use JavaScript that link to these sites and also display images that add up to the load time of your blog. I use meta tags provided by them rather using their widgets. This helps in reducing the time taken for my pages to load. If you really want to use these widgets then try displaying few images on them, as low as 10.
Summarize your Posts Using The Read More Link

Full Length Posts at homepage is one of the biggest reasons why a blog has high load time. Summarize all your posts by using the continue Reading Link or Read More Link. To know how to add it, read this post-> Read More Link
Show Only Four-Five Posts At Home Page

Don�t show more than 4-5 posts at Homepage. Doing so will keep your readers busy reading different posts and they will also find it interesting to see how fast the homepage loads.
Eliminate External Links

Don�t use widgets that are from external sites other than blogger. Get rid of stat counters and use Google Analytics. Don�t store images on other services but Blogger. Save all JavaScript code inside blogger as discussed above. Don�t add links from blog directories, they don�t bring Traffic with exception of blogcatalog and mybloglog.

Note:-

Don�t Mess Up CSS and HTML Code By Removing The Line Breaks

Many Bloggers who are not well aware with web designing think that by removing the gaps between lines inside blogger template will reduce the size of a template. What they don�t realize is the fact that doing so will only reduce the template size by 2-4KB or even less, which is almost negligible reduction when it comes to fast browsers present today. Removing the line breaks between the codes inside blogger will distort the overall presentation of your template, making it difficult to edit it. Kindly avoid all such un-professional tips and always take suggestion from an expert before taking any such step.

Link To All images Inside Your Template From Blogger

Save All Images in GIF or PNG Format

Give Proper Dimensions To Images

Don�t Use An Image As A Background

Save All JavaScript Inside Blogger

Always Accept Quality and Well Scripted Blogger Templates

Use Limited Advertisements

Don�t Link To Blog Directories

Don�t Use Widgets From Blog Directories that Use Images

Summarize your Posts Using The Read More Link

Show Only Four-Five Posts At Home Page

Eliminate External Links

Meta