Blogger Yazı Boyutunu ve Rengini Ayarlama Eklentisi

Blogger blogu sahiplerinin ziyaretçilerine yazı boyutunu ve rengini değiştirmelerine imkan verebilen bir eklenti bu.Kurulumu ve kullanımı ise son derece kolay.Daha önce haber sitelerinde de görmüş olabileceğiniz eklentilerin blogger versiyonu diyebiliriz bu eklenti için.Sağ tarafta eklenti resmini görebilirsiniz.Şimdi kuruluma geçelim...

</head>

Blogger hesabınıza giriş yaparak HTML'yi düzenle diyoruz.CTRL+F seçeneğini kullanarak yukarıdaki kodu buluyoruz ve
bu koddan önce aşağıdaki kodu ekliyoruz ve şablonumuzu kaydediyoruz.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Daha sonra sayfa sayfa öğeleri bölümüne giriyoruz.Eklentinin görünmesini istediğimiz yere gadget ekle diyerek aşağıdaki kodu htlm/javascript ekle bölümüne yapıştırıyoruz ve işlem tamamdır.

<!-- Code Begins -->
<!-- http://TheUnnecessaryWorld.co.cc -->
<style type="text/css">
/** TUW Font Color and Size Change widget begins **/
#tuw-font-change-widget {width: auto;}
#tuw-font-change-widget  h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma  !important;font-weight: normal  !important;border: 0 !important;}
#tuw-font-change-widget  ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0  !important;list-style; none !important;}
#tuw-font-change-widget ul  li {width: 20px !important;height: 20px !important;overflow:  hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display:  block !important;float: left  !important;border: 1px solid #CCCCCC   !important;}
#tuw-font-change-widget ul li a {width: 20px  !important;height: 20px !important;display: block  !important;line-height: 18px !important;text-align: center  !important;color: #FFFFFF !important;font-size: 11px  !important;font-family: Tahoma !important;text-decoration: none  !important; outline: 0 !important;}
#fcw-black { background: #000000  !important; } #fcw-white { background: #FFFFFF !important; } #fcw-blue {  background: #0066CC !important; } #fcw-gray { background: #666666  !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});
$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#FFFFFF" });
return false;
});
$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});
$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
// Change Font Color -- ends
// Change Font Size -- begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});
$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});
$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});
$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});
// Change Font Size -- ends
});
</script>
<!-- TUW Blogger Change Font color and size widget begins -->
<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Yazı Rengini Değiştir </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">white</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
</ul>
</div>
<div class="tuw-fcw">
<h2> Yazı Boyutunu Değiştir </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
</ul>
</div>
</div>
<!-- TUW Blogger Change Font color and size widget ends -->
<!-- Code ends -->