Blogger Web Tasarım

Blogger Adblock Engelleme Kodu

2017-12-19T13:12:00.001-08:00

- Google Chrome, yandex, Mozilla Firefox ve Safari gibi arama motorlarının geliştirmiş olduğu eklentiler.

- Web siteri ve blogger sitelerinde bulunan Adsense ve Adsense türü reklamlarını engelleyici arama motorları eklentileri.

- Bu ilk iki maddeyi doğrulayacak olan AdBlock eklentisi gibi reklamları engelleme eklentilerinin varlığı web sitelerinin ve blogger sitelerinin gelirlerini etkileyici nedenlerden biridir.

- Blogger hesabınıza giriş yaparak Yerleşim sekmesine gelin. Yerleşim sekmesinde bulunan Gatget Ekle bölümlerinden en az kullandığınız Gatget bölümünden HTML/JavaScript Ekle diyoruz ve aşağıdaki kodu kopyalayıp HTML/JavaScript içine yapıştırın ve kaydedin.

Blogger Adblock Engelleme Kodu

<style scoped='' type='text/css'>#h235{top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");position:fixed !important;position:absolute;top:0;left:0;width:100%;height:100%;display:block;background:#fcfcfc;opacity:.98;padding:8% 0;bottom:0;right:0;z-index:9999!important;}#h235 *{text-align:center;margin:0 auto;display:block;font:bold 14px Verdana,Arial,sans-serif;text-decoration:none}#h235 * a {padding:13px 16px!important;background-color:#F15A3C;color:#fff!important;font-weight:600;font-size:16px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:5px;display:block;margin:16px auto;clear:both;width:21%;transition:all 0.3s ease-out;}#h235 * a:hover {opacity:.7;}#h235 ~ *{display:none}</style><div id="h235"> <span>Lütfen Javascript'i etkinleştirin!<a href="http://www.enable-javascript.com/">Javascript'i etkinleştirin!</a></span></div>
<script>window.document.getElementById("h235").parentNode.removeChild(window.document.getElementById("h235"));(function(l,m){function n(a){a&&h235.nextFunction()}var h=l.document,p=["i","s","u"];n.prototype={rand:function(a){return Math.floor(Math.random()*a)},getElementBy:function(a,b){return a?h.getElementById(a):h.getElementsByTagName(b)},getStyle:function(a){var b=h.defaultView;return b&&b.getComputedStyle?b.getComputedStyle(a,null):a.currentStyle},deferExecution:function(a){setTimeout(a,250)},insert:function(a,b){var e=h.createElement("span"),d=h.body,c=d.childNodes.length,g=d.style,f=0,k=0;if("h235"==b){e.setAttribute("id",b);g.margin=g.padding=0;g.height="100%";for(c=this.rand(c);f<c;f++)1==d.childNodes[f].nodeType&&(k=Math.max(k,parseFloat(this.getStyle(d.childNodes[f]).zIndex)||0));k&&(e.style.zIndex=k+1);c++}e.innerHTML=a;d.insertBefore(e,d.childNodes[c-1])},displayMessage:function(a){var b=this;a="abisuq".charAt(b.rand(5));b.insert("<"+a+'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3TqQOQX1BDyPhOWutWfnZxP79v2NnjkPtLrYpIIoKAHl8p0ur93hXZ52RaNTyxWfrEL3TSOXLAu9Il_L6UFsWrUl28_wh5PuuazTaTgu5ZIcBfnhyUS2jR7jezu9oupr44W4QoOIXgU/s1600/bloggereklentileri.png" height="300" width="500" alt="" /> <a href="JavaScript:window.location.reload()">ADBLOCK DURDURUN</a>'+("</"+a+">"),"h235");h.addEventListener&&b.deferExecution(function(){b.getElementBy("h235").addEventListener("DOMNodeRemoved",function(){b.displayMessage()},!1)})},i:function(){for(var a="DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense".split(","),b=a.length,e="",d=this,c=0,g="abisuq".charAt(d.rand(5));c<b;c++)d.getElementBy(a[c])||(e+="<"+g+' id="'+a[c]+'"></'+g+">");d.insert(e);d.deferExecution(function(){for(c=0;c<b;c++)if(null==d.getElementBy(a[c]).offsetParent||"none"==d.getStyle(d.getElementBy(a[c])).display)return d.displayMessage("#"+a[c]+"("+c+")");d.nextFunction()})},s:function(){var a={'pagead2.googlesyndic':'google_ad_client','js.adscale.de/getads':'adscale_slot_id','get.mirando.de/miran':'adPlaceId'},b=this,e=b.getElementBy(0,"script"),d=e.length-1,c,g,f,k;h.write=null;for(h.writeln=null;0<=d;--d)if(c=e[d].src.substr(7,20),a[c]!==m){f=h.createElement("script");f.type="text/javascript";f.src=e[d].src;g=a[c];l[g]=m;f.onload=f.onreadystatechange=function(){k=this;l[g]!==m||k.readyState&&"loaded"!==k.readyState&&"complete"!==k.readyState||(l[g]=f.onload=f.onreadystatechange=null,e[0].parentNode.removeChild(f))};e[0].parentNode.insertBefore(f,e[0]);b.deferExecution(function(){if(l[g]===m)return b.displayMessage(f.src);b.nextFunction()});return}b.nextFunction()},u:function(){var a="ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare.".split(","),b=this,e=b.getElementBy(0,"img"),d,c;e[0]!==m&&e[0].src!==m&&(d=new Image,d.onload=function(){c=this;c.onload=null;c.onerror=function(){p=null;b.displayMessage(c.src)};c.src=e[0].src+"#"+a.join("")},d.src=e[0].src);b.deferExecution(function(){b.nextFunction()})},nextFunction:function(){var a=p[0];a!==m&&(p.shift(),this[a]())}};l.h235=h235=new n;h.addEventListener?l.addEventListener("load",n,!1):l.attachEvent("onload",n)})(window);/* CSS AdBlock : bloggerwebtasarim.blogspot.com */</script>

Kaynak: https://bloggereklentileri.blogspot.com.tr/2016/04/blogger-adblock-pasiflestirme-eklentisi.html

Blogger Sosyal Medya eklentileri

2017-06-07T03:50:00.000-07:00

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>

3rdball Video Blogger Template

2017-01-24T02:31:00.001-08:00

DEMO İNDİR

CelebVision Blogger Galeri Teması

2017-01-05T05:03:00.000-08:00

DEMO İNDIR

Platform : Blogger
Tema İsmi : CelebVision
Yayıncı : www.bloggertema.net
Açıklama: Blogger galeri teması olarak çok güzel bir tasarıma sahip olan CelebVision teması sahip olduğu özelliklerle de galeri blog ve siteler için oldukça ideal bir temadır. CelebVision temasını Blogger moda teması olarak kullanıma uygundur.

Özellikler

Şık manşet eklenti
Duyarlı tasarım
Resimli benzer yazılar
Header alanında sosyal butonlar
VE daha fazlası

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

2016-08-21T12:27:00.004-07:00

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&alt=json-in-script&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

SORA BUZZ BLOGGER ŞABLON

2016-08-21T06:49:00.000-07:00

CANLI DEMO

INDIR

SORA BUZZ BLOGGER ŞABLON

Kaydol: Kayıtlar (Atom) Kaldırma

2016-02-19T15:36:00.001-08:00

Tüm blogların anasayfasında yazıların altında görüntülenen "Kaydol: Kayıtlar (Atom)" ibaresini kaldırmak mümkün. Esasında bu ziyaretçilerin yazılarıza abone olması için bir kolaylık ancak, çoğu kullanıcının Feedburner'i kullanması sonucunda pek bir önemi kalmadı. Zaten Feedburner kullananlar sayfalarında farklı yerlerde besleme adreslerini belirtiyorlar.

Kaydol Kayıtlar Atom Yazısını Kaldırmak isityorsanız, yapılması gereken çok basit; Blogunuzun HTML düzenle seçeneğine tıklayın. Açılan sayfada Widget Şablonlarını Genişlet yazısının yanında yer alan kutucuğa tıklayın. Temanızda

<b:include name='feedLinks'/>

kodunu bulun ve silin.

İslami Blogger Tema

2016-02-19T15:08:00.002-08:00

DEMO=Önizleme

İNDİR

Şablon Adı:  Ramazan Dergisi İslam Blogger Şablon
Platformu: Blogspot / Blogger
Yazar: Sana Aurangzeb
Tasarımcı: http://www.bloggertheme9.com
yeniden tasarlanması ve Seo tarafından: http://islamicbloggertemplate.blogspot.com/
Yayın Tarihi:  08 Ekim 2014
renk: Kahverengi, Beyaz
Şablon Özellikleri:  . Dergi Stil, 3 Sütunlar Düzen, 3 Sütunlar Footer, Otomatik Corousel kaymak, Otomatik Readmore, Açılır Menü, Sayfalandırmayı, Önceki ve Sonraki Widget, Dişli Yorumlar, Opengraph Meta veri, Seo Dostu Numaralandırma
Lisans: Creative Commons Attribution 3.0

Blogger Sosyal Medya Butonları

2016-01-30T10:20:00.000-08:00

Blogger'a JQuery Animasyonlu Sosyal Medya Sekme Butonlarını ekleme:

1. Blogger kontrol panelinize giriş yapın > Şablon
2. Şablonunuzu yedeklemeyi unutmayın.
3. HTML'yi Düzenle
4. </body> kodunun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<div id="mefmed">
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/Meftun_Sosyal_bar.js">
</script>
</div>
<link href='http://meftun-mede.googlecode.com/svn/trunk/Meftun_Sosyal_bar.css' rel='stylesheet' type='text/css'/>

<script type="text/javascript"> $(document).ready(function(){ $.mefSocialBar({ items:
{ facebook: { url: '#', text: 'Facebook Profili' },
twitter: { url: '#', text: 'Twitter Profili' },
google: { url: '#', text: 'Google+ Profili' },
youtube: { url: '#', text: 'Youtube Profili' },
pinterest: { url: '#', text: 'Pinterest Profili' },
stumbleupon: { url: '#', text: 'Stumbleupon Profili' },
reddit: { url: '#', text: 'Reddit Profili' },
rss: { url: '#', text: 'RSS Feed' }, },
show: 8, position: "left",
skin: "clear" }); });
</script>

Not: Zaten jQuery kütüphanesi kaynak kodu blogunuzda yüklü varsa kırmızı renkle işaretlediğim kodu eklemeyin.
(<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>)

Özelleştirme

Eklentiyi özelleştirmek ve denemek için Online Html Editör de istediğiniz şekilde aşağıdaki değişikleri yapabilirsiniz.

URL'yi ekleme: "#" işaretli olan yerlere sosyal medya hesaplarınızı yazın.
Pozisyonları değiştirme: Widget konumunu isteğinize göre değiştirin:
Kodlama:

“left” = Sol,
“right” = Sağ,
“top” = Yukarı,
“bottom” = Aşağı

Unutmayın: Büyük Harfler kullanmayın, aksi takdirde çalışmaz.
Sosyal Medya butonları: Sosyal medya butonları yukarıdaki örnekte "8" tanedir. Azaltmak veya çoğaltmak isterseniz; istemediğiniz buton bölümünü script kodundan silerek, yada istediğiniz butonu ekleyerek, show:8, yazan yerdeki sayısal değeri 10 veya 7,6,5 gibi değiştirebilirsiniz.
Kullanabilir Butonlar: Yeşille işaretlediğim yerlerde bu sosyal medya iconlarını kullanabilirsiniz;
twitter, facebook, rss, google+, youtube, stumbleupon, reddit, pinterest, instagram, vk, linkedin, tumblr, xing, myspace, digg, flickr, foursquare, vimeo, soundcloud
Arayüzü değiştirme: Sosyal Medya Barda iki Tema var yani “clear” = açık renk ve “dark” = siyah renkte arka plan. Güncel “clear” = açık renk temasını değiştirmek için JavaScript kodlamada “dark” = siyah renk olarak değiştirebilrsiniz.

5. Son olarak Şablonu kaydet diyip çıkıyoruz.

(Kaynak: http://www.meftunmede.com/2015/02/animasyonlu-sosyal-medya-sekme-butonlari.html )

Blogger Hazır Sosyal Paylaşım Eklentisi

2016-01-30T10:00:00.001-08:00

-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:

İvonesia Blogger Tema

2016-01-30T09:48:00.000-08:00

Demo

İndir

TEMANIN ÖZELLİKLERİ
Responsive
SEO Dostu
Mobile Uyumlu
Dinamik Şablon
Adsense Uyummlu
Kişisel Blog İçin İdeal
Disqus Yorum Sistemi
Otomatik Devamını Oku Eklentili
Responsive Menü
Yukarı Çık Eklentili
Abone Ol Widget Eklentili
İletişim Formu Eklentili

Masqoli Responsive Blogger Tema

2016-01-22T11:20:00.001-08:00

Masqoli Responsive Blogger Tema

İNDİRME LİNKLERİ

CANLI ÖNİZLE | TURBOBİT İNDİR | MEGA İNDİR

Masqoli duyarlı düzeni ile modern bir Blogger şablonu olduğunu. Bu blogspot blog sistemi için temiz, kullanışlı, şık, blog, teknoloji, dergi, portföy, fotoğraf ve profesyonel bir görünüm şablonu. Bu kullanılarak yapılan HTML5 , CSS3 , JQuery. Sen kaliteli bir kullanıcı deneyimi-esnek blog yapmak için bu şablonu kullanabilirsiniz. Peki neden geç bu şaşırtıcı şablonu satın almak ve profesyonel bir web sitesi yapmak.

Duyarlı - şablon en iyi masaüstü ve mobil cihazlarda hem görünüyor. Bu işaretli Android , iPad2 , iPhone 4s , iPhone 3G , Nook renk , Blackberry Torch 9800 , Google Nexus .

Gereksinim: Blogger / Blogspot sunucusu barındırılan tüm görüntüleri emin olun.

Çekici Özellikleri Masqoli
Duyarlı düzeni
HTML5 VE CSS3 E-posta subscrption Formu "Yeni"
Destek RTL ve Diller tüm
Son Yorumlar Widget "Yeni"
JQuery Slider Mesaj Featured "Yeni"
Arşiv Sayfa Şablonu "Yeni"
Youmax eklenti görüntülemek için Youtube video oynatıcı ile web sitenizde tam kanal video listeleri. "Yeni"
Şık Blogger dişli Yorum besleme "Yeni"
Destek facebook, disqus yorum sistemleri
Özel 404 hata sayfası
Arşiv şablonları destekler
Arka plan, renk, başlık özelleştirme
İlgili Yayınlar Widget
Popüler Yayınlar Widget
Sosyal paylaşım Widget
Sayfa gezinme
Dost SEO
Bütün büyük tarayıcılar Destek
Profesyonel Yönetici Düzeni

GameMix Blogger Teması

2016-01-11T13:38:00.001-08:00

GameMix Blogger Teması

Blogger için uyarlanan , GameMix teması , oyun blogları için tasarlanmış , GameMix temasını özelleştirerek , farklı alanlarda da kullanabilirsiniz..

DEMO ||| INDIR

Yazı Fontları

2015-12-28T08:14:00.000-08:00

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

Jalan Tikus Blogger Tema

2015-12-25T13:24:00.000-08:00

Demo: http://emulatortr.blogspot.com.tr/

Update Template Jalan Tikus Blogger Version 3.0

İndir

Demo 2

Responsive Web Tasarım

2015-12-25T04:51:00.000-08:00

Responsive Web Tasarım
Tasarlanmış olan sitelerin, kullanılan cihazdan çok, sitenin gösterildiği alanın boyutunu baz alarak geliştirilen bir tasarım sistemidir.

Responsive Web Tasarım Özellikleri
Responsive Tasarım; kullanılan cihazların çözünürlüğüne göre tasarlanarak, tüm tarayıcılarda aynı ve farklı çözünürlüklerde ekranın kendisini şekillendirmesi anlamına gelmektedir. Son dönemde çok meşhur olan responsive tasarım Yurtdışında yaygın olarak kullanılmaktadır.

Responsive web tasarım yaptırdığınız zaman siteniz için ayrıca mobil web tasarımı yaptırmanız gerekmemektedir. Çünkü responsive tasarım demek mobil tasarım demektir.
Sitenizi ziyaret eden kullanıcı hangi cihazdan girerse girsin sitenizi profesyonel çözünürlükte görecektir.

Unutmayın ki, responsive web tasarımda, tarayıcınızı küçülttüğünüz zaman, altta kaydırma çubuğu çıkmaz. Kaydırma çubuğu çıktığı zaman, yazıların ve resimlerin yarısı gözükmedir. Buda ziyaretçileriniz açısından çile haline gelmekte ve siteden çıkma oranlarını yükseltmektedir.

Profesyonel bir web sitesine sahip olmak istiyorsunuz, gerçekten çok uygun fiyatlara
Responsive Tasarım yaptırmanızı öneririz. Ayrıca mobil tasarım yaptırmanıza gerek kalmayacak ve sitenize daha çok trafik çekerek, kullanım kolaylığını arttıryor olacaksınız.

Responsive Tasarım Nedir?
Responsive web tasarım, duyarlı, uyumlu web tasarım anlamına da gelir. Son yıllarda adını sıkça duyduğumuz bu web tasarım şekli ilk olarak 2010 yılında ortaya çıktı ve son bir kaç yıldır dünyada ve ülkemizde popüler oldu.

Responsive tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanır.

Bilindiği gibi web sitelerine mobil cihazlardan girildiğinde ziyaretçiler siteyi görüntülemekte ve gezmekte güçlük yaşarlar. Eğer girdikleri site responsive yada mobil site değilse, okumak istedikleri alanı ancak zoom yaparak, kısıtlı bir alanı görüntüleyebilirler ve kulanım zorluğu çekerler. Site menülerini gezmekte oldukça zordur ve menüler mobil uyumlu olmadığı için genellikle gitmek istedikleri linki bulamayabilirler.

Responsive sitelere mobil cihazlardan girildiğinde menüler şekil değiştirip genellikle üstten açılacak şekilde kullanımı kolay bir versiyona dönüşür. Fontlar ve imajlar alt alta gelerek ekranda zoom yapmadan kolayca okunacak şekilde sıralanır. Hatta mobil versiyonda önem derecesi düşük elementler gizlenir, sadece ziyaretçiye sayfayla ilgili en yalın halde bilgi gösterilir.

Arama motorlarıda responsive siteleri ciddi şekilde destekliyor. Bir sayfanın arama motorlarında hem kendi alan adı hem de m.alanadi.com gibi farklı subdomain altında bir mobil versiyonunun olmasındansa tek url ile sayfanın responsive yapılması daha uygun buluyor. Çünkü mobilden yapılan aramalarda genellikle arama motorları sayfanın mobil uyumluluğuna dikkat etmeksizin sonuçları sıralıyor.

Mobilden web site ziyaretleri dünyada %25 seviyelerine yükseldi ve kısa sürede daha da artacak. Bu sebeple responsive özellikli web sitelerinde ciddi bir artış öngörülüyor.

Düğün Teması

2015-12-25T04:32:00.000-08:00

Demo

İndir

ŞABLON ÖZELLIKLERI

Düğün Mag Duyarlı Blogger Şablon 1 Sağ kenar çubuğu ve 4 sütun altbilgi ile 2 sütun vardır. Beyaz, kırmızı ve gri gibi bu şablonda kullanılan üç renk. Düğün Mag Duyarlı Blogger Şablon Duyarlı tasarımları ile kodlanmış temiz. Gözler Şablon sosyal kitap işareti birikimini paraya. Sen Reklamlar hazır şablonun para kazanabilirsiniz. Düğün Mag Duyarlı Blogger Şablon Sayfa navigasyon menüsü, Otomatik yazılan küçük, Dergi blog Galeri tarzı, biraz daha özellikleri olduğunu. Bu eşsiz destek şablonu çağdaş şablon.

Sosyal Medya Menü

2015-12-21T12:06:00.002-08:00

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

<style> .abt-box{font: 25px/24px normal 'Denk One', sans-serif;display: inline-block;position: relative;width: 95%;max-width: 280px;margin: 0 auto 15px auto;padding: 16px;background-color: rgba(238, 238, 238, 0.1);box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin-left:15px;}.abt-social {width: 95%;max-width: 280px;padding-top: 8px;padding-left: 8px;padding-right: 8px;}.abt-social a {text-decoration: none !important;}.abt-social ul {margin: 0;padding: 0;list-style: none;}.abt-social ul li {display: inline;margin: 0;padding: 0;text-indent: 0}.abt-social ul li a.facebook {border-left: 65px solid rgba(59, 89, 152, 1);color: rgba(59, 89, 152, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.facebook p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.facebook:hover {background: rgba(59, 89, 152, 1);border-left: 0px solid rgba(59, 89, 152, 0.1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.facebook:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.abt-social ul li a.twitter {border-left: 65px solid rgba(64, 153, 255, 1);color: rgba(64, 153, 255, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.twitter p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.twitter:hover {background: rgba(64, 153, 255, 1);border-left: 0px solid rgba(64, 153, 255, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.twitter:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.abt-social ul li a.gplus {border-left: 65px solid rgba(219, 74, 57, 1);color: rgba(219, 74, 57, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.gplus p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.gplus:hover {background: rgba(219, 74, 57, 1);border-left: 0px solid rgba(219, 74, 57, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.gplus:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.abt-social ul li a.pinterest {border-left: 65px solid rgba(174, 45, 39, 1);color: rgba(174, 45, 39, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.pinterest p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.pinterest:hover {background: rgba(174, 45, 39, 1);border-left: 0px solid rgba(174, 45, 39, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.pinterest:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.abt-social ul li a.linkedin {border-left: 65px solid rgba(0, 123, 182, 1);color: rgba(0, 123, 182, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.linkedin p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.linkedin:hover {background: rgba(0, 123, 182, 1);border-left: 0px solid rgba(0, 123, 182, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.linkedin:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}</style><div class="abt-social"><ul><li><a class="abt-box facebook" href="https://www.facebook.com/BloggerWebTasarim" target="_blank"><p>15K+</p>Facebook </a></li><li><a class="abt-box twitter" href="https://twitter.com/xxxxxxxxx" target="_blank"><p>10K+</p>Twitter</a></li><li><a class="abt-box gplus" href="https://plus.google.com/u/0/b/+xxxxxxxxxxx" target="_blank"><p>5K+</p>Google+</a></li><li><a class="abt-box pinterest" href="http://www.pinterest.com/xxxxxxxxxxxxx/" target="_blank"><p>4K+</p>Pinterest</a></li><li><a class="abt-box linkedin" href="http://www.linkedin.com/company/xxxxxxxxxxxx" target="_blank"><p>10K+</p>Linkedin</a></li></ul></div>

Blogger E-Ticaret Teması

2015-12-12T13:44:00.000-08:00

Blogger Profesyonel E-Ticaret Teması

Shopingo Free Version

Demo | İndir

Seçili Alanın Rengini Değiştirme

2015-12-12T13:08:00.002-08:00

Yazı Kopyalama Rengini Değiştirme

Seçilen Yazı Rengi Nasıl Değiştirilir?

1- Blogger paneline girip, Şablon kısmından HTML'i düzenle'i tıklayınız. Daha Sonra Ctrl + F Yaparak ]]></b:skin> Kodunu taratınız. Ve kodun hemen üstüne aşağıda ki kodları yapıştırınız.

::-moz-selection { background:#c00; color:#fff;}
::selection { background:#c00; color:#fff;
}

İşlem bu kadar.
[CSS]

Blogger Sitemap

2015-12-12T13:04:00.000-08:00

Blogger Sitemap (Site Haritası) Sayfası Oluşturma

SiteMap Önizleme

1 - Aşağıda ki kodu sayfanızın HTML bölümüne yapıştırıp SİTE ADRESİNİZ kısmına kendi site adresinizi yazınız. Ve kaydediniz. İşlem bu kadar

<style scoped="" type="text/css">
#toc-outer {
  color:black;
  font:normal 11px/14px Arial,Sans-Serif;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  padding:0;
  text-align:left;
}

#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;
  background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;
}

.itemposts {
    float: left;
    height: auto;
    overflow: hidden;
    width: 47%;
    box-shadow: 1px 1px 5px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #FFF;
    margin: 3px 5px 8px;
    padding: 0px 3px;
}

.itemposts h6 {
    border-bottom: 1px solid #CCC;
    color: #333;
    font: bold 12px Arial;
    height: 15px;
    overflow: hidden;
    text-transform: none;
    margin: 0px 0px 5px;
    padding: 2px 6px !important;
}

.itemposts h6 a:hover {
  color:#38f;
  text-decoration:none;
}

.itemposts img {
  background-color:#fff;
  border:1px solid #ccc;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  float:left;
  height:65px;
  margin:0 7px 5px 0;
  padding:3px;
  width:65px;
  z-indent:99999px;
}

.itemposts .iteminside {}

.itemposts .itemfoot {
    border-top: 1px solid #CCC;
    clear: both;
    overflow: hidden;
    padding: 4px 5px;
}

.itemposts .itemfoot a.itemrmore {
  color:#333;
  float:right;
  font-weight:bold;
  text-decoration:none;
}

.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}

#itempager {
  clear:both;
  padding:10px 0;
}

#pagination,

#totalposts {
  color:#000;
  display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;
  text-align:center;
  padding:0;
}

#pagination span, #pagination a {
    color: #FFF;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #068BC9;
    background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);
    border: 1px solid #3161C2;
    text-decoration: none;
    border-radius: 10px;
}
#pagination a:hover {background-color:#333}

#pagination span.actual {background-color:black}

#pagination span.hidden {display:none}
</style> <script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Konu Sayısı:",
    jumpPageLabel  = "Arası",
    commentsLabel  = "Yorum",
    rmoreText      = "Devamı ►",
    prevText       = "Önceki",
    nextText       = "Sonraki",
    siteUrl        = "http://www.SİTEADRESİNİZ.com",
    postPerPage   = 10,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script> <script src="https://tolgagnl.googlecode.com/svn/sitemap2.js"></script>

Önizleme

Blogger Düzenle (Wrech) İkonlarını Kaldırma

2015-12-12T12:44:00.001-08:00

Düzenle İkonları Nasıl Kaldırılır?

1- Öncelikle blogger paneliniz'den Şablon kısmına girip HTML'i Düzenle butonuna tıklayarak bu ]]></b:skin> kodu arayınız.

2- Kodun hemen bir satır üstüne Aşağıda ki kodu yapıştırıp kaydediniz. İşlem bu kadar.

Aşağı da ki kodu olduğu gibi kopyalayınız.

.quickedit {display:none;}

Blogger Google Analytics Ekleme

2015-12-12T12:27:00.000-08:00

Blogger'a Google Analytics Takip Kodu Nasıl Eklenir?

1- Öncelikle analtytics'e giriyoruz ve üst menüden 'Yönetici'e tıklıyoruz ve 'Mülk Ayarları'nı tıklıyoruz. Ve karşımıza çıkan sayfada 'İzleme Kimliği'ni kopyalıyoruz.

2- Daha sonra blogger paneline giriyoruz. Ayarlar -> Diğer yolunu izliyoruz. Karşımıza çıkan sayfada 'Analytics web mülkü kimliği kimliği' yazan bölüme kopyaladığımız kimliğimizi yapıştırıyoruz.

(Google Yazı Fontu)

Blogger Loading Efekti

2015-12-12T12:06:00.000-08:00

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

Spoiler Butonu

2015-12-12T11:15:00.000-08:00

DEMO

Örnek Demo Sayfa: http://dizihakkinda.blogspot.com.tr/2015/12/ezel.html

Spoiler-İpucu koduyla okuyucunun ilk başta okumaması gereken isterse okuyacağı detaylar ile ilgili bir buton. Özellikle Film-Dizi sitelerinde filmin konusu hakkında ipucu veren yazılar bu şekilde gizlenir, filmin detayı finali gibi ipuçları buraya yazılır. Hatta "Spoiler İçerir" uyarısıyla verilir... İşte bunu yapabilmek için aşağıdaki kodu kullanacağız...

1- Blogger panelinizden Şablon -> HTML'i Düzenle bölümüne geliniz. Ctrl + F Tuşlarına basarak ]]></b:skin> kodunu taratınız. Ve hemen bir satır üstüne aşağıda ki kodu giriniz.

#flippy {
    text-align: center;
}

#flippy button {
    background: #aa65c7;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 3px 0px 0px #883da7;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}

#flippy button:hover, #flippy button:focus {
    background: #9e4fbf;
    outline: none;
}

#flippanel {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}

#flippanel {
    padding: 24px;
    display: none;
}

2- Ardından </body> kodunu taratarak aşağıda ki kodları hemen bir satır üstüne yapıştırınız.

<script>
$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
});
</script>

3- Daha sonrasında aşağıda ki HTML kodlarını kullanarak butonu kullanabilirsiniz.

<div id="flippy"><button>Cekidot</button></div>
<div id="flippanel">
---Buraya spoiler yazısı gelecek---
</div>

İşlem tamamdır