Birsorumoalcak » blogger eklentileri 2014

Hover Efektli Mini Sosyal İkonlar >>

Mini Sosyal İkonlar

Tasarımı ve kullanılabilirliği ile göz kamaştıran bu mini sosyal ikonları eminim sizde web sitenizde kullanmak isteyeceksiniz.Üstelik bu ikonlar hover efektli ve bence hem yazılarınızın altında hemde slidebarınızda çok şık duracak.Kurulumu kolay olan mini sosyal ikonları web sitenizin istediğiniz her yerinde kullanabilirsiniz.İsterseniz hemen önizlemesini ve kodları sizlerle paylaşalım.

1.Örnek:

<ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" rel="external" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" rel="external" title="googleplus">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" rel="external" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" rel="external" title="rss">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" rel="external" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" rel="external" title="youtube">
</a></li>
</ul>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZXdi4XiRfXhFC6bxmtAVm2wuY5bSVejX6eNWJzXLYz9DR649VOHa9O79NDPmnI0nLkAz24nArZqMjXkkw6qrhj5bt0Ei_5Vwd5w04Yg7RiIeMWQfJ6iKXuuGyrfjnJuOGn7WJ16wrIEI/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZXdi4XiRfXhFC6bxmtAVm2wuY5bSVejX6eNWJzXLYz9DR649VOHa9O79NDPmnI0nLkAz24nArZqMjXkkw6qrhj5bt0Ei_5Vwd5w04Yg7RiIeMWQfJ6iKXuuGyrfjnJuOGn7WJ16wrIEI/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>

2.Örnek

<style>
.social-follow ul li{border: 1px solid rgb(226, 226, 226);display:inline;float:left;overflow:hidden; margin-left: 5px;}
.social-follow ul li .icon{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvU1AteFRZSjVLdWs);}
.social-follow ul li a{background:#F1F1F1;float:left;transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;-webkit-transition:all .2s;width:30px;height:30px;}
.social-follow .facebook{background-position: 0 0px !important;}
.social-follow .facebook:hover{background-color:#3b5997; background-position:0px -30px !important;}
.social-follow .twitter{background-position:-30px -60px !important;}
.social-follow .twitter:hover{background-color:#00aced; background-position:-30px -90px !important;}
.social-follow .g-p{background-position:-88px -60px !important;}
.social-follow .g-p:hover{background-color:#dd4b39; background-position:-88px -90px !important;}
.social-follow .pinterest{background-position:-60px -60px !important;}
.social-follow .pinterest:hover{background-color:#cb2027; background-position:-60px -90px !important;}
.social-follow .youtube{background-position:-120px -60px !important; width:55px !important;}
.social-follow .youtube:hover{background-color:#ff0000; background-position:-120px -90px !important;}
.social-follow .linkedin{background-position:-173px -61px !important;}
.social-follow .linkedin:hover{background-color:#006699; background-position:-173px -91px !important;}
.social-follow .rss{background-position:-204px -61px !important;}
.social-follow .rss:hover{background-color:#ff6600; background-position:-204px -90px !important;}
</style>
<div class="social-follow">
<ul>
<li><a class="facebook icon" href="http://www.facebook.com/408085549280135" target="_blank"></a></li>
<li><a class="g-p icon" href="https://plus.google.com/u/0/+M%C3%BCcahitPolat1992/posts" rel="author" target="_blank"></a></li>
<li><a class="twitter icon" href="http://www.twitter.com/Mcahitp" target="_blank"></a></li>
<li><a class="pinterest icon" href="http://www.pinterest.com/mcahitpolat" target="_blank"></a></li>
<li><a class="youtube icon" href="http://www.youtube.com/user/Birsorumolacak.blog" target="_blank"></a></li>
<li><a class="linkedin icon" href="http://www.linkedin.com/in/Birsorumolacak" target="_blank"></a></li>
<li><a class="rss icon" href="http://feeds.feedburner.com/Birsorumolacak" target="_blank"></a></li>
</ul>
</div>

Bu kodu Yerleşim > Gadget ekle ardından Html/Javascript bölümüne eklemeniz yeterli olcaktır.

Kod içerisinde http://www.facebook.com/ ve benzeri bölümlere kendi sosyal medya hesaplarınızı eklemeyi unutmayınız.Aksi takdirde sonuç alamazsınız.

Yapamadığınız Noktaları Butonunu kullanarak mesaj gönderebilirsiniz.

Yukarıya Çık Buton Kodu>>En Güzel

Yukarıya Çık Butonu Kodu

Sayfayı aşağıya indirince beliren ve sayfanızın sağ tarafında yer kaplamayan bu güzel ve estetik yukarıya çık butonu ile ziyaretçileriniz rahat bir nefes alacaklar.Bu muhteşem kod sizinde sitenizde olsun istiyorsanız yerleşim html jacvascript bölümüne yapıştırmanız yeterli olacaktır.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="https://googledrive.com/host/0B4Q42-BNPzjKUVNzWGxzd1Vkam8/" type="text/javascript"></script>

Sitene Giriş İntrosu Ekle>>Perdeli İntro

Sitene Giriş İntrosu Ekle

Kullanacağımız bu kod ile siteniz çok profosyonel bir biçime bürünecek.Sizde sitenizin girişinde bir intronuz olsun istiyorsanız hemen bu kodu Yerleşim html javascript bölümüne eklemeniz yeterlidir.

<!--Kod Dostu Perde İntrosu Kodu START-->

<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır-->

<!--Telif sahibi: koddostu.com-->

<div class="kod-dostu-od od-25-ds" id="koddostu-2block">
</div>
<div class="kod-dostu-od od-24-ds" id="koddostu-1block">
</div>
<a href="javascript:void(0)" onfocus="this.blur();" class="kod-dostu-od od-26-ds" id="koddostu-3block"></a>
<koddostu></koddostu>
<style type="text/css">a.kod-dostu-od{position:fixed;z-index:999900;}div.kod-dostu-od{position:fixed;z-index:999900;}div.od-24-ds{top:0px;left:0px;width:50%;height:100%;background:#961e1d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVFGZuFdUDiZfgXwlzZNAISWBM-GxvEs-TH76OfP3wiHf1LKa0gyUoz0-IIeamKNLvzaUXKgTMw985L-YiLCIfxrrD9zlTFnCmeoi4tgwpL9haXcwMd4lwb58a_UkrDLq3rzgbeNKocFR/s1600/koddostupowered.jpg) no-repeat top left;background-size:120% 100%;}
div.od-25-ds{top:0px;right:0px;width:50%;padding-left:35px;height:100%;background:#961e1d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVFGZuFdUDiZfgXwlzZNAISWBM-GxvEs-TH76OfP3wiHf1LKa0gyUoz0-IIeamKNLvzaUXKgTMw985L-YiLCIfxrrD9zlTFnCmeoi4tgwpL9haXcwMd4lwb58a_UkrDLq3rzgbeNKocFR/s1600/koddostupowered.jpg) no-repeat top right;background-size:120% 100%;}a.od-26-ds{right:15px;top:-75px;width:118px;height:320px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqhvvOC1v9wZYb-8AoM8KGkO_46f00Vxg6eCKq-uZIIFPgePkjvrHWmjOQSt7l9PBX9PPLIRS3Z_s8UbTHZZl-E-bkp_8Zyb8yWe5tjhtyP0by-Ch2mJYnP5l6jkcg5kUQvLwl_cHmsT0/s1600/rope.png) no-repeat top left;}</style><style type="text/css">div.kod-dostu-od{_position:absolute;}a.kod-dostu-od{_position:absolute;}div.od-24-ds{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}div.od-25-ds{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}a.od-26-ds{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://kdostu.googlecode.com/svn/cquery.js"></script>
<script>
var tdta=0;
$("#koddostu-3block").click(function(){
tdta=tdta+1;
if(tdta>=2){
var sbkgj = Math.floor((Math.random()*10)+1);
if(sbkgj>=7){
window.open('h'+'t'+'t'+'p'+':'+'/'+'/'+'w'+'w'+'w'+'.'+'k'+'odd'+'ostu'+'.'+'c'+'o'+'m/2'+'0'+'1'+'3'+'/'+'0'+'2/p'+'er'+'de'+'li-a'+'cl'+'s'+'-e'+'f'+'e'+'kt'+'i'+'-'+'i'+'n'+'tr'+'o'+'-k'+'od'+'u.'+'h'+'t'+'m'+'l','')}
}
if($("#koddostu-1block").offset().left ==0){
$("#koddostu-3block").animate({
top: "0px"
}, 800, function(){
$("#koddostu-3block").animate({
top: "-15px"
}, 300)
});
$("#koddostu-1block").animate({
width: "200px",
left: "-125px",
}, 1100);
$("#koddostu-2block").animate({
width: "200px",
right: "-125px",
paddingLeft: "0px",
}, 1100);
}
else{
$("#koddostu-3block").animate({
top: "0px"
}, 300, function(){
$("#koddostu-3block").animate({
top: "-75px"
}, 800)
});
$("#koddostu-1block").animate({
width: "50%",
left: "0px"
}, 1100);
$("#koddostu-2block").animate({
width: "50%",
right: "0px",
paddingLeft: "35px"
}, 1100);
}
});

</script>

<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır-->

<!--Telif sahibi: koddostu.com-->

<!--Kod Dostu Perde İntrosu Kodu STOP-->

Bloguma Hoşgeldiniz !

Mücahit Polat

Kategoriler :)

E-posta Aboneliği!

Hover Efektli Mini Sosyal İkonlar >>

Mini Sosyal İkonlar

Yukarıya Çık Buton Kodu>>En Güzel

Yukarıya Çık Butonu Kodu

Sitene Giriş İntrosu Ekle>>Perdeli İntro

Sitene Giriş İntrosu Ekle

Misafir Yazar Ol

-

Kategorilerimiz :)

Tavsiye Bağlantılar !

Sizin İçin Hazırladığımız Sayfalar !

Bana Mesaj Gönderin !