FK Tips and Tricks

How to Create a Full Width Page & Hide Sidebar in Blogger?

2013-07-11T06:02:00.000-07:00

Is Possible to How to Create a Full Width Page in Blogger ? Yes we can do this easily using CSS3. Blogger loverz want to create pages like, Home,About Me,Contact Me and privacy policy Pages.If you do this trick then your blog look more beautiful.Blogger allow us to customize blogger designs. When you visit page you can see sidebar and footer.And we want to remove sidebar from contact me or any other page.And make good looking. That is the reason for hide sidebar from page using XML and CSS.Now I am going to give you simple and very very easy trick.We always think better for you.First Check Live Demo then apply trick.In future me share more tricks and widgets.

Live Demo

How to Create a Full Width Page?

Now follow the steps below:

Go to Blogger dashboard
Create a New Page or Post
While editing the page click the HTML Editor tab.
At the beginning of the page insert following code.
See given below image for better understanding.

<style> #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:100%!important;} .post { width:100%!important; } </style>

After Paste Above code in page using HTML Editor back to Compose mode and complete work i mean to say write all content and Simply Publish Post or page.After Publishing page check out CSS coding Magic.You can See Full Page without Sidebar.That's All

How to Customization Code?

You can Easily Customize Width:100% to any value you want.Just Change width:100% to any value.

Need Help?

If you want or need our help regarding this trick or about this blog then just leave your comment below the post.

Adsense Ad Code Converter For Blogger

2013-06-14T01:24:00.002-07:00

Hi I am Making first post about tools.If you have Google adsense account or you have another company account then you must Encoder the Ad Code because when you paste the html code by any company in any where you want then the difficulty many problems are here.You can't directly Paste ads it in the template. This tool automatically converts javascript ad code into the correct format so you can easily put ads into your xml Blogger template.It's best for many websites ads for converting AdSense,Chitika ,Qadabra,Popads,infolinks or any javascript ad code you may have.

Instructions:

First Enter the Adsense or other ads code in given box.
Click to Convert
After sign into Blogger Dashboard>>Template >> Edit HTML and Paste the code Where you want to display the ads or Paste in Side Bar.

If you face any Problem leave a comment at the end of post.

How to add Retro Style Social Sharing Widget For Blogger

2013-06-05T20:00:00.000-07:00

Blogger is a platform to make website and fully customize using CSS and HTML.This is another Social Sharing Widget for blogger.Name of this widget is Retro Style.I mentioned in old posts Social media is very advance and maybe many traffic from there.Everyone want to get more traffic and promote website.Now using some simple steps and get this beautiful widget.Blogger Design is count in for SEO.This widget makes your blog more beautiful and attractive for visitors and readers.you can easily add in blog sidebar or any where you want.One thing is more Facebook,Twitter,Rss,Pinterest and Google plus buttons are including in widget.So it's up to you.Now Follow the following steps for add Retro Style Widget.

Live Demo

How to add Retro Style Social Sharing Widget For Blogger

Go to Blogger dashboard
Layout >> Add a Gadget >> HTML/Javascript Box.
Paste the following code in the HTML/Javascript Box.

<style>
/* www.bloggerwidget4u.blogspot.com */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>
<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/113035760861815543895"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIpcIfcsihrAVgjEHqSuoi8XFEDS-7wyNHhcjBAjJMF5QcUYnwJDiV91HzqA_3rz26dN-UuTsdAhppMO-84w9uQM8coygxHu-3eYVpGSlwaxU72ovuBYDfOt4h14O2jdezu8oQUjiGnbQ/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/Mr.FarhanKayani"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYleQoMwqWmJ_2m3Aj-z1odM4H8qpj3AuwdYIjbml8asq6AHIQF0YUqXW7q5-vURq2sIOZqrlrx_KlXhcl6DWB63r6T_Uc9VrtGPG74tLYjC7xNk3JqRoA931FvyihoJhRa9gw8p-ehE/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.pinterest.com/#/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCuAwpP6TL71RJf2DJt6c1ibesNwK2p5hMkIH69n6hNTx5P9xzjeLJPyR0TS-lb4fglwU25k63UUHciDu92J3-8Pl4sVRF9GNof7CrREbwCpu0haG5GBw8DiJLBdSVfNRFqC-ijQrvdGs/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/farhankayani143"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2UiEJv8c8nSP7BxYZb11Wf3pA1YQ0Dj0z5oEE92WYGdGvowCeM_Qe1LhqC-scJsbPxweLVy52EW7ed6c5CMyUII5h_0jY2rKIyxRixsFu2I7N_5BLZ73IX6QxeGjN938BTPQ1X6nGiUM/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/bloggerwidget4u"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVi22MSM3cfsSI7_3zrGMVWjRBjd7ZxzCMufCmgEu_9Lxbdpx5nxgBSGL_2BPEqcmDXjSQA_EXw_AQRF3rxP4b44fBkiuZz3rIh_Tdev-XDXi0VoijoUktjJVMWBRHFwkNQyKWONaxYIA/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li>
</ul>

And at the end After paste above codes,replace my account ID's to your account ID's

Change 113035760861815543895 to your Google plus ID.

Change Mr.FarhanKayani to your fan page or your Facebook profile user name.its up to you.

Change# to your Pinterest Username.

Change farhankayani143 to your Twitter Username.

Change bloggerwidget4u to your Feedburner username.

And click on Save.
After save view blog.

If you face any Problem leave a comment at the end of post.

How To Add New Contact Us Form In Blogger?

2013-06-05T01:57:00.001-07:00

In my old post How To Add Wikipedia Search Box To Blogger I mentioned Google officials ,continuously working on blogger platform to upgrade more gadgets.Yes one new widget added by Blogger.Added new and simple contact form to the gadgets,section.You can easy add this contact form to your blogger below posts, sidebar or anywhere you want.If you receive good traffic on blog then many readers want to contact with you about any thing his requirements.This form consist 3 fields which filled by the Visitors.Three fields are Name,Email and Message.Email and Message is require.Now you can add Contact Us Form by using given below steps.And guide you with using screen shots. I sure that you easily add this form.

Follow given Steps To Add Contact Form In Blogger

Go to Blogger dashboard >>
Layout >>Add a Gadget Show in given below Screenshot

Now Click on "More Gadgets"
And find "Contact Form" and click on the Contact Form and click Save.
You Almost Done.See Below Screen Shot.

It will be added automatically to your blog sidebar, and then you can easily drag it anywhere you want.It's upto you.And at the end see live demo below Picture.

Yes I forget Just for testing you can send message and message will send in your blogger account on which you are running your site.Ok

Don't Forget and Take 5 seconds and share this article with Friends and make us Happy.That's All

Earn Money with Qadabra an Adsense alternative

2013-06-04T23:55:00.000-07:00

Hello Friends I am Back With great Post because this post is about earn money with an Adsense alternative.You easy to make money from blogs with Qadabra.If you have no Adsense account then Qadabra is good option to Earn Money.Qadabra is of payment models like CPM (cost per mile or thousand), CPC (cost per click), CPA (cost per action).I recently monetized my gaming blog with Qadabra and getting good response from Qadabra.

Why Qadabra?

I mentioned it is a fast growing CPM based ads network and a good adsense alternative.All countries allowed to participate in this big Network and Pakistan and India is including.This network is best because do not you wait for an account approval.Many other network check your Website and then Activate or Allow to put their ads on your web.Just Sign Up and with in minutes after Sign Up you will be able to put ads on website.Other important thing is the minimum payout is $1 from paypal.If you payout using Prepaid Payoneer MasterCard® minimum payout 20 $.Basically three methods for payout and last isWire transfer via Payoneer minimum payout 500 $.And at the end of this post I tell you some Features Of Qadabra.

Some Features Of Qadabra:

Very Easy user interface to create ads unit.
All countries allowed to participate in this big Network and Pakistan and India is including.
Many types of ads size and allow to create custom ads size ad units as well.
Important feature is It pays for CPM, CPC and CPA.
It has Low payout $1 is the payment Enjoy!
It 1-2-3 it is very easy to sign up and create and implement your placements, and put ads codes on your blog or wordpress..
Easily see report of different size of ads.Using report tab after login.
Different Category Select up to 5 related categories that define your blogs Please Choose that Category that define your blog and Get more money.

Now read Features Of Qadabra and Sign up now and see magic.If your Google Account is reject then join this great network.I recommended you join this network.If you have Games blogs then its best.

Sign up today at Qadabra

If you face problems to place Qadabra ads in blogger, then contact us on Skype,facebook or twitter. and my skype id is farhankayani143.

Now Enjoy! I create an other post about Qadabra's ads placement with Images so Stay connect Us.

TechBoard Blogger Template Free Download ~ Blogger Templates

2013-04-11T02:42:00.000-07:00

Live Demo | Download

Template Name: TechBoard

Author Name :Lasantha Bandara
Original Designer URL : http://fthemes.com/techboard-free-wordpress-theme
Template type:1 Sidebar, 2 Column, 3 Column footer, Featured Section, Fixed width, Fresh, Header Banner,Red, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar,

Description: TechBoard is Magazine Premium template adapted from wordpress for blogger.This template is also SEO friendly.It have fixed social media button and fixed search box.You can put Ads in header.I am using this theme in this web Farhan kayani.I am customize this template using CSS and Html.If you Know Css then your easily customize TechBoard template.One thing more this template have slider.But I given you download file with both without slider and with slider.And that up to you which one you like without slider or with slider.Share this post with friends and make us happy.That's All

Don't Miss:How To Remove Powered By Blogger From Blog?

How To Remove Blogger Navbar

2013-04-10T05:12:00.000-07:00

Blogspot is Best Platform for Blogging.We can easily Customize Blog Template using HTML and CSS. Blogger Team continuously work on Blog. officials make many changes.Now Today is Remove Navbar from blogger.Blogger has navigation bar for their default custom templates.This Bar appears at the top of every Blog.Some Time its looks not good even it shows that this is not a blog or websites In default templates.Many Peoples Want to Remove navbar from blogger.I have Solution For those Peoples who thinks to remove this.may be You will able for remove navbar for blogspot in 2013.This article is about how to remove blogger navbar in 2013 default template. Now Let me explain to remove or hidden. if you are using default blogger templates create by official.Then may be you Want to remove and make blog more beautiful.But in third Party Templates navbar is Hidden.Now I am Going to start.

How To Remove Blogger Navbar

You can Easily remove or hide.In 2013 you are Easily hide or show the bar in few seconds .Now I tell you to do it using two Methods.Methods are Given Below.

There are two ways to Remove Blogger Navbar.

In blogger old interface you will have to add some code in template to remove the navbar but now in new interface you have full right.

Method 1:Using CSS

Method 2:From Layout.

Method :1
Follow the following Steps.

Go To Blogger >>Template>>Customize.
Click on Advance and Choose Add CSS.
Paste the below code in white box.

Now Finally Click on Apply Blog.

#navbar-iframe { display: none !important;}

Method :2

Remove Blogger Navbar from Layout.(Easy Method)

This method is so easy follow the below given steps:

Go to blogger dashboard >> Layout:
Click on the Navbar Edit
See the below image.

Now you click on Edit you will see the below image.

Finally Select off and save.Now see the blog.

Note:Use only one of above method to Remove Blogger Navbar.And that upto you which Method is easiest for you.That's All What you think about this post or any question feel free to ask.

How to Add Wikipedia Search Box to Blogger ~ Widget 2013

2013-04-07T01:22:00.000-07:00

Google officials ,continuously working on blogger platform to upgrade more gadgets.Now I am going to tell you about a widget recently created by blogger officials.Let me Explain Wikipedia is the free encyclopedia site which is use to find about history, scientific thing i mean to say Wikipedia is use for search topics with complete details for every Subject like Physics,Chemistry,biology,English and Urdu etc.Everyone Know Wikipedia is second Most Widely used Search Engine in the world.In this Tutorial i am tell you blogger officials recently created a new official Blogger Wikipedia Search Box widget .In the World Many Educational Blogs I Recommendation they having educational blogs, you must add this Widget in to Blog For Your blog readers because it helps to your Readers to find some thing unique inside your site.Now i am Going to tell you How to add Wikipedia Search Box to Blogger? You can easily add this Wikipedia Search Box to your blogger sidebar.
Don't Miss:New Facebook Pop Up Like Box For Blogger 2013
Don't Miss:How To Add Floating Facebook Like Box In Blogger?

How to Add Wikipedia Search Box to Blogger

Go to Blogger dashboard >> Layout >> Add a Gadget >>
Now Click on "More Gadgets"
And find "Wikipedia " and click on the + and click Save.
You Almost Done.
See Below Screen Shot.

Wikipedia Search Box to Blogger Live Demo in Below Picture.

Take 5 seconds and share this article with Friends and make us Happy.That's All

How to add marquee text for Blogger/blog?

2013-04-05T04:28:00.001-07:00

Animation text is use to attract the visitor to tell your visitors what will be your next updates or if you repair a broken link and tell to visitor about broken link using marquee.Animation text (also called Marquee).Moving text which you can put or add anywhere in your blog and in posts.I'm going to explain you How to add marquee text for Blog.and we can customize Moving text in many ways.like change text direction,change text background and control marquee speed.I am Customize text with Using CSS. Now I am going to show ,how to marquee text.if you want to move text. use the codes given below.

Example:1

<marquee>ADD YOUR TEXT HERE.</marquee>

RESULT: ADD YOUR TEXT HERE In this code text is simple and move text from right to left.
Example:2

<marquee direction="right">ADD YOUR TEXT HERE.</marquee>
<marquee direction="left">ADD YOUR TEXT HERE..</marquee>

RESULT: ADD YOUR TEXT HERE.... ADD YOUR TEXT HERE.... you can change the direction of the marquee text adding 'direction' attribute.
Example:3

<marquee direction="right" width='90%'>ADD YOUR TEXT HERE....</marquee>

RESULT:
ADD YOUR TEXT HERE....
You can change the moving width of marquee text.
Example:4

<marquee direction="right" width="100%" style="background:#FF6310"><font color="#000">ADD YOUR TEXT HERE....</font></marquee>
<marquee direction="left" width="100%" style="background:#0080ff"><font color="#000">ADD YOUR TEXT HERE....</font></marquee>

RESULT:
ADD YOUR TEXT HERE.... ADD YOUR TEXT HERE....
Now I add text color,text background color for the text.You may replace #ff6310 and #0080ff with hexadecimal color number for background color of Marquee text and also replace #000 with hexadecimal color number for text color.
Example:5

<marquee direction="right" scrollamount="1">ADD YOUR TEXT HERE WITH CONTROL SPEED.</marquee>

RESULT:
ADD YOUR TEXT HERE WITH CONTROL SPEED. Now in this example I add scrollamount="1" to control marquee speed.if you want to customize the speed then change bold text in above code with your number.and also change text direction just replace right with left.

Example:6

<marquee direction="left"width="90%"><a href='http://bloggerwidget4u.blogspot.com/2013/04/how-to-create-move-text-in-blog.html'>How to add marquee text for Blogger</a></marquee>

RESULT: How to add marquee text for Blogger
Now in this example move text with link. replace Red color url with your post address.and Replace bold words with your text.
That's All Take 5 second and share this article with friends.

How To Add Subscribe Box to Blogger /website

2013-03-28T09:13:00.000-07:00

How To Add Subscribe Box to Blogger? In this post i will tell to you how to increase your visitor to subscribe via RSS. Basically Rss services is let's your blog visitor like you blog posts and contents. and visitor want to read your posts through RSS news then they subscribe you via RSS.If Visitors Subscribe you then increase your blog pageviews. One thing is more in Subscribe Box with social media webs.(Digg,Twitter,Facebook,Stumbleupon,Delicious).Social networking is best to attract visitors to your website for read your contents and also How to Keep Visitors at Your Site Longer? Now Add this Email Subscription Form to your website in your blog sidebar and make your sidebar beautiful and more attractive.If you are Want to add this Widget then Follow the steps given below.

You May Like To Read:

How to Add Subscribe Box to Blogger /website.

Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/Javascript Box.

Paste the following code in the HTML/Javascript Box.

And click on Save.

<style type="text/css">
#subscribe-box {
overflow: hidden;
margin: 10px 0 0 0;
}

#subscribe-box a.subscribe-sec {
display: inline-block;
display: -moz-inline-stack;
width: 40px;
padding-top: 38px;
zoom: 1;
}

#subscribe-box a.subscribe-sec:hover {
color: #660000;
}
</style>

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value='';" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>

<p><div id="subscribe-box">
<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolF66RQ-anNZB9BKjQgJF7YClVCFw9fZbdhP5EjJYo3SIO9rvbWaH_EidWJ84jb3WH9fWHjGBOZ9JotZm_FmkE3j7CAZW9rB3jHK9tL9ge5LW9uJ35B0vh2b5vgqL406KiPvi046V2JOs/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOiKv9By9IK9xQ4VNSbQ-BrIVRne-mdVKQ4a9N77tP0P2fRw_R65WbXdw5Vl5rYNUa1RJau5DNYiMrvua8CXGbxxLSB6-KuN9DjHxrqXWV5uXRDe70U6MnF5Ldp6yfmw3IWmKniZs7e0qO/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdWPHqFqHoTV0dtLIeUKxDW8pOZS-485rE7Z9IZELeh5YBCbuujqHwlLDMm4J138GZYAV1Tct1r3EOqIJaj5o9I0qkcJDjqEQHXjn0O1GGiuf_VevO0_L1k6IqMlx1fIK8WXGEbTyCvBL/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbO5AKJnEw5OSo3XzKKTr3tqio2NZJViBAeiPlYD-0xCzfSVNfuzKkU8fhM_UO_3nuVfAqk1wInoXaWat6XogtgHgY31-lXNOwf6jWtssVi1nKGFem1Kt545M1zmPdtu6VkYFD7ozfVk4v/s1600/facebook.png) center top no-repeat"></a>
<a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiYuPK9N2zxS-Azcl4dxpFkfCxH5_-qx1L2fqY_q_yio-fq4bHmreCC7qxGoImk7upKCVJXovc2iBYijrGekN6ea-XOivH0mldmr9E0ThzIfXWDnjvs62TY-O5FQtQHUk0u1bvxABQFgiT/s1600/stumbleupon.png) center top no-repeat"></a>
<a title="RSS Feed" href="http://feeds.feedburner.com/FEEDBURNER-ID" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCGylydmmftFVNnUDT-R8BVZJTosX1aoeGqHHq3Ybec0u3hFgU0BKBzWQqqxez-hRZWddGud73sTFK2wvGd5-7AehaoqF7VW3DkyMYz0IxQbfEKVJjCawZzeAQfGtw3tJxiC4eBTqaKLuF/s1600/rss.png) center top no-repeat"></a>
</div></p>

</form>

Customization:

Replace "FEEDBURNER-ID" with your feedburner ID.
Replace "DELICIOUS-USERNAME" with your delicious username.
Replace "TWITTER-USERNAME" with your twitter username.
Replace "FACEBOOK-USERNAME" with your facebook username.
Replace "STUMBLEUPON-USERNAME" with your stumbleupon username.
Replace "DIGG-USERNAME" with your digg username.
Get Notified When We Update !!! Change with your Text.

That's All.

Add Angry Birds Social Sharing Widget To Blogger

2013-03-19T11:30:00.001-07:00

To Day I am going to share another social Sharing Widget. I have already shared many Widget for Blogger.Like SocialSharing Widget With Cool Hover Effects.Create a Cute E-mail Subscription Form ETC .But today about "Angry Birds" sharing widget for blogs/blogger. Social sharing widgets helps to get some quality traffic for your website/blog.This widget have facebook Twitter,Google Plus and Rss sharing buttons .Social sharing widgets are very useful for blogs.Facebook is best Social Media Website and after Facebook Twitter is most Popular Web.and another Social Media site that is Google Plus.You can add this widget to your blog easily.If you want to add this widgets in your blog than follow the following steps.

Live Demo

You May Like To Read:

How to Add Angry Birds Social Sharing Widget To Blogger?

Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/Javascript Box.
Paste the following code in the HTML/Javascript Box.
And click on Save.

<style>
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="bubblewrap">
<li><a href="https://plus.google.com/100052689605336447119" rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyDA-C8zNqbzTzqJcK1bTm9-yCQvjJSm8PAt87bmvblNAEekcyerayfFsuuVAziPvtaC5_boBIW66r2ET9PC8hiQg0DxhgH1JH4Lk_oL9qDA_65Kr02_LK75v6HUovsxBrPHAH8jByYAc/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/bloggerwidget4u" rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9v9xa4LdnkLo0A2-6C0B-wr3T80JQyPhknubRrPzZ0eeAiFVC6nJ2oP5_OlPmGqVfv4uLxDyXF2suCB_XitUd_LQo3PZQTKtc0xogVUgD9hcWwBLuhxm5y2Pr4LGqWb3wAfxMAcJhRg8/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="YOUR youtube LINK " rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbVh7h9AAECckOK9BY7G92333UjSD5jaclM6qiqyxIRVeT0xgXa5awXRyhqTM2-2ZzABqDjSwKNn351NfJE5OMpwjvmpraiObic1fu0TopPGfqAt8epoRYeAjAX08aklpRD5mLGaDt_Bw/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>
<li><a href="http://www.twitter/farhankayani143" rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU5Am3lUeE889jPbWhUyOlctmiyisP-sJe8gOfxtA2O6_8mctC4CFoLw6ZkrK7Z1wj5g_zalK74NpZZnnrfcmoQLqBy3DhAskvDaSw31C1GoJVIw2zEY0Yvr6_mTLbMhRLb7qOi5vCGG4/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/bloggerwidget4u" rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieSyZGVwSB8amYW_L8nYAWGNnYCTLrozOMrSodEqgSO-Xoho5WkW4IJ6_L60SHueuFcNKkA9mzwh772aUWHOyHp_F1Ra3rkVuTqRGLrrA-WYRRatX-hKe0RJuhDBXG9y8ZhERrY_qu6Bc/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul>

Note: Replace Bold text URL's with your own social profile links.

That's All

Note:This widget originally Credit by Gagan Masoun from blogsdaddy .

Touch me sharing widget for blogs/blogger

2013-03-16T05:55:00.003-07:00

Hi! to I am going to share another social media widget. I have share Many Tricks About Blogger.Like Social Sharing Widget With Cool Hover Effects.Create a Cute E-mail Subscription Form ETC .But today about "Touch me" sharing widget for blogs/blogger.This widget have facebook Twitter,Google Plus and Rss sharing buttons .Facebook is best Social Media Website and after Facebook Twitter is most Popular Web.and another Social Media site that is Google Plus.If you want to add this widgets in your blog than follow the following steps.

Live Demo

How to Add "Touch me" sharing widget for blogs/blogger?

Go to Blogger dashboard >> Layout >> Add a Gadget >> HTML/Javascript Box.
Paste the following code inside the HTML/javascript Box.

<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://farhankayni.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;

}

.touchme a.googleplus {
background-position: 0px -58px;

}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;

}
.touchme a.twitter:hover {
background-position: 0px -232px;

}
.touchme a.facebook {
background-position: 0px -406px;

}
.touchme a.facebook:hover {
background-position: 0px -348px;

}

.touchme a.rss {
background-position: 0px -174px;

}
.touchme a.rss:hover {
background-position: 0px -116px;

}

</style>

<div class='touchme'>


<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>


<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>


<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>


<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>

</div>

Customization:

Replace YOUR RSS LINK with your Feed burner link.

Replace YOUR GOOGLE PROFILE LINK with your Google+ URL

Replace YOUR FACEBOOK LINK with your Facebook URL

Replace YOUR TWITTER LINK with your Twitter Profile URL

And click on save.

Note:This widget originally Credit by Umar Irshad from Design Kindle.

Cool Email Subscription Widget With Social Media Buttons For Blogger

2013-03-11T13:10:00.001-07:00

To Day I am share a Widget for blogger. Add a Beautiful Email subscription widget.A cool subscription widget attract visitor and make your blog more Beautiful.This widget also have Social media buttons like Twitter,Google Plus,Rss etc.Facebook is best Social Media Website and after Facebook Twitter is most Popular Web.and another Social Media site that is Google Plus.In this Cool Email Subscription Widget With Social Media Buttons like Twitter button and Google Plus button. If you Want to add this Widget in your blog than Follow the Following Steps.

Live Demo

How to Add cool Email Subscription Widget With Social Media Buttons?

Go to Blogger dashboard >> Layout >> Add a Gadget >> HTML/Javascript Box.

Paste the following code in the HTML/Javascript Box.And Paste the Following Code Below

And click on Save.

<style>

    #salahuddin-ayubi {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }

    #email-news-subscribe .email-box{
        padding: 5px 5px;
        font-family: "Arial","Helvetica",sans-serif;
       height:38px;}

    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}

    #email-news-subscribe .email-box input.email:focus{color:#333}

#email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#666 0,#333 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));

        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:white;

        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}

    #email-news-subscribe .email-box input.subscribe:hover{

        background-image:-moz-linear-gradient(top,#333,#666);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999


        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:#FFFFFF;
     }

    #other-social-bar {
        padding: 0px;
        overflow: hidden;
           height:37px;
         margin-top:-8px;
    }

    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}

    #other-social-bar .other-follow {
        float: left;
        overflow: hidden;
        padding:5px;
        width: 270px;}

    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}

    #other-social-bar .other-follow li {

        display:inline;
        border:0;
      }

    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#666;
        font-weight: bold; font-family:arial;
        display:inline;
        }
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlClftHrFBFFHt3svkHvE-Gcz-hcSrZbK8rIywT7jAwVAIBWCtG-uNtKOw_BqeM2F4pDM8GK_diJZOTbiwu7_La5LdAsSVOxJ-nulQihyYGauqEbtV2pGtpoIqz3Fkwi0SoN-W4Z5BjF4/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAFnS-QFEVjj4rKRrExZ6Z1FLT0T_dbTBq8pGuMh2FEU5osH6SKqh_-2dWsgPQ3vaO8YPIkgyqGLVTZBx3JRL4M7tr3-rqCiflY6NLAkCfAhDQ30-ybXK_KERPCC6W0UmxI-idisbvqWU/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3WVODBWgA8H1ZMJT4Onk5gI_UogRZEwHK4OlM6gHCth6OPtzbVKqv68svOClpEnm7I05itFNRUCar1WGhmurhFYTFEAPTKLrl7cttQ83A_sOBWm5P7OqN7QXQsM8IdVX-x6jjI_FITiU/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

.emailicon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLOSjDHIi83S5fP3y8F4WaZ1cLOG_LUugApseUKWOgu_XZ2l7f4mbQ-Ib89z4uTO8k2ldHbVsR4KFeHGL_iIBtGA-NICMCSttNyFcx5ZPw-IKNmegiba_KhyRglK9eApjDttq-zm_jqQwz/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
     padding: 0px 20px 0px 95px;
    min-height:100px;
    margin: 0px;
    width: 183px;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    color: rgb(51, 51, 51);

}

.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family: impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;

}

    </style>

    

<div id="salahuddin-ayubi" >

<div class="emailicon"><p>Subscribe to our Free Email Updates! </p></div>

<div id="email-news-subscribe">

<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" />

<input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>

<div id="other-social-bar">

<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/tntbystc" target="_blank">RSS Feed</a> </li>

<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/farhankayani143" target="_blank">Twitter</a> </li>

<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/100052689605336447119target="_blank">Google Plus</a> </li>
</ul>
</div>

</div>

Replace tntbystc with your Feedburner title.

Replace the bolded sections with your twitter and Google+ username details.

Add Flying Letters below Mouse Pointer Animation

2013-03-11T11:49:00.000-07:00

Today I am Share a trick about Mouse Pointer Animation.how can we add flying text below mouse cursor in blog. This is a great trick.After adding this code in your blogger .Your blog will be more beautiful.When you move mouse over your Blog, you will see that Letters you SET in the below code will flying like a Animation.and the text below the cursor in blue colour.This is very simple to add in blog.If you want to add this cute trick than.Follow the Following Steps.

Live Demo

How to Add Flying Letters below Mouse Pointer Animation?

Go to Blogger Dashboard.

Now Go to Template >> Edit Html.

And Find</body> tag inside your template using (CTRL+F.)

And Paste the Following Code Below </body>.

Save your Template.

<script type='text/javascript'>var text=' Flying Text By Www.bloggerwidget4u.Blogspot.Com ';</script><script src='https://tricksmaster.googlecode.com/svn/cursor-letters.js' type='text/javascript'></script>

Customization:

Replace "Flying Text By Www.bloggerwidget4u.Blogspot.Com" With Your Flying Text.

How to Add Animated Flying Twitter Bird Widget to Blogger ?

2013-03-11T02:52:00.000-07:00

To day i am share a Widget post about animated flying Twitter bird.Because Twitter is most popular social networking site after fb.and Also it is easy to apply.Many Blogs Use this widget to get more traffic to their Blog.This is Great Way to increase your twitter followers.Now If you want to add this Cute Widget on Your blog.follow the following steps.

Live Demo

How to Add Cute Flying Twitter Bird Widget to Blogger ?

Go to Blogger Dashboard.
Now Go to Template >> Edit Html.
And Find</body> tag inside your template using (CTRL+F.)
And Paste the Below Code Above</body>.
Save your Template.

<script type="text/javascript" src="http://technouniversityworldjavascript-testing.googlecode.com/files/tuwtwitterbird.js"> </script> <script type="text/javascript"> var twitterAccount = "farhankayani143"; var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> "; tripleflapInit(); </script> <span style="font-size:11px;position:absolute;"><a title='Blogger Widget by TUW' href="http://raimohsin1.blogspot.com" target='_blank'>Tricks and Tips</a></span>

Customization:

Change My Twitter Username With Your Username That's It.

Note:This widget originally share by rai mohsin.

New Facebook Pop Up Like Box for Blogger 2013

2013-02-21T01:01:00.003-08:00

Today I am share a beautiful automatic Facebook pop up like bo.I previously shared How to add Floating facebook like box in blogger? and Create a Cute E-mail Subscription Form as well.so today I share a blogger widget .This is New Facebook Pop Up Like Box.Which is used for if you want to increase facebook likes.facebook is most common site to connect each others.If you want to add this on blog.follow the following steps.

How to Add Pop up like box to blog?

Go to blogger Layout page
Add a Gadget >> Select HTML/JavaScript.
Paste below code inside that HTML/JavaScript.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
*/
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewYHyS0P8v-tKqzBHhSuSJeNdytvn958U0xRYuHARDD0CkeDWoLpRJZSrWn3bdJhAEwTw2Y4SOECINOo7_nLjotql6ROZZUfnpuDLKuc9pcgdwYdkoHI7X4z9MJEOZRfzI03QukGyM4c/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkj6x5vJEmVkdkn0g0woEonIypxyNEAITPN4ZTvS_KABBwSlYzjZu36EuPJFbLzXoCBf4KBNMUtLiEYNVb1XkZwWvZ-a08ObYZuhN4mwP5oGJgo2hkYop5dJrqhaGtFsqjNEGij0a2RRo/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewYHyS0P8v-tKqzBHhSuSJeNdytvn958U0xRYuHARDD0CkeDWoLpRJZSrWn3bdJhAEwTw2Y4SOECINOo7_nLjotql6ROZZUfnpuDLKuc9pcgdwYdkoHI7X4z9MJEOZRfzI03QukGyM4c/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewYHyS0P8v-tKqzBHhSuSJeNdytvn958U0xRYuHARDD0CkeDWoLpRJZSrWn3bdJhAEwTw2Y4SOECINOo7_nLjotql6ROZZUfnpuDLKuc9pcgdwYdkoHI7X4z9MJEOZRfzI03QukGyM4c/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkj6x5vJEmVkdkn0g0woEonIypxyNEAITPN4ZTvS_KABBwSlYzjZu36EuPJFbLzXoCBf4KBNMUtLiEYNVb1XkZwWvZ-a08ObYZuhN4mwP5oGJgo2hkYop5dJrqhaGtFsqjNEGij0a2RRo/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewYHyS0P8v-tKqzBHhSuSJeNdytvn958U0xRYuHARDD0CkeDWoLpRJZSrWn3bdJhAEwTw2Y4SOECINOo7_nLjotql6ROZZUfnpuDLKuc9pcgdwYdkoHI7X4z9MJEOZRfzI03QukGyM4c/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewYHyS0P8v-tKqzBHhSuSJeNdytvn958U0xRYuHARDD0CkeDWoLpRJZSrWn3bdJhAEwTw2Y4SOECINOo7_nLjotql6ROZZUfnpuDLKuc9pcgdwYdkoHI7X4z9MJEOZRfzI03QukGyM4c/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewYHyS0P8v-tKqzBHhSuSJeNdytvn958U0xRYuHARDD0CkeDWoLpRJZSrWn3bdJhAEwTw2Y4SOECINOo7_nLjotql6ROZZUfnpuDLKuc9pcgdwYdkoHI7X4z9MJEOZRfzI03QukGyM4c/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfrdo70MO5XXKCXB2UAt5imyoAazbr9Isv2eoKE5sw0s3L56ThM0o2AjtVdl8sDMJGnKJ0oyGsNHyggHMp8Q27eWyM1QqTdH68mS84lylwZTAma6ZXSyJzL_sVY5cb8e-A4v9OmuUo9Y/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-6BesIJp-YyrTOcfK1NKqrNYBp4P4J1UdnZTBP7mIer4l3ZgVT9QT8WSC37XWBucl51RqiqAwg0qZM4jeRgI6L5JJ7sG3yljo7fZxJZoAf_cv-fTMTui7b87adtEzOGuWNpZ1-FqNxSs/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewYHyS0P8v-tKqzBHhSuSJeNdytvn958U0xRYuHARDD0CkeDWoLpRJZSrWn3bdJhAEwTw2Y4SOECINOo7_nLjotql6ROZZUfnpuDLKuc9pcgdwYdkoHI7X4z9MJEOZRfzI03QukGyM4c/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMr.FarhanKayani&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</div></div>

Customization:

The blue color text is the text which will be displayed above the Facebook like box in the pop up, so you can change it to whatsoever you like.
And the red color text "Mr.FarhanKayani" is the user name of my facebook page, so you must replace it with your FaceBook page user name.

Note:This widget originally share by onlineustaad.

Remove Subscribe to posts (atom) from Blogger

2013-02-01T10:40:00.001-08:00

What is Subscribe to post (atom)

This Post is about Subscribe to:Post(Atom) links.This links have seen that at the bottom of blog.Blogger.com added links in every blog.Basically Subscribe to:Post(Atom) for your blog visitors to Subscribe feeds.Mostly peoples dislike subscribe (Atom) and want to remove this links for blogger. because they want to make their blog beautiful and attack on peoples.Do you interested to remove these links from blog pages.This very easy way to remove.
Two different Methods to remove links.
Don't Miss:How To Remove Powered By Blogger From Blog?

How Remove Subscribe to posts (atom) from Blogger ?( Method 1)

Follow the following Steps.
1.Go To Blogger >>Template>>Customise
2.Click on Advance and Choose Add CSS.

3.Paste the following codes in white box.

.feed-links { display:none !important; }

4.Click on Apply to blog. That's All

How Remove Subscribe To Posts (Atom) From Blogger ?( Method 2)

1.First Download Full template.
2.Login to Blogger Dashoard.
3.Go to Edit HTML .
4.Click "Expand Widget Templates".
5.Search for this codes ]]></b:skin> in Blogger Template. (Using CTRL+F).

6.Paste the below codes just above the ]]></b:skin>.

.feed-links { display:none !important; }

7.Save your Template.
Note:Do Not Republish Any Article of My Blog.

Create a Cute E-mail Subscription Form

2013-01-23T04:13:00.001-08:00

Hy,, Guys I have share Many Tricks About Blogger.Like Social Sharing Widget With Cool Hover Effects.Etc But Today About Cute RSS E-Mail Subscripation form .Now this Form Is with great And new CSS effects.This Widget make your sidebar beautiful and will attact visitors To subscribe.If you Want to Add this Cute Subscription Form than follow these Following Steps...

How To Add this Subscription Form To Blogger?

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

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

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

</style>

<div class="mbt-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />

<input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>

<input class="mbt-emailsubmit" value="Submit" type="submit" />

</form>

</div>

Customization

Now make these changes.

Now replace http://feedburner.google.com/fb/a/mailverify?uri=TntByStc with your Feedburner Email Feed link.
Replace TntByStc with your feed title. It appear at the end of your feed link. In my blogger tricks Case it is http://feedburner.google.com/fb/a/mailverify?uri=TntByStc.

Save your widget and view your blog.

Note:This widget originally share by My Blogger Tricks.

Don't Miss How to Make Money Online with PPC Sites.

Stylized Page Navigation Widget For Blogger with MBT Church Theme Style!

2013-01-20T01:15:00.001-08:00

Today you can see the trick about Page Navigation Widget.Page navigation is need for blogger because Page navigation easy for your blog visitors to search posts.this Page navigation is alternative to Recent Posts.This stylized version created by Mohammad Rias.This is easy to applied because just paste codes in to HTML/JavaScript.follow the following steps.

Page Navigation Widget For Blogger

1.Log into your blogger and go to Layout > Page Elements
2.Then Click on Add a Gadget
3.Featured Widgets Choose HTML/JavaScript Widget.

4.Inside the HTML/JavaScript Widget paste the code below.

<style type="text/CSS">

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #7AA1C3;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color:#F6F6F6;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #7AA1C3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7AA1C3;
}
</style>

<script type="text/JavaScript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 2;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

customization

5.If you using a domain name other than .blogspot.com or .com, then Kindly change the Blue text in above codes like .com replace with your domain Name.For Example End of your domain is .info or .biz than replace .com with .info or .biz .I f you are use Blogspot than leave the changing.
6.simply drag your HTML/Javascript widget to the area just below your posts and drop it there. see Below Photo.

Don't Miss:How To Remove Powered By Blogger From Blog?

How to add Animated Social Sharing Widget With Cool Hover Effects

2013-01-13T23:48:00.000-08:00

Hello Friends Today I share another Widget Trick.This widget is totally depend on Social Sharing With Animated Cool Hover Effects.This widget is for Sharing posts with Friends.Many Peoples like your Post may be Your post is informative and than people Want to share with other Friends.If peoples Share with Friends you blog traffic more.This widget is making your blog more modify.If you want to add this widget in blog.Follow these simple Steps.

How to add Animated Social Sharing Widget With Cool Hover Effects?

1.Please First Download a copy of Your Template.
2.Login to Blogger Dashbord
3.Goto Template>Edit HTML
4.Now find "</body>" Tag Using (Ctrl+F) in your HTML.
5.Last Step is Paste Following Code just Below the </body> tag.

<div class='shr_ss shr_publisher'>

</div>





<script type='text/javascript'>

var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};

</script>





<script type='text/javascript'>

(function() {

var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;

sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";

var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);

})();

</script>

Finaly Save Template.

Live Demo cool Effects

Take 5 Second and Share With Friends.

Don't Miss:How to add Floating facebook like box in blogger?

New Beautiful Scrolling Recent Posts Widget For Blogger

2013-01-13T09:38:00.001-08:00

To day I share another Blogger Trick about Widgets.My last post is about Floating Facebook like box Widget.But Today Share Scrolling Recent Posts Widget For Blogger.
I share this post because you get more traffic with this widget.Many Peoples Want to Modify blog.This is best for that Peoples.This widget is built-in jQuery and JavaScript.
This Widget is in dynamic not in simple.You see beautiful dynamic Recent Posts in you Blog.Now let's Start Work.Please follow the following steps.

How to add Scrolling Recent Posts Widget?

First Add codes in HTML.

Go to Blogger Dashboard .
Now go to Template >> HTML >> Proceed.
And find <head> tag inside your template using CTRL+F.
After <head> tag insert following jQuery Codes.

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

Now Save Template and NOW Take Next step.

Now Adding the Widget to blogger.

Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget
Copy the Below codes and paste inside an HTML/JavaScript widget.

<style type="text/css" media="screen">



</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigLQxL8NBeRr49wc6tBBVOlyT6XFxYvgbfwEvzshVudbsl7GdtejTWOoUWyWGwyqAEOVDwp2p9RJlC85shAy-hxqKTPPX7aPAlni44CihnLtZJSP-9aiwmPCMMzHgCcN8OCzEHwSXEn3M/s1600/no-thumbnail.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigLQxL8NBeRr49wc6tBBVOlyT6XFxYvgbfwEvzshVudbsl7GdtejTWOoUWyWGwyqAEOVDwp2p9RJlC85shAy-hxqKTPPX7aPAlni44CihnLtZJSP-9aiwmPCMMzHgCcN8OCzEHwSXEn3M/s1600/no-thumbnail.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigLQxL8NBeRr49wc6tBBVOlyT6XFxYvgbfwEvzshVudbsl7GdtejTWOoUWyWGwyqAEOVDwp2p9RJlC85shAy-hxqKTPPX7aPAlni44CihnLtZJSP-9aiwmPCMMzHgCcN8OCzEHwSXEn3M/s1600/no-thumbnail.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigLQxL8NBeRr49wc6tBBVOlyT6XFxYvgbfwEvzshVudbsl7GdtejTWOoUWyWGwyqAEOVDwp2p9RJlC85shAy-hxqKTPPX7aPAlni44CihnLtZJSP-9aiwmPCMMzHgCcN8OCzEHwSXEn3M/s1600/no-thumbnail.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigLQxL8NBeRr49wc6tBBVOlyT6XFxYvgbfwEvzshVudbsl7GdtejTWOoUWyWGwyqAEOVDwp2p9RJlC85shAy-hxqKTPPX7aPAlni44CihnLtZJSP-9aiwmPCMMzHgCcN8OCzEHwSXEn3M/s1600/no-thumbnail.png";

showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 50;

thumbheight = 50;

fntsize = 15;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.farhankayani.blogspot.com/";

limitspy=4;

intervalspy=4000;

</script>

<div id="helperblogger-widget">

<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>

</div>

just replace the URL"http://www.farhankayani.blogspot.com/" With your Blog Address and Save Widget.And See Your Blog a New Beautiful Scrolling Recent Posts Widget is added.

Note:: This widget is originally shared by Rahul And I just reshared it for you.

Thanks You.

Don't Miss:How To Remove Powered By Blogger from blog?

How To Remove Powered By Blogger from blog?

2013-01-13T06:16:00.003-08:00

Today I share a trick about Blogger "How to remove powered by blogger from your blog?" Because many people don't like or want to see power by blogger on their blogs.The attribution widget is at footer of blog "Powered by Blogger" The widget is locked, when you click on the edit link of attribution widget you will there is no Remove link, because the widget is locked by the blogger. To Remove this from blog follow My easy steps.

First See Example in screen shoots before "remove powered by blogger."

Above image show that not remove Power by blogger.
But it is possible to remove form blog.
Now start to remove form blog.

How To Remove "Powered By Blogger" From Blogger?

Go to Blogger Dashboard > Design > Edit HTML.
Please download a copy of your template.
Now Check Expand Widget Templates.
Now Find the code below using [ctrl+F] in your template.

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

Replace locked='true' with locked='false'

Now Save Template and go to blogger Layout page.

Click on the edit link of attribution widget.
Click on Remove button and you work is done.
See example of above work.

Don't Miss:How to add Floating facebook like box in blogger?

How to add Floating facebook like box in blogger?

2013-01-13T02:51:00.002-08:00

Today I share the widget of blogger.Here is Floating Fb Like box.This widget is best for web/blog because social media is most important to promote your blog.customize this widget e.g You Can Chang it's Position.This widget Make your blog more Beautiful.Maybe you Like this post.If you want to adding this widget in blogger.please follow these steps.See pic Example of Floatind facebook like box.

How to Add Floating Facebook Like box to blog?

Follow steps and add this widget.

Go to Blogger > Layout > Add a Gadget > Select HTML/JavaScript Gadget
Add an HTML/JavaScript Widget and paste below codes in Gadget box.

Save the widget.

After adding above code now find this tag </head> (use:Ctrl =f) in your Template >> HTML >> Proceed and Paste the below codes just above/before the </head> tag.

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

Changing Mr.FarhanKayani with your Facebook's page user name and float:right, if you want this Fb like box appear at left side then change the property right to left in e.g float:left

Post by :Farhan Kayani