Home
>
Archives for
June 2013
Hi Friends today i am going to share IP Address finder. Just copy the HTML source code shown below and put it on your website and blogger. This service is free for personal use.
Go to your Blogger > Dashboard
Select Layout tab.
Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.
Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.
Live Demo 125x125 pixel
<a href="http://tricksteacher.blogspot.com/2013/06/ip-address-finder-widget.html"><img src="http://www.wieistmeineip.de/ip-address?size=125x125" border="0" width="125" height="125" alt="IP" /></a>
468x60 pixel
<a href="http://tricksteacher.blogspot.com/2013/06/ip-address-finder-widget.html"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>
Today i am going to share how you can add Facebook send button.
Facebook Send button helps people to share interesting stuff with all their friends, This wedgie increase your traffic and make back link.
How To Add Facebook Send Button In Blogger and website. Go To Blogger > Design > Edit HTML
Search for
<data:post.body>Pastt the code below just above
<data:post.body><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send href="" font="verdana"></fb:send>
save it and enjoy
Today i am going to share Blockquote for blogger and website. Created Simple Css Codes For a Blockquote. This Blockquote Highlighter Is quite Nice And Eye-Catching.
How to add CSS Style Sheet in Blogger Template:
Go to Blogger
select Template
EDIT HTML
And now Search For
]]></b:skin> With
CTRL+F After you find
]]></b:skin> just above it paste the following coding
/*****************************************
TricksTeacher blockquote
******************************************/
.post blockquote
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #F2F1F1;
color: #000;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover
{
background-color: darkgreen ;
color: #fff;
}
.post blockquote:active
{
background-color: CornflowerBlue ;
color: #000;
}
save your template and enjoy
Hi all today i am going to share Facebook stickers. Facebook stickers use for new funny chat emoticons. you can send Facebook Stickers from your Android or iPhone device using the Facebook Home app. But its only available on smartphones. So here i will show you how all of you can use this amazing feature on computer too :)
How to Install Facebook Stickers in Chat Box
Go to FaceMoji Extension
Firefox or
Chrome Add to Chrome if you are using Google Chrome
Add to Firefox if you are using Firefox
ust Refresh the Facebook tab, and you'll notice a new grey heart inside the chat box like the images above.
If you are using it for the same time, it will redirects you to a login to app page, just click Login and refresh Facebook again
I am going to share how to add rainbow effect on blog links but the main concept is to add rainbow effect which use different color gamut. Its not actually rainbow because it shows only 4 to 5 color instead 7. Rainbow effect make your blog little attractive that can convert a dull or text base blog.
Go to blogger.com Template
Now find
]]></b:skin> by Pressing
And Paste the below code after/below
]]></b:skin> <script type='text/javascript'>
//<![CDATA[
var rate = 5;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive;
var act = 0;
var elmH = 0;
var elmS = 128;
var elmV = 255;
var clrOrg;
var TimerID;
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Rainbow widget by www.tricksteacher.blogspot.com//
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>
Now save your template and enjoy :)
Hi Friends today i am going to share that how to use Scrolling Popup Facebook Like, Adsense Ad, Twitter follow, Email Subscribe Box Widget for Blogger and this widget will increase your facebook like, twitter follow, subscribe for your blog and increase your traffic.too
its is very powerful.
Go to your Blogger > Dashboard
Select Layout tab.
Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.
Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.
<style type='text/css'>
#bloggerspiceFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#bloggerspiceFBpop a.bsclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#bloggerspiceFBpop').animate({top:"50px"}, 1000);
// Widget by www.tricksteacher.blogspot.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='bloggerspiceFBpop'>
<!-- Widget by www.tricksteacher.blogspot.com Start -->
<center><b><a class="BloggerSpice">Don't Forget To Join With Our Community</a></b></center>
<center>
Add Your Code
</center>
<!-- Widget by www.tricksteacher.blogspot.com End -->
<a class='bsclose' href='#'>×</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span></center></div><a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://tricksteacher.blogspot.com/2013/06/popup-facebook-like-adsense-ad-twitter.html">Blogger Spice</a></center>
</div>
Change
Add Your Code with your code
Hi Friends Today I am going to share, how to use 160px X 600Px AdSense ads which can be float right or left side of your blog and website. Not only AdSense ads can be float but you can use any affiliates ads to make float.
Go to Blogger.com > Dashboard
Select Layout tab.
Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.
Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.
<style>
#tricksteacherflotads {
height:30px;
width:auto;
background: #333333 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#bsadsbase{
height:600;
margin:0auto;
width:180px;
background:#fff;
border-bottom:2px #333333 solid;
border-right:2px #333333 solid;
border-left:2px #333333 solid;
text-align:center;
padding:4px;
}
#bsadsheadline{
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:65px;
left:10px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("bsadsheadline").style.display = 'none';
}
</script>
<div id="bsadsheadline">
<div id="tricksteacherflotads">
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.tricksteaching.com" target="_blank" onclick="getValue()">close(x)</a></span>
</div>
<div id="bsadsbase">
<h3></h3>
<p align="left"><h3></h3></p>
<p>
Ads code here <br/></p></div></div>
Replace "
Ads code here" with your AdSense or others ads code.
Change
180px to increase or decrease wide
Change
Left with right to float right side of your blog.
Hi Friends , Today i am going to share about how to add flipper sharing widget below every post in your blogger and website. This widget make your backlinks for sites and increase your traffic.
How To Add Flipper Sharing Widget Below Every Post In Blogger Go To Blogger.com > Design > Edit Html
Find
<data:post.body/> Using
Copy the code below and paste it just after
<data:post.body/> tag.
<style>
/*--------TricksTeacher Flipper Sharing Widget ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5HtE-ri47oRFVt64ne9zhOALP80nWW9gQJa9DjdXhgPg-jWmkmbUBSTGh5LvpUiLpjXVJxBV-tL0jgfyZSS64v3QAbNam5wglYMkAklDC3469MTxGLuuPQTaNG0Vcdtqrn85dXwN61JzD/s1600/tricksteacher.png) no-repeat;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
cursor:pointer;
}
.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}
.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}
.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}
.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>
<div class='flipper'>
<b:if cond='data:blog.pageType == "item"'>
<div class="Pleaseshare">
Please Share it! :) </div>
<!--Google Plus-->
<a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank' title='+1 it :>'/>
<!--Facebook-->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>
<!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>
<!-- Pinterest -->
<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :>'/>
<!-- Delicious -->
<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>
<!--DIGG-->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>
<!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :>'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Bookmark plz :>'/>
</b:if></div>
<div style="clear:both"/>
Then save it and enjoy :)
Hello Friends. Today we are going to publish about a horizontal ribbon menu with hover effect.
Horizontal menu are the most necessary part of our blog.Now a days every bloggers are wanting to make his blog looks professional and for those bloggers this menu is better. This horizontal ribbon menu is created by fully CSS3 without using JavaScript and no any images uses so this menu is not effecting in your blog speed.It's hover effect is cool.
Add It On Your Blog
Log In To Blogger.com
Select To Layout And Add A Gadget
Select HTML/JavaScript And Paste It Inside The Box.
<style>
.TricksTeacher-ribmenu span {
background:#A81B6A;
display:inline-block;
font-family:verdana;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.TricksTeacher-ribmenu a:hover span {
background:#FFD204;
margin-top:0;
}
.TechBlogGuide-ribmenu span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.TricksTeacher-ribmenu span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.TricksTeacher-ribmenu a:link, .TricksTeacher-ribmenu a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.TricksTeacher-ribmenu:after, .TricksTeacher-ribmenu:before {
margin-top:0.5em;
content: "";
float:left;
border: 1.5em solid #A81B6A;
}
.TricksTeacher-ribmenu:after {
border-right-color:transparent;
}
.TricksTeacher-ribmenu:before {
border-left-color:transparent;
}
</style>
<div class='TricksTeacher-ribmenu'>
<a href='#'><span>Home</span></a>
<a href='#'><span>TricksTeacher</span></a>
<a href='#'><span>Tricks</span></a>
<a href='#'><span>jQuery</span></a>
<a href='#'><span>CSS</span></a>
</div>
Replace All The "
#" With Your Own Blog Link.
Now Save It And Enjoy
Today i am going to share about adding cool dancing twitter bird on your blog and 8 different style. twitter widgets which help to increase your blog traffic via twitter
�Go To Blogger Dashboard
�Select Layouts
�Add A Gadget
�Select HTML/JAVASCRIPT
Today i am going to tell you some tips and tricks about Facebook which made it more interesting. Some shortcuts and tips are posted below
Alt+ mOrShift+ Alt+ m New Message
Alt+ 0Or Shift+ Alt+ 0 Help Center
Alt+ 1OrShift+ Alt+ 1 Home Page
Alt+ 2 Or Shift+ Alt+ 2 Profile Page
Alt+ 3 Or Shift+ Alt+ 3 Manage Friend List
Alt+ 4 Or Shift+ Alt+ 4 Message List
Alt+ 5 Or Shift+ Alt+ 5 Notification Page
Alt+ 6 Or Shift+ Alt+ 6 Account Settings
Alt+ 7 Or Shift+ Alt+ 7 Privacy Settings
Alt+ 8 Or Shift+ Alt+ 8 Facebook Fan Page
Alt+ 9 Or Shift+ Alt+ 9 Facebook Terms
Alt+ ? Or Shift+ Alt+ ? Search Box
