30 Mayıs 2019 Perşembe

Blogger rastgele yayınlar eklentisi

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.
Blogger rastgele yayınlar eklentisi

Özelliklerine şöyle bir bakalım

1 - Yazar ismi ve resmi
2 - Tıklanabilir yorum sayacı
3 - Etiket gösterimi
4 - Özel tarih biçimi
5 - Animasyonlu mini resim önizleme
6 - Mini resim çözünürlüğünü değiştirme
7 - 3. parti resimlerini ve youtube mini resimlerini gösterme
8 - Ayarlanabilir başlık uzunluğu
9- Ayarlanabilir snippet uzunluğu

Blogger rastgele yayınlar eklentisi kurulumuna geçelim


Uyarı! Aklınızda bulunsun bir işlem yaparken yada bir kod denerken mutlaka Kuruluma başlamadan önce her zaman Temanızın yedeğini alın. Bir sorun olursa eski temanızı sorunsuz bir şekilde yeniden yükleyebilirsiniz çünkü kurulum esnasında bir hata yaparsanız mesuliyet kabul etmiyorum. Tema yedeği almak için blogger kontrol paneli Tema seçeneğini seçin ve sağ üst kısımda görmüş olduğunuz Yedekle/Geri Yükle butonuna tıklayarak açılan küçük sayfadan en son Tema indir butonuna tıklayın ve temanız inmiş olacaktır.

Blogger rastgele yayınlar ekletisi kurulum


1-Blogger kontrol panelinize girin Tema bölümüne tıklayın
2-HTML'yi düzenle kısmına tıklayın açılan yerde <head> kodunu CTRL F kombinasyonu ile aratın ve onun hemen altına aşağıdaki kodu yapıştırınız blogunuzda zaten varsa bu kodlar yeniden eklemeniz gerekmez.

<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>


3-Şimdi yine aynı şekilde ]]></b:skin> kodunu aratın ve hemen üzerine gelicek şekilde aşağıdaki kodu yapıştırınız.

.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/AVvXsEgrrBJB0Ina-gnlf3FYKrEI2TdbCm65uuHx-p3l91CiXJp6EZKBsXigJDLSxME14zZejGSkvGXSIvcAYc8DH8WJKCyaIKy-tylZzq_fJIbXRrwfLLkWMBSpVz1jimTis7AfxDEViNfqwMI/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}

4-Şablonu kayıt edin.
5-Blogger kontrol panelinde Yerleşim kısmına tıklayın.
6-Gadget Ekle kısmına tıklayıp açılan pencerede HTML/JavaScript seçiyoruz ve içerisine aşağıdaki kodları ekliyoruz.

<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/AVvXsEh-D1JOjFz9dKX4ZqgeF7vYbYBgbqhXZcPyAJVRlkHEbud_AMEHLq-HajqsJLuyX6a48XXqo2PhxMrYbwvRhbAggB8wZCY-QQII1POgywuIfUh7v4eJreJ6dDaVE3Vw8zbu1z_8K-vqQ1g/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.


1-var ListCount = 3; Kaç adet yayın gösterileceğini belirtir.
2-var ChrCount = 85; Snippet yani yayınınızdaki açıklama bölümündeki karakter saysını belirtir.
3-var TitleCount = 70; Yayın başlığının karakter sayısını belirtir.
4-var ImageSize = 150; Yayındaki resmin px lini belirtir.
5-var showcomments = "on"; Yayına yapılmış yorumları gösterir off yaparsanız göstermez.
6-var showdate = "off"; Yayın tarihini belirtir on yaparsanız gösterir.
7-var showauthor = "on"; Yazar resmini belirtir off yaparsanız göstermez.
8-var showthumbnail = "on"; Yayın resmini belirtir off yaparsanız göstermez.
9-var showlabel = "on"; Yayına ait etiketi belirtir off yaparsanız göstermez.
10-var showcontent = "on"; Yayın açıklamasını belirtir off yaparsanız göstermez.

Eğerki Sizde blogunuzda bu eklentiyi paylaşmak isterseniz Blogdan indir'den alıntı olduğunu belirtirseniz sevinirim. Ayrıca sormak istediğiniz bir şey olursa yorum yazarak belirtebilirsiniz.


10 Eylül 2016 Cumartesi

2 Farklı Blogger İletişim Formu Kodları Blogger Contact Form Code

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

Merhaba Arkadaşlar 
Bugün Sizlere Bloggerin Orjinal İletişim Formu olan küçük iletişim kutusunu Görsel Anlamda ve Daha iyi bir görünüm sağlayıp
Nasıl Kendi belirlediğimiz bir üst İletişim Sayfasına yerleştiririz bu konumda onu anlatıcam.

Blogger İletişim FormuÖ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



Ayrıca Kodları blogunuza uygulamadan önce Mutlaka Blogger Şablonunuzu Yedekle / Geri Yükle kısmından Bir yedeğini alın kodların bir hata vermesi sonucunda Tekrardan Eski Şablonunuzu Geri
Yükleyebilmek için.

Şimdi Başlayalım Arkadaşlar Blogger kontrol Paneline girip Şablon kısmına tıklıyoruz Şablon kısmına girdikten sonra HTML'yi Düzenle Seçeneğine Tıklıyoruz html'yi düzenle seçeneğine tıkladıktan sonra karşımıza gelen Kod penceresinden Üst kısımda Şablonu Kaydet Seçeneğinin Hemen yan tarafında Widget'a atla Seçeneği var ona tıklıyoruz ona tıkladığımız zaman önümüze küçük bir liste açılacak ve O listeden ContactForm1 isimli olanı seçiyoruz ve Karşımıza Gelen Kodlardan ▶ ContactForm1 isimli kodumuzun başındaki şu Gördüğümüz küçük Ok işaretine tıklayıp kodlarımızı genişletiyoruz Karşımıza Gelen şu alt kısımdaki kodların kırmızıyla işaretlemiş olduğum yerlerini siliyoruz ve orada sadece Mavi olarak işaretlemiş olduğum kodlar kalıyor.



<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>



Bu Kırmızı işaretlenmiş kodlarımızı sildikten sonra Şablonumuzu Kayıt edip çıkıyoruz ve Sayfalar kısmına Geliyoruz Üst kısımdaki Yeni Sayfa Seçeneğine Tıklayıp İletisim İsimli Bir Sayfa oluşturuyoruz Oluşturduğumuz iletişim isimli sayfamıza alt kısımdaki vermiş olduğum İletişim Formu Kodlarından Herhangi birini ekleyip Kullanabilirsiniz

        Mavi Şeritli İletişim Formu 1



Blogger İletişim Formu











Mavi Şeritli İletişim Formu Kodu 1
<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/AVvXsEgMZZgeH8HEBh8M5KrNbGiExKh2xNAqBiZZJmCDkoWiHR7zH-PMj8MCwNAf1SWBrOrSgQp4DsrriRJ_UYTixtFQzQAZS2iuK9JZUjTeOSAZ25lTSXuN4EfEoa8EvSkShXqClfn_aAUF25M/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/AVvXsEiwNBWiy8OlIfSXGu4XwgJ19q5AFhlORhuO-bb5nQ3Rxm6v3qsdo97r5VX1A79udq5Vh6VWNwMoK97KmJWy-tTa1gxPIsNuRhMaxYnRffI8ss1B6pboMOFB7wAMKEcQV1v7iDzPhM2YGw0/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/AVvXsEjUqz6C0I-R_M8dGdVTBdLtDlXDnxNwo94AHB1hOAUH0CP_o6-1tePW-hkY1E6kY0PbaoHh4MHnqoyuR8uaoMUYLT82iakbXD_tiWWVtTluvaf4fechX1peTjjGvB_6eMuerU_zs5xAK1E/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>

Yukarıdaki kodların içinde gördüğünüz kırmızı yerler genişlik ve yükseklik ayarlarıdır o kısımları kendinize göre ayarlayabilirsiniz.




Normal Geliştirilmiş İletişim Formu 2

Blogger İletişim Formu

Normal Geliştirilmiş İletişim Formu Kodu 2
<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>

Yukarıda gördüğünüz kırmızı yer iletişim kutusunun çerçeve yüksekliğinin ayarıdır width:95 ise genişlik ayarıdır rows 15 kısmı ise mesaj kısmının ayarıdır Turuncu kısımı Gönder butonun Turuncu rengidir mavi kısım ise Gönder butonunun Mavi kısmıdır...
Şimdiden kolay gelsin arkadaşlar...

İletişim Formu kodları Meftun Mede' den alıntıdır Düzenleyen Blogdan-indir...

Kodları indirmek için indir butonuna tıklayın kodlar metin belgesinde kayıtlıdır.