LATEST STORIES

How To track Downloads On your Website?

Track Donwloads in Blogger Probably we all love to know how many times a file on our website is downloaded. You can observe that I track all my downloads whether its templates, icons, buttons or any other blogger resource. This helps me know how popular that particular file is. Many questioned us about the script we use to track our files and today we would share every detail on how we actually track downloads on Blogger.

 

 

Live Demo

 

How To Track Downloads in Blogger?

I use Dstats service for tracking number of downloads. The method is simple. There are two steps which are,

Inside your posts simply paste the code below. Replace  PASTE-FILE-LINK-HERE with the link of your file you want readers to download. And replace Image URL OF Download Button with the Image Link of your Download button.

<a href="http://dstats.net/download/PASTE-FILE-LINK-HERE"><img src="Image URL OF Download Button" border="0"/></a>

<p>Downloads:<a href='http://dstats.net/download/PASTE-FILE-LINK-HERE'></a>
<script type='text/javascript' src='http://dstats.net/dstatsjs.php?file=PASTE-FILE-LINK-HERE'></script>
<script type='text/javascript'>document.write(dsCounter);</script></p>

 

Grab these Download Buttons.

You can use the following Download buttons from dryicons Simply right click an image and select “Copy Image Location” and this will give you the Image URL for the button.

download_buttons1 download_buttons4
download_buttons2 download_buttons5
download_buttons3 download_buttons6

 

Once you are done, publish your post and see a beautiful Download button with an auto download tracker hanging inside your post. Enjoy! :)

More

Add WordPress Style Menu Tabs Widget To Blogger!

Menu-Tabs-Widget The widgets on a Wordpress Blogs surely are well designed and coded but they look even better when they are bloggerized and made compatible to work in Blogger.  Last year we created Advanced Multi Tabbed Widget that was well appreciated by everyone and today we have yet another but far improved multi tabbed widget. The best thing about this widget is that you can add as many widgets as you want inside a single Tab which you could not do previously. Beautiful CSS and Jquery effects are added this time to the tab views and I have tried again to make its installation as easy as possible. So do not delay any further and learn how to add a professional looking tabber widget to your free Blogger blogs.


Live Demo

 

How To Add this Multi Tabbed Widget To Blogger?

I have divided the tutorial in three parts which are,

  1. Adding the JQuery and JavaScript to your Blogger templates
  2. Adding the CSS
  3. Adding the HTML

1- Adding the JQuery and JavaScript to your Blogger templates
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Just below it paste the following code –> MBT Menu Tabs JavaScript
  5. Save your template
  6. Done!
2- Adding the CSS
  1. Inside your template search for ]]></b:skin> again
  2. Just above it paste the code below,

/*---- Wordpress Style MBT Menu Tabs----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Simply replace #A46F38 with the HexaDecimal Colour code of your template so that the tabs may blend perfectly into your template.

3- Adding the HTML
  1. Now Search for <div id='sidebar-wrapper'>
  2. Make sure the widgets box is unchecked.
  3. Just below <div id='sidebar-wrapper'> paste the code below,

<div class='MBT-tabviewsection'>

<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    $(this).addClass(&quot;MBT-tabs-current&quot;);
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                      
</div>   

<div style='clear:both;'/>                       
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                        
</div>   

                       
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                       
</div>

</div>
<div style='clear:both;'/>

 

Please Replace Subscribe, Latest Tricks and Search with your Widget Titles that you will be adding.

   4.  Now Go To Page Elements. You will see something like this,

Blogger-Page-Elements Menu tabsStart adding your widgets and after you have added all your widgets then simply view your blog to see it in action. Done! :-)

Note:- Most of you will ask me several questions here as usual =d Because every template is coded differently. People who are not very familiar with HTML often find it difficult to understand this part but no worries anymore if you are not able to pass this step then kindly email me your template at mustafa.stc @ G Mail and I will tell you where should you paste the code. Plus I will also help you on how to add an extra Tab to your widget to make a total of four tabs. This help is for MBT subscribers only if you haven’t availed the opportunity of becoming a MBT reader then kindly subscribe here to avail unlimited resources.

Let me know how you find it?

I just hope this little contribution from our side will be of value to all of you. I would love to know about your precious views. Peace and blessings.

More

Earn $20 Dollars Plus 300 Free EntreCard Credits!!

I have Uploaded My Niece's Sample Home Video. Hope you will like it.

filming_small Isn’t it strange the way our lives have turned. What we find in internet is just a virtual reality.  No real faces, smiles or voices. We talk to readers, we chat with them, we help them and we make them smile and in return they pay an equal tribute but how often do we  talk to one another in real life? Authors often don’t know where their readers come from, where do they belong, what language do they speak and how does life looks like at their end. So I thought why not give and take something from you people who supported us for consecutive two years with your love, support, feedback and motivation. I love memories and I love preserving them. So lets do something really exciting this time!

Create an Interesting Video message For “My Blogger Tricks” Blog

braxtonlogofix3 I hereby would love to give free 300 EntreCard credits to anyone who will create an interesting video containing a message of love for MBT and their experience of the tutorials shared at MBT. The video will have a simple format. The video must contain this,

  • Make sure you speak in English, doesn’t matter if you are not fluent. Keep greetings in your native language only like Hi, Bonjour, Namaste, Salam etc.
  • Mention your name, country,native language and blog URL.
  • Mention how did you came to know of MBT.
  • Mention why you love MBT.
  • Define MBT’s author in One word.
  • Kindly record the video using your Mobile phone or digital camera but not webcam.
  • Kindly record the video in your garden, college corridor, market street anything but not a dark gloomy room please!
  • Kindly keep the video simple, natural and no more than two-three minutes.

See This Sample Home Video of my little niece.

It was late night and I found her eager to narrate the adventure stories of her heroic cartoon idols.. She was bitten by bugs all over her face and I went into her shuttle nest for a short me-to-her chat.. :)

Note:- Your video should be specific. I just recorded this one for fun. :p

Why should you record a Video Voice Message For MBT?

gift____

Because I love you as much as I love my work. I don’t blog for fame, revenue or anything that may help me materially. I blog to to help and that’s it. I don’t know if I could continue blogging all my life because the world around is full of responsibilities and keeping everything balance isn’t that easy.

The benefits you get by making such a video message are,

  1. The videos will be posted at MBT’s homepage and will be publicized at major social media networks. So you and your Blog will draw some serious attention!
  2. Your Blog Links will be added to our Fans List in a Post
  3. People seeing the message will surely visit your blog to know if you are not a fake person reviewing MBT
  4. Your name and Blog URLs will be captioned
  5. All those who will submit one video will be granted 300 Free EC Credits. You can use them to advertise at 150 blogs worth 2EC each!
  6. The best video will be granted $20 via PayPal!

Note:-

If you feel shy to record your video and instead wish to record a voice message only. Then we will even honour that with 200 EC Credits. The best audio message will be granted $10 via PayPal.

I think there can be nothing more honorable then this that we can gift you all in return of your love and respect.

What’s the Deadline of Video Submission?

Deadline

When there is something sweet to hear and share then of course no one will appreciate any delay. I would be grateful if you Email me the video the sooner Possible. I will accept no more than a total of 30 videos. The deadline for fetching all these great gifts for a little effort is February 15th 2011.

If you truly love MBT then bless me with a memory that I may never forget. Peace and blessings :)

More

Is Directory Submission a Waste of Time?

Blog-Directories Driving continuous flow of traffic to your blog is a wish that never seems to end. With the growing expansion of social media networks and creation of more advanced search engines, traditional methods of driving traffic to your blog is slowly loosing its importance. Indeed Blog directories that once flooded the blogosphere are loosing reputation considerably. Check your Google Analytics and discover it for yourselves that how much Traffic are these directories paying you in return for their reciprocal links and banners? I am sure the answer would not be a delightful one. So today we are going to remove all doubts regarding directory submission and will try to educate you all with something that may be worth trying.

 

Why Should You not Submit Your Blog to Blog Directories?

Following are some of my strong reasons against this tradition.

 

Reason #1

search_engine

When there is competition then quality service emerges by its own. Five years back Search engines were battling with one another to reach a status and today we finally have Google as an ever developing Search Engine that has turned out to be a multi million dollar company now. Before 2005 blog directories were trusted and often visited by all international traffic to find blogs of their interest and read the specific articles. But today what do you do when you have to find an answer to a problem? Of course you Google it. Who will in today’s hectic life would waste time navigating blog directories in order to read content of their interest.

Reason #2

Most Blog directories seem inactive and their service seem dead. Many exist today just by name with no active query service. You will have to wait for weeks in order to get something done. For instance I once submitted my blog to xyz.com (This anonymous directory has good PR and traffic but dead!) with my previous domain tnt-by-stc and when I changed to mybloggertricks. I requested them to kindly update my domain and months past but got no reply. I had to then remove my URL from the list.

Reason #3

Most of these directories share reciprocal links which means in order to submit your blog to them you will have to add their banner or link to your homepage. This surely benefits them but harms your search engine ranking. Its best when people link you. But when you link websites which are not in your niche, you simply flow your precious PR juice in waste!

Reason #4

Most Blog directories have no authority. Directories with PR<3 and with Alexa Rank> 100,000 itself have no proper traffic then how can it benefit you? Many of these directories have Alexa Rank in 132,000 which means they receive around 300-400 daily visitors.

Reason #5

Linking Directories and adding their banners on your homepages diverts your traffic and effects your PR. Ask yourself what impression do you get from blogs which have long list of ugly banners added on their sidebars? The first impression that you get is that “Man he is just a newbie!”

You blog needs a professional touch and your readers want a clean touch. Serve them with justice.

Do not be a Blind Blogger!

Blind Blogging

A good blogger is one who respects what others share but do not take things blindly. You should test what others are advising and examine if they really make some sense. Almost every tutorial on Blog Directories tell you that by submitting your Blog to one of them can boost your Traffic significantly. But your criteria of work should be such that you must always keep a good look at your Google Analytics and ensure if a particular Directory is bringing you some traffic. If they are bringing you one or five visitors a month then you must rethink your idea of submission and may give priority to what is more important.

Are All Directories not useful?

Well of course not. There are some directories where search engine robots love to crawl. They sometimes provide the biggest hits and do really contribute in building fair traffic. It can be accepted to some extent that well established Directories like DMOZ and Yahoo Directory do bless you with good PR and Traffic but then again the traffic even from these directories is temporary.

For newbie Bloggers Who wish to drive readers to their Blogs, I have shared below some Directories which can help you to some extent.

But again don’t add their widgets. Just add their code in your templates. Keep your template as clean as possible. Add only those widgets which the readers want and not those which makes your blog look like a Widgets Shop.

What is Alternative to Blog Directories?

search_engine_optimization

The answer is simple. Its all about better understanding the Search Engine crawling, indexing and ranking criteria more and more. In other words, do what Search robots love and stop what they hate. I may be sounding complicated here but my future posts on SEO will help you better understand how exactly are people getting several visitors a day by making use of their good optimization skills.

Optimizing your Blog is the easiest but the most significant thing when it comes to achieving your Online Goals. The only way to drive consistent and good traffic is to write what the current era demands and give more importance to Post titles, Post frequency and search engine likings. Simple but fact. I will write consecutive posts on SEO from today on wards. I will try my best to make this SEO term look more like eating chocolate for all of you. Things that will be required will be shared and those tips that never helped will surely be avoided.

That’s All!

Hope you may understand my point and may take mature steps in making your Blog a place where readers may find comfort. Do let me know about any interesting story that you may wish to share with all of us. Peace and blessings :)

More

Hide Read More Link In Blogger Static Pages

Read-More-Button The Read More link tutorial that I previously shared summarizes all posts to a specified length but then it even appears on Blogger’s newly introduced Static Pages where it should not be. I was scratching my head on how to solve this problem when Sam of Plenty Of E-books came to my rescue. He provided me with a code that shortens posts and also doesn’t let the read more link or button to appear on static pages. So lets replace our old code with this more updated one.

Note:- If you have never implemented this trick before then kindly read this tutorial first –> Add Read More Link To Your Posts

 

 

How To Summarize Posts and Hide Read More Link in Static Pages?

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for the old read more code which looks like this,

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

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

 

or something similar to this. Simply replace it with this one,

<!--READ-MORE-STARTS-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'><br/>
<a expr:href='data:post.url'><div style='text-align: right;'>
<img height='33px' src='IMAGE URL OF READ MORE BUTTON' width='120px'/></div>
</a>
</b:if>
</b:if>
<!--READ-MORE-STOPS-->

 

kindly replace IMAGE URL OF READ MORE BUTTON with Image link of your read more button. If you don’t have a button then grab one from some of the buttons I designed in past,

Visit these links,

 

Save your template and view your static Page to see it working just perfect! Peace :)

More

How to Customize Each Sidebar Header Differently?

Customize-Sidebar After successfully customizing Blogger Comment Form and then the About me/Profile widget we have again got something really different this time. Few months back while looking at some word press templates I observed that some Sidebars had each sidebar headers with a different Look. I kept looking for a way through which this trick could be implemented in Blogger and just last week while editing my test bog I came across an interesting fact about Blogger Widgets. All widgets that I added on sidebars had a unique ID assigned to it by Blogger. I used this ID and tried if I could use it to customize the Sidebar Header and amazingly it worked wonders! With this ID I could customize any portion of the widget I wanted. So I am curious to share this brilliant trick with you. Today we will keep it simple. We will learn first on how to customize the Sidebar Headings and in our coming posts we will keep on doing more interesting things to today’s tut. So lets jump on to the tutorial..

 

First kindly view a demo to see how each sidebar headings have been customized differently,

Live Demo


How To Find out Unique ID Name of each Blogger Widget?

Simply follow these steps,

  1. Log into your Blogger Account
  2. And click the link that says  View your Blog
  3. At your Blog below each widget you will find this Edit key image,Blogger Edit-key
  4. Hover your mouse cursor on it and right Click and choose Copy Link Location
  5. The link will look something like this,

http://www.blogger.com/rearrange blogID=#####&widgetType=HTML&widgetId=HTML4&action=editWidget

Copy your Widget ID and keep it save as it will be used in the next part. In my case you can easily see that the widget Id is HTML4

HTML/JavaScript widgets are usually assigned such ID’s as HTML1, HTML2, HTML3 and so on.

About me widget will have an ID like Profile1 and Link lists widgets have Ids as LinkList1, LinkList2 etc.

The ID’s are case sensitive so use them as they appear.

How to Customize a Widget using its Unique ID?

Now here comes the interesting part. We will now customize the Widget’s Heading Style i.e H2 tag. Customization of other portions of the Widget will be shared in future posts.

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Paste the following code just above ]]></b:skin> ,

#ID h2{
background:#575656;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}

 

Now replace ID with your unique widget ID. To change the background color change #575656 and to change the Font colour change #ffffff. May be you will like using our Colour Code Generator Tool

   5. Hit save and you are Done!

View your blog to see the new dress :)

That’s All!

Hope you find it useful and worth trying. More interesting CSS tricks on it will be shared soon InshAllah.

Note: Kindly respect Copyrights. Most of our tricks are being duplicated without attaching any credits and this really destroys our efforts. It’s a request from all our readers to respect the content of the original author.

More

How To Use Google Fonts In Blogger? Part-1


Read Part-2 here -> Style Post Titles and Sidebar titles With Google fonts in Blogger

Google Font-Previewer-Tricks It is no wonder that web technology has developed tremendously over the recent years. Fonts that were once stored in user’s computers are now embedded in templates. Few years back you could use only those fonts in your templates which were available on major operating systems and in order to view those stylish fonts on your websites, the user should already had fonts installed on their PCs. Today you can use any font you like for your designing purposes and the reader doesn’t need having those fonts installed on his PC. Thanks to Google Fonts API you can now embed any font you like in your templates out of the popular fonts available at Google Font Directory.

Google Font Previewer Tricks

For making things as simple as possible I would first discuss in detail some important things about this excellent Font Previewer tool provided by Google itself. We will use this tool to produce our desired embeddable code and CSS code. For this reason I have divided this article in two parts. Part- 1 will let you know how to properly use Google Font Previewer and Part- 2 will involve the use of these fonts in different parts of your Blogger template so keep track of both parts.

This is how Google Font Previewer looks like,

google-font-previewer 

As you can see that there is a Tools menu at your left and the display at right. You set the options to create your custom font. You can change everything through this tool except the color. Once you have set your preferred text you just need to copy the embedding code which appears below the display like this,

<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 
rel="stylesheet" type="text/css" >

This embedding code can be edited in many ways to make the text appear bold, regular or italic  but when you have CSS then why bother disturbing the HTML? :)

and just below this code appears the CSS code which looks like this,

<style>
body {
font-family: 'Lobster', serif;
font-size: 36px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;

}
</style>

 

The blue part is what that will be used in Part- 2 of this tutorial. This CSS code is the most important part and even if you don’t use the Google Font Previewer you can easily customize the Custom Font using this CSS. Now how would you use these custom fonts in blogger? So create your custom Font with your preferred look and feel and keep the embeddable code and blue part for Part- 2.

How To Embed Google custom Fonts in Blogger?

The method is simple. Do this,

  1. Go To Blogger > Design > Edit HTML
  2. Backup your Blogger Templates
  3. Search for </head>
  4. Just above it paste the embeddable code that you copied from Font Previewer with one adjustment. By default the embeddable code ending tag is not closed and it looks like this,
<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 
rel="stylesheet" type="text/css" >

 

You must add a back slash at the end like this,

<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 
rel="stylesheet" type="text/css" />

 

You can add as many embeddable fonts as you wont. You just need to end each code with a closing tag.

Now how would you use this font in Blogger posts, titles, block quotes, sidebars, headers, footers and how would you further customize the font, all this will be shared in Part –2 so keep in touch. I have shared below the embeddable codes of some of the best fonts available which will be required in Part –2. The list below will help you use the best fonts for yourself and would save your time too. So here we go,

1.  Fontdiner Swanky    

image

<link  href="//fonts.googleapis.com/css?family=Fontdiner+Swanky:regular" 
rel="stylesheet" type="text/css" />

2.  Geo    

image

<link  href="//fonts.googleapis.com/css?family=Geo:regular" 
rel="stylesheet" type="text/css" />

 

3.  Homemade Apple

image

<link  href="//fonts.googleapis.com/css?family=Homemade+Apple:regular" 
rel="stylesheet" type="text/css" />

 

4.  UnifrakturCook

image

<link  href="//fonts.googleapis.com/css?family=UnifrakturCook:regular" 
rel="stylesheet" type="text/css" />

5.  Irish Growler

image

<link  href="//fonts.googleapis.com/css?family=Irish+Growler:regular" 
rel="stylesheet" type="text/css" />

 

6.  Orbitron

image

<link  href="//fonts.googleapis.com/css?family=Orbitron:regular" 
rel="stylesheet" type="text/css" />

 

7.  Permanent Marker

image

<link  href="//fonts.googleapis.com/css?family=Permanent+Marker:regular" 
rel="stylesheet" type="text/css" />

 

8.  Rock Salt

image

<link  href="//fonts.googleapis.com/css?family=Rock+Salt:regular" 
rel="stylesheet" type="text/css" />

 

9.  Slackey

image

<link  href="//fonts.googleapis.com/css?family=Slackey:regular" 
rel="stylesheet" type="text/css" />

 

10. Sniglet

image

<link  href="//fonts.googleapis.com/css?family=Sniglet:regular" 
rel="stylesheet" type="text/css" />

 

11. Tangerine

image

<link  href="//fonts.googleapis.com/css?family=Tangerine:regular" 
rel="stylesheet" type="text/css" />

 

12. Kenia

image

<link  href="//fonts.googleapis.com/css?family=Kenia:regular" 
rel="stylesheet" type="text/css" />

 

13. Kranky

image

<link  href="//fonts.googleapis.com/css?family=Kranky:regular" 
rel="stylesheet" type="text/css" />

 

14. Lobster

image

<link  href="//fonts.googleapis.com/css?family=Lobster:regular" 
rel="stylesheet" type="text/css" />

 

15. Luckiest Guy

image

<link  href="//fonts.googleapis.com/css?family=Luckiest+Guy:regular" 
rel="stylesheet" type="text/css" />

 

16. Mountains of Christmas

image

<link  href="//fonts.googleapis.com/css?family=Mountains+of+Christmas:regular" 
rel="stylesheet" type="text/css" />

 

 

17. IM Fell English SC

image

<link  href="//fonts.googleapis.com/css?family=IM+Fell+English+SC:regular" 
rel="stylesheet" type="text/css" />

 

18. Allerta Stencil

image

<link  href="//fonts.googleapis.com/css?family=Allerta+Stencil:regular" 
rel="stylesheet" type="text/css" />

 

19. Cherry Cream Soda

image

<link  href="//fonts.googleapis.com/css?family=Cherry+Cream+Soda:regular" 
rel="stylesheet" type="text/css" />

 

20. Chewy

image

<link  href="//fonts.googleapis.com/css?family=Chewy:regular" 
rel="stylesheet" type="text/css" />

 

21. Coda

image

<link  href="//fonts.googleapis.com/css?family=Coda:regular" 
rel="stylesheet" type="text/css" />

 

22. Coming Soon

image

<link  href="//fonts.googleapis.com/css?family=Coming+Soon:regular" 
rel="stylesheet" type="text/css" />

 

  23. Covered By Your Grace

image

<link  href="//fonts.googleapis.com/css?family=Covered+By+Your+Grace:regular" 
rel="stylesheet" type="text/css" />

 

24. Droid Serif

image

<link  href="//fonts.googleapis.com/css?family=Droid+Serif:regular" 
rel="stylesheet" type="text/css" />

 

25. Corben

image

<link  href="//fonts.googleapis.com/css?family=Corben:regular" 
rel="stylesheet" type="text/css" />

 

 

If you found anything unclear till now so please feel to post your question. The next part is more interesting so make sure you have subscribed to our Updates. Till then Take care! :)

More

Create a Cute Subscription Form

Subscription-form I have already shared many tutorials on RSS Subscription forms such as Subscription Email Form and Subscription Feed Widget and today we have yet another but extremely beautiful and easy to edit subscription form dozed with new CSS effects. This widget will keep your sidebar neat and clean and will surely attract visitors to subscribe.

 

Live Demo

 

How To Add this Subscription Form To Blogger?

  1. Go To Blogger > Design > Page Elements
  2. Choose HTML JavaScript Widget
  3. Paste the following code in it,

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdxB2SH3QSHaWtUfTDpftDUQV6x-xvTEOkHF1HDLUDrtHcu1Ihv1HawXmtvmo9IzX1sjGNKZPXoxVj7kJC9qT9wQuJAQpa_m7gPaxvcplXSmeZWvf9aLjXgMV2efldRx3mHiGWcL5vlUc/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}

.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;  
width:170px;
color:#666;}

</style>

<div class="mbt-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

 

 

Now make these changes,

  • Now replace http://feedburner.google.com/fb/a/mailverify?uri=TntByStc with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
  • Replace TntByStc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=TntByStc

Save your widget and view your blog to see it showcasing live! :)

That’s All!

Do let me know if you needed any help in customizing the widget.

More

How to Customize Layout of Facebook Profile Page?

new-facebook-layoutFacebook is the next giant after Google in every aspect. As the site’s popularity keeps on increasing so do new ways of making perfect use of this Mega Giant social media network. Facebook’s new layout/look has annoyed many users and some users including me still prefers the old layout. The Facebook team recently announced that the new Profile page Layout can not be changed and this is how every user profile will look like. That’s surely a sad news but no worries any longer because there is one thing really exciting about this new layout and that is the horizontal photo Tag stream. Using this photo stream combined with your Profile Picture you can create your own personalized layouts, all different, attractive and simply Cool!

 

 

This is how a normal Facebook Layout looks like,

facebook-profile page

 

and this is how I changed mine,

new-facebook-layout

 

There are many online tools that lets you create images of required sizes that may fit into your profile page but I tested all and none could give a quality output so I rather used Photoshop and created them myself. Though it requires one to have some basic knowledge of Photoshop. I will write a detailed post on how to create your own personalized Facebook Layouts using Photoshop but first I want to know how much curious you are to know it? Tell me if you would love a detailed post on how to customize the Facebook profile page using Photoshop? Bloggers using Facebook should surely give a personal touch to their fan pages and profile pages because readers love it! :)

More

How to link text and Image in Blogger posts?

Link-Text-Images I often link texts and images in posts so that readers may find it easy to jump from one portion of the post to another without leaving the post. Linking texts indeed make a post enjoyable for readers. These are more like anchor Tags added to texts. Further you can also link one image to another or you can link a text to an image or vice versa. For instance if you click the link below it will take you straight to the text That’s All! Try it –> Click Me Your Highness :)

 

 

 

How to Link texts Within Blogger Posts?

The method is far easy then you can imagine.

1.    First we need to enclose the text we want to link with a small code as shown below,

<a name="Text-Name">Desired Text</a>

 

In my case since I wanted to link That’s All! so I replaced  Text-Name with thatsall and Desired Text with  That’s All!   You can name it anything like 123 or xyz.

2.    Now we need to create a link that will take us straight to our desired text. Use this code,

<a href="#Text-Name">Jumping Text</a>

In my case I have replaced #Text-Name with #thatsall and Jumping Text with Click Me Your Highness :)

How To Link Images Within Blogger Posts?

Click this text –> Take me to the Image at Top

Such a link will link texts to images. So lets do it.

1.    First enclose the image with this code,

<a name="Image-Name"><img src="Image Link Goes Here"/></a>

Replace Image Link Goes Here with URL of image where it is saved.

2.    Now we need to create a text that will link the image. Use this code,

<a href="#Image-Name">Jumping Text</a>

Simply replace Jumping Text  with a text that will take you to the image.

In my case I have replaced Jumping Text with Take me to the Image at Top

How to link One Image To Another Image in Blogger Posts?

Here you just need to use an image instead of a Jumping text. For example click the jumping image below and it will take you to the image at top left,

images

Liked it? Now follow these easy steps,

1.   First enclose the landing image with this code,

<a name="Image-Name"><img src="Image Link Goes Here"/></a>

Replace Image Link Goes Here with the URL of your landing image.

2.  Now create a Jumping image using this code,

<a href="#Image-Name"><img src="Jumping Image Link Goes Here"/></a>

Just replace Jumping Image Link Goes Here with the Image URL of the jumping image.

 

 

That’s All!

 

Hope you will find it unique and useful. Let your readers jump within your posts. :) Take me Up!

More