12 Aralık 2013

Blogger Hava Durumu Ekleme


Bloggerlar için bloglarında hava durumunu kullanıcılara göstermek dikkat çekici olabilir. Bir çok hava durumu eklentisi sadece bizim belirlediğimiz noktaların hava durum tahminlerini bize gösteriyor. Fakat okuyucularımız dünyanın herhangi bir noktasından sayfamıza gelerek yazılarımızı okuyabiliyorlar. Blogumuza ekleyeceğimiz hava durumu tahmini okuyucumuzun bulunduğu yerin hava durumu tahminini göstermesi çok daha dikkat çekici olabilir.

Blogumuza ekleyeceğimiz bu hava durumu tahmini eklentisi ile okuyucularımız dünyanın hangi noktasında olursa olsun bulundukları şehrin hava durumu tahminini görebilecekler. İster İstanbul'dan isterse de Londra'dan blogumuza gelen okuyucularımız bulundukları yerleşim merkezinin hava durumunu öğrenebilecekler.


Eklentiyi blogumuza nasıl ekleyeceğimiz gelirsek;

Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip ederek açılan pencerede Aşağıdaki kodları yerleştirdiğimizde hava durumu eklentisini blogumuza eklemiş oluyoruz.
<style type="text/css">
.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;
}
</style>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/weather.js"></script>
<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>

Hava durumu eklentisini blogumuza eklemenin bir başka yolu ise;

Blogger Kontrol Paneli > Şablon > HMTL'yi Düzenle yolunu takip ettiğimizde açılan kod sayfasında CTRL+F kombinasyonu yardımıyla ]]></b:skin> kodunu aratıp buluyoruz. Bulduğumuz kodun hemen üzerine aşağıdaki css kodlarını yerleştiriyoruz.

.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;
}

Css kodlarını yerleştirdikten sonra </head> kodunu bulup hemen üzerine aşağıdaki kodu yerleştiriyoruz.

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

Daha sonrasında ise </body> kodunu bulup üzerine aşağıda kodları yerleştiriyoruz.
<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>

Tüm işlemleri gerçekleştirdik sonra blogumuzda okuyucularımızın bulunduğu yerin hava durumunu sıcaklığını görebilecekleri hava durumu eklentimiz hazır durumda olacaktır.

3 yorum:

© 2013 iPRESS. All rights resevered. Designed by Templateism