English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Yazılarımız Hakkında Yorum Yazmayı Unutmayın:)!!!

3 Mayıs 2015 Pazar

CSS3 ile Blogger Bildirim Kutuları (Uyarı,Dikkat,Hatırlatma,Bilgi) Oluşturma


Blogunuzda Hatırlatma,Uyarı,Dikkat,Bilgi, Sonuç,Güncelleme vb. genel bir bildirim yapmada kullanabileceğiniz ve CSS3 ile hazırlanmış renga renk, işlevine göre renklendirilmiş kutucukları blogunuza eklemeyi anlatacağız.Blogger bildirim kutuları, mesaj kutularını kullanarak ziyaretçilerinize, satır aralarında istediğiniz mesajı en iyi şekilde verebilirsiniz.Blogger bildirim kutularını ölçeklendirme gibi bir derdiniz yok, yazdığınız alanın boyutunu otomatik olarak kendisi alır, başlık kısmını da istediğniz gibi kendiniz ayarlayabilirsiniz.Kullanıcının kendine göre rahatça tasarlayabileceği bir şekilde dizayn edilmiş. Örneğin; "dikkat" yazan kutucuğun başlığını isterseniz "Çok Önemli Uyarı" gibi değiştirebilirsiniz.
DEMO GÖRÜNÜM

Blogger Bİldirim Kutularını BLogunuza Eklemek İçin

1-Blogger hesabınızla giriş yapın.
2-Blogunuzun kodlarını her ihtimale karşı yedekleyin.(Blogger yedek alma)
3-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
5-Aşağıdaki kodu kopyalayıp  4.adımda bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.
/*---- Blog Okulu Blogger Bildirim Kutusu Ekleme ---*/ 
.sc-notification{color:#fff;line-height:1.4em;margin:10px 0 1em;padding:.7em 1.2em;background-color:#ffffe0;border:1px solid #e1db8b;font-size:15px;font-family:helvetica;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.sc-notification .headline{font-size:17px;font-family:oswald,arial;padding-bottom:10px}.sc-notification.sc-warning{background-color:#fc402c;border:1px solid #C91704}
.sc-notification.sc-alert{background-color:#FF8377;border:1px solid #F15C4C}.sc-success.sc-notification{background-color:#2ec23e;border:1px solid #039D14}
.sc-info.sc-notification{background-color:#fdce09;border:1px solid #DFB400}.sc-update.sc-notification{background-color:#29b7ff;border:1px solid #069DE9}
.sc-info.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f05a';font-size:20px;padding-right:10px}
.sc-update.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f0a1';font-size:20px;padding-right:10px}
.sc-alert.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f06a';font-size:20px;padding-right:10px}
.sc-success.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f058';font-size:20px;padding-right:10px}
.sc-warning.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f071';font-size:20px;padding-right:10px}

6-Html kodları içerisinde Ctrl+F yardımı ile </head> kodunu aratıp bulun.
7-Aşağıdaki kodu kopylayın ve 6. adımda bulduğunuz </head> kodunun üst satırına yapıştırın.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<script src='https://googledrive.com/host/0B4LZsB4bN2rdNE4yRjdreDBIcUU/blogokulu-kisa-kod.js' type='text/javascript'/>

Not:Eğer daha önce yayınladığımız blogger jquery tab menu ekleme isimli konuda 7.adımda verdiğimiz kodun aynısını vermiştik eğer bu kodu daha önce eklediyseniz tekrar eklemenize gerek yoktur.

8- Son olarak da, CSS3 ile Blogger bildirim kutularını yazı içerisinde ekllemek istediğiniz yere aşağıdaki kodları yazmanız gerekiyor.Blogunuza ekleme için eklemek istediğiniz yere aşağıdaki kodu yapıştırıp ilgili kısımları doldurun.


Blogger Dikkat Kutusu Eklemek için;


[warning headline="Dikkat!"]Mesajınızı Buraya Yazabilirsiniz.[/warning]
Burada Dikkat! yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.


Blogger Bilgi Kutusu Eklemek için;


[info headline="Bilgi"]Mesajınızı Buraya Yazabilirsiniz.[/info]
Burada Bilgi yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.


Blogger Hatırlatma Kutusu Eklemek için;


[update headline="Hatırlatma"]Mesajınızı Buraya Yazabilirsiniz.[/update]
Burada Hatırlatma yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Blogger Sonuç Kutusu Eklemek için;


[success headline="Sonuç"]Mesajınızı Buraya Yazabilirsiniz.[/success]
Burada Sonuç yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Blogger Uyarı! Kutusu Eklemek için;


[alert headline="Uyarı!"]Mesajınızı Buraya Yazabilirsiniz.[/alert]
Burada Uyarı! yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Bütün bu işlemleri doğru yaptığınnızda CSS3 ile Blogger Bildirim Kutularını blogunuzda istediğiniz her yere ekleyebilirsiniz.

11 Nisan 2015 Cumartesi

Blogger jQuery Tab Menu Ekleme

Blogger jQuery tab menu ekleme yöntemlerinden en basitini ve yazı içerisinde kullanımı en kolay olanı blogunuza uygulama yöntemini sizlerle paylaşacağız.Blogger tab menu ne işime yarayacak diyenleriniz olabilir, aslında blogger tab menuyu her yerde kullanabilirsiniz, sizin hayal gücünüze ve yaratıcılığınıza kalmış bir durum yine de bir örnekle açıklamaya çalışayım;

Örnek:Yemek tarifleri yayınladığınız bir blogunuz olsun, bu blogunuzda herşeyi alt alta çarşaf liste şeklinde yayınlamaktansa tab menuyu kullanarak birinci taba kullanılacak malzemeler, ikinci tab kısmına hazırlanışı,üçüncü tab kısmına videolu anlatım, dördüncü taba da resimleri koyarak ziyaretçinizin bir tıkla istediği tarif içerisinde istediği bilgilere kısa yoldan ulaşmasına ve sayfanızda ziyaretçi 1.tab kısmına göz atarken diğer tabdaki yazılarınızında bir yandan yüklenmesi için zaman kazanarak sayfa boyutunuz büyük olsa bile hızlıca yüklenmesini sağlamış olursunuz, yani ziyaretçi hiç beklemeden bütün veriler yüklenmiş olur.Bu sadece basit bir örnekti, siz bunu kendinize göre istediğiniz şekilde uyarlayabilirsiniz.
DEMO GÖRÜNÜM

Bloguma Blogger Tab Menu nasıl ekleyebilirim?

1-Blogger hesabınızla giriş yapın.
2-Blogunuzun kodlarını her ihtimale karşı yedekleyin.(Blogger yedek alma)
3-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
5-Aşağıdaki kodu kopyalayıp  4.adımda bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.

/*-----Shortcode Tabs--------*/
.sc-tab ul.tabset.tabs li a.active{
border-bottom: 1px solid #70CF0A;
border-top: 3px solid #70CF0A;
padding: 8px 10px 10px 10px;
background: #70CF0A;
color: #fff;
border-left: 1px solid #70CF0A;
border-right: 1px solid #70CF0A;
}
.sc-tab ul.tabset.tabs li a:hover {
background: #70CF0A;
color: white;
border-color: #70CF0A;
}

.sc-tab ul.tabset.tabs {
margin: 0;
padding: 0;
list-style: none;
}
.sc-tab ul.tabset.tabs li {
float: left;
margin: 0px 4px 0px 0px;
border-right: 1px solid #EEE;list-style: none !important;
}
.sc-tab ul.tabset.tabs li a {
color: #666;
text-decoration: none;
    font-family: oswald, arial;font-size: 14px;
}
.sc-tab .tab-box {
clear: both;
position: relative;
z-index: 50;
top: 3px;
}
.sc-tab .tab_content {
display: none;
border: 1px solid #EEE;
padding: 1em;
border-bottom: 3px solid #70CF0A;
box-shadow: 2px 4px 6px #EEE;
font-family: arial;
font-size: 14px;
}
.sc-tab ul.tabset.tabs li a {
padding: 10px;
display: block;
border: 1px solid #EEE;
background: #fbfbfb;
position: relative;
z-index: 100;
} 
6-Yukarıdaki kodlar içeriisnde (5.adım) #70CF0A   kodunu değiştirip html renk kodlarını kullanarak istediğimiz renkte blogger tab menu oluşturabilirsiniz.
7-Html kodları içerisinde Ctrl+F yardımı ile </head> kodunu aratıp bulun.
8.Aşağıdaki kodu kopylayın ve 7. adımda bulduğunuz </head> kodunun üst satırına yapıştırın.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<script src='https://googledrive.com/host/0B4LZsB4bN2rdNE4yRjdreDBIcUU/blogokulu-kisa-kod.js' type='text/javascript'/>

9- Tab menu eklemek istediğiniz yere aşağıdaki kodu yapıştırıp ilgili kısımları doldurun.
[tab]
[content title="Tab 1"] Tab1 Açıklama için yazınızı yada resimlerinizi buraya ekleyin.[/content]
[content title="Tab 2"] Tab2 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. [/content]
[content title="Tab 3"] Tab3 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. [/content]
[/tab]

Tab1, Tab2,Tab3 yerine tab başlıklarını yazın.
Tab1 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. yazan yere içeriğinizi ekleyin.
Bütün bu işlemleri doğru yaptığınnızda blogger tab menu eklentisini artık istediğiniz her yere ekleyebilirsiniz.

Blogger Mobil Reklam Aktivasyonu ~ Blogger için Adsense Mobil Uyumu

Mobil kullanımın ne kadar yaygınlaştığını blogunuza gelen ziyaretçilerin istatistiklerini incelediğinizde farkına varmışsınızdır.Blogger kullanıcıları için bu işi fırsata çevirmek amacıyla, blogunuza gelen ziyaretçi mobil yada masaüstü kullanım, hangisi ile gelirse gelsin, reklamlarınızı gösterip bunu fırsata çevirmek istiyorsanız blogger mobil reklam aktivasyonu yapmanız grekir.Aslında anlatacağımız işlem tam da blogger mobil reklam uygulaması değil, blogger içerisinde var olan bir reklam gösterimi, sadece bunu aktif hale getirdiğinizde mobil kullanıcılar için kendisi otomatikmen reklamlarınızı gösteriyor.

Blogger mobil reklamları aktif hale getirmek için aşağıdaki resmi inceliyelim.


1-Blogger kumanda panelinden giriş yapın, ve yukarıdaki resimde 1 numaralı kısımdaki Kazançlar Adsense linkine tıkladığınızda resimdeki sayfaya geleceksiniz.
2-Yukarıda 2 numara ile gösterdiğimiz Burada Reklam Göster kısmında Evet yazan yeri tıklayın.
3-Yukarıda 3 numara ile gösterdiğimiz kısımda açılır pencere de reklamlarınızın blogunuzda nerede görüntülenmesini istiyorsanız onu seçin.Üç seçenekten birini seçin.
4-Yukarıda 4 numara ile gösterdiğimiz Ayarları Kaydet kısmına tıklayın ve çıkış yapın.Blogger reklamlarınız mobil görümü mobil cihazlarda da giriş yaptığınız cihaza uygun olarak görüntülenecektir.

Blogger reklam aktivasyonu için dikkat emeniz gereken blogger hesabınız da adsense nin aktif olması gerekiyor.Eğer blogger hesabınızın dışında ayrı bir adsense hesabınız var ise bura da o hesabı da kullanabilirsiniz.Eğer hiç yok ise blogunuda kazançlar kısmından başvuru yapabilirsiniz.


1 ve 2 nolu okları takip ederek adsense kayıt işelmlerinizi açılan sayfalardaki direktifleri uygulayarak kayıt olabilirsiniz.Yukarıda anlattığımız gibi blogger mobil reklam görünmesi için buradan reklamlarınızı aktive etmeniz gerekiyor.Blogger mobil reklam uygulamsı ile daha çok kazanacağınıza emin olabilirsiniz.Her zamanki gibi sorunuz olursa yorumlar kısmını kullanabilirisiniz.Bol kazançlar.

20 Şubat 2015 Cuma

Bloggere Powerpoint Ekleme ~ Blogger Sunu Ekleme

Ziyaretçilerimizden fatmanur yorumlar kısmında bloggere sunu ekleme konusunu anlatmamızı istemiş.Bizde onu kırmayarak en basit ve kolay bir yolla bloggera power point sunusu eklemeyi kısaca anlatalım.Blogger kullanıyorsanız mutlaka bir google hesabınız vardır, bizde başka sitelere üye olmadan ve basit bir şekilde bloggere power point ekleme~bloggere sunum ekleme işini de yine bir google ürünü olan google drive üzerinden size anlatmaya çalışalım.

Bloggere power point ekleme~blogger sunu nasıl eklenir ?

1-Google drive google hesabımızla giriş yapıyoruz.
2-Daha önceden hazırladığımız powerpoint sunusunu aşağıdaki resimde gördüğümüz numaraları takip ederek, power point sunusunu bloggera ekliyoruz.


3-Google drive da Dosyalar kısmına tıkladığımızda bir pencere açılacak ve bilgisayarımızdaki power point sunusunu burada seçip butonuna tıklayacağız.

4-Daha sonra ekranın sağ tarafında aşağıdaki gibi bir pencere çıkacak, bu pencerede yüklendi-yükleme tamamlandı yazısını görene kadar bekleyin.

Yükleme işlemi tamamlanınca yukarıdaki şekilde çerçeve içerisine aldığımız linki tıklayın.
5-Linki tıkladığınızda aşağıdaki resimde gördüğünüz gibi web ortamında google drive yüklemiş olduğunuz slayt açılacak.

Açılan slaytta yukarıdaki şekilde gördüğünüz 1 numaralı kısmı ardından 2 numara ile gösterdiğimiz Öğeyi Yerleştir Linkine tıklayın.
6-Öğeyi yerleştir linkine tıkladığınızda aşağıdaki gibi bir pencere açılacak ve bu pencerede power point sununuza ait iframe kodunu göreceksiniz.

Yukarıda 1 numara ile belirttiğimiz iframe kodunu kopyalayın ve tamam butonuna tıklayın.
7-Bloggere Powerpoint eklemek için blogger hesabınıza giriş yapın ve yeni bir yazı yayınlar gibi Yeni Yayın butonuna tıklayın.Açılan yeni yazı alanının HTML modunda olmasına dikkat edin ve HTML modundayken 6. adımda kopyaladığımız iframe kodunu buraya yapıştırın.

Gerekli açıklamaları,etiketleri ve başlığınızı yazdıktan sonra yazınızı yayınlayın.Artık power point sunumuzunu bloggere başarılı bir şekilde eklemiş oldunuz.


Bir sonraki yazımızda görüşmek üzere...

2 Şubat 2015 Pazartesi

Blogger İnstagram Eklentisi ~ Blogger İnstagram Resimleri

Son zamanlarda etkin kullanılan ve kullanımı bir hayli yaygınlaşan instagram ile paylaştığınız resimleri blogunuzda da görüntüleyebilmek için bloggere özel üretilen blogger instagram eklentisi ile instagram hesabınızda paylaştığınız bir resmi aynı zmanda blogunuzda da yayınlama imkanını bulabilirsiniz.Eğer ilgi çekici resimler paylaşırsanız blogunuzu takip eden kişiler bir süre blogger instagram eklentisi sayesinde instagram hesabınızı da takip etmeye başlayacaktır böylelikle instagramda takipçilerinizi arttırmak için blogunuzu da kullanmış olursunuz ve blogunuzu yeni bir eklenti (blogger instagram eklentisi) kazandırmış olursunuz.
Demo Görünüm
Blogger İnstagram Eklentisini Bloguma Nasıl Eklerim?
1-Buraya tıklayarak siteye giriş yapıyoruz.
2-Açılan Sayfadaki formu aşağıdaki gibi dolduruyoruz.
3-Oluşturduğumuz blogger instagram eklentisinin nasıl göründüğüne bakmak isterseniz, yukarıdaki resimde görünen mavi renkli Preview butonuna basın.
4-Kod Oluşturmak için de yeşil renkli Generate code butonuna basın.Butona bastığınızda aşağıdaki gibi bir kod sayfası açılacak.
5-Yukarıdaki resimde gördüğünüz pencerede açılan ve sizin ayarlarınızı barından kodu kopyalıyoruz.
6-Blogger hesabımızla giriş yapıyoruz.
7-Kumanda Paneli>Yerleşim modunu açıyoruz ve buradan Gadget Ekle>HTML/JavaScript gadgetini seçiyoruz.
8-Açılan Gadget penceresine 4.adımda resimde gördüğümüz ve kopyaladığımız kodu yapıştırıyoruz.
9-Kaydet butonuna basıp çıkıyoruz.
10-Blogger İnstagram eklentisi blogunuza eklenmiş oldu.
Dilerseniz eklediğiniz Blogger İnstagram eklentisini yerleşim modundayken sürükle bırak yöntemi ile blogunuzda istediğiniz bir alana sürükleyip bırakabilirsiniz.
İnstagram hesabımızı burdan takip edebilirsiniz. @blogokulu

28 Kasım 2014 Cuma

Blogger Dikey Menü Eklentisi (Navigasyonlu)

Blogger gadget ekleme yöntemiyle bir kaç tık sonunda blogunuzda navigasyonlu bir dikey menü olmasını istermisiniz ? Blogger dikey menü ile blogunuzun kenar çubuğunda, footer (alt alanlara) menüler ekleyebilir istediğiniz şekilde linkler verebilirsiniz. Blogger dikey menü eklentisini gadget olarak blogunuza eklemek için yapmanız gerekenleri maddeler halinde sıralyacağız. Bu maddeleri sırası ile okuduğunuzda ve uyguladığınızda sizde blogger dikey menü eklentisini blogunuza eklemiş olacaksınız.


Blogger Dikey Menü Eklentisini bloguma nasıl eklerim?

1-Blogger Hesabınızla giriş yapın.
2-Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip, açılan pencereye aşağıdaki kodu kopyalayıp yapıştırıyoruz.



<!-- Blogger Dikey Menu Code From http://www.blogokulu.org/ --> 
<style>
#v-menu {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#v-menu {
    width: 275px;
}
#v-menu ul {
    list-style: none;
    text-indent: 0px;
}
#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
}
#v-menu a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight:bold;
    font-variant: inherit;
    padding: 0px;
    color:#CCC;
    display: block;
    padding: 13px 50px;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    background:#333 url(http://1.bp.blogspot.com/-ajlWgyGZgjk/UiX0wp6VUaI/AAAAAAAADSI/R4DmpDf5onc/s1600/menu-bg.png) no-repeat;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#v-menu a:hover {
    background: #5e5e5e url(http://1.bp.blogspot.com/-8u6hsdoTEOU/UiX0wdeLrEI/AAAAAAAADSE/0MRS8eDrgJU/s1600/hover-bg.png) no-repeat;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
   
}
#v-menu a:visited {
    background:url(http://1.bp.blogspot.com/-8u6hsdoTEOU/UiX0wdeLrEI/AAAAAAAADSE/0MRS8eDrgJU/s1600/hover-bg.png) no-repeat;   
}
#v-menu a:active {
    background:url(http://1.bp.blogspot.com/-8u6hsdoTEOU/UiX0wdeLrEI/AAAAAAAADSE/0MRS8eDrgJU/s1600/hover-bg.png) no-repeat;   
}
</style>
<div id='v-menu'>
<ul>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
</ul>
</div>
<!-- Blogger Dikey Menu Code From http://www.blogokulu.org/ -->
Kod içerisinde mavi renkle belirttiğimiz "URL ADRESİNİZ" kısmına adresimizi yazıyoruz, kırmızı yere ise menudeki ismi yazıyoruz.
Örnek:
<li><a href="http://www.blogokulu.org/2014/11/blogger-dikey-menu-eklentisi-navigasyonlu.html">Blogger Dikey Menü</a></li>
gibi.

9 Kasım 2014 Pazar

Blogger Devamını Oku ~ Otomatik Yazı Kısaltma Eklentisi (Resimli)

Bloggerin eklenti ve özellik yönünden sınır tanımadığını defalarca yazmışımdır, aslında çoğu hazır temada var olan ama blogger özel şablonlarda farklı bir yöntemle kullanaılabilen bir eklenti; ana sayfada yayınladığınız yazının tamamını göstermek istemiyorsanız "devamını oku" yada ingilizcesi "read more" olarak bilinen özelliği kullanmanız gerekir.Normalde bloggerde bu özellik mevcut, ama her yazıya devamını oku özelliğini manuel olarak tek tek uygulamanız gerekiyor.Daha önceden manuel olarak blogger devamını oku yada atlama aralaığı olarak bilinen özelliği sizlere anlatmıştık.Şimdi ise ana sayfada yayınladığınız yazıların bir resim ve bir miktar metinle birlikte kısaltıp özet şeklinde ana sayfada görünmesini sağlayacak ve altına devamını okumak isteyenler için "devamını oku" diye link atıp, bu linke tıklayanlara yazının tamamını gösterecek bir eklentiyi bütün yazılarınıza tek kodla eklemeyi anlatacağız.

Blogger Devamını Oku Eklentisinin Faydaları ?

1-Yazılarınız ve blogunuza bir yazıda eklediğiniz resim sayısı fazla ise çarşaf liste gibi aşşağa uzayıp gitmeden, yazı başlığı ve resim kullanıcının ilgisini çekerse tıklayıp okuyacak, aksi halde maus tekerini bayağı bir yuvarlayıp aşşağı doru inmesi gerekecek.Aşşağı-yukarı hareketler kullanıcıyı sıkabilir.
2-Ana sayfada bir bakışta birden fazla yazıyı kolayca ziyaretçiler görebilecek.
3-Ana sayfa daha hızlı yüklenir ve siteniz biraz daha hızlı açılabilir.
4-Sayfa numaralandırma kullanıyorsaznı yazılarınız arası geçişler daha çabuk olacak.
5-Ziyaretçi aradığını daha çabuk bulabilir.
6-Görüntü olarak daha şık ve daha profesyonel bir bloga sahip olursunuz.

Blogger Devamını Oku özelliğini bloguma nasıl eklerim?


1-Blogger Hesabınızla giriş yapın.( kodlar içerisinde oynama yapacağımızdan her ihtimale karşı blog şablonumuzun yedeğini almanızı tavsiye ederiz (blogger yedek alma))
2-Kumanda Paneline>Şablon>Htmlyi Düzenle yolunu takip ediyoruz.

3-Açılan Kod sayfasında Ctrl+F yardımı ile aşşağıdaki kodu aratıp bulalım.

<data:post.body/>

Not:Bu koddan gnellikle üç tane oluyor.Arama yaptığınız da siz üçüncüyü bulacaksınız ve kodu oraya yerleştireceksiniz.Bazen farklılıklar olabiliyor o yüzden bütün işlemleri yaptığınızda eğer olmaz ise yaptığınız işlemleri geri alıp 2. nin yerine yapıştırıp baştan yapmanız gerekebilir.

4-Bulduğumuz kodun yerine aşağıdaki kodu kopyalayıp yapıştıralım.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Devamını Oku &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

5-şimdi de kodlar içerisinde yine Ctrl+F yardımı ile </head> kodunu aratıp bulalım ve aşağıdaki kodu kopyalayıp bulduğumuz </head> kodunun hemen üst satırına yapıştıralım.

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Yukarıda mavi renkli olarak belirttiğimiz 160 ve 180 değerleri devamını oku özelliğinde özet olarak çıkacak olan resmin boyutunu ayarlamaya yarıyor, kırmızı renkli 400 ve 490 değerler ise özet olarak gösterilecek yazının karakter sayısını belirtiyor.İstediğiniz şekilde bu değerleri değiştirebilirsiniz.

6-Bütün bu işlemleri yaptıktan sonra Şablonu Kaydedip çıkıyoruz ve Blogger Devamını Oku özelliğinin başarılı bir şekilde yüklenip yüklenmediğini test etmek için ana sayfaya bir göz atıyoruz.

Blogger Devamını oku özelliği ile ilgili sorularınız olursa yorum kısmından sorabilirsiniz.

26 Ekim 2014 Pazar

Blogger Breadcrumb Eklentisi ~ Blogger Seo Ayarları

İnternet kullanımının bayağı yaygınlaşması ve hayatın bir parçası haline gelmesi sonucunda herkesin internettte site açıp blog yazdığı bir ortamda insanlar aramalarda sıralamaya girmek ve sitesine-bloguna ziyaretçi çekmek için kıyasıya yarışır oldular.Ben bu olayı şuna benzetiyorum; Gideceğiniz istikametteki yola bir çok kişi girmiş ve trafik sıkışmış vaziyette, ilerlemeniz çok zor görünüyor fakat yeni açılan ara yollar ise bomboş ve kimsenin bu yoldan haberi yok, işte bu breadcrumb eklentisi google sıralamalarındaki sıkışık trafikten sizi kurtarıp ara yoldan sizi hedefe götürecek googlenin de tavsiye ettiği bir eklenti.

Peki breadcrumb eklentisi nedir ?

Google aramalarında başlığın alt tarafında görünen yazı linkinizi anlaşılabilir hale getiren ve hiyerarşik bir yapıya dönüştüren eklentiye breadcrumb navigasyon eklentisi denir.Normal şartlarda blogunuzda yada sitenizde google breadcrumb navigasyon eklentisi yok ise google aramalarında başlık altında yazı linkiniz http://www.blogokulu.org/2012/10/blogger-blog-nasil-acilir-blog-ac.html şeklinde görünür.Bununla ilgili olarak aşşağıdaki resmi inceleyelim;


Google breadcrumb eklentisini blogunuza eklediğinizde ise google aramalarında başlık altında yazı linkiniz Ana sayfa » Etiket Linki » Başlık şeklinde hiyerarşik bir yapıda ve daha anlaşılabilir bir şekilde görünecektir.Blogger breadcrumb eklentisini sitesine uygalamış bir bloggerin aramalarda nasıl göründüğünü tam olarak anlamak için aşşağıdakidemo görünüm butonuna tıklayın ve aramalarda breadcrumb eklentisinin etkisini canlı olarak görün.

DEMO GÖRÜNÜM

Blogger Breadcrumb eklentisini blogunuza uygulamak için;

1-Blogger Hesabınızla giriş yapın.( kodlar içerisinde oynama yapacağımızdan her ihtimale karşı blog şablonumuzun yedeğini almanızı tavsiye ederiz (blogger yedek alma))
2-Kumanda Paneline>Şablon>Htmlyi Düzenle yolunu takip ediyoruz.

3-Açılan Kod sayfasında Ctrl+F yardımı ile aşşağıdaki kodu aratıp bulalım.

<b:includable id='main' var='top'>

4-Bulduğumuz kodun yerine aşağıdaki kodu kopyalayıp yapıştıralım.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Anasayfa</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Anasayfa</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Anasayfa</a></span> &#187; <span>Etiketi yok</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span>Arşiv <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span>Tüm Yazılar</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

5-Buraya kadar olan kısmı kaydedelim bir hata uyarısı almıyorsak 6. adıma geçelim, ama hata uyarısı alırsak Ctrl+Z ile yaptığımız işlemi geri alalım ve 3. maddeden başlayarak işlem basamaklarını daha dikkatli tekrardan uygulayalım.

6-Ctrl+F yardımı ile kodlar içerisinde aşşağıdaki kodu aratıp bulalım.

]]></b:skin>

7-Aşşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştıralım.

.breadcrumbs {
font-size :13px;
font-style :italic;
border : 1px solid #d1d1d1;
border-radius : 5px;
margin-bottom :5px;
padding : 8px 6px 10px 6px;
}

8-Şablonu Kaydet butonuna basalım ve çıkış yapalım.

Blogger breadcrumb eklentisini 8 basamakta blogumuza uygulayarak, blogumuza  faydalı olacak bir blogger seo ayarı yapmış olduk.Eklenti etkisini hemen göstermeyebilir, bir müddet bekliyelim ve sitemizdeki bir linki kopyalayıp google aramalarında nasıl göründüğünü kontrol edelim.Eğer bir sorun yaşarsanız yazı altındaki yorum kısmına yada iletişim kısmından bizimle irtibata geçebilirsiniz.

Blogger seo ile ilgili diğer yazımızımızı okudunuz mu? : Blogger Seo

2 Ekim 2014 Perşembe

Blogger Limitleri

Aslında doğru taktik ve strateji uygulanırsa bloggerda sınır diye birşey yok, uçsuz bucaksız bir alem.Ancak herbir blog için belirli çerçevelerde sınırlamalar var tabi bunu şöyle maddeler halinde açıklamaya çalışalım;
Tek bir Blogger hesabının neler içerebileceği hakkında birtakım bilgiler;
Blog Sayısı: Hesap başına en çok 100 blogunuz olabilir.
Yayın Sayısı: Bir blog'da sahip olabileceğiniz yayın sayısı konusunda bir sınırlama yoktur. Arşiv yayınlayıp yayınlamadığınızdan bağımsız olarak, yayınlarınızın tümü (siz elle silmedikçe) hesabınızda kaydedilir.
Yayınların Boyutu: Tekil yayınlar için belirli bir boyut sınırı yoktur. Ancak çok büyük boyutlu yayınlar sayfa boyutu sınırını zorlayabilir. (Bir sonraki maddeye bakın.)
Sayfaların Boyutu: Tekil sayfaların (blog'unuzun ana sayfası veya arşiv sayfalarınız) boyutu 1 MB ile sınırlıdır. Bu sınır birkaç yüz sayfa metin için yeterli olacaktır, ancak blog'unuzun ön sayfasında yüzlerce yayın listeliyorsanız bu durum soruna neden olabilir. Bu sınıra ulaşırsanız "006 Lütfen Blogger Destek birimine ulaşın" şeklinde bir hata mesajı görürsünüz. Ana sayfanızdaki yayın sayısını azaltarak bu sorundan kaçınabilirsiniz. Bu sayede sayfanızın daha hızlı yüklenmesi gibi bir ek avantaj da elde edersiniz.
Yorum Sayısı: Bir yayında herhangi bir sayıda yorum bulunabilir. Arşivlenen yayınlarda olduğu gibi, blog'unuzda yorumları gizlemeyi tercih ederseniz önceden var olan yorumların tümü hesabınızda kayıtlı olarak kalacaktır.
Resim Sayısı: Picasa Web ile ortak halde 1 GB'a varan toplam depolama alanı söz konusudur. Google+'ya geçiş yapmışsanız fotoğraflarınız Google+ Fotoğraflar'da depolanır. Burada Gmail ve Drive ile ortak halde 15 GB depolama alanınız bulunur.
Resimlerin Boyutu: Blogger Mobil üzerinden resim yayınlıyorsanız resim başına 250 KB'lık bir sınır söz konusudur.
Ekip Üyeleri: Blog başına 100 üye sınırı vardır.
Etiket Sayısı: Blog başına en fazla 2000 ve yayın başına 20 benzersiz etiket oluşturulabilir.
Blog Açıklaması: HTML'siz, 500 karakterle sınırlıdır. Ek karakterler veya HTML ilave edilmesi önceki bir ayara geri dönülmesine neden olabilir.
"Hakkımda" Profil Bilgisi: Maksimum 1200 karakterle sınırlıdır.
Profil İlgi Alanları ve Favoriler: Her alan için maksimum 2000 karakterle sınırlıdır.
Blogları içe aktarma: Blog içe aktarmaya ilişkin herhangi bir dosya boyutu sınırı yoktur. Günlük olarak yapılabilecek içe aktarma işlemi sayısında sınırlama olabilir.
Not: Durdurulan BlogSpot Plus hizmetinin kullanıcıları için geçerli ayarlar biraz daha farklıdır. Bu hesaplar tam FTP erişimi içerdiğinden, sahip oldukları yükseltme türüne bağlı olarak ya 25 MB ya da 100 MB sınırı geçerliydi. Bu tür durumlarda, size ayrılan alanı resimlerle veya başka dosyalarla doldurursanız yeni yayınlar yükleyemeyebilirsiniz. Bu sorunu gidermek için hesaptaki kullanılmayan dosyaları kaldırarak daha fazla yer açmanız gerekir.

25 Temmuz 2014 Cuma

Blog Nasıl Açılır?(Videolu Sesli Anlatım)

Sizde blog dünyasına girip birşeyler yazıp çizmek istiyorsanız, blogger üzerinden blog nasıl açabilirim? bloggerden blog açmak istiyorum, ne yapmam lazım? diyorsanız doğru adrestesiniz dünyaca ünlü ilk blog sağlıyıcısı Blogger'i Google'ın satın alması ile önlenemez bir yükselişe geçti ve bayağı bir üyesi olduğu biliniyor.Türkçe desteği , ücretsiz Domain barındırma imkanı bloggeri cazip kılan seçeneklerin başında geliyor.
(Eğer blog açacaksanız Bloggerden açmanızı  şiddetle öneririm görebileceğiniz en iyi blog servislerinin en başlarında yer alır).Blog açmaya karar verdiyseniz ki bu yazıyı okuyarsanız karar vermişsiniz demektir; sizin için çektiğimiz ve düzenlediğimiz, sesli olarak anlatım yaptığımız, bloggerde blog nasıl açılır adlı videomuzu izlediğinizde sizde kendinize özgü bir blog açabilir ve paylaşmak istediklerinizi blogunuza yazıp, blog yazarlığına ilk adımı atabilirsiniz.Bu konu ile ilgili sorunuz olursa ister konu altında bulunan yorumlardan istersenizde iletişim kısmından bize sorabilirsiniz.
BLOG NASIL AÇILIR?VİDEOLU ANLATIM:

24 Temmuz 2014 Perşembe

Blogger Yukarı Çık-Sayfa Başına Dön Butonu

Uzun içerikleri olan yada yayınladığı yazılar çarşaf liste gibi uzayıp giden bloglarda ziyaretçi maus tekeri  ile sabırla  aşşağılara kadar inebilir, ama aynı sabrı gösterip yukarı çıkma eziyetine katlanmadan blogunuzu terkedebilir.Blogunuza ekliyeceğiniz basit bir yukarı çık buton ile ziyaretçileri bu çileden kurtarmak sizin elinizde. Şimdilerde birçok kaliteli sitede kullanılan "sayfa başına dön" yada "yukarı çık" butonu olarak adlandırılan bu eklentiyi en basite indirgeyerek sizlerin kullanımına sunuyoruz.Yukarı Çık butonunu en basit yöntem olan Gadget Ekleme yöntemi ile blogumuza ekliyeceğiz.
Sayfa Başına Dön (Yukarı Çık) Butonunu eklemek için;
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip ediyoruz,aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıp kaydediyoruz.Yukarı Çık (Sayfa Başına Dön) butonu klullanıma hazır.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.blogokulu.blogspot.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="http://4.bp.blogspot.com/-mwSVtgAlvsI/T1uawwxUkWI/AAAAAAAABFs/iU9OdqgUQkE/s1600/hb-arrow-up.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
    controlattrs: {offsetx:5, offsety:25}, //offset of control relative to right/ bottom of window corner 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport) //if control is positioned using JavaScript 
            this.$control.css({opacity:0}) //hide control immediately after clicking it 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                .attr({title:'Sayfa Başına Dön'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>
Kod içerisinde kırmızı renkle belirttiğimiz link,yukarı çık butonuna ait resmin linki,buraya kendi tasarladığınız bir yukarı çık butonuna ait resim linki ekleyerek blogunuza uygun bir tasarım yaratabilirsiniz.
offsetx:5
offsety:25 değerlerini değiştirerek yukarı çık butonun blogunuzdaki konum ayarlamasını yapabilirsiniz.
offsetx;x düzlemi üzerinde (yatay),
offsety;y düzlemi üzerinde (dikey) konum ayarlaması yapılabilir.

Blogger sabit sayfa oluşturma

Blogger sabit sayfalar yazı sayfalarından farklı olarak anasayfanızda ve arşiv sayfanızda görüntülenmeyen belirli sabit içeriği blogunuza eklemek için kullanılır.Hakkımda, iletişim, reklam gibi içerikleri sabit sayfalar için örnek verebiliriz.Normal yazı sayfalarından ne farkı var derseniz, yukarıda da kısaca bahsettiğim gibi sabit sayfalar blogunuzun anasayfasında çıkmazlar ve arşivinize de eklenmezler.Bu sayfalara etiket ekleyemezsiniz.Bunun yanında 30 adet farklı sayfa oluşturabilirsiniz.
Eğer siz de blogunuzda bu türden yazılara yer vermek istiyorsanız sabit sayfalar ile bu işlemi tamamlayabilirsiniz.Peki blogger sabit sayfalar nasıl oluşturulur?
  • Blogger hesabımıza giriş yapıyoruz.
  • Sol taraftaki menüden sayfalar ı tıklıyoruz.
  • Açılan menüden  yeni sayfa butonunu tıklıyoruz.
blogger-sabit-sayfa-olusturma
Bu işlemleri tamamladığınız zaman alışık olduğunuz yazı editörünü göreceksiniz.Sayfanızda nasıl bir içerik olmasını istiyorsanız onu buraya yazın.İçerik ve başlık işlemini tamamladıysanız bir kaç ipucundan bahsetmek istiyorum.Şöyle ki :
Blog yazarları genellikle hakkımda, iletişim ve reklam gibi sabit sayfalarda okuyucuların yorum yapmasını istemeyiz.Eğer siz de sayfanızdaki içerik hakkında yorum yapılmasını engellemek istiyorsanız sağ tarafta seçenekler kısmını göreceksiniz.Tıkladığınız zaman okuyucu yorumlarına izin vermeyi buradan kapatabilirsiniz.
blogger-sabit-sayfa-ayarlari
Blogger sayfalar için henüz özel url oluşturma seçeneği yok.Peki sayfanız için özel url nasıl oluşturacaksınız?Blogger başlığa göre url nizi şekillendiriyor.Bu yüzden siz de sayfa url nizin nasıl olmasını istiyorsanız yazı başlığına ilk onu yazın ve yazıyı güncelleyin.Daha sonra sayfayı düzenleyerek başlığı istediğiniz şekilde değiştirebilirsiniz.
Örnek : Eğer “Poyraz Hakkında” diye sayfa oluşturmak istiyorsanız ilk olarak başlığa Hakkimda yazın.Url nizin …/p/hakkimda şeklinde olduğunu göreceksiniz.Daha sonra yazı başlığını değiştirerek bu sorunu da çözebilirsiniz.
Sayfanızı oluşturduktan sonra aldığınız url yi blogunuzun herhangi bir yerinde gösterebilirsiniz.

Yazar Hakkında:
Bu yazi; blogger ipuçlari, windows uygulamalari, SEO ve sosyal medya konularinda içerik üreten Poyraz sahin tarafindan yazilmistir. Yazarin diger yazilarini Ehl-i Blog’da okuyabilirsiniz.

11 Mayıs 2014 Pazar

Sitene Google Harita Ekleme-Adres Ekleme

Blogger üzerinden ticaret yapıp satış yapan bir çok insan vardır, işyerlerini yada konumlarını uzun uza tarif etmektense google maps yardımıyla konumunuzu yada adresinizi harita üzerinden insanlara direkt olarak tarif edebilir ve gösterebilirsiniz.Yada beraber yazıştığınız bloggerle bir buluşma adresi ayarlayıp bu adresi blogunuzdan tam nokta olarak harita üzerinden davetiye yazınızla birlikte yayınlayabilirsiniz.Biz blogunuza haritalı adres eklemeyi anlatalım kullanımı size kalmış, nasıl kullanmakisterseniz?

Ben web işinden anlamam nasıl yapacağım ben beceremem demeyin, öyle bir anlatacağız ki bunu herkes kolaylıkla yapabilecek.Yapamayan olursa da elimizden geldiğincd yardımcı olacağız.Sitesine yada bloggere google harite eklemek isteyenler bundan sonrasını dikkatle okusunlar:

1-Google Mapsi ziyaret ediyoruz. Siteyi ziyaret ettiğimizde aşşağıdada gördüğümüz resimdeki gibi direk türkiye haritasının olduğu bir pencere açılacak.

2-Açılan bu pencerede yukarıda gösterdiğimiz adres arama kutucuğuna kendi adresimizi,yani tarif edeceğimiz,sitemize harita ile ekliyeceğimiz adresi yazıyoruz.
Örnek olarak ben bir okul ismi yazacağım, okulun ismi çaldağ ilkokulu olsun ve bu okulu bulup haritadaki yerini yazının sonuna ekliyeceğim.
Adres arama kısmına: Çaldağ ilköğretim okulu yazdık ve mercek işaretine tıkladık.Aşağıdaki resimde de gördüğümüz gibi adresimizi bulduk.
Adresimizin doğruluğunu teyid ettikten sonra  haritada üzerine adresimizin bulunduğu yere birkere tıklyoruz ve aşşağıdaki gibi işaretin çıkmasını sağlıyoruz.İşareti harita üzerinde gördükten sonra yukarıdaki resimde gösteridğimiz google maps ekranının sağ alt köşesinde bulunan 3 nolu kısımdaki dişli çark simgesine tılıyoruz.

3-Dişli çark simgesine tıkladığımızda açılan menü içerisinde Haritayı paylaş ve yerleştir kısmına tıklıyoruz.
4-Haritayı Paylaş ve yerleştire tıkladığımızda bir pencere açılacak bu pencerede de Haritayı yerleştir sekmesini tıklıyoruz.


5-Haritayı yerleştir sekmesine tıkladığımızda aşşağıdaki gibi birpencere açılacak ve kutucuk içeriisne aldığımız yerdeki iframe kodunu kopyalıyacağız.Aynı zamanda ekliyeceğimiz haritanın boyutlarını ayarlamayı da buradan yapıyoruz.Sol tarafta bulunan boyut ayarlama penceresinden sitemize yerleştireceğimiz yere uygun bir boyut seçiyoruz ve kodu kopyalıyoruz.
6-Kopyaladığımız kodu blogumuzda her hangi bir yazı içerisinde HTML moddayken ekliyoruz.



Gadget olarak eklemek istiyorsak da Yerleşim>Gadget Ekle>Html Javascript yolunu takip edip gadget olarak ekliyebiliyoruz.

Aşşağıda Çaldağ İlöğretim Okulu adresini Haritalı Olarak Blogumuza Ekledik.

Yukarıda yazdığımız yazıyı okuyarak sizde blogunuza google haritalı adres ekliyebilirsiniz.

2 Şubat 2014 Pazar

Blogger Forum Sayfası Ekleme

Blogunuza gelen ziyaretçileri blogunuza bağlayacak ve onların da konu açabilecekleri kendilerinden birşeyler yazabilecekleri blogger forum ekleme eklentisi ile sizleri tanıştırıp blogunuzu  daha zengin ve çeşitliliğin olduğu bir blog haline getireceğiz. Ziyaretçileriniz kendi aralarında tartışılacak konular açacak, yorumlar ve yazılar yazacak bu sayede blogunuza bağımlı bir topluluk oluşacak, kulağa hoş geliyor öyle değil mi? :) Bunu nasıl yapacağım? çok zor!!! ben kodlardan anlamıyorum,benim hiç bilgim yok diyen, okuması yazması olan herkes, bloguna forum ekleme ile ilgili yazdığımız bu yazıyı okuduğunda blogger bloguna forum eklemiş olacak, ekleyemeyen arkadaşlarada eğer isterler ise yardımcı olacağım.Anlatıma başlamadan önce blogger forum eklentisi nin nasıl göründüğüne bakmak isterseniz demo görünümden bakabilirsiniz.



Blogger aracılığıyla yapmış olduğunuz blogunuza yada sitenize forum sayfası ekleme:
1-Blogger hesabımızla giriş yapıyoruz.
2- Sayfalar butonuna tıklayıp yeni bir sayfa açıyoruz.
3-Yeni açtığımız sayfanın başlık kısmına FORUM diye yazıyoruz ve HTML modunu açıyoruz.
4- Nabble.com sitesine giriş yapıp gerekli bilgileri dolduruyoruz.
5-Kayıt işlemi başarılı bir şekilde gerçekleştiği zaman aşşağıdaki gibi bir pencereyle karşılaşacaksınız.
6- Yukarıdaki resimde (5. maddede) kırmızıyla BLOG OKULU yazan yerin hemen üstünde SONRAKİ ADIMA GEÇ butonu bulunmakta, bu butona tıklıyoruz.Butona tıkladığımızda bir kod çıkıyor, bu kodu kopyalıyoruz.
7-Kopyaladığımız kodu 3. adımda açık bıraktığımız FORUM başlıklı sayfamıza HTML modundayken yapıştırıyoruz ve ardından buradaki YAYINLA butonuna tıklıyoruz.
8-Bloggerden oluşturduğumuz bloga forum sayfası eklemiş olduk böylece.Bundan sonra gelsin yorumlar.
Gördüğünüz gibi forum sayfanız artık blogunuzun içinde çıkıyor.Forum sayfanıza Ana Sayfadan Link vermeyi unutmayın Menülerin içine Forum diye yeni bir menü ekleyin ki ziyarteçileirniz Blogunuzda bir Forum sayfası olduğunu anlasınlar yada forum sayfanızı bulabilsinler.
Sorularınızı yorumlar kısmından sorabilirsiniz.Teşekkürler...