BLOGGER TEMA-NEWS SCOPE SABLONU-Blogger Templates

NewsScope Şablonu, 3 sütun, kenar çubuğu, sağ ve sol dergi tarzı, yuvarlak köşeler,reklamalanları, slayt gösterisi, mesajların küçük görünümü, sekmeler,açılabilir menüler ile WordPress uyumlu ücretsiz bir blogger şablonu.(Bizim Kullandığımız Şablon).Bu temayı bloğuma nasıl uygularım?

Bu tema üzerinde yapmak istediğiniz değişiklik için ve yardım konularında, sorularınızda, konu altındaki yorumları kullanırsanız,sorularınız en kısa zamanda cevaplandırılacaktır....
Aldığım bir çok mail ve yorum sonrası bu temayı daha ayrıntılı anlatmaya karar verdim.
Başlık:

Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip ediyoruz,Widget Şablonlarını Genişlet Kutucuğunu işaretliyoruz.Başlık kısmında yapacağımız değişiklikler için aşşağıdaki kodu buluyoruz

#body-wrapper{margin:0;padding:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim9uzFo5HHZ0sqk1hLEyLPcXOw1vFt3gE1oFLtiX8j0ZTgDLkNn8t6J-IbDAOO2pzTezl5_fdgrTjVd30MSHYyHzUYIA76kZV4Gh6T5BMujiAPm6cGiDaTHyiB3Ph3l77QByjZdRzqfKU/s0/wrapper-bg.png) left top repeat-x;}

blockquote{overflow:hidden;padding-left:9px;font-style:italic;color:#666;border-left:3px solid #CADAE7}

bu kod içerisinde koyu renkle belirttiğim URL adresinde başlığımızı oluşturan resim bulunmakta.Bu URL adresindeki resim üzerinde değişiklik yaparak başlık rengimizi değiştirebiliriz.Tabi değişiklik yaptığımız resmi web ortamına aktarmamız gerekiyor.Resimleri web ortamında barındırmak için imageshack adlı siteyi size tavsiye edebilirim.http://img819.imageshack.us/img819/117/wrapperbg2kopya.png değişiklik sonrası resmi görmek için bu linke tıklayabilirsiniz.

Açılır Menü:Resimde 3-menü diye belirttiğimiz açılır menüde değişiklik yapmak için aşşağıdaki kodları buluyoruz.

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

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

<ul class='children'>

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

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

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

</ul>

</li>

Home  yazan yere Ana Sayfa yazın,Bussiness yerine menüde görünmesini istediğiniz ismi yazıyorsunuz # yerinede bu isme ait linki yazıyoruz.Örnek:

<li><a href='www.blogokulu.blogspot.com'>Blogokulu</a>

Genişlik Ayarlama:

Dış çerçeve genişiliği;

/* Outer-Wrapper----------------------------------------------- */

#outer-wrapper{width:950px;margin:0px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;}

#content-wrapper{background:#fff;}

Yazı alanı genişiliği; 

#main-wrapper{width:510px;padding-left:0px;padding-right:0px;float:left;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */

overflow:hidden;/* fix for long non-text content breaking IE sidebar float */

}

Sol kenar çubuğu genişliği;  

#lsidebar-wrapper{width:140px;float:left;margin-top:10px;margin-left:10px;margin-right:10px;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */

overflow:hidden;/* fix for long non-text content breaking IE sidebar float */

}

Sağ kenar çubuğu genişliği;  

#rsidebar-wrapper{width:260px;float:right;margin-top:10px;margin-left:10px;margin-right:10px;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */

overflow:hidden;/* fix for long non-text content breaking IE sidebar float */

}

Yazı Alanı Değişikliği:Yazı alnında bulunan başlık,çerçeve,yazı tipi,yazı boyutu gibi ayarlamaları burdan yapabilirisiniz.

/* Posts-----------------------------------------------*/

h2.date-header{margin:1.5em 0 .5em}

.post{border:1px solid #CBCBCB;background:#F8F8F8;margin-bottom:15px;padding:10px 10px 0 10px;}

.post-title{color:#333;margin:0 0 10px 0;padding:0;font-family:Arial,Helvetica,Sans-serif;font-size:20px;line-height:20px;font-weight:bold;text-transform:uppercase;}

.post-title a,.post-title a:visited,.post-title strong{display:block;text-decoration:none;color:#333333;}

.post-title strong,.post-title a:hover{text-decoration:none;color:#F28510;}

.post-body{padding-top:0px;padding-bottom:0px;margin:0px;font-family:Arial,Helvetica,Sans-serif;font-size:13px;line-height: 20px;}

.post-footer{margin:2px 0;color:$sidebarcolor;font:$postfooterfont;}

.comment-link{margin-$startSide:.6em}

.post-body img{padding:6px 6px 6px 6px;background: #fff;border:1px solid #CCCCCC;margin:0 4px 4px 0;}

Kenar çubukları:

/* Sidebar Content----------------------------------------------- */

.sidebar{margin:0 0 10px 0;color: #666666;}

.sidebar a{text-decoration:none;color: #666666;}

.sidebar a:hover{text-decoration:underline;color:#4C81C9;}

.sidebar h2{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDxKF6JvKrbEkfC0KiGmpRB-jiShlkdgOooURD23AV9fKSkBTRqMYZMByoHlGYUpIxEGBD0938UzLMCUJu-9ly4NuZ2cgLEPkBVkK3JCYPPf854zNmUwcWeUfdUeA3RHNqya2j1v8vy9I/s0/widget-title-bg.png) left top repeat-x;font-size:15px;line-height:15px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:8px 0 8px 10px;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;text-shadow:0 1px 0 #5E5E5E;}

.sidebar ul{list-style-type:none;margin:0px;padding:0px;}

.sidebar ul li{padding:6px 0 6px 9px;margin:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJR78q6MNPFFR4eMYBaPcnG1eOSlSFbs4_7exaUjC_XPetSpIfBMY1rVmve0Npbdsy_LDtC1rFN3lG1PARdtt1vPKCTRZSHlIT_L7uie8p6CGbt18lxNTVRz14Ab0WNnwx_gu365tePrY/s0/widget-list.png) left 12px no-repeat;border-bottom:1px solid #EFEFEF;}

.sidebar .widget{margin: 0 0 15px 0;padding:0px;}

.main .widget{margin:0 0 1.5em;padding:0 0 1.5em}

.main .Blog{border-bottom-width:0}

1.Linkte bulunan resmi değiştirerek widget başlık larının arka planını değiştirebilirsiniz.Eğer resimle falan uğraşmak istenmiyorum diyorsanız;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDxKF6JvKrbEkfC0KiGmpRB-jiShlkdgOooURD23AV9fKSkBTRqMYZMByoHlGYUpIxEGBD0938UzLMCUJu-9ly4NuZ2cgLEPkBVkK3JCYPPf854zNmUwcWeUfdUeA3RHNqya2j1v8vy9I/s0/widget-title-bg.png) 

şeklinde oplan kodu

background:#5E5E5E url adresini silerek renk kodu yazıpta değişiklik yapabilirsiniz.

SLAYT ALANI:

Slayt alnına koyacağınız resmin tam oturması için,resim boyutunun 482*260 ebatında olması tavsiye edilir.

Slayt alanı için kodlar içerisinde;

<!-- Featured Content Slider Started -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='featuredposts clearfix'>

<div class='fp-slides'>

1.RESİM ALANI

<div class='fp-post'>

<div class='fp-thumbnail'><a href='featured-post-1-url-here'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnSQEXvYLqrvPXfAfKZdZtouMFVU6OdwkVDYpTKTu05e5ZPsuCtW0OaMb2LU6FIDu9w1A49hX8J6oighKVpfz8iQ70MW28svNKPa9nzYgopzOaCGydJVMsyBJSTKGYS9miLqnEcWFB3UE/s0/1.jpg'/></a></div>

<h3 class='fp-title'><a href='featured-post-1-url-here'>This is default featured post 1 title</a></h3>

<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>

</div>

2.RESİM ALANI 

<div class='fp-post'>

<div class='fp-thumbnail'><a href='featured-post-2-url-here'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB1XJsHyIMGovaSiwyXfRSJKFKvbvHfrScIL5ncIn9s5eWUTHe9SigQLSsVUvXSYJaad2BLowFyiUisMjtke04ta97IAfPFV77lHHfD3GybxqJAZYEjvOUpe1WOJxSP3BGG7cIPyNdKus/s0/2.jpg'/></a></div>

<h3 class='fp-title'><a href='featured-post-2-url-here'>This is default featured post 2 title</a></h3>

<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>

</div>

3.RESİM ALANI 

<div class='fp-post'>

<div class='fp-thumbnail'><a href='featured-post-3-url-here'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUWal2f8Yp6MIfzqV-I002XC1ejhL87i9ioOAJyk5qQGM9oeHTWnHM3K2Qbu4m8hAyGYCw9V3Ai3yPPD6TBAmFlL6B_u17SRIZrY-bT4iduDxOo80-g1LG8eD2GX-SMp01XySXkmT8M4o/s0/3.jpg'/></a></div>

<h3 class='fp-title'><a href='featured-post-3-url-here'>This is default featured post 3 title</a></h3>

<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>

</div>

4.RESİM ALANI 

<div class='fp-post'>

<div class='fp-thumbnail'><a href='featured-post-4-url-here'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDI_qJCANSTW-xWAlY3M_GGuPF-9lS4ShPoQNwBXOy6n3blgN-bl0MW9SyhhdVJARlmJCjv9WXiFQY7Mr6kjniWfrIOQbCUP3wSSY2brqb6he4jwIgK29bKLL9UGllaudvk-XaKRPhPzk/s0/4.jpg'/></a></div>

<h3 class='fp-title'><a href='featured-post-4-url-here'>This is default featured post 4 title</a></h3>

<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>

</div>

5.RESİM ALANI 

<div class='fp-post'>

<div class='fp-thumbnail'><a href='featured-post-5-url-here'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkSgpVkCB6fZJi2ylC7BA1SdYb4h3zNRMz1X2ISAuVg_ua5Nah2R58Zx9K5SNuy5xvAe0_3emqJLIY0tyx9IynoNo0tsXKw-xxkeHCEnSy_Lcls9V9ohwOkmN340bk3QvW9yiNJUDVMw/s0/5.jpg'/></a></div>

<h3 class='fp-title'><a href='featured-post-5-url-here'>This is default featured post 5 title</a></h3>

<p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.</p>

</div>

</div>           

<div class='fp-nav clearfix'>

<span class='fp-pager'/>                

<a class='fp-next' href='#fp-next'/>

<a class='fp-prev' href='#fp-prev'/>

</div>

          

</div>

</b:if></b:if>

<!-- Featured Content Slider End -->

featured-post-1-url-here :Resmi tıklayınca açılmasını istediğin URL adresini buraya yazıyoruz.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnSQEXvYLqrvPXfAfKZdZtouMFVU6OdwkVDYpTKTu05e5ZPsuCtW0OaMb2LU6FIDu9w1A49hX8J6oighKVpfz8iQ70MW28svNKPa9nzYgopzOaCGydJVMsyBJSTKGYS9miLqnEcWFB3UE/s0/1.jpg :482*260 Ebatındaki resim URL adresini buraya yazıyoruz.(Resmimizi yine web ortamına atıyoruz)

This is default featured post 1:Buraya resmin altındaki başlığı yazıyoruz.

featured-post-1-url-here :Burayada başlığa tıklayınca açılmasını istediğiniz linki yazıyorsunuz.

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions :Burayada resmin altındaki açıklama metnini yazıyoruz.