teknoloji haberleri - internet haberleri

Birbirinden güzel temalar ve faydalı eklentiler yapan Harish, yine çok şık bir eklenti yapmış.Harish’in yaptığı bu eklenti ile blogunuzda yapılan son yorumları, yorumu yazanın avatarı gözükecek şekilde, blogunuzun kenar çubuğunda gösterebiliyorsunuz.

Resimli son yorumlar eklentisini blogunuza eklemek için aşağıdaki kodları HTML/JavaScript olarak eklemeniz yeterli.

<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.w2b_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
 
.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
 
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
 
.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}
 
.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 10,
showAvatar  = true,
avatarSize  = 40,
roundAvatar = true,
 characters  = 40,
showMorelink = false,
moreLinktext = "Git »",
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/60346665/bloghocam-resimli-son-yorumlar.js"></script>
<script type="text/javascript" src="http://bloghocam.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>

Düzenlemeniz gereken yerler şu şekilde:

</head>

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 140;
img_thumb_width = 140;
</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){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");

if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="http://1.bp.blogspot.com/-gL37DI0AlJY/TjmThr0YhVI/AAAAAAAAAjY/y601RxVhXw8/s000/2nrklth.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}

if(img.length>=1) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>  

<data:post.body/>

<!-- eklentileri.blogspot.com thumbnail devamını oku başlangıcı -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku...</a>
</b:if>
</b:if>
<!-- eklentileri.blogspot.com thumbnail devamını oku bitişi -->

Çoğumuzun eviminde veya ofisinde mantar pano vardır.Küçük raptiyeler kullanarak aldığımız kısa notları mantar panolara tuttururuz.Buna benzer benzer br uygulamayı bloglarınızda nasıl kullanacağınızı anlatamak istiyorum bu yazıda.

Blogunuzda resimde gördüğünüz not kağıtlarını 2 şekilde kullanabilirsiniz.Birincisi yazınızın içerisinde yazı ile ilgili önemli bir hatırlatma vs yapmak istediğinizde, ikincisi ise kenar çubuğunda ziyaretilerinize yine bir hatırlatma, duyuru vs yapmak istediğinizde.

Bu not kağıtlarını blogunuzda kullanmak için önce şablonunuzdan ]]></b:skin> kodunu bulun ve üstüne aşağıdaki stil kodlarını ekleyin.

.not {
padding: 0 20px 20px 20px;
border: 1px solid #DDD;
border-top: none;
border-left: none;
width: 160px;
min-height:150px;
float: right;
margin: 15px 0 15px 15px;
background-color: yellow;
font-size:14px;
font-style:italic;
line-height:1.5em;
color: #000;
}
.not div{
background: url(https://lh4.googleusercontent.com/-AEcWYy7Nx5k/T4VIYLgmChI/AAAAAAAACsk/3QDUFKoz6s8/s47/pin.png) no-repeat;
width: 47px;
height: 41px;
margin: -20px auto 10px auto;
}

Şimdi blogunuzda yeni bir kayıt oluşturmak için yazı editörünü açın ve HTML’yi Düzenle kısmına şu aşağıdaki kodları ekleyin.

<div class="not">
<div>
</div>
Bu not Serdar Kara tarafından Blog Hocam okuyucuları için yazılmıştır.
</div>

Kırmızı renkte olan yer not kağıdında gözükecek kısımdır.Not kağıdında gözükmesini istediğiniz yazıyı oraya yazın.

Denediğinizde sizin de farkedeceğiniz şey not kağıdınız sağ tarafa yaslanmış olması.Notları yazının kendisinden ayırmak için böyle bir stil kullanımış.Not kağıdını kenar çubuğuna eklemek isterseniz sağa yaslanması kötü duracağı için ilk verdiğim kodlardaki float: right; satırını silebilirsiniz.

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

<b:if cond='data:blog.homepageUrl
!= data:blog.url'>

<b:if cond='data:blog.pageType != "item"'>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

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

</b:if>

<b:else/>

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

</b:if>

</head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
text-transform:none;
padding-left:5px;
}
#related-posts li {
list-style:none;
}
#related-posts h2{
font-size: 18px;
font-weight: bold;
color: #003300;
}
#related-posts a{
font-size: 16px;
color:#868686;
}
#related-posts a:hover{
color:black;
}
a.hidden img{
filter:alpha(opacity=70);
-moz-opacity: 0.5;
opacity: 0.5;
}
 a.hidden:hover img{
filter:alpha(opacity=100);
 -moz-opacity: 1.0;
 opacity: 1.0;}

</style>
<script src='http://yourjavascript.com/1124875421/benzer.js' type='text/javascript'/>
</b:if>

<data:post.body/>

<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;BENZER YAZILAR&quot;;
removeRelatedDuplicates_thumbs(); 
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

TTNET’in “Yeteneğe Destek, Yaratıcı Ekonomiye Destek Projesi”yle, gençlerimiz yeni kariyer firsatlarını keşfediyor.

Bilişim sektörüyle tanışan gençler, aldıkları eğitimlerle iş hayatına hazırlanıyor. TTNET, Türk ekonomisine destek oluyor. Siz de bu ücretsiz eğitimler hakkında bilgi almak için hemen tıklayın.

Bir bumads advertorial içeriğidir.

</head>

<style type="text/css">body, a, a:hover {cursor: url(http://LİNK), progress;}</style>

Hemen her blog yazarı ve blog okuyucusunun bir Facebook ve Twitter hesabı var.Bu yüzden yazılarınızın altında en azından bu sosyal ağlara ait butonların yer aldığı bir kutu göstermek yazılarınızın paylaşım sayısını ve takipçi sayınızı arttıracaktır.

Bu yazıda paylaştığım kodları blogunuza eklediğinizde yazılarınızın altında, resimde gördüğünüz gibi bir paylaşım kutusu çıkacak.Kutuda Facebook beğen ve gönder butonları ile Twitter tweetle ve takip et butonları var.

Bu Facebook ve Twitter paylaşım kutusunu blogunuza eklemek için şablonunuzda <div class='post-footer'> kodunu bulun ve bunun hemen altına aşağıdaki kodları ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style=' height:80px; width:500px;  background:rgb(232, 240, 249); border: 1px solid rgb(171, 210, 233); padding: 10px; margin: 10px 0pt 10p 0px;'>
<p style='color: rgb(59, 89, 152); margin: 5px 0pt 5px; font: bold 1.3em helvetica,arial,verdana;'>Bu yazıyı beğendiğiniz mi? Paylaşın!</p>
<div id='fb-root'/><script src='http://connect.facebook.net/tr_TR/all.js#xfbml=1'/><fb:like send='true' show_faces='false' width='450'/>

<a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweetle</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/><a class='twitter-follow-button' data-lang='tr' data-show-count='false' href='https://twitter.com/bloghocam'>Takip Et</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div>
</b:if>

Kırmızı renkle yazdığım bloghocam yerine kendi Twitter ID’nizi yazmayı unutmayın.Bu eklentiye alternatif olarak şunları da deneyebilirsiniz:

• Yazı Sonuna E-Posta Abonelik Kutusu Ekleme
• Yazının Altına E-Posta Abonelik Formu Ekleme
• “Bu Yazıyı Beğendiniz Mi?” Eklentisi

Ziyaretçilerinizin, yazılarınızı Google+ hesaplarında paylaşmalarını sağlayacak olan resmi paylaş butonu kullanıma açıldı.Hemen blogunuza nasıl ekleyeceğinizi anlatayım.

1.Adım: Öncelikle Script kodlarını ekleyin.Şablonunuzda </head> kodunu bulun ve bunun hemen üzerine aşağıda ki kodları ekleyin.

<script type="text/javascript">
  window.___gcfg = {lang: 'tr', parsetags: 'onload'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

2.Adım: Şimdi butonu görüntüleyecek kodu ekleyin.Nerede görüntülenmesini istiyorsanız oraya ekleyeceksiniz.Örneğin yazının altında gözükmesini istiyorsanız <div class='post-footer'> kodunu bulun ve buınun hemen altına aşağıdaki kodu ekleyin.

 

<div class="g-plus" data-action="share" data-annotation="bubble"></div>

Paylaş butonunu farklı tarz ve boyutlarda da kullanabilirsiniz.Bunun için Google+ paylaş butonunun resmi sayfasına gidip istediğiniz tarzda ki butonu oluşturabilirsiniz.

<table cellpadding="10" cellspacing="10"><tbody>
<tr><td align="justify" valign="top" width="320">Deneme Yazısı Sol Tarafı</td><td align="justify" valign="top" width="300">Deneme Yazısı Sağ Tarafı</td></tr>
</tbody></table>

Blogger’ın bir süre önce dişli yorumlara geçtiğini ve yorumlara yanıtlama seçeneğinin geldiğini çok iyi biliyorsunuz.Birçok Blogger kullanıcısı bu dişli yorumların görünümünü beğenmediği için kullanmayı pek tercih etmiyor.O halde dişli yorumlara biraz stil katıp, daha güzel bir görünüme kavuşturalım.

Yapacağınız 2 küçük değişiklik ile bu resimde gördüğünüz gibi bir yorum bölümüne kavuşacaksınız.Ancak hemen belirteyim, bunu sadece Blogger’ın kendi şablonlarında denediğim için özel şablonlarda işe yarayıp yaramadığından emin değilim.

Öncelikle şablonunuzun ]]></b:skin> kodunun üstüne aşağıdaki stil kodları ekleyin.

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Ardından şablonunudza <b:include data='post' name='comments'/> kodunu aratın.Birden fazla sonuç çıkacaktır.Bunlardan ilkini yani en üsttekini aşağıdaki kodlar değiştirin.

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Şablonunuzu kaydettikten sonra kayıt sayfalarını açtığınızda yorum bölümüneki değişikliği farkedeceksiniz.

</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>

Geçtiğimiz günlerde yazdığım Yeni Arama Tercihleri İle Blogger’da SEO Daha Kolay başlıklı yazıda Blogger’ın sunduğu yeni ayarlardan bahsetmiştim.Bunlardan biri 404 hata sayfalarını özelleştirebilmemizdi.Bir kullanıcı blogunuzda sdaha önce slinmiş bir yazıya ulaşmak istediğinde veya hatalı bir URL yazarak sayfalarınızdan birine ulaşmak istediğinde sayfanın bulunamadığını belirten bir hata sayfası ile karşılaşır.İsterseniz Blogger’ın klasik hata sayfasını aşağıda resimde gördüğünüz şekilde özelleştirebilirsiniz.

1.Adım: Öncelikle şablonunuzun ]]></b:skin> kodundan önce aşağıdaki stil kodlarını ekleyin.

#error {
background-color: #F2F2F2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJokI00Ps0ALE6NBsqun-XLtHlwYW3o4GVMIeHWW6xi5ynP6sA9H53z68Hd9RmWSTEfCdpmuprdHGC0pd34DkXaRZu25dchMU16g76lThlHTIr_3i8rrZQEFGApc4LeggANPfr1YaVrAo/s200/bg_ku.png');
background-repeat: repeat;
color: #555555;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999;
line-height: 170%;
}
#error #halaman {
position: relative;
height: auto !important;
height: 100%;
min-height: 99%;
}
#error #halaman h2 {
margin: 1em 0;
}

#error #wadah {
margin-top: 120px;
}
#error .tengah {
margin: 0 auto;
width: 920px;
}
#error .box-atas, #error .box-bawah {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsSmKGWh4rd_Z_3PJnQ4qcHy0r_LvunVFgLk_UtWudM3f2AwAjc3j_BQoEZTqrd5dV4ocrxfIjPRchECqLfp1bgrwjwaxX8-odQiLK-3VhLAH0MVuRJuFxQs29638Bsjm-VcyZYOmD12TS/s944/box-sprite.png');
background-repeat: repeat;
background-position: 0 0;
height: 43px;
margin: 0 -12px;
width: 944px;
}
#error .box-atas {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsSmKGWh4rd_Z_3PJnQ4qcHy0r_LvunVFgLk_UtWudM3f2AwAjc3j_BQoEZTqrd5dV4ocrxfIjPRchECqLfp1bgrwjwaxX8-odQiLK-3VhLAH0MVuRJuFxQs29638Bsjm-VcyZYOmD12TS/s944/box-sprite.png');
background-repeat: no-repeat;
background-position: 0 -43px;
}
#error .box {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq870OAvVJh-39OpmEayAfwJiACUbVV4meHgM75CHnL4nONbFkis09vWHZjFJVXtlhTI54_nHBLb1bw0oBnfGBDDJHS_PLEHzPNgyiVaDTllKnntygargHVTuvpvuSvq8aHlZoV1yRr7gN/s920/box-horizontal.png');
background-repeat: repeat-y;
background-position: 0 0;
min-height: 200px;
padding: 10px 50px;
}

2.Adım: Şimdi Ayarlar > Arama tercihleri > Sayfa Bulunamadı Sayfası İçin Özel İçerik > Düzenle diyerek kutuya aşağıdaki kodları kendinize göre düzenleyerek ekleyin ve değişiklikleri kaydedin.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

<h1>SAYFA BULUNAMADI !</h1>
<div id="error">
<div id="wadah">
  <div class="tengah">
   <div class="box-atas"></div>
   <div class="box">
    <div id="halaman">
    <p><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4D_k69sRpAQRYq_r895EJ_Up_FvT_cyCRhNi7cGBVvMCu52Bur6qP9M5uN84FGhQJiQ1un-GmulebEYii6B8-DVlMNw-IqZ0Hh2ZH3pp7YTX9OmBbk0MgdmeFbhqZwcX4fiIv_Y1AjehR/s350/4041.jpg" /></p>
     <p>Ulaşmaya çalıştığınız sayfa bulunamadı.Lütfen ulaşmak istediğiniz sayfanın adresini doğru yazdığınızı kontrol edin.Eğer adresi doğru yazdığınızdan eminseniz ulaşmak istediğiniz sayfa silinmiş olabilir.  </p>
     <p> <h2><a href="http://bloghocam.blogspot.com/" title="Blog Hocam" >Ana Sayfa</a></h2></p>
    </div>
   </div>
   <div class="box-bawah"></div>
  </div>
</div>
</div>

</b:if>

Şimdi blogunuzda var olmayan her hangi bir sayfaya gitmye çalışın.Örneğin:

http://blogunuz.blogspot.com/laylaylom.html

Eski hata mesajının yerine tam ekran bir hata mesajı sayfası karşınıa çıkacaktır.Bu yöntemle çok daha yaratıcı hata sayfaları oluşturabilirsiniz.

Hello Bar isimli popüler servis bizlere bloglarımızda kullanmak üzere bilgilendirme çubuğu oluşturma imkanı sunuyor.Ücretli ve ücretsiz seçenekleri bulunan bu servis çoğu blogcu tarafından tercih ediliyor.Neden mi?

• Gradient ekleme özelliği sayesinde aynı renkte fakat farklı desenlerde çubuklar oluşturabiliyorsunuz.
• Diğer çubuklardan farklı olarak kapattıktan sonra tekrar açabiliyorsunuz.
• Kaç kez tıklandığına dair istatistikleri görebiliyorsunuz.

İşte bu özellikleri Hello Bar’ı diğerlerinden farklı ve üstün kılıyor.Şimdi size Hello Bar’ı ücretsiz olarak blogunuza nasıl ekleyeceğinizi anlatmak istiyorum.

1.Adım: Öncelikle ücretsiz üye olmak için Hello Bar ana sayfasına bulunan Free Sign Up butonuna bastığınızda açılan pencerede ki kutuya e-posta adresinizi yazdıktan sonra SIGN UP butonuna basın.

2.Adım: ilk adımı tamamladıktan bir kaç saniye sonra e-posta adresinize Welcome to Hello Bar balıklı bir posta gelecek.Bu postada kullanıcı adınız ve şifreniz yazıyor.Hello Bar Login sayfasına giderek bu bilgilerle hesabınıza giriş yapın.

3.Adım: Hesabınıza giriş yaptıktan sonra Hello Bar’ınızı oluşturmak için CREATE NEW butnuna basın.Settings bölümünden çubuğun ayarlarını yaptıktan sonra SAVE butonuna basın.

4.Adım: Çubuğunuzun ayarlarını yapıp SAVE butonuna bastıktan sonra açılan penceredeki kodu kopyalayın ve şablonunuzun </head> kodundan önce yapıştırın.

Bu paylaştığım üçüncü bilgilendirme çubuğu.Alternatifleri görmek isterseniz daha önce paylaştığım şeffaf kapatılabilir bilgilendirme çubuğuna ve Nedim Arabacı tarafından yapılan Noty bilgilendirme çubuğuna göz atabilirsiniz.

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>




/// Yukarıdaki kod içinde geçen kırmızı true yazısını

Aşağıdaki gibi false olarak değiştiriyoruz ///






<b:widget id='Attribution1' locked='false' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>