$bodybgColor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3kNPYvVoYjsnCh4dWIUHl_zkcNFfVKJMlpEp9AdY0Da-Hv9Zw01h-SH_BudFdXJMwRwUXomG6sM9FierbtIRTphyphenhyphen0WziKkxtl4UwAxSvpl5dqZR2n6E4WIYcf4boytEnpXH_ZLbyglvM/s0/light_toast.png)
Senin, 03 Maret 2014
background sexy
$bodybgColor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3kNPYvVoYjsnCh4dWIUHl_zkcNFfVKJMlpEp9AdY0Da-Hv9Zw01h-SH_BudFdXJMwRwUXomG6sM9FierbtIRTphyphenhyphen0WziKkxtl4UwAxSvpl5dqZR2n6E4WIYcf4boytEnpXH_ZLbyglvM/s0/light_toast.png)
Add Google Translate Button In Blogger
and they are different from us i mean there
culture, caste, society and the main is
language. Here is approximately thousands
of languages in our world and if we talk
about our Blogging field here is also many
people who cam to your site is from another
country and region and they don’t know the
specific language that we use to write our
blog posts well as we know we also almost use English language that also known in many countries but in some country people don’t know this language so its difficult to show our knowledge to them, But Google always help Bloggers and this time also they introduce its translate button feature which help your readers to read what you exactly want to tell your readers so its a simple procedure lets have a look.
How To Add Google Translate Button In Blogger ?
First of all go to Google Website Translator Page now click on ‘Add New Website’ button on the upper right side as shown below
Now in Website URL box enter your website URL and select your website language and click next as show below
Now in translation language click all languages and in second option set its mode what you want and click on get code
Now you can see two types of code the first is to verify your site and second is to show button where you want in your blog
Copy first code and Go to Blogger > Edit HTML and search for </head> tag using ctrl + f and just above it paste the first code and click on save template button.
Now copy the second code and Go to Blogger > Layout > Add a HTML / JavaScript and paste the second code and click on save button and adjust it where you want to show this button.
Need Help
If you need any kind of help about this article or any other article of this site you can feel free to comment below take care !Minggu, 02 Maret 2014
Add Social Media Sharing Widget In Blogger
As i already mentioned in our previous articles that social media is one of the best and biggest source to through traffic on your blog / site. Social media like Google+, Facebook, Twitter, Stumble and something like this are most popular on internet everywhere, So this is the one and best source of traffic you can easily get traffic from social media for this purpose now we post this social media sharing widget for Blogger. so lets start and add this widget in blogger.
How To Add Social Sharing Widget In Blogger?
- Go to Blogger > Template > Edit HTML
- In Edit HTML got to Jump Break > Blog1
- Now Find <data:post.body/> using ctrl+f
- Paste the below code after <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<table border='0'>
<tr>
<td><div style='margin-right:5px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
<td><div style='padding-top:6px;'>
<script type='text/javascript'>
tweetmeme_style = "compact";
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div></td>
<td><div style='margin-right:25px;'>
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/></div>
</td>
<td><div style='margin-right:25px;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='40px'/>
</div>
</td>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->
</td>
</tr>
</table>
- Save your template and you are done !
Add Snow Falling Effect In Blogger
Add Snow Falling Effect In Blogger
- Go To Blogger > Layout
- Add a HTML / JavaScript Gadget
- Paste the following code in it
<script type="text/javascript">
//Configure below to change URL path to the snow image
var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx1p7mX65DnawNduKl7sWR292icGAE7JCTUuHkIy2_bFSRHUu1ZVCu5txyxML_hktY7DEr32TE8QCGKbGR96nSKjMKo2-bGclUI-nBQvv-4hj3XhfAeYWvW8HpJMChCw-wR5C00ukNSGA/s400/snow.gif"
// Configure below to change number of snow to render
var no = 30;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "http://2.bp.blogspot.com/-MsCdyoGtGdA/UX5gk72qNoI/AAAAAAAAAfQ/LaKTmUG-aJM/s1600/snow+falling+effect.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
- Replace 30 to set falling snow ball numbers in your site
- Save Your Gadget and place it anywhere you want
Add Facebook Like Buttons In Blogger
How To Add Facebook Like Button In Blogger?
- First go to Blogger > Template > Edit HTML
- Check the expand widget box
- Search for <data:post.body/> using ctrl+f
Style #1: Button With Count
<b:if cond='data:blog.pageType != "static_page"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=button_count&show_faces=false&
amp;width=90&action=like&font=arial&colorscheme=
light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>
Style #2: Button Without Count
<b:if cond='data:blog.pageType != "static_page"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=standard&show_faces=false&Note: If you want to show this button below of your post title then paste one of these just above <data:post.body/>
amp;width=450&action=like&font=arial&colorscheme=l
ight&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>
If you want to show this button below of your post then paste one of these below <data:post.body/>
That’s all if you face any problem then kindly leave a comment.
Add Beautiful Label Cloud Widget In Blogger
Blogger labels. By this you can give a
beautiful CSS effect to your Blogger
Labels. By default Blogger cloud widget
is not well beautiful but we can make it
more beautiful and stylish CSS effect
to your labels. It can make a good
impression to you blog readers and this
will appear on the right side of you site
template. For this cause today i am making a post on Labels Widget so lets start our work.
How To Add Label Cloud Widget In Blogger?
To add this widget follow these simple steps:-- Go to Blogger > Template > Edit HTML
- Now search for ]]></b:skin> using ctrl+f
- Paste the following code above ]]></b:skin>
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555
transparent transparent;}
- Save your template and you are done
Need Help ?
Dear friends and respected readers if you need any kind of help about this post or any other post of this site then feel free to ask your questions. You can ask through comments or message us on Facebook and also subscribe us for latest posts Thank You !Add Facebook Popup Like Box With Light Effect In Blogger
Facebook is social media network site and need no introduction. Almost every
person who use internet is know about
Facebook. For Bloggers Facebook have
a lot of benefits for Pro Bloggers and
web developers. As i already mentioned
in my previous articles that Facebook
is a huge platform to get traffic. And
Facebook also introduce many features
for Bloggers and web developers. So
today i am sharing a new widget Facebook Popup like widget for Blogger. It will help you to increase your Facebook page likes. This widget appear when someone open your site or Blog. So lets start to add this widget in Blogger.
How To Add Facebook Popup Like Box Widget In Blogger?
To add this widget follow these steps:-- First Go To Blogger > Layout
- Add a HTML / JavaScript Gadget
- Now paste the following code in it
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9
O7O1q3c8/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/arieadie&width
=402&height=255&colorscheme=light&show_faces
=true&border_color=%23E2E2E2&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div></div>
- Change http://www.facebook.com/arieadie with your facebook page URL
- Now click on save button
- View your Blog or Site and you are done !
Need Help ?
Dear friends and respected readers if you need any kind of help about this widget then feel free to comment below Take Care !
Add Beautiful Popular Posts Widget In Blogger
Popular posts widget is also in blogger widgets
as default but to give it a new look you need to
make some changes in CSS coding. Today we
are providing a beautiful popular widget for
blogger which have a great look and have an
awesome hover effect. Popular posts widget is in
your blogger right side and also make a attention
for a visitor to add this widget you can make a
good impression on your visitor so when visitors
show these posts and if like on of them then the
visitor surely click on it and this visitor become
your loyal reader. So for this cause we providing
Popular Posts widget for Blogger it also make
a professional look for your template.
How To Add Popular Posts Widget In Blogger?
To add This widget in Blogger you need to follow these simple steps:-- First Go To Blogger > Layout
- Click on Add A Gadget
- Now Click on Popular Posts widget and make the follow changes as showing in picture
- Make the same changes as shown above in picture
- And Click on Save Button
- Now the second part is add the CSS code for this
- Go To Blogger > Template
- Click on Edit HTML
- Click on Black Arrow to expand the coding
- Now search </b:skin> using ctrl+f
- Above </b:skin> paste the following code
/*--- MBW Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/S
modosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
- Now click on Save Template and you are done !
Langganan:
Komentar (Atom)
