Blogger Yazı Üstüne Yazar, Etiket, Yorum Ekleme



Bloggerda bu yazımda sizlere anlatacağım konu her yayının üstünde sizin profiliniz, ne zaman yayınlandığı yazınızın,etiketler ve kaç yorum yapıldı özelliği.
Üst resimdede görmüş olduğunuz gibi arkadaşlar bu şekilde blog profilinizi renklendirebilirsiniz bunun bir demosunuda sizlerle aşağıda paylaşıyorum uygulaması ve yapımı oldukça basit bir eklenti bu içeriği hakkındada değiştirmek istediğiniz yerleri sizlere anlatıcam.

DEMO



  • Blogger Kumanda Paneli girin
  • İlk Başta Şablonumu Yedeklemeyi Unutmayalım.
  • Daha  sonra Şablon seçin
  •  HTML'yi düzenle >> Witget Şablonu Genişlet daha sonra CRTL+F yardımı ile <div class='post-header'> kodunu bulun.
  • Şimdide aşağıdaki kodları bulduğunuz <div class='post-header'> kodunun üstüne yapıştırın.

  • <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrDwjkSrbXHiV3_O-RDQ9eqCU8RDRR48Sdd6lqzAdRBQL6w8OWZeChbOeDVB8TZjJogzDjnlI0WgYuTdmLtr-wPFjtKRYeeK8bmjxDdp1053GYq3-TZkkWQ67ku15OLCxhqUwUEzbtsnvp/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVS3TwKGjpM55siI5ECrn7DdpX4Uy5JFMPZaHRHU7M6CF_C0lCuDRG48hvnlqqQrokIiYdvI37x_epTnFcPZx8EndJcgCv-RdzlSXHapcFPUQOyjwFDq6NLsmQqdogD52uYId-l-nZboc/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMwG8gy2hChY3QwE4TebL_b526haLMVHWqvCqhQe-7dPk89geJxK_txsfJkSL9Zxh_xNAqNVr7meq1B9Q_CptTenDVuX7YJteRWytQGqJ5eMRgQQraF1oAGuBtuyRLUriQGCMHUJ05WUrV/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if> </b:loop> </b:if></font> <span class='post-comment-link' style='Float:right;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46-k9RknOEuvuP85IlndnKjm5nL1kEG-iJcAwZIyeBuQtTem_uTzSwIP_t6Ki9MZJoFZbTfe3eYIpx3fN9XUX22t0Bmwco19X_3cJEsNPkKK2gG0N-WpZZ6bLqc9TIXrHM_oBsfAez0Wb/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Yorum Yok<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Yorum Yapıldı<b:else/><data:post.numComments/> Yorum Yapıldı</b:if> </b:if></a> </b:if> </b:if> </span>


    Kodlar içersinde renklendirdiğim bütün yazıları değiştirebilir ve kendi istediğinize göre ayarlayabilirsiniz.


    http://www.bloggerturkey.com/2013/03/yazaretiketyorumbalonuekleme.html


    Blogger Etiketler Gatget Açılır Menü Yapma



    Blogger kategoriler bölümünü yani etiketlerde diyebileceğimiz gatgeti değiştirmek istersek nasıl bir şey yapabiliriz.Bu yazımda bu etiketi sizlere açılır menü olarak anlatacağım.Normalde etiketler bölümü bazen çok etiket sayısından dolayı blogu kirletebiliyor veya kategori sayısı çok olan arkadaşlar bunu kısaltmak isteyebilir mesela bu yazımda olduğu gibi açılır menü haline getirmek isteyebilir.Kodların anlatımında yazılarımı dikkatlice okumanızı öneriyorum çünkü rahat ve basit yapmak için daha iyi olacaktır

    DEMO






  • Blogger Kumanda Paneli girin
  • İlk Başta Şablonumu Yedeklemeyi Unutmayalım.
  • Daha  sonra Şablon seçin
  •  HTML'yi düzenle >> Witget Şablonu Genişlet daha sonra CRTL+F yardımı ile Label1 kodunu bulun.
  • Normalde etiket kodu Label1 diye geçiyor ama sizin hangisi olduğunu öğrenmek için aşağıdaki resmi inceleyin.




  • Resimde gördüğünüz gibi etiketin ismi en son köşede yazıyor.

    Şimdi yapmamız gereken tekrar Labetl1 etiketinin başı ile sonunu bulmak bunun içinde aşağıdaki resime bakalım.




    Yukardaki resimde Label1 etiketinin komple yazısını aldım sizde burdaki etikette göründüğü gibi ilk baştan aşağıya doğru yani </b:witget> koduna kadar alın daha sonra orayı aşağıdaki kodlar ile değiştirin


    <b:widget id='Label1' locked='false' title='Etiketler' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <select onchange='location=this.options[this.selectedIndex].value;'
    style='width:100%'>
    <option>Kategoriler</option>
    <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'><data:label.name/>
    (<data:label.count/>)
    </option>
    </b:loop>
    </select>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>


    Önizleme Yapın İsterseniz Önce Onizleme Tuşu Şablonu Kaydet Yanında Bulunuyor Daha Sonra Şablonu Kaydet Diyerek Blogunuza Bakabilirsiniz



    Blogunuzun En Altına Çoklu Gatget Ekleme



    Bloggerda tema kullanan arkadaşlar özellikle tema sitelerinden indirdiği temaları bazen istediğiniz yerlerde gatget bulunmaması üzüyor diye düşünüyorum daha önceki yazımda sizlere Blogger Ek Gatget Ekleme şimdi bu yazımdada blogunuzun en alt satırlarına ekleyebileceğiniz 4 adet yeni gatget eklemeyi anlatacağım üstteki resimdede görmüş olduğunuz gibi yanyana 4 adet gatget bulunuyor.Benim diğer blog adresimdede bir demo örneğini gösteriyorum sizlere ,eklemesi basit olan bu eklentiyi sizde kendi blogunuza eklemek için aşağıdaki kodları blog temanızın html bölümüne uygulamanız yeterli olacaktır.

    DEMO


  • Blogger Kumanda Paneli girin
  • İlk Başta Şablonumu Yedeklemeyi Unutmayalım.
  • Daha  sonra Şablon seçin
  •  HTML'yi düzenle >> Witget Şablonu Genişlet daha sonra CRTL+F yardımı ile ]]></b:skin> kodunu bulun.
  • Şimdide aşağıdaki kodları bulduğunuz ]]></b:skin> kodunun üstüne yapıştırın.


  • /*----- Blogunuzun En Altına Çoklu Gatget Ekleme -----*/
    #lower { 
    margin:auto; 
    padding: 0px 0px 10px 0px; 
    width: 100%; 
    background:#333333; 

    #lower-wrapper { 
    background:#333333; 
    margin:auto; 
    padding: 20px 0px 20px 0px; 
    width: 960px; 
    border:0; 

    #lowerbar-wrapper { 
    background:#333333; 
    float: left; 
    margin: 0px 5px auto; 
    padding-bottom: 20px; 
    width: 23%; 
    text-align: justify; 
    color:#ddd; 
    font: bold 12px Arial, Tahoma, Verdana; 
    line-height: 1.6em; 
    word-wrap: break-word; 
    overflow: hidden; 

    .lowerbar {margin: 0; padding: 0;} 
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} 
    .lowerbar h2 { 
    margin: 0px 0px 10px 0px; 
    padding: 3px 0px 3px 0px; 
    text-align: left; 
    border:0; 
    color:#ddd; 
    text-transform:uppercase; 
    font: bold 14px Arial, Tahoma, Verdana; 

    .lowerbar ul { 
    color:#fff; 
    margin: 0 auto; 
    padding: 0; 
    list-style-type: none; 

    .lowerbar li { 
    display:block; 
    color:#fff; 
    line-height: 1.6em; 
    margin-left: 0 !important; 
    padding: 6px; 
    border-bottom: 1px solid #222; 
    border-top: 1px solid #444; 
    list-style-type: none; 

    .lowerbar li a { 
    text-decoration:none; color: #DBDBDB; 

    .lowerbar li a:hover { 
    text-decoration:underline; 

    .lowerbar li:hover { 
    display:block; 
    background: #222; 
    }

  • HTML'yi düzenle >> Witget Şablonu Genişlet daha sonra CRTL+F yardımı ile </body> kodunu bulun.
  • Şimdide aşağıdaki kodları bulduğunuz </body> kodunun üstüne yapıştırın.

  • <div id='lower'>
    <div id='lower-wrapper'>

    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
    </b:section>
    </div>

    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
    </b:section>
    </div>

    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
    </b:section>
    </div>

    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>

    <div style='clear: both;'/>
    </div> </div>

    1-Eklediğiniz gatgetin arka plan rengini değiştirmek için (background:#333333;) kodundaki html kodunu değiştirebilirsiniz.
    2-İlk kod içersindeki ( width: 960px; ) ile gatget genişliği ayarlayabilirsiniz.
    3-İlk kod içersinde yine ( width: 23%; ) gatget uzunluğu ayarlayabilirsiniz.

    4- Burda diyelim ki size 4 adet gatget yetmiyor isterseniz bunu 5-6-7 kadar çıkarabilirsiniz daha fazla yazmadım çünkü abartılır diye düşündüm tabi yinede siz ne kadar eklemek isterseniz denersiniz.Evet ikinci kod içersindeki renkli olan kod yani

    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>

    bu kod içersinde lowerbar4  bu koddaki 4 yerine 5 yapın lowerbar5 olsun,burda dikkat etmeniz gereken bu ekleyeceğiniz 5 gatget <div style='clear: both;'/> kodunun üstünde olsun.


    Blogger Tüm Sosyal Paylaşımlar ve E-Posta Aboneliği



    Merhaba arkadaşlar bugun sizler için yepyeni bir eklenti sunuyorum bu ekletinin bazı özelliklerinden bahsetmem gerekirse ilk olarak bu eklenti blogunuzun sağ alt köşesinde bulunması bazı sosyal paylaşım butonlarını çoğu arkadaşımız bloglarının sağ veya sol köşelerinde bulundurur ama bu eklenti sosyal paylaşım butonlarını ve e-mail aboneliği sayfanızın en altında bulunduruyor.İçeriğindeki yazıları kendinize göre tasarlayabileceğiniz güzel bir eklenti olduğunu düşünüyorum.Şimdi gelelim uygulamaya veya önce bir demosunu görmeye ne dersiniz.

    DEMO

  • Blogger Kumanda Paneli girin
  • İlk Başta Şablonumu Yedeklemeyi Unutmayalım.
  • Daha  sonra Yerleşim seçin Gatget Ekle >> HTML/JavaScript bulup daha sonra aşağıdaki kodları içersine yerleştiriyorsunuz.



  • <style type="text/css"> #mdfixedfootermain{ z-index:999999; width:300px; height:0px; position:fixed; bottom:0%; right:5px } #mdfixedfooterdiv{ border-top:3px solid #444; border-right:3px solid #444; border-left:3px solid #444; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; background color:#d7d7d7; overflow:none; width:300px; height:250px; position:fixed; bottom:0%; right:5px; background:#fff; background:-moz-linear-gradient(top, #fff 0%,#e5e5e5 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#e5e5e5)); background:-webkit-linear-gradient(top, #fff 0%,#e5e5e5 100%); background:-o-linear-gradient(top, #fff 0%,#e5e5e5 100%); background:-ms-linear-gradient(top, #fff 0%,#e5e5e5 100%); background:linear-gradient(to bottom, #fff 0%,#e5e5e5100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#e5e5e5',GradientType=0 )} #mdfixedfooterhide{ z-index:999999; position: absolute; bottom:250px; right:5px; width:285px; height:25px; cursor:pointer; background-color:#fff; padding-top:5px; border-top:3px solid #444; border-left:3px solid #444; border-right:3px solid #444; border-top-right-radius:5px; border-top-left-radius:5px; } #mdfixedfootershow{ position:absolute; bottom:0px; right:5px; width:285px; height:25px; cursor:pointer; background-color:#e5e5e5; padding-top:5px; border-top:3px solid #444; border-left:3px solid #444; border-right:3px solid #444; border-top-right-radius:5px; border-top-left-radius:5px } .mdfixedfooterdownarrow{ width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #333 } .mdfixedfooteruparrow{ width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #333 } .mdfixedfooterblockarrow{ width:8px; height:10px; background-color:#333 } #mdfixedfootersocial{ position:absolute; bottom:220px; right:10px; width:280px; height:30px; float:right } #mdfixedfootersocialicon{ position:absolute; bottom:135px; left:10px; width:auto; height:64px } #mdfixedfooteremailsubscribe{ position:absolute; bottom:0px; width:242px; height:90px; right:30px } .mdfixedfooteremailsubscribebox input.email{ padding:7px 10px 7px 10px; font-family:"Arial","Helvetica",sans-serif; width:218px; font-size:12px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px } .mdfixedfooteremailsubscribebox input.subscribe{ -moz-box-shadow:inset 0px 1px 0px 0px #fff; -webkit-box-shadow:inset 0px 1px 0px 0px #fff; box-shadow:inset 0px 1px 0px 0px #fff; background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f0f0f0),color-stop(1,#c9c9c9) ); background:-moz-linear-gradient( center top,#f0f0f0 5%,#c9c9c9 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0',endColorstr='#c9c9c9'); background-color:#f0f0f0; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; color:#777; font-family:arial; font-size:13px; font-weight:bold; padding:6px 18px; text-decoration:none; text-shadow:1px 1px 0px #fff } .mdfixedfooteremailsubscribebox input.subscribe:hover{ background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#c9c9c9),color-stop(1,#f0f0f0) ); background:-moz-linear-gradient( center top,#c9c9c9 5%,#f0f0f0 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9c9c9',endColorstr='#f0f0f0'); background-color:#c9c9c9 } </style> <!--[if IE]> <style> .mdfixedfooteremailsubscribebox input.subscribe{ width:243px } </style> <![endif]--> <!--[if gte IE 9]> <style type="text/css"> .gradient{ filter:none }</style> <![endif]--> <div id="mdfixedfootermain"> <center id="mdfixedfootershow"onmouseup="document.getElementById('mdfixedfooterdiv').style.display='block'"> <table style="margin-top:-2px;"> <tr> <td> <center style="color:#333;font-size:15px;font-weight:bold;"> Bir Bakarmısınız ? </center> </td> <td> <center> <div class="mdfixedfooteruparrow"> </div> <div class="mdfixedfooterblockarrow"> </div> </center> </td> </tr> </table> </center> <div id="mdfixedfooterdiv"> <center id="mdfixedfooterhide"onmouseup="document.getElementById('mdfixedfooterdiv').style.display='none'"> <table style="margin-top:-2px;"> <tr> <td> <center style="color:#333;font-size:15px;font-weight:bold;"> Bir Bakarmısınız Acaba? </center> </td> <td> <center> <div class="mdfixedfooterblockarrow"> </div> <div class="mdfixedfooterdownarrow"> </div> </center> </td> </tr> </table> </center> <div id="mdfixedfootersocial"> <center style="color:#333;font-size:12px;"> Blogger Turkey / Blogger Tasarımları İle Güncel Blog Sitesidir Bizi Takip Edeceğiniz Sosyal Paylaşım ve Email Abonelikleri Aşağıda Yer Almaktadır. </center> </div> <div id="mdfixedfootersocialicon"> <table> <tr> <td> <a href="https://www.facebook.com/bloggerturkey"> <img height="48px"width="48px"title="Beğen Facebook"alt="Facebook"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOtB5_PjiOZNauIaIl9uRs1TllZ9zRbj29-oKkIBbDSkxFGfxQWhAUDFXstCKUfB_4g-8mGPg6mX4PRtU5KGJcCD7L_1AdUf90yvFxi3dMlUAtqwT4MX_pFiXYb7BiWhxlnCod2eKAcRQQ/s1600/MD-Facebook1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8dlHuk2ofsTzrZQpUavPNrDudomj_dU3tpXwJaBcnuNfEwpKL6iPcr64uR1PO3vu09tY33vJi4oR84YIC1Zv_UWvNGB8MFuHxamQXoNKGXWpBKRyU7R2jLjM4LodXDVwvitmR8ubUlOq/s1600/MD-Facebook2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOtB5_PjiOZNauIaIl9uRs1TllZ9zRbj29-oKkIBbDSkxFGfxQWhAUDFXstCKUfB_4g-8mGPg6mX4PRtU5KGJcCD7L_1AdUf90yvFxi3dMlUAtqwT4MX_pFiXYb7BiWhxlnCod2eKAcRQQ/s1600/MD-Facebook1.png'"/> </a> <br /> <a href="https://www.twitter.com/bloggerturkey"> <img height="48px"width="48px"title="Takip Et Twitter"alt="Twitter"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqmIu7atBofyGfrp4eoSJ9YX87mvhJ3ULSDEQV4BPiSuWIP6V_XtFPQspK52WceNBjwvxmjAhqWJqu0lK5hK7sPZ04WnR5yclKyRVpIuaY40far2LlGJCFczgMO44-0cijFmvNT5Rewb2l/s1600/MD-Twitter1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj142_hG7mqMYFMNKv5dAqJLeZsPTXn_mCJ47T_MzLzKz8P-YUSQgB3yoAHxfpksOMSLw7vBH73AjcMR3d98Z-L8shJHjOngVLDCufopVA7wz9ep9IliipzkWVaaIoGeAf-LW9kAZInZCnS/s1600/MD-Twitter2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqmIu7atBofyGfrp4eoSJ9YX87mvhJ3ULSDEQV4BPiSuWIP6V_XtFPQspK52WceNBjwvxmjAhqWJqu0lK5hK7sPZ04WnR5yclKyRVpIuaY40far2LlGJCFczgMO44-0cijFmvNT5Rewb2l/s1600/MD-Twitter1.png'"/> </a> </td> <td width="75px"valign="top"> <a style="font-size:12px;color:#333;font-weight:bold;"href="https://www.facebook.com/bloggerturkey">Beğen FaceBook </a> <br /> <br /> <a style="font-size:12px;color:#333;font-weight:bold;"href="https://www.twitter.com/bloggerturkey">Takip Et Twitter </a> </td> <td> <a href="https://plus.google.com/u/0/100921311785768138667/"><img height="48px"width="48px"title="Add Us To Your Circle"alt="Google Plus"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6c1c1Il0_jTL3GWnjKXfy3JceFYy-wnu4ADfWkiXxOdtJx_GIANZvFnDc7XGIVzVE4gikDEidKT6GUoLjDO2_pmqmHpdCyIOBlnDaGd5bpgYTlCP31oNawTdOr5V4J2w7nSIX4nbBmbHL/s1600/MD-Google1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3QAoRMunNMKuyedkwuf3Dk2uuxF4g7EEAZ7fGvWokElHIuspniewJgOadhSmDuf844rQxjWWZG1fNoW6Supi4jJiUlq6lQZBfKyXhsDryaVgm99a0irc-fnq-alTyhcqHnkjyfVoSTE_n/s1600/MD-Google2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6c1c1Il0_jTL3GWnjKXfy3JceFYy-wnu4ADfWkiXxOdtJx_GIANZvFnDc7XGIVzVE4gikDEidKT6GUoLjDO2_pmqmHpdCyIOBlnDaGd5bpgYTlCP31oNawTdOr5V4J2w7nSIX4nbBmbHL/s1600/MD-Google1.png'"/> </a> <br /> <a href="http://feeds.feedburner.com/bloggerturkey"> <img height="48px"width="48px"title="RSS Beslemeleri"alt="RSS"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jET1ZUFEgwfZCG5PtJiL8BD1uy60nEcakCzJQA2b9g-rPc3tcv9B5dUiq_Ba2DU9tTXsWFZL7__X5QTnE85wL-YhknMKcwHdxC9BnBp9ft5t2BxcHRkNsSJsYlJ7NSRWBLfDGp5G-FcB/s1600/MD-Feedburner1.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZpflOlGqHBIKpYiCtTeLBWgRmQxhOlOSuvev5gbvXZDXYUwYn5Ll0BrLQNsBa3D3Wk-vfFyicGTUXLpvuLO4l5DNtziz1eCBMDKqC3AGXrlSF89quBgItpzHstgDRXzkAkkEu6UF03Rc/s1600/MD-Feedburner2.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jET1ZUFEgwfZCG5PtJiL8BD1uy60nEcakCzJQA2b9g-rPc3tcv9B5dUiq_Ba2DU9tTXsWFZL7__X5QTnE85wL-YhknMKcwHdxC9BnBp9ft5t2BxcHRkNsSJsYlJ7NSRWBLfDGp5G-FcB/s1600/MD-Feedburner1.png'"/> </a> </td> <td valign="top"> <a style="font-size:12px;color:#333;font-weight:bold;"href="https://plus.google.com/u/0/100921311785768138667/"> Takip Et<br />+ Google </a> <br /> <br /> <a style="font-size:12px;color:#333;font-weight:bold;"href="http://feeds.feedburner.com/bloggerturkey"> RSS<br />Beslemeleri </a> </td> </tr> </table> </div> <div id="mdfixedfooteremailsubscribe"> <div class="mdfixedfooteremailsubscribebox"> <form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerturkey','popupwindow','scrollbars=yes,width=550,height=520');return true"><input class="email"type="text"id="email"name="email"value="E-Posta Adresiniz.."onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/> <input type="hidden"value="bloggerturkey"name="uri"/> <input type="hidden"name="loc"value="en_US"/> <br /> <input class="subscribe"name="commit"type="submit"value="Aboneliğimi Mail Adresime Gönder"/> </form> </div> <center style="color:#333;font-size:8px;"> Blogger Turkey. </center> </div> </div> </div>


    https://www.facebook.com/bloggerturkey
    http://feedburner.google.com/fb/a/mailverify?uri=bloggerturkey
    http://feeds.feedburner.com/bloggerturkey
    https://www.twitter.com/bloggerturkey

    Yukardaki değiştirmeniz gereken yerlerden bir kaçı siz kısa yoldan değiştirmek isterseniz kodları bir yere kopyalayın daha sonra CRTL+F tuşu ile bloggerturkey araması yapın ve onu kendi adresleriniz ile değiştirebilirsiniz


    Blogger Yayın Altına Etiket ve Açıklama Ekleme



    Blogger yazı başlığının etiketlerini bazen blogumuzun sağ tarafına veya yazı başlığının altına koyarız ama bu yazımda sizlere ne sağ tarafa neden üstte koymacağız sizlere bunu her yazınızın altına yerleştireceğiz,peki nasıl görüncek nasıl olacak diye soruyorsanız işte aşağıdaki demodan bir örneği veya yazı içindeki resimdede görebilirsiniz.Eklenti yazınızın gününü başlık adını ve etiketlerini her yazının altına yerleştiriyor.Şimdi gelelim nasıl ekleyeceğimize eklemek oldukça basit aslında aşağıdaki talimatlarla devam edelim.




    DEMO



  • Blogger Kumanda Paneli girin
  • İlk Başta Şablonumu Yedeklemeyi Unutmayalım.
  • Daha  sonra Şablon seçin HTML Düzenle >> Witget Şablonu Genişlet >> CTRL+F ile bu <data:post.body/>kodu bulup daha sonra aşağıdaki kodları kodun aşağısına yerleştirip Şablonu Kaydet diyoruz



  • <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <center><span class='fullpost'><div style='MARGIN-TOP: 2px;margin-bottom:5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px;'><b>&#39;&#39;<data:post.title/>&#39;&#39;</b> Bu yazı; <b><b:if cond='data:post.dateHeader'><data:post.dateHeader/></b:if></b> tarihinde <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' expr:title='&quot;Bu kategorideki tüm yazıları göster:  &quot; + data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop> kategorisine eklenmiş olup <b><data:post.author/></b> tarafından yayınlanmıştır. Ayrıca <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='&quot;Comment on &quot; + data:post.title'><b:if cond='data:post.numComments == 0'>henüz yorum yapılmamış <b:else/><b:if cond='data:post.numComments == 1'>1 yorumlu <b:else/><data:post.numComments/> yorumlu </b:if></b:if></a>bir yazıdır.</b:if>
    </div></span></center></b:if>


    Blogger Önceki ve Sonraki Kayıtları Simgeleme



    Bloggerda her sayfanın altında sonraki kayıt veya önceki kayıt ana sayfa gibi yazılar olur yeni acemi bloglarda veya kullanmayı tercih eden bloglarda bu paylaşımımda sizlere bu yazı ile yazılmış sonraki önceki kayıt ve ana sayfası olan arkadaşlar için geçerlidir ki bunlardan biride bendim ve bende değiştirdim.Sizlere demosunu bu yazımın en altında uyguladığım simgeler ile gösteriyorum arkadaşlar görmüş olduğunuz gibi eklenti genel olarak kırmızı ve beyaz dan oluşuyor sağ yöne ve sol yönü gösteren iki adet simgeler mevcut bunlar sağ tarafı bir sonraki kayıt sol tarafı ise önceki kayıt ortada bulunan ev ise bilmiş olacağınız gibi ana sayfa tuşudur.Şimdi bunu blogunuza nasıl uygulayacağınız sizlere aşağıda kodlar içersinde gösteriyorum.

    Kolay gelsin.





  • İlk Olarak Blogger Paneli
  • Şablon Tıklıyoruz ve Sonrasında HTML Düzenle Seçiyoruz.
  • CTRL+F Yardımı ile aşağıdaki kodların yerlerini buluyoruz
  • Not: Şablonumuzu Her İhtimale Karşı Yedeklemeyi Unutmayalım Her Kod Denememizde Yapmamız Gerekir.





  • Bu ilk bulacağımız kod CTRL+F yardımı ile buluyoruz <data:olderPageTitle/> ve sonrasında sadece bu kodu siliyoruz aşağıdaki kod ile değiştiriyoruz



  • <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRTWY58A0iWPSZv_4G7RYVe9St19t4Xug3d3mog9CxwsOR8V_eK0wkM9u-AUY0iBvQn990d294LcEhEFTUbZV-vd3pqxIEXL9-tv1NBMBlmSPrqrNX2qqEzh4c4K207iJdQabKr6bQFZk3/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>


    Bu ilk bulacağımız kod CTRL+F yardımı ile buluyoruz <data:newerPageTitle/> ve sonrasında sadece bu kodu siliyoruz aşağıdaki kod ile değiştiriyoruz.


    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLIN_uEierTDl6A1besoSjspLxFuCeeiQ13hFm9l1O5lWv2vatoJXzTzuO_PY5w2qbUEOZJh4j_Oe73OHEU444SFlDlN39dBKmGk4lbQmDvNUWzONTYpeNe-BI0iqWJ4eduIkucJF7yOrJ/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>


    Bu ilk bulacağımız kod CTRL+F yardımı ile buluyoruz <data:homeMsg/>  ve sonrasında sadece bu kodu siliyoruz aşağıdaki kod ile değiştiriyoruz.


    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoX9L9kWS3IU1qpDyXDvfIyLAhqE8Dgs1j8TnTN7DrzJ9EQ8TfZxT2aAedhzrlYw0soruvWadzOmR1TsZ9nc5GuoMlhWQncAjTPEQdhmWktFo0orYrpFaKTPypEOS6l58O1C7gkkOs9V4/s1600/111111111111.JPG' style='border: 0 none;vertical-align: middle;'/>


    Blogger Önceki Sonraki Yazılarına Konu Ekleme



    Blogger Önceki Yazılar ve Sonraki Yazılar diye her yazımızın altında bulunuyor bazen bunları sadece resimli yapıyoruz yukarıdaki resim gibi şimdi bu kodu eklediğinizde size Önceki Yazınız ne ise sol tarafta onu Sonraki Yazılarınızda ne var onu gösteriyor.Tercih edilebilecek bir eklenti olduğunu düşünüyorum ben.Daha önce sizlere paylamış olduğum bir eklentidede önceki sonraki yazıları nasıl resimi yapabiliriz onun hakkındaydı isterseniz o konuyada bakabilir ve uygulayabilirsiniz internet sitenize.


    Blogger Paneline giriyoruz oradan Yerleşim sonraGatget ekle sonra HTML/JavaScript aşağıdaki resimde olanı buluyoruz.



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
    var olderLinkTitle = $("a.blog-pager-older-link:first").text();
    $("a.blog-pager-older-link").text(olderLinkTitle);
    });
    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
    var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
    $("a.blog-pager-newer-link").text(newerLinkTitle);
    });
    </script>


    Hepsini ekledikten sonra Eklediğimiz kodu Blog Kayıtlarının altına taşıyoruz.Şablonu Kaydet diyoruz.




    Blogger Yorum Bölümüne Resim Ekleme ve Özelleştirme


    Blogger yazar yorumlarını değiştirme özelliğinde sizlere daha önce paylaşmış olduğum Blogger Yazar Yorumlarını Değiştirme vardı şimdi bu yazımın içersinde sizlere anlatacağım yorumlar arasına resim nasıl yapılır ve yanıtla ve sil özelliğinde bir kaç adım.Daha öncede söylediğim gibi yazarların gelen ziyaretçilerine yorumları ile cevap vermeleri önemlidir ve yorum bölümünü böyle farklı tarzda yapmakta gelen ziyaretçilerin dikkatini çekebilir ve yorum bırakmalarınada neden olabilir.Şimdi gelelim anlatıma.

    1-Blogger Panel Bölümünden Şablon Diyoruz




    2-Daha Sonra Karşımıza Çıkan Bölümde HTML'yi Düzenle Diyoruz



    3-Son Olarak Witget Şablonlarını Genişlet Kutusunu İşaretliyoruz.






    Yorumların aralarına resim ekleme özelliğini nasıl yapacağım ondan başlayalım.

    CTRL+F tuşuna basın ve ]]></b:skin> kodunu bulun aşağıdaki kodları üstüne yerleştirin.



    .comment-block {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYkPfQFrqA1SfF8EMP2c2i_DVwDpDdLoL6wC1vNrvPylcPnMd0Zm4CjBriTsUJbFLjlUS53TsViN11SZOAzt1C9wkT3XhXGtXWNrbIA9LVTPuAL7Tzby7Q3xA5I-dA4UeF27xfcOzZ15mc/s1600/74.gif);
    background-repeat:no-repeat;
    background-position:center bottom;
    padding-bottom:30px;
    margin-top: -10px;


    .comments .continue {
    border-top: 0px solid $(widget.alternate.text.color);
    }


    Değiştirebileceğiniz bölümler mavi renk ile taradığım bölüm istediğiniz resim varsa ekleyebilirsiniz.Resim boyutu 500x20 siz kendi boyutunuza göre ayarlayabilirsiniz resmi.




    Şimdi gelelim ikinci tasarıma burda yanıtla ve sil seçeneklerini özelleştirme

    CTRL+F tuşuna basın ve ]]></b:skin> kodunu bulun aşağıdaki kodları üstüne yerleştirin.



    .comment-block {
    background:#F9F9F9; /* Arka Plan Rengi*/
    border: 1px solid #f1f1f1; /* Border style */
    margin-bottom:20px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    }

    .comments .comment-thread.inline-thread {
    background-color: #FAFAFA; /* Arka Plan Rengi ve Cevaplar */
    border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
    }

    .comment-content {
    padding:2px 10px 10px 10px;
    color:#444444; /* Yorum Rengi */
    }

    .datetime a {
    font-style:italic;
    font-size:9px;
    margin-left: 2px;
    }

    .comments .comments-content .user a{
    color:#1982D1; /* Yazar Adı Rengi*/
    font-size: 12px; /* Yazar Adı Boyutu*/
    padding-left: 10px;
    font-weight:bold;
    text-decoration:none;
    }

    .comments .comment .comment-actions a,.comments .comment .continue a{
    display:inline-block; 
    margin:0 0 10px 10px;
    padding:0 15px;
    color:#B4B4B7;
    text-align:center;
    text-decoration:none;
    background:#F8F8FB;
    border:1px solid #C2C2C5;
    border-radius:4px;
    height:20px;
    line-height:20px;
    font-weight:normal;
    cursor:pointer;
    }

    .comments .continue {
    border-top: 0px solid $(widget.alternate.text.color);
    }

    .comments .comments-content .icon.blog-author {
    background-image: none;
    margin-left: -10px;
    }

    .comments .avatar-image-container{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 40px;
    max-height: 40px;
    border: 1px solid #F2F2F2;
    padding: 1px;
    }

    .comments .avatar-image-container img{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    max-width: 40px;
    height: 40px;
    }


    Bu kadar özelleştirme yapabileceğiniz yerleri mavi renk ile renklendirdim istediğiniz ton rengi ve boyutta yapabilirsiniz.


    http://www.bloggerturkey.com/2013/04/blogger-yorum-bolume-resim-ekleme-ve.html