Blogger postlarına adsense reklamı eklemek:İlk paragraftan sonra

Bu makalede size nasıl Blogger postlarına adsense reklamını ekleyebileceğiniz anlatacağım.Artık postlarınıza tek tek adsense reklamı yerleştirmeye gerek yok.Size vereceğim kodla adsense reklamı bütün sayfalarınızda gözükecektir.Bu kodun avantajı sadece bir kaç rakamla oynayarak adsense reklamlarınızı yayın içinde aşağı ve yukarı kaydırabilir,sağa,ortaya veya sola yerleştirebilirsiniz.Sadece kod içindeki bir sayıyı değiştirerek istediğiniz paragraftan sonra adsense reklamın gözükmesini sağlayabilirsiniz.Ayrıca unutmayın Blogger postlarına yerleştireceğiniz adsense reklamı ile daha çok para kazanabilirsiniz.Yapılan araştırmalara göre en çok gelir yayın içine yerleştirilen adsense reklamlarından gelmektedir.


Blogger postlarına adsense reklamı nasıl yerleştirilir?


Adım 1:Blogger hesabınıza giriş yapın,sırasıyla Şablon>HTML'yi düzenle kısımlarına tıklayın ve Ctrl+F yardımıyla arama kutusunu açın ve arama kutusuna alttaki kodu yapıştırıp bulun.Alttaki kodtan karşınıza birden fazla kod çıkabilir,siz ikinci kodu seçin.

<data:post.body/>

 Adım 2:Yukarıda bulduğunuz kodun sağ ve soluna kırmızı renkle belirtilen kodları ekleyin.Altta olduğu gibi.Yada alttaki kodu kopyalayıp üstteki kodla değiştirin.

<div id='adsense-target'><data:post.body/></div>

Adım 3:İlk önce buradan adsense reklam kodunuzu dönüştürün.Sonra alttaki kodu adım 2'deki kodun hemen üstüne yapıştırın.Adsense kodunuzu ise alttaki kodta 'ADSENSE KODU YAPIŞTIR' denilen yere yapıştırın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='adsense-content' style="display:block;text-align: center">ADSENSE KODU YAPIŞTIR</div></b:if>

Adım 4:Şablonu kaydette tıklayın.Adsense reklamları şimdi psotlarınızda gözükecektir.Fakat psotların ortasında ve en üst tarafında.Bunları değiştirmek için alttaki adımları takip edin:

Adsense reklamını sağa veya sola kaydırmak 

a-Eğer adsense reklamlarınızın post içinde sol tarafta gözükmesini isterseniz,adım 3'te bulunan <div id='adsense-content' style="display:block;text-align: center">  kodunu alttaki kodla değiştirin:

<div id='adsense-content' style="display: inline-block;float: left;margin:15px 15px 15px 0px">

Değişiklikleri kaydettikten  sonra reklam alttaki resimde olduğu gibi gözükecektir.

b-Eğer adsense reklamının post içinde sol tarafta gözükmesini istiyorsanız,adım 3'te bulunan <div id='adsense-content' style="display:block;text-align: center">  kodunu alttaki kodla değiştirin:

<div id='adsense-content' style="display:inline-block;float:right;margin:15px 0px 15px 15px">

Değişiklikleri kaydettikten sonra adsense reklamı sağ tarafta gözükecektir.

Adsense reklamını post içinde aşağı yukarı doğru kaydırmak 


Yukarıdaki değişiklikleri kaydettikten sonra adsense reklamı genellikle postların en üst tarafında gözükmeye başlar.Bunu aşağı doğru hareket ettirmek için alttaki kodu yukarıda adım 2'de bulunan kodun hemen altına yapıştırın.Adsense reklamını aşağı doğru kaydırmak için kırmızı renkle belirtilen parantez içindeki 0 rakımını  arttırın,rakam artıkça reklam aşağıya kayar.Yukarı doğru tekrar kaydırmak için artırdığınız rakamı azaltın.

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>

Blogger blog postlarınıza kayan sosyal medya butonları ekleyin

Blogger blogunuza ekleyeceğiniz bu sosyal medya butonları mouse ile birlikte aşağı veya yukarı doğru hareket etmektedir.Ayrıca paylaşım sayılarını da gösterir.Bu sosyal medya butonları normal bloglarda veya sitelerde yer alan diğer paylaşım butonlarından farklıdır,mükemmel bir şekilde özelleştirilmiş ve mobil uyumludur.Ekleyeceğiniz bu paylaşım butonları sayesinde ziyaretçileriniz postlarınızı kendi sosyal medya hesaplarında paylaşarak daha fazla ziyaretçi kazanabilirsiniz.

Bu kayan sosyal medya paylaşım bu tonları en üstte toplam paylaşım sayısı,altı sosyal medya butonu,ve butonları gizle seçeneğine sahiptir.

Blogger blogunuza kayan sosyal medya butonlarını nasıl ekleyebilirsiniz?

Adım 1:Her zamanki gibi Blogger hesabınıza giriş yapın ve Şablon kısmına tıklayın.Şablon kısmında HTML'yi düzenle'ye tıklayın.Karşınıza çıkacak HTML kodu içinde Ctrl+F yardımıyla <head> kodunu bulun ve hemen altına alttaki linki kopyalayıp yapıştırın:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>

Eğer şablonunuzda Google Javascript linki yoksa alttaki linki de üstteki linkin altına yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Adım 2:Yine Ctrl+F yardımıyla </head> kodunu bulun  ve alttaki kodu bu kodun hemen üstüne yapıştırın:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
< style type='text/css'>
/*------------------------------------------------------------
Floating Social Share Button Bar Version 2.0
Designed by:: http://www.twistblogger.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome 4.2.0
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.twistBlogger_SocialBar {
position: fixed;
bottom: 30%;
padding: 0;
left:0;
background: none;
text-align: center;
margin: 0 auto;
z-index: 99999999;
}
.twistBlogger_SocialBar label:hover {
cursor: pointer;
opacity:1;
}
.twistBlogger_SocialBar label {
text-align: center;
opacity: 0.4;
width: 50px;
background: #3A3939;
color: #FFF;
border: 0;
font-family: FontAwesome;
display: block;
font-size: 12px;
padding: 0px 0px;
border-radius: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
position: absolute;
line-height: 1.5em;
margin-top: 346px;
}
input.ShowHide_Button:checked + label {
transform-origin: 50% 0%!important;
-webkit-transform-origin: 50% 0%!important;
-moz-transform-origin: 50% 0%!important;
-ms-transform-origin: 50% 0%!important;
-o-transform-origin: 50% 0%!important;
opacity: 1;
-webkit-transform: translateX(0px) rotateY(-180deg);
-moz-transform: translateX(0px) rotateY(-180deg);
-ms-transform: translateX(0px) rotateY(-180deg);
-o-transform: translateX(0px) rotateY(-180deg);
transform: translateX(0px) rotateY(-180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
border: 1px solid #3A3939;
border-radius: 50px 0px 0px 50px;
width: 30px;
max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
-webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
margin-left: -75px !important;
}
input.ShowHide_Button {
display: none;
}
.twistBlogger_SocialBar .social_menu {
display: inline-block;
float: left;
list-style:none;
max-width:50px;
margin: 0;
padding: 0;
}
.twistBlogger_SocialBar .social_menu .button_facebook {
background: #3a579a;
}
.twistBlogger_SocialBar .social_menu .button_facebook:hover {
background: #314a83;
}
.twistBlogger_SocialBar .social_menu .button_twitter {
background: #00abf0;
}
.twistBlogger_SocialBar .social_menu .button_twitter:hover {
background: #0092cc;
}
.twistBlogger_SocialBar .social_menu .button_googleplus {
background: #df4a32;
}
.twistBlogger_SocialBar .social_menu .button_googleplus:hover {
background: #be3f2b;
}
.twistBlogger_SocialBar .social_menu .button_pinterest {
background: #cd1c1f;
}
.twistBlogger_SocialBar .social_menu .button_pinterest:hover {
background: #ae181a;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon {
background: #ea4b24;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon:hover {
background: #c7401f;
}
.twistBlogger_SocialBar .social_menu .button_linkedin {
background: #2554BF;
}
.twistBlogger_SocialBar .social_menu .button_linkedin:hover {
background: #224EB4;
}
.twistBlogger_SocialBar .social_menu .button_facebook .count,
.twistBlogger_SocialBar .social_menu .button_twitter .count,
.twistBlogger_SocialBar .social_menu .button_googleplus .count,
.twistBlogger_SocialBar .social_menu .button_pinterest .count,
.twistBlogger_SocialBar .social_menu .button_stumbleupon .count,
.twistBlogger_SocialBar .social_menu .button_linkedin .count {
color: #fff!important;
padding-top: 4px;
font-size: 13px !important;
line-height: 1.2em;
font-family: sans-serif;
font-weight: bold;
}
.twistBlogger_SocialBar .social_menu > ul {
margin: 0;
padding: 0;
list-style: none;
}
.twistBlogger_SocialBar .social_menu .share {
background: #FFF;
color: #807F7F;
font-size: 11px;
height: 45px !important;
}
.twistBlogger_SocialBar .social_menu .share .count.h4 {
font-size: 18px;
font-family: sans-serif;
color: #424242;
height: 25px !important;
line-height: 1.5em;
font-weight: bold;
margin: 0px !important;
}
.twistBlogger_SocialBar .social_menu .share .h6 {
padding-bottom: 3px;
font-family: sans-serif;
margin: 0px !important;
line-height: 1.5em;
font-size: 11px;
}
.twistBlogger_SocialBar .social_menu > ul > li {
margin: 0px 0px 0px 0px;
position: relative;
text-align: center;
list-style: none;
list-style-type: none;
padding: 0px;
border: 0px;
border-left: 0 solid rgba( 0,0,0,.4);
height: 50px;
width: 50px;
overflow: hidden;
display: block;
box-sizing: border-box;
background: none;
box-sizing: content-box;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px 0px;
cursor: pointer;
text-decoration: none;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover {
border-left: 5px solid rgba( 0,0,0,.3);
width: 40px;
}
.twistBlogger_SocialBar .social_menu > ul > li i {
color: #fff !important;
font-family: FontAwesome;
font-size: 20px;
font-style: normal;
font-weight: normal;
line-height: 1em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover i {
opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.twistBlogger_SocialBar {
bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.twistBlogger_SocialBar {
bottom: 15% !important;
}
}
@media only screen and (max-width:479px) {
.twistBlogger_SocialBar {
bottom: 10% !important;
display: none !important; /*---delete this code line to make it appear on mobile--*/
}
}
< /style>
< /b:if>

Not:Eğer bu kayan sosyal butonların mobil cihazınızdan da gözükmesini istiyorsanız sarı yerle belirtilen kod satırını silin.


Adım 3:Şimdi alttaki kodu Ctrl+F yardımıyla bulun:

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

Adım 5:Adım 4'te bulduğunuz ikinci kodun hemen altına alttaki HTML kodunu yapıştırın:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
< b:if cond='data:blog.pageType != &quot;static_page&quot;'>
< div class='twistBlogger_SocialBar'>
  <input class='ShowHide_Button' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-arrow-left'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
< div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>SHARES</div>
  </div></div>
< ul>
< li class='button_facebook'>
< a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
< div class='share-btn' data-service='facebook'>
        <div class='count'/></div></strong>
< /a>
< /li>
< li class='button_twitter'>
< a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @ - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
< div class='share-btn' data-service='twitter'>
        <div class='count'/></div></strong>
< /a>
< /li>
< li class='button_googleplus'>
< a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
< div class='share-btn' data-service='google'>
        <div class='count'/></div></strong>
< /a>
< /li>
< li class='button_pinterest'>
< a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
< div class='share-btn' data-service='pinterest'>
        <div class='count'/></div></strong>
< /a>
< /li>
< li class='button_stumbleupon'>
< a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
< div class='share-btn' data-service='stumbleupon'>
        <div class='count'/></div></strong>
< /a>
< /li>
< li class='button_linkedin'>
< a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
< div class='share-btn' data-service='linkedin'>
        <div class='count'/></div></strong>
< /a>
< /li>
< /ul>
< /div>
< /div>
< /div>
< script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
< /b:if>
< /b:if>

Eğer istemedğiniz butonları silmek isterseniz <li> ve </li>  kodları arasında yer alan satırları silin.

Adım 6:Şablonu kaydet'e tıklayın.

Herhangi bir problemle karşılaşırsanız yorum yapabilirsiniz.

Blogger'da magazin stili oluşturmak

Magazin şablonları post özetleri,post başlıklarını ve post fotosunu gösterir.Alttaki resimde olduğu gibi en üsteki post alttaki postların iki katı boyutundadır.Bu tür şablonlar bugünlerde çok popülerdir.İster haber ister teknoloji olsun herkesin ışıl ışıl magazin stiline ihtiyacı vardır.

Blogger blogunuza magazin stili eklemenin bir çok yolu vardır.Fakat biz birinci posta yanı en üst posta devamını oku scripti,durum tagı ve farklı stil ekleyerek bunu yapacağız.Böylece bu makale Blogger magazin stilini nasıl oluşturabileceğiniz hakkındadır.Size vereceğim bilgileri takip ederek sıkıcı ve basit Blogger şablonunuzdan kurtulabilirsiniz.

Blogger şablonuna Magazin stili eklemek


Adım 1:Hiçbir şey yapmadan önce eski Blogger şablonunuzu kaydedin.Bunu yapmak için Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>Yedekle/Geri yükle linkine tıklayın.


Adım 2:Blogger şablonunuzun eski xml şablonu yedekledikten sonra Ctrl+F kombinasyonu yardımıyla alttaki kodu bulun:

<data:post.body/>

Adım 3:Yukarıda bulduğunuz kodu alttaki kodla değiştirin.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'></b:if></span>
<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>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Devamını oku &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Adım 4:Şimdi Ctrl+F kombinasyonu yardımıyla alttaki kodu bulmaya çalışın:

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

Adım 5:Adım 4'te bulduğunuz kodu alttaki kodla değiştirin :

<b:if cond='data:post.isFirstPost'><b:if cond='data:blog.homepageUrl == data:blog.url'><div id='first'><b:if cond='data:post.title'><h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h3></b:if><div class='first-body'>
<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script><span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'></b:if></span><span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Devamını oku &#187;</a></span></b:if></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
</div></div><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

Adım 6:</head> kodunu bulun ve hemen üstüne alttaki iki kodu ekleyin:

<script type='text/javascript'>posts_no_thumb_sum = 290;posts_thumb_sum = 240;img_thumb_height = 80;img_thumb_width = 80;first_no_thumb_sum = 580;first_thumb_sum = 450;img_thumb_height1 = 145;img_thumb_width1 = 165;</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");var summ = posts_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = posts_thumb_sum;}
var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
function createSummaryAndThumb1(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = first_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';summ = first_thumb_sum;}
var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary1;}
//]]></script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'><style type='text/css'>.first-post-thumb { margin-right: 10px;}
.summary { height: 100%;}
#first { /* Styles for the First Post Container */ width: auto; height: 250px; float: left; margin-bottom: 10px; background-color: #F4F4F4; /* background color for the first post */ border: 1px solid #E5E5E5; /* border for the first post */}
.first-body { /* Style for the First Post summary */ color: #545454; font-size: 13px; text-align: justify; padding: 5px 10px; line-height: 1.5em;}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/ border-bottom: 2px solid #DFDFDF; color: #515151; font-size: 20px; display: block; margin: 10px auto; width: 95%; font-size: 20px; padding: 0px 0px 4px 0px; font-weight: bold; text-align: left; line-height: 1.4em; background: none;}
#first h3 a:hover { /* Color on mouseover for the First Post Title */ color: #1061A1;}
.post { /* Styles for the small posts container */ float: left; margin: 0px 6px 2% 5px; width: 46%; height: 230px; padding: 0px 5px 5px 5px; background: #FCFCFC; /* background color for the small posts */ border: 1px solid #E5E5E5; /* border for the small posts */ overflow: hidden;}
.posts-thumb { /* Style for the small posts thumbnails */ margin-right: 10px;}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { background: none; border: none; box-shadow: none; padding: 0;}

h3.post-title a{ /* Style for the small posts titles */ font-size: 14px; color: #747474; text-transform: uppercase;}
h2.date-header { /* Hide the post date */ display: none;}
.post-footer { display: none;}
h3.post-title { margin: 0px;}
.readmorebutton { margin-top: 5px;}
.readmorebutton a { /* Styles for the Read More link */ color: #767676; border: 1px solid #E1E1E1; background: #EAEAEA; /* Background color for the Read More link */ text-decoration: none; padding: 3px 5px; font-weight: bold; font-size: 11px; float: right; position: relative;}
.post-comment-link { /* Style for the comment bubble of posts below */ position: absolute; top: -35px; right: -10px; display: block; border: 1px solid #E1E1E1; /* border for the comment bubble */ background: #EAEAEA; /* background color for the comment bubble */ font-size: 11px; position: absolute;}
#first .post-comment-link { /* Style for the comment bubble of first post */ position: absolute; top: 10px; right: 0px;}
.post-comment-link a { /* Link color for the comments bubble*/ padding: 10px; color: #6A6A6A; text-decoration: none; font-weight: bold;}
#blog-pager { clear: both;}</style></b:if></b:if>

Gerekli özelleştirmeler




1-Ana sayfada post görünüşleri ve özetleri ayarlamak için birinci post yanı boyutu büyük olan post için üsteki kodta alttaki kodu bulup değerleri değiştirebilirsiniz.

width: auto;
height: 250px;

2-Eğer ana sayfada diğer postlarınız düzgün gözükmüyorsa üstteki kodta alttaki kodu bulup değerleri ayarlayabilirsiniz.Demek istediğim alttaki kodu bulun ve post boyutlarını ayarlayın,ana sayfada tek sütün gözüküyorsa 46% değerini küçültün.

width: 46%;height: 230px;

Blogger postlarını çerçeve içine almak

Bu makalemde blogger postlarını nasıl çerçeve içine alabileceğinizi anlatacağım.Şablon HTML kodunuza bazı kodları ekleyerek postların etrafına bir sınır koyabilirsiniz.Bunu yapmak oldukça basit ve sadece bir kaç kod satırını HTML'ye eklemektir.Bu çerçeve içinde yer alan alanın rengini değiştirebilirsiniz.Postlarınızı çerçeve içine koyarak blogunuza iyi bir görünüm kazandırabilirsiniz.

Bunun bir örneği alttaki resimde gösterilmiştir.


                      





Blogger postlarınızı çerçeve içine yerleştirmek için alttaki adımları takip edin:


Adım 1:Sırasıyla Şablon>HTML'yi düzenle linklerine tıklayın.




Adım 2:Ctrl+F kombinasyonunu kullanarak alttaki kodu bulun:

]]></b:skin>

Adım 3:Yukarıda bulduğunuz kodun hemen üstüne alttaki kodu yapıştırın.

.post{border:1px solid #E5E5E2;border-style:solid;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;background:#ffffff;margin:.1em 0 .5em;padding:0px 8px 0px 8px}

Adım 4:Şablonu kaydet' tıklayın.



Gerekli özelleştirmeler




1-Çerçeve rengini değiştirmek için sarı renkle belirtilen #E5E5E2 değerleri değiştirin.




2-Köşe eğrilerini değiştirmek isterseniz kırmızı renkle belirtilen 10px değerini istediğiniz sayıya ayarlayabilirsiniz.




3-Post arkaplan rengini değiştirmek için yeşil renkle belirtilen #ffffff değerlerini değiştirin.




4-Çerçeve yanı sınır kalınlığını değiştirmek için turuncu renkle belirtilen 1px değerini değiştirin.

Scroll barı,Jscrollplane ile özelleştirmek

Jscrollplane bir jQuery Script'tir.Scroll bar'ı özelleştirmenize izin verir.Scrollbar'ı CSS kodları ile de özelleştirebiliriz fakat bazı problemlerle karşılaşabiliriz.Eğer CSS kodları ile Scroll bar'ı özelleştirirsek bunu bazı tarayıcılarda görmeyebiliriz.Yanı sadece Chrome ve Safari'de görürüz onun için bunu Jscrollplane ile özelleştirmenizi tavsiye ediyorum.Scroll bar'ınıza yeni bir görünüm katmak ve bütün tarayıcılarda çalışmasını sağlamak için alttaki adımları takip edin:


               



Adım 1:Şablon HTML'koduna gidin ve CTRL+F kombinasyonu yardımıyla bu </head> kodu bulun ve bu kodun hemen üstüne alttaki kodu yapıştırın:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<style>.jspContainer {overflow: hidden;position: relative;}.jspPane {position: absolute;}.jspVerticalBar {position: absolute;top: 0;right: 0;width: 16px;height: 100%;background: #ccc;}.jspHorizontalBar {position: absolute;bottom: 0;left: 0;width: 100%;height: 16px;background: #ccc;}.jspVerticalBar *,.jspHorizontalBar * {margin: 0;padding: 0;}.jspCap {display: none;}.jspHorizontalBar .jspCap {float: left;}
.jspTrack {background: #fff; /* background color of the bar */position: relative;}.jspDrag {background: #CC0000; /* Color of the scrollbar */position: relative;top: 0;left: 0;cursor: pointer;}.jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag {float: left;height: 100%;}.jspArrow {background: #888; /* The color of the scrollbar limits */text-indent: -20000px;display: block;cursor: pointer;}.jspArrow.jspDisabled {cursor: default;background: #333; /* Color of the limits when the srollbar is reaching them */}.jspVerticalBar .jspArrow {height: 16px;}.jspHorizontalBar .jspArrow {width: 16px;float: left;height: 100%;}.jspVerticalBar .jspArrow:focus {outline: none;}.jspCorner {background: #eeeef4;float: left;height: 100%;}* html .jspCorner {margin: 0 -3px 0 0;}html, body {height: 100%;margin: 0;padding: 0;}#blog-container {height: 100%;margin: 0;padding: 0;overflow: auto;}</style><script>//<![CDATA[/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)* Licensed under the MIT License (LICENSE.txt).* Version: 3.1.3*/
(function (factory) {if ( typeof define === 'function' && define.amd ) {define(['jquery'], factory);} else if (typeof exports === 'object') {module.exports = factory;} else {// Browser globalsfactory(jQuery);}}(function ($) {
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];var lowestDelta, lowestDeltaXY;
if ( $.event.fixHooks ) {for ( var i = toFix.length; i; ) {$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;}}
$.event.special.mousewheel = {setup: function() {if ( this.addEventListener ) {for ( var i = toBind.length; i; ) {this.addEventListener( toBind[--i], handler, false );}} else {this.onmousewheel = handler;}},
teardown: function() {if ( this.removeEventListener ) {for ( var i = toBind.length; i; ) {this.removeEventListener( toBind[--i], handler, false );}} else {this.onmousewheel = null;}}};
$.fn.extend({mousewheel: function(fn) {return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");},
unmousewheel: function(fn) {return this.unbind("mousewheel", fn);}});
function handler(event) {var orgEvent = event || window.event,args = [].slice.call(arguments, 1),delta = 0,deltaX = 0,deltaY = 0,absDelta = 0,absDeltaXY = 0,fn;event = $.event.fix(orgEvent);event.type = "mousewheel";if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }if ( orgEvent.detail ) { delta = orgEvent.detail * -1; }if ( orgEvent.deltaY ) {deltaY = orgEvent.deltaY * -1;delta = deltaY;}if ( orgEvent.deltaX ) {deltaX = orgEvent.deltaX;delta = deltaX * -1;}if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }absDelta = Math.abs(delta);if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }fn = delta > 0 ? 'floor' : 'ceil';delta = Math[fn](delta / lowestDelta);deltaX = Math[fn](deltaX / lowestDeltaXY);deltaY = Math[fn](deltaY / lowestDeltaXY);args.unshift(event, delta, deltaX, deltaY);return ($.event.dispatch || $.event.handle).apply(this, args);}}));
/** jScrollPane - v2.0.0beta5 - 2010-09-18* http://jscrollpane.kelvinluck.com/* Copyright (c) 2010 Kelvin Luck* Dual licensed under the MIT and GPL licenses.*/(function(b,a,c){b.fn.jScrollPane=function(f){function d(C,L){var au,N=this,V,ah,v,aj,Q,W,y,q,av,aB,ap,i,H,h,j,X,R,al,U,t,A,am,ac,ak,F,l,ao,at,x,aq,aE,g,aA,ag=true,M=true,aD=false,k=false,Z=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aE=C.css("paddingTop")+" "+C.css("paddingRight")+" "+C.css("paddingBottom")+" "+C.css("paddingLeft");g=(parseInt(C.css("paddingLeft"))||0)+(parseInt(C.css("paddingRight"))||0);an(L);function an(aH){var aL,aK,aJ,aG,aF,aI;au=aH;if(V==c){C.css({overflow:"hidden",padding:0});ah=C.innerWidth()+g;v=C.innerHeight();C.width(ah);V=b('<div class="jspPane" />').wrap(b('<div class="jspContainer" />').css({width:ah+"px",height:v+"px"}));C.wrapInner(V.parent());aj=C.find(">.jspContainer");V=aj.find(">.jspPane");V.css("padding",aE)}else{C.css("width",null);aI=C.outerWidth()+g!=ah||C.outerHeight()!=v;if(aI){ah=C.innerWidth()+g;v=C.innerHeight();aj.css({width:ah+"px",height:v+"px"})}aA=V.innerWidth();if(!aI&&V.outerWidth()==Q&&V.outerHeight()==W){if(aB||av){V.css("width",aA+"px");C.css("width",(aA+g)+"px")}return}V.css("width",null);C.css("width",(ah)+"px");aj.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}aL=V.clone().css("position","absolute");aK=b('<div style="width:1px; position: relative;" />').append(aL);b("body").append(aK);Q=Math.max(V.outerWidth(),aL.outerWidth());aK.remove();W=V.outerHeight();y=Q/ah;q=W/v;av=q>1;aB=y>1;if(!(aB||av)){C.removeClass("jspScrollable");V.css({top:0,width:aj.width()-g});n();D();O();w();af()}else{C.addClass("jspScrollable");aJ=au.maintainPosition&&(H||X);if(aJ){aG=ay();aF=aw()}aC();z();E();if(aJ){K(aG);J(aF)}I();ad();if(au.enableKeyboardNavigation){P()}if(au.clickOnTrack){p()}B();if(au.hijackInternalLinks){m()}}if(au.autoReinitialise&&!aq){aq=setInterval(function(){an(au)},au.autoReinitialiseDelay)}else{if(!au.autoReinitialise&&aq){clearInterval(aq)}}C.trigger("jsp-initialised",[aB||av])}function aC(){if(av){aj.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));R=aj.find(">.jspVerticalBar");al=R.find(">.jspTrack");ap=al.find(">.jspDrag");if(au.showArrows){am=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",az(0,-1)).bind("click.jsp",ax);ac=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",az(0,1)).bind("click.jsp",ax);if(au.arrowScrollOnHover){am.bind("mouseover.jsp",az(0,-1,am));ac.bind("mouseover.jsp",az(0,1,ac))}ai(al,au.verticalArrowPositions,am,ac)}t=v;aj.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});ap.hover(function(){ap.addClass("jspHover")},function(){ap.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});ap.addClass("jspActive");var s=aF.pageY-ap.position().top;b("html").bind("mousemove.jsp",function(aG){S(aG.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});o()}}function o(){al.height(t+"px");H=0;U=au.verticalGutter+al.outerWidth();V.width(ah-U-g);if(R.position().left==0){V.css("margin-left",U+"px")}}function z(){if(aB){aj.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ak=aj.find(">.jspHorizontalBar");F=ak.find(">.jspTrack");h=F.find(">.jspDrag");if(au.showArrows){at=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",az(-1,0)).bind("click.jsp",ax);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",az(1,0)).bind("click.jsp",ax);if(au.arrowScrollOnHover){at.bind("mouseover.jsp",az(-1,0,at));x.bind("mouseover.jsp",az(1,0,x))}ai(F,au.horizontalArrowPositions,at,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});h.addClass("jspActive");var s=aF.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aG){T(aG.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});l=aj.innerWidth();ae()}else{}}function ae(){aj.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});F.width(l+"px");X=0}function E(){if(aB&&av){var aF=F.outerHeight(),s=al.outerWidth();t-=aF;b(ak).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;ah-=aF;F.parent().append(b('<div class="jspCorner" />').css("width",aF+"px"));o();ae()}if(aB){V.width((aj.outerWidth()-g)+"px")}W=V.outerHeight();q=W/v;if(aB){ao=1/y*l;if(ao>au.horizontalDragMaxWidth){ao=au.horizontalDragMaxWidth}else{if(ao<au.horizontalDragMinWidth){ao=au.horizontalDragMinWidth}}h.width(ao+"px");j=l-ao;ab(X)}if(av){A=1/q*t;if(A>au.verticalDragMaxHeight){A=au.verticalDragMaxHeight}else{if(A<au.verticalDragMinHeight){A=au.verticalDragMinHeight}}ap.height(A+"px");i=t-A;aa(H)}}function ai(aG,aI,aF,s){var aK="before",aH="after",aJ;if(aI=="os"){aI=/Mac/.test(navigator.platform)?"after":"split"}if(aI==aK){aH=aI}else{if(aI==aH){aK=aI;aJ=aF;aF=s;s=aJ}}aG[aK](aF)[aH](s)}function az(aF,s,aG){return function(){G(aF,s,this,aG);this.blur();return false}}function G(aH,aF,aK,aJ){aK=b(aK).addClass("jspActive");var aI,s=function(){if(aH!=0){T(X+aH*au.arrowButtonSpeed,false)}if(aF!=0){S(H+aF*au.arrowButtonSpeed,false)}},aG=setInterval(s,au.arrowRepeatFreq);s();aI=aJ==c?"mouseup.jsp":"mouseout.jsp";aJ=aJ||b("html");aJ.bind(aI,function(){aK.removeClass("jspActive");clearInterval(aG);aJ.unbind(aI)})}function p(){w();if(av){al.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageY-aI.top;if(H+A<aJ){S(H+au.trackClickSpeed)}else{if(aJ<H){S(H-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}if(aB){F.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageX-aI.left;if(X+ao<aJ){T(X+au.trackClickSpeed)}else{if(aJ<X){T(X-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}}function w(){F&&F.unbind("mousedown.jsp");al&&al.unbind("mousedown.jsp")}function ar(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");ap&&ap.removeClass("jspActive");h&&h.removeClass("jspActive")}function S(s,aF){if(!av){return}if(s<0){s=0}else{if(s>i){s=i}}if(aF==c){aF=au.animateScroll}if(aF){N.animate(ap,"top",s,aa)}else{ap.css("top",s);aa(s)}}function aa(aF){if(aF==c){aF=ap.position().top}aj.scrollTop(0);H=aF;var aI=H==0,aG=H==i,aH=aF/i,s=-aH*(W-v);if(ag!=aI||aD!=aG){ag=aI;aD=aG;C.trigger("jsp-arrow-change",[ag,aD,M,k])}u(aI,aG);V.css("top",s);C.trigger("jsp-scroll-y",[-s,aI,aG])}function T(aF,s){if(!aB){return}if(aF<0){aF=0}else{if(aF>j){aF=j}}if(s==c){s=au.animateScroll}if(s){N.animate(h,"left",aF,ab)}else{h.css("left",aF);ab(aF)}}function ab(aF){if(aF==c){aF=h.position().left}aj.scrollTop(0);X=aF;var aI=X==0,aH=X==j,aG=aF/j,s=-aG*(Q-ah);if(M!=aI||k!=aH){M=aI;k=aH;C.trigger("jsp-arrow-change",[ag,aD,M,k])}r(aI,aH);V.css("left",s);C.trigger("jsp-scroll-x",[-s,aI,aH])}function u(aF,s){if(au.showArrows){am[aF?"addClass":"removeClass"]("jspDisabled");ac[s?"addClass":"removeClass"]("jspDisabled")}}function r(aF,s){if(au.showArrows){at[aF?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function J(s,aF){var aG=s/(W-v);S(aG*i,aF)}function K(aF,s){var aG=aF/(Q-ah);T(aG*j,s)}function Y(aN,aL,aF){var aJ,aH,s=0,aG,aK,aM;try{aJ=b(aN)}catch(aI){return}aH=aJ.outerHeight();aj.scrollTop(0);while(!aJ.is(".jspPane")){s+=aJ.position().top;aJ=aJ.offsetParent();if(/^body|html$/i.test(aJ[0].nodeName)){return}}aG=aw();aK=aG+v;if(s<aG||aL){aM=s-au.verticalGutter}else{if(s+aH>aK){aM=s-v+aH+au.verticalGutter}}if(aM){J(aM,aF)}}function ay(){return -V.position().left}function aw(){return -V.position().top}function ad(){aj.unbind(Z).bind(Z,function(aI,aJ,aH,aF){var aG=X,s=H;T(X+aH*au.mouseWheelSpeed,false);S(H-aF*au.mouseWheelSpeed,false);return aG==X&&s==H})}function n(){aj.unbind(Z)}function ax(){return false}function I(){V.unbind("focusin.jsp").bind("focusin.jsp",function(s){if(s.target===V[0]){return}Y(s.target,false)})}function D(){V.unbind("focusin.jsp")}function P(){var aF,s;C.attr("tabindex",0).unbind("keydown.jsp").bind("keydown.jsp",function(aJ){if(aJ.target!==C[0]){return}var aH=X,aG=H,aI=aF?2:16;switch(aJ.keyCode){case 40:S(H+aI,false);break;case 38:S(H-aI,false);break;case 34:case 32:J(aw()+Math.max(32,v)-16);break;case 33:J(aw()-v+16);break;case 35:J(W-v);break;case 36:J(0);break;case 39:T(X+aI,false);break;case 37:T(X-aI,false);break}if(!(aH==X&&aG==H)){aF=true;clearTimeout(s);s=setTimeout(function(){aF=false},260);return false}});if(au.hideFocus){C.css("outline","none");if("hideFocus" in aj[0]){C.attr("hideFocus",true)}}else{C.css("outline","");if("hideFocus" in aj[0]){C.attr("hideFocus",false)}}}function O(){C.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp")}function B(){if(location.hash&&location.hash.length>1){var aG,aF;try{aG=b(location.hash)}catch(s){return}if(aG.length&&V.find(aG)){if(aj.scrollTop()==0){aF=setInterval(function(){if(aj.scrollTop()>0){Y(location.hash,true);b(document).scrollTop(aj.position().top);clearInterval(aF)}},50)}else{Y(location.hash,true);b(document).scrollTop(aj.position().top)}}}}function af(){b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack")}function m(){af();b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack",function(){var s=this.href.split("#"),aF;if(s.length>1){aF=s[1];if(aF.length>0&&V.find("#"+aF).length>0){Y("#"+aF,true);return false}}})}b.extend(N,{reinitialise:function(aF){aF=b.extend({},aF,au);an(aF)},scrollToElement:function(aG,aF,s){Y(aG,aF,s)},scrollTo:function(aG,s,aF){K(aG,aF);J(s,aF)},scrollToX:function(aF,s){K(aF,s)},scrollToY:function(s,aF){J(s,aF)},scrollBy:function(aF,s,aG){N.scrollByX(aF,aG);N.scrollByY(s,aG)},scrollByX:function(s,aG){var aF=ay()+s,aH=aF/(Q-ah);T(aH*j,aG)},scrollByY:function(s,aG){var aF=aw()+s,aH=aF/(W-v);S(aH*i,aG)},animate:function(aF,aI,s,aH){var aG={};aG[aI]=s;aF.animate(aG,{duration:au.animateDuration,ease:au.animateEase,queue:false,step:aH})},getContentPositionX:function(){return ay()},getContentPositionY:function(){return aw()},getIsScrollableH:function(){return aB},getIsScrollableV:function(){return av},getContentPane:function(){return V},scrollToBottom:function(s){S(i,s)},hijackInternalLinks:function(){m()}})}f=b.extend({},b.fn.jScrollPane.defaults,f);var e;this.each(function(){var g=b(this),h=g.data("jsp");if(h){h.reinitialise(f)}else{h=new d(g,f);g.data("jsp",h)}e=e?e.add(g):g});return e};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:10,arrowButtonSpeed:10,arrowRepeatFreq:100,arrowScrollOnHover:false,trackClickSpeed:30,trackClickRepeatFreq:100,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false}})(jQuery,this);//]]></script>
<script>$(document).ready(function() {$('.scroll-pane').jScrollPane({showArrows: true});});</script>

Adım 2:Şimdi <body> kodunu veya bu satırı <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> bulun ve altına alttaki kodu ekleyin:

<div class='scroll-pane' id='blog-container'>

Adım 3:Son olarak </body> kodunu bulun ve üstüne </div> tagını ekleyin.


Gerekli özelleştirmeler:

-Yukarıdaki kutuda yeşil renkle belirtilen yerde scrollbar'ın rengini değiştirebilirsiniz.

-Eğer srollbar'a alt ve üst limitler eklemek isterseniz kırmızı yerle belirtilen yeri silin.

Blog arkaplanına foto galeri ekleyin

Önceki makalemde blog arkaplanına nasıl foto ekleyebileceğinizi ve bu fotonun ekranı yanı monitörü tamamen kaplaması için ne yapmanız gerektiği anlatmıştım.Bu makalemde blog arkaplanına nasıl foto galeri ekleyebileceğinizi anlatacağım.Arkaplanınıza koyacağınız bu galeri sırasıyla farklı resimleri gösterir ve ekrana,monitöre göre otomatik olarak küçülür ve büyür.


               



Eğer bununla ilgili bir örnek görmek isterseniz buraya tıklayabilirsiniz.

Blogunuzun arkaplanına foto galeri eklemek isterseniz aşağıdaki adımları takip edin:

Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>HTML'yi düzenle'ye tıklayın.

Adım 2:HTML kodu içinde herhangi bir alana tıklayarak CTRL+F yardımıyla alttaki kodu bulun:

</head>

Adım 3:Yukarıda bulduğunuz kodun hemen üstüne alttaki kodu ekleyin:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><script>//<![CDATA[/** jQuery Backstretch* Version 1.2.8* http://srobbin.com/jquery-plugins/jquery-backstretch/* Add a dynamically-resized background image to the page* Copyright (c) 2012 Scott Robbin (srobbin.com)* Licensed under the MIT license* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt*/;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body
#backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);//]]></script>

<script>//<![CDATA[var images = [ "Image URL", "Image URL", "Image URL", "Image URL", "Image URL", ]; $(images).each(function(){ $('<img/>')[0].src = this; }); var index = 0;$.backstretch(images[index], {speed: 1000}); var slideshow = setInterval(function() { index = (index >= images.length - 1) ? 0 : index + 1; $.backstretch(images[index]); }, 5000);//]]></script>

-Yeşil renkle belirtilen Image URL resim url'leridir.Eklemek istediğiniz resim url'lerini buraya yapıştırabilirsiniz.

-Resimler arkaplanda belli bir sıraya göre gözükecektir eğer rastgele gözükmesini isterseniz Adım 3'teki kodun ikinci kısmını alttaki kodla değiştirin:

<script>//<![CDATA[var images=new Array();images[ 1 ]="Image URL";images[ 2 ]="Image URL";images[ 3 ]="Image URL";images[ 4 ]="Image URL";images[ 5 ]="Image URL";
Array.prototype.shuffle = function() { var len = this.length; var i = len; while (i--) { var p = parseInt(Math.random()*len); var t = this[i]; this[i] = this[p]; this[p] = t; }};
images.shuffle(); $(images).each(function(){ $('<img/>')[0].src = this; }); var index = 0;$.backstretch(images[index], {speed: 1000}); var slideshow = setInterval(function() { index = (index >= images.length - 1) ? 0 : index + 1; $.backstretch(images[index]); }, 5000);//]]></script>

-Kırmızı renkle belirtilen 5000 sayısı resimlerin değişim hızını gösterir.Bunu değiştirebilirsiniz.

-Eğer daha fazla foto eklemek isterseniz yeşil renkle belirtilen satıları çoğaltabilirsiniz.Mesela yukarıdaki koda bir tane resim daha eklemek için bu kodu images[ 6 ]="Image URL"; yukarıdaki images[ 5 ]="Image URL"; kodun hemen altına ekleyin.

Bu slaytların avantajı ekleyeceğiniz resimlerin ekranınıza göre otomatik olarak ayarlanmasıdır.

Blogunuza bütün ekranı kaplayan arkaplan fotosu ekleyin

Sık sorulan sorulardan bir tanesi de 'bütün ekranı kaplayan fotonun blog arkaplanına nasıl eklenebilir? '.Arkaplana eklediğimiz fotoları kendi ekranımıza veya monitöre göre ayarladığımızda başka kişi kendi bilgisayarında blogunuza girdiği zaman arkaplan fotosunu kendi ekranına göre küçük veya büyük olarak görebilir.Bugün bunun üstesinde nasıl gelebileceğimizi konuşacağım.


                 



Bunu iki farklı yolla çözüme kavuşturabiliriz,birincisi CSS3,ikincisi ise jQuery kullanmaktır.


1-CSS3

CSS3 ile blogunuzu aşırı kodlardan veya scriptlerden kurtabilirsiniz.Ama bu yol sadece modern tarayıcılar için çalışır.Yanı İnternet Explorer'ın bazı eski tarayıcılarında çalışmaz yanı bu tarayıcılarda arkaplan fotosunu göremezsiniz ama bu tarayıcının 9 ve üstü için çalışıyor.Diğer tarayıcılarda düzgün çalışıyor.

Bu yolla arkaplan fotosunu eklemek için Blog şablonunuzda alttaki background kodu bulun:

body {background: url(URL of the image) no-repeat center center fixed;background-size: cover;margin:0;}

Not:Bu kodu daha kolay bulmak için CTRL+F tuşlarına basın ve sağ üstte çıkacak kutuya body { kodunu yazıp Enter'a tıklayın.


URL of the image yazan yere eklemek istediğiniz resim URL'sini yapıştırın.




2- jQuery




Bu metodun avantajı ekleyeceğimiz kodun bütün tarayıcılarda çlaışmasıdır,IE7 ve üstü de buna dahildir.Eğer jQuery kullanıyorsanız blogunuzun yüklenme hızı hakkında şüpheye düşmeyin,çünkü bu eklenti oldukça küçüktür.


Bu metodla arkaplan fotosunu eklemek için Şablon>HTML'yi düzenle'ye tıklayın ve CTRL+F kombinasyonu yardımıyla </head> kodunu bulup hemen üstüne alttaki kodu yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[/** jQuery Backstretch* Version 1.2.8* http://srobbin.com/jquery-plugins/jquery-backstretch/* Add a dynamically-resized background image to the page* Copyright (c) 2012 Scott Robbin (srobbin.com)* Licensed under the MIT license* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt*/;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);//]]></script><script>$.backstretch("URL of the image");</script>

URL of the image yazan yere eklemek istediğiniz resmin URL'sini ekleyin.


Gördüğünüz gibi her iki metodun da artı ve eksi yönleri olmasına rağmen uygulanması oldukça kolaydır.Her ikiside aynı sonucu verir yanı arkaplan fotonuzu ekrana veya monitöre göre ayarlar.

Blogunuza Youtube video galeri ekleyin

Bu makalede blogunuza nasıl Youtube video listesi ve Youtube galeri ekleyebileceğinizi öğreneceksiniz.Bu listeye Youtube favori videolarınızı veya ziyaretçilerinizle paylaşmak istediğiniz herhangi bir video ekleyebilirsiniz.CSS kodları ile oynayarak bunu blogunuza istediğiniz herhangi bir yere koyabilirsiniz.Alttaki resimde Youtube video listesinin örneği gösterilmiştir:


             


Blogunuza Youtube video listesi eklemek için alttaki adımları takip edin:

Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>HTML'yi düzenle'ye tıklayın.

Adım 2:HTML kodu içinde herhangi bir yere tıklayın ve CTRL+F kombinasyonu yardımıyla alttaki kodu bulun:

</head>

Adım 3:Yukarıda bulduğunuz kodun hemen üstüne alttaki iki kodu ekleyin:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/><script>//<![CDATA[/*hoverscroll v.0.2.4*/(function($) {$.fn.hoverscroll = function(params) {if (!params) { params = {}; }params = $.extend({}, $.fn.hoverscroll.params, params);this.each(function() {var $this = $(this);if (params.debug) {$.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);}if (params.fixedArrows) {$this.wrap('<div class="fixed-listcontainer"></div>')}else {$this.wrap('<div class="listcontainer"></div>');}
$this.addClass('list');var listctnr = $this.parent();listctnr.wrap('<div class="ui-widget-content hoverscroll' +(params.rtl && !params.vertical ? " rtl" : "") + '"></div>');//listctnr.wrap('<div class="hoverscroll"></div>');
var ctnr = listctnr.parent();
var leftArrow, rightArrow, topArrow, bottomArrow;if (params.arrows) {if (!params.vertical) {if (params.fixedArrows) {leftArrow = '<div class="fixed-arrow left"></div>';rightArrow = '<div class="fixed-arrow right"></div>';
listctnr.before(leftArrow).after(rightArrow);}else {leftArrow = '<div class="arrow left"></div>';rightArrow = '<div class="arrow right"></div>';
listctnr.append(leftArrow).append(rightArrow);}}else {if (params.fixedArrows) {topArrow = '<div class="fixed-arrow top"></div>';bottomArrow = '<div class="fixed-arrow bottom"></div>';
listctnr.before(topArrow).after(bottomArrow);}else {topArrow = '<div class="arrow top"></div>';bottomArrow = '<div class="arrow bottom"></div>';
listctnr.append(topArrow).append(bottomArrow);}}}ctnr.width(params.width).height(params.height);
if (params.arrows && params.fixedArrows) {if (params.vertical) {topArrow = listctnr.prev();bottomArrow = listctnr.next();
listctnr.width(params.width).height(params.height - (topArrow.height() + bottomArrow.height()));}else {leftArrow = listctnr.prev();rightArrow = listctnr.next();
listctnr.height(params.height).width(params.width - (leftArrow.width() + rightArrow.width()));}}else {listctnr.width(params.width).height(params.height);}
var size = 0;
if (!params.vertical) {ctnr.addClass('horizontal');$this.children().each(function() {$(this).addClass('item');
if ($(this).outerWidth) {size += $(this).outerWidth(true);}else {size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))+ parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));}});$this.width(size);
if (params.debug) {$.log('[HoverScroll] Computed content width : ' + size + 'px');}if (ctnr.outerWidth) {size = ctnr.outerWidth();}else {size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right'))+ parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));}
if (params.debug) {$.log('[HoverScroll] Computed container width : ' + size + 'px');}}else {ctnr.addClass('vertical');$this.children().each(function() {$(this).addClass('item')
if ($(this).outerHeight) {size += $(this).outerHeight(true);}else {size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'))+ parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));}});$this.height(size);
if (params.debug) {$.log('[HoverScroll] Computed content height : ' + size + 'px');}if (ctnr.outerHeight) {size = ctnr.outerHeight();}else {size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom'))+ parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));}
if (params.debug) {$.log('[HoverScroll] Computed container height : ' + size + 'px');}}var zone = {1: {action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 16},2: {action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 8},3: {action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 4},4: {action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 2},5: {action: 'stop', from: 0.4 * size, to: 0.6 * size},6: {action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 2},7: {action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 4},8: {action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 8},9: {action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 16}}
ctnr[0].isChanging = false;ctnr[0].direction = 0;ctnr[0].speed = 1;function checkMouse(x, y) {x = x - ctnr.offset().left;y = y - ctnr.offset().top;
var pos;if (!params.vertical) {pos = x;}else {pos = y;}
for (i in zone) {if (pos >= zone[i].from && pos < zone[i].to) {if (zone[i].action == 'move') {startMoving(zone[i].direction, zone[i].speed);}else {stopMoving();}}}}
function setArrowOpacity() {if (!params.arrows || params.fixedArrows) {return;}
var maxScroll;var scroll;
if (!params.vertical) {maxScroll = listctnr[0].scrollWidth - listctnr.width();scroll = listctnr[0].scrollLeft;}else {maxScroll = listctnr[0].scrollHeight - listctnr.height();scroll = listctnr[0].scrollTop;}var limit = params.arrowsOpacity;var opacity = (scroll / maxScroll) * limit;
if (opacity > limit) { opacity = limit; }if (isNaN(opacity)) { opacity = 0; }
var done = false;if (opacity <= 0) {$('div.arrow.left, div.arrow.top', ctnr).hide();if(maxScroll > 0) {$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);}done = true;}if (opacity >= limit || maxScroll <= 0) {$('div.arrow.right, div.arrow.bottom', ctnr).hide();done = true;}
if (!done) {$('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));}}
function startMoving(direction, speed) {if (ctnr[0].direction != direction) {if (params.debug) {$.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);}
stopMoving();ctnr[0].direction = direction;ctnr[0].isChanging = true;move();}if (ctnr[0].speed != speed) {if (params.debug) {$.log('[HoverScroll] Changed speed: ' + speed);}
ctnr[0].speed = speed;}}
function stopMoving() {if (ctnr[0].isChanging) {if (params.debug) {$.log('[HoverScroll] Stoped moving');}
ctnr[0].isChanging = false;ctnr[0].direction = 0;ctnr[0].speed = 1;clearTimeout(ctnr[0].timer);}}
function move() {if (ctnr[0].isChanging == false) {return;}
setArrowOpacity();
var scrollSide;if (!params.vertical) {scrollSide = 'scrollLeft';}else {scrollSide = 'scrollTop';}
listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;ctnr[0].timer = setTimeout(function() {move();}, 50);}
if (params.rtl && !params.vertical) {listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();}
ctnr.mousemove(function(e) {checkMouse(e.pageX, e.pageY);}).bind('mouseleave', function() {stopMoving();});
this.startMoving = startMoving;this.stopMoving = stopMoving;
if (params.arrows && !params.fixedArrows) {// Initialise arrow opacitysetArrowOpacity();}else {// Hide arrows$('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();}});
return this;};
if (!$.fn.offset) {$.fn.offset = function() {this.left = this.top = 0;
if (this[0] && this[0].offsetParent) {var obj = this[0];do {this.left += obj.offsetLeft;this.top += obj.offsetTop;} while (obj = obj.offsetParent);}
return this;}}
$.fn.hoverscroll.params = {vertical: false,width: 400,height: 50,arrows: true,arrowsOpacity: 0.7,fixedArrows: false,rtl: false,debug: false};$.log = function() {try {console.log.apply(console, arguments);}catch (e) {try {opera.postError.apply(opera, arguments);}catch (e) {}}};})(jQuery);
$(function(){$("#videoslider-tabs a").click(function(){var container = $("#videoslider-content");container.html("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZvZqHbWXSPqFLcP9HhuNdz63gXrpeEzM820e2EDGG2aF4CCEYpSDz_c6Rv0wJFXCBizRPxFWBpfNTFGUK4z5OplawXJVsDEjAKJhtmSK4J8YBf5q8JhyphenhyphenQS2xmo79a2y5ICZn59bubXcPx/s1600/loading.png' class='loading-vid' />");var id = $(this).attr("href").slice(1);loadvideo(id);return false;});$("#videoslider-tabs").hoverscroll({vertical:true,width:300,height:330,arrows:false});$("#videoslider-tabs li").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});loadvideo();});
function loadvideo (hash){if(hash){hash = hash.slice(3);$("#videoslider-content").html(video[hash]);$("#videoslider-tabs li").removeClass("actVid");$("#videoslider-tabs a[href=#vid"+hash+"]").parent().addClass("actVid");}else{$("#videoslider-content").html(video[1]);$("#videoslider-tabs li").removeClass("actVid");$("#videoslider-tabs a[href=#vid1]").parent().addClass("actVid");}}//]]></script><style>#videoslider {background:#F6F6F6; /* Background color */clear:both;margin:0 auto;padding:5px;width:735px;border-radius: 5px;border: 1px solid #C1C1C1;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#videoslider, #videoslider-content, #videoslider-tabs {height:340px;}#videoslider-content {color:#fff;float:left;text-align:center;width:430px;z-index:1;}.loading-vid {display:block;margin:165px auto 0;}#videoslider-tabs {float:right;width:240px;margin:0;}#videoslider-tabs li {background-color:#F6F6F6;border: 1px solid #C1C1C1;float:left;height:60px;padding:5px;width:240px;list-style:none;overflow: hidden;}#videoslider-tabs li a {padding:0 !important;border:0 !important;}#videoslider-tabs li.hover {background-color:#EBEBEB;}#videoslider-tabs li.actVid {background:#555;}#videoslider-tabs li img.thumb-vid {background-color:#EEEEEE;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}#videoslider-tabs li span.vidTit {display:block;color:#128EC9; /* Titles color */font-size:12px; /* Titles font size */font-weight:bold;text-decoration:none;}#videoslider-tabs li .vidDesc {display:block;color:#222222; /* Color of the description */font-size:11px; /* Font size of the description */font-weight:bold;text-decoration:none;}#videoslider-tabs a {text-decoration:none;}#videoslider-tabs li.actVid .vidDesc {color:#fff;}#videoslider-tabs li span.vidTit .actVid {color:#fff; /* Titles color */}.ui-widget-content{float:right;overflow-y: scroll;overflow-x: hidden;}.tabs-outer {background-image: none !important;}#videoslider-tabs li a:hover {background: none !important;}</style>

Adım 4:Şablon'u kaydettin ve sol menüde yer alan Yerleşim bölümüne gidiniz.

Adım 5:Yerleşim bölümünde Gadget ekle'ye tıklayın ve açılan sayfada aşağı doğru inip HTML/Javascript seçin.Buraya alttaki kodu yapıştırın.

<script>var video = [];video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_1" frameborder="0" allowfullscreen></iframe>';video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_2" frameborder="0" allowfullscreen></iframe>';video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_3" frameborder="0" allowfullscreen></iframe>';video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_4" frameborder="0" allowfullscreen></iframe>';video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_5" frameborder="0" allowfullscreen></iframe>';</script><div id="videoslider"><div id="videoslider-content"></div><ul id="videoslider-tabs"><li><a href="#vid1"><img src="//i2.ytimg.com/vi/video_ID_1/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Tanımı</span></a></li>
<li><a href="#vid2"><img src="//i2.ytimg.com/vi/video_ID_2/default.jpg" class="thumb-vid" /><span class="vidTit">Video İsmi</span><span class="vidDesc">Video Tanımı</span></a></li>
<li><a href="#vid3"><img src="//i2.ytimg.com/vi/video_ID_3/default.jpg" class="thumb-vid" /><span class="vidTit">Video İsmi</span><span class="vidDesc">Video Video Tanımı</span></a></li>
<li><a href="#vid4"><img src="//i2.ytimg.com/vi/video_ID_4/default.jpg" class="thumb-vid" /><span class="vidTit">Video İsmi</span><span class="vidDesc">Video Tanımı</span></a></li>
<li><a href="#vid5"><img src="//i2.ytimg.com/vi/video_ID_5/default.jpg" class="thumb-vid" /><span class="vidTit">Video İsmi</span><span class="vidDesc">Video Tanımı</span></a></li></ul></div>

Gerekli ayarlar:


-video_ID için Youtube'ta video açın ve adress kısmında ''v='' den sonraki bölümü alıp hem kırmızı hem de turuncu renkle belirtilen yere yapıştırın,alttaki resimde olduğu gibi:




-Yeşil renklerle belirtilen yerlere sırasıyla video ismini ve video hakkında kısa bir açıklama yazın.