SDI: For All Your IPhone App Needs
Another Stay Connected Widget With All Subscription Option
How to add it to blogger blog
1. Login to your blogger Dashboard2. Go to Layout and click a Add A Gadget.
3. Select HTML/JavaScript gadget.
4. . In title Field Write anything you want. like Stay Connected, Subscribe Us, Subscribe Now.
5. Copy the following code and paste it inside the content box.
<style>
.mbt-subscribe-box-email-field {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXTUwqziaHxMQrIXibeHoKh-4q5xSqRm396EZ5SfL9ghoB6XElq_bINyqCk72u95mxnn-aNwD3GHfLZzN3Z_ZuD8Q27w2DKJfvreDJnFs6oF6qZAkpAtg3F4soSyI9xJKevFvORnHJSdo3/s1600/sprites.png) no-repeat 0 -28px;
width: 280px;
float: left;
color: #777;
margin: 0 0 10px 0;
padding: 10px 30px;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.mbt-subscribe-box-email-button {
background: #09f;
width: 280px;
float: left;
color: #fff;
font-family: 'Verdana, Arial;
font-size: 16px;
font-weight: bold;
padding: 10px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-transform: small-caps;
}
.mbt-subscribe-box-email-button:hover {
background: #303030;
}
</style>
<!-- Social Profile Icons Start-->
<div id='social' style=' background: #d2ebff; width: 301px; padding: 10px 0 0 0px; margin: 0 0 0 0px; float: left;'>
<a href='http://feeds.feedburner.com/bl0ggertricks' imageanchor='1' target='_blank' title='Grab Our Rss Feed'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiri4dKiNNXK-KAGTTt5Xg4mh5hMsj60pGHxaXBIGNuhqQgYnx4fQEocMAB9rDcatEg_o9ezmmEfGlD6XlN9gikSuhg2Eau_yHWIg0XiXw9W3D4VGtE8GqRzBcc8qMGRDxwYNyDL0jFNys/s1600/rss-feed-icon.png' style='margin-right:3px; margin-left: 4px;'/></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks&loc=en_US' imageanchor='1' rel='nofollow' target='_blank' title='Get Free Updates Via Email'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUQ8JviGwqCtsSCncyZQmcMnPcW1cLM1S5E1klSivSP725wfhp6HrFWqOrDksy6Mn5opgLAZal_p9blbE5YmbAmkHfDeR2obPQq3mO6UCAH42Pt-MiDQz-DnCb3bKO-_QTHNGN1f7b4-p/s1600/Email-rss-feed-icon.gif' style='margin-right:3px;'/></a>
<a href='http://www.facebook.com/mybloggertiks' imageanchor='1' rel='nofollow' target='_blank' title='Like Our Facebook Page'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifXDqHyeWXu4PE_ndMQaoRjyYEDmvaIa1Etl3r-KxUEIsv3mhhXGNhtJ2GsrxZA-CSUeFs2OhBo7Xp0tlPW2OfHun6tmYSdCFq4DwYzdjYRoK6ZLqvfADRTWy9ct155fW2Awyiht2nV7j/s1600/facebook-icon.gif' style='margin-right:3px;'/></a>
<a href='http://twitter.com/mybloggerstricks' imageanchor='1' rel='nofollow' target='_blank' title='Follow Our Updates On Twitter'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMhDlnFDyaxKTyRmbBnJlZNTLH90YgCX1TL0jUGNLtLLCULrfybqX7UtCws38PcrQsbui_W4lFiXCt_MfFC243WDuXVxPk17L45kUCGX0qMB3f00W4RNwOTcL3jYNDJWx_5JPS56sCIJyY/s1600/twitter-icon.gif' style='margin-right:3px;'/></a>
<a href='https://plus.google.com/108204301284356444972' rel='nofollow' target='_blank'><img alt='Follow Me on Google Plus' height='43' src='http://www.dcddesign.com/images/social-media/google-plus-icon.jpg' style='margin-right:3px;' width='43'/></a>
<a href='http://pinterest.com/mybloggertrickx/' rel='nofollow' target='_blank'><img alt='Follow Me on Pinterest' height='43' src='http://passets-cdn.pinterest.com/images/big-p-button.png' style='margin-right:3px;' width='43'/>
</a>
<!-- Feedburner Chicklet Start-->
<center>
<a href='http://feeds.feedburner.com/bl0ggertricks'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=088A4B&fg=444444&anim=1' style='border:0' width='80' float='right' margin-right='5px'/></a></center>
</div>
<!-- Social Profile Icons End-->
<!-- Feedburner Chicklet Start-->
<!-- Twitter Follow Button Start-->
<div style="background: #d2ebff; width: 280px; float: left; padding: 10px 15px 10px 5px; margin: 0px; border-bottom: 1px solid #f2f2f2;">
<a href="https://twitter.com/mybloggertriks" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MyBloggerTricks</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?a4185c";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- Twitter Follow Button End-->
<!-- Facebook Like Button Start-->
<div style='background: #d2ebff; width: 280px; float: left; padding: 10px; margin: 0 0 10px 0px; border-bottom: 1px solid #f2f2f2;'>
<div class='fb-like' data-href='https://www.facebook.com/mybloggerstricks' data-send='true' data-show-faces='false' data-width='280'/>
</div>
<!-- Facebook Like Button End-->
<!-- Google plus Badge Start-->
<div style='background: #d2ebff; float: left; margin: 10px 0 10px 0px;'>
<div class="g-person" data-width="280" data-height="70" data-href="//plus.google.com/108204301284356444972" data-layout="landscape" data-rel="author"></div>
</div>
<div style='background: #d2ebff; float: left; margin: 0 0 10px 0;'>
<div class="g-page" data-width="280" data-height="70" data-href="//plus.google.com/103598710564060829080" data-layout="landscape" data-rel="publisher"></div>
</div>
<!-- Google plus Badge end-->
<!-- Email Subscription Start-->
<center>
<div class="mbt-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks" class="mbt-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="Bl0ggertricks" /><input name="loc" type="hidden" value="en_US" /><input class="mbt-subscribe-box-email-field" name="email" autocomplete="off" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')
{this.value = '';}" value="Enter your email address"/><input class="mbt-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>
</center></div>
<!-- Email Subscription End-->
Customization
Some customization are required for making this widget work perfectly for you. Follow the Steps:- Replace the all highlighted text in yellow color (Bl0ggertricks) with your RSS User Name.
- Replace the all highlighted text in Red Color (mybloggerstricks) with your Facebook page User Name or user id.
- Replace the all highlighted text in Blue Color (mybloggertriks) with your twitter username.
- Replace the highlighted text in Brown Color (108204301284356444972) with your Google Plus Profile Id.
- Replace the all highlighted text in Orange Color (103598710564060829080) with your Google Plus Page Id.
Optional Steps.
If in case the facebook like button did not work then add this Javascript SDK code just below <body><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
If in case the Google Plus Page badge and Google Profile badget did not work then add this Javascript code just below <body>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
You can surely ask for my help which would be no less than a pleasure. Please post any query you may have in the comment box below. Till then take good care of yourselves. Peace and blessings pals!..
How To Make Fast Loading Smartphones Website ?
Selection of language
Use of emulator
Web site layout
Code optimization
Efficient use of JS and CSS
Above the fold content
Quick server Response
Less HTTP redirects
Small ATF data
This post is written by Adeel Zia. A blogger and social media marketing nerd, his main interest is internet marketing and SEO monitoring.
Another Animated Css3 Multi Level Drop Down Menu
Preview In Different Browser’s
Now Let's Start Adding menu to your blog
1. Go to your Blogger Dashboard>> Template>> Edit HTML2. and Look for the following code in your HTML.
]]></b:skin>
3. Paste the following code immediately above(before) it:
#css3_menu {
width: 960px;
margin: 0px auto;
border: 1px solid #333;
border-top:none!important;
background-color: #333;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#css3_menu, #css3_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#css3_menu:before,
#css3_menu:after {
content: "";
display: table;
}
#css3_menu:after {
clear: both;
}
#css3_menu li {
float: left;
border-right: 1px solid #111;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#css3_menu a {
float: left;
padding: 15px 30px;
color: #979797;
letter-spacing: 4;
text-transform:inherit;
font-family: Verdana, Helvetica;
font-size: 14px;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#css3_menu li a:hover {
background: #333;
}
#css3_menu li:hover > a {
color: #fafafa;
}
*html #css3_menu li a:hover { /* IE6 only */
color: #fafafa;
}
#css3_menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 47px;
left: 0;
z-index: 1;
background: #333;
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#css3_menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#css3_menu ul ul {
top: 0;
left: 174px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(210,210,210,.2);
-webkit-box-shadow: -1px 0 0 rgba(210,210,210,.2);
box-shadow: -1px 0 0 rgba(210,210,210,.2);
}
#css3_menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#css3_menu ul a {
padding: 12px;
width: 150px;
color: #979797;
_height: 12px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#css3_menu ul a:hover {
background-color:#3d3d3d;
color: #fff;
}
4. Click save button and you are done first step.
Note:- If this style sheet doesn't work fine with your template. before adding this menu in your template completely remove your previous menu.
The code worked flawlessly!. If you have any problem or you want to change the background color font color or anything else just leave your comment with your requirement. We are ready for help 24/7.
Adding the widget to a blog
1. Go to Layout > Add A Gadget and select HTML/JavaScript gadget.2. Copy the HTML link and paste it inside the content box.
<ul id="css3_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Blogger</a>
<ul>
<li><a href="#">Widgets</a></li>
<li><a href="#">Plugin</a>
<ul>
<li> <a href="#">Facebook</a></li>
<li> <a href="#">Twitter</a></li>
<li> <a href="#">Pinterest</a></li>
<li> <a href="#">Google Plus</a></li>
<li> <a href="#">Adsense</a></li>
<li> <a href="#">Custom</a>
<ul>
<li> <a href="#">Hello Bar</a></li>
<li> <a href="#">Earning Boster</a></li>
<li> <a href="#">Clock</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tips Tricks</a></li>
<li><a href="#">Blogger News</a></li>
<li><a href="#">Blogger Help</a></li>
</ul>
</li>
<li><a href="#">Template</a>
<ul>
<li><a href="#">Blogger</a>
<ul>
<li><a href="#">By Column</a>
<ul>
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Column</a></li>
<li><a href="#">3 Column</a></li>
</ul>
</li>
<li><a href="#">By Color</a>
<ul>
<li><a href="#">Red</a></li>
<li><a href="#">Blue</a></li>
<li><a href="#">Orange</a></li>
</ul>
</li>
<li><a href="#">By Width</a></li>
</ul>
</li>
<li><a href="#">WordPress</a></li>
</ul>
</li>
<li><a href="#">Faqs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
3. Click Save.
4. Drag to reposition the gadget below the header.
Click Save and view your blog. You should see a functional menu installed.
Try hovering the tabs, make sure the dropdowns appear.
You may delete or add menu or sub menu(up to multi levels). Make sure you add/remove the relevant code completely i.e. starting from the opening tag until the closing tag. Do the changes very carefully.
Renaming and adding the links
As you can see, the dropdown menu HTML is mainly consisted of unordered lists (ul) and list items (li).Below is a code snippet for one of the category.
<li><a href="#">Home</a></li>To rename the category, simply replace
Home with your own text. As for the link, just replace # with the Page intended URL.Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment
add awesome social sharing widget To Blogger Blog
Now, Bloggers are aware of the role of social media in making their blog popular. Almost all bloggers are using the social sharing widgets and social media following widgets to increase the social media presence of their blog. Social media plays an important role in according to SEO and SERP roles. Adding elegant stylish social media bookmarking widget plays very impressive role to make your blog stylish and looking cool. Every beginner and professional blogger user wants to have something better and something different than others. Today I decided to tell you about an simple and effective social Media Bookmarking Widget that is used by all Professional Bloggers. This beautiful widget can makes your site attractive without effecting your blog or website loading time. Previously we wrote tutorial on social media sharing widget but today we have another social media sharing widget. The Amazing things for this widget is that, Loading time is Extremely Fast. You can check it loading time on live preview by clicking on live preview button. Now let’s proceed with the tutorial to add this social media widget to your blog. Follow the Simple Steps Below.
Add It to blogger
- Go To Blogger Dashboard > Template > Edit HTML. Before Editing Your Template Please Make a Backup.
- Backup your template.
- Search for ]]></b:skin> and just before it give a space and add this code.
div#bt-social-share {
background:#f3f3f3;
width:600px;
height: 80px;
border: 1px solid transparent;
border-radius: 5px;
-moz-border-radius: 5px;-webkit-border-radius: 5px;
}#bt-social-share ul {
list-style: none;
clear: none;
padding: 0px 0px ;
margin: 25px 10px 0 0;
float:right;
}
#bt-social-share ul li {
display: inline;
background:none;
vertical-align:middle;
margin:0;
padding:0;
}
#bt-social-share ul li a {
display: block;
float: left;
width: 32px;
height:32px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtyFgag860kJH_UcPUwSSFCu23UQUuhyKoyEdN_uZp6eTDvQ1arngZzHH21v_Vl5oqKySfSPfb9Ulml7Wuh7XN2t799Ti1JL1pdlX2ROToUqITTD39oMoVPqIIzmRv1kZsew1EJQPoPhxE/s1600/Social_sprites.png);
margin-left:3px;
background-repeat: no-repeat;
margin-right: 2px;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}#bt-social-share ul li a.facebook {background-position: -0px -0px; }
#bt-social-share ul li a.facebook:hover {background-position: -0px -33px; }#bt-social-share ul li a.twitter {background-position: -32px -0px; }
#bt-social-share ul li a.twitter:hover {background-position: -32px -33px; }#bt-social-share ul li a.google {background-position: -64px -0px; }
#bt-social-share ul li a.google:hover{background-position: -64px -33px; }#bt-social-share ul li a.pinterest {background-position: -96px -0px; }
#bt-social-share ul li a.pinterest:hover {background-position: -96px -33px; }#bt-social-share ul li a.delicious {background-position: -128px -0px; }
#bt-social-share ul li a.delicious:hover {background-position: -128px -33px;}#bt-social-share ul li a.digg {background-position: -160px -0px; }
#bt-social-share ul li a.digg:hover {background-position: -160px -33px;}#bt-social-share ul li a.addtoany {background-position: -192px -0px; }
#bt-social-share ul li a.addtoany:hover {background-position: -192px -33px;}
4. Save Changes and jump to the next step of this tutorial.
Note:- To change the Widget box size, change this value width: 600px;
5. Now Search for <data:post.body/> And Put Below Code immediately after it!
<div id='bt-social-share'>
<span style="font-family: 'Source Sans Pro', sans-serif;float:left; margin-left: 10px; font-size:14px; line-height: 80px; text-shadow: 0px 0px 1px #333;">Share This Story, Choose Your Platform! </span>
<ul>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li><li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='pinterest' href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'/>li>
<li><a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='a2a_dd addtoany' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title ' title='Share this post on others'/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
6. Hit save and you are done again!
Troubleshooting
While finding the <data:post.body/> code is coming three time. This Problem comes when we install Auto Read Hack in our Blogs. For this Problem Search for any one line from below and Put Above HTML Section of Widget Code after it!
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
If you faced any problem then feel free to let me know. I will write more tutorials on this topic this week so that you may get all the latest updates. I hope this Widget proves useful to most of you and it may bless your blogs with even more traffic.
Add Simple Social Sharing Below Your Blogger Posts
Now lets add them below each post in blogger
- Go to Blogger Dashboard > Select the Blog > Go to Template page of the Blog
- Click Edit HTML button.
- and Add the Following CSS Code before
]]></b:skin>
div#social-sharing {
width:550px;
height: 90;
background: radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -o-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -ms-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -moz-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -webkit-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
padding:10px;
margin:0 auto;
border: 1px solid #999;
border-radius:5px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
div#social-sharing:hover {
-webkit-box-shadow: 1px 1px 3px #CCC inset;
-moz-box-shadow: 1px 1px 3px #CCC inset;
box-shadow: 1px 1px 3px #CCC inset;
}
#social-sharing img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
opacity:1;
filter:alpha(opacity=1); /* For IE8 and earlier */
}
#social-sharing img:hover {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.social-sharing-title {
text-align: center;
padding: 3px 10px 2px 0px;
margin: 0 0px 0 0;
color: #8d0303; text-transform: uppercase;
line-height: 25px;
vertical-align: middle;
font-size: 14px;
}
You can replace the Statement Text Color Highlighted in Red. You can also change the Background width by changing the width: 550px; highlighted above in yellow color.
4. Next, locate the Second instance of
<data:post.body/> tag and paste the following code Below/after it:<b:if cond='data:blog.pageType == "item"'><
center>
<div id='social-sharing'>
<div class='social-sharing-title'>Do You Like This ? Please Take Five Second To Share It!</div>
<!-- Facebook -->
<a class='face-book' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtgxegAQAOO7xBQxrc8KfSspUZF3Jb76WJ7Qd4qYpvDinqrSrtI6aG5lNysSdhkuBX74LMfwSuHkrU7qnsBTo-iZ4TEgapyybfLuzJ0SsC_pHYeXKiCoj9D049KE6nGnTz7H3udhQNDWEb/s1600/Facebook.gif'/></a>
<!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif-03ziQj9t5ITgTvCr-Sbj40mLwX1rXDSq-o_cRsLb_rsgRm7yxRcjA94DuG2dsCZPutNaF1AwR8tsHXGpSlGnC5mpxQ-z1lWkOP-lT-PfR7DxusHDK6Y8mf95aKiyu3jz1-JIliza3rT/s1600/twitter_bird.gif'/></a>
<!-- Pinterest -->
<a class='pint-er-est' href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQLBc082F2RqrSmrFCtGMO-lekVlbroeF0N01T98aJWlO2UYggN4uxatiIrMQOd1Z4FByRI4r_epj5nZl0rmYEjipgjNQW9ur0tYxX1YtJuVh9_BdJI0FwDrUE2tXO1kjbDcOBMdntlNQ/s1600/Pinterest.gif'/></a>
<!-- Stumbleupon -->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumble this'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmEaFXrL2BeBtVfC53JQaiNFT910tlTDzGx2V6n-d1cnM_Yr3tOOpVJUaKjJXLnGaOsMka3UXonIVkZcjjHP9Jghhqw36fcMj4kDskPfjfeL9xx0ugix_AVSbvuu_Wu2KPZskuE37Vii34/s1600/stumbleupn.gif'/></a>
<!-- Delicious -->
<a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Delicious'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5EOVMnKiy7IIr-b4I5uV2x4FYpPg0RpjQzmtrtqPvsOPT7RIH3uj6sciZuwME4dKHA7_GjPgh-oJieSV59I1bziV_xt6roUZsJXrTUK49q-7WVpKuq4fmbqds2tg9ZBNVNUKG1og2pvZ/s1600/Delicious.gif'/></a>
<!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ6HaYFYriUcwOFn0G7GjL8pbXihJYsxX_kRmxyh-Lm-08JkdQ6Ixpo08K1-vUUjO1MxRSSf27jO-p5DQ1kKZxK59NRg4lMwVQ9q9DCxWTGdP5qcYmY03Yhuji_UebK9Op0KJBLcO-Wtt0/s1600/reddit.gif'/></a>
<!-- Digg -->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='nofollow' target='_blank' title='Digg This'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRb0s2qlaMxX0Jz0JAeotzT4cLAHabL5bRoFCl6k88PYu277SikCiCQbM5Ds7tIDp9vUXg23aB_2RvmRUO4Z_YSZQhD48e88n7sfYyKe-xRoaByNaajvMsxBhEadQukt2v5oZmWHuNZ50Y/s1600/digg.gif'/></a>
<!-- Email -->
<a href='mailto:?Subject=My Blogger Tricks&Body=Check out this site.. http://www.myblogger-tricks.com' rel='nofollow' target='_blank' title='Email This'><img alt='Email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrgANYJ7x-TDf7KKkTkBC49_lxaws9GDdqmprznz0cdL-zKmnZOxvYiFT_gW-G_OBIKpptseMF58f-3AxqNKVgWHHSO0Sk9bpDV0-jVAGXpIoGEuryrTLgr878C_qgKTHgzt95Ti8I80A/s1600/email.gif'/></a>
<!-- addtoany -->
<a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share On Others Networks'><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtThbNQSYIMP57U-x_ytbl_LGpQeBTS-oFb06Hf9i1nNeg5Cz4M4DEYQo22-O5yGntvYKMznWVDS3B9Y246b28gHKqdsth6lLr0eIlAIvpPPiG30QRpL5kmlDSLPEOgi9brTAiDtDxQjVI/s1600/share-to-any.gif'/></a>
</div>
</center>
5. See Preview before saving.
Note:- The buttons will only appear on post pages. We place this limit because the
Pin-it button only pins the page on which it appears. As such on homepage (if we were to allow it there), every instance of the button will pin the homepage, not the post (as it’s “supposed” to).
Troubleshooting
While finding the<data:post.body/> code is coming three time.This Problem comes when we install Auto Read More Hack in our Blogs. For this Problem Search for any one line from below and Put Above Section of Widget HTML Code after it!This
<div class='post-footer-line post-footer-line-1'>
Or this
<div class='post-footer'>
Or this
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
Let me know about other social sites that support this kind of sharing in the comments, and I'll add your tips to this post. I hope you will enjoy this tutorial and take a 5 seconds to share it.Cheers
How To Customize Blogger Label With CSS3 Effects
Add it to blogger
1. Go To Blogger Dashboard>> Your blog >> Layout>> Add a Gadget >> Labels.
2. Now make the settings which are shown in the screenshot below.
3. Select the Cloud from the labels display setting.
4. Uncheck the Show number of post per label.
5. save it by pressing orange button.
1. Add Style Sheet for Making it Attractive
1. Go to template editor>> EDIT HTML: (Make a template backup before editing)
2. Find the following code in your HTML.
]]></b:skin>
3. Paste the following CSS code before/above that line:
.Label a{ background: rgb(0,100,180);
background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));
background: -webkit-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -o-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );
display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.Label a:hover{color:#000 !important; background:#123d60;}
4. Preview, you should see the button appear under sidebar widget.
5. Click Save if you like what you see.
2. Add second simple style sheet for making your labels attractive
2. Find the following code in your HTML.
]]></b:skin>
3. Paste the following CSS code before/above that line:
.Label a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
.Label a:hover{background-color:#303030;}
4. Preview, you should see the button appear under sidebar widget.
5. Now save your template And check your blog.
Troubleshooting
1. You can replace active background color with your color. Simply replace the "background-color" code highlighted in yellow with your own color code. check out our color code generator tool or generate color code using adobe Photoshop color picker tool.2. You can also change hovering background color by changing background color highlighted in red color.
3. You can change animation speed by changing the duration (in seconds) in CSS .4s to .5s or .6s or any value which one you like.
I hope you enjoyed with this new look for your cloud labels. Suggest new features, your feedback and your thoughts on this tricks by leaving a comment and don’t forget to share this page.
Use New AdSense Asynchronous Ad Code For Improving Your page Loading Speed
The New asynchronous code Look Like This
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Here's how to implement the asynchronous ad code.
Step 1. Add Google Ads Script in your head Section
1. Go to your blog dashboard2. Then go to Template>> EDIT HTML and add this script before/above </head> tag.
<script async='async' src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
You only need to add it once, even if you have more then 1 ads.
Step 2. Replace your old ad codes with new asynchronous ad code
1. Find your ad code in your template and note its ID.2. Go to your adsense account Visit the My ads tab, find your ad unit (based on the ID) in the list, and click Get code.
3. Select "Asynchronous" from the Code type drop-down list.
4. Copy the code by clicking anywhere in the Ad code box and paste it over your existing ad code.
5. Remove the first line as it is already added in Part 1.
6. Repeat steps above for each ad unit.
Troubleshooting
If ads are not showing on your site within 48 hours after you've added the asynchronous code, you should make sure that the ad code is correctly implemented in your site. If new code correctly implemented then, please first try clearing your browser cache and deleting your cookies before trying to access your site again. For more information about why ads may not display on your website after correctly adding the asynchronous code, see in Google adsense help section ads are not showing.For any further help please feel free to post your queries in the comment box below. Cheer:).