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

Jalan Tikus Blogger Tema

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

Update Template Jalan Tikus Blogger Version 3.0

İndir

Demo 2

Responsive Web Tasarım

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ı

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ü

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ı

Blogger Profesyonel E-Ticaret Teması

Shopingo Free Version

Demo | İndir

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

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

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

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

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

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

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

Blogger Arama Kutusu

Blogger Arama Kutusu

 Resimde gördüğünüz bu CSS arama kutusunu eklemek için Blogger kumanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izledikten sonra aşağıdaki kodları yapıştırıp kaydetmeniz yeterli olacaktır.

<div id='arama'> 
<form action='/search' id='searchThis' method='get'> 
<input id='searchBox' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' size='20' type='text' value='Aranacak kelime'/>
                  <input id='searchButton' type='submit' value=''/> 
</form> 
</div> 
<style> 
#arama { 
  float:right; 
  width:258px; 
  padding-top:50px; 
padding-bottom:30px; 
padding-left:10px; 
padding-right:-0px; 
  margin:0 0 20px 0; 
background: url(https://lh3.googleusercontent.com/-Ahg_Mo-oIBs/UHxflUJpGFI/AAAAAAAAESQ/cTIHURTBtn8/s271/s.png)  no-repeat 0px 0px; 
  -webkit-border-radius:5px; 
  -moz-border-radius:5px; 
  border-radius:5px 
  height:auto; 
border:1px solid #656E75; 
color:#000; 
font-weight:bold; 
} 
#searchThis { 
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDuCS142pih84gd5Ux_QEEE4rRVBza_TW6hY-jFubBRi7xwZ8iwdzGrW9YHfxj7c-Nw4ixDTcFwdO2RTpQbnd5GBanmf6RuVelANj9V-xtBr88bgFaXfopVyMJvgamZ91qMgIgnIb5BwU/s1600/search.png") no-repeat scroll 0 0 transparent; 
display: inline; 
float: right; 
margin:0 50px 0 0; 
height: 24px; 
width: 212px; 
padding:2px 0 0 2px; 
} 
#searchBox, #searchButton { 
background: none; 
border:none; 
} 
#searchBox { 
width:158px; 
color:#bbb; 
font-size: 12px; 
} 
#searchButton{ 
width:42px; 
padding:0px; 
cursor:pointer; 
} 
</style>

Bu arama kutusu HTML ile oluşturulduğundan “Google Custom Serach” deki gibi akıllı değildir ve detaylı arama yapmaz. Aradığınız terim ile blogdaki terimin %100 eşleşmesi gerekir.