Teck 92 :: Android Apps | Blogging | Tips And Tricks

Add Snow in the Background of Your Blogger With CSS

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your Blogger blog. It seems particularly attractive since it doesn't require scripts, only CSS and three small images.

An advantage of this method is that by not using scripts doesn't overload the blog, the disadvantage is that users with not so modern browsers, will not be able to see it (in Internet Explorer works for version 10 and up).

The snow will fall in the background of the blog, which, in addition, prevent interfering with links or content (because the flakes are images), also prevent blocking the visibility of the content of the blog.

How To Add Falling Snow To Blogger Blogspot

Step 1. Go to Template and click on the Edit HTML button:

Step 2. Click the small arrow on the left of <b:skin>...</b:skin> to expand the style (screenshot 1) and click anywhere inside the code area to search by using the CTRL + F keys for the ]]></b:skin> tag (screenshot 2)

Step 3. Add the following code just above it:

/* Snow falling for Blogger
----------------------------------------------- */
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

#falling-snow {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAipepHbZtr_tqrogoKAXNjNr6KIqJh9Rjb9U9OrBo4dmQKKilv-L3r3BGZCDW5-C4QKRa96WNBaz10BD-tLCtKPX1wk98l71VFMs2imwZTEVNk3c5ZM2qI1TwQRJs0Bi2vC6vqo0Kxxi/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxUp6Q2v8a1c-Ct7FTuiTgVjEkGFkUw1WcjgsmxhTLQhqbLl6dOBGcmIcRL6ZvIl8VXSZkRfR5roKVq0WBSPlnHEDTA3lrzF0Q76eQC9n2BZmyhcga4pp3d9SuK7vFiMpfObJH7u4Q019/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5GfPRCvXXYvgfgjET51WIY3THj-8WxCvQUN7chCjmeOPOZsM7803syGrWCTruMVaaD0Lu-1wb9btJghb-PQ2YtTem5_F-n0o-_cn2sggCxKYnTz3Trxx34Hai8pRidnALcFAItU9MTpjh/s1600/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}

Add Snow in the Background of Your Blogger With CSS

Step 3. Now, search (CTRL + F) the <body> tag or if you can't find it, search this line below:

<body expr:class='"loading" + data:blog.mobileClass'>

Step 4. And just below, add this:

<div id='falling-snow'>

Step 5. Finally, find the </body> tag (CTRL + F) and add the following just above it:

</div>

Step 6. Save the changes and that's it. Enjoy!!! :)

Popular Post Widget Christmas Style For Blogger

The Christmas countdown has begun and while homes are decorated with colorful lights and the sweet smell of pine trees and the stores are playing Jingle Bells, there's no reason why we wouldn't decorate your Blogger blog with some ringing christmas bells right next to the Blogger Popular Posts widget!

So today I was playing around a bit with CSS and I was thinking that it would be nice to add some fresh styles to the Popular Posts widget so that it would look just ready for the forthcoming Christmas holiday.

Step 1. Log in to your Blogger Dashboard, go to Template and click the Edit HTML button

Step 2. Click anywhere inside the code area and press the CTRL + F keys, then search for this tag:

</head>

Step 3. Just above the </head> tag, add the following:

<style>
#PopularPosts1 .item-thumbnail:before{
display: block;
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMn8rIrht2I9rrJ292u_PCxbsBizBUPS_AGRsV5lGDMxk5k_97IMoaB6AchZ6ilFv_L6G0X5gALrip04iqKT7dVGEJehyphenhyphenvnrl5nnZAiMwrCkdc2dHCGLo4qI8oy6ZVvkDKYKlrjvdwMZA4/s1600/bells.png');
margin-left: -15px;
margin-top: -5px;
z-index: 2;
position: absolute;
}
#PopularPosts1 .item-thumbnail img{
float:left;
margin:5px;
padding: 2px;
border: 6px solid #FED74C;
height: 72px;
width: 92px;
position: relative;
background: #F11C25;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
transition: opacity 1s ease;
}
#PopularPosts1 ul li:nth-child(odd){
-ms-transform:rotate(20deg); /* IE 9 */
-moz-transform:rotate(20deg); /* Firefox */
-webkit-transform:rotate(20deg); /* Safari and Chrome */
-o-transform:rotate(20deg); /* Opera */
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#PopularPosts1 ul li:nth-child(even){
-ms-transform:rotate(-40deg); /* IE 9 */
-moz-transform:rotate(-40deg); /* Firefox */
-webkit-transform:rotate(-40deg); /* Safari and Chrome */
-o-transform:rotate(-40deg); /* Opera */
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#PopularPosts1 ul li:nth-child(odd):hover{
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
-o-transform:rotate(0deg); /* Opera */
}
#PopularPosts1 ul li:nth-child(even):hover{
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
-o-transform:rotate(0deg); /* Opera */
}
#PopularPosts1 ul li{
display: inline-block;
float: left;}
#PopularPosts1 .item-thumbnail{
width: 70px;
}
#PopularPosts1 li{
margin-right: 15px;
}
#PopularPosts1 .item-snippet, .item-title{
display: none;
} </style>
<script src="http://helplogger.googlecode.com/svn/trunk/sounds.js"/>

Step 4. Now search for the following line (you'll find it twice but you should stop at the second one):
Note: if you don't want any ringing sound on mouseover, skip this step.

<a expr:href='data:post.href' target='_blank'>

And replace it with this:

<a onmouseover='mouseoversound.playclip()' expr:href='data:post.href' target='_blank'>

Step 5. Click on the Save Template button to save the changes.

And you're done! Enjoy :)

How to Change a Blogger Post Style View List in To Grid

There are several ways to make posts appear this way. An option would be to use the Read more script to display a summary of the posts and add a conditional tag and a different style to the first post so that it will have a larger width than the older posts. So, in this tutorial I will show you how to create a magazine style for a Blogger Template. By following this tutorial, you can transform your boring and simple Blogger template to have an attractive and stylish magazine style layout.

Adding the Magazine/Newspaper style to the Blogger Template

Step 1. Before anything please make a backup of your current template to make sure that you won't lose anything important - just log in on your Blogger Dashboard and go to Template, then click on the Backup/Restore button. After you've got a copy of the xml template, click on the Edit HTML button:

Step 2. Click anywhere inside the code area and search by using CTRL + F keys for this line:

<data:post.body/>

Note: You'll find it more than once, but stop to the second one in order to see the changes.

Step 3. Remove that line and instead it add this code:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Note: you can replace the Read More text, by changing the code in red

Step 4. Now find (CTRL + F) this line:
<b:include data='post' name='post'/>

Step 5. Remove this as well and instead of it add this:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Note: you can change the Read More text here also, just replace the code in red with the text that you want to show.

Step 6. Now find the </head> tag and paste the following script before/above it:

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 600;
first_thumb_sum = 540;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>

Step 7. And below the script above add these CSS styles:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
#first { /* Styles for the First Post Container */
width: auto;
height: 250px;
float: left;
margin-bottom:10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* border for the first post */
}
.first-body { /* Style for the First Post summary */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height:1.5em;
}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:left;
line-height: 1.4em;
background: none;
}
#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #1061A1;
}
.post { /* Styles for the small posts container */
float:left;
margin-right: 10px;
width: 290px;
height: 210px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* border for the small posts */
overflow: hidden;
}
.posts-thumb { /* Style for the small posts thumbnails */
margin-right: 5px;
background: #ddd;
padding: 3px 3px 0px;
border: 1px solid #C4C4C4;
border-radius: 4px;
}
h3.post-title a{ /* Style for the small posts titles */
font-size: 14px;
color: #747474;
background-color: #F4F4F4; /* Background color for the small posts titles */
width: 95%;
font-weight: bold;
font-family: 'Arial Narrow', sans-serif;
padding: 5px;
}
h3.post-title a:hover { /* Color on mouseover for the Small Posts Title */
color: #005B77;
}
h2.date-header { /* Hide the post date */
display:none;
}
.post-footer { display: none;}
h3.post-title {margin: 0px;}
.readmorebutton { margin-top: 5px;}

.readmorebutton a { /* Styles for the Read More link */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration:none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
}
.post-comment-link { /* Style for the comment bubble of posts below */
float: right;
display: inline;
margin: -35px 0px;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for the comment bubble */
font-size: 11px;
position: relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#first .post-comment-link { /* Style for the comment bubble of first post */
margin: -200px 10px;
}
.post-comment-link a{ /* Link color for the comments bubble*/
padding: 10px;
color: #6A6A6A;
text-decoration:none;
font-weight: bold;
}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if>

Customization:

1) At the beginning of the script from step 6, we have this section:

posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 600;
first_thumb_sum = 540;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

- The first number is the number of characters that will show for the small posts when there will be no image available
- The second number will be the number of characters that will show when the small posts will have an image
- The third and the forth line is for the height and width of the small posts thumbnails (images).
- The same goes for what is in blue, but this configuration affects only the first post. Since the first post is wider, it may contain a larger number of characters and we'll be able to make the thumbnail size larger.

2) And finally, we have the CSS styles. That last thing we added is a code that determines how the posts are going to look on the homepage (and archive pages as well, except for the first post).

To change the width an height, respectively the size for the first post container, look for these lines:

width: auto;
height: 250px;

Underneath the first post are the values for the other posts, just look for this part:

width: 290px;
height: 210px;

So, width is the width and height is the height of the other posts container. There you will have to experiment a bit with the sizes in order to make them appear correctly.

Finally set the number of posts to show on the homepage so that there will never be any empty space. Go to Settings >> Posts and comments >> Show at most and select the number of posts that you want to appear.

Mozilla Firefox

Mozilla Firefox is a free and open-source web browser developed for Windows, OS X, and Linux, with a mobile version for Android, by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. Firefox uses the Gecko layout engine to render web pages, which implements current and anticipated web standards.As of July 2013, Firefox has between 16% and 21% of worldwide usage, making it the third most popular web browser, according to different sources. According to Mozilla, Firefox counts over 450 million users around the world. The browser has had particular success in Indonesia, Germany, and Poland, where it is the most popular browser with 57%, 45%, and 44%of the market share, respectively.

Mozilla Firefox

The Firefox project began as an experimental branch of the Mozilla project by Dave Hyatt, Joe Hewitt and Blake Ross. They believed the commercial requirements of Netscape's sponsorship and developer-driven feature creep compromised the utility of the Mozilla browser. To combat what they saw as the Mozilla Suite's software bloat, they created a stand-alone browser, with which they intended to replace the Mozilla Suite. On April 3, 2003, the Mozilla Organization announced that they planned to change their focus from the Mozilla Suite to Firefox and Thunderbird.

Mozilla Firefox

Phoenix 0.1 screenshot

The Firefox project has undergone several name changes. Originally titled Phoenix, it was renamed because of trademark problems with Phoenix Technologies. The replacement name, Firebird, provoked an intense response from the Firebird free database software project.In response, the Mozilla Foundation stated that the browser should always bear the name Mozilla Firebird to avoid confusion with the database software. After further pressure from the database server's development community, on February 9, 2004, Mozilla Firebird became Mozilla Firefox, often referred to as simply Firefox. Mozilla prefers that Firefox be abbreviated as Fx or fx, though it is often abbreviated as FF. The Firefox project went through many versions before version 1.0 was released on November 9, 2004.

Download

Las Vegas Technolofy Fair Showcases the Rise of Personal Technology 2014

If some of the gadgets on show at Las Vegas technology extravaganza the Consumer Electronics Show (CES) live up to their developers' expectations, this could be how people live their lives in the not-too-distant future.

The world's biggest consumer technology companies are sharing the stage with a host of up-and-coming inventors in the glitzy Nevada casino town to spruik their newest gizmos and concepts.

With industry estimates putting the global market for technology at more than $1 trillion, the four-day geek fest sees device-makers come together to discuss their visions for the future, at the same time as battling to convince buyers to choose their particular version of it.

A lot of the attention-grabbing displays are products that continue the trend of extending digital networks into people's daily lives with wearable technology and smart devices around the home.

This has been largely driven by the increasing spread of smartphones and tablets, which are expected to amount to 43 per cent of technology spending in 2014.

This rise of so-called wearable technology, like 'smart' watches and glasses that can monitor fitness and activity while updating emails and social media accounts and taking photos, is allowing people to wear the world wide web on their sleeves and on their heads.

One company is even integrating wireless connectivity into baby clothes, with an internet-connected 'onesie' being paraded onstage.

Sliding Profile Social Media Widget For Blogger 2014

In this post im gonna explain how to add Css sliding social icons list for blogger. By using Sliding Css Social Profile widget you can link your social media profile Facebook, Twitter and Rss Google plus,Rss and StumbleUpon Check the demo from below link.

Sliding Profile Social Media Widget For Blogger 2014

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.

<style>
#socialmenu_btrix { 
  margin:0; 
  padding:0; 
  width: 30em; 
  height: 4.5em; 
  overflow:hidden; 
  } 
#socialmenu_btrix li { 
  display:inline; 
  list-style-type:none; 
  } 
#socialmenu_btrix li a { 
  display:block; 
  float:left; 
  text-decoration:none; 
  margin:0; 
  } 
#socialmenu_btrix li a img { 
  opacity:0.7; 
  margin:0.5em; 
  border:0; 
  float:left; 
  } 
#socialmenu_btrix li a span { 
  display:none; 
  } 
#socialmenu_btrix li a:hover { 
  background:transparent; 
  } 
#socialmenu_btrix li a:hover span { 
  width:7em; 
  color:#aaa; 
  display:block; 
  cursor:pointer; 
  float:left; 
  } 
#socialmenu_btrix .h2 { 
  margin:0 5px; 
  padding:0; 
  color:#fc0; 
  font-variant:small-caps; 
  font-size:1em; 
  border:0; 
  }
  
  </style>
  <ul id="socialmenu_btrix"> 
  <li> 
    <a href="https://www.facebook.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8dN96VDb7dDoK2VrsATvfacNBgDDRZVp4P1PiI1KyWrOIOL_5giLxKYTsnNplP3frP5mwC4XZ3AfnVBgrE1xBQ3Foe37_5yR2JkJHAUiSnBGLuSdLbBt2o4XlMQuQy96prtcBjK-JJo/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" /> 
     <span><br /> 
      <b class="h2">Facebook</b><br /> 
      Add to facebook 
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="https://plus.google.com/107955298793879607964"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyB7awCzFxJvV85ONcv-XIwHjxoLyhUyTV-Bs5AIzkPavFyLabi3BFfMSSJzljem8r5c3-zlU5Gx0mVfyx_ssRWkX1B65uWb8pAVOAlsKE5xEkXYivcND0XitEXM6O3PRRCipUx78jHU/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" /> 
     <span> 
      <br /> 
      <b class="h2">Twitter</b><br /> 
      Add to twitter
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="http://feeds.feedburner.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMlSkq5f3Qoj_H9Coxs3vvXT8lxX8frXLowdhL4Lphq6obIkxswPb-4jwDMPypQsQxTTYXkbzoN7aE_NMvFXEvl2q_XqU0zSklOH1JmXK2-aSNbPJ4nDgkRFKi4SB_fQ4l4-37XYQoD4/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" /> 
     <span><br /> 
      <b class="h2">Rss Feed</b><br /> 
        Subscribe
     </span> 
    </a> 
   </li> 
   <li> 
    <a href="http://stumbleupon.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAf2QodMGHWbwvcnw2yv3EuSvMIaHlV_yv3EJzVBg6xJfA2TE6fLnYMd8KGnE7Nq47rIdZZTehQCDHhT5tOHHduFVWEW1JJJc8WjSkLo0uqCWyotxnm6LytpgxyQJx95VAE_AAWOnN65c/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" /> 
     <span><br /> 
      <b class="h2">Stumbleupon </b><br /> 
      add to stumble
     </span> 
    </a> 
   </li> 
    <li> 
    <a href="https://twitter.com/Teck92"> 
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_ldmEPtu4pLlZUgsYmOnemLlFo15Xw5Dd9ClWbssEXmKY3yxu272HTfAN6E5079wBfxC4hyPezGESp-taXuH0Xs8krBAxcjsUXnNgNfCFPMYo32arF7JRnH-t1698ubeEifCDXDQj3w/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" /> 
     <span><br /> 
      <b class="h2">Twitter</b><br /> 
      add to twitter
     </span> 
    </a> 
   </li> 
  </ul>

You have to change the counters manually, just change red color number according to profile.

Replace Teck92 with your Feedburner ID
Replace Teck92 with your Facebook username
Replace Teck92 with your Twitter Username
Replace 107955298793879607964 with your Google plus ID
Replace Username with your StumbleUpon Username

5. Now save your HTML/Javascript'.You are done.

Social Media Popup Box For Blogger

In this post im gonna explain how to add customized recommendation popup box for blogger. Actually this is just widget.You can add it to your blog easily. follow below steps.It includes Google plus, facebok and twitter counters.Go to below link for demo.

Social Media Popup Box For Blogger

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.

<style>
#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6iPd8vA6ZstOM5TOyM7LM2VeyS-NgT25XriIbGdEPwtf8FIqn4Gz7Ec_4WDFsArvM_eJP30g9XRYuV0JYXWcb_Ez8jwweoax5bRgyg6ctOe2CCHyUYOu5xtu0tnngPq2ZwMewokFlcc/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


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

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTeck92&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/Teck92" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<div class='clear'></div>

7. Now save your HTML/Javascript'.You are done.

Social Subscription Box For Blogger 2014

In this tutorial im gonna explain how to add stylish Rss Subscription widget with social media profile icons. By using this Rss Feed Subscription widget you can link your social media profile Facebook, Twitter and Rss and subscribe field. It will help to get the new updates by emails.You can check it from below demo link.

How to add Rss Feed Subscription Box For Blogger

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.

<center>
<div align="center" id="Teck921-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 250px;">
<h3 id="Teck921-title-text" style="color: white; font-size: 20px;">
GET FREE EMAIL UPDATES</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Teck92', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<a class="social-icons" href="https://facebook.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirRT3yEz8G17FXDZGrvmHy5UMLnAc1AMAqsqA22Bwmj0UTj0PpZ0NlII6sZ97qH5fKkbcG28fN7SCqPUdj0zn4aSump_OCFf4QqZ0Tq959kUsq5R5zc1X7zKweJHki82UWWBMaPdQGTwXm/s1600/Teck92-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsV-oZwgC7CJu57sNaHUajzZbeCSWSJLtopwRvouYTR4Q5P2cJuIXlHXIC1T17nru5VEILXn4Cl8OZhMTHtxt1Ib4c5Z7gvgi1DIuN-Y0iaBU5oZDmjzTa4BAJ-TcSYxhbAabQbSvJqPLn/s1600/Teck92-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyGm26fri9QELLpkPTc3Y9pb5VsGr-fW3PNJeQeJiiKHtVwDNPahplwZJULGeYG66axoo8yjlMrAd6pBPnVil_4qBTWa4dSIFW9cBNTZdC2br9nr7VFcQhIX7KFA0sIlysn_XYjoKtbnHI/s1600/Teck92-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/Teck92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNG8ZkTOO0Tg37EfRuidSRZqa9x82q9GMQqaM93YXiUSNWzKZSPADA-PQWmDeILOnGSeKmFzgpL1ze1vKxLii9qmYSx14Om2eQk_cRkjXxyU11yLNoUsRYamhtNmx6z-Dp-6jZQZMHk13/s1600/Teck92-Rss.png" /></a>

<input class="email" id="Teck92_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="Teck92" /><input name="loc" type="hidden" value="en_US" /> <input id="digitalhubinc_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
</center>
<style>
a.social-icons {margin-right: 5px; height:40px;width:40px;}
a.social-icons:hover {opacity: .7;filter:alpha(opacity=70); }
#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCRhWrukJ2C0iINWkio0VbqsLxk4Y4aJgLnpzHSamqFbXVem-5doVT81soou6mYHY9drczbAWqTbG5obASPhH-rJI5FwxUep0FNhg-8T7AE4ksKcZ87McXvXPmw5iXTJaQYlQRTe0_6yUn/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC8Ln-Usa8qBjV0-kkkrshw7kK2Wk2hXytP7UOfg3e2_4eVDx8_AwR6x0uc8qRQ0JylzwEBo09u4JE-_wt4Ng_obuDQmZQLmV_CGC7-gZWBAJM6lu_-Rl9Sg80khtwhlkbP34xgHEk9HBq/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYaPYAEvzcm2JwJaxa_ojkXtOtUbvTwCm1MWvn1oGlMUpc9SRZvQBP-gZhbOF-zJmivaJAvPQXpOEeLluMfoUPnQ2-pAJlfKcxZza5VtTqMKAHFrE-zdiZilNwiP2rquUcBI6em7ixgtsr/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style>

You have to change the counters manually, just change red color number according to profile.

Replace Teck92 with your Feedburner ID
Replace Teck92 with your Facebook username
Replace Teck92 with your Twitter Username
Replace UserId with your Twitter Username

5. Now save your HTML/Javascript'. You are done.

RSS And Social Media Subscribe Widget 2014 For Blogger

In this tutorial im gonna explain how to add Social Media And Rss Subscribe Widget. By using this Social Media widget you can link your social media profile Facebook, Twitter and Rss and subscribe field. It Social Media will help to get the new updates by emails. You can check it from below demo link .If you want to look at other rss feed subscription widget,click this link. If you have any questions regarding to this.Let me know. I will help you.

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.

<style>
.subscribebtrix {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-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;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-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;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-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;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>

<br />
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Teck92', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="Teck92" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/Teck92" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvxBMFbiU2PgTFovSZTOBZ_BE1Y9Tu7HlUNsq7eVzdLQUirEFpNVPJasfiJgv7SnxhEVK6v0EEMC7yKjexi0Trb4Hyu1DDxETNIKUNCJ__Gw-gSKx_b5LSymVaQf2ljd3aoTwBzQj4LnM/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/Teck92" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9k_nxOyULZIvnYDAkNASqZGsqae4ZV7wRPMVFOFrIw5C6HNpB2RU-YgObHSJsnb0SC4Lsj42euDFUdZ1yqVjcMdXwnYB1_1_TXc5VTu2ctg1BmUmtXplvKscexpWu_s9vbcBacCf9sX0/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/UserId" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWqqHuvUp15dso-pIxbPXhw1IFE1FSi7u4IetVNEBRn5ScDf9eYIm1A8Z0FCHWuqFkIQzrP0HTGWaJoNb1oCiswdakydqs1yXy72_7k6qmYabXRERp-WbrOVBCbMc53Q_e0Ru3e3zC5g/s1600/googleplus_btrix.png" /></a>
<a href="http://www.pinterest.com/Teck92" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIsgcr0ndL8AXJLL3CRvX3YO7JLf5ptdlJ7AfOYIJRB6tmlQcEQ6IGHSk64goZE_ZNS3G23dsrC7nAwu7lwyaClCd6kwSznNmfLy_dSEkgMmwrM-XEgHHbVvRglOEpCZrRNMeUEzQfL4/s1600/pinterest_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/Teck92" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKh2_VGw3vj943quQwoGAMcHzz-KuKkkwVdUDMQbnSyxsz1jgbqwbBZYFpR5LaGR8la0xOni6KZ5q3K_L7SRzrvO3IyyD3e2-eaj_Bx6za9WPxqZzhak_r3mADCaqnpU9PI4oo3iSZowY/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/Teck92"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/Teck92?bg=FF9900&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a></div>
</div>

Replace Teck92 with your Feedburner ID
Replace Teck92 with your Facebook username
Replace Teck92 with your Twitter Username
Replace Teck92 with your Pinterest Username
Replace UserId with your Twitter Username

5. Now save your HTML/Javascript'.You are done.

Cool Rounded Social Share Buttons For Blogger Post 2014

This is a Below Post Social Sharing Widget. In this tutorial im gonna explain, how to add it to end of blogger post. It include nice title hover effect too. By using this social sharing widget, you can share your social networks with one click.It means, you can get some visitors to your blog if someone do sharing. Im using Css3 and HTML, Just check out demo about this Social Sharing Widget .

How to add Social Sharing Widget For blogger

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin> tag

ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_cGcq_C79_YnMJGOVqF815kl5B6kZWUK7gHz92ZEMxH-bjv-ULkStV0h-vYlxMOktiP20iV5Tu6u3Ll63YPKxZD9ufLw6HTXVxUcFW_zjAPus1fv-B4__RFOmtZAjy-t1r6zj2LQPRux/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ60bbHTpB02LUYM94P9Ba2xGYfey5iG2IHCUkYfxfacpuctT3LZ2iYroB-xGtKxp-Z0k5_bGZ4ThwjTU-crKyA6we8qzUDYJ6bSvKxr7qWVigaTy2Fvar4KcSEH5Le0aKuUDz5Tazg_zM/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcfMSsAcQMcvd4UEaEXApqbxddzvXdZzhelK8wveBZ0FQZM2j5qwrvCJaRb1nKKAJNAPdtTq21OWvPddNyJKZf9Pm3iTzlAy2c8h47OtDaA6XhPgWitWmSDp7D6dcPzfbV7hkk6z8ahf7X/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7JycFbvulzIzzPDs614o3If27C4kjsFyrhlbI8yWdNL0vPbn06KXYBJ9YLORON8XSeOSSUJL0qFmN7UqzZu6Oib9TXz2uPhirUT8EU7sfsc7WI6A_vKTm2DYmpSQolOIb4h-rQnTa_oB/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy63h5gek4p2aF4l67piqP5X25So3gdp4EfV0idQhYiy0S12gBe_h1iIBdZagIQWTKyKpQHK8rWUKhYpP_eL7kvOitbseSCIPXSoLY_08QGhME7uUatULtBIzxs9WvZQQwwTyBOV6AD-I7/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskL82tn-6eWtr9sKzNWJd0iytQL7dBMofDGBmhF5psncEm1vlasrZMlYDvf-2Qe9lccbXTGkkFwVyby0dKjkTaJXjudo-dFvNWHKz_AC6_EaYgT9G1iQqO_KJbcr7VQseXGXTamOw9Ifx/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWjtaxijc-WPUHAgTEj56zahsmDo_vmgVlc8otFbFIGjdvpthZZVxQ21DW1UX8l4vWo-S8mqtJ7J9fPwA9SD1INs8hClFjkDrssdJ16WwF7cid3tKX6djS0QNy1fg2GTr1d6uNulQtgDo/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}

6. Find this tag by using Ctrl+F <data:post.body/>

7. Paste below code Before <data:post.body/> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_btrix' id='animation_btrix'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>

8. Now save your template. You are done.

Archives

Label

Add Snow in the Background of Your Blogger With CSS

How To Add Falling Snow To Blogger Blogspot

Popular Post Widget Christmas Style For Blogger

How to Change a Blogger Post Style View List in To Grid

Adding the Magazine/Newspaper style to the Blogger Template

Mozilla Firefox Latest Web Browser 2014 Download Free

Download

Las Vegas Technolofy Fair Showcases the Rise of Personal Technology 2014

If some of the gadgets on show at Las Vegas technology extravaganza the Consumer Electronics Show (CES) live up to their developers' expectations, this could be how people live their lives in the not-too-distant future.

The world's biggest consumer technology companies are sharing the stage with a host of up-and-coming inventors in the glitzy Nevada casino town to spruik their newest gizmos and concepts.

With industry estimates putting the global market for technology at more than $1 trillion, the four-day geek fest sees device-makers come together to discuss their visions for the future, at the same time as battling to convince buyers to choose their particular version of it.

A lot of the attention-grabbing displays are products that continue the trend of extending digital networks into people's daily lives with wearable technology and smart devices around the home.

This has been largely driven by the increasing spread of smartphones and tablets, which are expected to amount to 43 per cent of technology spending in 2014.

This rise of so-called wearable technology, like 'smart' watches and glasses that can monitor fitness and activity while updating emails and social media accounts and taking photos, is allowing people to wear the world wide web on their sleeves and on their heads.

One company is even integrating wireless connectivity into baby clothes, with an internet-connected 'onesie' being paraded onstage.

Sliding Profile Social Media Widget For Blogger 2014

Sliding Profile Social Media Widget For Blogger 2014

Social Media Popup Box For Blogger

Social Media Popup Box For Blogger

Social Subscription Box For Blogger 2014

How to add Rss Feed Subscription Box For Blogger

RSS And Social Media Subscribe Widget 2014 For Blogger

Cool Rounded Social Share Buttons For Blogger Post 2014

How to add Social Sharing Widget For blogger

Mengenai Saya