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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5lWWqBUhWXReZGnNEVlurElOfQdTmGYI2vyBPMs-QTFF8Xnm1LF7fYZtzrtEHBqYs31oHaihIZGxKOX9n4Izbq3I4xhvZfuR_3lXiaVyH_w0_99fo8GeKz1D4hQg7wDeYCmwPzeYly1K9/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.

Blogger Arşiv Ekleme

Blogger blogunuzda böyle bir arşiv tablosu oluşturmak istiyorsanız Blogger kumanda paneline giriş yaptıktan sonra Sayfalar > Yeni Sayfa yolunu takip edin ve resimde gösterdiğim gibi aşağıdaki kodları sayfanın HTML bölümüne ekleyin.

<div id="tabbed-toc"> 
<span class="loading">Sayfa yükleniyor...</span></div> 
<br /> 
<script type="text/javascript"> 
var tabbedTOC = { 
    blogUrl: "http://bloggerwebtasarim.blogspot.com", 
    containerId: "tabbed-toc", 
    activeTab: 1, 
    showDates: true, 
    showSummaries: true, 
    numChars: 200, 
    showThumbnails: true, 
    thumbSize: 40, 
    noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsw2RUCwYOz34u3OnQQxlYYZTsjph60ceQdEbXdvMmr5Ph838f7XCWv1bO5gu8cUSDv_luWn7iF4EDHiMrVXYQ4QEJF9w3iFtgV-F9-2IDFXXQxNkwcKb8ACpq_0RjpjZMwrbO87F9oLAP/s500/resimyok.gif", 
    monthNames: [ 
        "Ocak", 
        "Şubat", 
        "Mart", 
        "Nisan", 
        "Mayıs", 
        "Haziran", 
        "Temmuz", 
        "Ağustos", 
        "Eylül", 
        "Ekim", 
        "Kasım", 
        "Aralık" 
    ], 
    newTabLink: true, 
    maxResults: 99999, 
    preload: 0, 
    sortAlphabetically: true, 
    showNew: 7, 
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>Yeni!</em>" 
}; 
</script> 
<script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script> 
<style> 
#tabbed-toc { 
width: 99%; 
margin: 0 auto; 
overflow: hidden !important; 
position: relative; 
color: #222; 
border: 0; 
border-top: 5px solid #FC0204; 
background-color: #1D1D1D; 
-webkit-transition: all 0.4s ease-in-out; 
} 
#tabbed-toc .loading { 
display:block; 
padding:5px 15px; 
font:normal bold 11px Arial,Sans-Serif; 
color:#FFF; 
} 
#tabbed-toc ul, 
#tabbed-toc ol, 
#tabbed-toc li { 
margin:0; 
padding:0; 
list-style:none; 
} 
#tabbed-toc .toc-tabs { 
width: 24.8%; 
float: left !important; 
} 
#tabbed-toc .toc-tabs li a { 
display:block; 
font:normal bold 10px/28px Arial,Sans-Serif; 
height:28px; 
overflow:hidden; 
text-overflow:ellipsis; 
color:#ccc; 
text-transform:uppercase; 
text-decoration:none; 
padding:0 12px; 
cursor:pointer; 
  -webkit-transition: all 0.3s ease-in-out; 
} 
#tabbed-toc .toc-tabs li a:hover { 
background-color: #515050; 
color: #FFF; 
} 
#tabbed-toc .toc-tabs li a.active-tab { 
background-color: #FFFC03; 
color: #222; 
position: relative; 
z-index: 5; 
margin: 0 -2px 0 0; 
} 
#tabbed-toc .toc-content, 
#tabbed-toc .divider-layer { 
width: 75%; 
float: right !important; 
background-color: #F5F5F5; 
border-left: 5px solid #FFFC03; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
-webkit-transition: all 0.3s ease-in-out; 
} 
#tabbed-toc .divider-layer { 
float:none; 
display:block; 
position:absolute; 
top:0; right:0; bottom:0; 
} 
#tabbed-toc .panel { 
position:relative; 
z-index:5; 
font:normal normal 10px Arial,Sans-Serif; 
} 
#tabbed-toc .panel li a { 
display: block; 
position: relative; 
font-weight: bold; 
font-size: 11px; 
color: #222; 
line-height: 2.8em; 
height: 30px; 
padding: 0 10px; 
text-decoration: none; 
outline: none; 
overflow: hidden; 
-webkit-transition: all 0.3s ease-in-out; 
} 
#tabbed-toc .panel li time { 
display:block; 
font-style:italic; 
font-weight:400; 
font-size:10px; 
color:#666; 
float:right; 
} 
#tabbed-toc .panel li .summary { 
display:block; 
padding:10px 12px; 
font-style:italic; 
border-bottom:4px solid #275827; 
overflow:hidden; 
} 
#tabbed-toc .panel li .summary img.thumbnail { 
float:left; 
display:block; 
margin:0 8px 0 0; 
padding:4px; 
width:72px; 
height:72px; 
border:1px solid #dcdcdc; 
background-color:#fafafa; 
} 
#tabbed-toc .panel li:nth-child(even) { 
background-color: #DBDBDB; 
font-size: 10px; 
} 
#tabbed-toc .panel li a:hover, 
#tabbed-toc .panel li a:focus, 
#tabbed-toc .panel li a:hover time, 
#tabbed-toc .panel li.bold a { 
background-color:#222; 
color:#FFF; 
outline:none; 
-webkit-transition: all 0.3s ease-in-out; 
} 
#tabbed-toc .panel li.bold a:hover, 
#tabbed-toc .panel li.bold a:hover time { 
background-color:#222; 
} 
@media (max-width:700px) { 
#tabbed-toc { 
background-color:#fff; 
border:0 solid #888; 
} 
#tabbed-toc .toc-tabs, 
#tabbed-toc .toc-content { 
overflow:hidden; 
width:auto; 
float:none !important; 
display:block; 
} 
#tabbed-toc .toc-tabs li { 
display:inline; 
float:left !important; 
} 
#tabbed-toc .toc-tabs li a, 
#tabbed-toc .toc-tabs li a.active-tab { 
background-color:#222; 
color:#ccc; 
} 
#tabbed-toc .toc-tabs li a.active-tab { 
color:#000; 
} 
#tabbed-toc .toc-content { 
border:none; 
} 
#tabbed-toc .divider-layer, 
#tabbed-toc .panel li time { 
display:none; 
} 
} 
</style>

Kodlarda kırmızı renkle gösterdiğim http://bloggerwebtasarim.blogspot.com yerine kendi blog adresinizi yazmayı unutmayın!

Blogger Tarayıcı Uyumluluğu

Bloğunuzu tüm tarayıcılarla uyumlu hale getirin!

Blogger tarayıcı hatalarından kurtulmak için gelişmiş meta kodla tüm tarayıcılarla bloğunuzu uyumlu hale getirin. Aşağıda verdiğimiz kodu Meta açıklamaların olduğu yere ekleyin.

Yeni blogger internet taracıyı meta etiketi:

<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>

Kodları ekledikten sonra artık bloğunuz tüm internet tarayıcıları ile uyumlu hale gelecektir.

Sumatra Sikuai Tema

Sumatra Sikuai

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

İndir-Download

Özellikler

• Dişli comment sistemi
• Okuyucular blogger Standart Dişli yorum sistemi kullanarak mesaj hakkında yorum yapabilirsiniz.
• Izgara sistemi
• JQuery Plugin masonry

Alternatif

Newsly Responsive Blogger Tema

Newsly blogger şablonu güzel bir görünüm ve temiz düz stil duyarlı blogger tasarımıdır. Haber, dergi veya kişisel web siteleri için bu tema mükemmel

Temel Özellikler

• % 100 Duyarlı Tasarım
• Sınırsız Renk Özelleştirme
• Editör Advance: Değişim arka plan rengini, arka plan resimleri, renkleri, yazı tiplerini, yazı boyutu yükleyin.
• Otomatik Blog'a özetler
• SEO Optimize kontrol
• Otomatik Lightbox için flickr ve diğer Görüntüler açık tespit
• Sekmeli Menü
• Çoklu Yazar Desteklenen
• 4 Sütun Footer Alanı
• Duyarlı Flexslider
• News Ticker
• CSS3 + HTML Açılır Menü
• Etiket By son Mesaj
• İlgili mesajlar desteği
• Reklamlar Hazır
• Peki Belgeler
• Dişli Yorumlar
• Daha Yayınla yükle
• JQuery görüntü önizlemesi
• Özel Hata 404 Sayfa
• Kullanıcı Dostu Yönetici Düzeni

Demo Newsly - Duyarlı Çok Amaçlı Blogger Şablon

Newsly - Duyarlı Çok Amaçlı Blogger Şablon

İndir

Not: download linki işe yaramazsa, lütfen bize ulaşın

Mega Mag Responsive Magazine Blogger

Mega mag blogger şablonu başka güzel, modern bir blogger şablonu nedir. Onun temiz ve taze tarzı duyarlı blogger tasarım ve yüksek kullanıcı dostu blogger şablonu. Haber, dergi ve kişisel web siteleri için mükemmel Bu tema.

Mega Mag Şablon Özellikleri

• RTL Destek Kontrol
• % 100 Duyarlı Tasarım
• Sınırsız Renk Özelleştirme
• Editör Advance: Değişim arka plan rengini, arka plan resimleri, renkleri, yazı tiplerini, yazı boyutu yükleyin.
• Duyarlı Mega Menü
• Otomatik Blog'a özetler
• SEO Optimize kontrol
• Otomatik Lightbox için flickr ve diğer Görüntüler açık tespit
• Sekmeli Menü
• Çoklu Yazar Desteklenen
• Simgeler ile jQuery görüntü bindirmesi etkisi
• 4 Sütun Footer Alanı
• YouTube Video Desteği (Herhangi yazılan tarzı)
• Duyarlı Reklam Widget (Google Adsense Destek)
• Duyarlı Flexslider
• News Ticker
• CSS3 + HTML Açılır Menü
• Etiket By son Mesaj (12 Post tarzı)
• Yazar Bilgisi Widget
• Crop olmadan Yüksek Kalitede Görüntü Optimize
• İlgili Yayınlar Widget Serin
• Touch cihazları ile JqueryOverlay efekt desteği
• Peki Belgeler
• Dişli Yorumlar
• Daha Yayınla yükle
• Duyarlı Site Haritası Widget
• Özel Hata 404 Sayfa
• Kullanıcı Dostu Yönetici Düzeni.

Demo & Kaynak:

Ücretsiz Mega Mag indirin - Duyarlı Magazine Blogger Şablon

Not: download linki işe yaramazsa, lütfen bize ulaşın

WarmMag Premium Tema

WarmMag Premium Responsive Blogger Template

Demo | İndir

Warm Mag Özellikleri

• . Duyarlı Tasarım Şablon
• · Otomatik Blog Post Button "Devamı" özetlemek Ve
• · With Thumbnail Otomatik Görüntü Kırpma (Ana Sayfa ve Etiket Page Only)
• · Aşağı Drop ile CSS ve HTML Bankası Menüsü
• · Header Sağ tarafta Otomatik Tarih göster
• · Sekmeler Widget'lar (jQuery Powered By) hazır
• · Image Slider (jQuery Powered By)
• · Basit Kullanıcı Dostu Arama Kutusu
• · Mesaj Altbilgi Oto sayfalandırmayı Eklendi
• · Sosyal Paylaş Widget (Post Altbilgi Yerleştirilmiş)
• · Arama Kutusu (Resmi 404 sayfa) ile özel hata 404 Sayfa
• · İlgili Mesaj Widget (Post Altbilgi Yerleştirilmiş)
• · Reklamlar Afiş hazır
• · Meta Anahtar kelimeler ve açıklama Desteği (Resmi Meta Açıklaması Desteği)
• · Rastgele Mesaj Seçici
• · Etiket By son Mesaj
• · 4 Sütun Footer Alanı
• · Titreme Resim Galerisi
• · Widget Resmi "E-POSTA İLE TAKİP"

Squid Clean Responsive Blogger Tema

Demo | İndir

Temel Özellikler:

• Duyarlı Tasarım Şablon
• Otomatik Blog Post özetler
• With Thumbnail Otomatik Görüntü Kırpma (Ana Sayfa ve Etiket Sayfa Only)
• Aşağı Drop ile CSS ve HTML Bankası Menüsü
• Header Sağ tarafta Otomatik Tarih göster
• Sekmeler Widget'lar hazır (jQuery Powered By)
• Image Slider (jQuery Powered By)
• Modern Kullanıcı Dostu Arama Kutusu
• Mesaj Altbilgi Oto sayfalandırmayı Eklendi
• Sosyal Paylaş Widget (Post Altbilgi Yerleştirilmiş)
• Arama Kutusu (Resmi 404 sayfa) ile özel hata 404 Sayfa
• İlgili Mesaj Widget (Post Altbilgi Yerleştirilmiş)
• Reklamlar Afiş Hazır
• Meta Keywords Ve Açıklama Desteği (Resmi Meta Açıklaması Desteği)
• Etiketler By Modern Yeni Mesaj
• Hızlı Masaj Seçeneği (Resmi İletişim Formu Kullanarak)
• 4 Sütun Footer Alanı
• Titreme Resim Galerisi
• Widget "E-POSTA İLE TAKİP" Odofficial

Blogger Türkçe Karakter Sorunu ve Çözümü

Blogger'da temalardan kaynaklanan Türkçe karakter sorunu nedenleri ile ğ ı ü ö ş gibi karakterler hata verip anlamsız karakterler çıkmaktadır.

Blogger Türkçe karakter sorununu çözmek oldukca basittir, yapılması gereken şablon düzenleme bölümünde meta taglardan,

Google fonts kodunu çıkartmak olacaktır.
Şablon tema şeklini bozmadan kolay yoldan font karakter sorununu çözün.

Blogger Türkçe karakter sonunu ve çözümü:

Şablon > HTML Düzenle < Meta tag bölümünden aşağıdaki kodu silin ardından kaydedin.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,700|Oswald:400' rel='stylesheet' type='text/css'/>

Bu işlem ardından artık bloğunuzda Türkçe karakter sorunu yaşamayacaksınız.

Blogger Galeri Sayfası

Bunun gibi bir galeri sayfası oluşturmak için;

1.Adım: ]]></b:skin> kodundan önce aşağıdaki kodları ekleyin.

/* Blogger Zoom Gallery  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_iWLkX2Fq6pdmOBXSiNdQsteULTZw1YJwg_jvKXc-40WbMnZmPb3MVAmw7yJEZH73I64KkokdP4qFCNfD5VpsPxm-Wq_3DGWSMM5fpup0m9lJzk_VvcEdPbWoxmdm4Cqpk3fjMHls5E-U/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */

2.Adım: </head> kodundan önce aşağıdaki kodları ekleyin. 

Buradaki script kodu slider çalışmasında veya başka bir hareketli nesnenin çalışmasında sıkıntı oluşturabilir. Deneyerek kullanınız. sadece yaklaştırma efekti uyguluyor.

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

3.Adım: Sayfa düzenlemeden yeni bir sabit sayfa oluşturun ve sayfanın HTML kodları bölümüne aşağıdaki kodları ekleyerek sayfayı yayınlayın. 

<ul class="thumb">
<li><a href="#"><img src="Resim 1 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 2 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 3 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 4 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 5 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 6 Link" alt="" /></a></li>
</ul>

Galerideki yeni fotoğraf eklemek için; 
Galeriye yeni bir resim eklemek için galeri sayfasının HTML bölümüne eklediğiniz kodlara yeni bir li satırı ekleyebilirsiniz.Örneğin;