29 Eylül 2018 Cumartesi

Blogger sayfanız için hava durumu eklentisi



Blogger


Blogger 

Blogger İnternette blog açmaya imkan sağlayan internet sitesi. Güncel kayıtlı kullanıcı sayısı 2 milyonu aşkın olan Blogger sistemi kullanıcılarına ücretsiz olarak blog oluşturmayı sağlamaktadır.

Sunulduğu Tarih:23 Ağutos 1999

Site Türü: Blog
Sahip:Google


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.



Blogger Hava Durumu Ekleme
"8 Çeşit hava durumu gösterimi"
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.