GÜNCEL
tasarım-1-Blogger Temaları/5

Blogger Yukarı Çık Butonu

Blogger Yukarı Çık Butonu web site sahipleri tarafından kullanıcılarına fayda sağlaması adına ekledikleri bir eklentidir. Bugün sizlere bu butonun nasıl kolay ve basit bir şekilde sitenize eklemeyi göstereceğim.
  • İlk önce Blogger kontrol paneline giriyoruz. Daha sonra sol aşağıda yer alan Tema sekmesine tıklıyoruz. Ardından özelleştirin yanındaki butona basıyoruz ve buradan HTML'yi düzenle'ye tıklıyoruz.
  • Tema kontrol paneline geliyoruz ve buradan CTRL+F tuşuna basarak /body kodunu aratıyoruz. Size vermiş olduğum kodu /body üstüne yapıştırıyoruz.
  • 2 Adımda yaptığımız gibi tekrardan CTRL+F tuşuna basıyoruz ve bu sefer b:skin bu kodu aratıyoruz(2.ci sıradaki olanın üstüne yapıştırıyoruz). Vermiş olduğum kodu hemen üstüne yapıştırıyoruz ve kaydediyoruz.
  • İşlem bu kadar. Dilerseniz '#03a9f4' - '#00aeef' bu kodu aratarak rengini değiştirebilirsiniz.
1 Adım
İlk önce Blogger kontrol paneline giriyoruz. Daha sonra sol aşağıda yer alan Tema sekmesine tıklıyoruz. Ardından özelleştirin yanındaki butona basıyoruz ve buradan HTML'yi düzenle'ye tıklıyoruz.
2 Adım
Tema kontrol paneline geliyoruz ve buradan CTRL+F tuşuna basarak /body kodunu aratıyoruz. Size vermiş olduğum kodu /body üstüne yapıştırıyoruz.
Accordion_third_title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion_fourth_title (alt)

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Blogger Demo - Download Butonu

Blogger Önizleme ve indir butonunu bloggerda bulmak kolay ama yarından çoğu amatörce düzgünce bulmamız zor... Bugün sizlere vericeğim kodlar sayesinde yukarıda görmüş olduğunuz gibi buton elde etmiş olucaksınız.
İlk önce bu css kodlarını /b:skin üstüne yapıştırıyoruz.


/* CSS Simple Button Flat UI by bloggersepeti */ #wrap { margin:20px auto; text-align:center; } #wrap br { display:none; } .btn { display:inline-block; position:relative; font-family:'Source Sans Pro', Helvetica, sans-serif; background:#4CB04E; padding:6px 20px; font-size:14px; margin:0 3px; color:#fff!important; text-shadow: rgba(100, 100, 100, 0.34902) 0px 2px 3px;border-radius:3px; border:none; text-transform:uppercase; text-decoration:none; transition:all 0.3s ease-out;-webkit-box-shadow: 2px 0 7px rgba(0,0,0,.3);-moz-box-shadow:2px 0 7px rgba(0,0,0,.3);box-shadow:2px 0 7px rgba(0,0,0,.3)} .btn.down { background:#F1C40F; color:#fff!important; text-shadow: rgba(100, 100, 100, 0.34902) 0px 2px 3px;} .btn.down:hover,.btn.down:active,.btn:hover,.btn:active { background:#fc4f3f; color:#fff; } a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active { color:#fff; } .btn i { margin-left:10px; font-weight:normal; font-family:FontAwesome; }

Aşağıda vermiş olduğum kodlarıda gönderilerinizde kullanabilirsiniz.

<center>
<div id="wrap">
<a class="btn down" href="#DEMOLİNK" rel="nofollow" target="_blank">DEMO <i class="fa fa-paper-plane"></i></a>
<a class="btn down" href="#İNDİRMELİNK" rel="nofollow" target="_blank">İNDİR<i class="fa fa-file"></i></a></div>
</center>

Blogger Messenger(Facebook) Kutusu Ekleme





Blogger da iletişimin ne kadar da sıkıntılı olduğunu hepimiz biliyoruz. Google de o kadar iletişim kutusu vs. var ama bu Messenger kutusu kadar aktif kullanacağınızı zannetmiyorum. Facebook messenger kutusu sayesinde bir nebzede olsa bu sıkıntımızdan kurtuluyoruz.. Her neyse konuyu kısa tutmak istiyorum. Şimdi sizlere verdiğim kodu şu şekilde eklemeniz gerekiyor.

Kodların içindeki bloggersepeti yazan yerleri değiştiriniz.


<!-- Blogger Sepeti - Messenger Kutusu  -->
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '375544679461395',
      xfbml      : true,
      version    : 'v2.8'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/tr_TR/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<!-- Blogger Sepeti - Messenger Kutusu  -->

<!-- Blogger Sepeti - Messenger Kutusu  -->
<div class='drag-wrapper drag-wrapper-right'>
<div class='thing' data-drag='data-drag'>
<div class='circle facebook-messenger-avatar facebook-messenger-avatar-type0'>
<img class='facebook-messenger-avatar' src='http://www.icons101.com/icon_png/size_256/id_82691/Facebook_Messenger.png'/>
</div>
<div class='content'>
<div class='inside'>
<div class='fb-page' data-adapt-container-width='true' data-height='310' data-hide-cover='false' data-href='https://www.facebook.com/bloggersepeti' data-show-facepile='true' data-small-header='true' data-tabs='messages' data-width='310'><div class='fb-xfbml-parse-ignore'><blockquote cite='https://www.facebook.com/bloggersepeti'><a href='https://www.facebook.com/bloggersepeti'>Yükleniyor...</a></blockquote></div></div>
</div>
</div>
</div>
<div class='magnet-zone'>
<div class='magnet'></div>
</div>
</div>
<link href="https://rawgit.com/VTADZ/vutienanhblog/master/style.css" rel="stylesheet" type="text/css"></link>
<script src="https://rawgit.com/VTADZ/vutienanhblog/master/jquery.event.move.js" type="text/javascript"></script>
<script src="https://rawgit.com/VTADZ/vutienanhblog/master/rebound.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/VTADZ/vutienanhblog/master/index.js" type="text/javascript"></script>
</div>
<!-- Blogger Sepeti - Messenger Kutusu  -->
Aşağıdaki koduda /head altına ekleyin.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script>

Blogger H1 (Heading Tags) Hatasını Düzeltme


Blogger için H1-H2-H3 hatası çözümü
nü göstereceğim. Bilindiği üzere Seo açısından bloggerda çeşitli çeşitli kodlar, tasarımlar ve widget vs. kullanılıyor. Ama bir türlü h1-h2-h3 tag etiketlerine bir türlü aranan kanı bulamadık.(bulamazdık). Şuan sizlere vereceğim kod ile tüm h taglarla alakalı sıkıntılar ortadan kalkacaktır.


Blogger➜Tema➜HTML Düzenleme Bu kodu Buluyoruz.

Burayatıklayarak sileceğiniz kodu bulabilirsiniz.(CTRL+F Tuşuna basıp aramanız gerekmektedir.) Burayatıklayarak değiştireceğiniz kodu bulabilirsiniz.

Blogger Direk İndirme Linki Ekleme

Merhaba, Blogger da bilindiği üzere Wordpress gibi direk indirme yapamıyoruz.(Yani linkte tıklayınca Yandex-Disk-Mediafire vb. gibi sitelere yüklemek ve yönlendirmek zorunda kalıyoruz.) Blogger Wordpresse nazaran biraz daha geriden gelen bir sistemi var. Neyse fazla konuyu uzatmadan açıklamaları yapalım sonradan anlatıma geçelim. Yapacağımız işlemlerden sonra indirme linkine tıklandığı an bulunduğu sayfadan farklı bir sayfaya yönlendirme yapmıyor ve sitenizde kalmaya devam ediyor.


İlk önce Dropbox.com sitesine giriyoruz. Ardından üyelik işlemlerini hallediyoruz. Sonradan karşınıza böyle bir sayfa gelicek. Daha sonra Upload Files butonuna tıklayınız. Dosyayı yükleme yapıcaktır.
Dosyayı yükledikten sonra böyle bir sayfa karşılar sizleri burada yapmanız gereken dosyanın indirme linkini almak yani url adresini... Only you yazan yere tıklıyoruz ve Create a linke tıkladıkdan Copy link tıkladıksan sonra bizlere link vericek bu linki kopyalıyoruz.
O kare içine aldığım alan bizim için direk indirme yapmamızı sağlıyor. dl.dropboxusercontent.com/s/ - Anlatım 2 de only you tıklıyoruz tekrardan linki alıyoruz .....com/s/ den sonrası tüm linkleri alıyoruz ve tüm linkleri bir araya getiriyoruz. Artık işlemimiz tamamdır.

Blogger Kod Şifreleme Ekle

otomatik-etiketleme

Blogger için HTML Kod Şifreleme, Kod şifreleme Editörünü Google amcaya sorarsınız kod şifreleme siteleri çıkar düzgün bir tasarımı olmaz bazıları düzgün şifrelemez vs. vs. Özellikle kendi tasarımınızın çalınmamasını istiyorsanız şifreleme yapmanız gerekir. Peki bunu kırma yöntemi mevcut mudur derseniz mevcutdur. Bu bir nebze azaltmaktadır.
 42%6C%6F%67%67%65%72%20%41%79 bunun benzeri kodları nasıl yapıyorlar diyorsanız işte sizlere verceğim kod şifreleme ile yapılıyor. Bunu sizde kendi sitenize ekliyebilirsiniz.



Kodları Görüntüle