Sitemdeki Özel Bölümler Html Kodu

Pozital Blogger Portal Temam da görmüş olduğunuz özel bölümler yani Foto Galeri, Video Galeri, Oyunlar, Kadın Bölümü, Filmler, Haberler resimli ve açıklamalı kodu sizlerle paylaşıyorum. Kodda resimler soluktur üzerine gelince renklenmektedirler. Nasıl bir şey olduğunu hala anlamayanlar veya bilmeyenler için ön izleme:



Kod:

<a href='/' target='_self'><img alt='' body='' border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='http://ozicab.in/ocabbaroglu/fotogaleri-ozicab.png' style='opacity:0.4;filter:alpha(opacity=40)'/></a>

<a href='http://ocabbaroglu.blogspot.com/search/label/Videolar' target='_self'><img alt='' body='' border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='http://ozicab.in/ocabbaroglu/videogaleri-ozicabb.png' style='opacity:0.4;filter:alpha(opacity=40)'/></a>

<a href='http://ocabbaroglu.blogspot.com/p/haberler.html' target='_self'><img alt='' body='' border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='http://ozicab.in/ocabbaroglu/haberler-ozicab.png' style='opacity:0.4;filter:alpha(opacity=40)'/></a>

<a href='http://ocabbaroglu.blogspot.com/p/cargo-bridge-2.html' target='_self'><img alt='' body='' border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='http://ozicab.in/ocabbaroglu/oyunlar-ozicab.png' style='opacity:0.4;filter:alpha(opacity=40)'/></a>

<a href='#YAKİNDA-OZİCAB' target='_self'><img alt='' body='' border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='http://ozicab.in/ocabbaroglu/kadinlar-ozicab.png' style='opacity:0.4;filter:alpha(opacity=40)'/></a>

<a href='http://ocabbaroglu.blogspot.com/search/label/Film%20%C4%B0zle' target='_self'><img alt='' body='' border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='http://ozicab.in/ocabbaroglu/sinema-ozicab.png' style='opacity:0.4;filter:alpha(opacity=40)'/></a>

Yukarıdaki gerekli linkleri kendi sitenize göre değiştirin güle güle kullanmanız dileğiyle..

Read More

2012 İmsak ve İftar Vakitleri - Sitene Ekle

Reklamsız, kurulumsuz çok basit bir kod olan il-il imsakiye ve iftar vakitlerini gösteren istediğiniz boyuta getirebilirsiniz. İmsak ve İftar Vakitleri Kodunun Ön İzlemesi için Tıklayın! Sizde sitenize bu uygulamayı eklemek istiyorsanız aşağıdaki kodu sitenize eklemeniz yeterlidir. Herhangi bir sorun veya soru için yorum alanını kullanabilirsiniz.



Kod:

<center><iframe align="middle" frameborder="0" height="780" marginheight="1" marginwidth="1" name="SON" src="http://kapkac.com/iftar.php" width="700"></iframe></center>

İlgili Aramalar: Sitene imsak ekle, sitene namaz vakitleri ekle, sitene 2012 imsakiye ekle, İmsak ve İftar Vakitleri kodu, İl il iftar vakitleri

Read More

CSS ile Metin Seçme Engeli Kodu

Çoğu blog yazarının korkulu belası olan içerik (ç)alıntılarını durdurmak önlemek için kullanılan javascript kodun sizlere Css kullanılarak yapılmış olanını paylaşmak istiyorum. Hayır ben javascript kodunu arıyorum diyorsanız "Sitenizi korumak için 2 yararlı kod" adlı paylaşımı inceleyebilirsiniz.



Burada paylaştığım kod sadece post-body etiketi altındaki bölgeye odaklanıyor. Sizin içeriğiniz başka bir CSS etiketi altındaysa kendinize göre düzenlemeniz lazım.



Blogger kullanlar bu kodu " /b:skin'> " etiketinin hemen üstüne yapıştırmaları yeterlidir. Eğer başka bir platform kullanıyor iseniz "head>" etiketinden hemen sonraya eklemeleri yeterlidir.

.post-body {
 -webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
  line-height:1.5em; }

İlgili Aramalar: Metin seçme engeli, css ile metin seçimini engelleme

Read More

Sitenize Manuel Manşetler Ekleme

Sitemde bulunan ve yaptığım temaların çoğunda olan manuel manşetler bölümünün kodlarını sizler için yayınlıyorum ve kurulumu anlatıyorum. Çoğu kişi wordpress'teki gibi manşetleri otomatik sanıyor ama bu manşetleri kendiniz kodlardan link veriyorsunuz. Resimleri kendiniz ekliyorsunuz kısacası her şey manuel. Neyse manşetlerin ön izlemesi sitenin üst kısmında var manşetler 5 adet olup çoğaltılabilir veya azaltılabilirlerdir. Kodlama bilginiz var ise istediğiniz şekli verebilirsiniz. Neyse gelelim anlatıma..



İlk olarak aşağıdaki kodlarımızı " /b:skin'> " etiketimizin hemen üstüne ekliyoruz..

/* Manşetler Bölümü Ozicab----------------------------------------------- */

#mansetlerozicab{padding:10px;
background:#fff url(http://img.webme.com/pic/o/ozicabdeneme/mansetlerbgozicab.png);
background-repeat:no-repeat;
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
margin-top:7px;
border-bottom:1px solid #ddd;
border-right:1px solid #ddd;
border-left:1px solid #ddd;
border-top:1px solid #ddd;
height:147px;
}

#dvUstManset{
margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 930px; color: rgb(76, 76, 76); font-family: arial, sans-serif; font-size: 12px; line-height: 19px;
}

#mansetUdiv {
margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; height: 150px; 
}

#mansetUdiv a {
 color: rgb(45, 45, 45); font-size: 13px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; 
}

#dvUstMansetBox { 
margin-top: -3px; margin-right: 4px; margin-bottom: 0px; margin-left: 2px; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(230, 230, 230); border-right-color: rgb(230, 230, 230); border-bottom-color: rgb(230, 230, 230); border-left-color: rgb(230, 230, 230); border-image: initial; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; float: left; overflow-x: hidden; overflow-y: hidden; width: 220px;
}

Ardından aşağıdaki kodlarımızı manşetlerimizin nerede görünmesini istiyor iseniz (örn: menü altı; menünün css etiketinin altına... vb.) ekliyorsunuz.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mansetlerozicab'>
<center>

<div id='dvUstManset'>
<ul id='menuManset' style='margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; '>
    <li id='dvUstMansetBox'>
    <div id='mansetUdiv'><a href='http://ocabbaroglu.blogspot.com/2012/06/liseli-polisler-21-jump-street-izle.html'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nrGDFSD7owZnFeS8Pf6_JkT8qL0ezDRFbFplQ3W0O5l4m4ifiEX6v6BUhI8wNksckAjCT-OAK5JnH8HAJUEPBvY09ykgjtr98rwWQhNc_ix-orokovLsV_MZ4BahqxdeDOWyoBWb-_8/s400/21_jump_street-ozicab.jpg' style='border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; width: 220px; height: 150px; '/></a><span class='text' style='padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; background-image: url(http://img.haber365.com/img/opacity70.png); background-attachment: scroll; background-origin: initial; background-clip: initial; bottom: 0px; color: rgb(0, 0, 0); height: 33px; left: 0px; line-height: 16px; position: absolute; text-align: center; width: 212px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: 0px 0px; background-repeat: repeat repeat; '><a href='http://ocabbaroglu.blogspot.com/2012/06/liseli-polisler-21-jump-street-izle.html' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Liseli Polisler - 21 Jump Street (Türkçe Altyazılı)</a></span></div>
    </li>

     <li id='dvUstMansetBox'>
    <div id='mansetUdiv'><a href='http://j.mp/prov2blogger'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7CEI2PPe9Kfx6N9DEDP1onXm6YJdzLkC2CW-q9rINsRhzffIsWTxRBs8JN_9ZLMTCstfbjCbOpT13cPztkITP8YbOCcXbIAAmMEisy3TLL8W3mpNJ-plLlis28531TVOA3RwfgCcUBE/s1600/ocabbaroglu-OWGDPro-01.png' style='border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; width: 220px; height: 150px; '/></a><span class='text' style='padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; background-image: url(http://img.haber365.com/img/opacity70.png); background-attachment: scroll; background-origin: initial; background-clip: initial; bottom: 0px; color: rgb(0, 0, 0); height: 33px; left: 0px; line-height: 16px; position: absolute; text-align: center; width: 212px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: 0px 0px; background-repeat: repeat repeat; '><a href='http://j.mp/prov2blogger' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Ocabbaroglu Pro v2 Blogger Teması - SATIŞTA!</a></span></div>
    </li>

 <li id='dvUstMansetBox'>
    <div id='mansetUdiv'><a href='http://ocabbaroglu.blogspot.com/2012/06/en-cok-kullanlan-sosyal-medya-araclar.html'><img alt='' border='0' src='http://www.m-gen.biz/resimler/SOSYAL-MEDYA-INSAN-KAYNAKLARI.jpg' style='border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; width: 220px; height: 150px; '/></a><span class='text' style='padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; background-image: url(http://img.haber365.com/img/opacity70.png); background-attachment: scroll; background-origin: initial; background-clip: initial; bottom: 0px; color: rgb(0, 0, 0); height: 33px; left: 0px; line-height: 16px; position: absolute; text-align: center; width: 212px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: 0px 0px; background-repeat: repeat repeat; '><a href='http://ocabbaroglu.blogspot.com/2012/06/en-cok-kullanlan-sosyal-medya-araclar.html' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>En Çok Kullanılan Sosyal Medya Araçları</a></span></div>
    </li>

 <li id='dvUstMansetBox'>
    <div id='mansetUdiv'><a href='http://ocabbaroglu.blogspot.com/search/label/Kapak%20Foto%C4%9Fraflar%C4%B1'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJVbRG_8ade1LYINVM_He3juaS1kdc0J59HGQrs18W9kLnIW_QoUDHHte3s_Umf8Cy5-_SaTwzunZqSx3ji5P1CQACGv3qjMK-61HrYyht_NA7cVLgyuCntaMAAfTWmhhqTI2TqZNh7I/s1600/timelinekapak.jpg' style='border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; width: 220px; height: 150px; '/></a><span class='text' style='padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; background-image: url(http://img.haber365.com/img/opacity70.png); background-attachment: scroll; background-origin: initial; background-clip: initial; bottom: 0px; color: rgb(0, 0, 0); height: 33px; left: 0px; line-height: 16px; position: absolute; text-align: center; width: 212px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: 0px 0px; background-repeat: repeat repeat; '><a href='http://ocabbaroglu.blogspot.com/search/label/Kapak%20Foto%C4%9Fraflar%C4%B1' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Dev Facebook Kapak Fotoğrafları Arşivi</a></span></div>
    </li>
</ul>
</div>

</center>
</div>
 </b:if>

İlgili Aramalar: Manşetler ekle, sitene manşetler ekle, blogger manşetler eklentisi, sitene üst kısma resimli manşetler kodu

Read More

Sitenize Sabit Twitter Çubuğu Ekleme

Sitemde üst kısımda bulunan kendim yapmış olduğum twitterbar kodumu sizlerle paylaşıyorum. Paylaşmamın nedeni ise bir çok kişinin benden bu kodu doğru düzgün istemesi ve bazılarının kodu sitemden çalması üzerine bende paylaşmaya karar verdim. Ön izlememiz aşağıda ve sitenin hemen üst kısmında mevcuttur. Neyse hemen anlatımı yapayım.

Aşağıdaki kodumuzu " /b:skin'> " etiketimizin hemen üstüne ekliyoruz.

.twitterbarozicab{
background: url(http://img.webme.com/pic/o/ozicabdeneme/menunewocabbaroglu.png);
color:#fff;
font-size:12px;
width: 100%;
height: 24px;
margin-top:-2px;
border-radius: 10px 0px 10px 10px / 0px 10px 10px 10px;
}

Ardından aşağıdaki kodları sitemizin en üst kısmına eklememiz gereklidir çoğu sitelerde bu etiket " outer-wrapper " veya " header-wrapper " etiketinin hemen üstüne ekliyoruz.

<div class='twitterbarozicab'> 

<table border='0' cellpadding='1' cellspacing='1' width='900'>
<tbody>
<tr>
<td style='text-align: left; '><a href='http://twitter.com/ozicab' target='_blank'><img alt='' border='0' height='13' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivmNCex4sUG_AKr35UfVYrr0s43QbKb7yEdYuhfwiLx1NR9-54iYQF2nlGOxG_UMOjb-rkwVVYYWbSKcuJ8EXfXFJqcSgMaQrW-2jKOw1EIBln4Z_Yyt3bpA3LOV1B2MPYmsD75axsh7w/s1600/twitterozicabb.png' width='12'/></a><b>  Daha gelişmiş özel temasıyla Ocabbaroglu, OWGDPro v3.1 Beta Blogger Teması ile karşınızda..</b></td>
<td style='text-align: right; '>
<a href='http://ocabbaroglu.blogspot.com/reklamver'><span style='color: rgb(255, 255, 255); '><b>Reklam Ver</b></span></a><span style='color: rgb(255, 255, 255); '> | </span><a href='http://ocabbaroglu.blogspot.com/reklamlar'><span style='color: rgb(255, 255, 255); '><b>Destekle</b></span></a> | <a href='http://ocabbaroglu.blogspot.com/sitemap'><span style='color: rgb(255, 255, 255); '><b>Sitemap</b></span></a> | <a href='http://ocabbaroglu.blogspot.com/gizlilik'><span style='color: rgb(255, 255, 255); '><b>Gizlilik</b></span></a></td>
</tr>
</tbody>
</table>

</div>

Bütün işlem bu kadar çubuktaki menüyü ve twitter duyuru bölümünü sitenize göre değiştirebilirsiniz. Güle güle kullanmanız dileğiyle..



İlgili Aramalar: Sitene twitterbar ekle, blogger twitter çubuğu eklentisi, üst tarafa twitter çubuğu ekle, sitene duyuru çubuğu ekle

Read More

Site Canlı Tv Ekle

Eminim bir çok kişi bu kodu arıyordur ve buluyordur ama ya çalışmıyordur yada küçüktür. Benim paylaşacağım canlı tv kodu hem çalışıyor hemde dev boyutta. Sitemdeki Canlı Tv bölümündeki bu kodu benden 10 kişinin istemesiyle bende onlar için yayınlıyorum. Koddaki boyutları değiştirebilirsiniz. Canlı Tv gerçekten çok güzel ve kullanışlı hepinize tavsiye ederim sorunsuz çalışıyor rahat rahat kullanabilirsiniz.



Html Kodun Ön İzlemesi için Tıklayın!



Html Kodu:

<iframe align="middle" frameborder="0" height="500" scrolling="no" src="http://www.kapriscafe.net/siteneekle/tv.html" width="950"></iframe>

İlgili Aramalar: Sitene televizyon ekle, sitene canlı tv html kodu, canlı tv izle, sitene televizyonlar ekle, sitene büyük canlı tv ekle

Read More

Sitenize Sabit Üst Çubuk Eklemek

Çoğu sitede görmüşsünüzdür sitenin üstünde tek renk veya renkli renkli sabit üst çubuk vardır. Şimdi küçük bir css kodu ile sitemize o üst çubuklardan eklemeyi anlatacağım. Aslında anlatıma gerek yok gibi çünkü yapılması gereken tek işlem vereceğim kodu sitenizin css bölümüne yapıştırmanız, siteniz ister blogger ister bedava-sitem olsun css kodu bütün sitelere uyarlı. Çubuğun ön izlemesi aşağıdadır.









1. Aşamada Hemen aşağıdaki etiketimizi buluyoruz..

/b:skin>

Etiketimizin hemen yukarısına aşağıdaki kodumuzu ekliyoruz..

.ustcubuk
{
background:url(http://img.webme.com/pic/o/ozicabdeneme/ustcubukocab.png) repeat-x;
padding:0;
margin-bottom:3px;
height:5px;
}

2. aşamada ise blogger sitemizin en üstüne yani body-wrapper kodumuzun üstüne; bedava-sitemde ise tasarım üstü bölümünün en üstüne kodlarımızı yapıştırıyoruz..

<div class='ustcubuk'/> </div>

Bütün işlem tamam sitemize üst çubuk ekledik, isterseniz çubuğunuzun yüksekliğini renklerini değiştirebilirsiniz. Güle güle kullanmanız dileğiyle..



İlgili Aramalar: üst çubuk ekle, sitene sabit üst çubuk ekle, sitene navbar ekle, blogger renkli sabit üst çubuk eklentisi

Read More

Twitter Takipçi Kutusu

Bu aralar en çok istenen ve aranan twitter takipçi kutusunu sizler için araştırdım. Aslında kodu bende istiyordum biraz araştırdım. En iyi ve çalışan tek kodu BlogHocam 'da buldum ve sizler için burada da yayınlıyorum. Kullanımı çok basit bir javascript kod. Görünüm ise facebook beğen kutusu ile neredeyse aynı ama bence bu daha şık neyse beğenip beğenmemek size kalmış. Hemen koda gelelim..

Ön izleme:

Sitemizde istediğimiz bir bölüme aşağıdaki kodu ekliyoruz.. (Koddaki kırmızı ile gösterdiğim yere kendi twitter id 'inizi yazmayı unutmayın!)




Kod:

<script type="text/javascript" 
src="http://s.moopz.com/fanbox_init.js"></script><div 
id="twitterfanbox"></div><script 
type="text/javascript">fanbox_init("ozicab");</script> 

İlgili Aramalar: twitter takipçi kutusu, blogger twitter eklentisi, sitene twitter kutusu ekle, twitter takip et kutusu

Read More

Blog Yazarları için 15 Önemli Madde

Son yıllarda bloglar ve blog yazarlığı moda haline geldi. Artık neredeyse hemen herkesin bir bloğu var. Bu da internetin her geçen gün çöp olmasına neden oluyor. Çünkü içerik girilmeyen ve güncellenmeyen bloglar blog âlemine her gün bir çöp blog daha kazandırıyor.



Bunun yanı sıra 15-16 yaşında çocukların bile blog açtıklarına ve kendilerince bir şeyler yapmaya çalıştıklarına şahit oluyoruz. Her köşesi kodlarla veya reklamlarla dolu blogları gözümüze sokmaktan geri durmuyorlar.

Türkçe kullanımının ve okuyucuya saygının hiçe sayıldığı bloglar ise gün geçtikçe arttığını üzülerek görüyoruz. Maalesef okuma alışkanlığı olmayan “ergen diliyle” yazılarını kaleme alan, dini istismar eden ve ideolojik kaygılarla blog yazan insanlar türedi son zamanlarda.



Blog Yazmadan Önce Yapılması Gerekenler



Bir blog açmadan ve yazı yazmaya başlamadan önce yapmanız gereken bazı şeyler var. “Benim de bir bloğum var!” başka bir deyişle “Hello World!” demeden önce bazı hazırlıklar yapmak zorundayız. Bunları sizlere 15 başlık altında topladım. Şimdi sırayla irdeleyelim.

Blog Yazmak İçin Bir Amacınız Olsun



Genelde blog yazanların amacı çevre edinmek, statü kazanmak, blogtan para kazanmak, bir konuda okurlarına bilgi vermek ve tepkilerini dile getirmektir. Yalnız blog yazarlığı süreklilik istediği için eğer istikrarsız iseniz ve yeterince zamanınız yoksa lütfen internet âlemine bir çöp blog daha kazandırmayın. Çünkü zamanla konu bulmakta zorlanır ve kes, kopyala yapıştıra başlarsınız ki bu da blogunuzun intiharı olur.

Alan Adı Ve Hosting Seçimi



Artık kararlısınız ve blog yazacaksınız. Hadi o zaman kendinize, blogunuza ve amacınıza uygun bir alan adı alın ve bir hosting edinin. Alan adınızın ve uzantısının jenerik olmasına ve sizi ifade etmesine dikkat edin. Ücretsiz blog servisi veren blogcu, blogger gibi hizmetlerden yararlanmayın. Çünkü yasaklandığında veya hizmet verilmediğinde bloğunuzu bir daha bulamayabilirsiniz. En çok tercih edilen alt yapılardan WordPress veya Joomla alt yapısını hosting şirketinize kurdurabilirsiniz.

Görsel Ve Güncel Bir Tema Seçin



Yurtdışında görselliğe fazla önem vermiyorlar tıpkı giyimlerine pek dikkat etmedikleri gibi ama içerikleri gayet doyurucu oluyor. Biz Türkler ise genelde görsellik odaklıyız. Ama siz hem görsel hem de işlevsel olan güncel bir tema seçin. Çünkü temanız tıpkı imajınız gibidir. Bu şekilde ziyaretçilerinizi cezbetmeniz daha kolay olacaktır. Bu konuda ücretli veya ücretsiz tema hizmeti veren sitelerden yararlanabilirsiniz. Google’da “Ücretsiz WordPress Temaları” veya “Premium WordPress Temaları”diye arattırabilirsiniz. Benim sevdiğim temalardan birkaçına göz atabilirsiniz: YakutER, AOrhan, UBenzer, SPaksu ve Anarschi.

Logo, Favicon Ve Banner Tasarımı



Bloğunuzu ve içeriğini en iyi şekilde ifade edecek bir logo, favicon ve ileride reklam vermek için kullanabileceğiniz banner’larınızı mutlaka hazırlatın. Eğer kendiniz bu konuda bilgi sahibi değilseniz blog konusunda “uzman olan” arkadaşlarınızdan yardım alabilir veya ücretli olarak yaptırabilirsiniz. Logonuz, temanızla uyumlu olmalı ve bloğunuza görsellik katmalıdır.

Hakkında Ve İletişim Sekmeleriniz Güncel Olsun



Bir bloga ilk girdiğimde genelde beni oraya çeken blog yazısına göz attıktan sonra ilk yaptığım iş “Hakkımda, Hakkımızda” kısmına göz atmak oluyor. Çünkü bir blogokur olarak yazarı merak ederim. Kimdir, nerede yaşar, ne konularda uzmandır?



Hakkımda kısmına yazmak kimi zaman zor gelse siz ihmal etmeyin. Tabi bunu yazarken de doğum sürecinden başlayarak ay ay yazmanıza ve sülalenizi yazmanıza gerek yoktur. Bu konuda “CV yazılarına” bakarak veya blogların “hakkımda, kimim ben?” kısımlarına bakarak bir tecrübe elde edebilirsiniz.



İletişim sekmenizi ve iletişim formunuzu her zaman güncel tutun ki okurlarınız size daha rahat ulaşabilsinler. Hatta iletişim formunda blogunuzun içeriğine göre “konu sekmesinde” okurlarınıza seçenek sunmanız güzel olacaktır. Bu şekilde size ne tür bir mail geldiğini daha çabuk bilirsiniz. Eğer spam kaygınız varsa ve mail adresiniz çok önemli değilse mail adresinizi bloğunuzda vermeyin. Zaten iletişim formu sizin işinizi fazlasıyla görecektir.

Kategorilerinizi Sınırlayın



Yazı yazmaya karar verdiğiniz anda mutlaka kategorilerinizi belirleyin. Hangi konularda yazacaksanız o konularda yazılar yazmaya gayret edin. Bunların dışına çıkmayın. Aksi takdirde zamanla amacınızdan uzaklaştığınızı göreceksiniz. İhtiyaca göre yazı kategorilerinizi zamanla düzenleyebilirsiniz.

Not Alın



Sık sık not alın ve bunu adet haline getirin. Bloknot tutmaya gayret edin. Artık nerdeyse çoğumuzda akıllı telefonlar olduğuna göre, telefonlarınızın not kısmına çok rahat not alabilirsiniz. Dikkatinizi çeken, yazı konusu olabilecek söz, resim, olay, vs. her şeyi not alın. Bunlar yazı yazarken size esin kaynağı olacaktır.

Konunuzu Belirleyin



Blog yazarlarının zamanla sıkıntı çektikleri konulardan biri de yazacak bir şey bulamamalarıdır. Uzmanlık alanınıza dair ilginizi çeken haber, olay ve yaşadıklarınız size konu olarak bir fikir verir. Eğer konu bulmakta sıkıntı çekiyorsanız forumları dolaşabilir, haberlere göz atabilir, twitter’daki “trending topic” kısmı ve yaşadıklarınız size konu olarak yeter.




Sınırlarınızı Belirleyin



Genellikle uzman olduğunuz konularda yazıları kaleme almaya çalışın. Uzman olmadığınız, herkesin yazabileceği ama farklı açılarda okurlarınıza sunabileceğiniz günlük hayatta yaşanan olaylardan yazı yazabilirsiniz. Eğer sınırlarınızı belirler ve “her telden çalmazsanız” hem okurlarınıza derli toplu bir blog sunarsınız hem de okur sayınızı kaybetmediğiniz gibi fark yaratmış olursunuz.

Konuyla İlgili Araştırma Yapın



Bir yazı yazmadan önce “sanki bir makale yazacakmış gibi” araştırma yapın. Kütüphaneye gitmenize gerek yok. Google’a tıkladığınız vakit birçok kaynağı bulabilirsiniz. Bunun yanı sıra bol bol kitap, gazete ve dergi okuyun. Çok okuduğunuzda hem yazınızın geliştiğini hem de kullandığınız kelimelerin çoğaldığını göreceksiniz. Hatta benim gibi biraz abartın “yazarlık” ile ilgili kitapları dahi okuyun.



E-mail Veya Haber Yazmadığınızın Farkında Olun



Bir arkadaşınıza veya bir dostunuza e-posta yazmadığınızı ve bloğunuza haber girmediğinizin farkında olun. Yazı dilinizi, üslubunuzu ona göre ayarlayın. Ne çok resmi ne de çok şakacı bir dil kullanın. Aksi takdirde okurlarınız ya bir makale okuduklarını ya da sulu bir yazı okuduklarını zannederler. Samimi ve içten yazın. Başka bir deyişle klavyenizle okurlarınızın kalbine dokunun.

Özgün İçerik Üretin



Okurlarınızın başka bir yerde bulamayacağı içeriklere “özgün içerik” denir. Kendi ürettiğiniz, tercüme ettiğiniz veya yorumunuzu kattığınız aynı zamanda uzmanlık alanınıza girip kategorilerinizde yer alan yazılar yazmaya gayret edin.



Temanız, logonuz sizin elbiseniz gibidir. Dış imajınızdır. Bu şekilde insanları cezbedersiniz. Ancak fikirleriniz ise özgün içeriğinizdir. Cazibenize kapılan içeriğinizle de mest olmalı ki sizin müdaviminiz olsun. Aksi takdir de birkaç gün sonra sizi RSS Feed’ine bile eklemeden kaçar gider.

Haber Paylaşmayın



İçine yorumunuzu katmadığınız haberleri asla paylaşmayın. Google’da bir tıkla bulunup asıl habere ulaşılabilecek yazıları bloğunuzda bulundurmayın. Çünkü bloğunuz bir haber portalı veya teknoloji portalı değildir. Yazılarınız emek ürünü ve kendi eseriniz olsun. Doğrusu Chip Dergisi’nde veya CNNTürk’te sabah okuduğum bir yazıyı sizin sitenizde görmek istemem. Çünkü bana ayrıca bir şey katmayacaktır. Okurlar genelde “Bu yazıda benim için ne var?” diye yazıyı tararlar.

Bloğunuzu Reklama Boğmayın



Blogçuların genelde yaptıkları hatalardan biri bloğa hemen reklam koymaktır. Ben bunu biraz da ego tatmini olarak görüyorum “Bakın bloğum ne kadar meşhur!” der gibi. Buna gerek yok. Zaten kaliteli içerikler paylaşıp trafik ve hitiniz arttığında size reklamlar gelmeye başlayacaktır. Sağda, solda anasayfada ve blogların içinde, altında velhasıl görebileceğimiz her yerde gözümüze reklam sokmanız okurları sıkar ve bloğunuzda fazla vakit harcamadan kaçmalarına neden olur. Bu konuda alışveriş merkezlerinin müşteri çekme taktiklerinidüşünebilirsiniz. Görsellik açısından gözü yormayan ve okurları fazla meşgul etmeyen reklamları ileriki zamanlarda bloğunuza koyabilirsiniz. Hosting giderlerinizi çıkarmak gibi ticari kaygılar nedeniyle hemen reklam almayınız.

Yazmaya Vakit Ayırın



“10 dakikada blog yazmak” ve “profesyonel blog yazarlığı” gibi blog gurularının beylik laflarına itibar etmeyin. Yazı yazmak su değil ki bir dikiş de içebilesiniz. Blog yazılarınıza zaman ayırın. Hemen 5dk yazıp paçavra gibi okurlarınızın önüne atmayın. Her yayınladığınız yazıda aslında kendinizi acımasız “klavye kahramanlarının” önüne attığınızın farkında olun.



Lisede kompozisyon yazar gibi önce bir taslak hazırlayın. Onun üzerinde çalışın. Vereceğiniz örneklere, kullanacağınız resimlere ve bağlantılara kadar belirleyin. Yatmadan önce yazacağınız yazıyla ilgili düşünün. 

Yazınızı zenginleştirmeye çalışın.



Emin olun yazı yazmak kitap okumaktan daha zordur. Her şey ilk kelimeyle başlar. Bilgisayarınızın başına oturun ve düşüncelerinizi tutarlı bir şekilde kaleme alın. Yazı yazmak zaman alır. Normalde bir yazıyı yayınlamanız ortalama 1,5-2 saatinizi alır. Hele yazı dizisi hazırlıyorsanız bu 4-5 saati bulabilir. Siz okurlarınıza özen gösterin ki onlar da size sadık kalsınlar.

Read More

Blogger için Hareketli Yeni Gönderiler Eklentisi

Yukarıdaki resimdeki şık sade ve kullanışlı bir blogger eklentisi. Eklenti sayesinde blogunuzdaki tüm yayınları güzel bir şekilde site ziyaretçilerinize ulaştırabilirsiniz. Kendiliğinden otomatik yenilenen ve istediğiniz miktarda yazı, özet resim boyutları ayarlanabilen kullanışlı bir uygulamadır. Eklentinin demosunu görmek için buraya tıklayın! Yapmanız gerekenler;



1- Yerleşim/ Sayfa Öğleri

2- Html/javascrip/gadget ekle



Aşağıdaki kodu ekleyin ve kırmızı ile renglendirilmiş url silip kendi urlnizi ekleyin. İşlem bu kadar güle güle kullanmanız dileğiyle..

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<style type="text/css" media="screen"> 
<!--
#spylist { 
overflow:hidden; 
margin-top:5px; 
padding:0px 0px; 
height:350px; 
} 
#spylist ul{ 
width:220px; 
overflow:hidden; 
list-style-type: none; 
padding: 0px 0px; 
margin:0px 0px; 
} 
#spylist li { 
width:208px; 
padding: 5px 5px; 
margin:0px 0px 5px 0px; 
list-style-type:none; 
float:none; 
height:70px; 
overflow: hidden; 
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x; 
border:1px solid #ddd; 
}
#spylist li a { 
text-decoration:none; 
color:#4B545B; 
font-size:11px; 
height:18px; 
overflow:hidden; 
margin:0px 0px; 
padding:0px 0px 2px 0px; 
} 
#spylist li img { 
float:left; 
margin-right:5px; 
background:#EFEFEF; 
border:0; 
} 
.spydate{ 
overflow:hidden; 
font-size:10px; 
color:#0284C2; 
padding:2px 0px; 
margin:1px 0px 0px 0px; 
height:15px; 
font-family:Tahoma,Arial,verdana, sans-serif; 
}
.spycomment{ 
overflow:hidden; 
font-family:Tahoma,Arial,verdana, sans-serif; 
font-size:10px; 
color:#262B2F; 
padding:0px 0px; 
margin:0px 0px; 
}
--> 
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; 
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://ocabbaroglu.blogspot.com/";
limitspy=4 
intervalspy=4000
</script>
<div id="spylist"> 
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script> 
</div>

Read More

Gelişmiş Css Mesaj Kutuları

Daha önce kullandığınız css mesaj kutularının en gelişmiş modeli. Bu modelde neler var Uyarı Kutusu, Bilgi Kutusu, Hata Kutusu, Onay Kutusu, İkaz Kutusu ve 4 adet renk mevcuttur. Mesaj kutularının içlerindeki seçenekler çoğaltılmıştır, Örneğin maddeleme, uyarı linki vb. içerikler eklenmiştir. Css mesaj kutularının demosu için buraya tıklayın. Umarım beğenirsiniz güle güle kullanmanız dileğiyle..





İndir: Direkt İndirmek için Tıklayın (31kb) // Rar şifresi: ocabbaroglu





Önizleme:

Read More

Blogger Sosyal Medya Eklentisi ve Email Takip Html Kodu

Herkes çogunlukla sosyal medyaya kayıtlı olduğu alanları toplu ve düzgün bir şekilde göstermek istiyor...

Buna istinaden bende böyle bişey paylaşmak istedim çok sade ve hoş görünüyor. Bütün renk te temalara koyuldugunda çok hoş bir görüntü bırakıyor sizlerle paylaşmak istedim. Biraz anlatmak gerekirse üzerine gelince renklenen ve parlayan java kodla yaptım. Önizlemesi aşağıdadır. İsterseniz demosu için buraya tıklayın.

Kodlarımızı şu şekilde ekliyoruz;
Tasarım>Gadget  Ekle>Html/JavaScript Ekle  aşağıdaki kodları sitenize eklemek  

Kod:

<style type="text/css">

.mbt a{
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.mbt a:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbt a:active {
    color: #000;
    border-color: #444;
}


.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}

.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 130px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{

border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666; 
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 145px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style>   <!--[if IE 8]> <style>
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px;  width: 130px; height:18px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style> <![endif]-->
<div class="mbt" style="padding: 0pt 0pt 0pt 5px;">
<table>
    <tbody>
        <tr>
            <td><a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/ocabbaroglu"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboGswS6lnnIF5bM2-u-eZDYLGR0zugIAetpYHmI5GYAoyEuiElo-_Kp83qFbXNglfnF4Dd7AyybPfIINI7j6iLEeZNGmbEF6XVcSFy0sI4oc7bT2pLG9c9uBVS9eDLcodSlZby8lnYxs/s1600/rss.png" /></a></td>
            <td><a style="margin-left:5px;" href="http://twitter.com/ozicab" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9lrxLoVzDpEEtG7rT1eGmoidxMg_qDGT273F3Dop1Hq6lTOd6lyRbZtC2KCmdMCqRJxWqaQ3F7ZkUa495Pm2yuFoxjPDAmktFC7aC6M8XXZVI6TWc79PYp-cicPzqL-bVHJEFgAy87M8/s1600/twitter.png" /></a></td>
            <td><a style="margin-left:5px;" href="http://facebook.com/oguzhanpage" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6sFD_-ntb28Q0TW3Kiyt7xP4eaagTV5QHiGoDokeZ6Mmw2wjlVVb31jzvsGDmY12Lyggf2VYRt6dLbaPHRMQbFQLzY4q1pHpc0PVDr5bVb3nioF6JgdYD8KPgcO0iFQksBem8vI5N_aM/s1600/facebook.png" /></a></td>
        </tr>
    </tbody>
</table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ocabbaroglu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="10" class="emailupdatesinput" name="email" value="Email Adresin..." onblur="if (this.value == '') {this.value = 'Email Adresin...';}" onfocus="if (this.value == 'Email Adresin...') {this.value = '';}" type="text" /><input value="yasarguner" name="uri" type="hidden" /><input value="Takip&ccedil;i ol" class="joinemailupdates" type="submit" />
</form>
</div>
</div>
</div>
</div>

Read More

Blogger Sayfa İle Kayan Sosyal Bar Eklentisi

Eklentimiz sayfanın solunda, sayfa ile beraber kayıyor. Her sayfa için ayrı bir paylaşım istatistiği sunuyor. Eklentinin demosuna buradan bakabilirsiniz. Ayrıca eklentinin en önemli özelliği ise, o sayfa daha önce kaç kere paylaşılmışsa, bunları eklentiyi ilk kurduğunuz andan itibaren istatistiklerde gösteriyor.



Gelelim kuruluma.



Tasarım > Sayfa ögeleri > Gadget ekle > Html / Javascript ekle bölümüne giriyoruz ve aşağıdaki kodumuzu ekliyoruz;

Kod:

<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style><span style="font-family: Verdana, sans-serif;">
<div id="pageshare" title="">
<div class="sbutton" id="fb"><a name="fb_share" type="box_count" style="text-decoration: none; " href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Focabbaroglu.blogspot.com%2F2012%2F01%2Fblogger-sayfa-ile-kayan-sosyal-bar.html&amp;t=Blogger%20Sayfa%20%C4%B0le%20Kayan%20Sosyal%20Bar%20Eklentisi%20-%20O%C4%9Fuzhan%20Cabbaro%C4%9Flu%20%7C%20Herkes%20gibi%2C%20herkesten%20farkli..&amp;src=sp"><span class="fb_share_size_Small fb_share_count_wrapper"><span class="fb_share_count fb_share_no_count fb_share_count_top"><span class="fb_share_count_inner"> </span></span><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">Share</span></span></span></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script></div>
<div class="sbutton" id="rt"><script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script><iframe src="http://api.tweetmeme.com/button.js?url=http%3A//ocabbaroglu.blogspot.com/2012/01/blogger-sayfa-ile-kayan-sosyal-bar.html&amp;style=normal&amp;o=http%3A//ocabbaroglu.blogspot.com/&amp;b=1" height="61" width="50" frameborder="0" scrolling="no"></iframe></div>
<div class="sbutton" id="su"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5">
</script><su:badge layout="5"></su:badge> <script type="text/javascript">   (function() {     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;     li.src = 'https://platform.stumbleupon.com/1/widgets.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);   })(); </script></div>
<div class="sbutton" id="digg" style="margin-left: 3px; width: 48px;"><script src="http://widgets.digg.com/buttons.js" type="text/javascript">
</script> <span class="db-wrapper db-clear db-medium"><span><span class="db-container db-submit"><span class="db-body db-medium"><span class="db-count">0</span><span class="db-copy">diggs</span><a class="db-anchor">digg</a></span></span></span></span></div>
<div class="sbutton" id="gplusone"><script src="https://apis.google.com/js/plusone.js" type="text/javascript" gapi_processed="true">
</script>
<div id="___plusone_1" style="height: 60px; width: 50px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><iframe allowtransparency="true" frameborder="0" hspace="0" id="I2_1327579241936" marginheight="0" marginwidth="0" name="I2_1327579241936" scrolling="no" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Focabbaroglu.blogspot.com%2F2012%2F01%2Fblogger-sayfa-ile-kayan-sosyal-bar.html&amp;size=tall&amp;count=true&amp;annotation=&amp;hl=tr&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3DGIwJDricDCc.en.%2Fsv%3D1%2Fam%3D!woarlKJ6couIIM1yWA%2Fd%3D1%2F#id=I2_1327579241936&amp;parent=http%3A%2F%2Focabbaroglu.blogspot.com&amp;rpctoken=177009189&amp;_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart" style="width: 50px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 60px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="-1" vspace="0" width="100%" title="+1"></iframe></div>
</div>
<div style="clear: both; font-size: 9px; text-align: center;"><a href="http://www.ocabbaroglu.blogspot.com/">Ocabbaroglu</a></div>
</div>
</span>

İşlem bu kadar. Herhangi bir sorunda yorum bölümünü kullanabilirsiniz.

Read More

Sitenizi Korumak için Yararlı 2 Kod

Evet arkadaşlar bildiğiniz gibi kendine özgün bloglardan çok aşırı şekilde içerik çalınıyor ve bu duruma el atmanın çok kolay yolu var. Yapmanız gereken tek şey sitenize aşağıdaki önerdiğim 2 kodu eklemeniz ve ziyaretçilerinizin sitenizden metini seçip kopyalamasını engeller. Çok yararlı bir kod. Bence bütün özgün blogların bu kodu kullanmaları gerekli...



Sağ Tıklama Engellemek için: (Sağ Tuş Kiliti) 

Kod:

<script language="Javascript1.2">
 
<script language=Javascript1.2>
if (window.Event) // Only Netscape will have the CAPITAL E.
********.captureEvents(Event.MOUSEUP); // catch the mouse up event
function nocontextmenu()  // this function only applies to IE4, ignored otherwise.
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e)   // This function is used by all others
{
if (window.Event)   // again, IE or NAV?
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
********.oncontextmenu = nocontextmenu;      // for IE5+
********.onmousedown = norightclick;      // for all others
</script>

Metin Seçmeyi Engellemek için: (Metin Seçme Engeli)

Kod:

<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>
<script type="text/javascript">
disableSelection(document.body)
</script>

Read More

Sitene Youtube Subscribe Widget Html Kodu

Görünüm:

Kısa ve çok kullanışlı bir iframe kodu yapmanız gereken sadece koddaki linkte işaretli yeri http://www.youtube.com/subscribe_widget?p=ozicab kendi kullanıcı adınızla değiştirmeniz ve istediğiniz yere eklemeniz yeterlidir! Güle güle kullanın sadece bir yorum yaparsanız sevinirim :)

Kod:

<iframe height="100" src="http://www.youtube.com/subscribe_widget?p=ozicab" width="200"></iframe>

Read More

Blogger'da Bütün Linkleri Yeni Sayfada Açmak

 Bütün linklerinizi yeni sekmede açmak. Tek tek bütün linklerinizin kodlarıyla uğraşmadan tek bir kod ile sitenizdeki bütün linkler otomatik olarak yeni sekmede açılacaktır. Aşağıdaki aşamaları uygulamanız yeterlidir. Linklerinizi yeni sekmede açmak sitenizden çıkılmamasına neden olur ve ziyaretçi sitenizde kalır!

Tasarım > Html'yi Düzenle > Widget Şablonlarını Genişlet



Ardından aşağıdaki etiketi buluyoruz.

head>

Etiketi bulduktan sonra, bulduğunuz etiketin hemen altına aşağıdaki kodu ekliyoruz.

<base target='_blank' />

Read More

Siteyle Beraber Kayan Reklam Alanı Kodu

Sitenizin üst veya alt tarafına ekleyebileceğiniz, sitenizle kayan reklam alanı kodunu sizlerle paylaşmak istedim. Arşivimden çıkardığım kodlardan biri eski sitelerinde kullanıyordum. Çok yararlı bir kod ön izlemesi aşağıdadır. Demosunu görmek için buraya tıklayın!

Görünüm:

Kod:

<div style="position: fixed; width: 100%; bottom: 0px;
background: none transparent scroll repeat 0% 0%; color: #fff; left:
0px; opacity: 1"><center>
<table border="0">
    <tbody>
        <tr>
            <td><center><a href="http://ocabbaroglu.com.nu"><img alt="Reklam Alanı" width="468" height="60" src="http://img.webme.com/pic/o/ozicabdeneme/ocabbaroglubanner1.png" /></a></center></td>
        </tr>
    </tbody>
</table>
</center></div>

Güle güle kullanın hepsi bu kadar..

Read More

Blogger Üst Çubuk Eklemek

Görünüm:

Evet yukarıda ki resimde gördüğünüz gibi sizinle birlikte kayan sabit üst çubuk. Demo görmek için buraya tıklayın! İsterseniz tek bi değişikle üstte sabitleyip kaymasını durdurabilirsiniz..

Aşağıdaki kodu blogger sitenizde tasarım bölümünden sayfa öğelerinden html/java script ekleyip başlık koymadan içine ekleyiniz.. <style> ... </style> etiketi arasındaki yükseklik, arka plan, üst boşlukları kendinize göre değiştirebilirsiniz..

Kod:

<style type="text/css">
#cubuk { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfn50R56-b4K11ZKRoeMC45QoZXZPkSvYVekqdiM1wlXI5vAmxdskcOUv4u_I-PKofcFEnB0coQowN9PejhPgvr5lpb_PYPKQfgFbSuz-ML52MQDwAOoKPAfCVN4PPzmeJIj6pOo0mvGT7/s1600/navideozi.png); border-style: none; margin:0px; font-size:11px; font-family: Trebuchet MS, Arial, Verdana; top: 0px; margin-bottom:0px; padding:0px; z-index:1; height: 34px; left: 0px; position: fixed; right: 0px; color: #fff; width: 100%; } .incubuksol { float: left; margin: 0px; } .incubukorta { float: center; margin: 5px; } .incubuksag { float: right; margin: 1px; }</style>
<div id="cubuk">
<div class="incubuksol">&nbsp;<a href="/"><img width="35" height="35" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylO2EWwEJdOrlFpaYZenUjmFsv-GKnku0gQpHdldez4DPsTggOnO1_mLypNlTW9zlpH6if9oWFBVfR0W4vMAbTXJ3Tf3XeIo853enBE_Aqw8orZoe8mxGEur9RwyKjd-5bpSKWglh9F5Y/s1600/2012favicons.png" /></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="incubuksag"><a href="http://videozi.blogspot.com/p/video-yukle.html"><img border="0" width="115" height="30" style="margin-top: 0px" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddtjaXLqGYN3GR6JTmjr3kZcSs5mk2gO1YkVfb6H29KrroDcslGQ3aj2ExEhDFRg6PhZBB9sHGEePnnKWhQWB7oQS0Lcg5zsNH2HnLeJ_mKwSZ-FArHnwf99k0UxlZm4Aobf25yhGTPbD/s1600/videoyuklevideozi.png" /></a>&nbsp;<a href="#"><img border="0" width="115" height="30" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdh_vRiDqW6SSIgCuvJ8hONSlDpXiKW_WOa79dYtUUSo1Mf1RzAc2fm7jn63q5HLgUjt3IRBvRe_ttvlzBzNO8C176FzIjJE44J8i_qF28eykHykzCNLJTh8_0ISLffrog5iih3iF5B_rX/s1600/facebookgirvideozi.png" /></a>&nbsp;</div>
<div class="incubukorta"><center> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fvideozi&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=35&amp;appId=126130847466547" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:850px; height:36px;" allowtransparency="true"></iframe> </center></div>
</div>

Güle güle kullanın hepsi bu kadar..

Read More

CSS3 yardımı ile Popüler Yayınlar Gadget'ı yapımı

İşte popüler yayınlar gadget'ı için güzel bir stil daha. Bu stili uygulamak için ne javascript ne de başka bir eklentiye gerek var. Sadece CSS3'ün güzel nimetlerinden faydalanarak bu gadget'ı oluşturuyoruz.

Öncelikle Tasarım kısmına gidip;

]]></b:skin>

Kodunu bulup öncesine aşağıdaki kodları ekliyoruz.

#PopularPosts1{max-width:300px} #PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0} #PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Tasarımınızda bir Popüler Yayınlar gadget'ı yoksa ekleyin, varsa aşağıdaki gibi olmasına dikkat edin.

Son olarak, Tasarımda Widget Şablonlarını Genişlet kutusunu işaretlemeden aşağıdaki kodu buluyoruz.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts'type='PopularPosts'/>

Şununla Değiştiriyoruz

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <dd> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/> <!-- (4) Show snippets and thumbnails --> <b:if cond='data:post.thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a> </b:if> </b:if> </b:if> </dd> </b:loop> </ul> <div class='clear'/> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Read More