Blog Yazılarınızı ReBlog İle Paylaşın

Twitter ile hayatımıza giren retweet ile beğendiğimiz içerikleri yazıları kendi profilimizde yayınlayabiliyoruz. Bunu blogger üzerinden de yapabilme imkanımız buluyor. Blogger üzerinden blogumuza ekleyeceğimiz basit bir kaç kod yardımı ile yazılarımızın başka blog yazarları tarafından kendi bloglarında yayınlanmasına yardımcı olabiliriz.

ReBlog'un Bize Kazandıracakları :

Reklam ve Tanıtım:

Blog yazarlarının bloglarının tanıtımı için harcayacakları zaman ve emeği (az yada çok) azaltacaktır.

Misafir Yazarlık:

Bir çoğumuz diğer blog sahiplerinin bloglarında misafir yazar olarak makaleler yazıyoruz. Bu makaleler içine kendi blogumuzun linklerini yerleştirerek Blogumuzu tanıtmış oluyoruz. Yazdığımız yazıları diğer blog yazarı arkadaşlarımız beğendiğinde Reblog Sayesinde doğrudan kendi bloglarında yazımızı paylaşmış olacaklar ve onların bloglarında yazımızın kısa bir özeti bulunacak. Paylaşılan yazıyı kullanıcılar okumak istediklerinde yazının başında yazının tamamını bizim blogumuzda okumalalarını sağlayacak bir link olacak tıklayarak bizim blogumuza gelip içeriği okuyabilecekler. Bu işlemde bize trafik sağlamış olacak.

Reblog Eklentisini Blogumuza nasıl ekleyeceğimize gelirsek;

Blogger Kontrol Panelimizden Şablon ve Html'yi Düzenle diyerek, CTRL+F tuşlarıyla ]]></b:skin> kodlarını Aratıp buluyoruz. Hemen üzerine aşağıdaki kodları yapıştırıyoruz.

.reblog {

color: #1f1f9a;

background: #fff;

float: right;

list-style-type: none;

font-weight: bold;

font-size: 10px;

padding: 5px 10px;

display: inline;

border: 1px solid #1f1f9a;

background: #1f1f9a;

border-radius: 5px;

}

.blogthis a {

color: #1f1f9a; text-decoration:none; list-style:none; background: #fff;}

a.reblog:hover {

color: #fff;

background: #1f1f9a;

text-decoration:none;

}

Hemen ardından <div class='post-footer'> kodunu bulduktan sonra hemen üzerine aşağıdaki kodları yapıştırıyoruz.

<div class='reblogme'><li class='blogthis'><b:if cond='data:top.showBlogThisButton'>

<a class='reblog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>Yazıyı Sitende Yayınla</a></b:if>

 </li></div>

Bu işlemlerden sonra reblog eklentisi blogumuzda aktif olacaktır.

Yazının hemen altında bulunan Yazıyı Sitende Yayınla butonuna tıklayarak test edebilirsiniz.

Blogger Rocket Teması

İlk bakışta da anlaşılacağı gibi oldukça şık ve sade bir tasarıma sahip Rocket teması dikkat çekmeyi başarıyor. Tema içerisnde kullanılan renkler ve öğelerin yerleşimi okuyucuyu yormayacak şekilde tasarlanmış. 

Sayfanın yanında sabit bir şekilde duran menü sayfa içinde kullanıcının rahatlıkla gezebilmesine olanak sağlıyor. Diğer yandan Rocket temasında kullanılan widgetler ise gayet başarılı bir şikide konumlandırılmış. Tema ile gelen arama kutusu ve kullanabileceğimiz tüm sosyal paylaşım butonları mevcut. Sade ve göze hoş görünen popüler yayınlar eklentisi dikkat çeken özellikler arasında. Sayfanın sağında bulunan sponsor reklam alanları sayfamıza alacağımız reklamları yayınlamamıza yardımcı olacak şekilde konumlandırılmış.Tema özelliklerinden birisi de sayfa numaralandırma eklentisi hazır bir şekilde kullanımımıza sunulmuş durumda.

Rocket temasında en önemli özelliklerden bir tanesi de sayfanın en üstünde bulunan slayt alanı. Gayet şık ve kullanışlı olması bize görsel açıdan avantaj sağlayacaktır.

Yazılarımızın hemen altında bulunan yazar alanı görsellik açısından sayfaya büyük bir artı getirmiş.

Tema ÖNİZLEME

Temayı İNDİR

Temada yapabileceğimiz bir kaç değişiklikten bahsetmek gerekirse;

Menü içinde yapacağımız değişiklikleri, Blogger Kontrol Panelimizden Şablon sonrasında Html'yi Düzenle diyerek CTRL+F Tuşları ile <ul id='main-menu'> Kodunu bulduktan sonra hemen altında bulunan şu kodlar da ki değişiklikleri yapıyoruz. Kodlar içinde bulunan # yerine URL lerimizi ekliyoruz.

<ul id='main-menu'>

<li class='current-menu-item'><a href='#'>Home</a></li>

<li><a href='#'>Features</a>

<ul>

<li><a href='#'>Categories page</a></li>

<li><a href='#'>Single page</a></li>

................

Slayt alanında yapacağımız değişiklikler ise; 

Blogger Kontrol Panelimizden Şablon ve Html'yi düzenle dedikten sonra <div class='flexslider' id='home-slider'> kodunu buluyoruz. Yeşil olan yere resmimizin URL sini yazıyoruz. Mavi olan yere de resme tıklanıldığında açılacak sayfanın URL sini yazıyoruz. Kırmızı olan yere ise resim üzerinde görünecek kısa yazımızı yazıyoruz.

<div class='flexslider' id='home-slider'>

<ul class='slider'>

<li>

<article>

<div class='kp-view'>

<img src='../slide-1.jpg'/>

<a class='kp-mask' href='#'/>

</div>

<div class='flex-caption'>

<h1><a href='#'>Eight Important Factors of ....</a></h1>

</div>

<article>

<li>

.........

Sayfa numaralandırma eklentisinde ise değiştirebileceğimiz iki yer bulunuyor. Bunlar bir sayfada kaç adet yazı göstermek istediğimizi ve sayfa numaralandırma alanımızda kaç sayfa numarasını gösteren butonu belirleyeceğimiz kodlar.

Aynı şekilde Html'yi düzenle seçeneğinden aşağıdaki kodları aratıp buluyoruz.

var posts=6, ---->Burada sayfada 6 adet yazı gösterilecek olarak ayarlanmış.

num=2, ----->Numaralandırma alanında kaç adet numara butonu olacağını buradan belirliyoruz

Blogger 2013 Haber ve Magazin Teması

Zaman içinde gelişen blogger temalar konusunda da gelişmeye devam etmekte. Gün geçtikçe çok iyi temalar üretilmeye devam ediyor. Tasarımcılar blogger sisteminin gelişmesi ile çekici ve daha profesyonel temalar kodlamaya başladılar ve günler ilerledikçe daha güzel temalar karşımıza çıkacaktır.

1. Bu gelişme içinde geliştirilen temalar arasında bulunan NewMagazine adlı tema kullanımı ve tasarımı bakımından kendini öne çıkarmayı başarmış durumda. NewMagazine temasını öne çıkaran bazı özellikler şunlar;
2. Duyarlı bir yapıya sahip ve responsive, kullanıcı dostu bir tema,
3. İçerik yazarı için hazır reklam alanlarına sahip,
4. Belirlediğimiz bazı etiketler için yazdığımız son yazıları küçük resim ile birlikte sayfa üstüne yerleştirip popüler etiketlerimizin son içeriklerinin neler olduğunu okuyucularımıza gösterebilme imkanı,
5. Hazır arama kutusu,
6. Hazır ve şık bir popüler yayınlar widgeti,
7. 4 sütunlu footer alanı,
8. Resimli benzer yazılar eklentisi,
9. Açılır ve Şık bir menü,

DEMO --- İNDİR

Tema üzerinde yapacağımız bir kaç küçük değişiklikten bahsetmek gerekirse;

Menü alanlarını düzenlemek için ,

Blogger kontrol Panelimizden Şablon ve HTMLyi Düzenle diyerek main-navigation 'nu aratıp bulduktan sonra hemen altında bulunan şu kodları düzenliyoruz. # le gösterilen yerlere linklerimizi (URL) ekliyoruz.

<div class='main-navigation'>

<nav id='navigation'>

<ul class='menu' id='menu-pages'>

<li><a href='#'>General Settings</a></li>

<li><a href='#'>Styling</a></li>

<li><a href='#'>Single Post</a></li>

<li><a href='#'>Ad Management</a></li>

<li><a href='#'>Social</a></li>

<li><a href='#'>Fonts</a></li>

</ul>

</nav>

</div>

Logomuz ve üst reklam alanımız altında kalan menümüzü düzenlemek için ise secondary-navigation kodunu bulduktan sonra hemen altında bulunan şu kodlarda ki düzenlemeleri yapıyoruz. 

<div class='secondary-navigation'>

<nav id='navigation'>

<ul class='menu' id='menu-main-navigation'>

<li><a href='#'>Home</a></li>

<li><a href='#'>Technology</a></li>

<li><a href='#'>Breaking News</a></li>

<li><a href='#'>U.S.A</a></li>

<li><a href='#'>World News</a></li>

<li><a href='#'>Options Panel</a>

<ul class='sub-menu'>

<li><a href='#'>General Settings</a></li>

<li><a href='#'>Styling Options</a></li>

<li><a href='#'>Single Post</a></li>

<li><a href='#'>Font Settings</a></li>

<li><a href='#'>Social Buttons</a></li>

<li><a href='#'>Ad Management</a></li>

</ul>

</li>

<li><a href='#'>Shortcodes</a></li>

</ul></nav>

</div>

Blogger Kontrol Panelimizden Yerleşime girdiğimizde ise blog kayıtları Gadgetinin hemen üzerinde yanyana 3 adet Gadgetimiz olduğunu göreceksiniz buralara Gadget ekle diyerek HTML/JavaScript ekle dediğimizde aşağıdaki kodu ekleyerek bizim belirlediğimiz herhangi bir etiket için yazdığımız son yazıyı burada gösterebiliriz. Yapmamız gereken tek şey ise aşağıdaki kodlar içinde bulunan Templateism yerine kendi etiket ismimizi yazmak olacaktır.

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Templateism?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<div class="readMores">

<a href="#">Read More</a>

</div>

Bu işlemler sonunda temamızı kullanmaya başlayabiliriz.

Düzenleme ile ilgili sorunlarınızı yorum yazarak sorabilirsiniz.

Css3 İle Animasyonlu Renk Geçişi Yapımı

Css3 ile sayfalarımızın görselliğini üst düzeye çıkarmamız mümkün. Css3 bize sayfamıza küçük animasyonlarla süslü butonlar, menü sekmeleri vb. gibi görsel çalışmalar ile sayfa içeriğimizi daha dikkat çekici ve kullanıcının gözüne hoş gelen içerikler düzenlememizi sağlayabileceğimiz çalışmalar yapmamıza olanak sağlamaktadır.

Küçükte olsa faremizin üzerine geldiğinde renk geçişini bir animasyonla canlandırdığımız bir çalışmayı paylaşmak istedim.

Css kodlarımızda bulunan bazı kodları isteğinize göre değiştirebilirsiniz.

Kodlarımız arasında bulunan -webkit-transition:all 1.5s kodumuzda ki 1.5s bize ilk rengimizden ikinci rengimize geçiş süresini göstermektedir.

Karne hediyesi bahane, ailece eğlenmek şahane!

Türk Telekom’lu aileler, çocuklarının zorlu ve yoğun bir yılı geride bırakmasını ailece eğlenerek kutluyor. Çünkü XBOX 360 Türk Telekom abonelerine özel fiyatlarla onları bayilerde bekliyor.

Tüm dünyayı kasıp kavuran XBOX 360 oyun konsolu, 31 Ekim 2013 tarihine kadar yapacağınız başvurular için ayda yalnızca 34 TL’den başlayan taksitlerle Türk Telekom ofis ve bayilerinde sizleri bekliyor. Üstelik tüm beden hareketlerinizi algılayarak konsolu ve oyunları kontrol etmenizi sağlayan Kinect’in yanında Disneyland, Adventures ve PES 2013 oyunları hediyesiyle.

Siz de karne hediyesini paylaşmaya niyetli Türk Telekom’lulardansanız, hem çocuğunuzu hem de bütçenizi sevindirecek bu müthiş fırsatı kaçırmayın.

Türk Telekom XBOX 360 kampanyasıyla ilgili detaylı bilgi için tıklayınız.

www.facebook.com/TurkTelekom
https://twitter.com/Turk_Telekom

Bir bumads advertorial içeriğidir.

Blog Yazılarınızı Jquery İle Hareketlendirin!..

Sayfanızda yazdığınız makalelerin okunması Google'ın arama sonuçlarında sayfalarımızın daha üst sıralarda Çıkmasına yardımcı olur. Sayfamıza gelen okuyucularımız yazılarımızı tam olarak okumadan hemen başka bir sayfaya geçiyorsa yada sitemizden çıkıyorsa makalemiz ne kadar iyi olursa olsun Google Analytics sonuçlarında sayfamızın hemen çıkma oranını yükseltir. Google reklamlarını almak istiyorsak bu hemen çıkma oranının olabildiğince düşük olması gerekmektedir.

Ziyaretçilerimizin sayfamızın sayfamızda zaman geçirmelerini istiyorsak onların dikkatini çekecek yazılar yazmalıyız. Yada makalelerimiz içene onların dikkatini çekecek resimler, videolar gibi bazı şeyler eklemeliyiz. 

Aşağıdaki gibi Jquery ile yazılarımıza animasyonlar ekleyebilir ve okuyucularımızın dikkatini çekerek onların sayfamızda daha çok vakit geçirmelerini sağlayabiliriz.

---

• Animasyonlu Yazı Örneği 1
• Animasyonlu Yazı Örneği 2
• Animasyonlu Yazı Örneği 3

---

Yazı içeriklerimizi Jquery ile hareketlendirmeyi nasıl yapacağımıza gelirsek; 

Blogger Kontrol Panelimizden yeni yayın ekle dedikten sonra İçerik eklediğimiz alandan HTML sekmesine aşağıdaki kodları yapıştırıyoruz.

<link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link>

<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>

 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>

Daha sonra bu kodların hemen ardına ekleyeceğimiz kodlar;

<hr />

<div id="words">

<ul class="word-container">

<li data-author="" data-easeout="lightSpeedOut">Animasyonlu Yazı Örneği 1</li>

<li data-author="" data-easeout="lightSpeedOut">Animasyonlu Yazı Örneği 2</li>

<li data-author="" data-easeout="lightSpeedOut">Animasyonlu Yazı Örneği 3</li>

</ul>

<div class="quote">

<div class="quote-content">

</div>

<cite class="quote-author"></cite>

  </div>

</div>

<hr />

Burada değiştirmemiz gereken bazı noktalar;

data-author="" kısmında çift tırnak arasına yazar ismimiz yazabiliriz.

Animasyonlu yazı örneği yazan yerlere yazmak istediğimiz yazıları ekliyoruz.

Sonucunda ise yazımızı yayınlıyoruz.

Sitene Skype Canlı Destek Ekle

Blog kullanıcılarımızın sorularını en kısa sürede yanıtlamak bizim için her zaman artık puan kazandıran etkenlerdendir. Kullanıcılarımız içeriğimiz hakkında sormak istedikleri her şeyi bizlere sorabilmeliler fakat bizimde onlara zaman kaybetmeden cevap vermemiz gerekmektedir.

Günümüzde herkes online iletişim konusunda Skype'yi kullanır durumda buda anlık iletilerde bizlere kolaylık sağlar. Blogumuzu ziyaret eden ve aklına takılan en küçük bir konuyu bize sormak isteyen bir kullanıcı için anında çevrim için destek verebilmemiz Skype ile mümkün. 

Skype ile blogumuzu ziyaret eden kullanıcılarımızın bizimle anlık iletişim kurabilecekleri bu eklentiyi nasıl ekleyeceğimizi gösterelim;

İlk olarak Skype Developer Area adresine girş yapalım.

1. adım olarak ENTER YOUR SKYPE NAME alanına skype adımızı yazalım.

2. adımda ise kullanıcılarımızn bize nasıl ulaşacaklarını yani arama mı yoksa mesaj yoluyla bize ulaşaklarını belirliyoruz.

3. adımda ise renk ve botun boyutunu belirliyoruz.

4. ve son adım olarak bize verilen kodları sitemize eklemek kalıyor.

Tüm bu işlemlerini yaptıktan sonra sıra geldi blogumuza bu kodları eklemeye;

İlk olarak Blogger kontrol panelinden şablonu düzenle diyoruz ve CTRL+F tuşlarına basarak </head> kodunu aratıp buluyoruz. Hemen üzerine aşağıdaki kodu yaıştırıyoruz.

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

</script>

Sonra ise Bloggler Kontrol panelinden yerleşim kısmından Gadget ekle ve Html/Javascrpit diyerek açılan pencerede aşağıdaki kodları yazıyoruz.

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfb6vq03xIrfj-xpG3iTnOnnUcQdvbG26Uo8YaWwn-LGh1u23udIrWTjC1ReKzOrUZ_alXtvwOYDwWYOWcbMmc6WvOkMRN1CJl5TprGbWdvvVcl_mdxSXxR04sVH9kF57du4jsi3o3-7Ho/s1600/canlidestek.gif") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:400px;}

.floatinglikebox div{border:none;position:relative;display:block;}

.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.floatinglikebox span a{color: #808080;text-decoration:none;}

.floatinglikebox span a:hover{text-decoration:underline;}

</style><div class="floatinglikebox" style="">

<div>

<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"></script>

<div id="SkypeButton_Dropdown_xtreal.blogspot.com_1">

  <script type="text/javascript">

    Skype.ui({

      "name": "dropdown",

      "element": "SkypeButton_Dropdown_xtreal.blogspot.com_1",

      "participants": ["xtreal.blogspot.com"],

      "imageSize": 32

    });

  </script>

</div>

</div></div>

Kırmızı Renkli kodları Skype den alıdğımız kodlarla değiştirdiğimizde canlı iletişim eklentisi blogumuza eklenmiş oluyor.

Demo için tıklayınız.
PTV5X2HX4Q5X

Blogger Hareketli Sosyal Paylaşım Butonları

Sayfamızın soyal paylaşım platformlarında paylaşılmasın ve takip edilmesi bizler için çok önemli bir durumdur. Kullanıcılarımız sosyal paylaşım platformlarındaki hesaplarımızdan sayfamızda olup biteni takip edebiliyor olması hem bizim içeriğimizin çok daha fazla kişiye ulaşmasına yardımcı olur hem de kullanıcılarımızın onlar için hazırladığımız içeriğe ulaşabilmeleri için onlara tek bir yol değilde bir kaç yol sunmuş olmamızı sağlar. 

Sayfamızı ilk kez ziyaret eden bir kullanıcımız daha sonra yine sayfamızı ziyaret etmek istediğinde sayfa ismimizi aklında tutması çok kolay olmayacaktır. Bu aşamada sayfamızın bir fan sayfası yada soyal platformlarda bulunuyor olması kullanıcının sitemizi tekrar bulmasını kolaylaştıracaktır. Fan sayfamızı beğenerek ayda diğer platformlardan bizi yani sitemizi takip ederek sitemiz de olup bitenlerden haberdar olabilirler ve sitemize yaptıkları ziyaretleri arttırabilirler.

Sosyal paylaşım platformlarında ziyeretçilerimizin bizi takip edebilmelerine yardımcı olabilecek bir eklentiyi sayfamıza nasıl ekleyeceğimizi anlatmaya çalışalım.

Blogger kontrol panelimizden Şablonu düzenle diyerek CTRL+F tuşlarına basıp ]]></b:skin> kodlarını aratıyoruz.bulduğumuzda aşağıdaki kodları bu kodun hemen üzerine yapıştırıyoruz.

Kodlarımızı ekledikten sonra yine Şablonu Düzenle kısmından CTRL+F tuşlarına basarak </head> kodunu aratıp bulduktan sonra bu kodun üzerine aşağıdaki kodları yapıştırıyoruz.



Son olarak yine aynı yerden CTRL+F tuşlarıyla </body> kodunu aratıp bulduktan sonra aşağıdaki kodları yapıştırıyoruz.



Son eklediğimiz kodların içersin de bulunan your FB, your twitter, your G+, your ID ve your feed 'in yerlerine kendi sayfa isimlerinizi yazıyorsunuz.

Olası bir soruna karşılık temanızın yedeğini almayı unutmayınız.

Demo için tıklayınız.

Sitene kayan Yazı ekle

Sitemizde herhangi bir konuyla ilgili duyurular yapmak isteyebiliriz. Bu duyuruları yapmanın bir çok yolundan biride sitemize kayan yazılar ekleyerek kullanıcının dikkatini çekmektir. İçeriğimiz de hareket eden bir yazımız kullanıcının dikkatini çekeceğinden duyurularımız hedef kitlemize ulaşmış olacaktır. 

Sağdan sola, soldan sağa, yukarıdan aşağıya, aşağıdan yukarıya ya da mouse üzerine geldiğinde duran uyarı pencerelerimiz ile duyurularımızı kullanıcılarımıza ulaştırmış olabiliriz.

Sağdan sola doğru kayan yazı için;
Html sekmesindeki kodları sitenizin istediğimiz yerine kopyalayıp yapıştırabilirsiniz.

Soldan sağa doğru kayan yazı için;

Sağa ve sola çarpıp geri dönen yazı için;

Aşağıdan yukarı doğru kayan yazı için;

Yukarıdan aşağıya doğru kayan yazı için;

Kare içinde Sağdan sola doğru kayan yazı için;

Yanıp sönen ve soldan sağa doğru kayan yazı için;

Css3 İle Tam Ekran Background Yapımı

Sayfamızı hazırlarken arka plan resmi eklediğimizde bu resmin sayfaya tam olarak oturmasını isteriz. Tüm kullanıcıların ekran boyutlarının aynı olmadığını düşündüğümüzde eğer tarayıcımızın %100 lük kısmını kullanan bir sayfamız var ise arka plan resmimizin sayfaya tam oturması gerekir. 

Html5 ile gelen yenilikler sayesinde görsel olarak tasarımlarımızın neredeyse hepsini Css üzerinden yaptığımızı unutmamalıyız. Sayfamızın arka plan resmini oluşturuken body tagımıza css kuralı atıyoruz. Bu Css kuralımızda sayfamız ekrana tam olarak sığacağından Margin ve Padding özelliklerine 0 px vermeyi unutmamalıyız. Arka plan resmimizi tanımladıktan ve tüm istediğimiz ayarları yaptıktan sonra resmimizin sayfaya tam olarak sığmasını sağlayacak bir kaç satır kod yazma işimiz kalmış olacak.

Yazmamız gerekn kodlar şunlardır;

body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

margin:0px;

padding:0px;

}

Body tagımıza eklediğimiz kodlarla birlikte body tagımız için Css kuralımız hemen hemen böyle görünecektir.

Microsoft 2019'a hazırlanıyor !...

Dünyanın teknoloji devi Microsoft teknolojinin anahtarını elinde tutmak için büyük çaba sarf ediyor. Microsoft ileriye dönük çalışmalarıyla dünyanın ileri deki teknolojisini kurmak için kollarını sıvamış ve işe başlamış durumda.

Microsoft yayınladığı video ile bizler için ileride hayatımıza girecek olan yenilikler hakkında küçük bilgiler vermekte.

İleride bizleri bekleyen katlanabilir ekranlar ve hayatımızı çok kolay bir hale getirebilecek teknolojiler bulunmakta. Gazetelerimizi okurken artık sayfalar arasında boğulmamak bu geliştirilecek teknoloji sayesinde bizlere sadece bir kaç sene kadar uzakta gibi görünüyor.

Microsoft'un 2019'da ulaşmayı hedeflediği teknolojilerin kısa bir videosunu gelin birlikte izleyelim.

Html5 İle Kullanımı Son Bulan Etiketler

Html5 teknolojisi hayatımıza girdiğinden bu güne bir çok yeni etiket kullanıma girmiş hatta bir çok yeni etiket ise hazırlanma aşamasındadır. Html5 yenilikleri henüz tam olarak yerleşmediği için bir süre daha iyileştirme çalışmaları sürecektir.

Html5 ile gelen bir çok yeni etiket Html4 ile kullandığımız bir çok etiketin kullanımına son vermiştir. Fakat kullanımdan kalkan bu etiketleri tarayıcılarımız desteklemeye devam edeceklerini unutmamalıyız.

Web sayfalarımızı oluştururken kullandığımız kod editörlerinde Html5 dosyası açtığımızda ve bu dosya üzerinde çalışma yaptığımızda kullanımı son bulan etiketlerin desteklenmediğini göreceğiz.

Bir kaç örnek vermek gerekirse;

Html5 ile kullanımı sona eren bazı görünüm etiketleri: basefont, big, center, font gibi etiketlerin yerlerine Css özellikleri tercih edilmeye başlanmıştır. Css ile çok daha fazla seçeneğe sahip olduğumuz için görünüm için Css özelliklerinden faydalanmaya başlanmıştır.

Frame, Frameset gibi erişim etiketlerininde kullanımı sona ermiş durumdadır. Fakat iframe etiketi hala kullanılmaya devam ediyor. Bu durum sonucunda Embed etiketi Html5 ile çok daha fazla kullanılmaya başlanmıştır.

a ve link etiketleri içersin de kullandığımız rev ve charset özellikleri de artık kullanılmamaktadır.

html etiketi içersin deki version özelliği de artık kullanımı sona ermiş özelliklerdendir.

Background özelliği ise Body etiketinin içersin de kullanımından kaldırılarak Css üzerinden kullanılmaya başlanmıştır.

Html5 ile gelen yenilikler ile daha önceden kullanıma açık olan fakat çok fazla kullanılmayan etiket ve özellikleri kaldırarak tüm bu etiket ve özelliklerin Css üzerinden kullanılmasını sağlamış durumdadır.

Blogger Hareketli Menü Eklentisi

Bir çoğumuz klişeleşmiş Menülerden sıkılmış durumdayız. Blogumuzu diğer bloglardan farklı gösterebilecek oldukça şık ve kullanışlı bir menüyü sizlerle paylaşmak istedim.Bir kaç Küçük değişiklik ile blogunuzda rahatça kullanabileceğiniz bir eklenti.

Öncelikle Blogger Kontrol Panelimizden Şablon >> HTML'yi Düzenle diyerek CTRL+F tuşu ile ]]></b:skin> kodumuzu aratıyoruz ve hemen üzerine aşağıdaki panelde bulunan CSS kodlarını yapıştırıyoruz.

Daha sonra Blogger Kontrol Panelimizden Yerleşim Diyoruz ve Gadget Ekle seçeneğinden HTML/JAVASCRIPT ekle diyerek yine aynı panaldeki HTML kodlarımızı ekliyoruz.

HTML kodlarımız içersinde bulunan '#' içersindeki # simgesinin yerine sayfa bağlantılarımızı eklediğimizde menümüz kullanıma hazır durumda olacaktır.

Demoyu görmek için Tıklayınız.

Blogger İletişim Formu

Blog okuyucularımızın bizimle mail yoluyla iletişim kurmaları önemli bir ayrıntıdır. Blogger için iletişim formu kurmak azda olsa bizleri uğraştırırdı ama artık blogger bize kendi iletişim formu gadget'i ile işimizi çok daha kolay ve hızlı halletmemizi sağlamakta.  

Artık farklı siteler aracılığı ile iletişim formumuzu oluşturmamıza gerek kalmadan blogger'ın bize sunduğu gadget sayesinde bir kat tıklama ile blogumuza iletişim formumuzu ekleyebiliyoruz. Bu işlemi yaparken hiç bir bilgi yada mail adresi girmemize gerek te kalmıyor. Blogger girişi için kullandığımız mail adresimize okuyucularımızın gönderdikleri mesajlar anında gönderiliyor.

Bu işlem için yapmamız gereken tek şey Blogger kontrol panelimizden yerleşim sekmesine tıklamak ve sonrasında Gadget eklemek. Açılan pencere içersinde Diğer Gadgetler sekmesine tıkladıktan sonra İletişim Formu Gatget'ini blogumuza ekliyoruz.

Blogger Açılabilen İçerik Menüsü

Blogger Açılabilen İçerik Menüsü sayesinde yazılarınızın uzun olması nedeniyle yaşadığımız sorunları biraz da olsun ortadan kaldırmamıza yardımcı olabilecek bir çalışma. Yazılarımızı bir kaç başlık altında daha az bir alan kullanarak toparlayabileceğimiz açılır bir menü ile okuyucularımızın textler arasında boğulmadan istediği başlığa hemen ulaşmasına yardımcı olabilecek basit bir dizini paylaşmak istiyorum.

BLOGUMUZA KODLARIMIZ EKLEMEK İÇİN;

Blogger kontrol panelimize giriyoruz, şablon sekmesinde HTML düzenle seçeğine tıklayıp kodlarımızı açıoruz.

CTRL+F tuşuna basarak ]]></b:skin> kodunu aratıp bulduktan sonra bu kodun hemen üzerine aşağıdaki kodları yapıştırıyoruz.

body { font: 13px Arial, Helvetica, sans-serif; color: #1e1e1e; } 
#container { width: 600px; margin: 20px auto; } 
#accordion { margin-top: 20px; } 
#accordion .item { width: 400px; height: 30px; /* height = total height of A child element */ overflow: hidden; transition: height ease-in-out 500ms; /* css3 transition */ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } 
#accordion a { display: block; height: 20px; line-height: 20px; background: #e6e6e6; padding: 5px; color: #1e1e1e; text-decoration: none; } 
#accordion p { height: 150px; padding: 5px; } 
#accordion div:hover { height: 180px; /* height = total height of A and P elements */ }
 #accordion div:hover a { border-bottom: 1px solid #ccc; font-weight: bold; }

Yukarıdaki korlarımızı ekledikten sonra; 

İçeriğimizin blogumuzun görmek istediğimiz herhangi bir yerinde olması için;

Blogger kontrol panelimizden yerleşim seçeneğini seçiyoruz, buradan Gadget ekle diyerek HTML/Javascript seçeneğinden aşağıdaki kodları ekleyerek blogumuza yerleştirmiş oluyoruz.

<div id="container"> 

<div id="accordion"> 

<div class="item"> 

<a href="#">Başlık - 1</a> 

<p>İçerik</p>

</div> 

<div class="item"> 

<a href="#">Başlık - 2</a> 

<p>İçerik</p> 

</div> 

<div class="item"> 

<a href="#">Başlık - 3</a> 

<p>İçerik</p> 

</div> 

<div class="item"> 

<a href="#">Başlık - 4 </a> 

<p>İçerik</p>

 </div> 

</div> 

</div>

Eğer yazı içersinde kullanmak istersek;

Yeni Yayın hazırlarken HTML kısmına bu kodları yapıştırmamız yeterli olacaktır.

Kırmızı ile yazılı yerlere başlıklarımızı;

Mavi ile yazılı yerlere ise içeriklerimizi eklememiz gerekmektedir.

HTML 5 İle Yeni Nesil SEO Çalışmaları

HTML 5 zaman ilerledikçe daha çok hayatımıza girmekte ve tasarımcılar daha fazla HTML 5 in getirdiği yenilikleri tasarımlarında kullanmaktadırlar. Dolayısıyla artık arama motorlarıda HTML 5 ile değişikliklere gidiyor. Arama motorlarının sitenizi tarayıp içeriklerinizi indexlemesinde değişiklikler olacaktır. Bu değişiklikler HTML 5 ile gelen yenilikler sayesinde ve bu yeniliklere göre oluşacak. HTML 5 öncesinde arama motoru örümcekleri sitenizin title, keywords gibi etiketlerinizi okuyarak tarama işlemi yapıyordu. HTML 5 ile bu değişikliğe uğrayacak görünüyor.

HTML 5 ile gelen bazı etiketlerin içeriğine göre arama motoru örümcekleri sitenizi okuyarak indexleme işlemini gerçekleştirecek. <article></article> etiketleri arasındaki metinlerimiz yazımızın içeriği olarak indexlenecektir. 

<header></header> etiketlerimiz arasında ki bilgilerimiz ise arama motorlarına sitemizin başlığını ve sitemizin tanımını okumasını sağlayacaktır.

En başta unutmamalıyız ki HTML 5 henüz tam olarak oturmuş bir yapıya sahip değil. Tüm internet dünyası HTML 5 in tam olarak oturması için kendilerini yenilemeye devam etmektedir.