Blogger Sosyal Medya eklentileri

DEMO

Blogger Sosyal Medya eklentileri sayesinde site tasarımınız oldukça güzel görünecektir.Aşağıdaki Blogger Sosyal Medya eklentisi ile sitenizi sosyal medyada da aktif halde tanıtmış olacaksınız.

<div class="droplink"> 

        <ul>

      <li class="facebook"><a href="https://www.facebook.com/HobiAra/" target="_blank">Facebook</a></li>

      

      <li class="google"><a href="https://plus.google.com/102700799461347336120" target="_blank">Google+</a></li>

      <li class="instagram"><a href="https://www.instagram.com/hobiara/" target="_blank">Instagram</a>

</li>

      <li class="youtube"><a href="https://www.youtube.com/c/HobiAra" target="_blank">YouTube</a>

</li>

      <li class="rss"><a href="http://feeds.feedburner.com/hobiara" target="_blank">RSS</a></li>

     <li class="twitter"><a href="http://www.dailymotion.com/hobiara" target="_blank">Dailymotion</a></li> 

  </ul>

</div>

<style>

.droplink {

    width: 200px;

    position:absolute;

    -moz-border-radius-topleft: 5px;

    -webkit-border-top-left-radius: 5px;

    -moz-border-radius-topright: 5px;

    -webkit-border-top-right-radius: 5px;

    -moz-border-radius-bottomleft: 5px;

    -webkit-border-bottom-left-radius: 5px;

    -moz-border-radius-bottomright: 5px;

    -webkit-border-bottom-right-radius: 5px;}

.droplink h3 a {

    text-align: center;

    width: 100%;

    display: block;

    padding: 2px 0px;

    color: #333;

    letter-spacing: 3px;

    text-decoration: none;

    text-transform: uppercase;}

.droplink h3 a img{

    border: none;}

.droplink:hover h3 a {

    color: #FFF;

    font-weight: bold;}

.droplink li a{

    padding: 5px 12px 4px 34px; 

    margin: 1px;

    background-color: #484A47;

    display: block;

    color:#FFF;

    text-decoration: none;

    -moz-border-radius-topleft: 5px;

    -webkit-border-top-left-radius: 5px;

    -moz-border-radius-topright: 5px;

    -webkit-border-top-right-radius: 5px;

    -moz-border-radius-bottomleft: 5px;

    -webkit-border-bottom-left-radius: 5px;

    -moz-border-radius-bottomright: 5px;

    -webkit-border-bottom-right-radius: 5px;

    background-repeat:no-repeat;

    background-position: 10px 3px;}

.droplink li a:hover {

    background-color: #CC3B1F;}

.droplink .facebook a {

    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEb2t43YqVBPIEF8c2xKl4Q-a6fWklJ-bsxa0xBhW479FP9sGJx1HW0IBDkQbB9bhNKmItisYfp-wpgV7m2XThk2R3omMFhhOPxqABoat_TAyB1SmbFvbigGi3DyhX-Hzt-OSYx8kV1uo/s200/facebook.png");}

.droplink .linkedin a {

    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgegke40GOZBJxGRRaQN7RYZzxwp7Uidx8R-2Oemp0ysuJmYKtEh6i7ST5q-0OzAynWh9bvdYcDbrWDJFKR8SVUEP0A_9E3T9SBNOx3obCQkt9K-MUhKOWqA2rU_zu5liltf4LNkYSngCw/s200/twitter.png");}

.droplink .twitter a {

    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgegke40GOZBJxGRRaQN7RYZzxwp7Uidx8R-2Oemp0ysuJmYKtEh6i7ST5q-0OzAynWh9bvdYcDbrWDJFKR8SVUEP0A_9E3T9SBNOx3obCQkt9K-MUhKOWqA2rU_zu5liltf4LNkYSngCw/s200/twitter.png");}

.droplink .google a {

    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCo3XX55XS3ggVFgYkRnr0ft_aXR8EvZJoGGr91E_FBMYNlhuOi23WhV0IV3g9Ooz1QuRoiEwvslv8gAeIl16wrVLNI6XXTrfNUy3pOGy-YOcsPi7Qs-4Eh4-12R8mc_hE8Rj9SEn1_QU/s200/googleplus.png");}

.droplink .youtube a {

    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL3yjlv8gK2dV8w5j8GTKaGsJx4Kc48olnteCGflkaSVizODNSobliQCZfsTdsInSliuMGSnxV_zh70tLNzrdfgli83MLYbNEs7sQOzBoD69a5YNQZsnhNf5EnK7yzuM-ts5THnIJvBMc/s200/youtube.png");}

.droplink .rss a {

    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMgGTO6M0zYbDL-KAbh6_HhwghhEpUaOxHqqwF4CYPGb7TnbfNZ1-LfSExtS4_B4bxBr8Fb-I4zvcHfxJcRA2tjHnq8ur-gOEY6QqkSquR3Bwdw_ZPh3takrI7dIhb1dr01pRPE4glD08/s200/RSS.png");}

.droplink .pinterest a {

    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/pinterest.png");}

.droplink .instagram a {

    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwg5qdSkU55qQUMAYLRlOX_EZ2893UpdfGRKU4NxGFcgo_wHyXYvoW2ibVOPHDoHq1yexbPurWgipzt04GnEDi6mhMDibvLpTeszmDCyCKMoXGJ-k9YLwAu1zsblX5LJB97sgihyphenhyphenporQ/s200/linkedin.png");}

.droplink .mail a {

    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/email.png");}

</style>

Blogger Çerçece İçi Arşiv Eklentisi

Blogger Çerçece İçi Arşiv Eklentisi

<div style="overflow:auto; padding:5px; width:660px; height:200px;  border:2px solid #000;">
  <script>var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["Ocak","Subat","Mart","Nisan","Mayıs","Haziran","Temmuz","Agustos","Eylul","Ekim","Kasım","Aralık"];function loadtoc(a){function b(){if("entry"in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><a href="'+postYearMonth2[b]+'">'+temp1+"</a></p><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};</script><script src="http://psdfonlar.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

width:280px; height:300px; Çerçeve genişliği ve yüksekliği
border:2px: Çerçeve kalınlığı
solid #000; Çerçeve rengi

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Blogger Hazır Sosyal Paylaşım Eklentisi

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.

CSS:

<style>#sosmed{margin:16px auto 5px;} #sosmed li:hover{background-color:#414b5e;} #sosmed li{line-height:30px;font-weight:400;margin:auto;margin-bottom:3px;border-radius:5px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;} #sosmed li a{padding:5px 5px 3px 14px;display:block;color:#fff;} #sosmed li i{border-right:1px solid rgba(0,0,0,.2);padding-right:5px;margin-right:5px;width:15px;} .bg-fb{background:#5772bb;} .bg-tw{background:#3494e5;} .bg-gp{background:#e34242;}</style>

HTML:

<div> <nav id="sosmed"> <ul> <li class="bg-fb"><a href="#"><i class="fa fa-facebook"></i> Facebook'ta Takip Et</a></li> <li class="bg-tw"><a href="#"><i class="fa fa-twitter"></i> Twitter'da Takip Et</a></li> <li class="bg-gp"><a href="#"><i class="fa fa-google-plus"></i> Google+'da Takip Et</a></li> </ul> </nav></div>

# ile olan yerlere sosyal medya adreslerimizi yazıyoruz.

Önizleme:

•  Facebook'ta Takip Et
•  Twitter'da Takip Et
•  Google+'da Takip Et

Yazı Fontları

Yazı Fontları

Bilgisayarım > Yerel Disk  > Windows > Fonts Klasörünün içine atınız..

Veya ; Bilgisayarım > Denetim Masası > Yazı Fonts klasörün içine atınız.

Torrent İndir

http://turbobit.net/pf8c6hoxwlj6/10000.Adet.Yazi.Fontu.zip.html

http://uploaded.net/file/la94zygu/5000.Adet.Yazi.Fontu.rar

Blogger Loading Efekti

DEMO

1- Öncelikle aşağıda ki kodu Temanız'da </head> kodunun hemen bir satır üstüne yapıştırınız.

<script src='https://arlina-design.googlecode.com/svn/progressbar.js'/>

2- Daha sonra aşağıdan dilediğiniz kodu seçip temanız'da  ]]></b:skin> kodunun hemen bir satır üstüne ekleyiniz.

.pace {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 12px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 25px;
  border: 2px solid #29d;
  background-color: #fff;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;

  -webkit-transition: width 1s ease-in-out 1s linear;
  -moz-transition: width 1s ease-in-out 1s linear;
  -ms-transition: width 1s ease-in-out 1s linear;
  -o-transition: width 1s ease-in-out 1s linear;
  transition: width 1s ease-in-out 1s linear;

  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  max-width: 190px;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: 3px;
  top: 3px;
  height: 15px;
  font-size: 12px;
  background: #29d;
  color: #29d;
  line-height: 60px;
  font-weight: bold;
  font-family:  Helvetica, Arial, "Lucida Grande", sans-serif;
}

.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: inline-block;
}

.pace.pace-inactive {
  display: none;
}

DEMO

Social Sidebar Widget

Demo

Eklentiyi kurmak için öncelikle Blogger'a ardından blogunuza, sonra Şablon'a ve oradan da HTML'yi düzenle kısmına giriş yapın.

• </body> tagı üzerine aşağıdaki kodları yapıştırın...

<div id='social-sidebar'>
<ul>
<li>
<a class='entypo-twitter' href='https://twitter.com/' target='_blank'>
<span>Twitter</span>
</a>
</li>
<li>
<a class='entypo-gplus' href='http://plus.google.com/' target='_blank'>
<span>google+</span>
</a>
</li>
<li>
<a class='entypo-tumblr' href='http://www.tumblr.net/' target='_blank'>
<span>tumblr</span>
</a>
</li>
<li>
<a class='entypo-facebook' href='http://www.facebook.net/PsdFonlar' target='_blank'>
<span>facebook</span>
</a>
</li>
<li>
<a class='entypo-rss' href='http://feeds.feedburner.com/PsdFonlar' target='_blank'>

<span>feedburner</span>
</a>
</li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul,#social-sidebar ul li,#social-sidebar ul li a {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;z-index:999;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>

Blogger Loading Efekti

Loading / Yüklenme özelliğini kurmak için öncelikle Blogger'a ardından blogunuza, sonra Şablon'a ve oradan da HTML'yi düzenle kısmına giriş yapın.

</body> tagı üzerine aşağıdaki kodları yapıştırın...

<!-- Animated Page Loading Effect for Blogger Start --><style>#abt-page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvrEoptnqUw7v3iJU2krE0_sAsVc0Ka-G-aMy6oIHtDnJG63O9nv2qyjrL4szUibJeAnhmpQ3Nef1LD9-s8yVMmciQlRGAKAe9wvzprJyIPmy09Ksh6xBk8q3X7CghcO5LGe8NysevYo/s200/load6.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em;}</style><script type="text/javascript">//<![CDATA[$(document.body).append('<div id="abt-page-loader">
Loading...</div>
');$(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});//]]></script><!-- Animated Page Loading Effect for Blogger End -->

Anti AdBlock

             

Eklentiyi kurmak için öncelikle Blogger'a ardından blogunuza, sonra Şablon'a ve oradan da HTML'yi düzenle kısmına giriş yapın.

 ]]></b:skin>  üzerine aşağıdaki kodu yapıştırın...

#swp_noadblocker { display:none;}

</head> tagı üzerine aşağıdaki kodları yapıştırın...

<script type="text/javascript"> if (document.getElementById("swp_noadblocker") != undefined) { } else { alert("It seems like your browser has the Adblocker or other similar software installed. So if you wish to view the website please to consider disabling the ad blocker on your browser. Thanks for your corporation, "); setTimeout("nag()",12000); } </script>

</body> tagı üzerine aşağıdaki kodları yapıştırın...

<script type="text/javascript" src="http://ftp.bauer-power.net/misc/tc/advertisement.js"></script>

Kaydedin...

Yerleşim / Gadget ekle diyerek aşağıdaki kodları yapıştırın...

<style>#g207{position:fixed!important;position:absolute;top:0;top:expression
((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document
.body.scrollTop)+"px");
left:0;width:100%;height:100%;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);display:block}#g207 p{opacity:1;filter:none;font:bold 16px Verdana,Arial,sans-serif;text-align:center;margin:20% 0}#g207 p a,#g207 p i{font-size:12px}#g207 ~ *{display:none}</style><noscript><i id=g207><p>Please enable JavaScript!<br />Bitte aktiviere JavaScript!<br />S'il vous pla&icirc;t activer JavaScript!<br />Por favor,activa el JavaScript!<br /><a href="http://antiblock.org/">antiblock.org</a></p></i></noscript><script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<p>Please disable your ad blocker!<br/>This site is supported by the advertisement <br/> Please disable your ad blocker to support us!!! </p>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display
)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>

Blogger Otomatik Slider Manşet Eklentisi

<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}



@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}



@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}



@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost">
</div>
<script src="https://arlina-design.googlecode.com/svn/slider-post.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"blog adresiniz",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Blogger Post Otomatik Devamını Oku Eklentisi

Blogger’un şablonunu, özel tema tasarımı yapılmış gibi sol tarafta ölçekli resim, sağ tarafta devamını oku, yazı uzunluk sayı ayarı,  hatta yazılarınızı her iki yana yaslayan (justify) yazı biçimi ile özelleştirebileceksiniz. Devamını oku yazı linkine resim dahi ekleyebilirsiniz.

Blogger da yazının devamını oku biçimini atlama aralığı kullanarak yaptığımızı biliyorsunuz.

Yazılarınızı ister atlama aralığı ile kesin isterseniz kesmeyin ekleyeceğiniz kodlar ile yapacağınız ayarlar, Ana Sayfa da görülecek olan tüm yazı ve resimler otomatik biçimlendirilmiş olarak muntazam bir sıra ve düzende görülecektir.

Tüm bu işlemleri yapabileceğiniz uzun bir yazı hazırladım. Kodları sağlıklı bir şekilde eklediğiniz de, Blogger temanız tıpkı özel temalar gibi görülecektir. Kodları şablonunuza eklemek için aşağıdaki adımları takip etmeniz yeterli olacaktır.  ⇒ Öncelikle! Blogger temanızın bir yedeğini alın. Kumanda Paneli →  Şablon → HTML’yi Düzenle→ile blog’unuzun kodlarını açın. Şablon içine tıklayarak Ctrl+F ile aşağıdaki kodu bulun. Sonucu görmek ister misiniz ?

Canlı Demo

Kod:1

 </head>  

Bulduğunuz kodun hemen üstüne aşağıdaki kodları ekleyin.

Kod:2

<script type='text/javascript'>
var thumbnail_mode = "yes"; 
summary_noimg = 430; 
summary_img = 340; 
img_thumb_height = 150;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
    if(img.length>=1) {    
        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;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

Şimdi bu kodu bulun. Bu kod genelde birkaç tane olabilir. Test bloglarında yaptığım kontrolde “ hasJumpLink “ kodunun hemen üst kısmında olan kod olarak çalıştı. Birkaç deneme ile çalışan kodu bulabilirsiniz.Temalarda farklılık gösterebilir.
Kod:3

<data:post.body/> 

Bu kodu bulduktan sonra, kodu silerek aşağıdaki kod’u yapıştırın ve kaydedin. Tüm işlemler doğru yapıldı ise eklentimiz doğru çalışacaktır.
Kod:4

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='readmore' expr:href='data:post.url'>Devamını oku »</a>
</b:if>
</b:if>

Blogger eklentimizin özelleştirilmesi :

1. Eklediğimiz kodlarda resim GenişlikxYükseklik ve Yazı uzunluğunu belirleyebilirsiniz.

Kod 2 içindeki satırları bulun.

→ var thumbnail_mode = "yes"; ⇒ Ana Sayfa yazınızdaki resmi “yes” göster “no” gösterme

→ summary_noimg = 430; ⇒ Yazıda resim yok ise yazının uzunluğunu belirler.

→ summary_img = 340; ⇒ Yazıda resim varsa, yazının uzunluğunu belirler.

→ img_thumb_height = 200; ⇒ Resmin yüksekliğini belirler.

→ img_thumb_width = 200; ⇒ Resmin uzunluğunu belirler.

Devamını Oku isminin özelleştirilmesi :

Yukarıda yaptığımız işlemlerden sonra Devamını Oku » ismini CSS kod yardımı ile özelleştirelim. Aşağıdaki kodu şablonda bulun.
Kod:5

]]></b:skin>

Bulduğunuz bu kodun hemen üstüne aşağıdaki kodları ekleyin.
Kod:6

.more{
float:right;
color:#000;
font-size:13px;
}

(Kaynak: http://guney59.blogspot.com.tr/2014/05/blogger-post-otomatik-devamn-oku.html )

Blogger Angry Birds Fare İmleci Ekleme

Blogger Angry Birds Fare İmleci Ekleme

-Blogger Yönetici Paneline giriş yapın.

-Yerleşim > Gadget ekleye tıklayın.

-Açılan pencerede HTML/JavaScript'e tıklayın ve beğendiğiniz fare imlecini kopyalayıp yapıştırın.

-Kaydet butonuna basın. İşlem tamam!

  

  

  

  

  

Blogger Yuvarlanan Duyuru Eklentisi

Blogger Yuvarlanan duyuru eklentisi ekleme

Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz ve aşağıda ki kodu açılan sayfaya yapışırıyoruz.

Eklentideki arka plan rengini değiştirmek için kodun içerisinde bulunan  background-color:#e84343 kodunu bulup kırmızı olan renk kodunu istediğiniz bir renk koduyla değiştirebilirsiniz.

Hoşgeldin!


Yayınlarımıza Yorum Yapmayı Unutmayın.! İyi Bloglar.!


BlogKaynagi.blogspot.com

DUYURU