How to add Twitter follow box to blogger

Hello Readers, in this article we will learn how to put a twitter follow box similar to the facebook like box in your blogger blog. You can put this widget in any JavaScript enabled webpage. Social networking websites have become a vital part of blogging these days. One such micro blogging-cum-social networking website is twitter. Today I was searching for this kind of twitter widget and came across Moopz. They have developed this widget which looks identical to the facebook like box. It allows your visitors to follow you quickly on twitter and see some familiar faces of your followers. Later in this post you will find the live demo and tutorial to add this widget in your blog.

How to add twitter follow box in blogger:

• Login in to your blogger account.
• Navigate to the layout section of your dashboard.
• Click on “Add a gadget” where you want this widget to appear on your blog.
• Select a text/JavaScript widget from the pop-up window.
• Copy and Paste the following code in that window.

<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("unziptech");</script>

• Now before saving you need to make a little change in the code. Just replace my twitter username (highlighted in red) with yours.
• Now save the widget code.
• Click on view blog from the layout window and see this widget in action.

Customizations:

As you can see there is not much of JavaScript code present here to make customizations. It is because the whole code is stored in an external JavaScript file hosted on the url highlighted with green color. The code above just invokes a function to make this widget appear on your blog. In order to make customizations you need to host that script on your own server or blog but I do not recommend this, because they might have copyrights for this code. This is a 300px x 300px widget and could be easily placed in your sidebar without any customizations.

This is not an official twitter widget as I mentioned above in this article, but it is surely a handy widget which can help you increasing your twitter follower’s count. We all know these counts and stats are important these days in blogging and show the popularity of your blog. I hope you get the whole procedure but still if anyone needs more help, don’t hesitate to comment here. I love to hear from my readers and would be glad to help you.

You can check out the blogger tips and tricks section of our blog for more cool blogger widgets. You might also like a cool sticky sliding notification bar similar to the one added in this blog.

If you like my work; you can show your regards by hitting the facebook like button, following us on Google+ or twitter, subscribing us or at least sharing this article with your social networks via the buttons below.

Add Auto Read More With Thumbnail To Blogger With CSS Buttons

So now I am going to share one new gadget for blogger which is auto read more thumbnail for blogger with some CSS buttons. You know that adding some read more button to the blog post brings some professionalism in the blog because people want to read the post so in the homepage of your site or blog only some selected length of content of article displayed and after that the read more button appear and visitor easily navigate from homepage to required post.

 With this way reader can easily see the other posts on homepage of the blog because it display as many post as they are. If we not add any read more point then it’s little difficult to read another post.

Blogger allows you to add read more in the post if you want to add while writing post on blogger but it’s not automatically added if the content or post text increases so we have to add some type of automatically code to blogger template to looks professional and auto adding the read-more point.

Well this is very easy and better to add the code you just have to do little work on your blogger template editing box and it will be displayed auto, here are some steps that you have to do on your site or blog.

• Now just open your blogger dashboard
• Click on Template section of your blogger blog
• Click on Edit HTML like shown in the picture
• And finally you have to add some code in it.

• Now search for </head> code in html section of template
• And add this code above or before the head tag

                        <script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]></script>
                                                   

• Now find this code <data:post.body/>
• And replace it with this code

                        <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Continue Reading...</a></span> <div style='clear: both;'/> </b:if> </b:if>

(So when you replace the code please preview the template then go for next otherwise there are total of three codes in the whole template once you did this with once of them, try to replace with 2nd one and then preview, in every template its place is different.)

So at this time after adding the above code we have to add some css buttons to look professional, here are some css buttons you can also create your own if you want.

Now find this code ></b:skin> Aand place the this code above or before the tag.

                                                                                   Add This Code
                                               .jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right; } .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient( top, #42aaff 0%, #003366); background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3); }

            OR       


  .jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right; } .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; padding: 6px 15px; background: -moz-linear-gradient( top, #ffffff 0%, #b5b5b5); background: -webkit-gradient( linear, left top, left bottom, from(#ffffff), to(#b5b5b5)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 3px solid #0088ff; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1); text-shadow: 0px 1px 2px rgba(000,000,000,0.5), 0px 1px 2px rgba(252,254,255,0.9); }

                                              
              OR        

   .jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right; } .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient( top, #eaeaea 0%, #000000); background: -webkit-gradient( linear, left top, left bottom, from(#eaeaea), to(#000000)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #a2a89f; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3); }
      


So finally you have installed the read more for your blogger blog, you know the importance and some merits of this type of looks in blog; here I am going to show you.

You know templates are the most important part of any website blog, or personal page it attract the visitors or any other website consumers to stay on your site, while if you know and go deep then if someone stay more on your website then it has much powerful positive vote for search ranking in any search engine, with this you can easily increase your website traffic.

At coming of self-hosted websites like wordpress the blogger went little down but if you see deeper than it is more convenient then WP because it’s not hack-able (so someone not steal your website or go into it to destroy your site because its controlled by Google).

Blogger is good source of new articles and blogging platform.  You know that it’s not easy to get into hack the blogger blog, so it’s total tension free to make your own domain on it if you want to become more professional blogger.

Structure of the website or blog which stayed on blogger.com platform is more powerful security than any other website (so personally I ask you to use this one not any other).

NetSarang Xmanager Download 2013

NetSarang Xmanager Download

Steps to install the Software on PC
Full Version:

1. UnRAR the Software in a fresh
folder.

2. Install the Program.

DOWNLOAD FROM THESE LNKS
http://ul.to/id5yesnl/NetSarang.Xmanager.Enterprise.v4.0.0213.Incl.KeyMaker-DVT.rar
OR 
http://rapidgator.net/file/d892727bd43cc257c80b70f934a5343a/NetSarang.Xmanager.Enterprise.v4.0.0213.Incl.KeyMaker-DVT.rar.html
OR 
http://turbobit.net/g68puuoxqbq8/NetSarang.Xmanager.Enterprise.v4.0.0213.Incl.KeyMaker-DVT.rar.html 

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.

Demo shows in bottom right side  →
Features of this Widget

• Flat UI colors used (it will attract users attention)
• Automatic Post Numbering
• CSS3 Hover Animation 

Sign in to your Blogger Account and Active Popular Posts Widget

• First Add Popular post Widget to Blogger
• Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
• Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save 
• Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
• Copy the following code and Paste just above it

<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

• Click on Preview Template (You can see the template without saving)
• Save the Template.

View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.
If any problems with this trick don't hesitate to ask, do comment here...

Protect all images in your Blog jquery trick

Here is a most important trick every blogger need. This trick is about how to protect all your images in your blog with a transparent image covered on it. I recently posted an article about How to protect images? .This article about to protect all images.

Related Articles
How to protect images in your blog?
Do you want to see demo? Try to save picture in this blog.
----------------------------------------------------------
What's inside this article

• 1. Protect only First image in every Post
• 2. Protect all images in every post

 Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

• Go to Template->Edit HTML [A dialog box appears click Proceed]
• Copy and paste the below code <head> and save it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

• Go to Blogger Account
• Template->Edit HTML [Click Proceed]
• Copy the code above </head>

Protect only First image in every Post

<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img:nth-child(1)").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>

Protect all images in every post

<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img").after("<img src=\"http:\/\/i.imgur.com\/eYKPf7b.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>

I think you liked this article...please like and share..

Free Mobile Recharge using Amulyam,Embeepay,Way2sms,ULtoo

Here i am going to say about free recharging sites in internet.Are you wasting money by making recharges,Then here is the time for changing that. There are many sites provides Free Recharge and many of that are fake and some them are good and we can trust.
One of the site is

• Amulyam.in

Update [19-06-2013]:  I noticed another site providing FREE Recharge its Laaptu. We can trust this site. It providing QUIZes, REFERALS for earning free recharge. A new feature Laaptu providing is it gives 2Rs. for each referal.
Update [8-1-2013]: I noticed that I couldn't get any recharge amount from Embeepay and mcent so I have removed it from the following list. The following sites are real and we can trust because I am earning free recharge from these sites.

 There are many other sites for online recharge, some of them that i used are listed follows

• Amulyam

• ULtoo

• Way2sms

• Laaptu

Amulyam gains popularity in India in recent two years and very popular service among Indian mobile users. Amulyam has many ways to get talktime in our wallet. They provides emails of advertisers that sends to us and each opening of the mail will get .25ps in the wallet. They provide 2-3 advertisement mails every day. When the wallet reaches Rs.10 you can make recharge. Another way for increase the earnings in the wallet is to play and create contest or quiz. Playing contest will give .25ps and creating contests make you to earn high. Create a quiz with 10 questions will get you Rs.5. For Approved questions will get 50ps per question.
Another way is to purchase air tickets and buying things it will offer you Rs. 500 instantly. Also you can refer friends and make money. Each referral will get you Rs. 1.
Embeepay is a Facebook Application it provides points  and when we sign up it gives 100 points. 30 points will give you 10Rs top up and 150 points will give you 50Rs Recharge.300 points will give you 100Rs
ULtoo provides free sms and get talktime to your account by sending sms.

Click here to get Rs.2 on your wallet instantly in amulyam

Click here to get 100points on Embeepay instantly

Click here to get Rs.2 on your wallet of ULtoo

Click here to get Rs.1 on your wallet of Way2sms

I hope this article will help you better.

How to Change Blogger POST A COMMENT Message/Text/Style?

I think you are all seen a message "Post a Comment" in the bottom of every post in your blog. Do you think it is not so good to see your blog visitors? Then here I am going to show you how to change "Post a Comment" text from that part and place interesting images there. Also I am giving some cool images link with this article. Lets see how to change this

• Sign In  to Blogger Dashboard
• Go to Template -> Edit HTML
• Search (Ctrl+F) for the code marked Bold

<a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a>

•  Search the next <data:postCommentMsg/> ,that code looks like the following

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

• replace  <data:postCommentMsg/> with the image code
• Select the code of image you want from the following

Style 1

<img src="http://i.imgur.com/Qv18EaT.gif"/>

Style 2

<img src="http://i.imgur.com/hR5AoQv.jpg"/>

Style 3

<img src="http://i.imgur.com/542TClt.jpg"/>

Style 4

<img src="http://i.imgur.com/2RqqdBN.jpg"/>

Style 5

<img src="http://i.imgur.com/h0oIkzC.jpg"/>

Style 6

<img src="http://i.imgur.com/YbPOTnI.jpg"/>

Style 7

<img src="http://i.imgur.com/wRUQ2JN.jpg"/>

Style 8

<img src="http://i.imgur.com/b7gXQLd.jpg"/>

Style 9

<img src="http://i.imgur.com/TXqb5vI.jpg"/>

Style 10

<img src="http://i.imgur.com/Wu2M9sv.jpg/>

Style 11

<img src="http://i.imgur.com/rP7bUnN.jpg"/>

Style 12

<img src="http://i.imgur.com/ZcVbJRa.jpg"/>

• Save Template

I hope this article will help you. If you got any doubt or Suggestions, please do comment

Article also Applicable for

• How to Change Post a comment Text in Blogger?
• How to Remove Blogger Post a Comment Message?
• Change Post a comment text to images
• Change Post a Comment Message to Animated images

Facebook Showing Wrong Thumbnail Image when Share Blogger Post

Being a Blogger user everyone wants to promote his/her posts and mostly shared it on Facebook. Ever if you have tried sometime you might have observed that the shared post link does not show up the right image or showing irrelevant picture taking anywhere from your blog. This is one of the most common issue from Facebook pending since from several years back and still it has not been resolved. However Facebook is not much clever to pickup the right image from your post. You have to make your post understandable and add some piece of chunk code in your blogger template to tell the Facebook robot which image has to show in the Round thumbnail at Facebook wall.

The same issue has been also detected by ProBloggerTricks in the early days whenever we used to publish our post at facebook it would show up wrong picture or acting no thumbnail. So after reading and writing many articles about facebook algorithm meta data finally i come to know how to resolve facebook wrong picture thumbnail issue.

Since from the couple of day we have been receiving too much complaints about the facts that facebook is not showing the right picture when we share post there or even click on likes buttons.

So after receiving the same issue again and again my brain is pumped out and do prepare this tutorial, to show you how to show right post picture in facebook. So in this article we will guide you how to fix facebook thumbnail image not showing when shared a post link.

     

Why Blogger Post Show Wrong Image Thumbnail in Facebook

To know the fact let me tell you the truth. Besides some of the paid blogger templates These days blogger templates are mostly coded by unprofessional developers and webmasters, they do not performed well in XML or html only get ride to complete the template and sell it out on templates websites.

They do thousands of creepy errors and give messy style coding layout. Though the same templates download by newbies and do facing a lot of errors inside blogger edit html template editor. We could recommended to use professional templates before getting too much issue

How to Fix Facebook Wrong Picture Thumbnail Issue in Blogger Template

Te set the right picture for post in facebook while displaying no thumbnail or showing wrong picture we have to add some chunk of code in our template. follow the below given simple steps to Avoid No Thumbnail Issue While Sharing Post on Facebook

Step1: 

1. Go to blogger dashboard:
2. Go to Template >> Edit >>Html:
3. Find for <head> tag In template:
4. Past the below given code just after the <head> tag:

 <meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Now click on save button: You done Almost:

Remember: The following Things After Customization

Here is some important tips you should must know before switching this post.

1. After customization all your new post will show correct picture thumbnail in facebook whenever you share the post
2. Your Older Post will still not showing up Correct image.do,nt worry it will start showing up (wait for 3 days)
3. You will must add the same code if ever you change blogger template

Bounas Tips to show Right post Image thumbnail in Facebook

These are some of the basic blogger tips and tricks which would help in how we should insert image in right manner inside the blogger post.

1. First of all i would recommended to use the PNG format for main image.
2. Use JPG image format for the rest of all ordinary image inside the post except the main picture.
3.  Always try to add intro image inside the post.
4.  Do not Resize Image automatically in Post by html if big one:
5. Share your Post on facebook immediately after publishing.
6. For more tips visit the below post.