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(http://3.bp.blogspot.com/_8aZXeWtZzQY/TUNIrS1nNWI/AAAAAAAAA80/ckCCvlFZI34/s000/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(http://4.bp.blogspot.com/_8aZXeWtZzQY/TUNIr8nw2pI/AAAAAAAAA88/VM_21ehg9kI/s000/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(http://3.bp.blogspot.com/_8aZXeWtZzQY/TUNIsIxK6BI/AAAAAAAAA9A/qGq4rKjzX4o/s000/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;
ş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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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='http://1.bp.blogspot.com/_8aZXeWtZzQY/TUNIy1v3hWI/AAAAAAAAA-Y/kT2hDsyZakw/s000/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='http://4.bp.blogspot.com/_8aZXeWtZzQY/TUNIzEqavpI/AAAAAAAAA-c/TQ-rGYodntg/s000/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='http://4.bp.blogspot.com/_8aZXeWtZzQY/TUNIzaxiMxI/AAAAAAAAA-g/RIWXTIlNfn8/s000/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='http://4.bp.blogspot.com/_8aZXeWtZzQY/TUNIz4LBtEI/AAAAAAAAA-k/eCklKBD6TN8/s000/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='http://4.bp.blogspot.com/_8aZXeWtZzQY/TUNI0FaheWI/AAAAAAAAA-o/5UqyhTFhhiU/s000/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.
http://1.bp.blogspot.com/_8aZXeWtZzQY/TUNIy1v3hWI/AAAAAAAAA-Y/kT2hDsyZakw/s000/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.
blogger şablonları , blogger şablonu değiştir , blogger temaları , blogger templates , news scop , site şeması , site temaları , sitene şablon ekle
Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.
renklerini sizinki gibi aynı renk yapmayacağım nasıl değiştiriyoruz
YanıtlaSilbir de yorum kutusunu sizinki gibi nasıl yapabiliriz
YanıtlaSilbenim yorumlar disqus adlı siteden.Googlede arat disqus diye.Bu siteye kaydol ve ardından sana verdiği kodu html/javascript gadgeti içine yapıştır ve kaydet yorum kutun benimki gibi olur.
YanıtlaSilBu şablonu soran çok oluyor, oyüzden en kısa zamanda bununla ilgili bir yazı yayınlıyacağım,yorumlar kısmında anlatılacak gibi değil.
YanıtlaSilçok teşekkür ederim
YanıtlaSilteşekkürler hocam bekliyorum
YanıtlaSilHocam lütfen kusura bakmayın, çok soru soruyorum. Ama ne kadar konuları okusam da tecrübesiz biri olduğumdan sorular çoğalıyor.
YanıtlaSilDiyelim ki blogu yaptık. Şu kod bilgisi html, css, jquery vs. falan olmadan daha kolay yönetmenin yolu yokmudur? Gülüceksiniz belki ama bu kodları gördükçe korkuyorum ben :) Hatta itiraf ediyorum kod yazma düzenleme olayını öğrenmek zor geliyor. Ayrıca çok dikkat isteyen birşey çünkü. Bilmeyen için de epeyce zaman alıyor. Mesela ana sayfadaki slightları falan sık sık değiştirmek istiyorsa kullanıcı. Bu durumda bir domain ve hosting alarak blog site kurmaktan vazgeçip ücretli bir tasarım mı yaptırmalıdır? Cahilliğimi bağışlayın ama bildiğim kadarıyla hosting alındığında bir yönetim paneli falan oluyor diye duydum. Bu ücretli firmaların site yönetim panellerini hiç görmedim. Her hangi bir siteyi sık sık güncelleyebilmek için blogger sitelerdeki gibi kod düzenlemesi mi yapmamız gerekiyor, yoksa kod bilgisine haiz olmadan daha kolay yönetilebiliyor mu site?
Mesela ben bu linkte http://blogokulu.blogspot.com/2012/04/blogger-slayt-alani-ekle-jquery-ile.html sizin anlattığınız gibi aksiyonlardan çok hoşlanıyorum. Sanırım en zor bunları düzenlemek ve sık güncelleyebilmek değil mi? Eğer bunları daha basit ve kolay yönetmenin bir yolu varsa ücretli site yaptırmayı dahi düşünüyorum.
Ama yok yine kodları bilmeden bir çırpıda güncelleyemezsin diyorsanız ne önerirsiniz? Şu linkte; http://www.pixeloplosan.com/2012/02/madkassar/ bir template var, oradaki hareketi demodan uygulamaya çalıştım kendi bloğuma ama yapamadım :( Dilerim anlatabilmişimdir derdimi, cevap ve önerilerinizi yazarsanız çok sevinirim. Saygılar.
blogger da yapamıyorsan bu işi ücretli site panellerinde bu iş dahada zordur.En kolayı wordpress ve blogger.Bu ikisi ile biraz uğraşırsan ne kadar kolay olduğunu görürsün.Senin için gerekli olan tek şey sabır arkadaşım.Hop diye açıpta, herkes blog yada site yapamaz zaten, sabırlı olmalısın.Slayt alanı güncelleme işi ise çok basit bir işlem dediğim gibi sabırlı olmalısın.Bundan sonra anlatacaklarımı sana mail ile gönderiyorum.
YanıtlaSilÇok sağolun cevaplar için. İyi çalışmalar.
YanıtlaSilhocam yazı boyutlarını nasıl küçültebiliriz home business varya orayı mesela
YanıtlaSilşablonda slayt resimlerin kodlarında url ve yazılarda değişiklik yapınca slayt olayı ortadan kalktı.kontrol ettim slayt başlangıç ve bitiş kodlarında bir değişiklik yok,yerlerinde duruyorlar.ayrıca orjinal slayt başlangıç kodundan bitiş koduna kadar olan eski kodları tekrar yerine koydum yine de eski haline gelmedi.nerde hata yapmış olabilirim.slayt olayını nasıl ortaya çıkaracagım.resimler alt alta dizilmiş gibi çıkıyor.2.resmin tepe noktası çerçevenin sonunda beliriyor.
YanıtlaSilbir de sağ çubuk daki video tag kısmını nasıl düzenleyebiliriz.
YanıtlaSilsorun çözüldü...
YanıtlaSilhocam bana bu şablonda sol kenar çubugundaki face-twit-rss eklentisini nasıl kaldıracağımızı(yerine gadget) bir de sağ kenardaki video-tag kısmını nasıl kullanacağımızı yazarsan bu şablonla işim bitecek....
YanıtlaSil<div id='lsidebar-wrapper'> kodunun altında üç ayrı paragraftan oluşan kodlar var üçüncü paragaraftaki </div> koduna kadar silersen söylediğin eklentiler kalkar.
YanıtlaSilVideo tag kısmınada bakayım.?
video-tag jeton yeni düştü:html kodları içerisinde
YanıtlaSil<li><a href='#widget-themater_tabs-1432447472-id1'>Videos</a></li><li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li><li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li> şeklinde yazılan kodları bul, koyu renkle yazılı olanlar sekmelerdeki menü isimleri bunları isteğine göre değiştirebilirsin.
Yerleşim olarak da;Tasarım modundayken blog kayıtlarının altına eklediğin gadgetler burda görünür.Gadgetler arasında bir boşluk bıraktığın yerde diğer sekmeye ait alanı geçmiş olursun.
Örnek:Videos sekmesi tıklanınca blog kayıtlarının hemen altında bulunan gadgetler görüntülenir.Tags sekmesini tıklayınca Gadgetler arasında bir boşluk bıraktığın yerden itibaren eklediğin gadgetler görünür.
merhaba ÇOK UĞRAŞTIM SLAYT ALANI YAPAMADIM DONUK DURUYOR
YanıtlaSilMerhaba benim bu temayla ilgili ciddi sorunlarım var yardımcı olursanız sevinirim videos tag gibi şeyleri değiştirmek istiyorum mesela popüler yayınları videos kısmına eklemek istiyorum nasıl yapıcam labels die bişey var onda çıkıyor popüler yayınlar ancak o da sayfayı yenilediğimde çıkmıyor tıklıyınca çıkıyor videos kısmına koyabildim birde videos tag gibi şeylerin altına hiçbir java/htlmscrip kodu koyamıyorum çıkmıyor sizin yaptıgınız çerçeve rengi kodunu nereye yapıştırıcam temanın kendisinde olay siyah rengi var anasayfa felan yani nasıl anlatsam bilmiyorum sizin yeşil mesela onu nasıl değişterebilirim slayt alanında sıkıntılar oldu kusura bakmayın bu işlerde çok acemiyim yanıtlarınız için Şimdiden Teşekküler :)
YanıtlaSilaynı soruyu @darall adlı arkadaş sordu, ona aşşağıdaki yorumda cevap verdim onu okursanız sorunuza cevap bulabilirsiniz.(video-tag diye başlayan yorum).
YanıtlaSilUsta şu sol taraftaki facebook twit simgeleri nasıl kalkıyor veya düzenleniyor
YanıtlaSilcomments nasıl yorum olarak değiştiricez
YanıtlaSil1--numComments == 0'>comments</b:if>
YanıtlaSil2--cond='data:post.numComments == 1'>1 comments
3--<data:post.numComments/> comments</b:if></a></b:if>
şeklinde üç adet kod var burda koyu yazdığım yeri değiştirip yorum yazarsan olur.Üç tane olmasının sebebi ingilizcedeki tekil çoğul muhabbetinden kaynaklanıyor
teşekkür ederim :)
YanıtlaSilBaşlıkları istediğiniz gibi ayarlamak için:
YanıtlaSil.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;} kodunu bulun ve koyu renkle yazdığımız text-transform:uppercase;kodunu silin.
saol abi reklamlarına fırsat buldukça tıklıyorum
YanıtlaSilLÜTFEN cevap benim slaytım böyle çıkıyor nasıl düzelticem http://e1205.hizliresim.com/x/z/78s1y.png
YanıtlaSiltatlılar mükemmel:) eklediğiniz bir eklentiden dolayı slaytınız çalışmıyor en son ne eklediyseniz onu kaldırın.script kodları çakışınca bu hatayı veriyor.eğer </head> bu koddan önce bir scrip kodu eklediyseniz onu kaldırın.
YanıtlaSilslaytla sitenizde olan facebook eklentisi çakışıyor <script gösterdiğiniz iki yöntemide denedim olmadı ikisinden birini kaldırdıgımda düzgün çalışıyor nasıl düzeltebilirim?
YanıtlaSilne demek istediğinizi anlayamadım?
YanıtlaSilTemada olan slayt ve facebook eklentisi çakışıyor birinden birini kaldırırsam bir çalışıyor diğeri çalışmıyor iki yöntemide denedim olmuyor sitenizde kullandıgınız facebook eklentisinden bahsediyorum nasıl düzeltebilirim:)
YanıtlaSilfacebook eklentisinde 1.adımda verdiğim script kodunu ]]></b:skin> kodunun hemen altına yerleştirirseniz sorun çözülür.
YanıtlaSildenedim sorun çözülmüyor
YanıtlaSilhead kodundan önce eklediğiniz 1.adımdaki script kodunu sildiniz mi?
YanıtlaSilevet yaptım
YanıtlaSilhttp://blogokulu.blogspot.com/2012/02/facebook-begen-kutusu-ekle-sagdan.html burdakı herşeyi yaptım :(
tamam düzeltim sorunu htlmden kaynaklınıyormus :) ilginizden dolayı teşekkürler :)
YanıtlaSilread more nasıl türkçe yapıcam, birde üsteki tarih boyutunu nasıl küçültebilirim :)
YanıtlaSilbu temanın arka planına resim koyulmuyor yarım olarak çıkıyor bn mi yapamıyor yoksa temada böyle mi özellik mi yok
YanıtlaSilhtml düzenleme bölümüne gelerek, arama yaptırın NO COMMENT yada commenti ardından o bölümü değiştirin ön izleme ile bakın doğru yapılmamışsa kaydetmeyin. Ayrıca bu işlemi yapmadan bir yedek alırsanız yararınıza tabiki :)
YanıtlaSilBen de bu temayı kullanıcam yeni başladım bu blog olayına site sahibine çok teşekkür ediyorum :)
YAHU ARKADASLAR ANLAMADIGIM SABLONUN GADGETLERINI NASIL DUZENLEYECEGIM HTML BULDUM LAKIN ISIM DEGISTIM AMA LINKI NASIL EKLEYECEGIM ANLAMADIM YANINA SAGINA SOLUNA EKLEDIM ENTEGRE OLMADI DUZENLEMEYI HTML MI YOKSA FARKLI YERDENMI YAPACAGIZ
YanıtlaSilCopyright © 2011 BLOG OKULU | Powered by Blogger yazan kısmı nasıl büyütebilirim
YanıtlaSilSlayt bölümü animasyonlu gözükmüyor lütfen yardım ilk resim gözüküyor diğerleri gözükmüyor animasyonlu değil lütfen yardım
YanıtlaSilAnlamadım ayrıntılı anlatırmısınz head dan öncekini sildim ama aynı arkadaşınki gibi
YanıtlaSilhocam öyle bi kod yok arattım
YanıtlaSilYaptım ama başlığı nerden değiştirceğimi bilmiyorum :)
YanıtlaSilolmadıı yardım edermisiniz
YanıtlaSililk olarak bende bu temayı kullandım. Çok memnun kaldım.Şimdi wordpress kullanıyorum. Teşekkür ederim.
YanıtlaSilSELAM RESİMLERİ GENİŞLETEBİLİYORMUYUZ GENİŞLİYORSA NASIL YAPABİLİRİZ
YanıtlaSil.featuredposts{margin:10px 0 15px 0;border:2px solid #4d6b0c;width:510px;background:#FFFFFF;height:390px;overflow:hidden;uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
YanıtlaSil.fp-slides{}
.fp-post{padding:13px}
.fp-thumbnail{width:482px;height:260px;margin-bottom:10px;overflow:hidden}
slayt alanı resim boyutunu yukarıdaki koddan değiştirebilirsiniz.birinci değer slayt alanı dış çerçeve genişliği ve yüksekliği, ikşinci değer ise reim için ayrılan alanın genişliği ve yüksekliği.Yüklediğiniz resmin genişliğinin ve yüksekliğinin ikinci değerdeki kadar olmasına dikkat edin,yani resminizi önceden boyutlandırın.
merhaba slayt alanını otomatik yapamazmıyız mesela konu ekledim orda kendisi gözüksün gibi örnek
YanıtlaSil