Yazıları Çerçeve İçine Almak

Bugüne kadar kullandığım ve tasarladığım temalarda yazı alanını hep bir çerçeve içine almayı tercih etmişimdir.Yazılarım genelde uzun, görselerle destekli ve kod içeren yazılar olduğu için Resimli Devamını Oku eklentisi kullanarak ana sayfada yazının küçük bir bölümünü gösteriyorum ve bu bölümleri çerçeve içine alarak birbirinden ayırıyorum.

 

İletişim formundan bunun nasıl yapıldığını soran çok mesaj aldım.Bu yazıda yazılarınızı nasıl çerçeve içerisine alacağınızı ve bu çerçevelere nasıl stil vereceğinizi anlatacağım.

 

1. Klasik ve basit bir çerçeve ile başlayalım

 

İlk örnek en basit çerçeve örneği olsun.Resimde gördüğünüz gibi yazılarınızı 1 pixel kalınlığında siyah bir çerçeve içine almak için ]]></b:skin> kodundan önce şu kodu ekleyin:

 

.post { border:1px solid #000; padding:8px }

 

2. Çerçevenin kalınlığını ve rengini değiştirelim

 

İkinci örnekte çerçevinin kalınlığını 3 pixele çıkaralım ve rengini kırmızı yapalım.Bunun için kodları şu şekilde değiştiriyoruz:

 

.post { border:3px solid #ef1010; padding:8px }

 

3. Çerçeve şeklini noktalı yapalım

 

Üçüncü ve dördüncü örnekte çerçevenin şeklinde yapabileceğiniz değişiklikleri göstermek istiyorum.Öncelikle noktalı çerçeve yapalım.Örneğin çerçevemiz 2 pixel kalınlığında, siyah renkte ve noktalı olsun.Bunun için eklememiz gereken kod şu:

 

.post { border:2px dotted #000; padding:8px }

 

4. Çerçeve şeklini çizgili yapalım

 

Çerçevemizin şeklini noktalı yapmanın dışında bir başka sık kullanılan yöntem de çizgili yapmaktır.Bunun için de kırmızı renkli, 1 pixel kalınlığında ve çizgili bir çerçreve örneği verelim.Eklememiz gereken kod şu:

 

.post { border:1px dashed #ef1010; padding:8px }

 

5. Oval köşeli çerçeve yapalım

 

Bu ve bundan sonra göstereceğim örnekte kullanacağımız yöntem CSS3 olduğu için Internet Explorer gibi çağ dışı tarayıcılarda çalışmaz.Bu örnekte yazımızı 1 pixel kalınlığında, siyah renkli ve 10 pixel yarıçapında oval köşeli bir çerçeve içine alacağız.Eklememiz gereken kod şu:

 

.post { border:1px solid #000; padding:8px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

 

6. Oval köşeli noktalı çerçeve yapalım

 

Son olarak oval köşeli çerçevinin şeklini noktalı , kalınlığını 2 pixel ve yarıçapını 20 pixel yapıp bir çerçeve oluşturarak yazıyı bitirelim.Ekleyeceğimiz kod şu:

 

.post { border:2px dotted #000; padding:8px;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px; }

 

Son Söz

Olayın mantığını anlamanız için bu kadar örneğin yeterli olduğunu sanıyorum.Bundan sonra kendiniz de çeşitli kombinasyonlar oluşturarak farklı çerçeveler kodlayabilirsiniz.Sormak istediğiniz bir şey olursa yorum yazarak sorabilirsiniz.Bu arada yazıyı oluşturmak için epey zaman harcadım.Faydalı bir yazı olduğunu düşünüyorsanız aşağıdaki paylaşım butonlrını kullanarak yazıyı paylaşın lütfen.

Πρωτιά ΣΥΡΙΖΑ στη Θήβα – Συγκεντρωτικά τελικά αποτελέσματα Δήμου Θηβαίων

Σε 67 επι συνόλου 67 Εκλ. Τμημάτων 100,00%
Tελικά αποτελέσματα.
Εγγεγραμμένοι Εκλογείς 33.458 Άκυρα 145 (0,69%) επί των ψηφισάντων
Ψηφίσαντες Εκλογείς 21.002 (62,77%) επί των εγγεγραμμένων Λευκά 58 (0,28%) επί των ψηφισάντων
Σύνολο Άκυρων-Λευκών 203 (0,97%) επί των ψηφισάντων Αποχή 12.456 (37,23%) επί των εγγεγραμμένων
Έγκυρα 20.799 (99,03%) επί των ψηφισάντων
ΔΗΜΟΣ ΘΗΒΑΙΩΝ
ΣΥΡΙΖΑ 6.070 29,18%
ΝΕΑ ΔΗΜΟΚΡΑΤΙΑ 4.676 22,48
ΧΡΥΣΗ ΑΥΓΗ 2.217 10,66%
ΠΑΣΟΚ 2.181 10,49%
ΑΝΕΞΑΡΤΗΤΟΙ ΕΛΛΗΝΕΣ 1.987 9,55%
ΔΗΜΟΚΡΑΤΙΚΗ ΑΡΙΣΤΕΡΑ 1.307 6,28%
ΚΚΕ 1.077 5,18%
ΛΑΟΣ 356 1,71%
ΔΗΜΙΟΥΡΓΙΑ ΞΑΝΑ 267 1,28%
ΟΙΚΟΛΟΓΟΙ ΠΡΑΣΙΝΟΙ 143 0,69%
ΔΕΝ ΠΛΗΡΩΝΩ 102 0,49%
ΑΝΤΑΡΣΥΑ 96 0,46%
ΚΟΙΝΩΝΙΑ 67 0,32%
ΕΝΩΣΗ ΚΕΝΤΡΩΩΝ 67 0,32%
ΜΛ ΚΚΕ ΜΛ 61 0,29%
ΠΑΝΚΙ 60 0,29%
ΚΟΜΜΑ ΠΕΙΡΑΤΩΝ ΕΛΛΑΔΑΣ 40 0,19%
ΕΘΝΙΚΗ ΕΛΠΙΔΑ 25 0,12% 

ΠΩΣ ΨΗΦΙΣΕ ΤΟ ΜΟΥΡΙΚΙ

ΕΚ 79 ΜΟΥΡΙΚΙ

ΝΔ                                     117                                27,99%

ΣΥΡΙΖΑ                             107                                25,60%

ΠΑΣΟΚ                              70                                 16,75%

ΧΡΥΣΗ ΑΥΓΗ                    32                                  7,66%

ΔΗΜΑΡ                              31                                  7,42%

ΑΝΕΞ ΕΛΛΗΝΕΣ              25                                  5,98%

ΚΚΕ                                     17                                  4,07%

ΛΑΟΣ                                     5                                  1,20%

ΠΑΝΚΙ                                   3                                  0,72%

ΑΝΤΑΡΣΥΑ                           3                                  0,72%

ΔΕΝ ΠΛΗΡΩΝΩ                   2                                  0,48%

ΕΝΩΣΗ ΚΕΝΤΡΩΩΝ           2                                  0,48%

ΟΙΚΟΛΟΓΟΙ                          2                                  0,48%

ΠΕΙΡΑΤΕΣ                              1                                  0,24%

ΜΛ ΚΚΕ ΜΛ                         1                                  0,24%

Ποιοι βουλευτές εκλέγονται στη Βοιωτία

Πρώτο κόμμα ο ΣΥΡΙΖΑ στη Βοιωτία εκλέγει, όμως μόνο έναν βουλευτή λόγω του bonus των εδρών της ΝΔ η οποία εκλέγει τρεις βουλευτές.

Από τον ΣΥΡΙΖΑ εκλέγεται
Σταθάς Ιωάννης
Από τη ΝΔ εκλέγονται
Μπασικάκος Ευάγγελος
Καράμπελας Ιωάννης
Κουτσούμπας Ανδρέας

Slayt Manşet Eklentisi

Şuan kullandığım temanın eski halini hatırlarsanız yazıların hemen üstünde Jquery oluşturulmuş bir slayt manşet bölümü vardı ve ön plana çıkarmak istediğim yazıları bu  mamşete koyuyordum.Ancak sürekli güncellemek zor olduğundan ve içerdiği scriptler  nedeniyle blogumuu yavaşlattığını düşündüğümden o slayt manşeti kaldırmıştım.

 

 

Kullandığım o slayt manşetin kaynak kodlarını Web Developer Plus isimli bir siteden almıştım ve benden isteyenlere kaynağın adresini veriyordum.Ancak gelen mesajlardan eklentiyi ekleme konusunda çoğu kişinin sorun yaşadığını gördüm ve blogunuza slayt manşet eklentisini nasıl ekleyeceğinizi detaylı bir şekilde anlatmaya karar verdim.

 

1.Adım: Şablonunuzdan </body> kodunu bulun ve hemen üstüne aşağıdaki script kodlarını ekleyin.

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
    });
</script>

 

2.Adım: Şablonunuzdan ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki stil kodlarını ekleyin.

 

#featured{
float:left;
width:900px;
height:300px;
padding:0;
margin-bottom:30px;
position:relative;
overflow:hidden;
border:3px solid #4494c5;
background:#000;
}

#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:610px;
list-style:none;
padding:0;
margin:0;
width:300px;
height:292px;
overflow:auto;
overflow-x:hidden;
z-index:100;

}

#featured ul.ui-tabs-nav li{
padding:0 0 0 15px;
}

#featured ul.ui-tabs-nav li img{
float:left;
margin:0 5px 0 0;
background:#fff;
padding:3px;
width:70px !important;
height: 57px !important;
}

#featured ul.ui-tabs-nav li span{
position:relative;
left:0;
top:13%;
line-height:1.3em;
}

#featured li.ui-tabs-nav-item a{
background:#000;
color:#fff;
display:block;
padding:5px;
height:63px;
text-decoration:none;
line-height:1.2em;
outline:none;
width: 300px;
font-family: verdana;

}

#featured li.ui-tabs-selected{
background:url(http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/resultset-previous-icon.png) center left no-repeat;
z-index:100;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#4494c5;
color:#FFF;
}

#featured .ui-tabs-panel{
width:630px;
height:292px;
position:relative;
padding:0;
margin:0;
z-index:50;
}

#featured .ui-tabs-panel img{
width:630px !important;
height:290px !important;
z-index:50;
}

#featured .ui-tabs-panel .info{
position:absolute;
padding:5px 20px 5px 20px;
bottom:0;
left:0;
overflow:hidden;
height:63px;
width:610px;
background:#111;
opacity:0.85;
filter:alpha(opacity=85);
.width: 100%; /* IE */
z-index:50;
}

#featured .info h3{
font-size:18px;
padding:0;
margin:0;
overflow:hidden;
font-family: Verdana;
font-style: bold;
}

#featured .info p{
margin:0;
padding: 5px 20px 5px 0px;
line-height:1.4em;
color:#fff;
}

#featured .info a, #featured .info a:visited{
text-decoration:none;
color:#56c0fd;
}

#featured .info a:hover{
text-decoration:underline;
}

#featured .ui-tabs-hide{
display:none
}

 

3.Adım: Blogger’ın kendi şablonlarından birini kullanıyorsanız  <div class='columns-inner'> kodunun altına, özel bir tema kullanıyorsanız <div id='content-wrapper'> kodunun altına aşağıdaki HTML kodlarını ekleyin.

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='featured'>
               <ul class='ui-tabs-nav'>

                   <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-4'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7kRcdrQS9ggIi7r_9nmir7v2d9zYJCHkQGAOqxETPCOUg2BgO-GXRyUr6gUr5W-x-tvfO8Mds07xg6G-x5c_dXDs0NUHekzfF3cHpJfdEU1UbuP_hyphenhyphenkJeK3Oq33zxGUmGyj_bHvgqmec/s1600/bloghocama-misafir-olmanin-faydalari.jpg' width='80'/><span>Blog Hocam&#39;a Misafir Olmanın Faydaları </span></a></li>

                   <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-3'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhnbDAxgOqtyLW068z6xtx9_0rViQh47Lu0xqixOgwn6JMhvMeKfCeSiys1fRXOAST11MbpWg7QULbzNttTk1Ui1itpn-inpGYIVsvbGbm_05g2PnFo7bVAs7xKtc_SDzZE5YGp56-W3g/s576/misafir-blogculuk.png' width='80'/><span>Misafir Blogculuk E-Kitabı</span></a></li>

                   <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-2'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGr4rORIzVMsd7B8gGMv7ATwzv6Ac7t59SseooVSDKMQaVilT9_3Gtgz2izt03AXsyjbFgRfGThR1wRRXJIAgNXEHJntIAidwc6KQEEW0WYifTtKhZU2DRdbiemnwVsh36kB5l0zU4UEa/' width='80'/><span>Bir Blogcunun Sahip Olması Gereken 5 Temel Beceri</span></a></li>

                   <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-1'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDXcO3oIhQ6n42zQ1UNZoOC0iqauonteZdttsQwxQCsnOeyzqjBH5y1qkp0VFlC5a8d8I5fj4pC-aiKJKtPH1n7D5GJn6uR8DEph0BcUcCAvpI8WZX87NE3myjCuurLuYyywkeTk9aEU_/' width='80'/><span>Başarılı Blogcuların Özellikleri </span></a></li>
               </ul>

               <!-- First Content -->
                <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7kRcdrQS9ggIi7r_9nmir7v2d9zYJCHkQGAOqxETPCOUg2BgO-GXRyUr6gUr5W-x-tvfO8Mds07xg6G-x5c_dXDs0NUHekzfF3cHpJfdEU1UbuP_hyphenhyphenkJeK3Oq33zxGUmGyj_bHvgqmec/s1600/bloghocama-misafir-olmanin-faydalari.jpg' width='600'/>
                   <div class='info'>
                       <h3><a href='http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html'>Blog Hocam&#39;a Misafir Olmanın Faydaları</a></h3>
                           <p>Kendi blogum duruken, yazımı neden başka bir blogda yayınlayayım? ve Blog Hocam&#8217;a neden misafir olayım? diye soranlara cevaben bir örnek vermek istiyorum...<a href='http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html'>Devamını Oku</a></p>
                   </div>
                </div>

               <!-- Second Content -->
                <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
                    <img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhnbDAxgOqtyLW068z6xtx9_0rViQh47Lu0xqixOgwn6JMhvMeKfCeSiys1fRXOAST11MbpWg7QULbzNttTk1Ui1itpn-inpGYIVsvbGbm_05g2PnFo7bVAs7xKtc_SDzZE5YGp56-W3g/s576/misafir-blogculuk.png' width='600'/>
                    <div class='info'>
                       <h3><a href='http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html'>Misafir Blogculuk E-Kitabı</a></h3>
                           <p>Bu e-kitap sayesinde misafir blogculuk kavramının daha iyi anlaşılacağını ve daha çok kişi tarafından uygulanacağını umuyorum.Siz de bu kitabı okuyun ve kitabın linkini paylaşın...<a href='http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html'>Devamını Okuyun</a></p>
                    </div>
                </div>

                <!-- Third Content -->
               <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
                   <img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGr4rORIzVMsd7B8gGMv7ATwzv6Ac7t59SseooVSDKMQaVilT9_3Gtgz2izt03AXsyjbFgRfGThR1wRRXJIAgNXEHJntIAidwc6KQEEW0WYifTtKhZU2DRdbiemnwVsh36kB5l0zU4UEa/' width='600'/>
                   <div class='info'>
                      <h3><a href='http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html'>Bir Blogcunun Sahip Olması Gereken 5 Temel Beceri</a></h3>
                          <p>Bu yazıda blogunuzun uzun ömürlü başarılı ve uzun ömürlü olması için blog oluşturduktan sonra başarıya ulasşmak için bilinmesi gereken bir konudan bahsedeceğim ....<a href='http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html'>Devamını Oku</a></p>
                   </div>
                </div>

                <!-- Fourth Content -->
               <div class='ui-tabs-panel' id='fragment-1' style=''>
                   <img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDXcO3oIhQ6n42zQ1UNZoOC0iqauonteZdttsQwxQCsnOeyzqjBH5y1qkp0VFlC5a8d8I5fj4pC-aiKJKtPH1n7D5GJn6uR8DEph0BcUcCAvpI8WZX87NE3myjCuurLuYyywkeTk9aEU_/' width='600'/>
                   <div class='info'>
                       <h3><a href='http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html'>Başarılı Blogcuların Ortak Özellikleri </a></h3>
                          <p>Dünyaca ünlü ve başarılı blogcuları başarıya götüren bazı alışkanlıkları ...<a href='http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html'>Devamını Oku</a></p>
                   </div>
               </div>
            </div>
</b:if>
</b:if>

 

Düzenlemeniz Gereken Yerler

 

Sadece 3.adımdaki HTML kodlarında değişiklik yapacaksınız.Örnek olarak manşette gösterilen ilk öğeyi nasıl değiştireceğinizi yazayım diğerlerini aynı şekilde düzenlersiniz.

 

• Baştaki https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7kRcdrQS9ggIi7r_9nmir7v2d9zYJCHkQGAOqxETPCOUg2BgO-GXRyUr6gUr5W-x-tvfO8Mds07xg6G-x5c_dXDs0NUHekzfF3cHpJfdEU1UbuP_hyphenhyphenkJeK3Oq33zxGUmGyj_bHvgqmec/s1600/bloghocama-misafir-olmanin-faydalari.jpg yerine manşetin sağ tarafındaki kutuda gösterilecek resmin adresini yazın.
• İlk Blog Hocam&#39;a Misafir Olmanın Faydaları  yazısı yerine kutuda gösterilen resmin yanında gözükmesini istediğiniz metni yazın.
• İkinci https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7kRcdrQS9ggIi7r_9nmir7v2d9zYJCHkQGAOqxETPCOUg2BgO-GXRyUr6gUr5W-x-tvfO8Mds07xg6G-x5c_dXDs0NUHekzfF3cHpJfdEU1UbuP_hyphenhyphenkJeK3Oq33zxGUmGyj_bHvgqmec/s1600/bloghocama-misafir-olmanin-faydalari.jpg yerine manşette gözüken büyük resmin adresini yazın.
• Baştaki ve ikinci http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html  yerine yazının URL’sini yazın.
• Kendi blogum duruken, yazımı neden başka bir blogda yayınlayayım? ve Blog Hocam&#8217;a neden misafir olayım? diye soranlara cevaben bir örnek vermek istiyorum yerine yazının hakkında kısa bilgi yazın.