Bootstrap Nedir?
yazilim
Framework'leri: React, Angular, Vue.
Js Gibi, Daha Karmaşık Ve Ölçeklenebilir Kullanıcı Arayüzleri Geliştirmeyi Kolaylaştıran Araçlardır.
Css Preprocessor'leri: Sass, Less Gibi, Css Yazımını Daha Verimli Hale Getiren Ve Ek Özellikler Sunan Araçlardır.
Ui Kütüphaneleri: Bootstrap, Material Ui Gibi, Önceden Tanımlanmış Ve Özelleştirilebilir Kullanıcı Arayüzü Bileşenleri Sunan Kütüphanelerdir.
Bir Front-end Geliştiricisinin Sorumlulukları Özetle:
Kullanıcı Arayüzlerini (ui) Tasarlamak Ve Geliştirmek.
Web Sayfalarının Ve Uygulamaların Kullanıcı Dostu Ve Erişilebilir Olmasını Sağlamak.
Mobil Uyumlu (responsive) Tasarımlar Oluşturmak.
Web Sitesinin Performansını Ve Hızını Optimize Etmek.
Tasarımcılar Ve Back-end Geliştiricileri Ile Işbirliği Yapmak.
Kullanıcı Geri Bildirimlerini Dikkate Alarak Iyileştirmeler Yapmak.
Front-end Neleri Kapsar?
Front-end Geliştirme Genellikle Şu Üç Temel Teknolojiyle Yapılır:
Html (hypertext Markup Language)
Sayfanın Iskeletini Oluşturur.
Başlıklar, Paragraflar, Görseller Gibi Içerikler Html Ile Tanımlanır.
Css (cascading Style Sheets)
Sayfanın Görünümünü Düzenler.
Renkler, Yazı Tipleri, Boşluklar, Düzen (layout) Gibi Görsel Detaylar Css Ile Yapılır.
Javascript
Sayfaya Etkileşim Kazandırır.
Butona Tıklayınca Bir Pencere Açılması, Form Gönderilmeden Önce Kontrol Yapılması Gibi Dinamik Özellikler Javascript Ile Sağlanır.
Front-end Geliştiricisi Ne Yapar?
Bir Front-end Geliştirici:
Web Sitesinin Kullanıcı Arayüzünü Tasarlar Ve Kodlar.
Farklı Tarayıcılarda Ve Cihazlarda Tutarlı Görünmesini Sağlar (responsivedesign).
Kullanıcı Deneyimini (ux) Önemser.
Genellikle React, Vue, Angular Gibi Modern Javascript Framework’leriyle Çalışır.
Api’lerden Veri Çekip Kullanıcıya Sunabilir.
Bu butonları blog yazılarınızdaki paylaşımlarınızda kullanmak için öncelikle font awesome’ın blogunuzda tanımlı olması gerekir. Eğer şablonun HTML kodlarına daha önce fontawesme kodu eklemediyseniz Şablon > HTML’yi Düzenle diyerek şablonunuzun HTML kodlarının olduğu pencereyi açın ve burada <head> kodunun altına şu kodu ekleyin:
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
Daha sonra download ve demo butonlarının CSS kodlarını şablona eklemelisiniz. Bunun için ]]></b:skin> kodunu bulun ve bunun üzerine şu stil kodlarını ekleyin:
#buton { margin: 20px auto; text-align: center; }
#buton br { display: none; }
.mbg-btn-slide, .mbg-btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #00CC00; margin: 10px; transition: .5s; }
.mbg-btn-slide2 { border: 2px solid #FF3300; } .mbg-btn-slide:hover { background-color: #00CC00; } .mbg-btn-slide2:hover { background-color: #FF3300; }
.mbg-btn-slide:hover span.circle, .mbg-btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #00CC00; }
.mbg-btn-slide2:hover span.circle2 { color: #FF3300; }
.mbg-btn-slide:hover span.title, .mbg-btn-slide2:hover span.title2 { left: 40px; opacity: 0; }
.mbg-btn-slide:hover span.title-hover, .mbg-btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; }
.mbg-btn-slide span.circle, .mbg-btn-slide2 span.circle2 { display: block; background-color: #00CC00; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; }
.mbg-btn-slide2 span.circle2 { background-color: #FF3300; }
.mbg-btn-slide span.title, .mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title2, .mbg-btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #FF3300; transition: .5s; }
.mbg-btn-slide2 span.title2, .bsd-btn-slide2 span.title-hover2 { color: #00CC00; left: 80px; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 { left: 80px; opacity: 0; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 { color: #fff; }
Şablonun HTML kodlarında yapılacaklar bu kadar. Bundan sonra demo ve download butonlarını kullanacağınız yazının HTML kodu bölümünü açın ve butonların gözükmesini istediğiniz yere butonların kodlarını ekleyin:
<div id="buton"> <a href="https://www.webyazilimciniz.net/" class="mbg-btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Önizle</span> </a> <a href="https://www.webyazilimciniz.net/" class="mbg-btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">İndir</span> </a> </div>
Burda ilk mavi yere demo butonuna tıklandığında açılacak sayfanın urlsini, ikinci mavi yere download butonuna tıklandığında açılacak sayfanın urlsini yazın.
Blogger'da Karanlık Gece Modu, sitenizin veya blogunuzun ziyaretçiler için daha göz dostu bir görünüm sunmasını sağlayan bir tasarım seçeneğidir. Bu mod, özellikle düşük ışıklı ortamlarda daha rahat bir okuma deneyimi sunmak için koyu arka plan renkleri ve açık yazı renkleri kullanır.
Blogger'da doğrudan bir "karanlık mod" seçeneği bulunmasa da, aşağıdaki yöntemlerle bu görünümü elde edebilirsiniz:
Tema Özellikleri ile:
<script>
$(document).ready(function($) {
var mode = localStorage.getItem('mode');
if (mode)
$('body').addClass(mode);
$(".darkmode").click(function() {
$("body").addClass("dark");
localStorage.setItem('mode', 'dark');
});
$(".normalmode").click(function() {
$("body").removeClass("dark");
$("body").addClass("normal");
localStorage.setItem('mode', null);
});
});
</script>
<style>
body.dark {background:#212121 !important; color: #f9f9f9;}
body.dark .header{background:#424242}
body.dark a, body.dark h1, body.dark h2, body.dark h3{color: #f9f9f9;}
body.dark .blog {background:#212121 !important; color: #f9f9f9;}
body.dark .blog-post__content{background:#424242}
body.dark .footer{background:#424242}
body.dark .footer__credit{background:#616161}
body.dark .footer__text{color:#f9f9f9}
body.dark #comments{background:#424242}
body.dark #comments a.comment-reply{background:#616161; color: #f9f9f9;}
body.dark ul.trail-items a{color:#f9f9f9}
body.dark .blog-post__content pre{background:#212121; margin-top:15px; margin-bottom:15px; color:#f9f9f9;}
body.dark #xsidebar .widget {margin-bottom: 20px; background:#424242; padding: 20px; box-shadow: 0 10px 30px gba(0,0,0,.05);
}
body.dark .light, body:not(.dark) .dark {display: none;}
</style>
<a class="normalmode"><i class="dark fal fa-sun"></i>Normal Mod</a>
<a class="darkmode"><i class="light fal fa-moon"></i>Gece Modu</a>