Bloggerde Kategori Oluşturma

Yeni blog yaradanlar sık sorduğu sorularda biri.Bende ilk zamanlar bilmiyordum ve internet araştırarak videosun buldum.Sizin içinde yararlı olcağını düşünerek paylaşıyorum.
Değerli yorumlarınızı eksik etmeyin.

Blogger flash oyun ekleme

Başlıkda belirtdiyim gibi blogger tabanlı flash oyun sitesine nasıl flash oyun ekleyeceyimiz anlatacam.Bir arkadaşın ricası üzerine çekdim.Umarım faydalı olmuşdur.
Görüntü kalitesin 720p hd seçerek daha net izleyin.

Blogger duyuru eklentisi

Kendim blogum için duyuru eklentisi arıyordum.Sitemizin sol tarafına bakarsanız bulduğumu anlarsınız.Eğer sizde böyle duyuru eklentisi arıyorsanız ya da hoşunuza gitdiyse hemen kodları paylaşıyorum.Kodları sitenize eklemek için Yerleşim kısmından--> Gadget Ekle -->Html/Javascript ekliye bilirsiniz.






<div class="yuvarlanan-duyuru eklentisi"><div class="divix">
<div style="position:absolute;top:0px;left:0px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;
font-size:13px;color:#fff;background-color:#e84343;" class="duyuristan">
<span style="display:block;margin-left:40px;">

<b>Merhaba Dünyalı !</b>
<br/>

Bu eklenti sizler için uzaydan gönderildi.

<br/>
Beğenmeniz umuduyla (uzaylı bir dost)



</span>
</div>
<style>.divix{height:95px;position:absolute;top:0px;left:0px;min-width:86px;}.duyurucaz{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;border:2px solid #ff9c9c;}</style>
<div class="duyurucaz">Heyyy !</div></div></div><style>.duyurucaz{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;}.duyurucaz{-webkit-transition: all 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: all 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);cursor:pointer;}.duyuristan{padding-right:30px;height:80px;text-decoration:none !important;padding-top:4px;overflow:hidden;background:#fff;border:none;border-color:#ff9c9c;border-width:0px;width:0px;-webkit-transition: width 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: width 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: width 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);}.divix:hover .duyurucaz{height:80px;margin-left:300px;transform:rotate(360deg);-ms-transform:rotate(360deg); /* IE 9 */-moz-transform:rotate(360deg); /* Firefox */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */-webkit-border-radius: 40px;border-radius: 40px;}.divix:hover .duyuristan{background-color:#e84343;border:1px solid #ff9c9c;width:298px;height:78px;}div.yuvarlanan-duyuru{position:fixed;z-index:999999;}div.eklentisi{top:140px;left:0px;}</style><style type="text/css">div.yuvarlanan-duyuru{_position:absolute;}div.eklentisi{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
</style>
Kırmızı kısımları kendinize göre düzenliyin.Duyuru sağ tarafa almak için < -style-> bölümünde .divix‘deki left kodunu right yapabilirsiniz.

 Yorumlarınızı bekliyorum

Blogger İletişim Formunu Sayfaya Eklemek

Aşağıdaki kodları iletişim sayfanıza HTML bölümüne ekliyoruz. 

<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'> 
    <div class='form'> 
      <form name='contact-form'> 
        <p>İsim<p> 
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> 
        <p>E-Posta *</p> 
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> 
        <p>Mesaj *</p> 
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> 
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder'/> 
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> 
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> 
      </form> 
    </div> 
  </div> 
</div>

Önizleme yaptığınızda sorun yoksa ve iletişim formu gözüktüyse sayfayı kaydedebilirsiniz.

Blogger Popüler Yayınları Renklendirme

Sitenizi Popüler yayınları ziyaretçilerini dikkatini çekecek şekilde renklendirem istermisiniz?Ozaman doğru yerdesiniz aşağıda vereceyim kodlarla bu mümkün.Demo için sitemizin sağ tarafındakı Popüler Yayınalara bakmanız yeterli :).Bunu yapmanınız için aşağıdakı adımları uygulayın.



Şablon > Htmlyi duzenle >  ve ctrl  f tuslarini ayni anda tiklayarak acilan arama kutusunda   altaki kodu aratiyoruz

]]></b:skin>

ve kodu bulduktan sonra usteki kodu hemen uzerine gelicek sekilde altaki kodu ekliyoruz


#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000


ve sablonu kaydet butonuna tikliyoruz :)

Blogger ilk yazıdan sonra Adsense ekleme

Adsense kuralları uyan blogumuzla adsense kayıt oldukdan sonra gelirlerimiz artırmak için aşağıdakı ayarları yapalım.İlk yazıdan sonra adsense eklemek için bu yolu takip ediyoruz:

1-Blogger şablon ayarlarınıza gelerek aşağıdaki kodu bulun :

  <b:include data='post' name='post'/>

2-bu kodu bulduktan sonra aşağıdaki kodu yukarıdaki kodun hemen altına yapıştırın :

<b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:post.isFirstPost'> 
<div style='border:1px solid #ccc;background:#f9f9f9;margin-bottom:15px;padding:10px;text-align:center'> 
"Kodlarınız buraya gelecek !!!" 
</div> 
</b:if> 
</b:if>

Mavi renkli kısıma kodlarınızı ekleyebilirsiniz.İlk satırdaki kodlar da ekleyeceğiniz gadget ın sadece anasayfada yer almasını sağlayacak.Aynı zamanda div style satırındaki ayarlamaları da kendinize göre değiştirebilirsiniz.

Blogger İzleyiciler Eklentisi

Blogger siteniz hit alamya başladıkdından sonra  "İzleyiciler" eklentisini sitenize giren insanları üye yapa bilirsiniz.Nasılmı yapaçağız?Şimdi Anlatmaya başlıyorum:

İzleyiciler gadgetini blogunuza eklemek için:Şekilde de gördüğünüz kumanda panelinde Yerleşim>Gadget Ekle yolunu takip ediyoruz.

Daha sonra >Diğer Gadget yolunu takip ediyoruz
Ve  + işareti ile sitemize ekliyoruz

Blogger Kayan reklam kodu

Yeni sitemize hit sağladıkdan sonra sitemizle para kazanmaya başlaya biliriz.Bunun için bize reklam şirketleri lazım diyelimki bu şirketlerin birine kayıt oldukdan sonra bize kod verilir.Bu kodları sitemize eklemek için bize aşağıdakı kodlar lazım.Blogger panelinden widget ekle diyoruz ve aşağıdakı kodları ekliyoruz."Reklam Kodu Buraya" yazılan yere ise reklam şirketinden aldığımız kodları ekliyoruz.




Sağdan Kayan Banner Kodu

<STYLE>
#fixed {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; POSITION: fixed; ; POSITION: expression("absolute"); TOP: 10px; ; TOP: expression(eval(document.body.scrollTop)+10); BACKGROUND-COLOR: lightblue
}
</STYLE>

<DIV id=fixed>
REKLAM KODU BURAYA...
</DIV>

Soldan Kayan Banner Kodu:
<STYLE>
#fixed2 {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; RIGHT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; POSITION: fixed; ; POSITION: expression("absolute"); TOP: 10px; ; TOP: expression(eval(document.body.scrollTop)+10); BACKGROUND-COLOR: lightblue
}
</STYLE>

<DIV id=fixed2>
REKLAM KODU BURAYA...
</DIV>

Blogger Resimli Benzer Yazılar Eklentisi

Blogger kullanıcıları için bu yazımda blogger da resimli benzer yazılar bloggera nasıl eklenir onu anlatmaya çalışacağım.Link within ile de benzer yazılar eklentisi yapılabilir.Ama biz daha kullanışlı ve görsel olarak daha güzel görünmesi için link within i kullanmayacağız.Blogger a resimli benzer yazılar eklentisi nasıl yapıldığını adımları izleyerek sizde blogunuza uygulayabilirsiniz


Videoyu yu izleyerek blogunuza nasıl uygulayacağınız öğrenebilirsiniz
https://www.youtube.com/watch?feature=player_embedded&v=OcdL_S_zT80

Blogger resimli benzer yazılar eklentisi nasıl
yapılır?Öncelikle blogger panelimize girip Şablon/html i düzenle ye tıklıyoruz.
Widget şablonlarını genişlet kutucuğunu işaretliyoruz.
Kodlar içerisinde </head>  kodunu buluyoruz ve bu kodun hemen bir üst satırına aşağıdaki kodları ekliyoruz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://i39.tinypic.com/2n67qx5.jpg";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Benzer Yazılar";
</script>
<script src='http://www.weebly.com/uploads/2/2/1/0/2210502/related-posts.js' type='text/javascript'/>
</b:if>

Sonraki adımda blogger kodları içerisinde :

<div class='post-footer-line post-footer-line-1'>

kodunu buluyoruz.Bu kodun da hemen alt satırına aşağıdaki kodları yerleştiriyoruz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

</b:if></b:if>

kaynak: http://ugurturkoglu.blogspot.com/2013/01/blogger-benzer-yazlar-kullanclar-icin.html