Merhaba Arkadaşlar.Bugun Blogger Sitelerinde Çok Gördüğümüz Üst Çubuk Eklentisini Nasıl Ekleyeceğimizi Anlatacağım...Bloğunuzu Özelleştirmek...
Blogger Resimlere Zoom Efekti Verme
Merhaba arkadaşlar bloguma yeni koyduğum eklentiyi sizinle paylaşmak istedim. Bir çok eklentiyi siz değerli takipçilerim ile paylaşmaya başlamıştım bugünkü yazımda ise sizlere blogumda aktif olarak kullandığım ve resimlerin üzerine gelince hafif büyüyen yani zoom efektinin nasıl yapıldığını ve nasıl kullanabileceğinizi anlatacağım. Kullanımı ve kurulumu oldukça basit olan bu eklenti ile sizde blogunuza zarif ve güzel bir görüntü sağlayacaksınız. Bu yazımda Blogger altyapısında olan bloglar için nasıl kullanıldığını anlatacağım.
Öncelikle Aşağıdaki Kodu CTRL+F Yardımı ile bulalım.
]]></b:skin>
Bulduktan Sonra Hemen Üstüne Aşağıdaki Kodları Ekleyelim.
.post-body img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.post-body img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Hepsi bu kadar arkadaşlar artık resimlerinizin üstüne gelindiğinde zoom efekti aktif olarak kendini göstermeye başlayacak, yapamayan arkadaşlar yorum formunu kullanırlarsa yardımcı olurum. Görüşmek üzere.
Merhaba arkadaşlar bloguma yeni koyduğum eklentiyi sizinle paylaşmak istedim. Bir çok eklentiyi siz değerli takipçilerim ile paylaşmaya başl...
Blogger Part Sistemi Kodu
Merhaba Arkadaşlar Bugun Film Siteleri İçin Sizlere Part Sistemi Kodunu Paylaşacağım. Kullanımı Basit Yayın İçine Kodu Yapıştıracaksınız.
İçerik Yazan Yerlere Filmin Oynatma Kodunu Koyacaksınız.
Yapamaynlar Olursa Yorum Yapsınlar.
Kod ALt Taraftadır.
<!-- Pcmerkez Tek Part Kodu -->
<style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 26px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 91%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 15px ;
height: 24px;
line-height: 21px;
border: 1px solid rgb(0, 0, 0);
border-left: none;
font-weight: bold;
background: rgb(0, 153, 255);
overflow: hidden;
position: relative;
width:64px;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li.active{
background: rgb(0, 255, 214);
border-bottom: 1px solid rgb(0, 0, 0);
}
.tab_container {
border: 1px solid rgb(29, 29, 29);
border-top: none;
clear: both;
float: left;
width: 91%;
background: rgb(22, 22, 22);
}
.tab_content {
padding: 0px;
font-size: 0.2em;
display: none;
}
#container {
width: 750px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
<div id="container">
<ul class="tabs">
<li class="active" rel="tab1">Tek Part</li>
<li rel="tab2">Alternatif</li>
<li rel="tab3">Fragman</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>İçerik
</p>
</div>
<div id="tab2" class="tab_content">
<p>İçerik
</p>
</div>
<div id="tab3" class="tab_content">
<p>İçerik
</p>
</div>
</div>
</div>
<!-- Pcmerkez Tek Part Kodu -->
Merhaba Arkadaşlar Bugun Film Siteleri İçin Sizlere Part Sistemi Kodunu Paylaşacağım. Kullanımı Basit Yayın İçine Kodu Yapıştıracaksınız. İ...
Blogger Devamını Oku Eklentisi
</head>Kodunu Bulup Hemen Üzerine Aşağıdaki kodları ekleyelim.
Daha Sonra şu Kodu Bulun <data:post.body/> ve bu kodu silip yerine aşağıdaki kodları yerleştirin..<!-- read more code-1 START -->
<style type='text/css'>
.readmore {
position: relative;
margin-top: 12px;
margin-right: 10px;
padding: 7px;
background: #333;
display: inline-block;
color: #fff;
cursor: pointer;
text-align: center;
-moz-border-radius: 5px;
border-radius: 5px;
float: right;
text-decoration: none;
}
a.readmore, a:hover.readmore, a:active.readmore {
text-decoration: none;
color: white;
}
</style>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 170;
img_thumb_width = 240;
</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){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
53
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://dl.dropbox.com/s/u9jqt4jp8p82341/no-preview.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- read more code-1 END -->
<!-- read more code-2 START -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='readmore' expr:href='data:post.url'>Devamını Oku</a>
</b:if>
</b:if>
<!-- read more code-2 END -->
Normalde manuel olarak yaptığınız yazının belli kısmının anasayfada görüntülenmesi işini otomatik yapar. Anasayfada yazılarınız sizin belirl...
Blogger Manşet alanı oluşturma
İlk Önce ]]></b:skin> Kodunu aratıp buluyoruz.Daha sonra aşağıdaki kodları bulduğumuz kodun hemen üstüne gelecek şekilde ekliyoruz..
.cssbeyin-manset {width: 960px; margin: 10px; auto;}
.cssbeyin-manset ul li {width: 217px;height: 130px;
position: relative;
float: left;margin-right: 10px;
overflow: hidden;
border: 2px solid #FAFAFA;
}
.cssbeyin-manset ul li a {width: 217px; height: 130px;
display:block; opacity: .75; filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
}
.cssbeyin-manset ul li a:hover {opacity: .99; filter: alpha(opacity=99);
-ms-filter: "alpha(opacity=99)";
}
.cssbeyin-manset ul li a img {
width: 217px;
}
.cssbeyin-manset ul li a span#new-slidespan {
position: absolute;
bottom: 0px; left: 0px;
background: #444;
opacity: .90;filter: alpha(opacity=90);-ms-filter: "alpha(opacity=90)";
padding: 4px 8px; display:block;
width: 217px; color: #fff;
font-size: 12px;
}
.new-last {margin-right: 0px !important;}
.new-last span {
position: absolute;
top: 0px;right: 0px;
background: url(images/external.png) no-repeat 3px -19px !important;
font-size: 11px !important;width: 35px;
text-align: right;padding-left: 20px !important;
padding-right: 5px;
color: #333;
}
img.maxwidth {max-width: 300px; max-height: 200px;
float:left; padding-right: 10px;
padding-bottom: 5px;
}
Kodlarımızı Ekledikten sonra Aşağıdaki kodları manşetin nerde görünmesini istiyorsanız oraya ekliyoruz.
<div class='cssbeyin-manset'>
<ul>
<li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/><span id='new-slidespan'>Yazı Başlığı</span></a></li>
<li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/><span id='new-slidespan'>Yazı Başlığı</span></a></li>
<li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/><span id='new-slidespan'>Yazı Başlığı</span></a></li>
<li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/><span id='new-slidespan'>Yazı Başlığı</span></a></li>
</ul>
</div>
Yapamayn Olursa yorum yapsın. Kaynak:Cssbeyin
Sitenizde öne çıkartmak istediğiniz konuları yada yazılar için çok iyi bir eklentiyi sizlere sunuyorum..Kodlar aşağıdadır. İlk Önce ]]>&l...
Hazır Sosyal Paylaşım Eklentileri
Hayatımızın önemli bir parçası haline gelen sosyal medyayı, bloglarımıza da çeşitli şekillerde entegre etmemiz gerekiyor. Gerek ziyaretçi getirmesi, gerek de Google’a sinyaller göndererek yazıların hızlı indexlenmesini ve SERP performansını arttırması açısından, sosyal paylaşım butonları blogların olmazsa olmaz eklentilerinden.
Blog yazılarını okuyan kişilerin, bu yazıları kolayca sosyal medyada paylaşmasını sağlayan butonlara olan ihtiyaç ve talep artınca, bu butonları kolayca oluşturmanızı ve blogunuza eklememizi sağlayan siteler de artmaya başladı. Bunlardan en popüler 4 tanesini sizlere tanıtmak istiyorum.
1. AddThis
Bu alandaki en eski 2 siteden biri olan AddThis, kendini güncellemeyi başardı ve şuanda kullanıcılara sunduğu 5 farklı sosyal eklentisi var.Bunlar:
- Paylaş butonları: 4 yatay, 3 de dikey versiyonu olan paylaşım butonlarını özelleştirerek hangi butonların gözükmesini istediğinizi belirleyebiliyorsunuz.
- Takip butonları: Sosyal apğlardaki hesaplarınıza link vererek kullanıcıları buralara yönlendrmenizi sağlayacak takip butonlarını AddThis ile kolayca oluşturup blogunuza ekleyebiliyorsunuz. Yatay ve dikey versiyonlarda büyük ve küçük ikon seçenekleri var.
- Hoşgeldin çubuğu: Blogunuza girildiğini sayfanın üst tarafında açılan ve içerisine istediğiniz sosyal ağın takip ya da paylaş butonları ile istediğiniz sayfaya link ekleyebileceğiniz, bir nevi “call to action” barı diyebiliriz. Renkleri de blogunuzun tasarımına uygun hale getirebiliyorsunuz.
- Trend içerikler: Günün, haftanın veya ayın en çok paylaşılan içeriklerini listeyen bu eklentiyi kullanabilmeniz için AddThis paylaş butonlarını blogunuz eklemiş olmanız gerekiyor. O butonlar ayyesinde en çok paylaşılan yazılar otomatik hesaplanıyor ve ziyaretçiye “trend” olarak öneriliyor. Kaç yazı gösterileceğini ve görünümünü belirleyebiliyorsunuz.
- Akıllı katmanlar: Blogunuzu tek tıklamayla ekleyebileceğiniz 4 farklı katmandır. İsterseniz hepsini ekleyebilir, isterseniz işinize yaramayacakları kaldırabilirsiniz. Neler bu katmanlar? Sağ üst köşede açılır kapanır takip butonları, sayfayla hareket eden paylaş butonları, sayfayı aşağı kaydırdığınızda otomatik açılan öneri kutusu ve sayfanın en altında önerilen içeriklerin yer aldığı 4 adet kutu. Demoyu incelemek için burayı ziyaret edebilirsiniz.
2. ShareThis
AddThis’le birlikte en eski sitelerden biri olan ShareThis’in sosyal paylaşım butonlarını 3 adımda blogunuza kolayca ekleyebilirsiniz.
1. adımda sitenizin hangi platformda olduğunu seçmeniz istenir.
2. adımda butonların stilini seçmeniz istenir. 3 farklı stilden birini seçebilirsiniz.
3. adımda ise hangi butonların yer almasını istediğinizi belirlersiniz.
Son olarak get the code butonuna basarak kodunuzu ve blogunuza nasıl eklemeniz gerektiğini görebilirsiniz.
3. Flare
En yeni ve en ilginç sitelerden biri olan Flare ile sosyal paylaşım butonlarını blogunuza eklemek eğlenceli ve çok kolay. Çok şık ve orijinal bir tasarıma sahip olan Flare sosyal paylaşım butonlarını yazı başlığının altına mı, yazının sonuna mı, ortaya mı, sağa mı, sola mı ekleyeceğinizi ayarladıktan sonra sürükle bırak tekbiği ile kolayca blogunuza ekleyebiliyorsunuz.
Flare’de ücretsiz hesap açtıktan sonra +New butonuna tıklarak yeni bir flare oluşturmaya bşlayabilirsiniz. Gösterilecek sosyal paylaşım ikonlarını, blogunuzun neresinde gözükmeceğini ve renklerini anlık olarak blogunuzun üzerinde görebilirsiniz. Son haline karar verdikten sonra da blogunuza uygulayabilirsiniz.
4. Markerly
Sadece blog yazılarınızın değil, blogunuzdaki resimlerin ve yazının içerisindeki belli bir yerin sosyal ağlarda paylaşılmasını da sağlayan Markerly, bu özelliği diğerleri arasında ön plana çıkıyor.
Markerly’nin widget oluşturma sayfasına gittiğinizde sayfa, görsel ve metin paylaşım butonlarından hangilerini istediğinizi ve renklerini seçtikten sonra size verilen kodu blogunuzun </body> taginin üstüne eklemeniz yeterli.
Hayatımızın önemli bir parçası haline gelen sosyal medyayı, bloglarımıza da çeşitli şekillerde entegre etmemiz gerekiyor. Gerek ziyaretçi ge...
Minimal Süper Menü
Blogger için menü alternatiflerine “minimal süper menü” isminde yeni bir menü daha ekleyelim. Son zamanlarda dağıtılan Blogger temalarında çok sık gördüğümüz bu menüyü ben de hazır bir temanın içinden aldım ve bazı küçük değişiklikler yaparak paylaşmak istedim.
Menüye neden bu ismi verdiğimi açıklamak istiyorum. Menüde küçük yazı boyutu ve ikonlar kullanlmış. Bu yüzden az yer kaplıyor ve minimal. Ayrıca menünün sağ köşesinde sosyal ikonlar mevcut. Yani menü hem blog içi navigasyonu, hem de sosyal platformlardaki hesaplarınız arasındaki navigasyonu sağlıyor. Bu yüzden süper :)
Menüde istediğiniz yerleri açılır sekme gibi göstererek alt menü öğeleri de ekleyebilirsiniz. Aşağıdaki demo videoyu izlediğiniz Menü linkinin üzerine geldiğin açıldığını ve alt öğeler çıktığını göreceksiniz.
Bu menüye blogunuza eklemek için öncelikle Blogger kumanda paneline girip Şablon > HTML’yi düzenle diyerek şablonun kodlarını açın ve Ctrl + F kuş kombinasyonuyla açılan arama kutusunun yardımıyla ]]></b:skin> kodunu bulun. Bunun hemen üzerine aşağıdaki stil kodlarını yapıştırın.
/* BH Minimal Süper Menü Stil Kodları
----------------------------------------------- */
#itbnav {
background:#F1921A;
padding:0;
height: 29px;
font-size:12px;
position: relative;
border:1px dotted #000;}
#itbnav .wrapnya,
#nav .wrap,
#headisi,
#content-wrapper {
margin:0 auto;
width:98%;
}
#itbnav .tgltop {
float:left;
color:#E2E2E2;
display:block;
line-height:20px;margin-top: 4px;
}.sf-menu,
.sf-menu * {
margin:0;
padding:0;
list-style:none;
}
.sf-menu li {
position:relative;
}
.sf-menu ul {
position:absolute;
display:none;
top:100%;
left:0;
z-index:99;
}
.sf-menu > li {
float:left;
margin:0 1px;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display:block;
}
.sf-menu a {
display:block;
position:relative;
}
#menunav > li > a {
font: normal normal 90% 'Open Sans', serif ,Sans-serif;
line-height: 50px;
text-transform: uppercase;
font-weight: 600;
height: 50px;
}
.sf-menu ul ul {
top:0;
left:100%;
}
.sf-menu {
float:left;
}
.sf-menu ul {
min-width:12em;
*width:12em;
}
.sf-menu a {
padding:0 10px;
height:50px;
line-height:50px;
text-decoration:none;
zoom:1;
}
.sf-menu a.home, .sf-menu > li > a.home.current {
background-color:#007ABE;
text-indent:-9999px;
padding:0;
width:50px;
}
.sf-menu a {
color:#E6E6E6;
font-size:11px;
}
#itbnav .sf-menu a {
color:#fff;
height: 29px;
line-height: 29px;
}
.sf-menu li {
white-space:nowrap;
*white-space:normal;
-moz-transition:background-color .2s;
-webkit-transition:background-color .2s;
transition:background-color .2s;
position:relative;
}
.sf-menu ul li {
background-color:#007ABE;
margin:1px 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#itbnav .sf-menu ul li, #itbnav .sf-menu ul ul li {
background-color:#F1921A;
}
.sf-menu ul a {
font-weight:normal;
height:28px;
line-height:28px;
}
#itbnav .sf-menu ul a {
height:25px;
line-height:25px;
}
.sf-menu ul a:hover {
padding-left:12px;
}
.sf-menu ul ul li {
background:#007ABE;
margin:0 0 1px 2px;
}
.sf-menu li:hover > a,
.sf-menu li.sfHover > a,
.sf-menu > li > a.current {
background-color:#000;
-moz-transition:none;
-webkit-transition:none;
transition:none;
color:#E6E6E6;
}
#itbnav .sf-menu li:hover > a,
#itbnav .sf-menu li.sfHover > a,
#itbnav .sf-menu > li > a.current {
background-color:#679EC9;
color:#E2E2E2;
}
.sf-arrows .sf-with-ul {
padding-right:2em;
*padding-right:1em;
}
.sf-arrows .sf-with-ul:after {
content:'';
position:absolute;
top:50%;
right:0.85em;
margin-top:-2px;
height:0;
width:0;
border:4px solid transparent;
border-top-color:#E6E6E6;
}
#itbnav .sf-arrows .sf-with-ul:after {
border-top-color:#007ABE;
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color:#E6E6E6;
}
#itbnav .sf-arrows > li > .sf-with-ul:focus:after,
#itbnav .sf-arrows > li:hover > .sf-with-ul:after,
#itbnav .sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color:#E2E2E2;
}
.sf-arrows ul .sf-with-ul:after {
margin-top:-4px;
margin-right:-3px;
border-color:transparent;
border-left-color:#E6E6E6;
}
#itbnav .sf-arrows ul .sf-with-ul:after {
border-left-color:#007ABE;
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after{
border-left-color:#E6E6E6;
}
#itbnav .sf-arrows ul li > .sf-with-ul:focus:after,
#itbnav .sf-arrows ul li:hover > .sf-with-ul:after,
#itbnav .sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color:#E2E2E2;
}
.sf-menu li > i {
position:absolute;
top: 3px;
right: 3px;
width: 27px;
height: 22px;
cursor:pointer;
display:none;
background-color:#c00000;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
outline:0;
}
.sf-menu li > i:after {
content: '+';
color: #fff;
font-size: 19px;
position: absolute;
left: 5px;
top: -2px;
}
.sf-menu li > i.active:after {
content:'-';
font-size:39px;
top:-14px;
}
#itbnav .sf-menu li > i {
width: 23px;
height: 19px;
top: 6px;
}
#itbnav .sf-menu li > i:after {
top: -4px;
left: 3px;
}
#itbnav .sf-menu li > i.active:after {
top: -13px;
font-size: 31px;
left: 4px;
}
.sf-menu a.home:before,.sf-menu a.home:before, #searchnya button:before, #view a:before, .breadcrumbs .homex:before {
text-indent: 0;
}
.sf-menu a.home:before {
width: 30px;
height: 30px;
}
.sf-menu a.home:before {
content: "\f015";
top: 0;
font-size: 29px;
left: 11px;
color: #FBFBFB;
}
#icon-socialmn {
margin: 0;
float: right;
}
#icon-socialmn li {
float: left;
}
#icon-socialmn a {
display: block;
text-indent: -9999px;
width: 26px;
height: 29px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxN2w30kGetWGeaSmHswUMfYcOOeNnJyks-_QYe3pXncOhJR2__3MbolclKx27icrxHtgbcEhKJjwfTMYY5XVJGDxtMNvpKO6NwPFU35nLYY12rsGMaeNRI-LQgDaPxyJFpBAqcMO_zW_1/s575/beyaz-sosyal-ikonlar.png);
background-repeat: no-repeat;
-webkit-transition: background .2s ease-out;
-moz-transition: background .2s ease-out;
-o-transition: background .2s ease-out;
transition: background .2s ease-out;
}
#icon-socialmn .sotw a {
background-position: 1px 2px;
}
#icon-socialmn .sofb a {
background-position: -24px 2px;
}
#icon-socialmn .sogo a {
background-position: -49px 2px;
}
#icon-socialmn .sorss a {
background-position: -74px 2px;
}
#icon-socialmn .solinkn a {
background-position: -99px 2px;
}
#icon-socialmn .sopint a {
background-position: -150px 2px;
}
#icon-socialmn .sotw a:hover {
background-color: #2DAAE1;
}
#icon-socialmn .sofb a:hover {
background-color: #3C5B9B;
}
#icon-socialmn .sogo a:hover {
background-color: #F63E28;
}
#icon-socialmn .sorss a:hover {
background-color: #FA8C27;
}
#icon-socialmn .solinkn a:hover {
background-color: #0173B2;
}
#icon-socialmn .sopint a:hover {
background-color: #CB2027;
}
Sıra HTMLkodlarını eklemeye geldi. HTML kodlarını ekleyeceğiniz yer ile ilgili şu bilgiyi vermek istiyorum:
1. Blogger’ın kendi temalarından birini kullanıyorsaız HTML kodlarını <div class='tabs-outer'> kodnun hemen üstüne ekleyin.
2. Özel bir Blogger teması kullanıyorsanız HTML kodlarını <div id='content-wrapper'> kodunun hemen altına ekleyin.
<!--BH Minimal Süper Menü HTML Kodları-->
<div id='itbnav'>
<ul class='sf-menu' id='topmenunav'>
<li><a href='http://bloghocam.blogspot.com/'>Ana Sayfa</a></li>
<li><a href='http://bloghocam.blogspot.com/p/hakkmda.html'>Hakkımda</a></li>
<li><a href='http://bloghocam.blogspot.com/p/misafir-blogculuk.html'>Misafir Blogculuk</a></li>
<li><a href='http://bloghocam.blogspot.com/p/destek-ol.html'>Destek Ol</a></li>
<li><a href='http://bloghocam.blogspot.com/p/takip-et.html'>Takip Et</a></li>
<li><a href='http://bloghocam.blogspot.com/p/ne-dediler.html'>Ne Dediler?</a></li>
<li><a href='http://bloghocam.blogspot.com/p/arsiv.html'>Arşiv</a></li>
<li><a href='http://bloghocam.blogspot.com/p/galeri.html'>Reklam</a></li>
<li><a href='http://bloghocam.blogspot.com/p/iletisim.html'>İletişim</a></li>
<li><a href='#'>Menü</a>
<ul><li><a href='http://bloghocam.blogspot.com/2011/04/feedburner-kurulumu-ve-ayarlar.html'>Feedburner</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/06/acemiler-icin-google-analytics-rehberi.html'>Google Analytics</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/08/herkesin-bir-gravatar-olsun.html'>Gravatar</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/09/paypal-nedir-bloggerlar-icin-neden.html'>Paypal</a></li></ul>
</li>
</ul>
<ul class='sociico' id='icon-socialmn'>
<li class='sotw'><a href='https://twitter.com/BlogHocam' target='_blank'>twitter</a></li>
<li class='sofb'><a href='http://www.facebook.com/bloghocam' target='_blank'>facebook</a></li>
<li class='sogo'><a href='http://www.google.com/+BloghocamBlogspot' target='_blank'>google</a></li>
<li class='sorss'><a href='http://feeds.feedburner.com/bloghocam' target='_blank'>rss</a></li>
<li class='solinkn'><a href='http://linkedin.com' target='_blank'>linkedin</a></li>
<li class='sopint'><a href='http://pinterest.com/bloghocam' target='_blank'>pinterest</a></li>
</ul>
</div>
HTML kodlarında menü öğelerini kendinize göre düzenleyeblir, istemediğiniz öğelere ait kod satırını silerek menüden kaldırabilirsiniz.
Blogger için menü alternatiflerine “minimal süper menü” isminde yeni bir menü daha ekleyelim. Son zamanlarda dağıtılan Blogger temalarında ...
Twitter Kuşu” Larry” Eklentisi
Blog ile Twitter entegrasyonunu sağlamak için klasik ve standart butonlar ya da eklentiler hem Blog Hocam’da hem de webde pek çok defa paylaşıldı. Fakat bu kez paylaşacağım Twitter takip et butonu eklentisi, daha önce muhtemelen görmediğiniz çok farklı özelliklere sahip.
Eklentiyi blogunuza eklediğinizde sağ üst köşede küçük bir Twitter kuşu ikonu belirecek. Bu Twitter kuşu ikonu “floating” yani yüzen özellikte. Sayfayı aşağı yukarı kaydırdığınızda dahi ikonun yeri değişmiyor.
Bu eklentiyi farklı kılan özellik elbette sabit olması değil. Asıl farkı ikonun üzerine geldiğinizde göreceksiniz. Aşağıdaki demo videoda da göreceğiniz gibi Twitter kuşu ikonunun üzerine geldindiğinde Twitter takip et butonu açılıyor ve sevimli Twitter kuşu “Larrry” kanat çırpmaya başlıyor.
Bu tür animasyonlar için genellikle özel scriptler kullanıldığı için sayfayı oldukça yavaşlatır ama bu eklenti CSS sprite ve @keyframes teknikleriyle oluştrulduğu için oldukça hızlı ve sorunsuz.
Eklentiyi blogunuza eklemek için Blogger kumanda paneline giriş yaptıktan sonra Şablon > HTML’yi Düzenle yolunu takip ederek Ctrl + F tuş kombinasyonunun yardımıyla </body> kodunu bulun ve hemen üzerine aşağıdaki kodları ekleyin.
<style>
.takip-wrapper {
height: 44px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.takip-buton {
background-image: url(https://dl.dropboxusercontent.com/u/60346665/twitter-bird-sprite-BH.png);
background-repeat: no-repeat;
background-position: 0 0;
cursor: pointer;
display: block;
padding: 7px 0 7px 40px;
position: absolute;
right: -168px;
top: 5px;
-webkit-transition: right 0.3s;
-moz-transition: right 0.3s;
transition: right 0.3s;
width: 168px;
}
.takip-buton:hover {-webkit-animation: fly 0.2s steps(4) 0 10;
-moz-animation: fly 0.2s steps(4) 0 10;
animation: fly 0.2s steps(4) 0 10;
right: 0;
}
@-webkit-keyframes fly {
from {
background-position: 0 0;
}
to {
background-position: 0 -140px;
}
}
@-moz-keyframes fly {
from {
background-position: 0 0;
}
to {
background-position: 0 -140px;
}
}
@keyframes fly {
from {
background-position: 0 0;
}
to {
background-position: 0 -140px;
}
}
</style>
<div class='takip-wrapper'>
<div class='takip-buton'>
<a class='twitter-follow-button' data-show-count='false' href='https://twitter.com/bloghocam'>@BlogHocam 'ı takip et</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>
Kodlarda kırmızı renkle gösterdiğim yerlere kendi Twitter kullanıcı adınızı yazmanız yeterli. Bunun dışında bir değişikliğe gerek yok.
Blog ile Twitter entegrasyonunu sağlamak için klasik ve standart butonlar ya da eklentiler hem Blog Hocam’da hem de webde pek çok defa payl...
Hover Efektli Şık Bir Ribbon Menü
Blog tasarımlarının en çok aranan ve en çok üzerinde durulan öğelerinden biri blog kayıtlarının üst tarafına eklenen yatay link menüleri sanırım. Blogger’a yatay menü ekleme olayı hem Google’da çok aranıyor, hem de benden çok isteniyor.
Bugüne kadar bazı yatay menü kodları paylaşsam da şıklığa ve tasarıma özen gösteren bloggerlar benden ribbon menü paylaşmamı istemişlerdi. Ben de blog kayıtlarının üst tarafına ekleyebileceğiniz, şık ve hover efekti sayesinde üzerine gelindiğine hareket eden harika bir ribbon menü buldum.
Menüyü Blogger’a eklemek için kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyin ve aşağıdaki kodları yapıştırın.
<style>
/* Blog Hocam Animasyonlu Ribbon Menü */
.bhribbon span {
background:#F1921A;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.bhribbon a span {
color:#000;}.bhribbon a:hover span {
background:#669900;
margin-top:0;}
.bhribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #F1921A;
border-bottom:0.5em solid #fff;}.bhribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #F1921A;
border-bottom:0.5em solid #fff;}.bhribbon a:link, .bhribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.bhribbon:after, .bhribbon:before {
margin-top:0.5em;
content: "";
float:left;
border: 1.5em solid #F1921A;}.bhribbon:after {
border-right-color:transparent;}.bhribbon:before {
border-left-color:transparent;}
</style>
<div class='bhribbon'>
<a href='http://bloghocam.blogspot.com/'><span>Ana Sayfa</span></a>
<a href='http://bloghocam.blogspot.com/p/hakkmda.html'><span>Hakkımda</span></a>
<a href='http://bloghocam.blogspot.com/p/misafir-blogculuk.html'><span>Misafir Blogculuk</span></a>
<a href='http://bloghocam.blogspot.com/p/destek-ol.html'><span>Destek Ol</span></a>
<a href='http://bloghocam.blogspot.com/p/takip-et.html'><span>Takip Et</span></a>
<a href='http://bloghocam.blogspot.com/p/ne-dediler.html'><span>Ne Dediler?</span></a>
<a href='http://bloghocam.blogspot.com/p/arsiv.html'><span>Arşiv</span></a>
<a href='http://bloghocam.blogspot.com/p/galeri.html'><span>Reklam</span></a>
<a href='http://bloghocam.blogspot.com/p/iletisim.html'><span>İletişim</span></a>
</div>
Değiştirmeniz gereken yerler son bölümdeki menü öğelerine ait bağlantılar. Ben bu menüye Blog Hocam’a ait statik sayfaların linklerini ekledim ama siz isterseniz başka türlü de değerlendireblirsiniz.
Örneğin bir arkadaşınıza ya da diğer sitenize link vermek sterseniz oraya şu satırı ekleyebilirsiniz:
<a href='http://siteadresi.com'><span>Site</span></a>
Veya belli bir etikete ait yazılarınızın listelenmesini sağlayablirsiniz. Örneğin Blog Hocam’da SEO etiketli yazılara link vermek için şu satırı ekleyebilirim:
<a href=' http://bloghocam.blogspot.com/search/label/SEO'><span>SEO</span></a>
Ya da belli bir yazıya link vermek isteyebilirim. Örneğin Bumerang’ı tanıttığım Her Yönüyle Bumerang Network başlıklı yazıma bu menüde yer vermek istersem şu satırı ekleyebilirim:
<a href='http://bloghocam.blogspot.com/2013/10/her-yonuyle-bumerang-network.html'><span>Bumerang</span></a>
Ben menüyü Blog Hocam’ın tasarımına uygun şekilde renklendirdiğim için her blog uygun olmayabilir. Bu yüzden son olarak da renkleri nasıl değiştireceğinizden bahsedeyim.
Tmel olarak 2 renk kullandım. Bunlardan ilki turuncu renkte gördüğünüz zemin rengi. Bu rengin kodu #F1921A Kodlarda bu renk kodunu gördüğünüz yere kendi istediğiniz rengin kodunu koyarsanız menünün zemin rengi değişecektir.
Kullandığım diğer renk ise menünün üzerine geldiğinde öne çıkan öğenin dönüştüğü renk olan yeşil. Bu rengin kodu ise #669900 Kodlarda bu renk kodunu gördüğünüz yere kendi istediğiniz rengin kodunu koyarsanız hover efekti ile oluşan renk değişecektir.
Sanırım yeterince açıklayıcı oldu :) Eğer kafanıza takılan bir şey olursa yorum bölümünden sorabilirsiniz.
Blog tasarımlarının en çok aranan ve en çok üzerinde durulan öğelerinden biri blog kayıtlarının üst tarafına eklenen yatay link menüleri san...
Twitter–Blog Entegrasyonu İçin Twitter Bileşenleri
Çağın popüler sosyal paylaşım plaformu olan Twitter’a ait “takipçi kutusu” veya “son tweetler” gibi eklentiler blogların vazgeçilmeziydi. Fakat Twitter kendi bileşenlerini kullanıma sunduktan sonra hariçten kullandığımız bu eklentiler kullanılmaz duuruma geldi. Ben de bu yazıda Twitter’ın kullanıcılarına sunduğu tüm bileşenleri tanıtmak istedim. İstediklerini blogunuza ekleyerek blog-Twitter entegrasyonunu sağlayabilirsiniz.
Zaman Akışı Bileşeni
Ayarlar > Bileşenler > Yeni Oluştur > Kullanıcı Zaman Akışı
Twitter sayfanızdaki son hareketleri blogunuzda göstermenizi sağlayan bileşendir. Kendi yazdığınız ve retweetlediğiniz tweetler bu kutuda görünür. Yanıtladığınız tweetler ile tweetle birlikte paylaşıılan fotoğrafın gösterilip gösterilmeyeceği sizin tercihinize bırakılmıştır.Ayrıca kutunun genişliğini, linklerin rengini ve zemin rengini değiştirebilirsiniz.
@BlogHocam kullanıcısından Tweetler
Favoriler Bileşeni
Ayrlar > Bileşenler > Yeni Oluştur > Favoriler
Yazdığınız veya retweetlediğiniz tüm tweetleri değil de seçtiğiniz veya beğendiğiniz tweetleri blogunuzda paylaşmak isterseniz favoriler bileşenini kullanabilirsiniz. Favorilere eklediğiniz tweetleri blogunuza embed edebilirsiniz. Benim favorilerimde tweet olmadığı için başka bir hesabın favorilerini örnek göstermek istiyorum.
@saygigunenc kullanıcısından Favori Tweetler
Hashtag Bileşeni
Ayrlar > Bileşenler > Yeni Oluştur > Ara
Belli bir hashtag veya anahtar kelime ilgili yazılmış tweetlerden oluşan bileşendir. Diğer bileşenlerde olduğu gibi genişlik ve renk seçeneklerinin yanı sıra sadece popüler tweetlerin göterilmesini de seçebilirsiniz. Örnek olarak blog yazarlığı ile ilgili bilgi, ipucu, duyuru, haber gibi şeylerin paylaşıldığı #blogyazarlığı hashtagine ait bileşeni vermek istiyorum.
"#BlogYazarlığı" hakkında Tweetler
Ayrıca listeler ve özel zaman akışı bileşenlerini de benzer şekilde oluşturup blogunuza ekleyebilirsiniz ama ben bu özellikleri kullanmadığım için örnek veremiyorum ne yazık ki.
Tweetle Butonu
Butonu eklediğiniz sayfayı, sayfanın linki ve başlığıyla Twitter’da paylaşmanızı sağlayan klasik buton. Tweetle butonunun kodları:
<a href="https://twitter.com/share" class="twitter-share-button" data-via="BlogHocam" data-lang="tr">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Kırmızı renkle yazdığım yere kendi Twitter kullanıcı adınızı yazın. Örnek buton:
Takip Et Butonu
Twitter’da sizi takip etmelerini kolaylaştırmak için kullanabileceğiniz buton. Butonu eklmeniz için gereken kodlar:
<a href="https://twitter.com/BlogHocam" class="twitter-follow-button" data-show-count="false" data-lang="tr">Takip et: @BlogHocam</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Yine kırmızı renkle gösterdiğim yerlere kendi Twitter kullanıcı adınızı yazmalısınız. Örnek buton:
Hashtag Butonu
Bu butona tıkladığınızda belirlediğiniz hashtagin olduğu bir tweet penceresi açılır ve bu hashtagla tweet yazılmasını kolaylaştırır. Butonun kodları:
<a href="https://twitter.com/intent/tweet?button_hashtag=blogyazarlığı" class="twitter-hashtag-button" data-lang="tr">Tweet #blogyazarlığı</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Kodlarda kırmızı renkli yerlere başka bir hashtag yazabilirsiniz. Örnek buton:
Mention Butonu
Birinin sizden bahsederek tweet göndermesini salayan butondur. Butonu eklemeniz için gerekli kodlar:
<a href="https://twitter.com/intent/tweet?screen_name=BlogHocam" class="twitter-mention-button" data-lang="tr">Tweet to @BlogHocam</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Yine kırmızı renkli yerlere kendi Twitter kullanıcı adınızı yazın. Örnek buton:
Twitter Kullanan Blog Yazarlarının Dikkatine…
Twitter’da Blog Hocam için açmış olduğum hesap olan @Blog Hocam hesabını takip etmenizi öneriyorum. Bu hesapta sadece Blog Hocam’da yaynlanan yazılarını değil, blog dünyası, sosyal medya, SEO, dijital pazarlama ve kişisel gelişim ile ilgili bilgiler, haberler, öneriler ve linkler paylaşıyorum. Ayrıca…
Yukarıdaki bileşen ve butonlarda gördüğünüz #blogyazarlığı etiketi bana, Blog Hocam’a veya başka birine ait değildir. Her blog yazarı bu etiketi kullanarak önerilerini, sorunlarını, denetyimlerini paylaşsın lütfen.
Çağın popüler sosyal paylaşım plaformu olan Twitter’a ait “takipçi kutusu” veya “son tweetler” gibi eklentiler blogların vazgeçilmeziydi. Fa...
Blogger Yıldızlı Oy Verme Eklentisi
Blogger kullanıcıları tarafından en çok aranan ve istenen eklentilerden biri yıldızlı oy verme eklentisi. Bu konuda daha önce paylaştığım eklenti Javascript kodunun yapımcı hostundan kaldırılması nedeniyle çalışmıyordu. Ben de daha profesyonel olması için üçüncü parti uygulamalarında arayışa girdim ve işinize yarayacak güzel bir yıldızlı oy verme eklentisi buldum.
Aslında bu eklentiye yıldızlı oy verme eklentisi yerine yazı değerlendirme eklentisi demek daha doğru olur. Çünkü eklentiyi isterseniz yıldızlı, isterseniz de olumlu/olumsuz oy verme şeklinde kullanabiliyorsunuz. Şimdi adım adım bu eklentiyi oluşturmaya ve bloga eklemeye geçelim.
1. Adım: Rating Widget isimli bu ekletiyi kullanabilmeniz için öncelikle üye olmanız gerekiyor. Bu yüzden öncelikle widget oluşturma sayfasına giderek Create account butonuna basın.
Burada e-mail adresinizle bir hesap oluşturabileceğiniz gibi Facebook, Google veya LİnkedIn hesaplarınıza bağlanarak kısa yoldan hesap oluşturabilirsiniz.
2. Adım: Hesabınıza giriş yaptıktan sonra işe eklentinin stilini belirleyerek başlayabiliriz. Yıldızlı veya +/- oy verme stillerinden birini seçtikten yatay mı yoksa dikey mi kullanmak istediğimizi belirleyebiliyoruz.
Seçtiğiniz stilin örnek görüntüsünü yandaki Live Preview yazan bölümde anlık olarak görebilirsiniz. Stile karar verdikten sonra yıldızların şekli, rengi, boyutu, yazı tipi ve boyutu, yıldızların sayısı gibi özellikleri seçtikten sonra sağ tarafta oluşan kodu kopyalıyoruz.
3. Adım: Blogger kumanda panelinize giriş yaptıktan sonra Şablon > HTML’yi düzenle yolunu takip edin ve Ctrl + F tuş kombinasyonunun yardımıyla arama kutusunu açarak </body> kodunu bulun. Kopyaladığınız kodları bunun üzerine yapıştırın.
Ardından <div class='post-footer'> kodunu bulun (Bu koddan şablonda birden fazla olabilir.İkincisi sizin için önemli. ) ve hemen üzerine şu kodu ekleyin.
<div class="rw-ui-container"></div>
Şablonda ön izleme yapığınızda yazının en altında yıldızlı oy verme eklentisinin gözükmesi gerekliyor. Şablonu kaydedebilirsiniz.
İpucu-1: Eğer eklenti ile yazınız arasında hiç boşluk yoksa eklediğiniz ikinci kodun önüne <br/> kodunu ekleyebilirsiniz.
İpucu-2: Eklentinin ana sayfada deil de yazı başlığına tıklayıp yazının içine girildiğinde görünmeini istiyorsanız ikinci kodu şu şekilde değiştirin:
<b:if cond='data:blog.pageType == "item"'>
<div class="rw-ui-container"></div>
</b:if>
Açık ve net bir şekilde anlatmaya çalıştım ama bir sorunuz olursa yorum bölümünden sorabilirsiniz.
Blogger kullanıcıları tarafından en çok aranan ve istenen eklentilerden biri yıldızlı oy verme eklentisi. Bu konuda daha önce paylaştığım ek...
Sabit Soldan Açılan Sosyal Menü
Blogunuzun veya şahsınızın Facebook, Twitter, Google+ ve Pinterest hesapları ile blog yazılarınızın beslemelerinin yer aldığı RSS adresinize ait sosyal medya butonlarının yer aldığı başka bir eklenti daha paylaşmak istiyorum.
Bu eklentide pek çok özellik bir arada. Bu eklenti sadece takipçi sayıınzı arttırmakla kalmayacak, aynı zamanda blogunuzu görsel açıdan da zenginleştirecek. Bu sosyal menü eklentisi floating yani yüzen olduğu için sayfa aşağı ya da yukarı kaydırılsa bile menünün pozisyonu sabit kalacaktır. Sayfada sadece sosyal kanalların isimleri gözükürken, menünün üzerine gelindiğinde animasyon efektiyle birlikte açılacak ve tıklayan kişiyi ilgili sosyal kanala yönlendirecektir.
Eklentinin nasıl çalıştığını görmek için aşağıdaki demo videoyu izleyebilirsiniz.
Sosyal menü eklentisini blogunzda kullanmak isterseniz aşağıdaki kodları kendinize göre düzenledikten sonra Blogger kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek eklemeniz yeterli.
<!--Blog Hocam Sosyal Menü-->
<style type="text/css">
ul#sosyal {
position: fixed;
margin: 0px;
padding: 0px;
top: 20%;
left: 0px;
list-style: none;
z-index:9999;
}
ul#sosyal li {
width: 100px;
}
ul#sosyal li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}
ul#sosyal .twitter a{
background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ90FzZo-p3Lm1K_u4S7IZfkPbBOYkx2H73F0A8lzbSOkbFUlSpOsflRTTzXWS__5gRwJPEVIn9KeywRlIvMMgg4GLzKknzCmI1foLonjuPcJ_wL6tPMr0Ayw5V4UrgKqKlPNzLIk8leE/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#sosyal .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_dRsSV6LywYgspcDy3o9mE8cBHKzAfosqrqA-pheVI2Wb8Rhbt5a4Y0rCTNADXaDRn5QtoKlA9MNI9xmqFMrx_QAFpoDmzdKnc-dCOipN7p7QkR8b-fQRG1mTFuhOwvc74jBuJFSQOu4/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#sosyal .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNh1tKK7ZOa-7FsBI6kkd0RecGYGJSMpH0WvYbsNvUCVJvqUkkEGy-kk5qrCiNSeCZMu4izKmKQk3VpREKH3g8m-Qfew3CDvsgfBM4hH8bF1O5dyJwFd5AfbqUaEFEkSGtxFW0RFfNr8/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#sosyal .rss a {
background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4LtmYX_UJ-4GUZe1Gl86vwJDWlG_98YBxNt0Xuc7nDuxGOraro-zmAqGMlHMY_2mOD7q0xeMEyh7WKnwrU443zfrD9xoYtqy9SMF5u2Ztwhk60xy_nVLh6lv3j-5WxKpOHqk7ZHnoNj0/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#sosyal .pinterest a {
background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6uS6WNQds4x_HDnXYFrQiOZsaYmJG5_yuAhNqif_ARPG9G9KlLVf6Lq6ckWvg8UEuakxLU0T7bGVU9rgzWfwTKulDm8qLlJkLqnWAfULykwwgthjGSH5zIY5-dkDPEoeowvvBW-ML5k4/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#sosyal a').stop().animate({
'marginLeft': '-85px'
}, 1000);
$('#sosyal > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-85px'
}, 200);
}
);
});
</script>
<br />
<ul id="sosyal">
<li class="twitter"><a href="http://twitter.com/bloghocam" title="Twitter"></a></li>
<li class="googleplus"><a href="http://gplus.to/bloghocam" title="Google Plus"></a></li>
<li class="facebook"><a href="http://facebook.com/bloghocam" title="Facebook"></a></li>
<li class="rss"><a href="http://feeds.feedburner.com/bloghocam" title="Rss"></a></li>
<li class="pinterest"><a href="http://pinterest.com/bloghocam" title="Pinterest"></a></li>
</ul>
Kırmızı renkle gösterdiğim yerlerde ilgili sosyal kanallara ait Blog Hocam’ın adresleri yazıyor. Oralara endi hesap adreslerinizi yazmayın unutmayın. Onların dışında değiştirmeniz gereken başka bir yer yok.
Blogunuzun veya şahsınızın Facebook, Twitter, Google+ ve Pinterest hesapları ile blog yazılarınızın beslemelerinin yer aldığı RSS adresiniz...