Add YouTube Subscribe Widget On Your Blog And website

Hello friends today i am going to post about youtube subscribe widget on your blog and website. If you will use this widget then you can increase your youtube subscriber easily.



 Add YouTube Subscribe Widget


    Go To Your Blogger Dashboard
    Select Layouts
    Add A Gadget
    Select HTML/JAVASCRIPT And Paste The Following Code In It.

<center><!--YouTube Subscribe Widget www.tricksteacher.blogspot.com--><iframe src=http://www.youtube.com/subscribe_widget?p=tricksteacher1 style="overflow: hidden; height: 130px; width: 260px; border: 0;" scrolling="no" frameborder="0"></iframe></center>

    Replace tricksteacher1 with your youtube channel name.
    All Done save widget and enjoy :)

Read More

How To Add Animated Google Plus Follower Box Widget In Blogger

Google Plus follower box is essential to increase your Google fan like Facebook fan box. However Google has already introduced this widget for blogger. So I just modified the original traditional widget with little spice.

Go to Blogger.com
Selecet Layout tab.

Click on "Add a Gadget" then
 select "HTML/JavaScript" Gadget.

Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.




Live Demo

<style>
.bloggerspiceGplus{
    margin: 10px auto;
    background-color: #FEFEFE;
    width: 260px;
    padding: 10px 0 10px 10px;
    height: 255px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 10px solid #E50913;
}
.bloggerspiceGplus:hover {
    border: 10px solid #A0060E;
    background-color: #E50913;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
// Google Plus Widget by www.tricksteacher.blogspot.com //
</style>
<div class="bloggerspiceGplus">
<div class="g-plus" data-action="followers" data-height="290" data-href="https://plus.google.com/106080909507696381306" data-source="blogger:blog:followers" data-width="280"></div>
</div>

Alter 106080909507696381306 with your Google Plus ID

Read More

Floating Social Media Slide out Widget For Blogger

Floating social media slide out stick to right site of your blogger. When you mouse over then you will see a slide out option. This widget has created completely with CSS and when you scroll down then the widget will also scroll down up to edge of your footer bar.


 Go to Blogger.com

Select your Layout.

Click on "Add a Gadget" then select "HTML/JavaScript".

Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.



Live Demo

<style type='text/css'>
.tricksteacherFSS a, .slider-tooltip p{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.slideshow-chunk>div{-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.tricksteacherFSS {height:150px;left:50%;position:fixed;top:200px;width:18px;z-index:5;margin-left:495px}
.tricksteacherFSS a{display:block;margin-left:133px;width:19px;height:20px;position:absolute;top:0;right:0;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;line-height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1T6xnCJ9ByR5Uwl5PLhkofZqquC7ZHzQ8IEsf0N6nQTgD3LlbQJE7JqkFH1f0zuApChNyjQWjs8UXOGvYgILNn1twjyRXuMhSFI6Ni3ewOyOy_ci8U8m6gDOxwBM2z2sA3x56YdVKw2-/s320/BS+FSS.png) no-repeat;overflow:hidden}
.tricksteacherFSS a span{min-width: 152px;padding: 2px;display:block;visibility:hidden;min-width:152px}
.tricksteacherFSS a:hover{min-width:133px;padding-left:25px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
.tricksteacherFSS a:hover span{visibility:visible;position:absolute;top:0;left:25px}
.tricksteacherFSS a.BSfacebook{background-position:3px -15px;top:20px;background-color:#526ca5}
.tricksteacherFSS a.BStwitter{background-position:3px -36px;top:40px;background-color:#75ddfe}
.tricksteacherFSS a.BSrss{background-position:3px -55px;top:60px;background-color:#f6a858}
.tricksteacherFSS a.BSmail{background-position:3px -75px;top:80px;background-color:#c1c1c2}
.tricksteacherFSS a.BSfacebook:hover{background-color:#526ca5;background-position:5px -15px}
.tricksteacherFSS a.BStwitter:hover{background-color:#75ddfe;background-position:5px -36px}
.tricksteacherFSS a.BSmail:hover{background-color:#c1c1c2;background-position:5px -75px}
.tricksteacherFSS a.BSrss:hover{background-color:#f6a858;background-position:5px -55px}
.tricksteacherFSS a.BSfacebook:active{background-color:#294a90}
.tricksteacherFSS a.BStwitter:active{background-color:#40b5fe}
.tricksteacherFSS a.BSmail:active{background-color:#909090}.tricksteacherFSS a.BSrss:active{background-color:#f37526}                                                                                                                                  /*widget by www.tricksteacher.blogspot.com */
</style>
<div class='tricksteacherFSS'> <a class='BSfacebook' href='https://www.facebook.com/asadtariq786' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Facebook&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Facebook'><span>Join Us on Facebook</span></a> <a class='BStwitter' href='https://twitter.com/asadtariq77' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Twitter&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Twitter'><span>Tweet Us On Twitter</span></a> <a class='BSrss' href='/feeds/posts/default' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;RSS&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-follow&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='RSS Feed'><span>Visit Our rss feed</span></a> <a class='BSmail' href='mailto:asadtariq77@gmail.com' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Email&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-email&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Email'><span>Newsletter</span></a></div>

    Replace  asadtariq786 with your Facebook name.
    Replace  asadtariq77 with your twitter name.
    Replace asadtariq77@gmail.com with your email address.

Read More

Add Twitter Fan Box To Blogger And Website

Hello Friends i am share Twitter Fan Box for blogger and website.  It works like Facebook fan page Like box.  Its great twitter unofficial application and that allows your visitors to follow you via twitter without leaving your site.


Live Demo


 

•     Go To Blogger.com > Design
•     Select layout> HTML/JavaScript widget
•     Paste the code below inside it,

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

Replace asadtariq77 with your twitter username

And Save your widget

Read More

How To Add Author Info Box at the bottom of every Blog Post?

Hello friends. Today I will share with you 3 beautiful Author box widget below every blogger posts. it will show at the bottom of every  post.

 Go to your Blogger
Template >> Edit HTML
Now Find this code ]]></b:skin> (ctrl+f)
Paste the below code  Before/above ]]></b:skin> and Save the templates.

]]></b:skin>

 Author Box-1

 /* Author Box by www.tricksteacher.blogspot.com */
.admin-bs{display:block; width:auto; background:#F5F5F5; border:3px solid #C0C0C0; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}
.admin-bs .kontainer{padding:5px}
.admin-bs h1{background:#C0C0C0; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}
.admin-bs h1 a{color:#FEEA83}
.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}

  Author Box-2

/* Author Box by www.tricksteacher.blogspot.com */
.admin-bs {display:block; width:auto; background:#EABFFE; border:5px solid #660099; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}
.admin-bs .kontainer{padding:5px}
.admin-bs h1{background:#D580FE; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}
.admin-bs h1 a{color:#FEEA83}
.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}

/* Author Box by www.tricksteacher.blogspot.com */
.admin-bs {display:block; width:auto; background:#FED9BF; border:5px solid #B24700; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}
.admin-bs .kontainer{padding:5px}
.admin-bs h1{background:#00477D; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}
.admin-bs h1 a{color:#FEEA83}
.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}

After CSS Part now you have to go for HTML coding.

Template ->Edit HTML

 Now find <data:post.body/> by pressing Ctrl + F


You will find 3/4 time this code go for second one.


Now Copy the below code and Paste it before /above code

<div class="admin-bs">
<h1>Founded by : <a href="https://plus.google.com/u/0/106080909507696381306/posts">Asad tariq</a> - Written 50+ Awesome Articles </h1>
<div class="kontainer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltJVaQsgdC5O90am4Uhyb9P303IWbPro3M3hHsxUn_O-bNzRYmV6XRR5knGYxS2ebNSjD4-eJyV5CvE7HT82Qtvtc6rALVzVmziGIcs5UYCDRdSsUoEaZid7s83lco5b4RtlCWXsTCmP0/s1600/as.jpg" width="80" height="85"></img>
I love to blogging and sharing tips and tricks with my readers. I am a Part time blogger. Design Blogger template, Web Developing and Designing. If you think that this article help you little bit then please  do not forget to subscribe by entering your email in column Get Updates Via Email.
  <p><span style='float:left;text-align:left;'>
Join Me On: <a href='http://www.facebook.com/asadtariq786' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/asadtariq77' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/106080909507696381306/' rel='nofollow'>Google Plus</a></span>
<span style="float:right;font:italic 10px Arial, Sans-Serif;"><a href="http://tricksteacher.blogspot.com/2013/05/how-to-add-author-info-box-at-bottom-of.html" target="_blank">:: Thank you for visiting ! ::</a></span></p>
<div style="clear:both;"></div>
</div>
</div>

And save template.

Change this link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltJVaQsgdC5O90am4Uhyb9P303IWbPro3M3hHsxUn_O-bNzRYmV6XRR5knGYxS2ebNSjD4-eJyV5CvE7HT82Qtvtc6rALVzVmziGIcs5UYCDRdSsUoEaZid7s83lco5b4RtlCWXsTCmP0/s1600/as.jpg with your image link.

Change BloggerSpice with your Twitter and Facebook ID

Change 106080909507696381306  with your Google Plus ID

Read More

How To Add Facebook Like and Send Button In Blogger

Hello Friends today i am going how to  Facebook like and share button for blogger and website.
Share button is very important any  blogger and website. its increase blog traffic.


Go to Blogger.com
Select blog
Edit HTML

Note Backup your template

Search for (ctrl+f)

<data:post.body/>

 Paste the following code just below <data:post.body/>

<div id="fb-root"></div><script src="https://docs.google.com/file/d/0B0-0Xqug-nT8c1FGY1BCQk55WGc/edit?usp=sharing"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>

Save and enjoy 

Read More

How To Get Free .Tk Domain

Domains are very important for every website. Website without domain is incomplete. There are many domain in the world. Mostly website sale domain and hosting. But some website giving free hosting and domain. so i am tell you how to give free .tk domain.

Go to www.dot.tk

Type your domain.

Enter your Website/Blog URL

Registration length to 12 months

Now click on Signup

Click on the indicated button. you have got your own .tk domain.
Enjoy free domain.

Read More