Blogger - Sitenizin Arkaplanını Ziyaretçi Ayarlasın Ayarlasın

Evet Arkadaşlar Bugün Sizlere Çok Güzel Bir Eklentiden Bahsediceğim. Resimde Görmüş Olduğunuz Gibi Arkaplanı Ziyaretçiniz Belirlicek. İsterseniz Siz Renkleri Değiştirebilirsiniz. Hemen Anlatıma Geçiyorum.. Demosu Sitemizde Mevcuttur.

1. Blogger > Yerleşim > HTML'yi Düzenleye Tıklıyoruz.

2. (Ctrl+F) Yapıp </body> Aratıyoruz. Hemen Üstüne Aşağıda Bulunan Kodu Ekliyoruz.

<script src='http://softglad.at.ua/widgets/theme-style-cookie.js' type='text/javascript'/> <script type='text/javascript'> /**  * URL: http://phtmldrive.blogspot.com/  */   //<![CDATA[ var expiredStyle = 7000,     dbs = document.body.style;   // background switcher function bgSwitch(v) {     dbs.background = v;     createCookie('bgstyle', v, expiredStyle); }   // font switcher function fontSwitch(v) {     dbs.fontFamily = v;     createCookie('fontstyle', v, expiredStyle); }   // font sizer function changeFontSize(v) {     dbs.fontSize = v + 'px';     createCookie('fontsize', v, expiredStyle); }   // color switcher function fontColor(v) {     dbs.color = v;     createCookie('fontcolor', v, expiredStyle); }   if (readCookie('bgstyle')) {     dbs.background = readCookie('bgstyle'); } if (readCookie('fontstyle')) {     dbs.fontFamily = readCookie('fontstyle'); } if (readCookie('fontsize')) {     dbs.fontSize = readCookie('fontsize') + 'px';     document.getElementById('fontSizer').value = readCookie('fontsize'); } if (readCookie('fontcolor')) {     dbs.color = readCookie('fontcolor');     document.getElementById('fontColorer').value = readCookie('fontcolor'); }   function resetStyle() {     eraseCookie('bgstyle');     eraseCookie('fontstyle');     eraseCookie('fontsize');     eraseCookie('fontcolor');     window.location.reload(1); } //]]> </script>

 
3. Tasarımı Kaydediyoruz.


Aşağıda Bulunan Kodu Yerleşim > Gadget Ekle > HTML/JavaScript Ekle'ye Tıklayıp Ekliyoruz.

<style> #stylechanger {   border:none;   margin:0 0;   padding:0 0;   width:450px;   text-align:left;   font:normal 11px Arial,Sans-Serif;   border-collapse:collapse; } #stylechanger th, #stylechanger td {   vertical-align:middle;   border:none !important;   padding:2px 10px; } #stylechanger th.title {   background-color:#33AFE0;   padding:5px 10px;   margin:0 0 10px;   text-transform:uppercase;   font-size:12px;   font-family: Arial,Sans-Serif;   color: #FFF; } #stylechanger select, #stylechanger input[type="text"] {   width:130px;   padding:2px;   font:bold 11px Arial,Sans-Serif;   display:block;   margin:0 0 0;   height:24px;   outline: 0; } #stylechanger select option {   padding:5px 10px;   cursor:pointer; } #stylechanger button {   font:normal 11px Arial,Sans-Serif;   padding:3px 5px;   cursor:pointer; } #stylechanger #bgColorer {   overflow:hidden;   margin:10px 0 10px; } #stylechanger #bgColorer span {   display:block;   float:left;   width:20px;   height:20px;   border:1px solid black;   margin:0 5px 0 0;   cursor:pointer; } #stylechanger input[type="text"] {   width:118px !important;   padding:4px !important;   height:auto !important; } </style> <table border="0" align="right" id="stylechanger">     <tr><th class="title" colspan="2">Arkaplan</th></tr>     <tr>         <td colspan="2">             <div id="bgColorer">                 <span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span>                 <span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span>                 <span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span>                 <span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span>                 <span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span>                 <span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span>                 <span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span>             </div>         </td>     </tr></table>

5. Kaydedip Çıkıyoruz.

İşlem Bu kadar Güle Güle Kullanın.