Float Blogger Teması

Yeni bir orjinal tema paylaşımı ile karşınızdayım.Bu temanbın ismi ise Float.Blogcuların kullandıüı temalar birbrine o kadar benziyor ki böyle usta tasarımcıarın elinden çıkan orjinal bir tema ile karşılaştıımda çok hoşuma gidiyor ve paylaşma ihtiyacı duyuyorum.

 

Demo – Download

 

Üstteki yatay menüyü düzenlemek için şanblondan şu kodlrı bulun:

 

<ul class='menu' id='menu-menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Styling</a></li>
<li><a href='#'>Drop-down</a>
<ul class='sub-menu'>
<li><a href='#'>News</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Some Link</a></li>
</ul>
</li>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Contact</a></li>
</ul>

 

Menüdeki her bir öğeyi şu şekilde düzenleyeceksiniz:

 

<li><a href='Açılacak link'>Öğenin adı</a></li>

 

Düzenlemeniz gereken diğer bir yer ise sosyal butonlar.Bunun için şablondan aşağıdaki kodları bulun:

 

<ul>
<li><a href='#' id='dribbble'>Dribbble</a></li>
<li><a href='http://facebook.com' id='facebook'>Facebook</a></li>
<li><a href='#' id='flickr'>Flickr</a></li>
<li><a href='http://twitter.com' id='twitter'>Twitter</a></li>
<li><a href='#' id='google'>Google+</a></li>
<li><a href='#' id='tumblr'>Tumblr</a></li>
<li><a href='#' id='pinterest'>Pinterest</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' id='rss'>RSS</a></li>
</ul>

 

Her bir sosyal ağın önündei # işareti yerine o sosyal ağa ait adresinizi yazın.Örneğin:

 

<li><a href='http://twitter.com/bloghocam' id='twitter'>Twitter</a></li> gibi

 

Eğer listedeki sosyal ağlar arasında hesabınız olmayanlar varsa o satırı tamamen silebilirsiniz.

Slayt Manşet [ JavaScript Versiyonu ]

Çok kişi istediği için daha önce kullandığım Featutured Content Slider isimli slayt manşet eklentisini paylaşmıştım.Paylaştığım o eklentide Jquery kullanıldığı için blogu yavaşlatıyordu.Kullananlar da bundan şikayetçiydi.

 

Daha hızlı  ve daha patik bir slayt çin çözümler ararken asdece JavaScript kullanılarak oluşturulmuş bu pluginle karşılaştım.Özelliklerini ve kağnağını görmek için buraya tıklayabilirsiniz.

 

 

Bu slaytı blogunuza eklemek için Blogger kumanda panelinde tasarım ayarlarından sayfa öğeleri ( yerleşim ) bölümünü açın ve Üst Bilginin altındaki gadget ekleme yerine HTL/JavaScript gadget olarak aşağıdaki kodları ekleyin.

 

<style type="text/css">

#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjvhTRRyGH7diWe0FuvgtXELS14PnJQz3lJEDq0VlNb8YRmJmirGG-XAAjilj0MvkTu7DoqY41UIe8uwuby3Ft8wywGUfZsrTePUsZcPcWaUF0aYFlAFIFN3cXpufDA56aUtYjpKR-Esw/s109/ribbon-ozellikli.png) no-repeat;
z-index: 7;
}

#slider {
width: 500px;
height: 218px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBw7q_Z2PYKtDsGyfrd7xUxjo3FaKdxKdBrd8PDppfmvMlDZeCVYC76dj0iIPzhcyoHPbMZXuYZ6AQLUNC_yWO20LaDwEgAgAEZLHz9ykg_UVQz8gGTbEEEFRqICPU5a5Spg76O4PpJgw/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 250px;
left: 190px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDGLrztBJ5ugFY8BMmLQSG6JCTY-_wsQLB6TCjyNp1CVInqUhA-h6w5HHHpuQsfixugfCIqCE1Hh5YY5v-zQysNthLBLgc9jYEzNTFvyuuP05ap8bIQ2cprRQI0JlD4f1TIyloqixwGE/s22/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0 -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>

<script src="http://yourjavascript.com/19641174312/bloghocam-slayt.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7kRcdrQS9ggIi7r_9nmir7v2d9zYJCHkQGAOqxETPCOUg2BgO-GXRyUr6gUr5W-x-tvfO8Mds07xg6G-x5c_dXDs0NUHekzfF3cHpJfdEU1UbuP_hyphenhyphenkJeK3Oq33zxGUmGyj_bHvgqmec/s1600/bloghocama-misafir-olmanin-faydalari.jpg'" alt="blog hocam'a Misafir Olmanın Faydaları"/></a>

<a href="http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhnbDAxgOqtyLW068z6xtx9_0rViQh47Lu0xqixOgwn6JMhvMeKfCeSiys1fRXOAST11MbpWg7QULbzNttTk1Ui1itpn-inpGYIVsvbGbm_05g2PnFo7bVAs7xKtc_SDzZE5YGp56-W3g/s576/misafir-blogculuk.png'" alt="misafir blogculuk"/></a>

<a href="http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDXcO3oIhQ6n42zQ1UNZoOC0iqauonteZdttsQwxQCsnOeyzqjBH5y1qkp0VFlC5a8d8I5fj4pC-aiKJKtPH1n7D5GJn6uR8DEph0BcUcCAvpI8WZX87NE3myjCuurLuYyywkeTk9aEU_/'" alt="başarılı blogcuların özellikleri"/></a>

<a href="http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGr4rORIzVMsd7B8gGMv7ATwzv6Ac7t59SseooVSDKMQaVilT9_3Gtgz2izt03AXsyjbFgRfGThR1wRRXJIAgNXEHJntIAidwc6KQEEW0WYifTtKhZU2DRdbiemnwVsh36kB5l0zU4UEa/'" alt="bir blogcunun sahip olması gereken 5 temel beceri"/></a>

                </div></div>

 

Slaytta gösterilecek öğelerin kodlarını şu şekilde düzenleyeceksiniz:

 

<a href="Resme tıklayınca açılacak asyfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>

Kullandığım E-Posta Aboneliği Eklentisi

Blogumun kenar çubuğunda gördüğünüz e-posta aboneliği kutusu ilk yaptığm günden beri çok beğenildi ve çok kişi tarafından istendi.Sanırım bu eklentiyi siznle paylaşmanın zamanı geldi.

 

Tasarımı ve kodları bana ait olan bu eklentiyi blogunuzda kullanmak isterseniz değiştirmeniz gereken yerleri değiştirdikten sonra kodları HTML/Java Script gadget olarak eklemeniz yeterli.

 

<style>
#subscribe {
  float:right;
  width:258px;
  padding:10px;
  margin:0 0 20px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBqPcbeDUlyskF2uBcsj1aAbKhnfyorphnN_7tSCr7y2FLHcc432ukNg-Q-24CrBzx8YxV149zClfmiDjr-LMbMGZp_1wJtpk53YFP4EiGTU1bxCc7TbM9ktssSE5hA1sOjC2K-4WAFoAR/s266/e-posta.png)  no-repeat 0px 0px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
  height:auto;
border:1px solid #656E75;
color:#000;
font-weight:bold;

}

#subscribe h {
font-size:12px;
color:#F1921A;
}

.feed {
  width:260px;
  min-height:60px;
  margin:0 0 10px 0;
  padding:0;
}
.input{
  margin:10px 7px 0 0;
  float: left;
  width: 175px;
  padding: 4px 5px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
border:1px solid #656E75
}

.sbutton {
  background:#F1921A;
  margin:10px 0 0;
  float: left;
  height:26px;
  border: 1px solid #656E75;
  color: #fff;
  width:65px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.sbutton:hover {
  background:#E6E7E8;
color:#669900;
}
</style>
<div id='subscribe'>
<div class='feed'>
         <br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloghocam&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}' onfocus='if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;;}' type='text' value='E-Mail Adresiniz...'/>
<input name='uri' type='hidden' value='bloghocam'/><input name='loc' type='hidden' value='en_US'/><input class='sbutton' type='submit' value='Abone Ol'/></form>
       </div>
       <div>
       Blog Hocam&#39;da yayınlanacak yeni yazılar e-mail adresinize gelsin.
       </div></div>

 

Değiştirmeniz gereken yerleri kırmızı renkle gösterdim.

• bloghocam yerine kendi FeedBurner ID’nizi yazın.
• Blog Hocam&#39;da yayınlanacak yeni yazılar e-mail adresinize gelsin.
  yerine kutunun altında olmasını istediğini yazıyı yazın.

Son olarak bu eklentiyi kendi blogum için hazırladığımdan dolayı genişlikler sizin temanıza uygun olmayabilir.Bu durumda genişlikleri düşürmek yetmez.Arkaplan olarak kullandığım resmi de değiştirmeniz gerekebilir.

Ο τυφώνας Σαόλα πλησιάζει τις βόρειες περιοχές της Ταϊβάν. 

Στην Α.Τ.Ε. να δεις

Pinterest “Pin It” Butonu

Bazılarına göre Pinterest balonu sönmüş gibi durabilir ama ben, kendim kullanmasam da Pintrerest’in sağlam bir kullanıcı kitlesi olduğunu gözlemliyorum.Önümüzdeki bir kaç gün içinde sosyal paylaşım butonlarım arasına Pin It butonuna ekleyeceğim ama bu kez bir deişiklik yapıp kullanmaya başlamadan önce paylaşayım dedim.

 

 

Öncelikle kodu nereye ekleyeceğinizden bahsedeyim.Ben sosyal paylaşım butonlarını yazının sonuna yerleşirmenin daha doğru olduğunu düşündüğüm için size de şablonunuzdaki <div class='post-footer'> kodunun hemen altına eklemenizi öneririm.Eklemeniz gereken kodlar ise şunlar:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</b:if>

 

Buton kayıt sayfasının içine girdiğinide gözükecektir.Butona basınca eğer yazıda bir görsel varsa o görsel otomatik olarak tanınacak ve pinterest hesabınızla bağlantı kurularak seçmiş olduğunuz bir panoya pinlenecektir.