İndirvkur

Blogger'a kod kutusu nasıl eklenir

Sizlere kendimce tasarladığım çok basit ve görsel anlamda da şık sayılabilecek kadar güzel kullanımı kolay kullanışlı bir kod kutusu sunacağım örnek sol kısımda <pre data-codetype="HTML">HTML kodları Buraya</pre> gibi uzun uzun kodlar yazmanıza gerek yok kod paylaşmak için.

Blogger kod kutusu kurulumu

pre { 
background-image: linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
background-size: 100% 50px;
border:solid #1eb093;
line-height:16px;
color:#000;
border-width:4px;
font-family:monospace;
font-size:14px;
padding:4px 7px;
background-color:#EEE;
border-radius:6px;
max-height:500px;
overflow:auto;}

Blogger kod kutusu ayarı

Blogger Toplam Yazı ve Yorum Eklentisi

Blogger toplam konu ve yorum eklentisi anlatımına geçelim

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

Blogger toplam yazı ve yorum eklentisi kurulumuna geçelim

<script style="text/javascript"> function numberOfPosts(json){document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b><br>')}function numberOfComments(json){document.write('<span class="Apple-style-span" style=""></span> <b>' + json.feed.openSearch$totalResults.$t + '</b><br>')}</script>

<div class="boxx"><div class="cell_1 konu-sayısı"><i class="fa fa-envelope fa-w-16 fa-2x"></i></div><div class="cell_2">Toplam Konu</div><div class="cell_3 "><span class="count" id="rss"><script src="/feeds/posts/default?alt=json-in-script&amp;callback=numberOfPosts">
</script><br /></span></div></div>

<div class="boxx"><div class="cell_1 yorum-sayısı"><i class="fa fa-comments fa-w-16 fa-2x"></i></div><div class="cell_2">Toplam Yorum</div><div class="cell_3 "><span class="count" id="rss"><script src="/feeds/comments/default?alt=json-in-script&amp;callback=numberOfComments"></script><span class="Apple-style-span" style=""></span> <br /></span></div></div>

<style type="text/css">
.boxx:hover{filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85}.boxx img{border:0;padding:0}.icon{width:27px;height:26px;margin-top:3px;border:none}.konu-sayısı{background-color:#44B8F2;background-image:-webkit-linear-gradient(top,#4787ed,#4787ed);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA461',endColorstr='#E8711A');border-color:#da7c0c;color:#fff;text-shadow:0 1px 1px rgba(60,60,60,0.75)}.yorum-sayısı{background-color:#F78634;background-image:-moz-linear-gradient(top,#FFA461,#E8711A);background-image:-ms-linear-gradient(top,#FFA461,#E8711A);background-image:-webkit-gradient(linear,0 0,0 100%,from(#FFA461),to(#E8711A));background-image:-webkit-linear-gradient(top,#1eb093,#1eb093);background-image:-o-linear-gradient(top,#FFA461,#E8711A);background-image:linear-gradient(top,#FFA461,#E8711A);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA461',endColorstr='#E8711A');border-color:#da7c0c;color:#fff;text-shadow:0 1px 1px rgba(60,60,60,0.75)}.boxx{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:17px;list-style-type:none;display:inline-block;padding:0 0;margin:2px -3px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);text-decoration:none;vertical-align:middle;background-color:#f5f5f5;background-image:-webkit-linear-gradient(top,#ffffff,#E6E6E6);background-repeat:repeat-x;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border:1px solid #CCC;border-bottom-color:#B3B3B3;boxx-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);cursor:pointer;position:relative;margin-left:-1px;line-height:20px;float:none;border-radius:4px}.col_4{float:left}.cell_1{font-size: 14px;float:left;width:40px;height:30px;padding:0 0 0;margin-left:0}.cell_2{border-right:1px solid #1eb093;float:left;width:195px;height:25px;text-align:center;padding:5px 0 0}.cell_3{float:left;width:50px;height:25px;text-align:center;padding:4px 0 0}</style>

Blogger rastgele yayınlar eklentisi anlatımına geçelim

Blogger rastgele yazılar eklentisi gayet şık harika denebilecek kadar güzel bir eklentidir. Yazılarınızın küçük resimlerini  başlıklarını yorum sayısını tarihini etiketlerini yazar ismi ve avatarı dahil olmak üzere bir çok özellik içeren kendimin de kullanmış olduğum geniş kapsamlı bir eklentidir.

Özelliklerine şöyle bir bakalım

Blogger rastgele yayınlar eklentisi kurulumuna geçelim

Blogger rastgele yayınlar ekletisi kurulum

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"></link>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"></link>

.mbtlist {list-style-type:none;overflow:hidden; margin: 10px 0px 0px 10px!important; width:300px; padding:0px!important;}
.mbtlist li {margin:0px auto 10px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}
.mbtlist li a { color:#666; text-decoration:none; }
.mbtlist i{color:#999; padding-right:5px; }
.mbtlist .iline{line-height:2em; margin-top:3px;}
.mbtlist .icontent{line-height:1.5em; margin-top:5px; clear:both}.mbtlist div span{margin:0 7px 0 0; display:inline-block;font-weight: normal; }
.mbtlist .mbttitle {font-family:oswald; font-size:13px; color:#838383; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover {color:#333; text-decoration:none;}
.mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
.mbtlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
float: none; display: inline-block; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
.mbtlist .itag{ color: #fff;position: absolute;left: 9px;top: 9px;display: inline-block;font-size: 11px;width: 100px; height:22px; overflow: hidden;}
.mbtlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height: 2em;font-family: arial;font-size: 11px;border:1px solid #333;}
.mbtlist .itag a:hover{background:#84DB06;border: 1px solid #84DB06; color:#fff; text-decoration:none;}
.mbtlist .iFeatured{overflow:hidden;position:relative;float:left;margin:0 10px 10px 0;padding:0;}
.mbtlist .iFeatured a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8v5yz12PTMaZ1cqnbhpVx1wHh5AhxN1KWkLnEHz5PRkBnjmRHpAeqml998NawtpdeQIlQdk0W3LuPX2hoCFKzyEyhPRnDTtCB4G7Y-5WKDvGrL3xZKLynOeulf_aCh5uM2EIkcQRFbB4/s100/mbt-bg1.png) 0 0;padding:6px 5px 4px 6px;display: block;}.mbtlist .iFeatured img{width:100px;height:60px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border: 1px solid #ddd; border-radius: 2px;}
.mbtlist .iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbtlist .icomments a{color:#0080ff; font-family: arial;font-size:12px;}
.mbtlist .icomments a:hover{text-decoration:underline}
.mbtlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
.mbtlist .idate:before {content:'\f073';padding-right:4px}
.mbtlist .iedit:before {content:'\f040';}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
.mbtlist .itotal {color:#999; padding:5px 0px; }
.mbtlist .itotal a {font-family:"Droid Sans"; font-size:12px; font-weight:normal; color:#999; text-decoration:none}
.mbtlist .itotal span:before {content:'\f07c';}
.mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:droid sans; font-size:15px; font-weight:bold}

<script type='text/javaScript'>
//#################### Defaults
var ListBlogLink = "";
var ListCount = 3;
var ChrCount = 85;
var TitleCount = 70;
var ImageSize = 150;
var showcomments = "on";
var showdate = "off";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "on";
var RandomArray = [];
var TotalPosts = 0;
var RandomArray = new Array(ListCount);
function TotalCount(json) {
TotalPosts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
function GenerateNum() {
for (var i = 0; i < ListCount ; i++) {
for (var j = 0; j < RandomArray.length; j++){
var RandomNum = Math.floor(Math.random() * (TotalPosts ) + 1);
RandomArray[i] = RandomNum; }
}
}
</script>
<script type='text/javaScript'>
document.write('<ul class="mbtlist">');
//################ Function Start
function mbtrandom(json) {
for (var i = 0; i < ListCount; i++)
{

//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}
}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];

ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);
mm = ListUpdate.substring(5, 7);
DD = ListUpdate.substring(8, 10);
TT = ListUpdate.substring(11, 16);
MM = ListMonth[parseInt(mm - 1)];

//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj26-zJ03KkbPoTh_ek7mHqr4xa69FbtGxnc5bu0rbQSzf-uI3NNcvIUHy1ijDN8xPF5Stmnse2GgRLySGcOBQojYvqTJphpRfVB2GW1XfJyc3Blw9bhbcabSRBDFk3vW0iWgP25fjuku8/s200/Icon.png'";
}
//################### Printing List
document.write( "<li style='margin:0px auto 10px auto!important; padding:0px!important;' class='node"+[i]+"' >");
if (showthumbnail == 'on'){
document.write("<div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div>");
}
if (showlabel == 'on'){
document.write("<span class='itag'>"
+ListTag +
"</span>");
}
document.write("<a class='mbttitle' href="
+ ListUrl+
">"
+ ListTitle+
"</a><div class='iline'>");
if (showauthor == 'on'){
document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span>");
}
if (showcomments == 'on'){
document.write("<span class='icomments'>"
+ListComments +
"</span> ");
}
if (showdate == 'on'){
document.write("<span class='idate'>"
+ M +
" "
+ D +
"</span>");
}

document.write("</div>");
if (showcontent == 'on'){
document.write("<div class='icontent'>"
+ListContent +
"...</div> ");
}
document.write("</li>");
}
document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"'>View all <font>"+TotalPosts+"</font> posts in ─ "+ListLabel+" </a></span></div>");
}
<!-- ######### Invoking the Callback Function ######## -->
for (var i = 0; i < ListCount ; i++) {
GenerateNum();
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + RandomArray[i] + '&max-results=1&callback=mbtrandom\"><\/script>')
};
document.write('</ul>');
</script>

Kırmızı ile belirtmiş olduğum özellikleri kendinize göre uyarlayabilirsiniz.

Blogger İletişim Formu kodları Blogger Contact Form Code

Öncelikle eğerki blogumuzda iletişim Gadgeti ekli değilse blogumuzun Yerleşim kısmına geliyoruz ve Gadget Ekle yazan herhangi bir yere tıklıyoruz neresi olduğu önemli değil çünkü yaptığımız işlemler sonunda Eklediğimiz İletişim Formu Gadgeti eklediğimiz yerde değil Bizim Belirlediğimiz Bir üst İletişim sayfasında Görünecektir. Bunun için Bir Gif resim yaptım oradanda bakabilirsiniz

<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'> 
    <b:includable id='main'> 
  <b:if cond='data:title != &quot;&quot;'> 
    <h2 class='title'><data:title/></h2> 
  </b:if> 
  <div class='contact-form-widget'> 
    <div class='form'> 
      <form name='contact-form'> 
        <p/> 
        <data:contactFormNameMsg/> 
        <br/> 
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/> 
        <p/> 
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> 
        <br/> 
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/> 
        <p/> 
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> 
        <br/> 
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/> 
        <p/> 
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/> 
        <p/> 
        <div style='text-align: center; max-width: 222px; width: 100%'> 
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/> 
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/> 
        </div> 
      </form> 
    </div> 
  </div> 
  <b:include name='quickedit'/> 
</b:includable> 
  </b:widget>

<style type="text/css">
#ContactForm1{display:none;}
#contact_wrap{width:700px;height:490px;border-radius:1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#ccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f2f2f2',endColorstr='#cccccc');background-image:linear-gradient(top,#f2f2f20%,#e6e6e650%,#cccccc100%);box-shadow:1px 1px 5px #ccc;margin:auto;padding:25px;}
#contact_wrap h3{color:#e8f3f9;font-family:"Microsoft Sans Serif",Georgia,arial;font-size:20px;font-weight:400;text-align:center;text-shadow:2px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;position:relative;margin:0 -36px 20px;padding:12px;}
#contact_wrap h3:before{content:' ';position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px;}
#contact_wrap h3:after{content:' ';position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px;}
#ContactForm1_contact-form-name{width:270px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjz1B95cb0TpEJ2wTuGqVlPVMo1AYq_whE82l4Ek4a89CseBXzZ5vcGOLoV7N_ol7ISeE9XUjeyKEu53hbWQYtzUMyix1KMxFqMMepIVSHTtNrfpGavOoAtqMo_RXw41XbUkcwQJw7WQg/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email{width:370px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsKDgZmoIbHt65if6mxaV9qFeL-dqShJ1Dnd54f3YuJyAkzg0TIR4TCPEG45atFsG0tzPTb5nADYi5LTTguNiwuDdW_yFRdO9HDBl1I04iRRrjTe3eBuWZ4E5W4kL5DKMag9jnV11HBiY/s1600/msg2.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email-message{width:650px;height:250px;font-family:Arial, sans-serif;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCDcy7AwfYJdRFXZ1q0TXsANOvb5rpX5bB8Y2bA__bN1iB5R1DVfPGuBdVi9DxmHdzADjeNT7UcFOXPEN3Y56ER0kfNmbxvUyVWHDTS94hVuacyvXaCnjU4pRNQaa-scjcW0D049r3qtg/s1600/pen.png)no-repeat 10px 10px;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-submit{width:95px;height:30px;float:right;color:#FFF;cursor:pointer;border-radius:4px;text-shadow:1px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;border:1px solid #194f6d;margin:10px 0;padding:0;}
#ContactForm1_contact-form-submit:hover{background:#4c9bc9;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:320px;margin-top:35px;}
</style>

<br />
<div id="contact_wrap">
<h3>
İletişim</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="İsim" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="E-Posta" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesaj" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
.contact-form-widget{height:400px;max-width:95%;background:#E6E7E8;color:#000;border:5px solid #656E75;box-shadow:0 1px 4px rgba(0,0,0,0.25);border-radius:10px;margin:0 auto;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%;max-width:100%;margin-bottom:10px;}
.contact-form-button-submit{background:#FF6600;color:#000;width:20%;max-width:20%;margin:0;border:1px solid #656E75;}
.contact-form-button-submit:hover{background:#679EC9;color:#fff;border:1px solid #FAFAFA;}
</style>  <br />
<div class="widget ContactForm1" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<b>İsim</b><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  E-Posta *<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> Mesaj *<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="15"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Gönder" /> <br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
<br /></form>
</div>
</div>
</div>