21 Eylül 2015 Pazartesi

Blogger rastgele yazı eklentisi

Merhaba ;


Sevgili blogger'lar , sizlere birçok ziyaretçinin nedenini anlamadığım şekilde tıkladığı ve sayfaya eğlenceli bir hava katan eklentiyi paylaşmak istedim.
Yukarıdada söylediğim gibi hemen hemen bütün ziyaretçiler emin olun bu butona basacaktır :)

Eklentinin mantığı ; bloğumuzun herhangi bir yerine bu eklentiyi eklediğimizde rastgele yazı için tıkla butonu çıkıyor ve ziyaretçiler bu butona tıkladığında bloğumuzdaki konulardan rastgele bir konu açılıyor.






Eklentiden bir görüntü ;



Kurulum ;

Oldukça basit bir kurulumu var.

Kumanda paneli > yerleşim > gadget ekle > html/javascript kodu diyoruz ve aşağıdaki kodları ekliyoruz.

<!-- http://bloggereklentideposu.blogspot.com.tr rastgele yazı eklentisi kod başlangıcı -->
<div id='myLuckyPost'></div> <script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'rastgele yazı için tıkla'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script>
<style type='text/css'>
@import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' );
#myLuckyPost a {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 25px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px transparent;
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px transparent;
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px transparent;
margin: 10px auto;
width: 250px;
text-align: center;

-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}

#myLuckyPost a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>
<!-- http://bloggereklentideposu.blogspot.com.tr rastgele yazı eklentisi kod bitişi -->

Daha sonra yerleşim panelinden sürükle bırak yöntemiyle istediğimiz yere ekleyebiliriz.
Bütün işlem bu kadar.Hayırlı olsun :)

" Anahtar kelimeler : blogger rastgele yazı, blogger rastgele yazı eklentisi, blogger rastgele yazı eklentisi kodu, blogger, blogger rastgele yazı, "

20 Eylül 2015 Pazar

Blogger toplam yazı ve yorum sayısı eklentisi

Merhaba ;

Bloglar için kodlanmış ve bloglardaki toplam yazı ve yorum sayısını ziyaretçilere bildirmek amacıyla oluşturulmuş eklentiyi sizlerle paylaşmak isterim.

Bu basit görünümlü ancak geliştirilmeye açık eklentiyi nasıl kuracağımızı görelim.

Öncelikle eklentiden bir görüntü ;


Gelelim bu eklentiyi bloğumuza nasıl ekleyeceğimize 

Kurulum ;

Oldukça basit bir kaç işlem mevcut.

Kontrol paneli > yerleşim > gadget ekle > html/javascript ekle diyoruz ve aşağıdaki kodları ekliyoruz.


<script style="text/javascript">
function numberOfPosts(json) {
document.write('Toplam Yazı: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Toplam Yorum: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="black"><script src="http://bloggereklentideposu.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://bloggereklentideposu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>


Daha sonra koyu renkli yerlere eklediğimiz bloğun url'sini yazıyoruz ve kaydedip çıkıyoruz.
Bütün işlem bu kadar.Hayırlı olsun :)

" Anahtar kelimeler : blogger istatistik eklentisi, blogger toplam yazı eklentisi, blogger toplam yorum eklentisi, blogger toplam yazı ve yorum eklentisi "

19 Eylül 2015 Cumartesi

Powered by blogger yazısını kaldırmak

Merhaba ;

Blogger'ın yeni blog kuran arkadaşlar üzerine musallat ettiği powered by blogger yazısını kaldırmayı öğrenicez.
Yeni blog kurmuş olmak üzere birçok blogger arkadaş bu yazının hiçbir zaman kalkmayacağını ve kaldırılmasının yasak olduğunu düşünmekteler gerçeği söylemek gerekirse ilk başlarda bende öyle düşünmüştüm.
Bu düşünceye sahip olmak gayet doğal , çünkü ; her ne kadarda alt alan adı olsada alan adını ve sunucu hizmetini ücretsiz olarak blogger karşılıyor.
Neyse daha fazla uzatmadan bu lanet yazıyı kaldırmayı göstereyim.

Bu yazıyı kaldırmanın birçok yolu ama en kolay yolunu sizlere göstericem.
  • Şablon > Özelleştir diyoruz.
  • Altta bulunan Geliştir > CSS ekle diyoruz.
  • ve çıkan css kutusuna aşağıdaki kodu ekleyip sağ üstte bulunan bloğ'a uygula butonuna tıklıyoruz.
#Attribution1{display:none;}

Bütün işlem bu kadar ...Hayırlı olsun :)




" Anahtar Kelimeler : powered by blogger yazısını kaldırmak, powered by blogger yazısı nasıl kalkar, powered by blogger yazısı nasıl kaldırılır "



Blogger yazı altına yazar hakkında bilgi bölümü eklemek

Merhaba ;

Blog yazılarının hemen altında bulunan ve isteğe bağlı olarak kısa veya uzun olmak üzere okuyucunun yazar hakkında bilgi sahibi olmasına olanak sağlayan bu eklentiyi bloğumuza nasıl ekleyebileceğimizi göstericem.
Bu eklenti sayesinde yazar hakkında bilgi vererek , ziyaretçi karşısında diğer bloglardan bir adım önde olmanızı sağlayacaktır.
Günümüzde binlerce hatta yüzbinlerce blog var ve tabiki bu blogları oluşturan yani içeriklerin sahipleri var,buda demek oluyorki binlerce hatta yüzbinlerce yazar var.
Bu eklenti sayesinde kısada olsa okuyucular , yazarlar hakkında fikir sahibi olabilirler.
Fazla uzatmadan eklentinin kurulumuna geçelim.

Kurulumdan önce eklentiden bir görüntü ;




Kurulum ;

Öncelikle Şablon > Html düzenle diyoruz ve ctrl+f yardımıyla aşağıdaki kodu buluyoruz.


]]></b:skin>

ve hemen üstüne aşağıdaki kodları ekliyoruz.

.authbio{
color: #454545; 
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 1px solid #B2F702;
width: 520px;
padding: 15px;
margin-bottom:25px;
}
.biotitle {
width: 520px;
background: #B2F702;
width: 520px;
padding: 0px;
border: 1px solid #000000;
}
.biotitle h3 {
font-weight: bold;
color: black;
padding:3px;
}
.authbio a{
color:#B2F702;
text-decoration:underline;}

Daha sonra aşağıdaki kodu buluyoruz.( Birden fazla olabilir , tek tek denemelisiniz. )

<data:post.body/

ve hemen altına aşağıdaki kodları ekliyoruz.


<div class='authbio'>
<div class='biotitle'>
<center> <a target="_blank" rel="dofollow" href="http://bloggereklentideposu.blogspot.com"><h3>Yazar Hakkında</h3></a></center>
</div>
<br/>
<div style='float: left;'>
<img alt='' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaA5zcCpSMwnT2OOJ5U_DBAKSXY-r1-O_HXgagaAitydbD5PoO77T37rjF_DeEJEpv6xnt-bIGJ6pB4lRoxWlua7Izqos_2hU_7mb3Wec1O1D0L9TXnOTadYsNpHugs8VrzVfpa0Jdy7WI/h120/Blogger_logo.png' width='75'/>
</div>

 <center> Bu alana yazar hakkındaki bilgileri girebilirsiniz. </center>
 <center> Bu alana yazar hakkındaki bilgileri girebilirsiniz. </center>
 <center> Bu alana yazar hakkındaki bilgileri girebilirsiniz. </center>
 <center> Bu alana yazar hakkındaki bilgileri girebilirsiniz. </center>
</div>

Kod ekleme işlemi bittikten sonra gelelim özelleştirmeye.

kırmızı  > 75x75 avatar url'si
mor > yazar hakkında sayfa url'niz
mavi  > genişlik ayarı hepsini aynı ölçüde değiştirin.
yeşil  > " yazar hakkında " yazısının arka plan rengi
turkuaz  > yazar hakkında yazısının ayarları
pembe  > diğer yazıların ayarı

Eklentimiz başarıyla kuruldu.Hayırlı olsun :)


" Anahtar Kelimeler : blogger yazı altına yazar hakkında bilgi bölümü eklemek, blogger yazar hakkında kutusu eklemek, blogger yazı altına yazar hakkında eklemek, blogger yazı altına yazar hakkında kutusu eklemek "

18 Eylül 2015 Cuma

Blogger infobar eklemek

Merhaba ;

Öncelikle infobar'ın ne olduğu ile ilgili fikri olmayan arkadaşlarımızın olmadığını varsayarak ; infobar , sayfanın alt kısmında sabit olarak duran ve sayfa ile birlikte kayan bilgi çubuğudur.
Bu bilgi çubuğunu kendi yaratıcılığımızı ve becerilerimizi kullanarak geliştirebiliriz.

Öncelikle eklentiden bir görüntü ;


Kurulum ;

Şablon > Html düzenle diyoruz ve ctrl+f yardımıyla aşağıdaki kodu buluyoruz.
]]></b:skin>                                                                                      

ve hemen üstüne aşağıdaki kodları ekliyoruz.

#mta_bar {
background:#FF6600;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://lh6.googleusercontent.com/bkVInn0RgUftxig0CBmJRkE81gb_QTlVRmzOvJz2ZGy9KJCTnAXkb6pZ42FT9SEA19r96ANy-bLSafQ=w1256-h777?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }


Daha sonra aşağıdaki kodu buluyoruz.

</head>

hemen üstüne aşağıdaki kodu ekliyoruz.

<script src="http://googledrive.com/host/0B2NrnLfIOfS7Sk41YWR4TkxBUG8/" type="text/javascript"/>

ve son olarak aşağıdaki kodu buluyoruz.

</body>

altına aşağıdaki kodu ekliyoruz.

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a rel="dofollow" href='http://bloggereklentideposu.blogspot.com.tr/' target='_blank'>Blogger Eklenti Paylaşım Bloğu</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;www.bloggereklentideposu.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNCoFmcJHt5l0a9OhTYc7LahcNBKegAITGCFkQqkuhB8NSJ8vzmjjQbpj2wywX48CM4GaYB2FLOKoe1j-eH4sCbhyMniYk-CCB8-67HRxqkbFVeixQGxUDLb0fEsGNwcUOb262XsPkJ_Y/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Kodlarımızı ekledikten hemen sonra gerekli yerleri değiştirelim.
Kodun üstünde bulunan kırmızı yerler kesin değişmesi gereken yerlerdir.
Aşağıdakiler ise isteğe bağlı değişebilen yerlerdir.
background:#FF6600; > arka plan rengi
border-top: 3px solid #6699ff; > üst ince çizgi kalınlığı ve rengi
width: 100%; > genişliği
#left_bar a {background: url > yazının yanındaki 24x25 icon linki
<img align= src > yandaki kapatma iconu linki
Mavi renkle işaretlediğim yerleri kendi bloğunuza göre değiştirip eklentiyi kullanmaya başlayabilirsiniz.Hayırlı olsun :)

Anahtar kelimeler : blogger infobar, blogger infobar kodu, blogger infobar eklemek, blogger sayfa altında sabit duran bar, blogger sayfa ile hareket eden sabir bar eklentisi

Blogger sayfa numaralandırma eklentisi

Merhaba ;

Bloglar için faydalı olabilecek bir eklenti ile daha karşınızdayım.
Blogger'in orjinalinde Önceki Kayıt ve Sonraki Kayıt şeklinde bir sayfa geçişi sözkonusuydu ancak bu yöntem bende dahil olmak üzere birçok blogger ve okuyucu tarafından eleştirilen bir durumdu.
Bunun nedeni ise önceki kayıt , sonraki kayıt ama hangi kayıtlar ? sayfanın sonlarına doğrumu yoksa başlarına doğrumu gidildiğinin kimse farkında değildi.
Bu soruna çözüm olarak sayfa numaralandırma eklentisi oluşturuldu ve birçok website ve blog bu eklentiyi kullanmakta.
Basit bir eklenti olmamasına karşın
Kuruluma geçmeden önce ;

Eklentiden bir görüntü ;



Kurulum ;

Şablon > HTML düzenleye gelip ctrl+f yardımıyla aşağıdaki kodu buluyoruz.
]]></b:skin>

Kodu bulduktan sonra üstüne aşağıdaki kodu ekliyoruz.

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(http://i48.tinypic.com/29o66o3.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(http://i48.tinypic.com/29o66o3.jpg) 0 -25px repeat-x;
}

.showpageOf{
margin:0 8px 0 0;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(http://i48.tinypic.com/29o66o3.jpg) 0 0 repeat-x;
text-decoration: none;
}

Daha sonra aşağıdaki kodu buluyoruz.

</body>

ve Hemen üstüne aşağıdaki kodları ekliyoruz.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://googledrive.com/host/0B2NrnLfIOfS7MXJOSktNd19JbUE/' type='text/javascript'/>
</b:if>

Daha sonra kaydedip çıkıyoruz.Hayırlı olsun :)

Anahtar Kelimeler : blogger sayfa numaralandırmak, blogger sayfa numaralandırma eklentisi, blogger sayfa sayısı, blogger sayfa sayısı eklentisi

17 Eylül 2015 Perşembe

Blogger dönen sosyal buton eklentisi

Merhaba ;

Sosyal ağların website ve blogların trafiğindeki katkısı oldukça yüksek.
Özellikte facebook ve youtube bunların başında geliyor.
Tabiki bu sosyal ağlara ne kadar önem verdiğinizle alakalı bir durum ne kadar ekmek o kadar köfte diyorum ve bu şık animasyonlu ve görüntü anlamında bloğunuzun tasarımına katkı sağlayacak eklentinin anlatımına geçiyorum.

Eklentinin görünümü ;



Icon Icon Icon Icon Follow Me on Pinterest

Kurulum ;

Şablon > Yerleşim > Gadget Ekle > Html/Javascript diyoruz ve aşağıdaki kodları ekliyoruz.

<style>
 #social a:hover {
 background-color: transparent;
 opacity:0.7;
 }
 #social img {
 -moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;
 }
 #social img:hover {
 -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);
 }
</style>
<center>
 <div id="social">
 <!--Start Rss Icon-->
 <a title="Grab Our Rss Feed" href="rss url'niz" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKOZ3RxwFqa_xvz116eS63qNdZ7VCQSTTdHKsRgHxt30FZIv4Vu21N3qhjXaegXMpIIHazeD4hyphenhypheniXG6p2Kjqt0QGgRzZhMA6y-62yGvzBe5hOWcZHtSbHgLSRwL1HK30_f5kGfjj1tfgsy/h120/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Rss Icon-->
 <!--Start Email Rss Icon-->
 <a rel="nofollow" title="Get Free Updates Via Email" href="e-mail rss url'niz" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR0ZFvZ6tsDy0uxtUGFIi1UYIHZul6Kl728v1ZlmF6miKmevycsL2uzEo1ywtC_0CWjwSUEL56JbV14ptxkQZY04LveUEmhibdU33Hs8jT0equw9s0OdmdqtkScCaIAs2rOPOBUwgMj2hu/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Email Rss Icon-->
 <!--Start Facebook Icon-->
 <a rel="nofollow" title="Like Our Facebook Page" href="facebook url'niz" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClbIOL6seFHYTUc3ZdalShU-H4lv1owDrKyZ2maWNCJs34uUglrWO4rTGyMlGCdiElQ2GPO3IznCkdriwoLWMl1QWM-Fb2e4p0bRWErP2tuDdqB14WLUTCUwuCwTbGVjiyex2d8XQ1oH3/h120/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Facebook Icon-->
 <!--Start Twitter Icon-->
 <a rel="nofollow" title="Follow Our Updates On Twitter" href="twitter url'niz" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH2sSW_vlTyik8GdVwhyMXl_5RPJa6EdHORLVpJKY5mBTF1erS3WyxdGIPf12_tPCvF5pScGg7qxTbuDCNluFqKX2drq3JwW6Qbx4o1THts9uJOc8YU9HXd79zZ4jVA9n6qgADfuGCEWj1/h120/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Twitter Icon-->
 <!--Start Google+ Icon-->
 <a title="Follow Us On Google+" rel="nofollow" href="google+ url'niz" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHlXgSIufso6F6utMB8-YxqYfoKnARm1vixpJLwrphO-n3BoM6HQ86rTTNmD9-JgXe8o5TzBtNu4UZHu8mfLIU9GDq9qNg2IvdyOrAHGXS6xMjIoz1qtguPETPecvU_i8pZlK8eWTOIg0/h120/GOOGLE-PLUS-48x48.png"/></a> 
 <!--End Google+ Icon-->
 <!--Start Pinterest Icon-->
 <a title="Follow Our Pins" rel="nofollow" href="pinterest url'niz" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6Q97KcuFipfj5MyREhiPFb1G0ntokO_g4zhVtOvgp0iZhMqW63pauINIua0maHmIOlnCX5iWL9UrfxrVUPWP1_d8xwpEb0s54i3kOUhk-9Xn6AR3GffP9Qc7TNFv9SUw2_2byvgSLuYa/h120/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
 <!--End Pinterest Icon-->
<a rel="dofollow" href="http://www.bloggereklentideposu.blogspot.com"
 </div>
</center>

Daha sonra mavi renkle belirttiğim yerlere kendi sosyal hesap linklerimizi ekliyoruz ve kaydedip çıkıyoruz.Hayırlı olsun :)




Anahtar kelimeler : animasyonlu sosyal buton, sosyal buton, blogger animasyonlu sosyal buton, animasyonlu sosyal buton eklentisi, blogger animasyonlu sosyal buton eklentisi

Blogger'a HTML kod önizleme aracı eklemek

Merhaba ;

Bu yazımda html kod önizleme aracını bloğumuza nasıl ekleyeceğimizi anlatıcam.
İnternetteki bir çok websitede html kod önizleme aracı mevcut ancak bence her blogda her sitede özellikle script vb. kod paylaşımı yapan website ve bloglarda.

Eklentiden bir görüntü ;



Fazla uzatmadan bloğumuza bu eklentiyi nasıl kuracağımızı görelim...

Kurulum ;

Öncelikle bu aracı yeni bir sayfaya ekleyeceğimiz için sayfalar bölümünden yeni sayfa butonuna tıklıyoruz ve sol üst köşede bulunan " HTML " butonuna tıklıyoruz ve aşağıdaki kodları yapıştırıyoruz ve kaydedip çıkıyoruz.

<!-- start: index -->
<html lang="tr" xml:lang="tr" xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body bgcolor="cccccc">
<!---Lazımlar---->
<style type="text/css">
    body{    
        height:100%;
        margin:0px;
        padding:0px;
        font-family: Verdana, Arial, Trebuchet MS, Lucida Sans Unicode;
        color : #636770;
                
        SCROLLBAR-ARROW-COLOR: #696969;
SCROLLBAR-BASE-COLOR: #D3D3D3;
SCROLLBAR-HIGHLIGHT-COLOR: #C0C0C0;
SCROLLBAR-SHADOW-COLOR: #808080;
SCROLLBAR-3DLIGHT-COLOR: #808080;
SCROLLBAR-TRACK-COLOR: #D3D3D3;
SCROLLBAR-DARKSHADOW-COLOR: #808080;
    
    }
</style>
</body></html>
<style type="text/css">body {cursor: url(http://www.blinkyou.com/cursors/pg1/Bender Spinning.ani); }
FONT.sizethree {font-size: 16px}
</style>


<style type="text/css">
a:link  {
    color : #000000;
    text-decoration : none;
}

a:visited  {
    color : #000000;
    text-decoration : none;
}

a:active  {
    color : #0000FF;
    text-decoration : none;
}

a:hover  {
    color :#0000ff;
    text-decoration : none;
}
.font {  font-family: Tahoma, Verdana, Geneva, Arial, sans-serif; font-size: 8pt; color: #333333}
</style>
<!---Lazımlar---->

<br />
<table align="center" border="1" bordercolor="666666" cellspacing="0" style="height: 468px; width: 624px;">
    <tbody>
<tr>
        <td background="/img/bgamavi2.png" bgcolor="#91A1BB" height="31" width="618"><div align="center">
<b><span style="color: black; font-size: medium;">KOD ÖN İZLEME ARACI&nbsp; 
        (KOD TEST)</span></b></div>
</td>
    </tr>
<tr>
        <td height="500" width="300"><table cellpadding="0" cellspacing="0" style="height: 412px; width: 500px;">
            <!-- MSTableType="layout" -->
            <tbody>
<tr>
                <td height="368" width="618"><table align="center" cellpadding="0" cellspacing="0" style="width: 360px;">
    <!-- MSTableType="layout" -->
    <tbody>
<tr>
        <td height="320"><div align="center">
<table style="background: #ebebea; border: solid 1px #959492; width: 600px;">
<tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="border: 1px solid #b9b8b6; height: 297; padding: 5px; scroll: auto; width: 171;" wrap="soft">ÖNİZLEMESİ YAPILACAK OLAN KODU BU ALANA YAPIŞTIRINIZ.   

</textarea>
</form>
</td><td valign="top"><iframe frameborder="0" name="preview" src="about:blank" style="background: #ffffff; border: 1px solid #b9b8b6; height: 308px; width: 406px;">
</iframe>
</td>
</tr>
</tbody></table>
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">ÖN İZLE</button>
<button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">TEMİZLE</button>
<button onclick="window.location.href=window.location.href">YENİLE</button>
</div>
</td>
    </tr>
</tbody></table>
</td>
            </tr>
<tr>
                <td height="44" valign="middle" width="618"><div align="center">
<b>KODUNUZU YAPIŞTIRIP ÖN İZLEYE BASINIZ</b></div>
</td>
            </tr>
</tbody></table>
</td>
    </tr>
<tr>
        
    </tr>
</tbody></table>
<center>Lisans Sahibi : <a rel="dofollow" href="http://www.destweb.blogspot.com.tr">DestWeb</a>
Kod Yayıncısı : <a rel="dofollow" href="http://www.bloggereklentideposu.blogspot.com.tr">BloggerEklentiDeposu</a></center>
<!-- end: index -->


Anahtar Kelimeler ; html kod önizleme aracı, html kod önizleme aracı kodu, siteye html kod önizleme aracı eklemek, blogger html kod önizleme aracı eklemek, html kod önizleme aracı kodu