Şık Tasarımlı Demo ve Download Butonu Oluşturmak

Merhaba ;

Özellikle indirme ve tema paylaşımı yapan blog veya sitelerin kullandığı indirme ve demo görünüm butonunu sizlerle paylaşmak istedim.
Oldukça şık ve dinamik bir yapıya sahip olan bu eklentiyi nasıl sitenize veya bloğunuza eklemeniz gerektiğini anlatıcam.

1. K.Paneli > Şablon > Html Düzenle adımlarını takip ediyoruz ve ( ctrl+f ) yardımıyla </head> etiketini buluyoruz , hemen üstüne aşağıdaki kodu yapıştırıyoruz ...

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2. Yine aynı sayfadan ctrl+f yardımıyla " </style> " kodunu buluyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz.

.bstbuton{margin:20px auto;padding:20px 0;width:200px}
.bstbuton a{background:#fff;color:#666;display:block;font-size:17px;font-weight:700;font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2}
.bstbuton a:before{content:'\f019';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.bstbuton span{background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial',Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.bstbuton .up{background:#e25734;margin:-30px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.bstbuton .down{margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform:translate(0,-50px);transition:350ms}
.bstbuton:hover .up{opacity:1;transform:translate(0,0)}
.bstbuton:hover .down{opacity:1;transform:translate(0,-90px)}
.bstbutondemo{margin:20px auto;padding:20px 0;width:200px}
.bstbutondemo a{background:#e25734;color:#fff;display:block;font-size:17px;font-weight:700;font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;transition:350ms}
.bstbutondemo a:before{content:'\f08e';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.bstbutondemo a:hover{color:#fff}
.bstbutondemo span{background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial',Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.bstbutondemo .up{background:#444;margin:-28px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.bstbutondemo:hover .up{opacity:1;transform:translate(0,0)}

3. Şablon kısmına eklememiz gereken kodlar bu kadar.
Aşağıda verdiğim kodları yazılarınızda bu butonları nerede görüntülemek istiyorsanız oraya yapıştırmanız gerekiyor.

<div class="bstbutondemo">
<a href="http://bloggereklentideposu.blogspot.com">Demo</a>
<span class="up">Demo için tıklayın</span></div>
<div class="bstbuton">
<a href="http://bloggereklentideposu.blogspot.com">Download</a>
<span class="up">İndirmek için tıklayın</span>
<span class="down">Bloggereklentideposu.blogspot.com</span></div>

Bütün işlem bu kadar.Hayırlı olsun :)

Devamı >

Blogger Kayıt Şablonu Nedir ? Ne İşe Yarar ?

Merhaba ;

Blogger altyapısı ile blog sahibi olan birçok kişinin bilmediği ve yaygın olmamasına rağmen kullananların vazgeçilmezi olan kayıt şablonunu sizlere anlatmak istedim.

* Kayıt Şablonu Nedir ?

Öncelikle kayıt şablonu ; Bütün yazılarımızda kullandığımız kalıplaşmış olan ve sürekli kullandığımız cümleleri otomatik olarak yazılarımıza eklenmesini sağlayan blogger'a özel bir eklentidir.

Örneğin ben her yazımın başına "Merhaba ;" , sonuna ise "Bütün işlem bu kadar.Hayırlı olsun" cümlelerini ekliyorum.

Kayıt şablonu sayesinde bu kelimeler otomatik olarak yazımın başlangıcına ve sonuna ekleniyor.

Benim için vazgeçilmez değil ancak yazılarını belli kalıp üzerinde , sabit giriş ve sonuç cümleleri olan  blogger arkadaşlarımın işini kolaylaştıracağından eminim.

* Kayıt Şablonunu Nasıl Kullanabilirim ?

Blogger K.Paneli  > Ayarlar  > Yayınlar ve Yorumlar  > Kayıt Şablonu yanındaki " Ekle " Butonuna tıklıyoruz ve açılan pencereye yazılarımızda sürekli kullandığımız veya kullanacağımız cümleleri yazıyoruz ve sağ üst köşede bulunan " Ayarları Kaydet " butonuna tıklıyoruz.

Bütün işlem bu kadar.Hayırlı Olsun :)

Devamı >

Blogger manuel twitter ve facebook sayaç eklentisi

Merhaba ;

Sosyal paylaşım ile ilgili birçok eklenti paylaştık ancak bloglar ve websitelerde sosyal medyanın ciddi derecede etkisi olması , birçok yeni eklentiyide beraberinde getiriyor.
Bu eklentilerden bir taneside bloğunuzun tasarımına katkı sağlamanın yanında , şık ve sadece görünüşü ile dikkat çeken facebook ve twitter sayaç eklentisini sizlerle paylaşmak istedim.

Kuruluma geçmeden eklentiden görüntü ;

Kurulum ;

Ayrı ayrı kullanmak isteyen arkadaşlar için 2 ayrı kod halinde paylaşıyorum.

Twitter için ;

<center>
<div style="width:100px;height:100px;margin-bottom:-23px;border-top: 0px solid #F2F2F2; border-right: 0px solid #8A8A8A; border-left: 0px solid #F2F2F2;">
<img src="http://i51.tinypic.com/qoym4o.png" />
</div>
<br />
<span sans ms style=" background-color:#F2F2F2; border-top: 0px solid #F2F2F2; border-right: 0px solid #8A8A8A; border-left: 0px solid #F2F2F2; border-bottom: 0px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 0px solid #8A8A8A; border-right: 0px solid #ddd; border-left: 0px solid #8A8A8A; border-bottom: 0px solid #ddd; padding: 0px 1px;">1000<blink>+</blink></span> Twitter Takipçimiz Var!</span></center>

Facebook için ;

<center>
<div style="width:100px;height:100px;margin-bottom:-23px;border-top: 0px solid #F2F2F2; border-right: 0px solid #8A8A8A; border-left: 1px solid #F2F2F2;">
<img src="http://i53.tinypic.com/16irvuq.png" />
</div>
<br />
<span sans ms style=" background-color:#F2F2F2; border-top: 0px solid #F2F2F2; border-right: 0px solid #8A8A8A; border-left: 0px solid #F2F2F2; border-bottom: 0px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 0px solid #8A8A8A; border-right: 0px solid #ddd; border-left: 0px solid #8A8A8A; border-bottom: 0px solid #ddd; padding: 0px 1px;">1000<blink>+</blink></span> Facebook Takipçimiz Var!</span>
</center>

Son olarak Kırmızı renkteki sayı değerini manuel olarak ayarlayınız.
Bütün işlem bu kadar.Hayırlı olsun :)

Devamı >

Blogger adblock engellemek

Merhaba ;

Hemen hemen bütün website ve bloglarda reklam görmek mümkün.
Bu reklamlar çoğu zaman ziyaretçilere sinirli dakikalar vaat ediyor :)
Tabiki bloglarda ve websitelerde reklam olmak zorunda ancak abartmadan.
Bazı blogger arkadaşlar içerik değil reklam bloğu açmış durumda , blogda reklamdan başka içerik yok.
Günümüzde oldukça popüler olan ve yaklaşık 40 milyondan fazla kullanıcısı bulunan chrome eklentisi adblock , gelirlerini website ve bloglardan sağlayan kişilerin başını ağrıtmış durumda.

Adblock eklentisi kurulup , aktif hale getirildiği zaman ziyaret edilen website ve bloglardaki reklamları otomatik olarak pasif hale getiriyor ve reklamsız bir website ve blog vaat ediyor...

Sizlere vereceğim kod sayesinde ziyaretçiler adblock aktif hale bloğumuza girmeye çalıştığında , sayfada içerik görünmeyecek ve beyaz kutuda ablock eklentisini pasif hale getirmeleri istenecek.
Aslında birçok ziyaretçi bana kızacaktır ama emeklerin karşılıksız kalmasını hiçbir zaman istemem.

Kurulum ;

Kurulumu oldukça basit.

Kumanda paneli > yerleşim > gadget ekle > html/javascript (+) diyoruz ve aşağıdaki kodu ekliyoruz.

<style>#h237{position:fixed !important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:0;width:102%;height:102%;background-color:#f9f9f9;opacity:.97;display:block;padding:10% 0}#h237 *{text-align:center;margin:0 auto;display:block;filter:none;font:bold 14px Verdana,Arial,sans-serif;text-decoration:none}#h237 ~ *{display:none}</style><div id="h237">
<span><br /><a rel="dofollow" href="http://bloggereklentideposu.blogspot.com/">[ Enable JavaScript ]</a></span></div>
<script>window.document.getElementById("h237").parentNode.removeChild(window.document.getElementById("h237"));(function(l,m){function n(a){a&&h237.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("h237"==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/AVvXsEiIFD-Yf_9DVPx3KlBCeDIj3H38bHWGMbu0ztOzCRZzZg0PreaNWJIylYcXetAFikJAtutiEeMQ7gB9SQMaHD1N61VUNRGVZ87Pk4qDL1i-wAloVG1fZb40gH0l9Dinyo6tivdt5_cCZkjI/s1600/Disable+Adblock.png" height="350" width="699" alt="" /> <a href="JavaScript:window.location.reload()">[ Lütfen Adblock eklentisini devre dışı bırakınız.]</a>'+("</"+a+">"),"h237");h.addEventListener&&b.deferExecution(function(){b.getElementBy("h237").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.h237=h237=new n;h.addEventListener?l.addEventListener("load",n,!1):l.attachEvent("onload",n)})(window);</script>

Bütün işlem bu kadar.Hayırlı olsun :)

" Anahtar Kelimeler : adblock engelleme kodu, adblock engelle, blogger adblock engelleme, blogger adblock engelleme kodu, adblock engelleme, adblock engelleme eklentisi, blogger adblock engelleme eklentisi " 

Devamı >

Blogger yazı boyutu düzenleme eklentisi

Merhaba ;

Kullanımı yaygın olmayan ancak birçok blogger tarafından değişmez bir eklenti olarak kullanılan blogger yazı boyutu düzenleme eklentisini sizlerle paylaşmak istiyorum.

Bu eklenti , bloğumuzun ziyaretçileri yazılarımızı daha rahat ve daha uygun biçimde okuyabilmeleri içindir.
Bu eklenti , blog yazılarının yanına eklenerek yazı büyütüp , yazı küçültme işlemini tek bir butonla yapabilmektedir.

Eklentiden bir görüntü ;

Kurulum ;

Kumanda paneli > şablon > html düzenle'ye gelip şablonumuzu html olarak açıyoruz.

Ardından ctrl+f yardımıyla aşağıdaki kodu buluyoruz.

</head>

Ve hemen üstüne aşağıdaki kodları ekliyoruz.

<!-- bloggereklentideposu.blogspot.com kod başlangıcı -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){

//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array(&#39;span&#39;,&#39;.section2&#39;);
section = section.join(&#39;,&#39;);

// Reset Font Size
var originalFontSize = $(section).css(&#39;font-size&#39;); 
$(&quot;.resetFont&quot;).click(function(){
$(section).css(&#39;font-size&#39;, originalFontSize);
});
// Increase Font Size
$(&quot;.increaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});

// Decrease Font Size
$(&quot;.decreaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});
});
</script>
<!-- bloggereklentideposu.blogspot.com kod sonu -->

Daha sonra aşağıdaki kodu buluyoruz.

<div class='post-header-line-1'/>

Ve hemen altına aşağıdaki kodları ekliyoruz.

<!-- bloggereklentideposu.blogspot.com kod baslangıcı -->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSBefS9Sc1Nl1lInCpv5QTKN45UdaKIC9o8cDFcumxZhU9Bx-xv84YYWRKfMf2LCpgOFRkaHjHgVTSiFyHsvgENWDyT0h5tdm1zC2lz58H0t5IS2OXbxWzSIna0_w5MydQHtwx9D7mx0M/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEveVblE8MkZt_oiAcMcZSYA_xHwP-7R6vyIN2v4zjPuWXYcoV9M88KVotgD6dIAoiwhbSYkCsOLD3XregEBgZEN9fZAIeLw_3W0OKkUpUm_SvCChtIhgeJwjJiG_E6oftBBzOBxDPkg/s1600/bigger-font+-+Copy.png'/></a> 
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuyQMPt19Td1FHzb8wNgzBAfqIlgnx48DXNaQDZ4sLExb0PNq0l31d4o7gaUXYPd8D78bHnY0lLvrhRbIbiMOkDZFdTBrhOR318avM4TfzUCIzmopleB0FQTn-vwTDsRpaEDGwxSOvOi4/s1600/smaller-font.png' style='cursor: hand;'/></a> 
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMt1earLcXvx-XJKYpwKJCzIdUWAgkgQdukZYcoKTmVxFVRybdoSUfNwhDFsg4Nef9m9uNzUEzqK8DNN6jS8kJk22_HSRrwh9Ajjee57FHPtgztA-xtsIbDvJNzeaLSUQ9gbBw4GfluJk/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- bloggereklentideposu.blogspot.com kod sonu -->

Son olarak aşağıdaki kodu buluyoruz.

<data:post.body/>

Ve aşağıdaki kod ile değiştiriyoruz.

<span><data:post.body/></span>

Daha sonra kaydedip çıkıyoruz.
Bütün işlem bu kadar.Hayırlı olsun :)

" Anahtar kelimeler ; blogger yazı boyutu düzenleme eklentisi, blogger yazı boyutu değiştirme eklentisi, blogger yazı boyutu, blogger, blogger yazı boyutunu düzenlemek, blogger otomatik yazı boyutu değiştirme " 

Devamı >

Blogger yana esneyen sosyal buton eklentisi

Merhaba ;

Blogger ile ilgili birçok tasarım açısından şık ve kullanışlı sosyal eklenti paylaşmıştık.
Bu sosyal eklentide şık ve kullanışlı olması nedeniyle sizlerle paylaşmak istedim.

Kurulum ;

Kumanda paneli > yerleşim > gadget ekle > html/javascript (+) diyoruz ve aşağıda bulunan linkteki kodları ekliyoruz.

https://drive.google.com/file/d/0B2NrnLfIOfS7QlRlRmFqcDQ2bHc

Daha sonra facebook , twitter ve google+ hesaplarımızın url adreslerini kodlardaki adresler ile değiştiriyoruz.
Bütün işlem bu kadar.Hayırlı olsun :)

" Anahtar Kelimeler : blogger sosyal buton eklentisi, blogger sosyal buton, blogger hareketli sosyal buton eklentisi, blogger flash sosyal buton eklentisi, blogger sosyal flash eklenti, blogger yana esneyen sosyal buton eklentisi " 

Devamı >

Blogger 404 sayfası oluşturmak

Merhaba ;

404 Not Found hatasını , internet kullanan her bireyin daha önce gördüğünün garantisini verebilirim :)
404 Not Found hatası , daha önce yazılan yazıların sonradan silinmesi , yenilenmesi durumunda sözkonusu sayfaya girildiği anda karşımıza çıkan hata sayfasıdır.

Her blogda ve websitede olması gerektiğini düşünüyorum.






Kuruluma geçmeden önce eklentiden bir görüntü ;

Kurulum ;

Kumanda paneli > arama tercihleri > hatalar ve yönlendirmeler altındaki "sayfa bulunamadı sayfası için özel içerik" yanındaki "düzenle" butonuna tıklıyoruz.

Çıkan html kutusuna aşağıda bulunan linkteki kodu ekliyoruz ve "http://bloggereklentideposu.blogspot.com" url'sini bloğumuzun url'si ile değiştiyoruz.

404 sayfası kodu için tıklayınız ...

Bütün işlem bu kadar.Hayırlı olsun :)

" Anahtar kelimeler : blogger 404 sayfası, blogger 404 sayfası oluşturmak, blogger 404 sayfası düzenlemek, blogger 404 not found "

Devamı >

Blogger 3D arama kutusu eklemek

Merhaba ;

Yaklaşık 2 gün önce diğer bloğumdaki arama kutusunu beğenen bir ziyaretçi , iletişim formunu kullanarak arama kutusunu çok beğendiğini ve kodlarını paylaşmamı istedi.
Bende o arama kutusu için yaklaşık 1 saatimi vermiştim ve kendime göre , bloğumun tasarımına göre düzenlemiştim ancak o formu dolduran kişi o kadar zahmete girmiş ve bana ulaşmış diyerek kodları paylaştım.
( Bu kodu paylaşmamda etken olan , konu ile ilgili ufak bir anımdı.)

Anladımki blogger'ın her eklentisininde olduğu gibi arama kutusununda tasarımının özelleştirilmesi gerekiyor.
Ancak kod bilen var bilmeyen var.
İnsanlar bu kodlardan kaçabilmek için blog açıyorlar zaten :)
Fazla uzatmadan her tasarıma uyum sağlayabilen ve şık görünümlü 3 boyutlu arama kutusunun kodlarını sizinle paylaşmak istedim.

Kurulum ;

Kumanda paneli > yerleşim > gadget ekle > html/javascript (+) diyoruz aşağıdaki linkte bulunan kodu ekliyoruz.

< Blogger 3D arama kutusu kodu >

Daha sonra kaydedip çıkıyoruz.
Bütün işlem bu kadar.Hayırlı olsun :)

" Anahtar kelimeler : blogger arama kutusu, blogger 3d arama kutusu, blogger arama kutusunu değiştirmek, blogger hazır arama kutusu, blogger arama kutusunu düzenlenemek "

Devamı >