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;