25 Ekim 2015 Pazar

Blogger Apk Teması




Redxcode Blogger Apk Teması , gerçekten çok hoş bir tasarım insanın içinden apk blog sitesi açası geliyor.Hemen temanın özelliklerinden bahsedeyim.

Temanın Özellikleri
-Responsive Blogger Teması
-Türkçe Responsive Blogger Teması
-Sosyal Paylaşım Eklentili
-Slider Eklentili
-Yukarı Çık Buton Eklentisi
-Hazır Reklam Alanları
-Apk Blogger Teması Türkçe

Tema Kurulumu
-Temayı aşağıdan indirdikten sonra;
-Blogger Admin Panel > Şablon Yedekle/Geri Yükle Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.

Slider kurulumu
-Blogger kodlarından Ctrl + F tuşlarına basarak NivoSlider ı arayın.Aşağıdaki resimdeki yere gelin.
-Slider kodlarından;
 src=' ' yazan yere slider resimlerinin url adreslerini ekliyoruz
href=' ' yerine resme tıklandığında hangi adrese gitmesini istiyorsak o adresi yazıyoruz
title=' ' yazan yerede resmin üzerine gelince hangi yazının görünmesini istiyorsak onu yazıyoruz
<img alt=' '  yazan yere ise bloga eklediğiniz resmin açıklamasını yazıyoruz seo açısından önemlidir
Width ve height değerleriyle oynamanıza gerek yok en uygun ayarda yapılmıştır.
blogger-apk-turkce-temasi-kurulumu

Temayı kurduktan sonra soldaki widgetin görünmesi için ;
kodlardan Tavsiye Edilen yazarak aşağıdaki resimde olan yere geliyoruz ve Sosyal yazan yere orda gözükmesini istediğimiz etiketin ismini yazıyoruz ben Sosyal etiketini kullandım siz istediğinizi kullanabilirsiniz ve bu şekilde widgetin gözükmesini sağlayabilirsiniz.

blogger-apk-turkce-temasi-wigdet





Auto Razz Responsive Tema



Flatform Türü: Blogger Şablon Adı: Otomatik Razz Responsive Blogger Templates intructions:Öğretici Blogger Şablon yükleyin Yazar Adı: IdBlanter Tasarım Url: www.idblanter.com Yayınevi:www.kaizentemplate.com Açıklama: Otomatik Razz Responsive Blogger Şablonları Kişisel Bloglar Siteleri İçin mükemmel Modern ve tam duyarlı (tarayıcınızı yeniden boyutlandırma deneyin) Ve Blanter Craft Sen Haberler, yazılar, Tube Videoları, Fotoğrafları, Linkleri ve daha Gönderme By On The Run Have Fun Can Serin Ve Sofistike görünüyor. Bazı Hata düzeltildi.

I LOVE Blogger Tema


I Love Blogger Template
English Description:
I Love is a Beauty Blogger Template created specially for makeup blogs, hair blogs, fashion websites & general feminine blogs. Every element of this theme is well crafted and makes your site look professional website and you get maximum exposure to your content.
  Türkçe Açıklama: 
I Love teması güzellik, makyaj, saç, moda ve güzellik web siteleri ve genel kadınsı bloglar için özel olarak tasarlanmıştır. Bu temanın her alanı iyi hazırlanmış ve sitenizin profesyonel bir web sitesi olmakla beraber ve size içerik sunmada maksimum etkiyi yaratmakta yardımcı olur.

 


24 Ekim 2015 Cumartesi

Dinamik Demo Ve İndir Butonu [CSS]


Dinamik Demo Ve İndir Butonu [CSS]

Önizle


TIKLA GÖR



Anlatım (Blogger İçin)


1- Blogger paneliniz'de Şablon bölümüne girip HMTL'i düzenle'ye tıklayınız. Ardından    CTRL + F kombinasyonunu uygulayarak ]]></b:skin> kodunu taratınız. Ve hemen bir satır üstüne aşağıda ki kodları yapıştırınız.

#wrap {
    margin: 20px auto;
    text-align: center;
}
#wrap br {
    display: none;
}
.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.btn-slide2 {
    border: 2px solid #efa666;
}
.btn-slide:hover {
    background-color: #0099cc;
}
.btn-slide2:hover {
    background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.btn-slide2:hover span.circle2 {
    color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.btn-slide2 span.circle2 {
    background-color: #efa666;
}
.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}


2- Aşağıda ki HTML kodları makale yazarken HTML bölümünde yapıştırarak kullanabilirsiniz.


<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Sayfada Aşağı İnince Sağda Çıkan Sosyal Medya Eklentisi

Nasıl Kurulur?
-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapışıtırıyoruz düzeltmemiz gereken yerleri renkli olarak gösterdim.
Bu eklentiyi herhangi bir gadgete ekleyebiliriz illaki sağdaki gadget olacak diye bir şey yok.


<style>
#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJcqVC206Zfnq1zN2hkG8WjhfBS5pNhLbZFLVAtPBuJ4Qy1NyN2IqcJITOZeGpwzXDx8U5iNvHHyIvGF4i9Yqz5J1uHp8jr7Urh2WcJ8jT5F6fGugVRwoyy_NTi8JdElKT9Qej1-X1R14/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div id="socialslide" style="display: none;">
<a href="javascript:void(0);" onclick="return closesocialslide();" style="color: #555555; font-size: 10px; font-weight: bold; position: absolute; right: 10px; top: 14px;">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Sosyal Medyada Takip Et!</span><br />
<div style="float: left; margin: 15px;">
<g:plusone annotation="none"></g:plusone></div>
<div style="float: left; margin: 15px;">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggerwebtasarim&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" style="border: none; height: 21px; overflow: hidden; width: 80px;"></iframe></div>
<div style="float: left; margin: 15px;">
<a class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-size="large" href="https://twitter.com/bloggerwebtasarim">Takip Et @bloggerwebtasarim</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class="clear">
</div>

-Yukarda bloggerwebtasarim yazan yerlere sosyal medya kullanıcı adreslerimizi yazıyoruz.