Şuan kullandığım temanın eski halini hatırlarsanız yazıların hemen üstünde Jquery oluşturulmuş bir slayt manşet bölümü vardı ve ön plana çıkarmak istediğim yazıları bu mamşete koyuyordum.Ancak sürekli güncellemek zor olduğundan ve içerdiği scriptler nedeniyle blogumuu yavaşlattığını düşündüğümden o slayt manşeti kaldırmıştım.
Kullandığım o slayt manşetin kaynak kodlarını Web Developer Plus isimli bir siteden almıştım ve benden isteyenlere kaynağın adresini veriyordum.Ancak gelen mesajlardan eklentiyi ekleme konusunda çoğu kişinin sorun yaşadığını gördüm ve blogunuza slayt manşet eklentisini nasıl ekleyeceğinizi detaylı bir şekilde anlatmaya karar verdim.
1.Adım: Şablonunuzdan </body> kodunu bulun ve hemen üstüne aşağıdaki script kodlarını ekleyin.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js' type='text/javascript'/><script type='text/javascript'>
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
2.Adım: Şablonunuzdan ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki stil kodlarını ekleyin.
#featured{
float:left;
width:900px;
height:300px;
padding:0;
margin-bottom:30px;
position:relative;
overflow:hidden;
border:3px solid #4494c5;
background:#000;
}#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:610px;
list-style:none;
padding:0;
margin:0;
width:300px;
height:292px;
overflow:auto;
overflow-x:hidden;
z-index:100;
}#featured ul.ui-tabs-nav li{
padding:0 0 0 15px;
}#featured ul.ui-tabs-nav li img{
float:left;
margin:0 5px 0 0;
background:#fff;
padding:3px;
width:70px !important;
height: 57px !important;
}#featured ul.ui-tabs-nav li span{
position:relative;
left:0;
top:13%;
line-height:1.3em;
}#featured li.ui-tabs-nav-item a{
background:#000;
color:#fff;
display:block;
padding:5px;
height:63px;
text-decoration:none;
line-height:1.2em;
outline:none;
width: 300px;
font-family: verdana;}
#featured li.ui-tabs-selected{
background:url(http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/resultset-previous-icon.png) center left no-repeat;
z-index:100;
}#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#4494c5;
color:#FFF;
}#featured .ui-tabs-panel{
width:630px;
height:292px;
position:relative;
padding:0;
margin:0;
z-index:50;
}#featured .ui-tabs-panel img{
width:630px !important;
height:290px !important;
z-index:50;
}#featured .ui-tabs-panel .info{
position:absolute;
padding:5px 20px 5px 20px;
bottom:0;
left:0;
overflow:hidden;
height:63px;
width:610px;
background:#111;
opacity:0.85;
filter:alpha(opacity=85);
.width: 100%; /* IE */
z-index:50;
}#featured .info h3{
font-size:18px;
padding:0;
margin:0;
overflow:hidden;
font-family: Verdana;
font-style: bold;
}#featured .info p{
margin:0;
padding: 5px 20px 5px 0px;
line-height:1.4em;
color:#fff;
}#featured .info a, #featured .info a:visited{
text-decoration:none;
color:#56c0fd;
}#featured .info a:hover{
text-decoration:underline;
}#featured .ui-tabs-hide{
display:none
}
3.Adım: Blogger’ın kendi şablonlarından birini kullanıyorsanız <div class='columns-inner'> kodunun altına, özel bir tema kullanıyorsanız <div id='content-wrapper'> kodunun altına aşağıdaki HTML kodlarını ekleyin.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div id='featured'>
<ul class='ui-tabs-nav'><li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-4'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7kRcdrQS9ggIi7r_9nmir7v2d9zYJCHkQGAOqxETPCOUg2BgO-GXRyUr6gUr5W-x-tvfO8Mds07xg6G-x5c_dXDs0NUHekzfF3cHpJfdEU1UbuP_hyphenhyphenkJeK3Oq33zxGUmGyj_bHvgqmec/s1600/bloghocama-misafir-olmanin-faydalari.jpg' width='80'/><span>Blog Hocam'a Misafir Olmanın Faydaları </span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-3'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhnbDAxgOqtyLW068z6xtx9_0rViQh47Lu0xqixOgwn6JMhvMeKfCeSiys1fRXOAST11MbpWg7QULbzNttTk1Ui1itpn-inpGYIVsvbGbm_05g2PnFo7bVAs7xKtc_SDzZE5YGp56-W3g/s576/misafir-blogculuk.png' width='80'/><span>Misafir Blogculuk E-Kitabı</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-2'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGr4rORIzVMsd7B8gGMv7ATwzv6Ac7t59SseooVSDKMQaVilT9_3Gtgz2izt03AXsyjbFgRfGThR1wRRXJIAgNXEHJntIAidwc6KQEEW0WYifTtKhZU2DRdbiemnwVsh36kB5l0zU4UEa/' width='80'/><span>Bir Blogcunun Sahip Olması Gereken 5 Temel Beceri</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-1'><img alt='testing' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDXcO3oIhQ6n42zQ1UNZoOC0iqauonteZdttsQwxQCsnOeyzqjBH5y1qkp0VFlC5a8d8I5fj4pC-aiKJKtPH1n7D5GJn6uR8DEph0BcUcCAvpI8WZX87NE3myjCuurLuYyywkeTk9aEU_/' width='80'/><span>Başarılı Blogcuların Özellikleri </span></a></li>
</ul><!-- First Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7kRcdrQS9ggIi7r_9nmir7v2d9zYJCHkQGAOqxETPCOUg2BgO-GXRyUr6gUr5W-x-tvfO8Mds07xg6G-x5c_dXDs0NUHekzfF3cHpJfdEU1UbuP_hyphenhyphenkJeK3Oq33zxGUmGyj_bHvgqmec/s1600/bloghocama-misafir-olmanin-faydalari.jpg' width='600'/>
<div class='info'>
<h3><a href='http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html'>Blog Hocam'a Misafir Olmanın Faydaları</a></h3>
<p>Kendi blogum duruken, yazımı neden başka bir blogda yayınlayayım? ve Blog Hocam’a neden misafir olayım? diye soranlara cevaben bir örnek vermek istiyorum...<a href='http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html'>Devamını Oku</a></p>
</div>
</div><!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhnbDAxgOqtyLW068z6xtx9_0rViQh47Lu0xqixOgwn6JMhvMeKfCeSiys1fRXOAST11MbpWg7QULbzNttTk1Ui1itpn-inpGYIVsvbGbm_05g2PnFo7bVAs7xKtc_SDzZE5YGp56-W3g/s576/misafir-blogculuk.png' width='600'/>
<div class='info'>
<h3><a href='http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html'>Misafir Blogculuk E-Kitabı</a></h3>
<p>Bu e-kitap sayesinde misafir blogculuk kavramının daha iyi anlaşılacağını ve daha çok kişi tarafından uygulanacağını umuyorum.Siz de bu kitabı okuyun ve kitabın linkini paylaşın...<a href='http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html'>Devamını Okuyun</a></p>
</div>
</div><!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGr4rORIzVMsd7B8gGMv7ATwzv6Ac7t59SseooVSDKMQaVilT9_3Gtgz2izt03AXsyjbFgRfGThR1wRRXJIAgNXEHJntIAidwc6KQEEW0WYifTtKhZU2DRdbiemnwVsh36kB5l0zU4UEa/' width='600'/>
<div class='info'>
<h3><a href='http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html'>Bir Blogcunun Sahip Olması Gereken 5 Temel Beceri</a></h3>
<p>Bu yazıda blogunuzun uzun ömürlü başarılı ve uzun ömürlü olması için blog oluşturduktan sonra başarıya ulasşmak için bilinmesi gereken bir konudan bahsedeceğim ....<a href='http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html'>Devamını Oku</a></p>
</div>
</div><!-- Fourth Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='testing' height='290' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDXcO3oIhQ6n42zQ1UNZoOC0iqauonteZdttsQwxQCsnOeyzqjBH5y1qkp0VFlC5a8d8I5fj4pC-aiKJKtPH1n7D5GJn6uR8DEph0BcUcCAvpI8WZX87NE3myjCuurLuYyywkeTk9aEU_/' width='600'/>
<div class='info'>
<h3><a href='http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html'>Başarılı Blogcuların Ortak Özellikleri </a></h3>
<p>Dünyaca ünlü ve başarılı blogcuları başarıya götüren bazı alışkanlıkları ...<a href='http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html'>Devamını Oku</a></p>
</div>
</div>
</div>
</b:if>
</b:if>
Sadece 3.adımdaki HTML kodlarında değişiklik yapacaksınız.Örnek olarak manşette gösterilen ilk öğeyi nasıl değiştireceğinizi yazayım diğerlerini aynı şekilde düzenlersiniz.
İletişim formundan bana gelen mesajlardan anladığım kadarıyla blogcular takip etmek istedikleri diğer blogları iki şekilde takip etmeye çalışıyorlar.En çok kullandıkları yöntem Google Friend Connect aracılığıyla bloglara üye olarak yeni yazıları Blogger kumanda panelinden takip etmek.Kullandıkları ikinci yöntem ise blogları sık kullanılanlar listesine ekleyerek ara ara ziyaret ederek yeni bir yazı olup olmadığını kontrol etmek.Takip ettiğiniz blog sayısı arttıkça her iki yöntem de sizi zorlamaya başlar.Gelen mesajlardan da bunu rahatlıkla anlayabiliyorum.Bu sıkıntıları ortadan kaldırmak için, benim gibi onlarca hatta yüzlerce blogu takip eden blogcuların işini çok kolaylaştıracak ve yıllardır kullandığım bir araç olan Google Reader’dan bahsedeceğim.
Google Reader kısaca; blogların RSS beslemelerini algılayarak o blogları takip etmenizi sağlayan ücretsiz bir araçtır.Çalışma prensibi şu şekildedir: Takip etmek istediğiniz blogların tam adreslerini veya RSS adreslerini araca eklersiniz.Eklediğiniz bloglarda yeni bir yazı yayınlandığında o yazı otomatik olarak Google Reader ana sayfasında görüntülenir.Şimdi Google Reader’a ait ekran görüntülerinin de yardımıyla, soru-cevap şeklinde aracı nasıl kullanabileceğinizi anlatmaya çalışacağım.
1. Google Reader’ı kullanmaya nasıl başlayabilirim?
Google Reader kullanmak için ihtiyacınız olan tek şey bir Google yani Gmail hesabıdır.Google Reader ana sayfasını ziyaret edip Google hesabınızla giriş yaptıktan sonra Google Reader kullanıma hazır olacaktır.
2. Takip etmek istediğim blogları Google Reader’a nasıl ekleyebilirim?
Sol taraftaki kırmızı Abone Ol butonuna tıkladığınızda açılan kutudaki satıra blogun tam adresini (http://bloghocam.blogspot.com/) veya RSS adresini (http://feeds.feedburner.com/bloghocam) yazdıktan sonra Ekle butonuna basarak o blogu takip listesine ekleyebilirsiniz.
3. Takip Ettiğim Blogları Konularına Göre Nasıl Kategorilere Ayırabilirim?
Google Reader’ın en sevdiğim özelliklerinden biri abone olduğum blogları kategorilere ayırabilmemdir.Bunun için sol taraftaki Abonelikler bölümüne eklenen blogun ismine tıkladıktan sonra üst taraftaki Yayın Ayarları’na tıklayıp Yeni Klasör seçeneğine tıkladıktan sonra klasöre isim verip blogu o klasörün içine atabılırsiniz.
4. Takip Ettiğim Bloglardaki Yeni Yazılardan Nasıl Haberdar Olabilirim?
Google Reader ana sayfasına giriş yaptığınızda eğer abone listenize eklediğiniz bloglardan birinde yeni bir yazı yayınlanmışsa ana sayfada özet şeklinde gözükür ve yazı başlığına tıklayarak yazının devamına ulaşabilirsiniz.Yazıyı okuduktan sonra okundu olarak işaretlenecek ve ana sayfadan kalkacaktır.
5. Abone Olduğum bir blogu takip listemden nasıl kaldırabilirim?
Sol taraftaki Abonelikler kısmında abone olduğunuz blogların listesi vardır.Oradan aboneliğini iptal etmek istediğiniz blogun ismine tıklayın.Üst taraftan Yayın Ayarlarını açın ve listeden Aboneliği İptal Et seçeneğini seçin.
Başlangıç için bu kadar bilgi yeterlidir sanırım.Basit ve Türkçe arayüze sahip olduğu için diğer özelliklerini kullana kullana kendi başınıza rahatça öğenebilirsiniz.
Yenibiris.com'un yeni uygulaması insankaynaklari.com adaylara Facebook üzerinden profesyonel iş ağı oluşturarak en uygun işi en kısa sürede bulma fırsatı tanıyor!
İnsankaynaklari.com, zaten dahil olduğunuz Facebook’u iş hayatınızda da etkin bir şekilde kullanmanızı sağlayan bir uygulama. İnsankaynaklari.com ile profesyonel iş ağınız genişlerken, ağdaki tüm iş ilanlarına doğrudan ulaşabilir, 'Şimdi Başvur' tuşuyla istediğiniz ilana başvuru yapabilirsiniz. Ve dahası istediğiniz pozisyonların olduğu şirketlere arkadaş listenizden 1 ya da 2. derece bağlantınız varsa bulabilir, gerekli gördüğünüzde bu bağlantıları kullanabilirsiniz.
Ücretsiz olan uygulamada Yenibiris.com ya da Linkedin özgeçmişlerinizi uygulamaya aktararak iş ilanlarını inceleyip başvurularınızı gerçekleştirebilirsiniz. Üstelik profil gizlilik ayarlarını kullanarak özgeçmiş bilgilerinizin ne kadarının gözükeceğine kendiniz karar verebilirsiniz. İnsankaynaklari.com sayesinde bağlantılarınız üzerinden profesyonel profillerinizi zenginleştirebilir, diğer sosyal ağlardaki bağlantılarınızı da davet edebilirsiniz.
Uygulamayı incelemek ve giriş yapmak için Facebook ile bağlan!
Bir bumads advertorial içeriğidir.
Bu yazıda sizlere blogunuzun kenar çubuğuna ekleyebileceğiniz ve ziyartçileri sosyal profillerinize yönlendirebileceğiniz sosyal butonlar paylaşacağım.
Bu sosyal butonlar CSS sprite özelliği kullanılarak oluşturulmuş.Bu ne anlama geliyor? Sosyal ağlara ait ayrı ayrı butonlar kullamnak yerinr hepsi tek bir görselde toplanmış bu sayede sayfa boyutunda düşüş yani açılış hızında artış sağlanmış.
Ayrıca yine CSS sprite ile hover özellği verilmiş.Yani hepsi tek renk olan sosyal ikonların üzerine gelindiğinde renkli hale dönüşüyor ve o sosyal ağa ait tooltip dediğimiz bir açıklama metni çıkıyor.
Sosyal takip butonlarını blogunuza eklemek için öncelikle şablonunuzdan ]]></b:skin> kodunu buşun ve hemen üstüne aşağıdaki kodları ekleyin.
ul#m-soc2{
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;}
ul#m-soc2 li{
list-style: none;margin: 7px;padding: 0;float:left;border: none;}
ul#m-soc2 li a{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC5nut81QyU9cRThaxv-4jHkhfSzFx-TOUgZbVwIBIWAuZqhoKhUcqoyY4yZYps1OQ3iZ48-bRE610lUbnDtp1D0U4CeG0gYCSrnsX-eQxHNM59QtpEaRi2drpdE-68NJA80FksyjM5NAu/s132/sosyal-butonlar.png) no-repeat 0 0;
margin:0;padding:0;display: block;position:relative;
width: 33px;
height: 33px;
overflow: visible;
}
ul#m-soc2 li a.twitter{
background-position: 0 0;
}
ul#m-soc2 li a.facebook{
background-position: -33px 0;
}
ul#m-soc2 li a.google{
background-position: -66px 0;
}
ul#m-soc2 li a.rss{
background-position: -99px 0;
}
ul#m-soc2 li a.twitter:hover{
background-position: 0 -33px;
}
ul#m-soc2 li a.facebook:hover{
background-position: -33px -33px;
}
ul#m-soc2 li a.google:hover {
background-position:-66px -33px;
}
ul#m-soc2 li a.rss:hover{
background-position:-99px -33px;
}
ul#m-soc2 li a span{
background: #555;position:absolute;
top:-10px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
color:#fff;filter:alpha(opacity=0);
white-space:nowrap;border-radius:3px;font-size:12px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;} ul#m-soc2 li a:hover{text-decoration:none}
ul#m-soc2 li a:hover span{
opacity:.7;
filter:alpha(opacity=70);
top:-23px}
Ardından sayfa yerleşimine gidin ve HTML/JavaScript gadet olarak aşağıdaki kodları ekleyin.
<ul id="m-soc2"><li><a class="twitter" href="http://twitter.com/bloghocam"><span>Twitter</span></a></li><li><a class="facebook" href="http://facebook.com/bloghocam"><span>Facebook</span></a></li><li><a class="google" href="https://plus.google.com/108761595756468128383"><span>Google+</span></a></li><li><a class="rss" href="http://feeds.feedburner.com/bloghocam"><span>RSS</span></a></li></ul>
Kodlarda değiştirmeniz gereken yerler:
){kind=link}
){kind=link}