Blogger CSS Demo ve İndir Butonu
Blogseverlere yeni bir css destekli kod daha !
{Blogger CSS Demo ve İndir Butonu}
Çoğunlukla webmaster bloglarında işe yarayacağını düşündüğüm bu kodu sizlerle paylaşmak istedim. İstediğiniz gibi renklendirebilir, şekillendirebilir ve kodları değiştirebilirsiniz. Hadi blogumuza ekleme yöntemini görelim;{Blogger CSS Demo ve İndir Butonu}
- Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;
.download {
color:#fff;}
.download a{
background: #33CCFF url(https://cdn2.iconfinder.com/data/icons/officeicons/PNG/32/Download.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#fff;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.download a:hover{
background: #99FFFF url(https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/20-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
.demo {
float:center;
color:#fff;}
.demo a{
background: #D1FD98 url(https://cdn2.iconfinder.com/data/icons/basicset/search_32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#23AFFF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.demo a:hover{
background: #E6FFC5 url(https://cdn2.iconfinder.com/data/icons/free-funktional-icons/32/10_Search_32x32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
color:#fff;}
.download a{
background: #33CCFF url(https://cdn2.iconfinder.com/data/icons/officeicons/PNG/32/Download.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#fff;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.download a:hover{
background: #99FFFF url(https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/20-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
.demo {
float:center;
color:#fff;}
.demo a{
background: #D1FD98 url(https://cdn2.iconfinder.com/data/icons/basicset/search_32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#23AFFF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.demo a:hover{
background: #E6FFC5 url(https://cdn2.iconfinder.com/data/icons/free-funktional-icons/32/10_Search_32x32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
- Yazılarınızda göstermeniz için gereken kodlar(Yeni yazı gönderme sayfasında HTML sekmesi aktifken kodları ekleyiniz.)
DEMO BUTON KODU
<div class="demo" target="_blank">
<a href="#">DEMO</a></div>
<a href="#">DEMO</a></div>
İNDİR BUTON KODU
<div class="download" target="_blank" >
<a href="#">INDIR</a></div>
<a href="#">INDIR</a></div>
Yazıyla alakalı etiketler;
blogger, blogspot, blog, eklenti, widget, gadget, eklenti, eklentiler, eklentileri, eklentisi
blogger eklenti, blogspot eklenti, blogger eklentisi,
blogger eklentileri, blogger eklentiler, blogger widget, blogger widgets, blogger gadget,
blogger 2015, blogger 2016, blogger eklenti indir, blogger kodu, blogger kodları,
Blogger Farklı Sayfa Geçiş Efekti
Uygulamaya geçmeden önce mutlaka yedek alınız!
Blogunuzda sayfalar arası geçiş yaparken farklı bir geçiş efekti ile karşılaşmak hoş olur.
Blogunuza uygulamak için adımları izleyin;
1. Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " <body> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;
<style>
#mbsload {position:fixed;opacity:0.93;top:0;left:0;background-color:rgba(5, 41, 74, 0.79);z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:rgba(5, 41, 74, 0.79);display:none;}
.mbsloadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.mbsloadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}}
</style>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#mbsload').fadeIn(1000).delay(3000).fadeOut(1000);
});
// Remove the overlay when clicked to overcome interference, especially if the internal link is set up with a target='_blank'
$('#mbsload').click(function() {
$(this).hide();
});
});
</script>
<div id='mbsload'>
<div class='mbsloadball'/>
<div class='mbsloadball-2'/>
</div>
#mbsload {position:fixed;opacity:0.93;top:0;left:0;background-color:rgba(5, 41, 74, 0.79);z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:rgba(5, 41, 74, 0.79);display:none;}
.mbsloadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.mbsloadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}}
</style>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#mbsload').fadeIn(1000).delay(3000).fadeOut(1000);
});
// Remove the overlay when clicked to overcome interference, especially if the internal link is set up with a target='_blank'
$('#mbsload').click(function() {
$(this).hide();
});
});
</script>
<div id='mbsload'>
<div class='mbsloadball'/>
<div class='mbsloadball-2'/>
</div>
Yazıyla alakalı etiketler;
blogger, blogspot, blog, eklenti, widget, gadget, eklenti, eklentiler, eklentileri, eklentisi
blogger eklenti, blogspot eklenti, blogger eklentisi,
blogger eklentileri, blogger eklentiler, blogger widget, blogger widgets, blogger gadget,
blogger 2015, blogger 2016, blogger eklenti indir, blogger kodu, blogger kodları,
Blogger Kod Kutusuna Kaydırma Çubuğu Ekleme-Gizleme / Kod Kutusuna Scrollbar Ekleme-Gizleme
DEMO
Scrollbar'ı otomatik getirmek isterseniz;
overflow: auto;
Scrollbar'ı normal göstermek isterseniz;overflow: scroll;
Scrollbar'ı gizlemek isterseniz;overflow: hidden;
Scrollbar'ı sadece sağ kaydırma çubuğuyla göstermek isterseniz;overflow: visible;
Scrollbar'ı genişlik gözetmeksizin göstermek isterseniz; overflow: inital; MetaCSSspb Sosyal Paylaşım Butonları [CSS Destekli]
Uygulamaya geçmeden önce mutlaka yedek alınız!
Blogunuzda CSS destekli sosyal medya paylaşım butonları ekleyip hit arttırmak ister misiniz ?
Aşağıda ki adımları uygulayarak butonları sitenize yerleştirin;
1. Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;
/*
MetaCSSspb Code Start
-------------------------------*/
.facebook {
color:#fff;
}
.facebook a{
background: #3A64BF url(https://cdn4.iconfinder.com/data/icons/flat-social-media-icons-1/32/facebook-2.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 70px;
height: 20px;
font-family:verdana;
color:#fff;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.facebook a:hover{
background: #8BAFFF url(https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/facebook-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 70px;
height: 20px;
font-family:verdana;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
.twitter {
color:#fff;
}
.twitter a{
background: #6BB1FD url(https://cdn4.iconfinder.com/data/icons/flat-social-media-icons-1/32/twitter-2.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 70px;
height: 20px;
font-family:verdana;
color:#fff;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.twitter a:hover{
background: #D3E8FF url(https://cdn0.iconfinder.com/data/icons/shift-logotypes/32/Twitter-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 70px;
height: 20px;
font-family:verdana;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
.google {
color:#fff;}
.google a{
background: #F97676 url(https://cdn3.iconfinder.com/data/icons/follow-me/256/google-plus-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 70px;
height: 20px;
font-family:verdana;
color:#fff;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.google a:hover{
background: #FFBBBB url(https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/google-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 70px;
height: 20px;
font-family:verdana;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
/*
MetaCSSspb Code Finish
-------------------------------*/
MetaCSSspb Code Start
-------------------------------*/
.facebook {
color:#fff;
}
.facebook a{
background: #3A64BF url(https://cdn4.iconfinder.com/data/icons/flat-social-media-icons-1/32/facebook-2.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 70px;
height: 20px;
font-family:verdana;
color:#fff;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.facebook a:hover{
background: #8BAFFF url(https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/facebook-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 70px;
height: 20px;
font-family:verdana;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
.twitter {
color:#fff;
}
.twitter a{
background: #6BB1FD url(https://cdn4.iconfinder.com/data/icons/flat-social-media-icons-1/32/twitter-2.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 70px;
height: 20px;
font-family:verdana;
color:#fff;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.twitter a:hover{
background: #D3E8FF url(https://cdn0.iconfinder.com/data/icons/shift-logotypes/32/Twitter-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 70px;
height: 20px;
font-family:verdana;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
.google {
color:#fff;}
.google a{
background: #F97676 url(https://cdn3.iconfinder.com/data/icons/follow-me/256/google-plus-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 70px;
height: 20px;
font-family:verdana;
color:#fff;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
.google a:hover{
background: #FFBBBB url(https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/google-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 70px;
height: 20px;
font-family:verdana;
color:#3A64BF;
font-size: 12px;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;
border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}
/*
MetaCSSspb Code Finish
-------------------------------*/
2. Şimdi de bu kodu aratalım.
<div class='post-footer'>
3. Bulduğumuz bu kodun altına aşağıda ki kodları ekleyelim.
<b>Paylas:</b>
<div class="facebook">
<a href='#'>Facebook</a></div>
<div class="twitter">
<a href='#'>Twitter</a></div>
<div class="google">
<a href='#'>Google+</a></div>
<div class="facebook">
<a href='#'>Facebook</a></div>
<div class="twitter">
<a href='#'>Twitter</a></div>
<div class="google">
<a href='#'>Google+</a></div>
Kırmızı # ile belirtilen yerlere sosyal medya sitelerinin paylaşım linklerini yerleştirmeniz gerekiyor.
Yazıyla alakalı etiketler;
blogger, blogspot, blog, eklenti, widget, gadget, eklenti, eklentiler, eklentileri, eklentisi
blogger eklenti, blogspot eklenti, blogger eklentisi,
blogger eklentileri, blogger eklentiler, blogger widget, blogger widgets, blogger gadget,
blogger 2015, blogger 2016, blogger eklenti indir, blogger kodu, blogger kodları,
Blogger ' Etiketine Sahip Kayıtlar Gösteriliyor ' Kaldırma
Uygulamaya geçmeden önce mutlaka yedek alınız!
Blogger'da her arama yaptığınızda ...etiketine sahip kayıtlar gösteriliyor iletisini görürsünüz. Pek'te hoş görünmeyen bu durum bilgisini kaldırmak için aşağıda ki adımları uygulayın;
1. Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın ve CTRL ve F kombinasyonu'nu kullanarak sayfada, aşağıdaki kodu aratın;
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
2. Bulduğunuz bu kodun üzerine/üstüne aşağıda verilen kodu ekleyin.;
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Blogger Yazıyı Tam Ekran Yapma | Blogger Yazı Alanı Genişletme
Blogger'da yeni içerik yazarken yazılarınızın tam ekran görünmesini istemez misiniz?
Bence çok işinize yarayacak bu kod ile sizin belirlediğiniz yazıları tam sayfa görüntüleme imkanınız var. Peki bu kod ile yazılarınızı tam ekran/tam sayfa yapacaksınız?
Aşağıda verilen kodu sadece tam ekran görüntülenmesini istediğiniz yazılarda (sağdaki resimde gösterilen) HTML sekmesine tıklayarak herhangi bir yere ekleyin. Buraya dikkat bu kodu yazarken mutlaka yeni kayıt sayfasında HTML sekmesini aktifleştirin yoksa kod çalışmaz.
<style type="text/css">
#sidebar-wrapper {
display:none;
}
#main-wrapper {
width: 950px;
}
</style>
#sidebar-wrapper {
display:none;
}
#main-wrapper {
width: 950px;
}
</style>
Kırmızı ile belirttiğim width: 950px; yazı alanının genişliğini belirler. Kendinize göre mutlaka düzenleyin, aksi takdirde temanız kayma/bozulmalar meydana gelebilir.
Eğer kodları ekledikten sonra olmadıysa #sidebar-wrapper #main-wrapper kısmındaki # yerine sizde . (nokta) olabilir. Css kodlarınızın arasından kendinize göre düzenleyin...
Eğer kodları ekledikten sonra olmadıysa #sidebar-wrapper #main-wrapper kısmındaki # yerine sizde . (nokta) olabilir. Css kodlarınızın arasından kendinize göre düzenleyin...
Blogger'a Gadget Alanı Ekleme | Blogger Gadget Alanı Belirleme
Eklenti(widget) ekleyebilmemiz için gerekli olan gadgetlar blogumuzda her zaman istediğimiz yerde/hiza'da bulunmayabilir. Bunun için yapmamız gerekenler aşağıda verilmiştir.Uygulamaya geçmeden önce mutlaka yedek alınız!
♠ Blogger'a Gadget Alanı Ekleme
1. Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın.
2. Yukarıda bulduğunuz kodun üzerine/üstüne aşağıdaki kodu ekleyin.
#gadget {float:left;width:900px;height:200px;background: #fff;}
Ayarlamanız gereken kısımları kırmızı ile belirttim. Biraz daha detaya inersek;
width: Gadget alanının Genişliğini belirler.
height: Gadget alanının Yüksekliğini belirler.
width: Gadget alanının Genişliğini belirler.
height: Gadget alanının Yüksekliğini belirler.
3. Son adım olarak Gadget'ı nereye eklemek istiyorsanız orayı seçmeye. Aşağıda verilen kodları blogunuzda istediğiniz/seçtiğiniz yere yapıştırın.
<b:section class='gadget' id='gadget'></b:section>
Uygulamada sorun/lar yaşıyorsanız yorumda bildirin, en kısa zamanda yardımcı olmaya çalışırım.
Yazıyla alakalı etiketler;
blogger, blogspot, blog, eklenti, widget, gadget, eklenti, eklentiler, eklentileri, eklentisi
blogger eklenti, blogspot eklenti, blogger eklentisi,
blogger eklentileri, blogger eklentiler, blogger widget, blogger widgets, blogger gadget,
blogger 2015, blogger 2016, blogger eklenti indir, blogger kodu, blogger kodları,
CSS Menü Gizleme Kodu
CSS Menü gizleme kodunu aşağıda verilen üzere sitenizde ilgili kısma yapıştırınız!
<style type="text/css">
<!--
td.nav {visibility:hidden;}
--> </style>
<!--
td.nav {visibility:hidden;}
--> </style>
Css Kodları ve Ayrıntıları
CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.
LİNK ÖZELLİKLERİ
a : Link'in, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.
a : Link'in, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.
————————————————————————
BİÇİMLENDİRME
color: Linkin rengini belirler.
background-color: Linkin zemin rengini belirler.
background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight: Yazının kalınlık veya inceliğini belirler.
border: Linkin etrafına kenarlık ekler.
display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.
color: Linkin rengini belirler.
background-color: Linkin zemin rengini belirler.
background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight: Yazının kalınlık veya inceliğini belirler.
border: Linkin etrafına kenarlık ekler.
display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.
————————————————————————
LİSTE ÖZELLİKLERİ
disk: Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.
disk: Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.
————————————————————————
KATMAN ÖZELLİKLERİ
position: Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static: Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width: Katmanın genişliğinin ne kadar olacağını belirler.
height: Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto: Otomatik olarak belirlenir.
scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden: Sığmayan yerleri gizler.
visibility: Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.
position: Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static: Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width: Katmanın genişliğinin ne kadar olacağını belirler.
height: Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto: Otomatik olarak belirlenir.
scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden: Sığmayan yerleri gizler.
visibility: Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.
————————————————————————
FONT ÖZELLİKLERİ
font-family: Yazı türünü belirler.(Arial , Verdana gibi.)
font-style: Yazının normal veya sağa eğik olmasını sağlar.
font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight: Yazının kalınlık-inceliğini belirler.
font-size: Yazının büyüklüğünü belirler.
font-family: Yazı türünü belirler.(Arial , Verdana gibi.)
font-style: Yazının normal veya sağa eğik olmasını sağlar.
font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight: Yazının kalınlık-inceliğini belirler.
font-size: Yazının büyüklüğünü belirler.
————————————————————————
TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.
————————————————————————
İMLEÇ ÖZELLİKLERİ
crosshair: İmlecin artı işareti şeklinde olmasını sağlar.
auto: İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default: İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand: İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move: İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize: İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize: İmlecin sola yatık normal ok olmasını sağlar.
se-resize: İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize: İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize: İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize: İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize: İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize: İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text: İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait: İmlecin meşgul animasyonuna dönüşmesini sağlar.
help: İmlecin yardım-soru işaretine dönüşmesini sağlar.
crosshair: İmlecin artı işareti şeklinde olmasını sağlar.
auto: İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default: İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand: İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move: İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize: İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize: İmlecin sola yatık normal ok olmasını sağlar.
se-resize: İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize: İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize: İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize: İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize: İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize: İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text: İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait: İmlecin meşgul animasyonuna dönüşmesini sağlar.
help: İmlecin yardım-soru işaretine dönüşmesini sağlar.
————————————————————————
ZEMİN ÖZELLİKLERİ
background-color: Zeminin rengini belirler.
color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.
background-color: Zeminin rengini belirler.
color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.
————————————————————————
TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.
_________________________________________________________________
padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
_________________________________________________________________
border : Tablonun kenarlarının şekillendirilmesini sağlar.
_________________________________________________________________
border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.
_________________________________________________________________
border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.
_________________________________________________________________
border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.
_________________________________________________________________
border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.
_________________________________________________________________
color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.
<Alıntıdır>
Sitenize Sağ tık engelleme HTML kodu ekleyin !
Aşağıdaki HTML kodunu sitenizde ilgili kısma ekleyin!
<script language="Javascript1.2">
<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.javascript-page.com
var mymessage = "Bu sitede sağ tıklama yasaklıdır.";
function rtclickcheck(keyp){
if (navigator.appName == "Netscape" && keyp.which == 3) {
alert(mymessage);
return false;
}
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) {
alert(mymessage);
return false;
}
}
document.onmousedown = rtclickcheck
//-->
</script>
<!--
// please keep these lines on when you copy the source
// made by: Nicolas - http://www.javascript-page.com
var mymessage = "Bu sitede sağ tıklama yasaklıdır.";
function rtclickcheck(keyp){
if (navigator.appName == "Netscape" && keyp.which == 3) {
alert(mymessage);
return false;
}
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) {
alert(mymessage);
return false;
}
}
document.onmousedown = rtclickcheck
//-->
</script>
Google Arama Kutusu HTML kodu
Sitenize özel, orjinal Google Arama Kutusu HTML kodu ekleyin.
Bu kodun kullanılması, Google Özel Arama'nın Hizmet Şartları'nın kabul edildiğini gösterir.
Hizmet şartlarını şu adreste bulabilirsiniz: http://www.google.com//cse/docs/tos.html
<form name="cse" id="searchbox_demo" action="https://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Ara" />
</form>
<script type="text/javascript" src="https%3A%2F%2Fcse.google.com.tr%2Fcse/tools/onthefly?form=searchbox_demo&lang="></script>
Veya kendi özel google arama kutucuğunuzu oluşturun!<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Ara" />
</form>
<script type="text/javascript" src="https%3A%2F%2Fcse.google.com.tr%2Fcse/tools/onthefly?form=searchbox_demo&lang="></script>
https://cse.google.com.tr/cse/tools/create_onthefly
Blogger status message kaldırma / Blogger bilgi mesajı kaldırma / Etiketine sahip kayıtlar gösteriliyor yazısını kaldırmak /
Arama sonuçlarında çıkan etiketine sahip kayıtlar gösteriliyor yazısını kaldırmak ister miydiniz ?
Hadi beraber nasıl yapılacağını görelim;
İşlemi uygulamadan önce mutlaka yedek alın!
Şimdi aşağıda vereceğim kodların tamamını bulun;
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Üstte bulduğunuz bütün kodları silin ve aşağıdaki kodları ekleyin.<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Bence görüntü kirliliği yaratan bu yazıdan kurtulmuş olduk. İyi çalışmalar...
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Blogger'a CSS Dikey Menü Ekle
Blogunuzda dikey menu kurmanızı sağlar.
Blogger kontrol panelinizdeyken sırasıyla " Şablon >> HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;
<style type="text/css">
.mbw_menu{
width: 190px; /*width of menu*/
}
.mbw_menu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(http://img407.imageshack.us/img407/6162/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}
.mbw_menu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.mbw_menu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.mbw_menu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}
.mbw_menu ul li a:visited{
color: black;
}
.mbw_menu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
</style>
.mbw_menu{
width: 190px; /*width of menu*/
}
.mbw_menu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(http://img407.imageshack.us/img407/6162/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}
.mbw_menu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.mbw_menu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.mbw_menu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}
.mbw_menu ul li a:visited{
color: black;
}
.mbw_menu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
</style>
Şimdide kontrol panelinizdeyken sırasıyla " Yerleşim >> Gadget ekle " tıklıyoruz. Açılan mini pencereden " HTML/JavaScript ekle " ye tıklıyoruz. Açılan pencereye aşağıdaki kodları ekliyoruz.
<div class="mbw_menu">
<h3 class="headerbar">Kategoriler</h3>
<ul>
<li><a href="buraya link">Anasayfa</a></li>
<li><a href="buraya link">BabaSayfa</a></li>
<li><a href="buraya link">Resimler</a></li>
<li><a href="buraya link">Videolar</a></li>
<li><a href="buraya link">Makaleler</a></li>
<li><a href="buraya link">E-Book</a></li>
<li><a href="buraya link">Gazeteler</a></li>
<li><a href="buraya link">Diğer</a></li>
</ul>
</div>
<h3 class="headerbar">Kategoriler</h3>
<ul>
<li><a href="buraya link">Anasayfa</a></li>
<li><a href="buraya link">BabaSayfa</a></li>
<li><a href="buraya link">Resimler</a></li>
<li><a href="buraya link">Videolar</a></li>
<li><a href="buraya link">Makaleler</a></li>
<li><a href="buraya link">E-Book</a></li>
<li><a href="buraya link">Gazeteler</a></li>
<li><a href="buraya link">Diğer</a></li>
</ul>
</div>
Yazıyla alakalı etiketler;
blogger, blogspot, blog, eklenti, widget, gadget, eklenti, eklentiler, eklentileri, eklentisi
blogger eklenti, blogspot eklenti, blogger eklentisi,
blogger eklentileri, blogger eklentiler, blogger widget, blogger widgets, blogger gadget,
blogger 2015, blogger 2016, blogger eklenti indir, blogger kodu, blogger kodları,
Kaydol:
Yorumlar (Atom)