Thursday 11 July 2013

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


Image Poster For Hide SideBar In BloggerIs 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.
At the beginning of the page insert following code 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.

Friday 14 June 2013

Adsense Ad Code Converter For Blogger

Ads Converter ToolHi 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.

You May Like To Read:

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.

Wednesday 5 June 2013

How to add Retro Style Social Sharing Widget For Blogger

Easily add  Retro Style Social Sharing  in blogBlogger 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. 

You May Like To Read:

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="http://2.bp.blogspot.com/-LffgfsHnAj0/UPwQ23I0QAI/AAAAAAAAGas/-0InJDs-Cew/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/Mr.FarhanKayani"><img src="http://2.bp.blogspot.com/-7w_IO2RiuAE/UPwQ2SXEnYI/AAAAAAAAGak/6PxOch3eQ44/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>


<li><a href="http://www.pinterest.com/#/"><img src="http://3.bp.blogspot.com/-1otZEseg04g/UPwUW46qq-I/AAAAAAAAGbk/ycvQIf9iKdI/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li>


<li><a href="http://www.twitter/farhankayani143"><img src="http://2.bp.blogspot.com/-3x7cybjuGY0/UPwQ3_mdIKI/AAAAAAAAGa0/2S7L05Wssv4/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>


<li><a href="http://feeds2.feedburner.com/bloggerwidget4u"><img src="http://3.bp.blogspot.com/-4JDhfVVlW1U/UPwQ2iEcPtI/AAAAAAAAGao/kDO6rfj_-sg/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?

Contact Us Form In Blogger
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
Add Gadget Picture
  • 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.

Contact Form in blogger gallery

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.
Live Demo of Contact Form
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

Tuesday 4 June 2013

Earn Money with Qadabra an Adsense alternative

( Adsense alternative ) Earn Money with Qadabra

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.

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.

Thursday 11 April 2013

TechBoard Blogger Template Free Download ~ Blogger Templates

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?

Wednesday 10 April 2013

How To Remove Blogger Navbar

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.

Sunday 7 April 2013

How to Add Wikipedia Search Box to Blogger ~ Widget 2013

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 

Friday 5 April 2013

How to add marquee text for Blogger/blog?

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.

Thursday 28 March 2013

How To Add Subscribe Box to Blogger /website

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:
  1. Create a Cute E-mail Subscription Form.
  2. How to add Animated Social Sharing Widget With Cool Hover Effects.
  3. Touch me sharing widget for blogs/blogger.
  4. How To Remove Powered By Blogger from blog?
  5. New Facebook Pop Up Like Box for Blogger 2013.
  6. Cool Email Subscription Widget With Social Media Buttons For Blogger.

How to  Add Subscribe Box to Blogger /website.


  1. Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/Javascript Box.
  2. Paste the following code in the HTML/Javascript Box.
  3. 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=&#39;&#39;;" /><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(http://1.bp.blogspot.com/_T46SliM0-PI/TB2Wrb1EuNI/AAAAAAAAAZQ/XCYsv5xhrFY/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(http://3.bp.blogspot.com/_T46SliM0-PI/TB2WqtxRIMI/AAAAAAAAAZI/7INQ-HwZQo4/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(http://1.bp.blogspot.com/_T46SliM0-PI/TB2WrnJnupI/AAAAAAAAAZY/qgLCPjkY7xQ/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(http://2.bp.blogspot.com/_T46SliM0-PI/TB2WsA5-GWI/AAAAAAAAAZg/llckeiIzHBA/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(http://3.bp.blogspot.com/_T46SliM0-PI/TB2W0KunsvI/AAAAAAAAAZw/2UZpjpyBE5s/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(http://4.bp.blogspot.com/_T46SliM0-PI/TB2WsfPjsZI/AAAAAAAAAZo/LOPvME3a_mA/s1600/rss.png) center top no-repeat"></a>
</div></p>

</form>

Customization:



  1. Replace "FEEDBURNER-ID" with your feedburner ID.
  2. Replace "DELICIOUS-USERNAME" with your delicious username.
  3. Replace "TWITTER-USERNAME" with your twitter username.
  4. Replace "FACEBOOK-USERNAME" with your facebook username.
  5. Replace "STUMBLEUPON-USERNAME" with your stumbleupon username.
  6. Replace "DIGG-USERNAME" with your digg username.
  7. Get Notified When We Update !!!  Change with your Text.
That's All.

Tuesday 19 March 2013

Add Angry Birds Social Sharing Widget To Blogger


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.



You May Like To Read:
  1. Create a Cute E-mail Subscription Form.
  2. How to add Animated Social Sharing Widget With Cool Hover Effects.
  3. Touch me sharing widget for blogs/blogger.
  4. Add Flying Letters below Mouse Pointer Animation.
  5. How To Remove Powered By Blogger from blog?
  6. New Facebook Pop Up Like Box for Blogger 2013.

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="http://3.bp.blogspot.com/-b3-ImgxoXZE/ULTdqlQ4TYI/AAAAAAAAF2g/pBhTwnttAKY/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/bloggerwidget4u" rel='nofollow' target='_blank'><img src="http://4.bp.blogspot.com/-PL55Jd1MIgw/ULTdpgxpthI/AAAAAAAAF2Y/zqic5hvj2BU/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="YOUR youtube LINK " rel='nofollow' target='_blank'><img src="http://4.bp.blogspot.com/-RlxdrBe4ecs/ULTduDJX5gI/AAAAAAAAF24/Pc03FWKq8js/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>
<li><a href="http://www.twitter/farhankayani143" rel='nofollow' target='_blank'><img src="http://3.bp.blogspot.com/-NjAWTWrlX5E/ULTdtCeqFeI/AAAAAAAAF2w/sLBX0ttP1rE/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/bloggerwidget4u" rel='nofollow' target='_blank'><img src="http://1.bp.blogspot.com/-Cy7I8qvNDg0/ULTdoi-T18I/AAAAAAAAF2Q/qPyAZfmRqU8/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 .

Saturday 16 March 2013

Touch me sharing widget for blogs/blogger



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.

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'>
<!--RSS-->
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>

</div>

Customization:


  1. Replace YOUR RSS LINK with your Feed burner link.
  2. Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
  3. Replace YOUR FACEBOOK LINK with your Facebook URL
  4. Replace YOUR TWITTER LINK with your Twitter Profile URL
  5. And click on save.

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

Monday 11 March 2013

Cool Email Subscription Widget With Social Media Buttons For Blogger

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.

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('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/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('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/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(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
            line-height: 1;
            width: 60px;
            padding: 0px 3px 1px 20px;
            margin-bottom:0px;}

    .emailicon {
        background: url("http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/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>
        <!--[if IE]>
        <style>
        #email-news-subscribe .email-box input.subscribe{
            background: #333;
            }
        </style>
        <![endif]-->

    <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 == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" 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.

    /
    show-notice
    hide-notice