KOD:
<a href="http://ysntasarim.blogspot.com/"><img alt=" YSNTASARIM " border="0" src="http://in.sitekodlari.com/fb/facebook6.png" style="border: 0px; max-width: 97%;" /></a>
SİTE KODLARI etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
SİTE KODLARI etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
KOD:
<a href="http://ysntasarim.blogspot.com/"><img alt=" YSNTASARIM " border="0" src="http://in.sitekodlari.com/fb/facebook6.png" style="border: 0px; max-width: 97%;" /></a>
Blogger Bloglara Birden Fazla Yazar Ekleme
Aşağıdaki adımları takip ederek işlemi kolayca gerçekleştirebilirsiniz.
- Blogger kumanda panelinize gidin.
- Gri Yayın Listesi simgesinin yanındaki açılır menüyü tıklayıp Ayarlar'ı seçin.
- Açılan sayfada resimde de gördüğünüz Blog Yazarları kısmına gelerek + Yazar ekle butonuna tıklayın ve blogunuzda yazmasını istediğiniz yazarın mail adresini girin.
Mail adresini girip Yazar davet et dedikten sonra eklediğiniz adrese aşağıdaki gibi bir davetiye gidecek.
Yazar Daveti kabul et butonuna tıkladıktan sonra işlem tamamdır.
Yazar, davetinizi kabul ettikten sonra blogunuzda yazmaya başlayabilir. Her yazar yalnızca kendi yazdığı makeleyi düzenleme ve silme yetkisine sahiptir. Yetkilerini arttırmak istediğiniz yazarın karşısındaki Yazar seçeneğine tıklayarak Yönetici olarak değiştirebilirsiniz.
Yazar İzinleri Değiştirme
Yazar, davetinizi kabul ettikten sonra blogunuzda yazmaya başlayabilir. Her yazar yalnızca kendi yazdığı makeleyi düzenleme ve silme yetkisine sahiptir. Yetkilerini arttırmak istediğiniz yazarın karşısındaki Yazar seçeneğine tıklayarak Yönetici olarak değiştirebilirsiniz.
SİZE TEK TEK ANLATAYIM DOSTLAR
blogu seçip Şablon ▶ Html'yi düzenle yolunu izleyin.
Daha sonra Ctrl+F komutu ile aşağıdaki kodu bulun.
Yukarıdaki kodu bulduktan sonra hemen altına aşağıdaki kodları ekleyin.DEVAMM
2. koddaki <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'></script> js kodunun temanızda daha önceden olup olmadığını kontrol edin. Eğer varsa silin gereksiz yere blogunuzu yavaşlatmasın. DEVAMMM
blogu seçip Şablon ▶ Html'yi düzenle yolunu izleyin.
Daha sonra Ctrl+F komutu ile aşağıdaki kodu bulun.
</body>
Yukarıdaki kodu bulduktan sonra hemen altına aşağıdaki kodları ekleyin.DEVAMM
<style>
#roket{
background: url('http://2.bp.blogspot.com/-qG_vxxK5Osc/VMTrH8Rzs0I/AAAAAAAARKM/jyttOeZtA0k/s1600/up.png') 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
z-indez:1
}
#roket:hover{
background:url(http://2.bp.blogspot.com/-qG_vxxK5Osc/VMTrH8Rzs0I/AAAAAAAARKM/jyttOeZtA0k/s1600/up.png)no-repeat;
background-position: 0 -142px
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#roket").removeAttr("href");$("#roket").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#roket").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#roket").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<a href='#' id='roket'></a>
2. koddaki <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'></script> js kodunun temanızda daha önceden olup olmadığını kontrol edin. Eğer varsa silin gereksiz yere blogunuzu yavaşlatmasın. DEVAMMM
UAMRIM İŞİNİZE YARAR ŞİMDİDEN BEKLİYORUM YORUMLARINIZI
KURULUM HAKKINDA
Şablon > Html'yi düzenle deyin ve tema kodlarınız arasında Ctrl+F ile aşağıdaki kodu bulun.
</head>Yukarıdaki kodun hemen üzerine aşağıdaki kodları ekleyin.
<script type='text/javascript'>
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 0;
img_thumb_width = 0;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0 10px 5px 0;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img style="background:url() center center no-repeat ;" src="'+img[0].src+'" width="'+img_thumb_width+'200px" height="'+img_thumb_height+'165px"/></a></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Devam edin ve kodlarınız arasında aşağıdaki kodu bulun. Bu koddan temanızda birden fazla bulunabilir, hepsini tek tek deneyerek hangisinde çalıştığını bulabilirsiniz.DENEMEK LAZIM YANİ BİRAZ
<data:post.body/>
Yukarıdaki kodu silin ve yerine aşağıdaki kodları ekleyin. ÇOK GÜZEL GİDİYORSUNUZ DEVAM
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>",
"<data:post.url/>","<data:post.title/>");
</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='devamini-oku'>
<a expr:href='data:post.url'>Devamını oku</a>
</div>
</b:if>
</b:if>
İlk kodu detaylı incelediğinizde kırmızı ile işaretlediğim 4 kısım olduğunu göreceksiniz. Bunların ne işe yaradığını aşağıda anlattım.
summary_noimg = 500; : Yazıda resim olmadığında görülecek karakter sayısı
summary_img = 500; : Yazıda resim olduğunda görülecek karakter sayısı
200px : Resmin uzunluğunu belirler
165px : Resmin yüksekliğini belirler
İŞLEM BİTTİ DENEYİN BAKALIM ŞİMDİ NASIL OLMUŞ BAKIN
Kurulum
- Blogger kumanda paneline gidin
- Eklentiyi kurmak istediğiniz blogun ismine tıklayın
- Sol menüden "Yerleşim" ögesini seçin
- Açılan sayfada eklentiyi kurmak istediğiniz kısımda bulunan "Gadget Ekle" butonuna tıklayın.
- Son olarak ögeler arasından "HTML/Javascript" i seçin ve "İçerik" kısmına kodları yapıştırıp kaydedin.
Resimli rastgele yazılar kodu:
<style>
#rastgele-yazi img{border-radius:5px;float:left;margin-right:5px;width:60px;height:60px;background:#F5F5F5;padding:3px;transition:all .2s linear 0}
#rastgele-yazi img:hover{opacity:.6}
ul#rastgele-yazi{list-style-type:none;padding:0}
#rastgele-yazi a{font-size:12px;font-weight:700;padding:0 auto 5px}
#rastgele-yazi a:hover{text-decoration:none}
.ry-icerik{font-size:11px;background:none;padding:5px;margin-right:8px}
.ry-bilgi{margin-top:5px}
#rastgele-yazi li{margin-bottom:10px;border-bottom:1px solid #EEE;padding:4px}
</style>
<ul id='rastgele-yazi'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=110;
var rdp_info='yes';
var rdp_comment='Yorum';
var rdp_disable='Yoruma kapalı';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcUfvAx9DrdXLDG9tR32t8EyXznWCDj1-vsMNUZBEtk33jdRrqfHISSR2uVjqMDepdd5KG1FT1VnHyYmUuf_AWUuLOW9lX2-RPlJIRC9Wn887D6r6fjlL4OxUkrrrGU1cZRB3O1dyA2lI/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div class="ry-bilgi">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="ry-icerik">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
Instagram widgeti Blogger'a nasıl eklenir?
1. Widgeti oluşturmamızı sağlayan http://snapwidget.com/#getstarted adresine gidelim.
2. Açılan sayfada bilgileri kendinize göre doldurun.
Username: Instagram kullanıcı adınız buraya gelecek.
Hashtag: Özellikle göstermek istediğiniz bir fotoğraf serisi varsa kullanabilirsiniz. Örneğin cmylmz adlı kullanıcının AliBabaVe7Cüceler hashtagli fotoğraflarını listelemek gibi. Eğer bir hesabınız yoksa belli hashtaglere ait fotoğrafları da bu sayede sergileyebilirsiniz.
Widget Type: Eklenti tipini seçmeniz isteniyor. Eğer eklentiyi yan menüde kullanmayı düşünüyorsanız Grid'iseçmenizi öneririm. Onun dışında Board, Scrolling, Slideshow ve Map stili bulunuyor. Kullanmak istediğiniz stile göre özellikler artıp azalıyor. Tüm özellikleri barındırdığı için anlatıma Grid üzerinden devam etmek istiyorum.
Thumbnail Size: Fotoğrafların boyutunu buradan belirleyebilirsiniz. Çok fazla büyütüp insanları rahatsız etmek veya çok küçültüp görülmeyecek hale getirmek yanlış olacağından 125px çok ideal bir boyut gibi duruyor.
Layout: Bu kısımdaki sayıları değiştirerek yan yana ve alt alta kaç adet resim görüntüleneceğini belirleyebilirsiniz. Resim boyutunu ve eklentiyi kullanacağınız alanın ölçülerini hesaba katarak yazmakta fayda var.
Photo Border: Resimlere çerçeve eklensin mi?
Background Color: Resimlerin arkaplan rengini değiştirir.
Photo Padding: Resimler arasındaki ne kadar boşluk olsun?
Hover Effect: Fade In seçeneğinde resimler bir miktar karartılıyor ve mouse ile üzerine gelindiğinde düzeliyor.Fade Out seçeneğinde ise tam tersi olarak resimler net gösterilip mouse ile üzerine gelindiğinde kararıyor.
Share Buttons: Fotoğrafların üzerinde mini paylaşım butonları çıkmasına yarıyor. Kesinlikle kullanılmasını öneriyorum.
Responsive: Bu seçenek özellikle responsive yani uyumlu tasarım kullananların çok işine yarayacak. Çünkü eklenti bu sayede çözünürlüğe göre boyutlanıyor. Responsive tasarım kullanmayan arkadaşların da aktifleştirmelerini öneririm.
Sayfanın altında yer alan gri Preview butonu ile eklentinizin blogunuza eklemeden önce önizlemesini yaparak nasıl durduğunu görebilirsiniz. Yeşil Get Widget butonu ile de size lazım olan kodları elde edebilirsiniz.
kodları blogumda nasıl kullanacağım?
Blog > Yerleşim > Gadget Ekle kısmına gelin. Gadget Ekle bağlantısına tıkladıktan sonra açılan sayfada biraz aşağı inerek HTML/Javascript'i seçin ve kodlarını buraya yapıştırıp kaydedin.
Fotoğraflarınıza özel bir sayfa oluşturmak isterseniz; Sayfalar > Yeni Sayfa > HTML bölümünden halledebilirsiniz.
Alternatif siteler
Genellikle tüm siteler aynı işi yapıyor ancak bir köşede dursun lazım olur diyerek kaydettiğim iki siteyi de sizinle paylaşmak istiyorum.
Instansive: Responsive Instagram Widget sloganıyla yayın yapan site ek olarak bizlere pinterest tarzını sunuyor birden fazla widgeti düzenleyebiliyorsunuz.
Intagme: Snapwidget'in biraz daha yalın hali denilebilir.
Benzer yazılar eklentisi nasıl kurulur?
1. Adım: Panelinizi açın ve Şablon > Html'yi Düzenle kısmına gelin.
2. Adım: CTRL+F komutu ile </head> kodunu aratın ve hemen üzerine aşağıdaki kodları ekleyin.
<b:if cond='data:blog.pageType == "item"'>
<style>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:15px;padding-left:5px}
#related-posts .widget{padding-left:6px;margin-bottom:10px}
#related-posts .widget h3,#related-posts h3{font-size:1.2em;font-family:Tahoma;font-weight:700;color:#000;margin-bottom:.75em;margin-top:0;padding-top:0}
#related-posts a{color:#000}#related-posts a:hover{color:#FC9F4E}
#related-posts ul{font-family:Tahoma;list-style-type:none;margin:0;padding:0;font-size:13px;text-color:#000}
#related-posts ul li{background:url(http://2.bp.blogspot.com/-5zmeLSEoaxY/VVsW9SsYsFI/AAAAAAAABXU/FHEXH8VwM_I/s1600/tick.png) no-repeat 0 3px transparent;display:block;list-style-type:none;margin-bottom:6px;padding:0 0 6px 20px}
</style>
<script type='text/javascript'>var relatedpoststitle="Buna benzer diğer yazılar";</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h3>'+relatedpoststitle+'</h3>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'" title="'+relatedTitles[r]+'" target="_blank">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if>
3. Adım: Devam edin ve yine CTRL+F komut ile <div class='post-footer'> kodunu bulun.
4. Adım: Hemen üzerine aşağıdaki kodları ekleyin. <div class='post-footer'> kodundan temanızda birden fazla bulunabilir, tek tek deneyerek hangisinin uygun olduğunu bulabilirsiniz.
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'></b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script></div></b:if>
var maxresults=5; kısmındaki sayıyı değiştirerek görüntülemek istediğiniz yazı sınırını belirleyebilirsiniz.
Blogger Şablonları SİTELERİ
Sitenize on numara şablonlar mı eklemek istiyorsunuz?
En güncel ve profesyonel şablonları indirip sitenize ekleyebilirsiniz...
YSN TASARIM SUNAR
ÖNERİLEN ŞABLON :
http://btemplates.com/2013/blogger-template-sederhana-2/
Sitenize on numara şablonlar mı eklemek istiyorsunuz?
En güncel ve profesyonel şablonları indirip sitenize ekleyebilirsiniz...
YSN TASARIM SUNAR
ÖNERİLEN ŞABLON :
http://btemplates.com/2013/blogger-template-sederhana-2/
Blogunuza sosyal paylaşım butonları arıyorsanız, bu kod tam size göre! Blogger sitenizde görsel olarak aşırı dikkat çeken bu sosyal paylaşım eklentisi ile blogunuza uğrayan ziyaretçilere yazılarınızı sosyal paylaşım sitelerinde paylaşmasını sağlayabilirsiniz. Sosyal paylaşım butonları sayesinde web sitenize gelen ziyaretçi sayısını arttırabilirsiniz.
Blogger Sosyal Paylaşım Butonları
Sosyal paylaşım butonları yan tarafta ki resimde gördüğünüz gibi oldukça şık bir blogger eklentisidir. Gelelim Siteye eklemeye;
Blogger Yönetici Paneline giriş yapıyoruz
Yerleşim > Gadget ekleye tıklıyoruz.
Açılan pencerede HTML/JavaScript'e tıklıyoruz.
Aşağıda ki kodu alıp açılan sayfaya yapıştırınve işlem tamamdır.
Blogger Sosyal Paylaşım Butonları
Sosyal paylaşım butonları yan tarafta ki resimde gördüğünüz gibi oldukça şık bir blogger eklentisidir. Gelelim Siteye eklemeye;
Blogger Yönetici Paneline giriş yapıyoruz
Yerleşim > Gadget ekleye tıklıyoruz.
Açılan pencerede HTML/JavaScript'e tıklıyoruz.
Aşağıda ki kodu alıp açılan sayfaya yapıştırınve işlem tamamdır.
Kod:
<!--http://blogkaynagi.blogspot.com Blogger Sosyal Paylaşım Eklentisi Başlangıç-->
<div style="background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIdFh5iJQ1rrsdPqcfJwP8tb4N4s3ByUQeDnQf1lCtP-VHtrpNMfMlVYvdYBRR9Gl0D7nKoPRRHNDV1E9C3HTz4yKJOgewWcCQhGPVZY-OeHdMJMYnZEzrynCNohqgrjmvOi33XpP_6sdo/s1600/blogkaynagi+sosyal+eklenti.png) no-repeat; border: 1px solid #4891c1; box-shadow: 0px 0px 4px #888888; height: 250px; overflow: hidden !important; position: relative; width: 300px;">
<div style="left: 215px; position: absolute; top: 32px;">
<g:plusone annotation="none"></g:plusone></div>
<div style="left: 228px; overflow: hidden; position: absolute; top: 112px; width: 60px;">
<div class="fb-like" data-font="arial" data-layout="button_count" data-send="false" data-show-faces="false" data-width="150">
</div>
<div id="fb-root">
</div>
</div>
<script type="text/javascript">
<!-- http://blogkaynagi.blogspot.com Blogger Sosyal Paylaşım Eklentisi Bitiş -->
document.write(unescape('%3C%64%69%76%20%73%74%79%6C%65%3D%22%6C%65%66%74%3A%20%31%33%30%70%78%3B%20%70%6F%73%69%74%69%6F%6E%3A%20%61%62%73%6F%6C%75%74%65%3B%20%74%6F%70%3A%20%31%37%39%70%78%3B%22%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%74%77%69%74%74%65%72%2D%73%68%61%72%65%2D%62%75%74%74%6F%6E%22%20%64%61%74%61%2D%63%6F%75%6E%74%3D%22%6E%6F%6E%65%22%20%64%61%74%61%2D%6C%61%6E%67%3D%22%65%6E%22%20%64%61%74%61%2D%72%65%6C%61%74%65%64%3D%22%62%6C%6F%67%6B%61%79%6E%61%67%69%22%20%64%61%74%61%2D%76%69%61%3D%22%42%6C%6F%67%6B%61%79%6E%61%67%69%22%20%68%72%65%66%3D%22%68%74%74%70%73%3A%2F%2F%74%77%69%74%74%65%72%2E%63%6F%6D%2F%73%68%61%72%65%22%3E%54%77%65%65%74%3C%2F%61%3E%0A%3C%73%63%72%69%70%74%3E%21%66%75%6E%63%74%69%6F%6E%28%64%2C%73%2C%69%64%29%7B%76%61%72%20%6A%73%2C%66%6A%73%3D%64%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%73%29%5B%30%5D%3B%69%66%28%21%64%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%29%7B%6A%73%3D%64%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%73%29%3B%6A%73%2E%69%64%3D%69%64%3B%6A%73%2E%73%72%63%3D%22%2F%2F%70%6C%61%74%66%6F%72%6D%2E%74%77%69%74%74%65%72%2E%63%6F%6D%2F%77%69%64%67%65%74%73%2E%6A%73%22%3B%66%6A%73%2E%70%61%72%65%6E%74%4E%6F%64%65%2E%69%6E%73%65%72%74%42%65%66%6F%72%65%28%6A%73%2C%66%6A%73%29%3B%7D%7D%28%64%6F%63%75%6D%65%6E%74%2C%22%73%63%72%69%70%74%22%2C%22%74%77%69%74%74%65%72%2D%77%6A%73%22%29%3B%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%63%72%69%70%74%3E%28%66%75%6E%63%74%69%6F%6E%28%64%2C%73%2C%69%64%29%7B%76%61%72%20%6A%73%2C%66%6A%73%3D%64%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%73%29%5B%30%5D%3B%69%66%28%64%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%29%72%65%74%75%72%6E%3B%6A%73%3D%64%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%73%29%3B%6A%73%2E%69%64%3D%69%64%3B%6A%73%2E%73%72%63%3D%22%2F%2F%63%6F%6E%6E%65%63%74%2E%66%61%63%65%62%6F%6F%6B%2E%6E%65%74%2F%65%6E%5F%75%73%2F%61%6C%6C%2E%6A%73%23%78%66%62%6D%6C%3D%31%26%61%70%70%49%64%3D%33%35%38%31%36%35%33%39%37%36%31%34%31%39%37%22%3B%66%6A%73%2E%70%61%72%65%6E%74%4E%6F%64%65%2E%69%6E%73%65%72%74%42%65%66%6F%72%65%28%6A%73%2C%66%6A%73%29%7D%28%64%6F%63%75%6D%65%6E%74%2C%27%73%63%72%69%70%74%27%2C%27%66%61%63%65%62%6F%6F%6B%2D%6A%73%73%64%6B%27%29%29%3B%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%74%79%6C%65%3E%2E%67%65%62%65%70%64%3A%68%6F%76%65%72%7B%72%69%67%68%74%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%7D%3C%2F%73%74%79%6C%65%3E%0A%0A%3C%21%2D%2D%68%74%74%70%3A%2F%2F%62%6C%6F%67%6B%61%79%6E%61%67%69%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2D%2D%3E%0A%3C%73%63%72%69%70%74%20%6C%61%6E%67%75%61%67%65%3D%22%4A%61%76%61%73%63%72%69%70%74%22%3E%0A%3C%2F%73%63%72%69%70%74%3E%3C%2F%64%69%76%3E%0A%0A%0A%0A%3C%61%20%73%74%79%6C%65%3D%22%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%62%6F%74%74%6F%6D%3A%30%70%78%3B%72%69%67%68%74%3A%2D%31%30%30%70%78%3B%64%69%73%70%6C%61%79%3A%62%6C%6F%63%6B%3B%6D%61%72%67%69%6E%3A%30%70%78%3B%70%61%64%64%69%6E%67%3A%30%70%78%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%3B%68%65%69%67%68%74%3A%31%38%70%78%3B%77%69%64%74%68%3A%31%32%35%70%78%3B%62%61%63%6B%67%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%75%72%6C%28%27%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%70%48%38%64%74%77%67%31%66%37%67%2F%55%75%6A%50%77%44%73%64%47%72%49%2F%41%41%41%41%41%41%41%41%41%45%41%2F%68%31%52%6A%32%6C%45%36%72%4A%38%2F%73%31%36%30%30%2F%62%6C%6F%67%6B%61%79%6E%61%67%69%2E%70%6E%67%27%29%20%6E%6F%2D%72%65%70%65%61%74%3B%6F%70%61%63%69%74%79%3A%30%2E%35%3B%66%69%6C%74%65%72%3A%61%6C%70%68%61%28%6F%70%61%63%69%74%79%3D%35%30%29%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%62%6C%6F%67%6B%61%79%6E%61%67%69%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2E%74%72%2F%32%30%31%34%2F%30%31%2F%62%6C%6F%67%67%65%72%2D%73%6F%73%79%61%6C%2D%70%61%79%6C%61%73%69%6D%2D%65%6B%6C%65%6E%74%69%73%69%2E%68%74%6D%6C%22%20%63%6C%61%73%73%3D%22%67%65%62%65%70%64%22%3E%3C%2F%61%3E'));
</script></div>
BLOGGER YAZI İÇINE REKLAM EKLEME
Blogger ve ya herhangi bir blog sitesine sahip olup para kazanmaya ilk adım Adsense'yekayıt olmaktan geçer. Tabi ki iş kayıt olmakla bitmeyip sancılı Adsense kabul edilme süreci başlar. En sonunda Google Adsense'ye kabul görüldükten sonra bloga eklemek kalır. Fakat adsense kabul edildikten sonra ki en önemli sorun reklamları nereye yerleştirirsek daha fazla gelir elde edeceğimizdir.
Blogger Yazı içine Adsense Reklamları Ekleme
Blogger adsense reklam eklemek için öncelikle adsense'den aldığımız reklam kodunuConvert etmeniz gerekmektedir. Adsense kodunu convert etmek için google'da “adsense code converter” diye aratırsanız karşınıza bir sürü sonuçlar çıkacaktır. Herhangi bir siteye girip açılan sayfada ki kutucuğa Adsense reklam kodunuzu yapıştırdıktan sonra convertdiyoruz ve adsense reklam kodumuz hazır hale geliyor.
1 ) Blogger Konu İçinde Sol Üst Tarafa Reklam Ekleme
Blogger'da konunun içinde sol üst tarafa reklam eklemek için aşağıda ki adımları izleyeceğiz.
Blogger Yönetici Paneline giriş yapıyoruz.
Şablon > HTML Düzenle'ye giriyoruz.
<div class='post-body'> kodunu aratın ve hemenüstüne aşağıda ki kodlar ile birlikte Convert ettiğinizgoogle adsense reklam kodunu yapıştırın. Google adsense politikalarına uyması açısından yazı ile reklam arasına 5px'lik bir aralık eklendi.
Bazı blogların kodlamaları farklı olduğundan dolayı blogunuz da adsense reklamıgözükmeyebilir. Adsense reklamı sol üst tarafta gözükmeyenler yukarıda ki kodları <div class='post-body entry-content'> aratıp hemen üstüne yapıştırın. Eğer bu da olmazsa <div class='post-header-line-1'/> kodunu aratıp hemen altına reklam kodlarını yapıştırın.
Reklamı konunun içinde sağ üst tarafta göstermek için <div style='float:left'> kodunu <div style='float:right> ile değiştirin.
2 ) Blogger Yazı içinde Alt Tarafa Reklam Ekleme
Google adsense reklam kodumuzu convert ettikten sonra reklamı konu içinde alt tarafa eklemek için aşağıda ki adımları izliyoruz.
Blogger Yönetici Paneline giriş yapıyoruz.
Şablon > HTML Düzenle'ye giriyoruz.
<div class='post-footer'> kodunu aratın ve hemen üstüne aşağıda ki kodlar ile birlikte Convert ettiğiniz google adsense reklam kodunu yapıştırın.
Aynı şekilde temaların kodlamaları farklı olmasından dolayı adsense reklamı blogunuzun alt tarafında gözükmeyebilir. Adsense reklamı yazı içinde alt tarafta gözükmezse <div class='post-footer'> kodunu bir kez daha aratın. Genelde bloglarda bu koddan iki tane bulunur. Diğer bulduğunuz kodun hemen üstüne reklam kodunu yapıştırın.
Blogger da google adsense reklamlarının tıklama oranını arttırmak için en iyi yöntem konu içine reklam yerleştirmektir. Blog temasına uygun şekilde hazırlanmış ve yerleştirilmişreklam daha fazla tıklama getireceğinden, daha fazla para kazandıracaktır.
Detaylı bir şekilde html bilgisine sahip olmayan bloggerlar için blogger'da yazı işine reklam ekleme sorununa bu konumuzda bir son verilecektir.
Blogger Yazı içine Adsense Reklamları Ekleme
Blogger adsense reklam eklemek için öncelikle adsense'den aldığımız reklam kodunuConvert etmeniz gerekmektedir. Adsense kodunu convert etmek için google'da “adsense code converter” diye aratırsanız karşınıza bir sürü sonuçlar çıkacaktır. Herhangi bir siteye girip açılan sayfada ki kutucuğa Adsense reklam kodunuzu yapıştırdıktan sonra convertdiyoruz ve adsense reklam kodumuz hazır hale geliyor.
1 ) Blogger Konu İçinde Sol Üst Tarafa Reklam Ekleme
Blogger'da konunun içinde sol üst tarafa reklam eklemek için aşağıda ki adımları izleyeceğiz.
Blogger Yönetici Paneline giriş yapıyoruz.
Şablon > HTML Düzenle'ye giriyoruz.
<div class='post-body'> kodunu aratın ve hemenüstüne aşağıda ki kodlar ile birlikte Convert ettiğinizgoogle adsense reklam kodunu yapıştırın. Google adsense politikalarına uyması açısından yazı ile reklam arasına 5px'lik bir aralık eklendi.
<b:if cond='data:blog.pageType == "item"'>
<div style='float:left;padding:0px 5px 0px 0px;'>
Convert Edilmiş Gooogle Adsense Reklam Kodu Buraya Gelecek
</div>
</b:if>
Bazı blogların kodlamaları farklı olduğundan dolayı blogunuz da adsense reklamıgözükmeyebilir. Adsense reklamı sol üst tarafta gözükmeyenler yukarıda ki kodları <div class='post-body entry-content'> aratıp hemen üstüne yapıştırın. Eğer bu da olmazsa <div class='post-header-line-1'/> kodunu aratıp hemen altına reklam kodlarını yapıştırın.
Reklamı konunun içinde sağ üst tarafta göstermek için <div style='float:left'> kodunu <div style='float:right> ile değiştirin.
2 ) Blogger Yazı içinde Alt Tarafa Reklam Ekleme
Google adsense reklam kodumuzu convert ettikten sonra reklamı konu içinde alt tarafa eklemek için aşağıda ki adımları izliyoruz.
Blogger Yönetici Paneline giriş yapıyoruz.
Şablon > HTML Düzenle'ye giriyoruz.
<div class='post-footer'> kodunu aratın ve hemen üstüne aşağıda ki kodlar ile birlikte Convert ettiğiniz google adsense reklam kodunu yapıştırın.
<b:if cond='data:blog.pageType == "item"'>
<div align='center'>
Convert Edilmiş Gooogle Adsense Reklam Kodu Buraya Gelecek
</div>
</b:if>
Aynı şekilde temaların kodlamaları farklı olmasından dolayı adsense reklamı blogunuzun alt tarafında gözükmeyebilir. Adsense reklamı yazı içinde alt tarafta gözükmezse <div class='post-footer'> kodunu bir kez daha aratın. Genelde bloglarda bu koddan iki tane bulunur. Diğer bulduğunuz kodun hemen üstüne reklam kodunu yapıştırın.
Renkli Abone ol ve Sosyal Ağ Eklentisi
Blogger'da abone ol eklentisi, blogunuza gelen ziyaretçiler için e-posta abone formu içerir ve blogunuza yeni gelen güncellemeleri e-mail aboneliği üzerinden hızlı ve kolayerişebilmesini sağlar. İnsanlar bloglara kaliteli ve konu ile alakalı özgün, farklı içerikler için gelirler. Eğer kaliteli, özgün içerik yazıyorsanız e-mail aboneliği yaptıran kullanıcı artacak ve blogunuzu daha kısa sürede başarıya ulaştıracaktır.
Blogger Abone Ol Butonu Ekleme
Blogger abone ol eklentisi ve sosyal paylaşım butonları yan tarafta ki resimde gördüğünüz gibi oldukça renkli blogger eklentisidir. Gelelim Siteye eklemeye;
Blogger Yönetici Paneline giriş yapıyoruz
Yerleşim > Gadget ekleye tıklıyoruz.
Açılan pencerede HTML/JavaScript'e tıklıyoruz.
Aşağıda ki kodu alıp açılan sayfaya yapıştırın ve işlem tamamdır.
Eklenti Düzenleme
Eklentide düzeltmeniz gereken yerler MAVİ ile gösterilmiştir. İsterseniz kodun içinden dialogları da değiştirebilirsiniz. Gerekli düzenlemeleri yaptıktan sonra eklenti kullanıma hazır olacaktır.
Blogger'da abone ol eklentisi, blogunuza gelen ziyaretçiler için e-posta abone formu içerir ve blogunuza yeni gelen güncellemeleri e-mail aboneliği üzerinden hızlı ve kolayerişebilmesini sağlar. İnsanlar bloglara kaliteli ve konu ile alakalı özgün, farklı içerikler için gelirler. Eğer kaliteli, özgün içerik yazıyorsanız e-mail aboneliği yaptıran kullanıcı artacak ve blogunuzu daha kısa sürede başarıya ulaştıracaktır.
Blogger abone ol eklentisi ve sosyal paylaşım butonları yan tarafta ki resimde gördüğünüz gibi oldukça renkli blogger eklentisidir. Gelelim Siteye eklemeye;
Blogger Yönetici Paneline giriş yapıyoruz
Yerleşim > Gadget ekleye tıklıyoruz.
Açılan pencerede HTML/JavaScript'e tıklıyoruz.
Aşağıda ki kodu alıp açılan sayfaya yapıştırın ve işlem tamamdır.
<style>.btsubscribe1 {padding: 8px;background-color:#fa6121;background-position:center;background-size:100%;background-repeat:no-repeat;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.btsubscribe2 {padding: 8px;padding-top:0px;background-color:#ffb739;background-position:center;background-size:100%;background-repeat:no-repeat;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;text-align:center;}
.buttonSubHomepage2 { height:24px; width:80px; border:solid; border-color:white; font-family:arial black; font-size:14px; padding-bottom:21px; color:white; background-color:#ffb739; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 25px; -webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 25px; -moz-border-radius-bottomleft: 25px;
border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; } .buttonSubHomepage2:hover { background-color:#EA9500; }</style><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /><div class='btsubscribe1' align="center"><div style='color: #FFFFFF; font-weight: bold; font: 22px Oswald; margin: 0px 0px 10px 15px;'>E-posta Aboneliği</div><div style='color: #FFFFFF; font-weight: bold; font: 16px Calibri, cursive; margin: 0px 0px 10px 15px;'>Blog Kaynagin'da yayınlancak yeni yazılar E-posta adresine gelsin.</div><div style='margin: 10px 0 0 6px;'><!--Subscription Box--><form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Blogkaynagi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'style='margin: 0pt;' target='popupwindow'><input name='uri' type='hidden' value='BlogKaynagi' /><input name='loc' type='hidden' value='en_US' /><input style="height:24px;width:200px;border:solid;border:hidden;border-radius:5px;font-size:12px;" class='btmailbox' name='email' onblur='if (this.value == "") {this.value = "E-mail Adresiniz....";}'onfocus='if (this.value == "E-mail Adresiniz...") {this.value = ""}'type='text' value='E-mail Adresiniz...' /><br/><input class="buttonSubHomepage2" alt='' title='' type='submit' value='Abone Ol'/></form></div></div><div class="btsubscribe2"><div style='color: #FFFFFF; font-weight: bold; font: 22px Oswald; margin: 0px 0px 10px 15px;'>Sosyal Ağlar</div><div style=''><!--Facebook URL--><a href='http://www.facebook.com/' target='_blank' title='Faceebook Beğen'><img src='http://3.bp.blogspot.com/-ChHaXU5VfIE/UJkIg5tptTI/AAAAAAAABEg/kzXjQ2QxEPo/s1600/facebook.png' alt='facebook'/></a><!--Twitter URL--><a href='http://twitter.com/' rel='nofollow' target='_blank'title='Takip et'><img src='http://3.bp.blogspot.com/-aG-POFOiBHc/UJkIkayVTGI/AAAAAAAABE4/hhun4Hjaudw/s1600/twitter.png' alt='twitter'/></a><!--Google+ URL--><a rel="publisher" href='https://plus.google.com/' target='_blank'title='Follow us on Google+'><img src='http://2.bp.blogspot.com/-gxpckVUYzWI/UJkIh5kHQ5I/AAAAAAAABEo/IlR9Bt-FVBE/s1600/googleplus.png' alt='gplus'/></a><!--LinkedIn--><a href='http://linkedin.com/' rel='nofollow' target='_blank'title='Follow us on LinkedIn'><img src='http://1.bp.blogspot.com/-c7m7fLXHewI/UJPaWsVTZ6I/AAAAAAAAA-M/uvdMMglb8fE/s1600/linkedin-circle-2.png' alt='linkedin'/></a><!--RSS URL--><a href='http://feeds.feedburner.com/' rel='nofollow' target='_blank'title='RSS Abone Ol'><img src='http://4.bp.blogspot.com/-aN0dAN4mIno/UJkIje-dmSI/AAAAAAAABEw/gyK0zwpvjdE/s1600/rss.png' alt='rss'/></a><br/></div></div>
Eklenti Düzenleme
Eklentide düzeltmeniz gereken yerler MAVİ ile gösterilmiştir. İsterseniz kodun içinden dialogları da değiştirebilirsiniz. Gerekli düzenlemeleri yaptıktan sonra eklenti kullanıma hazır olacaktır.
Kaydol:
Kayıtlar (Atom)
