Web Zekam: blogger

Bugun SizLere Yazı Altı Sosyal Paylaş Butonu PayLaşcam. Bu Güzel Sosyal Paylaş Ekletisi Blogunuzu Trafiğini, Artırmakda Sizlere Yardımcı oLcak Blogunuzun Sosyal Meida Duyulmasına Yardımcı Olcakdır.
Cok KoLay Bir Şekilde Uygulaya Bilceginiz Bu Eklenti. Aşagıda Gösterdim Yöntemi Yapdınız Takdirde
Calışacakdır. Simdi Uygulamamıza Başlayalım.

Adım Bloger Şablon Diyoruz.
Adım Şablonun Yedeğini Alıyoruz.
Adım Html Düzenle Diyoruz.
Ctrl F Yardımı İle Size Aşagıda Verdiğim Kodu BuLuyorsunuz.

<div class='post-footer-line post-footer-line-1'/>

Yukarda Ki Kodu Bulamazsanız, Bu Şekilde Aratın. post-footer-line-1 Buldugunuz Kodu Hemen Altına Gelcek Şekilde Size Aşağıda, Verdigim Kodu Ekleyiniz Ve Kaydet Diyip Cıkınız.

<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYCdNK5rBZUH0T5Wllny_ws_L0uIK-cll9538abo1cxOAfc7-usaAJe8_idSPt6IMVIcIxiBaxOX7QeeJWQC2OyenCNoRGtWMQR7H-ITNYBCPGi7j_EUiJ_fYH4lCler9TMPFPaG8YEo/s1600/helperblogger.com-sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;
}
 
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}
 
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}
 
.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='BloggerYazari' href='https://twitter.com/share'>Tweet</a>
            <script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            </script>
        </div>
        <div class='promote_facebook'>
       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                            </div>
        </div>
        <div class='promote_google'>
            <g:plusone annotation="none" size='medium'></g:plusone>
            <script type='text/javascript'>
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
            </script>
        </div>
    </div>
</b:if>

Yukarda Kırmızı İle Belirlediğim, Yere Kendi Tweet id Yazınız. İşlemimiz Bitmişdir, Güle Güle Kulanın.

Bugün Sizlere Sosyal PayLaş Eklentisi Paylaşcam. Güzel Görünüşün Olan Bu Eklenti Blogunuza Şık Bir Görünüm Katcak, Sosyal Medai Sitemiz Hem Tanıtım Acısından Hem Trafik Kazanmamız Acısından, Yararlı Olacakdır Sosyal Media Ne Kadar, Cok Takipciniz Olursa.
Sitenizin Ziyaretci Oranı Daha, Cok Olacakdır. Bu Güzel Eklentiyi Sitenize, KoLay Bir Şekilde Yükleyebilirsiniz. Aşagıda Sizlere Anlatcagım, Uygulamayla Kolay Bir Şekilde Sitenize Yükleye Bilirsiniz.

Eklentiyi blogunuzda kullanmaya karar verdiyseniz Blogger kumanda paneline girdikten sonra
Yerleşim > Gadge Ekle > HTML/JavaScript Gadget yolunu izleyerek aşağıdaki kodları eklemeniz yeterli.

<!--Blogger-yazari Metro Spinning Sosyal Takip Eklentisi-->
<div class="subscribe"> 
<ul> <li class="rss"><a href="http://feeds.feedburner.com/omerkrgl" target='_blank'><span></span>RSS</a></li> 
<li class="twitter"><a href="https://twitter.com/omrkrglu" target='_blank'><span></span>Twitter</a></li> 
<li class="gplus"><a href="https://plus.google.com/u/0/103310477518705734104" target='_blank'><span></span>Google Plus</a></li> 
<li class="facebook"><a href="https://www.facebook.com/omerkrgl" target='_blank'><span></span>Facebook</a></li> </ul> 
</div> 
<style> 
.subscribe li { 
display: block !important; 
margin-right: 0 !important; 
width: auto !important; 
} 
.subscribe li a span { 
display: block; 
height: 32px; 
left: 0; 
position: absolute; 
top: 2px; 
transform: rotate(-20deg); 
-webkit-transform: rotate(-20deg); 
transition-duration: 0.8s; 
transition-property: all; 
width: 32px; 
} 
.subscribe .twitter span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8e6BsEzIQUwdOLlm3QGPdriALMM6EIwnYwjKskSRUeovgu1MClJClmDlYQFNEDkhCbOEZ5BMdZpdjdxIeOcryQM_E8r8iPr6QT5_llCHluQrmJqoatz1J1sLRSlhbAgyK1Y4_BHUweF0/s1600/twitter_icon.png) no-repeat; 
} 
.subscribe .twitter a { 
background: #91C661; 
} 
.subscribe li a:hover span { 
transform:rotate(340deg); 
-webkit-transform:rotate(340deg);    
}    
ol, ul { 
list-style: none outside none; 
} 
.subscribe li { 
display: block !important; 
margin-right: 0 !important; 
width: auto !important; 
} 
.subscribe li { 
display: inline-block; 
margin: 0 20px 10px 0; 
position: relative; 
width: 200px; 
} 
.subscribe .rss span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlff1srXl5E_mN-krLIFyBxNULeyccpYRq3YjzGsZl5uc3WQYYHX1wl-Nl6i9Xups8NtGq7qxKG9IBhLI3RZKymA4TtF3rtgRiaYDwi3R5JeDi2kaxDC4QOqOeC1wrA0vuRr68qJZMlMg/s1600/rss-icon.png) no-repeat; 
} 
.subscribe .rss a { 
background: #F67F00; 
} 
.subscribe li a { 
color: #FFFFFF; 
display: block; 
font-family: verdana; 
font-size: 12px; 
padding: 10px 10px 10px 40px; 
text-decoration: none; 
font-weight: bold; 
} 
.subscribe li a span { 
display: block; 
height: 32px; 
left: 0; 
position: absolute; 
top: 2px; 
transform: rotate(-20deg); 
-webkit-transform: rotate(-20deg); 
transition-duration: 0.8s; 
-webkit-transition-duration: 0.8s; 
transition-property: all; 
width: 32px; 
} 
.subscribe li a:hover span { 
transform:rotate(340deg); 
-webkit-transform:rotate(340deg); 
}  
.subscribe .twitter span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8e6BsEzIQUwdOLlm3QGPdriALMM6EIwnYwjKskSRUeovgu1MClJClmDlYQFNEDkhCbOEZ5BMdZpdjdxIeOcryQM_E8r8iPr6QT5_llCHluQrmJqoatz1J1sLRSlhbAgyK1Y4_BHUweF0/s1600/twitter_icon.png) no-repeat; 
} 
.subscribe .twitter a { 
background: #91C661; 
} 
.subscribe .gplus span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJ-ODe_1AsDNuVEEG7UNKMV2XhaQUMtNLRiQKWkWwFi5scCoJZfPITSLM48mUSWirQlKh2uYiFjgme9LG-Haha0sI2uretW0WZrWQxKFPBCdL7st4yfi6Xe-ENZRKNESo1biZ7cmmSNI/s1600/googleplus.png) no-repeat; 
} 
.subscribe .gplus a { 
background: #D74D2F; 
} 
.subscribe .facebook span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv7QeOT1KXtknCKt1hiLdDMQnWtcpFlyCcZyTuExQdxtzP9f77LK8Kzv0VxFmRuUWtc2PVOQ__PPX4lm8EMrf-zkC7qUT2oMH2udPGrGQfHNeURHp82lJiShz14IE5VEaXOiRgxMRMn-Q/s1600/facebook-icon.png) no-repeat; 
} 
.subscribe .facebook a { 
background: #3B5998; 
} 
</style>
<!--http://blogger-yazari.blogspot.com/  Sosyal Takip Eklentisi-->

Kırmızı renkle gösterdiğim Blogger-Yazarı’a ait hesap adreslerinin yerine kendi adreslerinizi yazmayı unutmayın! işlemimiz Bitmişdir .

Blog Sayfalarınızı Hazırlarken Seo Düzenine Dikkat Edin

Merhaba arkadaşlar, bugün sizlere Blogger Seoüzerine bir konu hakkında paylaşımda bulunacağım. Malumunuz Google, Seo açısından çok önemli. Yapılan seo çalışmalarınıza bu konu ile bir yenisini eklemiş olacaksınız. SEO'nun faydalarını ziyaretçi sayınızla doğru orantılı olduğunu fark edeceksiniz.

Emek vererek, zaman harcayarak oluşturduğunuz konuların Google'da ilk sıralara yükselmesini hepimiz isteriz elbette, gelin şimdi bu konunun biraz daha detayına inelim.Ben şimdi sizlere tek tek bu özellikleri nasıl kullanabileceğinizi anlatmaya çalışacağım.

Sayfalarınız için yapacağınız SEO düzeni 6 maddede şöyle açıklanmış:

1. Link Bağlantılar Düzeni: Konu içerisinde link vermek. Eğer blogunuza yeni bir makale yazıyorsanız, mesela SEO üzerine yeni bir konu yazıyorsunuz daha önce SEO üzerine yazmış olduğunuz eski konunuzun linkini vererek makaleleri birbirine bağlamış olursunuz. Bu tür çalışmalarınızda mutlaka deneyin.

2. Keyword(Etiket) Yöntemi: Yazmış olduğunuz her makaleye uygun etiketleri düzenli girmeye çalışın. Ortalama 3 olarak belirtilen etiket kullanımına özen gösterin. Sitenizde her konuda etiket sayısı fazla ise arama motorları tarafında ban yemeniz söz konusu olabilir.

3. Başlık: Bloguza açacağınız konuya kesinlikle özgün ve konuya uygun bir başlık giriniz. Mümkün olduğu kadar kısa ve anlaşılır bir başlık kullanın. Çünkü kimse uzun bir yazı ile arama yapmaz. ( Bu konuyu dikkate almalısınız. )

4. H1 Kullanımı: Makale içinde kodlama yaparken H1 düzenine uygun kullanmaya çalışın. Konu içerisinde en az 1 adet H1 kullanınız.
5. İçerik Optimizasyonu: Şimdi ise konu başlığında belirttiğim gibi konularınız da ki SEO için, yapmanız gereken şey: makaleniz en az 120 kelime içermeli. Konu başlığını mümkün olduğu kadarıyla konu içerisindemutlaka belirtiniz. Son olarakta özellikle belirtmek istediğiniz konuları kalınlaştırarak veya renklendirin.
6. Resim Düzeni: Makalenizde resim kullanıyorsanız eğer mutlaka bir kullanın. Resmin ne olduğunu belirtin.

Benden şimdilik bu kadar, eğer sizinde bu konu üzerinde paylaşmak istedikleriniz olursa konuya ekleyebilirim.

Unutmayın: Görüşleriniz her zaman önemlidir. Bir başka konuda görüşmek üzere, kolay gelsin iyi bloglamalar.

Blogger Hesabına Gir.Ve Sonra Şablon>>Html'yi Düzenle>>

Bu Kodu Buluyoruz

]]></b:skin>

Ve Bu Kodu Bulduktan Sonra Bu Kodun Üstüne Hemen Şu Kodu Ekliyoruz.

]]>.post img {-webkit-transition:  -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform:  rotate(+2deg);-moz-transform: rotate(+2deg);}

.post img:hover {-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform:  rotate(-2deg);-moz-transform: rotate(-2deg);}

Kaydedip Çıkıyoruz

Blogger eklentilerine devam.Daha önce sliderlar (manşetler) paylaşmıştık, şimdiki ise sidebar kısmına ekleyebilmeniz için tasarlarmış basit bir o kadarda kullanışlı ve güzel bir slider.

Sidebar Kısmına Derken?

Blogunuzda-blogger altyapılı sitenizde görünen yayınlar kısmına eklenmeyen bir slider (manşet) olup yayınlar kısmının hemen yan (Genelde sağ tarafta, bazı temalarda sol bazılarında ise her 2 tarafta olabilir.) kısmında bulunan kısımdır. Bu kısıma eklemek istediğiniz eklentileri Blogger Admin panelinden Yerleşim > Gadget ekle yolunu izleyer ulaşabilir ayrıca bizim eklentimizide bur şekilde kullanabilirsiniz.

Nerede neden kullanmalıyım?

En iyisinden diyelim kullandığınız blogunuzdan ayrı başka bir blogunuz daha var ve bu blogunuzdaki paylaşımları kısa olarak gösterebilmeniz için çok uygun bir eklenti. Subdomain olarak açtığımfull.cyberadam.net'te paylaşılanları ziyaretçilerimize gösterebilmek için asıl sitemizde kullanıyoruz. Tabii ilerde bişey olur kaldırırız,tema değiştiririz göremeyebilirsiniz diye nasıl bir eklenti oladuğunu hemen alt kısımda gif resim olarak hazırladık.

Resimden anlaşıldığı üzere gayet kullanışlı sliderı eklemek için aşağıdaki yolu izleyiniz.

- Aşağıdaki kodu kopyalayıp Blogger Admin Paneli > Yerleşim > Gadget Ekle > HTML JavaScript ekleye tıkladıktan sonra kopyaladığınız kodu yapıştırın.


<link rel="stylesheet"
type="text/css"
href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>


<div id="slider-rotator"
class="slider-rotator loading"></div>


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript"
src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>


<script type="text/javascript">


makeSlider({


    url:
"http://siteadresi.blogspot.com" // Site adresinizi sol tarafa yazınız.


});


</script>

Düzenlemeniz Gereken Yerler: Mavi renkte : http://siteadresi.blogspot.com kısıma kendi site adresinizi yazınız. Kırmızı renkteki alanlarda bulunan linkleri tarayıcınızdan url kısmına yazıp kodları kopyalayarak sahip olduğunuz google drive hesabınıza yüklerseniz kodların silinme sorunu olmaz ve kendi güvencenizde kullanabilirsiniz. Kodları nasıl drive'a yükleyebilrim? Bu konuyu yazmaya gerek duymadım, bloghocam bu konuda bilgi vermiş ben sizi o konuya yönlendirmem yeterlidir. Gitmek için Tıklayın. Bir sonraki yazımızda görüşmek üzere. İlgili Aramalar: blogger sidebar slider, Blogger, automatic slider, blogger auto slider, Blogger Eklenti, eklenti,

1-SLIDEVIEWER

Siteye gitmek için tıklayın

2-SPACEGALLERY

Siteye gitmek için tıklayın

3-TN3 GALLERY

Siteye gitmek için tıklayın

4-S3 SLIDER

Siteye gitmek için tıklayın

5-IMAGEFLOW

Siteye gitmek için tıklayın

Video:

Hakkımda

Sosyal Medya