Anonymous Squad No.035: addons

Breaking News

Affichage des articles dont le libellé est addons. Afficher tous les articles

samedi 8 février 2014

How to Display a Weather Forecast on Your Blogger

Displaying weather forecast widget on your Blogger blog could be an interesting thing for your visitors. Recently, one of our readers emailed us asking if there was an easy way to display current weather forecast on his blog. Our developers did some research work, and was finally able to prepare a robust and well-functioning Weather forecast widget that displays weather details on the basis of your visitor’s location.In this article, we will show you how to display weather forecast on your blogger blog.

Before anyone use this widget, we will be giving some significant reasons why you should use it too, mainly discussing about its function. Let’s assume a visitor from London, England landed on your site. Now this widget would fetch the data from local weather company and would provide its details accurate. Now if the day is sunny, rainy, cloudy and etc

: The solution

The first thing you need to do is to login into your blogger dashboard. Now go to Template >> Edit HTML >> and search for the skin tag, just above it paste the following piece of CSS coding (you can customize the code if you like, but we are certain that the default one would just be right for everyone).

.MyWeatherDiv .centerContainer {
width: 300px;
text-align: left;
margin-bottom: 200px;
}
.green {
color: #a6e22d;
}
.teal {
color: #66d9ef;
}
.purp {
color: #ae81ff;
}
.pink {
color: #f92772;
}
.yellow {
color: #e6db74;
}
.white {
color: #f8f8f2;
}
.grey {
color: #616161;
}
.f12 {
font-size: 12px;
}
.MyWeatherDiv img {
height: 64px;
width: 64px;
}
.weatherInfoRight {
z-index: 999;
position: fixed;
top: 10px;
right: 10px;
}
.weatherInfoLeft {
z-index: 999;
position: fixed;
top: 10px;
left: 10px;
}
.weatherInfoBottomRight {
z-index: 999;
position: fixed;
bottom: 10px;
right: 10px;
}
.weatherInfoBottomLeft {
z-index: 999;
position: fixed;
bottom: 10px;
left: 10px;
}
.MyWeatherDiv {
display: none;
background-color: #272822;
padding: 5px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.MyWeatherInfo {
text-align: center;
font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;
color: white;
font-size: 14px;
}
#divMyImage {
display: none;
}
.MyWeatherClose {
font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;
cursor: pointer;
position: absolute;
right: 10px;
color: white;
font-size: 20px;
}
.MWTemperature {
display: block;
}
.MWPlace {
display: block;
}
.MWIP {
display: block;
}
#clear-day {
display: none;
}
#clear-night {
display: none;
}
#partly-cloudy-day {
display: none;
}
#partly-cloudy-night {
display: none;
}
#cloudy {
display: none;
}
#rain {
display: none;
}
#sleet {
display: none;
}
#snow {
display: none;
}
#wind {
display: none;
}
#fog {
display: none;
}

The second thing is to add the JavaScript file that does the work quite brilliantly. Within your blogger template search for the </head> tag and just above it paste the following JS Coding. (We recommend you to please host the script on your own either on Google Drive or any other service because our script might go down if our quota of bandwidth gets full).

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/weather.js"></script>

Lastly, add this styling javascript file just above the </body> tag. You can change the position of the gadget by replacing position: "right" to left or center. There are many other options for your customization, which could be useful to match your site’s setting.

<script type="text/javascript">
$.MyWeather({
position: "right",
showpopup: true,
temperature: "c",
closeicon: true,
showicon: true,
showtemperature: true,
showlocation: true,
showip: true,
size: 80,
iconcolor: "white",
fontcolor: "white",
}, function (e, f, g, a, d, b, c) {
$("#txtCity").html(e);
$("#txtCountry").html(f);
$("#txtIP").html(g);
$("#txtLatitude").html(a);
$("#txtLongitude").html(d);
$("#txtTemperature").html(b);
$("#picTemp").attr("src", c)
});
</script>

We hope this tutorial may have helped you in learning How to display weather forecast on Your Blogger site. Do give it a try, and let us know what are your thoughts about our latest development by commenting your opinions below

Add a button on the follow-up sites are moving

: Main control panel / layout / tool JavaScript code by setting follows

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><style type="text/css">#MD-circle-mod{bottom: 0 !important;left: 5px;position: fixed;}#MD-container-circle{position:relative;height:100px;width:100px}#MD-base-button{background:-moz-linear-gradient(center top,#A90329 0,#8F0222 44%,#6D0019 100%) repeat scroll 0 0 #6D0019;background:-webkit-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-o-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-ms-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);border:4px solid #fff;text-decoration: none;z-index:9999;cursor:pointer;border-radius:50px 50px 50px 50px;box-shadow:0 1px 3px rgba(0,0,0,0.5);color:#fff;font:68px Arial;height:80px;left:0;padding:0;position:absolute;text-align:center;top:0;width:80px}.MD-btn{position:absolute;height:50px;width:50px;border-radius:25px;top:15px;left:15px;-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;-ms-transition:all 250ms;transition:all 250ms;box-shadow:0 1px 3px rgba(0,0,0,.5)}#MD-fb.open{top:-125px;left:25px}#MD-fb.open.clicked{top:-135px;left:15px}#MD-tw.open{top:-105px;left:80px}#MD-gplus.open{top:-75px;left:125px}#MD-rss.open{top:-30px;left:160px}#MD-mail.open{left:175px;top:25px}.plus{-moz-user-select: none;-moz-transition:all 200ms ease-in 0s;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in}.rot{-moz-transform:rotate(137deg);-o-transform:rotate(137deg);-webkit-transform:rotate(137deg);transform:rotate(137deg)}</style><script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".MD-btn");$("#MD-base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><a href="http://gj37765.blogspot.com" style="position:absolute;z-index:-11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif6VZzLtzCdnEFksne4boP4uW_FpYy6qo-nAFH4U1MMUnWgaTbxfpYz0u449nKKzNMNg9YuU46ZgkbzZsIvkQ-Pz6pVD5ZdG3OJu2UIghPoL31qnKMc6JGDZUfIimu-C0RPCjjzXukKJk/s1600/1x1juice.png" /></a><div id="MD-circle-mod"><div id="MD-container-circle"><a id="MD-fb" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt897DFIztWVLNKukdgza_Csllyr2Gya7670En_CfYYv4NcLk8SaPMdtoq1FZMTaIIR8q6pUa1CGhaHEFIaDdWKbVQ4whX97mxpjbrjqGGRONrakVgc9a0tNSn3aca5NW5JXKS7h-YuT6/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -1px 0" href="https://www.facebook.com/anon003." rel="nofollow" target="_blank"></a><a id="MD-tw" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt897DFIztWVLNKukdgza_Csllyr2Gya7670En_CfYYv4NcLk8SaPMdtoq1FZMTaIIR8q6pUa1CGhaHEFIaDdWKbVQ4whX97mxpjbrjqGGRONrakVgc9a0tNSn3aca5NW5JXKS7h-YuT6/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -52px 0" href="http://twitter.com/#" rel="nofollow" target="_blank"></a><a id="MD-gplus" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt897DFIztWVLNKukdgza_Csllyr2Gya7670En_CfYYv4NcLk8SaPMdtoq1FZMTaIIR8q6pUa1CGhaHEFIaDdWKbVQ4whX97mxpjbrjqGGRONrakVgc9a0tNSn3aca5NW5JXKS7h-YuT6/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -157px 0" href="#" rel="nofollow" target="_blank"></a><a id="MD-rss" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt897DFIztWVLNKukdgza_Csllyr2Gya7670En_CfYYv4NcLk8SaPMdtoq1FZMTaIIR8q6pUa1CGhaHEFIaDdWKbVQ4whX97mxpjbrjqGGRONrakVgc9a0tNSn3aca5NW5JXKS7h-YuT6/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -105px 0" href="#" rel="nofollow" target="_blank"></a><a id="MD-mail" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt897DFIztWVLNKukdgza_Csllyr2Gya7670En_CfYYv4NcLk8SaPMdtoq1FZMTaIIR8q6pUa1CGhaHEFIaDdWKbVQ4whX97mxpjbrjqGGRONrakVgc9a0tNSn3aca5NW5JXKS7h-YuT6/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=#&loc=en_US" rel="nofollow" target="_blank"></a><a id="MD-base-button"><span class="plus">+</span></a></div></div><a href="http://gj37765.blogspot.in" rel="dofollow"></a>

Change the color with red links of your

Add ''Last Topics'' to Blogger (beautiful shape and new)

Go to the control panel for your blog then => then select the design => Add tool and through pop-up window select the tool HTML / Javascript.

Copy and paste this code into the tool, and click on Save, then place the tool in place that suits you best

<style type="text/css"></style> <script type="text/JavaScript">  </script>