Ziyaretçilerin Asla Hayır Diyemeyeceği 8 Yazı Türü

Google aramaları sonucu ya da sosyal medya paylaşımlarında yazınızın ön izlemesine ulaşan ziyaretçileriniz yazınıza tıklamadan önce o kısa anda başlık ve açıklamadan etkilenmeyi bekler. Evet yazımızı google aramalarında öne taşımak için seo ayarlarını yapıyoruz fakat çıkan ilk sonuçlarda neden sizin yazınız tıklansın? Bu biraz yazıyı nasıl kaleme aldığınızla ilgili. Öyle yazılar vardır ki ziyaretçileriniz o konuda bir arama gerçekleştirmese bile bir şekilde sosyal medyada karşılaştığında merakına daha fazla dayanamaz ve yazınıza ulaşmak ister.

Peki ziyaretçilerinizin karşı koyamayacağı, hayır diyemeceği yazı türleri neler ?

 

1-İmkansız gibi görünen yazılar

Daha çok okuyucularınızın isteyip de ulaşamadığı türden yazılar onlar için ilgi çekici olacaktır. Bu tür yazılarınız okuyucular da “gerçekten öyle mi, hadi canım“ şeklinde merak uyandırmayı başarıyorsa yazınız yorum ve paylaşım olarak yüksek seviyelerde yer alacaktır.
Bu tür yazılara için örnek :

• Blog yazarak ayda 500 TL nasıl kazanıyorum ?
• 30 dakikada yazı nasıl hazırlanır
• Blogum 1 gecede 10000 görüntüleme nasıl aldı

 

2-Liste yazılar

Okuyucuda kısa sürede tüm bilgiye ulaşacağını düşündüren yazılar her zaman ilgi çekici olmuştur. Özellikle onedio sitesinin sıklıkla kullandığı bu türden yazılara siz de yer verebilirsiniz. Bu yazılarda ilgi çekici olan şey çok sıkı bir araştırma sonucu ortaya çıktığına ve tek yazıda konu ile ilgili her şeye ulaşabileceğine okuyucunun inanmasıdır.

• Site hitini artıracak 10 sıra dışı yöntem
• Tatile çıkarken yanınızda ayırmamanız gereken 10 şey
• Blog tasarımında yapılan 9 ciddi hata
• Blog trafiğini artıracak 6 taktik

Yukarıdaki yazılar bu kategori için örnek gösterilebilir. Rakamların arttırması daha fazla yorum ve paylaşım getirecektir. Aynı zamanda mümkün oldukça “etkili, denenmiş, önemli” gibi sıfatları kullanmaya çalışın.

3-Biyografik yazılar

Elbette herkesin vikipedi üzerinden bulabileceği hayat hikayelerini paylaşmayacağız.Bu yazı türü kısmen liste yazı türüne benzer.Sadece ünlülerin kolayca bulabileceğimiz biyografilerinden yararlanacağız.Bazı şeyleri başarmış insanların hayat hikayelerini internette kolayca bulabilirsiniz.Yapmanız gereken sadece onları listeleyip sunmak.
Örnek olarak:

• Üniversite mezunu olmayan 10 dahi
• İnsanlığa yararlı ürün icat eden 10 mucit
• 20 yaşından önce milyoner olan 10 genç zengin

Bu tür yazılar kimi zaman tartışma konusu da olacağından fazlasıyla yorum almanız içten bile değil.

4-Kapsamlı çalışma

Yaklaşık 1500 – 2000 kelime ve yukarısını içeren bir konu hakkındaki geniş kapsamlı yazılar da okuyucuların ilgisini çekecek türden. Hazırlığı ve yayın süresi uzun olsa da getirisi yüksek olacaktır.Bu tür kapsamlı yazılar içerisinde birbirinden farklı konular içereceğinden sürekli kaynak ve adres gösterilme başarısını yakalayacaktır.

• Adım adım iyi bir blog sitesi kurmak

 

5-Kapsamlı inceleme yazıları

Bir ürün alacaksınız ve onun hakkında ne olursa olsun öğrenmek istiyorsunuz.Şöyle resimli, video’lu, kullanıcı yorumlarını içeren bir yazı olsa fena olmazdı değil mi?Çoğumuz aynı şeyi düşünüyoruz. Televizyon, telefon, bilgisayar ve ev aletleri gibi popüler ürünler hakkında yazılan detaylı inceleme yazıları fazlasıyla ilgi görecektir.

6-Seri Yazılar

Sinema ve dizilerdeki bir sonraki adımın ne olacağının işaretlerini en başta görmeniz senarist hakkında sizi olumlu düşünmeye sevk ettiği gibi bir blog yazarının da plan dahilindeki seri yazılar oluşturması sizleri heyecanlandıracaktır.

• Google ve arama sorguları
• Google ve arama sorguları vol2
• Google ve arama sorguları vol3

 

7-Tartışmalı yazılar

Birilerini kızdırsanız da bu sizin kaybedeceğiniz anlamına gelmez.Aksine bundan yararlanabilirsiniz.Tartışmalı konularda okuyucularınız farklı tarafları seçebilir ve bunu yorumlarına yansıtabilir.Bu da sizin yararınıza olabilir.
Bu türden yazılarda iki farklı yol seçebilirsiniz.

• Görüş belirtmeden zıt görüşleri yansıtmak
• Kişisel görüşünü belirterek yazmak

Eğer görüşünüzü belirtecekseniz o konu hakkında kapsamlı bir bilgiye sahip olmanız gerektiğini hatırlatırım.
Örnek yazılar :

• Blogger mı Wordpress mi ? (sürekli tartışılmıştır)
• Adsense den neden nefret ediyorum ?
• Facebook’un twitter dan daha iyi olduğunu gösteren 5 şey

8-Gösteriş/Meydan okuma türünde yazılar

Ülkemizde çok yaygın olmasa da çoğu blog yazarı aylık gelir-giderini okuyucularıyla paylaşıyor.Siz buna okuyucularını cesaretlendirme de diyebilirsiniz ya da gerçekte gösteriş yapıyor da diye düşünebilirsiniz ama gerçek olan şu ki kesinlikle dikkat çekiyor.
Eğer bir şeyleri gerçekten iyi yapıp sonucunu gördüyseniz bu türden yazılar yazabilirsiniz.Ama sonucunu görmediğiniz ya da vasatın altında kaldığınız konuları paylaşmayın kimse ilgilenmeyecektir.

• Blog Hocam’a misafir olmanın faydaları

Eğer seyehat konusunda blogunuz varsa 1000 TL altında yaptığınız geziyi paylaşabilirsiniz.Ya da iyi bir adsense geliriniz varsa aylık kazancınızı okuyucularınıza duyurabilirsiniz.

Son Sözler

Ziyaretçileriniz için karşı koyulması güç 8 yazı türünü sizlerle paylaştım. Bunlar emin olun populer blogların tercih ettiği ve benim de başarısını deneyerek gördüğüm yazı türleri.Tecrübe etmek için en azından bumerang - yazar kafe üzerinde vitrine çıkan yazıları da inceleyebilirsiniz. Peki siz hangi yazı türünün daha çok hit getireceğini düşünüyorsunuz?

Yazar Hakında: Bu yazı EhliBlog sitesi sahibi Poyraz Şahin tarafından yazılmıştır.Poyraz, kendi blogunda blog açmak isteyen ya da blog yazarlığı yapan okuyucularına seo, google adsense, analytics kullanımı ve nasıl yapılır türünden faydalı yazıları paylaşmaktadır.

C # Mouse İle Formu Sürükleme

Merhaba Arkadaşlar ,
Uzun bir aradan sonra tekrardan kodlamalara başladık.Mesela C# Form ' da FormBorderStyle'ı Kapadınız Ve Tüm Herşeyini Siz Hazırlayacaksınız Kapama Tuşlarını Bile Ama Form Sürükleme Sıkıntı Yaratabilir Şimdi de Altta Sizlere Kodları Vereceğiz.
Taa ki bir kaç satır kod yazana kadar. Şimdi bu bir kaç satır kod neymiş bunu görelim. Sizde bu işlemin ne kadar basit olduğunun farkına varmış olursunuz. Bu işlemi resimdeki gibi yapabilirsiniz.

Şimdi de Sırada Kodlar : 

namespace WindowsFormsApplication1
{
    public partial class Form2 : Form
    {
        public Form2()
        {
            InitializeComponent();
        }
        bool dragging;
        Point offset;
        private void Form2_MouseDown(object sender, MouseEventArgs e)
        {
            dragging = true;
            offset = e.Location;
        }
 
        private void Form2_MouseUp(object sender, MouseEventArgs e)
        {
            dragging = false;
        }
 
        private void Form2_MouseMove(object sender, MouseEventArgs e)
        {
            if (dragging)
            {
                Point currentScreenPos = PointToScreen(e.Location);
                Location = new
                Point(currentScreenPos.X - offset.X,
                currentScreenPos.Y - offset.Y);
            }
        }
    }
}

Buradaki kodlarımız sorunsuz bir şekilde çalışmaktadır. Drag=sürükleme demektir. Mouse Event’larına kodlarımızı yazdık. Bu eventlar’ın nerede olduğunu merak ediyorsanız; Form’un üzerindeyken Properties penceresinin en üst kısmında bulunan Şimşek işaretine tıklayınız. Event listesi açılacaktır.

Matbuu.com İle Blogunuzu Kurumsallaştırın

Eğer bloguyla gurur duyan, onu herkesin duymasını isteyen, bloggerlığı ciddiye alan ve bir blogger fenomeni olmak isteyen biriyseniz bu yazı tam size göre…

Aşağıda tanıtacağım siteyi kullanarak blogunuza özel çeşitli matbaa ürünleri oluşturabilecek ve bu sayede offline yani gerçek hayatta da blogunuzun tanıtımını profesyonelce yapabilecek, markalarla çalışma fırsatları yaratabileceksiniz.

Matbuu.com Nedir?

Matbuu.com ; yüz yüze yürüyen ve gelenekçi bir meslek olan matbaacılığı internet ortamına taşıyarak daha hızlı ve daha ekonomik hizmet almanızı sağlayan bir internet sitesidir.

Matbuu.com’da kartvizit, broşür, davetiye gibi baskılı ürünlerin yanı sıra, dijital baskıdan, uv baskıya kadar, promosyon ürünlere kadar geniş bir ürün yelpazesinde baskı hizmeti mevcut. Her üründe ihtiyaca yönelik baskı seçenekleri ve teslimat süreleri gibi çok sayıda seçenek sunarak, istediğiniz ürünün baskısını tedarik etmenizi sağlıyorlar.

Peki bloggerlar matbuu.com’dan nasıl faydalanabilirler?

- Kartvizit

Yapabileceğiniz en temel ve en mantıklı şey bir blogger olarak kartvizit sahibi olmaktır. Profesyonel bloggerların kartvizit kullanımı dünyada çok yaygın. Neden sizin de bir kartvizitiniz olmasın? Matbuu.com’da kendi kartvizitinizi hiç bir tasarım bilgisine ihtiyaç duymadan kolayca tasarlayabilir ya da hazır olan tasarımınızı bastırabilir ve tanıştığınız insanlara veya işbirliği yapma ihtimaliniz olan marka/firma yetkililerine verebilirsiniz. 

- El İlanı / Broşür

​Blogunuzu insanlara duyurmanın en kolay yollarından biri de el ilanları veya broşürler bastırmaktır. Bu broşürlere blogunuzu tanıtan kısa ama etkili yazılar yazarak, insanlarda merak uyandırabilir ve blogunuzu ziyaret etmelerini sağlayabilirsiniz.

- Bloknot

​Teknoloji ne kadar gelişirse gelişsin hiçbir şey kağıt kalemin yerini alamadı, alamayacak. Hangimiz evde, ofiste, okulda vs. hangimiz küçük not defterleri, bloknotlar, ajandalar kullanmıyoruz ki? Blogunuzun logosu, adresi, iletişim bilgilerinin yer aldığı not bloknotlara sahip olmak güzel olmaz mıydı? Üstelik unları çevrenize hediye ederek blogunuzun tanıtımını da etkili bir şekilde yapabilirsiniz.

- Ve Diğerleri

Blogunuzun tanıtımı için yukarıda bahsettiğim temel ürünlerin dışında antetli kağıt, ajanda, defter, kişisel kitap, sticker,  magnet, kitap ayracı gibi ürünlere de blogunuza özel tasarımlar yaparak tanıtım amaçlı dağıtabilir veya düzenleyeceğiniz blog çekilişlerinde hediye olarak verebilirsiniz.

“Herkesin bir matbaası oldu!” sloganıyla yola çıkan Matbuu.com’u benim gibi ofis veya özel ihtiyaçlarınız için de kolaylıkla kullanabilir, matbaa ve ajans arama derdinden kurtulabilirsiniz.

Üstelik grafik tasarımcıysanız Matbuu.com’da kendinize bir mağaza açarak tasarladığınız ürünleri sergileyebilir, bu tasarım kullanılarak yapılan alışverişlerden gelir elde edebilirsiniz. Detaylar için burayı ziyaret edebilirsiniz.

Blogger Navigasyonlu Son Yazılar Eklentisi

Bu aralar bol bol JavaScript ve bu scriptlerin Blogger’a uyarlanarak widget haline getirilmiş kodlarını araştırıyorum. Ve yine farklı, işlevsel, şık bir eklentiyi sizlerin kullanımına sunmak istiyorum.

Bu Blogger eklentisini blogunuzun sidebarına kolayca ekliyorsunuz ve blogunuzdaki son yazıları (siz kaç tane isterseniz) bir tablo olarak gösteriyor. Bu tabloda yazılarda kullanılan görsellerin küçültülmüş hali ile ilk birkaç karaketerden oluşan (kaç karakter olduğunu siz belirleyebiliyorsunuz) metin yer alıyor. Eklentiyi özel ve paylaşmaya değer kılan tarafı ise navigasyonlu olması. Bu ne demek hemen açıklayayım;

Widgetı eklediğinizde blogunuzda son 5 yazı tablo olarak görünecektir. Okuyucuyu blogda tutabilmek ve eski yazılarınızı kolayca incelemelerini sağlamak için tablonun altında “Önceki – Başlangıç – Sonraki” gibi navigasyon linkleri var. Ziyaretçiler bu navigasyon linklerini kullanarak daha önceki yazıları da kolayca görüntüleyebilirler.

Gelelim bu eklentiyi blogunuza nasıl ekleyeceğinize. Blogger kumanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HML/JavaScript yolunu takip edin ve açılan kutuya aşağıdaki kodları yapıştırın.

<style scoped='' type='text/css'>
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHg2b7w8k6XwbyxnVQLVFjgRVWv5fdcFDv0KbN-5FfopqXh4kQcl3ZAP6nXZT3AXzowQ07tcP9gt7iFkHHirI6cvNaoSTzTouC6Bc48cJ6KZrTm3T__iruUN08v85KnTf9v7XgEMWr7Xs5/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://bloghocam.blogspot.com";
    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB0WS4DkdbG5hMWnu7tmFaHrQSBcGlob4ZVzUj60seKG7UzZi5gwhZRyVlOsKsRAoETVPgbwAsNY3yO5wqYwFurpkfVRUGNwpKy_aGFGoYcE-SLGAxZu8lCONk4QWhmsi30OT9USci3yFd/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Önceki</a>":"<span class='noactived previous'>Önceki</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Sonraki</a>":"<span class='noactived next'>Sonraki</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Başlangıç</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>

Kodlarda değiştirmeniz gereken tek yer blog url kısmı. http://bloghocam.blogspot.com yazan yere kendi blog adresinizi yazın yoksa BH’deki son yazıları gösterirsiniz :)

İsteğe bağlı olarak şu değişiklikleri de yapabilirsiniz,
5: Ana tabloda son 5 yazının gösterileceğini belirtir.
40: Tabloda yazıların ilk 40 karakterinin gösterileceğini belirtir.

Ramazan Bayramınız Kutlu Olsun!!

Bir Ömür Boyu Sevdiklerinizle Mutlu Olma Dileğiyle...
Ramazan Bayramınız Mübarek Olsun..

Oyun Yapma | CryEngine 3-Ders 5

CRYENGINE DERS 5 OTOMATIK SAGLIK ARTTIRMA

Oyunlarda genellikle görürsünüz. Oyuncumuz vurulduğu zaman, yani canı biraz azaldığı zaman bir süre sonra can otomatik olarak dolmaya başlar. Peki bu nasıl yapılır? Otomatik sağlık arttırma dersimizde bunu öğrenmiş olacaksınız.





Cryengine oyun motoru ile sağlık arttırmanın elbette bir çok yolu var. Sağlık kutusu ile oyuncumuzun sağlığını da istediğimiz şekilde arttırabiliriz. Ancak bu eğitimde saniye bazlı olarak şarta bağlayarak sağlık arttırmayı öğreneceğiz. Yorum olarak başka türlü nasıl sağlık arttırmayı merak ederseniz ilerleyen zamanlarda farklı sağlık arttırma yöntemlerinin derslerini de çekebilirim. Bu derste öğrendikleriniz büyük ölçüde işinizi görecektir.

Blogger'a Arşiv Tablosu Ekleme

Arşiv sayfaları ziyaretçilere tüm içeriğinizi tek bir yerden görme şansı verdiği için kullanıcı dostu ve oldukça faydalı sayfalardır. Bunun için ben de bir arşiv sayfası oluşturmuş ve bunu nasıl oluşturabileceğinizi paylaşmıştım.

Fakat benim paylaştığım arşiv sayfası tüm konu başlıklarını alt alta sıraladığı için yazı sayısı 1000’den fazla olan bloglarda kullanıcıların arşivi incelemesi biraz zor oluyordu. Bu yüzden Blogger’da tablo şeklinde bir arşiv sayfası oluşturulup oluşturulmayacağı ile ilgili bir araştırma yaptım ve Endonezya’lı bir arkadaşın aşağıda gördüğünüz projesine denk geldim.

Resimde de gördüğünüz gibi arşiv sayfasında blog yazılarınızda kullandığınız etiketler, sekme şeklinde tablonun sol tarafında alt alt sıralanıyor. Ve bu sekmelere tıkladığınızda o etikete ait yazılar listeleniyor. Böylece hem daha minimal hem de daha kullanıcı dostu arşiv sayfanız olacak.

Siz de Blogger blogunuzda böyle bir arşiv tablosu oluşturmak istiyorsanız Blogger kumanda paneline giriş yaptıktan sonra Sayfalar > Yeni Sayfa yolunu takip edin ve resimde gösterdiğim gibi aşağıdaki kodları sayfanın HTML bölümüne ekleyin.

<div id="tabbed-toc">
<span class="loading">Sayfa yükleniyor...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://bloghocam.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: true,
    showSummaries: true,
    numChars: 200,
    showThumbnails: true,
    thumbSize: 40,
    noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogIyaOHeK8KL56i-OJoCa58njpvR38WOTqJ67PJszlkaJMPRFw4n0vy2kKJZmKiL4WF8xZW_dhE5YioI7wx_xLw4b9FTngG3uv6yBz7N80zczE6D6f778nyC-nHoAlDRegpcd90uyu7FW/s500/resimyok.gif",
    monthNames: [
        "Ocak",
        "Şubat",
        "Mart",
        "Nisan",
        "Mayıs",
        "Haziran",
        "Temmuz",
        "Ağustos",
        "Eylül",
        "Ekim",
        "Kasım",
        "Aralık"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 7,
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>Yeni!</em>"
};
</script>
<script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script>
<style>
#tabbed-toc {
width: 99%;
margin: 0 auto;
overflow: hidden !important;
position: relative;
color: #222;
border: 0;
border-top: 5px solid #FC0204;
background-color: #1D1D1D;
-webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
display:block;
padding:5px 15px;
font:normal bold 11px Arial,Sans-Serif;
color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0;
padding:0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width: 24.8%;
float: left !important;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
  -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
background-color: #515050;
color: #FFF;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #FFFC03;
color: #222;
position: relative;
z-index: 5;
margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 75%;
float: right !important;
background-color: #F5F5F5;
border-left: 5px solid #FFFC03;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 11px;
color: #222;
line-height: 2.8em;
height: 30px;
padding: 0 10px;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #DBDBDB;
font-size: 10px;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#222;
color:#FFF;
outline:none;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none !important;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#222;
color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
color:#000;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>

Kodlarda kırmızı renkle gösterdiğim http://bloghocam.blogspot.com yerine kendi blog adresinizi yazmayı unutmayın!