29 Haz 2012

15 Yorum

Blogger Dikey Navigation Menü Eklentisi


Blogger Dikey Navigation Menü Eklentisi Widgets

Blogger blogunuzda , üstteki resimde gördüğünüz gibi bir menü eklentisi istermisiniz ?

Bu eklentimizi blogunuzda isterseniz kategori olarak , isterseniz farklı yerlere link vermek için kullanabilirsiniz..

Demo için üstteki resime bakabilir , yada BURAYA tıklayabilirsiniz..

Anlatıma geçelim..
Aşağıdaki kodu bulun
]]></b:skin>
hemen üstüne aşağıdaki kodlarımızı ekleyelim..
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://lh5.googleusercontent.com/_u4rBCfM4eII/TWfkSju3ygI/AAAAAAAABPo/yNNAeIRUPAM/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://lh5.googleusercontent.com/_u4rBCfM4eII/TWfkSju3ygI/AAAAAAAABPo/yNNAeIRUPAM/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
Yukarıdaki işlemi yaptıysanız , Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim..
<div id="menu9"> <ul> <li><a href="#">MENU 1</a></li> 
                      <li><a href="#">MENU 2</a></li> 
                      <li><a href="#">MENU 3</a></li> 
                      <li><a href="#">MENU 4</a></li> 
                      <li><a href="#">MENU 5</a></li> </ul> </div>
Kodlar içinde geçen kırmızı yerlere görünmesini istediğimiz yazıyı , mavi yerlere ise gidilmesi gereken link adresinizi yazınız..


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Dikey Navigation Menü Eklentisi , Blogger Dikey Navigation Menü  , Blogger Menü Eklentisi , Blogger Menü widget , Blogger için menü


By Eklentileri.Blogspot Devamını Oku >>>

14 Haz 2012

32 Yorum

Blogger Resimli Yukarı Kayan Son Yorumlar


Blogger Resimli Yukarı Kayan Son Yorumlar Eklentisi Widget

Bu eklentimizi istek üzerine paylaşıyoruz..

Blogger Resimli Yukarı Kayan Son Yorumlar eklentisi ile , blogger blogunuza son yorum yapan kullanıcıların yorumlarını , aşağıdan yukarı kayacak şekilde blogunuza ekleyebiliyorsunuz..


Anlatıma geçelim hemen..

Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim..
<marquee direction=up scrollamount="2" onmouseover="this.scrollAmount=0" onmouseout="this.scrollAmount=2"><style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#none;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #000000;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 80,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://1.bp.blogspot.com/-s6aUzC7Hicg/TzGbAx77o9I/AAAAAAAABT8/7fEgNHXzMs0/s1600/comment.png",
 hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/211112512416/come.js"></script>
<script type="text/javascript" src="http://eklentileri.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script></marquee>
Yukarıdaki kodlar içinde geçen , kırmızı ile yazılmış ilk satırdaki 2 rakamını değiştirerek  hızı ayarlayabilirsiniz ( iki kez yazılmıştır , ikisinide aynı şekilde değiştirin) , alt satırda bulunan eklentileri.blogspot.com adresi yerinede kendi blog adresinizi yazmanız gerekiyor..


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Resimli Yukarı Kayan Son Yorumlar , Blogger Son Yorumlar Eklentisi , Blogger Resimli Son Yorumlar Widget , Aşağıdan Yukarı Kayan Yorumlar , Blogger Kayan Yorum Ekleme


By Eklentileri.Blogspot Devamını Oku >>>

10 Haz 2012

6 Yorum

Blogger Çılgın Karınca Eklentisi


Blogger Çılgın Karınca Eklentisi Widget

Bugüne kadar bir çok eklenti paylaştık , şimdide gereksiz bir eklenti paylaşalım =)


Bu eklentimizde , blogunuzun bir köşesinde deli dana gibi dolaşan bir karınca ekleyeceğiz , bu eklenti ne işe yarar ; bende bilmiyorum =)

( Şaka bi yana ziyaretçilerinize sanki ekranda bir karınca bir sinek varmış hissi veren bu eklentiyi eklemek için aşağıdaki yolu takip ediniz. )

Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim..
<div style="display:scroll; position:fixed; top:150px; left:20px;"><img border="0" src="http://i1217.photobucket.com/albums/dd381/funywrld/semutfuny.gif" /> </div>
Yapmanız gereken bu kadar , eklentiyi kaldırmak için , yerleşim bölümünden gerekli gadgeti kaldırabilirsiniz..
By Eklentileri.Blogspot Devamını Oku >>>

7 Haz 2012

15 Yorum

Blogger Jquery Son Twitler Eklentisi


Blogger Jquery Son Twitler Eklentisi Widgets


Blogunuzun bir köşesinde , twitter hesabınızdan yazdığınız son yazılarınızı göstermek istermisiniz ?

Jquery ile hazırlanmış , son twitlerim eklentisi ile , twitter yazılarınızı blogger blogunuzdan ziyaretçilerinizle paylaşabilirsiniz..


Hemen anlatıma geçelim..

Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim..
<div id="twitter-ticker"><div id="top-bar"><div id="twitIcon"><img src="http://4.bp.blogspot.com/-UNQrmlioecg/T89yR2reesI/AAAAAAAAB64/324lZ45HRME/s1600/helperblogger.com-twitter.png" width="64" height="64" alt="Twitter icon" /></div><h2 class="tut">Son Yazdıklarım</h2></div><div id="tweet-container"><img id="loading" src="http://1.bp.blogspot.com/-Qo7DSE4VZTc/T89vaCpfmxI/AAAAAAAAB6U/Evm2sfQmx3c/s1600/helperblogger.com-loading.gif" width="16" height="11" alt="Loading.." /></div>
<div id="scroll"></div></div><style>/* CSS Document */h2.tut{/* This is the "MY TWEETS" title */    color: white;font-family: "Myriad Pro", Arial, Helvetica, sans-serif;font-size: 16px;padding: 12px 0 0 58px;text-transform: uppercase;/* The CSS3 text-shadow property */    text-shadow: 2px 1px 6px #333;}#twitter-ticker{/* Styling the ticker */    width: 300px;height: 300px;background: url(http://1.bp.blogspot.com/-83XwuG1aPSs/T89val9XCvI/AAAAAAAAB6c/zpF84wp5Z2E/s1600/helperblogger.com-slickbg.png) no-repeat #f5f5f5;color: #666666;display: none;/* Rounded corners */    -moz-border-radius: 10px 10px 6px 6px;-khtml-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;text-align: left;}#tweet-container{/* This is where the tweets are inserted */    height: 230px;width: auto;overflow: hidden;}#twitIcon{/* Positioning the icon holder absolutely and moving it to the upper-left */    position: absolute;top: -25px;left: -10px;width: 64px;height: 64px;}#top-bar{height: 45px;background: url(http://4.bp.blogspot.com/-1K4Usc2Cnzw/T89vbZU2HwI/AAAAAAAAB6k/7X1p1vDO3zI/s1600/helperblogger.com-top_bar.png) repeat-x;border-bottom: 1px solid white;position: relative;margin-bottom: 8px;/* Rounding the top part of the ticker, works only in Firefox unfortunately */    -moz-border-radius: 6px 6px 0 0;}.tweet{/* Affects the tweets */    padding: 5px;margin: 0 8px 8px;font-family: calibri;border: 1px solid #F0F0F0;background: url(https://lh5.googleusercontent.com/-H0JYmUBH7Yw/T89vb3l6ByI/AAAAAAAAB6s/oNgdub_WqQ8/s1600/helperblogger.com-transparent.png);width: auto;overflow: hidden;}.tweet .avatar, .tweet .user, .tweet .time{float: left;}.tweet .time{text-transform: uppercase;font-size: 10px;color: #AAAAAA;white-space: nowrap;}.tweet .avatar img{width: 36px;height: 36px;border: 2px solid #eeeeee;margin: 0 5px 5px 0;}.tweet .txt{/* Using the text container to clear the floats */    clear: both;}.tweet .user{font-weight: bold;}a, a:visited{/* Styling the links */    color: #00BBFF;text-decoration: none;outline: none;}a:hover{text-decoration: underline;}#loading{/* The loading gif animation */    margin: 100px 95px;}.jScrollPaneContainer{position: relative;overflow: hidden;z-index: 1;}.jScrollPaneTrack{position: absolute;cursor: pointer;right: 4px;top: 0;height: 100%;background: #ddd;}.jScrollPaneDrag{position: absolute;background: #999;cursor: pointer;overflow: hidden;}.jScrollPaneDragTop{position: absolute;top: 0;left: 0;overflow: hidden;}.jScrollPaneDragBottom{position: absolute;bottom: 0;left: 0;overflow: hidden;}a.jScrollArrowUp{display: block;position: absolute;z-index: 1;top: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowUp:hover{/*background-color: #f60;*/}a.jScrollArrowDown{display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowDown:hover{/*background-color: #f60;*/}a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{/*background-color: #f00;*/}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="http://code.helperblogger.com/jquery.mousewheel.js"></script><script type="text/javascript" src="http://code.helperblogger.com/jScrollPane-1.2.3.min.js"></script><script type="text/javascript" src="http://code.helperblogger.com/ticker-script.js"></script><script type="text/javascript">var tweetUsers=['BloggerEklenti'];</script>
Yukarıdaki kod içinde geçen , kırmızı ile yazılmış BloggerEklenti Yerine kendi blog adresinizi , mavi le yazılmış olan width: 300px;height: 300px; değerlerini değiştirerek ise eklentinin genişlik ayarlarını düzenleyebilirsiniz..


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Jquery Son Twitler Eklentisi , Blogger Jquery Son Twitler Widgets , Blogger  Son Twitler Eklentisi , Blogger Jquery Son Twitter yazılarım Eklentisi , Blogger Twit Gösterme eklentisi , Blogger Son Yazdığım Twitter Yazılarım


By Eklentileri.Blogspot Devamını Oku >>>

2 Haz 2012

13 Yorum

Önceki Sonraki Kayıtlarda Konu / Yazı Başlıklarını Gösterme


Blogger Önceki Sonraki Kayıtlarda Konu Başlıklarını Gösterme Eklentisi


Blogger bloglarınızda, yazılarınızın altında, önceki kayıtlar ve sonraki kayıtlar şeklinde , bir önceki konu ve sonraki konuya gitmemizi sağlayan linkler mevcut..

Bu eklentimizde , Önceki kayıtlar ve sonraki kayıtlar linkleri yerine yazı başlıklarını eklemeyi anlatacağız..

Hemen anlatıma geçelim..

Aşağıdaki kodumuzu buluyoruz..
]]></b:skin>
Hemen üstüne , aşağıda yer alan kodlarımızı ekliyoruz..
.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
2. adım olarak aşağıdaki kodu buluyoruz..
</head>
Hemen altına , aşağıda vermiş olduğumuz kodları ekliyorsunuz..
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
3. ve son adımımızda , alttaki kodu bulun
</body>
Yine hemen altına , bu kodları ekleyelim..
<!--Start post title code http://eklentileri.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />" + title);
}
}, 500);
});
//]]>
</script>
</b:if>
<!--End post title code http://eklentileri.blogspot.com -->
Yukarıdaki işlemleri doğru yaptıysanız , artık blogger blogunuzda önceki yayınlar ve sonraki yayınlar kısmında önceki konu bağlığınız ve sonraki konu başlığınız gözükecektir..


<<< Bu Yazı için Arama Sonuçları  >>>

Önceki Sonraki Yayınlarda Konu / Yazı Başlıklarını Gösterme , Kayıt başlıklarını gösterme , yazı başlıklarını gösterme , blogger önceki kayıt değiştirme , blogger önceki kayıt yazı başlığı , blogger sonraki kayıt yazı başlığı


By Eklentileri.Blogspot Devamını Oku >>>
Blogger tarafından desteklenmektedir.