Blogger Meta Güncel Başlık Etiketleri

today Ağustos 09, 2018 bubble_chart Yorumlar
Blogger Meta Etiketlerini Yapılandırma

Bir süre ünce Blogger veri konumlandırma etiketlerini güncelledi. Güncellenen veri komlandırma etiketleri daha kısa ve kullanışlı. Veri konumlandırma etiketleri, her sayfanın (blog başlığı ve yayın başlıklarının) ayrı ayrı görüntülenmesini sağlar.


Çoğu Blogger / Blogspot sitelerinin tema kodlarında meta etiketleri ve veri konumlandırma etiketleri ağaşıdaki kodlara benzer durumda.

Meta Etiketleri
<b:if cond='data:view.isHomepage'>
<title><data:blog.title/></title>
<b:elseif cond='data:view.isPost or data:view.isPage or data:view.search.label'/>
<title><data:blog.pageName/></title>
<b:elseif cond='data:view.search.query'/>
<title><data:view.search.resultsMessage/></title>
<b:elseif cond='data:view.search and !data:view.search.label and !data:view.search.query'/>
<title><data:blog.title/></title>
<b:elseif cond='data:view.isArchive'/>
<title><data:view.archive.rangeMessage/></title>
<b:elseif cond='data:view.isError'/>
<title>404 Sayfa bulunamadı!</title>
</b:if>

Daha spesifik bir meta etiketleri oluşturmak için, berlirli olan veri konumlandırma etiketlerini aşağıdaki meta etiketlerinde olduğu gibi yapılandırabilirsiniz.

Yapılandırılmış Meta Etiketleri
<b:if cond='data:view.isSingleItem'>
<title><data:blog.pageName/></title>
<b:elseif cond='data:view.isHomepage'/>
<title><data:blog.title/></title>
<b:elseif cond='data:view.search.label'/>
<title><data:blog.pageTitle/></title>
<b:elseif cond='data:view.search.query'/>
<title><data:view.search.resultsMessage/></title>
<b:elseif cond='data:view.search and !data:view.search.label and !data:view.search.query'/>
<title><data:blog.pageTitle/></title>
<b:elseif cond='data:view.isArchive'/>
<title><data:view.archive.rangeMessage/></title>
<b:elseif cond='data:view.isError'/>
<title>404 Sayfa bulunamadı!</title>
</b:if>

Blogger meta ve veri konumlandırma etiketleri hakkında görüşlerinizi, önerilerinizi ve sorularınızı yorum formundan bize iletebilirsiniz.

Blogger Sıkça Sorulan Sorular Eklentisi

today Ağustos 09, 2018 bubble_chart Yorumlar
Blogger Sıkça Sorulan Sorular Sayfası Oluşturma

WordPress ve web sitelerinde karşılaşmış olduğunuz sıkça sorulan sorular sayfa eklentisi ile blog sitelerinde de sıkça sorulan sorular sayfası oluşturmak için kullanabileceğiniz basit kodlama ile oluşturulmuş ve harika bir tasarımı olan eklentiyi paylaşacağım.


Blog yazılarımın bir çoğunda blogcular için, blog sitelerinde kullanılacak olan eklentilerin blog sitesine ne kadar faydalı, ne kadar zararlı? olduğunu tartışmadan blog sitesine eklememelerini önerdim. Hatta bazı eklentileri harici komut dosyası olmadan CSS3 ile oluşturdum ve paylaştım. Buradaki amacımız, blog sitelerinin performansını etkileyecek her türlü eklentinin faydalarını ve zararlarını hakkında bilgi vererek blog sitelerinin daha düzenli çalışmasını sağlamaktır.

Bu yazımızda paylaşacağım eklenti de herhangi bir harici komut dosyası oluşturmadan ve blog sitesinin performansını etkilemeden çalışacak. Böylece, blog sitelerinde kusursuz bir sıkça sorulan sorular sayfası oluşturabileceksiniz.

Ön İzleme

Blog sitenizde sıkça sorulan sorular sayfası oluşturmak için aşağıdaki adımları takip edin.

Blogger Sıkça Sorulan Sorular Eklentisi Kurulumu


Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın ve aşağıdaki adımları uygulayın.

Birinci adım: Aşağıdaki CSS kodlarını tema editör sayfanızda bulunan </head> kodunun bir satır üzerine ekleyin.

CSS Kodu
<style type='text/css'>
/*<![CDATA[*/
.gs_list_box_container{border:solid 5px #dad8d7;box-sizing:border-box}
.gs_list_box_container *{box-sizing:border-box}
.gs_card_header{display:block;width:100%;background-color:#f2f2f2;line-height:40px;height:40px;font-size:18px;font-weight:bold;cursor:pointer;border-bottom:solid 1px #ddd;padding:0 20px;position:relative}
.gs_card_body{padding:0;display:none}
.gs_card_body a,.gs_card_body p{background-color:#fff;color:#333;display:block;width:100%;font-size:16px;margin:0;padding:10px 20px;border-bottom: 1px solid #ddd}
.gs_card_body a{font-style:italic;text-decoration:none;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.gs_card_body a:hover{background-color:#eee;color:#f08221;}
.gs_card_arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAIVBMVEVHcEx4WgVVQAMcFQEeFgF3WARYQgNWQAN6YAMuJAFjSgD0PZHsAAAAC3RSTlMANsD7+jq6vSbyH6nxLOIAAABRSURBVCjPzc9BDoAwCETRAYq2vf+BFWOIkelaZ/lfWAB8ub7KY2NdB6QR0SZgcnUidy+SPWSn/RRLUZPnecqrp5QOeIia16fclPYQ3oE58ZMdOgEBCuqhN+oAAAAASUVORK5CYII=) no-repeat center;width:24px;height:24px;position:absolute;display:block;right:20px;top:10px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background-size:16px}
.gs_active .gs_card_arrow{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.gs_active .gs_card_header{color:#f08221}
.gecmis-sorular-menu li a{font-size:14px}
/*]]>*/
</style>

İkinci adım: Aşağıdaki javaScript kodunu tema editör sayfanızda bulunan </body> kodunun bir satır üzerine ekleyin.

jQuery Kodu
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$(".gs_active .gs_card_body").slideDown(),$(".gs_card_header").click(function(){var s=$(this).parent().find(".gs_card_body");"block"==s.css("display")?(s.slideUp(),$(this).parent().removeClass("gs_active")):($(".gs_list_box_container .gs_card").removeClass("gs_active"),$(this).parent().addClass("gs_active"),$(".gs_card_body").slideUp(),s.slideDown())})});
//]]>
</script>

Yukarıdaki adımları tamamladıktan sonra tema editör sayfanızı kaydedin.

Üçüncü adım: Blogunuzun kumanda panelinde bulunan Sayfalar sekmesine tıklayın. Yeni sayfa oluştur sekmesine tıklayın ve sıkça sorulan sorular başlıklı sayfanızı oluşturmak için, aşağıdaki HTML kodu sayfa editör sayfasının HTML formatına ekleyin.

HTML Kod
<div class="gs_list_box_container">
<div class="gs_card gs_active">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<a href="#" title="Bağlantı başlığı" target="_blank" rel="nofollow noopener">Bağlantı başlığı</a>
</div>
</div>
<div class="gs_card">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<p>İçerik</p>
</div>
</div>
<div class="gs_card">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<p>İçerik</p>
</div>
</div>
<div class="gs_card">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<p>İçerik</p>
</div>
</div>
<div class="gs_card">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<p>İçerik</p>
</div>
</div>
</div>

HTML kod içerisinde başlık ve içerik bölümü yer almaktadır. Soru başlıklarını ve içerik metnini kod içerisinde belirtilen yerlere ekleyin. HTML kod içerisinde bağlantı kodları da paylaşmak için kod içerisine bir bağlantı kodu ekledim. Bağlantı kodunu tercih durumuna göre kullanabilirsiniz, ancak blogunuza ait bağlantıları eklerken bağlantı kodu içerisinde bulunan "rel='nofollow noopener'" kodu kaldırın.

Blogger sıkça sorulan sorular eklentisini farklı menü ve sayfalarınızda da kullanabilirsiniz. Tema editör sayfasına eklemiş olduğunuz CSS ve javaScript kodu sayesinde yukarıdaki HTML kodu istediğiniz gibi tüm blog yayınlarında kullanabilirsiniz.

Bu yazımızda paylaşmış olduğumuz eklenti ve bilgiler hakkında görüş ve sorularınızı yorum formundan bize iletebilirsiniz.

Blogger Sayfa URL'si Paylaş Eklentisi

today Ağustos 08, 2018 bubble_chart Yorumlar
Blogger URL Paylaşım Eklentisi

Blog sayfalarını paylaşmak için bir çok sosyal medya butonu bulunmakta, ancak blog sayfalarının URL'sini paylaşmak için pek fazla eklenti bulunmamakta. Bu yazımızda blog sayfalarınızda bulunan sosyal medya paylaşım butonlarının hemen altında yer alan yani ziyaret ettiğiniz sayfanın URL'sini kopyalamak ve paylaşmak için URL paylaş eklentisini paylaşacağım.


URL paylaş eklentisi şuan blog sitemizde de kullandığımız gibi tüm sayfalarımızda bulunan sosyal medya paylaşım butonlarının altında bulunmaktadır.

URL paylaş klentisini blog sitenize eklemek için aşağıdaki adımları takip edin.

URL Paylaş Eklentisi Kurulumu


Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın ve aşağıdaki adımları uygulayın.

Birinci adım: Aşağıdaki CSS kodunu blogunuzun </style> yada ]]></b:skin> CSS dosyası içerisine ekleyin.

CSS Kodu
.post input.share_url{background:#f7f7f7;display:block;width:100%;padding:6px 10px;margin-top:20px;border:1px solid #e7e9ee;font-size:14px;color:#888;outline:0;cursor:pointer}

İkinci adım: Aşağıdaki input HTML kodunu blog yayınlarınızın altına gelecek şekilde en uygun yere ekleyin.

HTML Kod
<input class='share_url' expr:value='data:blog.url' onclick='document.execCommand(&apos;selectAll&apos;,false,null)' readonly='readonly' title='CTRL+C' type='text'/>

Yukarıdaki input HTML kodunu, blogunuzun tema editör sayfasında bulunan aşağıdaki kod aralığında en uygun yere ekleyin. Blog sitelerinin tema kodlaması birbirinden farklı olmasından dolayı, kodu eklemeniz gereken yer ile ilgili kesin bir bilgi paylaşamıyorum.

<b:includable id='post' var='post'>...</b:includable>

Yukarıdaki adımları tamladıktan sonra tema editör sayfasını kaydedin ve blog sayfalarınızı kontrol edin.

URL paylaş eklentisi ile ilgili görüş ve sorularınızı bize bildirmek için yorum formunu kullanabilirsiniz.

Sekmeli Modal Blog Eklentisi

today Ağustos 08, 2018 bubble_chart Yorumlar
Sekmeli Modal Eklentisi

Sekmeli modal eklentisi, blog tasarımlarında, sayfalarında ve yayınlarında kullanabileceğiniz tablo tarzında sekmeli efekti ve kayan efekti ile tasarlanmış olan eklentidir.


Bu eklenti, kullanıcılara her panel arasında yumuşak bir geçiş sağlayan CSS3 malzemelerin oluşturulmuştur. Eklenti navigasyonu, ikonik materyal dalga efekti tasarımı ile oluşturulmuş olup, kullanıcılara hangi sekmenin aktif olduğunu gösteren kayan kenarlık ile bilgi verir.

Eklentiyi blog sitenize kurmak istiyorsanız aşağıdaki adımları takip edin.

Sekmeli Modal Eklentisi Kurulum Bilgileri


Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın ve aşağıdaki adımları uygulayın.

Ön İzleme

Birinci adım: Aşağıdaki CSS kodlarını blogunuzun tema editör sayfasında bulunan </head> kodunun bir satır üzerine ekleyin.

CSS Kodu
<style type='text/css'>
/*<![CDATA[*/
[ripple]{
z-index:1;
position:relative;
overflow:hidden
}
[ripple] .ripple{
position:absolute;
background:#fff;
width:12px;
height:12px;
border-radius:100%;
-webkit-animation:ripple 1.6s;
animation:ripple 1.6s
}
@-webkit-keyframes ripple{
0%{
-webkit-transform:scale(1);
transform:scale(1);
opacity:0.2
}
100%{
-webkit-transform:scale(40);
transform:scale(40);
opacity:0
}
}
@keyframes ripple{
0%{
-webkit-transform:scale(1);
transform:scale(1);
opacity:0.2
}
100%{
-webkit-transform:scale(40);
transform:scale(40);
opacity:0
}
}
.blog-tabs{
z-index:15;
position:relative;
background:#fff;
width:600px;
border-radius:4px;
box-shadow:0 0 30px rgba(0,0,0,0.1);
box-sizing:border-box;
margin:100px auto 10px;
overflow:hidden
}
.blog-tabs-header{
position:relative;
background:#4285F4;
overflow:hidden
}
.blog-tabs-header .blog-tabs-border{
position:absolute;
bottom:0;
left:0;
background:#F4B142;
width:auto;
height:2px;
transition:0.3s ease
}
.blog-tabs-header ul{
display:flex;
flex-direction:row;
flex-wrap:wrap;
width:calc(100% - 68px)
}
.blog-tabs-header li{
transition:0.3s ease
}
.blog-tabs-header a{
z-index:1;
display:block;
box-sizing:border-box;
padding:15px 20px;
color:#fff;
font-weight:500;
text-decoration:none;
text-transform:uppercase
}
.blog-tabs-nav{
position:absolute;
top:0;
right:0;
background:#4285F4;
display:flex;
align-items:center;
height:100%;
padding:0 10px;
color:#fff;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.blog-tabs-nav:before{
content:'';
z-index:1;
position:absolute;
top:0;
left:0;
height:100%;
box-shadow:0 0 20px 10px #4285F4
}
.blog-tabs-nav span{
border-radius:100%;
cursor:pointer
}
.blog-tab-prev-icons{
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M15.41,16.59L10.83,12l4.58-4.59L14,6l-6,6l6,6L15.41,16.59z'/%3E%3Cpath fill='none' d='M0,0h24v24H0V0z'/%3E%3C/svg%3E%0A");
display:inline-block;
width:28px;
height:28px
}
.blog-tab-next-icons{
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z'/%3E%3Cpath fill='none' d='M0,0h24v24H0V0z'/%3E%3C/svg%3E");
display:inline-block;
width:28px;
height:28px
}
.blog-tabs-content{
position:relative;
padding:15px 20px;
transition:0.3s ease;
overflow:hidden
}
.blog-tabs-content:after{
content:'';
position:absolute;
bottom:-1px;
left:0;
display:block;
width:100%;
height:1px;
box-shadow:0 0 20px 10px #fff
}
.blog-tabs-content .blog-tab{
display:none
}
.blog-tabs-content .blog-tab.active{
display:block
}
/*]]>*/
</style>

İkinci adım: Aşağıdaki jQuery kodunu blogunuzun tema editör sayfasında bulunan </body> kodunun bir satır üzerine ekleyin.

jQuery Kodu
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var t=$(".blog-tabs-header .active").position();function e(){t=$(".blog-tabs-header .active").position(),$(".blog-tabs-border").stop().css({left:t.left,width:$(".blog-tabs-header .active").width()})}e();var a=$(".blog-tab.active").height();function i(){a=$(".blog-tab.active").height(),$(".blog-tabs-content").stop().css({height:a+"px"})}function s(){var t=$(".blog-tabs-header .active a").attr("blog-tab-id");$(".blog-tab").stop().fadeOut(300,function(){$(this).removeClass("active")}).hide(),$(".blog-tab[blog-tab-id="+t+"]").stop().fadeIn(300,function(){$(this).addClass("active"),i()})}i(),$(".blog-tabs-header a").on("click",function(t){t.preventDefault();var a=$(this).attr("blog-tab-id");$(".blog-tabs-header a").stop().parent().removeClass("active"),$(this).stop().parent().addClass("active"),e(),n=c.filter(".active"),$(".blog-tab").stop().fadeOut(300,function(){$(this).removeClass("active")}).hide(),$('.blog-tab[blog-tab-id="'+a+'"]').stop().fadeIn(300,function(){$(this).addClass("active"),i()})});var c=$(".blog-tabs-header ul li"),n=c.filter(".active");$("#next").on("click",function(t){t.preventDefault();var a=n.next();n.removeClass("active"),n=a.length?a.addClass("active"):c.first().addClass("active"),e(),s()}),$("#prev").on("click",function(t){t.preventDefault();var a=n.prev();n.removeClass("active"),n=a.length?a.addClass("active"):c.last().addClass("active"),e(),s()}),$("[ripple]").on("click",function(t){var a=$('<div class="ripple" />'),e=$(this).offset(),i=t.pageY-e.top,s=t.pageX-e.left,c=$(".ripple");a.css({top:i-c.height()/2,left:s-c.width()/2,background:$(this).attr("ripple-color")}).appendTo($(this)),window.setTimeout(function(){a.remove()},1500)})});
//]]>
</script>

Yukarıdaki adımları tamamladıktan sonra tema editör sayfasını kaydedin.

Üçüncü adım: Blog yayınlarınıza ve sayfalarınıza sekmeli modal eklentisi eklemek için, aşağıdaki HTML kodu sayfa veya yayın editör sayfanızın HTML bölümüne ekleyin.

HTML Kod
<div class="blog-tabs">
<div class="blog-tabs-header">
<div class="blog-tabs-border"></div>
<ul>
<li class="active"><a href="#blog-tab-1" blog-tab-id="1" ripple="ripple" ripple-color="#fff">tab 1</a></li>
<li><a href="#blog-tab-2" blog-tab-id="2" ripple="ripple" ripple-color="#fff">tab 2</a></li>
<li><a href="#blog-tab-3" blog-tab-id="3" ripple="ripple" ripple-color="#fff">tab 3</a></li>
<li><a href="#blog-tab-4" blog-tab-id="4" ripple="ripple" ripple-color="#fff">tab 4</a></li>
<li><a href="#blog-tab-5" blog-tab-id="5" ripple="ripple" ripple-color="#fff">tab 5</a></li>
</ul>
<nav class="blog-tabs-nav">
<span class="blog-tab-prev-icons" id="prev" ripple="ripple" ripple-color="#fff"></span>
<span class="blog-tab-next-icons" id="next" ripple="ripple" ripple-color="#fff"></span>
</nav>
</div>
<div class="blog-tabs-content">
<div class="blog-tab active" blog-tab-id="1">Metin ekle</div>
<div class="blog-tab" blog-tab-id="2">Metin ekle</div>
<div class="blog-tab" blog-tab-id="3">Metin ekle</div>
<div class="blog-tab" blog-tab-id="4">Metin ekle</div>
<div class="blog-tab" blog-tab-id="5">Metin ekle</div>
</div>
</div>

Yukarıdaki HTML kod içerisinde işaretlenmiş olan yerlere sekme başlığını ve sekme içerisinde görünmesini istediğiniz ilgili açıklama metnini ekleyin.

Sekmeli modal eklentisini, blogunuzun Sibedar'ında veya diğer bölümlerinde de kullanabilirsiniz. Sekmeler içerisine widget kodlarınızı (her sekme içerisinde bulunan elementleri doğru bir şekilde kullanarak) ekleyerek düzenli bir widget grubu oluşturabilirsiniz.

Eklenti hakkında görüş ve sorularınızı yorum formu üzerinden bize iletebilirsiniz.

Phorto Blogger Teması

today Ağustos 03, 2018 bubble_chart Yorumlar
Yüksek Kalite Ücretsiz Blogger Temaları

Phorto teması, çok amaçlı kullanıma sahip ve son derece temiz bir kodlama ile tasarlanmış temadır. Bu tema ile harika bir fotoğraf blogu oluşturabilir ve fotoğraflarınızı paylaşabilirsiniz. Bunun yanında seyahat, yemek, yaşam, spor ve kişisel bir blog da oluşturabilirsiniz.


Daha çok fotoğrafçı blogcuların, fotoğrafçılık, fotoğrafçı, fotoğraf indirme ve fotoğraf çekimi hakkında bir blog sitesi oluşturmak için muhteşem bir seçim olur.

Phorto Blogger Teması Özellikleri

Phorto teması mobil ekran görüntülerini, mobil uyumluk, hız ve diğer test sonuçlarını aşağıdaki özelliklerden kontrol edebilirsiniz.
ÖzelliklerKullanılabilirlik
Mobil Ekran GörüntüleriTestKontrol et
Yapısal Veri Test AracıTestKontrol et
Mobil Uyumluluk TestiTestKontrol et
Hız TestiTestKontrol et
IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, EdgeUyumlu
Arama Motoru Optimizasyonu (SEO)Evet
404 Hata SayfasıVar
Benzer Yayınlar Widget'ıVar
Hazır Reklam Widget'ıVar
Çoklu Açılır Menü ÖzelliğiVar
HTML5 & CSS3Tasarım
SEO UyumluEvet
Sosyal Paylaşım ButonlarıVar
Phorto blog temasını aşağıdaki ön izleme butonuna tıklayarak inceleyebilirsiniz.

Ön İzleme
İndir

Phorto teması ile ilgili kurulum, görüş ve sorularınız için yorum formundan bize ulaşabilirsiniz.

Blog Siteleri İçin Açılır-Kapanır Facebook Beğen Kutusu Oluşturma

today Ağustos 02, 2018 bubble_chart Yorumlar
Facebook Beğen Kutusu

Blogger sitelerinde Facebook popülaritesinin artmasıyla kullanım koşulları da her geçen gün artan talep üzerine blogcular için, açılır-kapanır Facebook beğen kutusunu paylaşıyoruz.

Facebook beğen kutusu, blog sitelerinin Facebook sayfalarının hem beğenme sayısını artırma hem de Facebook sayfasından blog takibinin artmasına yardımcı olan önemli bir eklentidir.

Facebook beğen kutusu çalışma sitemi, bilgisayarınızın imlecini buton üzerine getirdiğinizde basit jQuery sayesinde otomatik olarak açılır ve kapanır.


Facebook beğen kutusunu blog sitenize eklemek için aşağıdaki adımları takip edin.

Blogger Sitesine Açılır-Kapanır Facebook Beğen Kutusu Ekleme


Blogger hesabınıza giriş yapın ve eklemek istediğiniz blogun kumanda panelini açın ve aşağıdaki adımları takıp edin.

Birinci adım: Blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın ve aşağıdaki CSS kodunu blogunuzun </head> kodunun bir satır üzerine ekleyin.

CSS Kodu
<style>
/*<![CDATA[*/
#fb_like_box{display:block;padding:0;z-index:99999;position:fixed}
.fb_like_box_button{background-color:#3B5998;display:block;height:150px;top:50%;margin-top:-75px;position:absolute;right:-47px;width:47px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAACWCAMAAAB5PCEjAAAAvVBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9o6qWPAAAAPnRSTlMAG8ITUdoJoazyBTACgvoPt4top5ed3b7HsnjvfZZKYIVcbODTV3RDmpJwQDv49dgeZOkWzEYm4itNNeznj0ydlzQAAAO6SURBVFjD7ZjZlqpADEVRJkFEWpxQBOexHXHWrv//rFvFYIOtJDzcN8+DlGtta4VwKolw3EcfffSsgymblwz8FyGkAzDl4kPHAuWNc7G40d7zLfJXq6bwli+Rl9pm5Ad8Np5M3vDCPv9Qm3K3fL7OeBeRzxnlqhzHi/RaQeaf8pwB8KoUXG0UPzLqp2ZfpSvpfNhe6dUp2fYxLQiqGV16RU+FYp6E+dOLHNcl+mqMyImv/u/9pslie6/oxxfOn9ST7cXx5IOY/buE7P0MUv4HwTuE3HnGz4K8zwBeWtOtHfqRd0pLypcA/rud9KWL8ExMy3M23uQy8YaHqDmRqvZE/R9lje9VLcMwrKnrYXDh9Ah/14NxR4/fMPgDaYirO5EuJPvzVVrfTP0bXddg/z88TL1NGgBvBEcxqBR03UScx0oGvkYZO1xv6doCeDsWfwlxvoTYPRYQddabyXJUoyqyPN2gLCcxYc1c/GnWB1Rrqych8FbMcA3Y0f2EfQoQ7p2SflsAfC/o0FHVZWUXrOf3yfFOSJf/Qjzfgr+nVGdPytvB/gl6W8DzmfgWN2YVCxFP3+fbfqZ+AL7j13CpHuXTgZ6uf2YffEND+DnPSYMAXx/B51s1TZtTm7qi7PY2j62harlcRvlZPQhMF8dxLhchkvPW2NfX49Ul3W9/1EqrDy8kv+Onr/l9mh+GNb9/mewA7P21WdJS6mHUJOS0wGP+HMXqoYnwZ7Sn63sD9qdIZzFN4/gGoj5X/OO+HlLdCKJfFPVkIqcc4gZiEiB+k2ioFmxSrzRsL3WqZXtYKuPKOe9R8WUNd1au7rjVao23V9SJueYf0Q8PMJ4Y+HQwPVo+kU4RuuHFk/FHiP5LCnMmWUc8XznWhDoI/xQyzhsmZbrheozwP5vhd0Jus9nkDgNEgwz7naIoq/TCEyq3yzZvP/0BnoF+0OITt4wZIL47TbEuiuK+dtC4/yBvWy0wTfuoYcn9zZAyhvFRIj9zCC+LCX4HhfQ8b0PzIZuZV/aCadxOaywx/3cyzNtx/7tI/2fZP4h/QrUYK4j4haf89LPl/wZaItngEYZwb7/+maP86XZM5s9qBeNPVU18CfU+mpO4Xou+1tGCLosZ30dVMvKzjHzj/d8FWtoU5mSlrTyk599VCjVHJY1o6a/y3iYXKXWwVCt31rtqOVw9mezDoO9bRL3ayPH3D2C5nSTfnyyhfhfm07rOgx9WMbzIdj1aSH7VDZt074R5H2WdY8M92H+F5AsEocd99NFHcf0Dkss5RvCdtUEAAAAASUVORK5CYII=");background-repeat:no-repeat;overflow:hidden;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;border-top-right-radius:8px;border-bottom-right-radius:8px}
/*]]>*/
</style>

İkinci adım: Aşağıdaki jQuery kodunu blogunuzun tema kodlarının en alt kısımlarında bulunan </body> kodunun bir satır üzerine ekleyin.

jQuery Kodu
<script>
/*<![CDATA[*/
(function(md){
md(document).ready(function(){
var $dur = "medium";
md("#fb_like_box").css({left: -250, "top" : 100 })
md("#fb_like_box").hover(function () {
md(this).stop().animate({
left: 0
}, $dur);
}, function () {
md(this).stop().animate({
left: -250
}, $dur);
});
md("#fb_like_box").show();
});
})(jQuery);
/*]]>*/
</script>

Üçüncü adım: Aşağıdaki HTML kodu tema HTML kodlarının <body>...</body> etiketleri arasında sizin için en uygun bir yere ekleyin ve tema editör sayfasını kaydedin.

HTML Kod
<div class="fb_like_box">
<div id="fb_like_box" style="display:none;">
<div class="fb_like_box_button"></div>
<center><iframe src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/bloggereklentileri&amp;width=250&amp;height=230&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:250px;height:230px" allowTransparency="true"></iframe></center>
</div>
</div>

Yukarıdaki HTML kod içerisinde bulunan işaretli yere "bloggereklentileri" blogunuzun Facebook sayfası adını veya sayfa ID numarasını ekleyin.


Bu yazımızda Blog siteleri için açılır-kapanır Facebook beğen kutusu oluşturmayı paylaştık. Eklenti ile ilgili görüşlerinizi ve sorularınızı yorum formunu kullanarak bize iletebilirsiniz.

Blogger Nedir?

today Temmuz 25, 2018 bubble_chart Yorumlar
Blogger Nasıl Kullanılır? Tasarımları Nereden Bulunur?

Blogger adı üzerinde bir blog yayınlama sistemidir. Yani blog sahibi olmak isteyenlere bu imkanı sunan bir servistir. Blogger'ı çekici kılan özelliklerinin başında Google'a ait olması gelir. Google piyasada güven ve itibar sahibi olunca ve Blogger sistemi oldukça kolay kullanılan bir servis olunca tabii seviliyor.


Blogger Ne Amaçla Kullanılıyor?

Blogger genellikle çok ciddi olmayan blog projeleri,kişisel görüş günlükleri için kullanılır. Blogger kullanarak başarı elde etmek mümkündür, .com uzantılı sitelerden bir farkı yoktur. Her site için gereken neyse Blogger için de odur.

Blogger Nasıl Kullanılır? Tasarımları Nereden Bulunur?

Blogger.com adresinden blog açabilirsiniz. Bunun için bir Gmail hesabınız olmalıdır çünkü Google servisleri bildiğiniz gibi Gmail ile çalışır. Tasarım konusunda bir sorun yok, binlerce ücretsiz tasarım bulabilirsiniz. Aynı zamanda bizim bloğumuz sizlere özel Blogger içerikleri üretiyor zaten. Üst menüden gezebilirsiniz.

Blogger'in Avantajları Ne?

Hosting derdi yok. Hosting Google altyapısı tarafından sağlanmakta ve hal böyle olunca aylık ücret ödemiyorsunuz,tamamen ücretsiz. Blogger ile oluşturduğunuz bloğunuzu istediğiniz zaman .com'lu bir domaine yönlendirip .com uzantılı olarak kullanabiliyorsunuz. Eğer daha ciddi işler yapacağım diyorsanız WordPress sistemini araştırmalısınız.