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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLIC3N2qDWTF_D3kpjHAkBzCcUspgR3xBtEzpz4j16sXyFXxVCSdyRDgjssjXL1j4yCQKBi7cNOl_ypdJUXWLSM-c9Oo66RYN595oVO_CZ9C23_44nCLAzGFeYQYKrhB1W1s2IwVCQeTY/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLIC3N2qDWTF_D3kpjHAkBzCcUspgR3xBtEzpz4j16sXyFXxVCSdyRDgjssjXL1j4yCQKBi7cNOl_ypdJUXWLSM-c9Oo66RYN595oVO_CZ9C23_44nCLAzGFeYQYKrhB1W1s2IwVCQeTY/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ü

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..

DEMO

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  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgScEmC2mgabgAQ0vX4tRfbnT_ycfthlTm55Z41xND4Ap6J6Ecbcfv1GGdX249H5-M1Ry0MlE9cOd0wcehVOZcjCANKhPlNbgRxGWhvGVtvKC1zu3meRdpzKg-9Lr_GwpSckDy9ndS0Wlp4/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

Blogger Hareketli Sosyal Butonlar Eklentisi Widget..

Bu eklentimizle , blogger blogunuza üzerine gelince renkelenen sosyal butonları ekliyeceğiz...Bu eklentimizle , rss, google , facebook ve twitter sayfalarınızı ziyaretçilerinize oldukça şık bir görünümle sunabilirsiniz..

DEMO

Blogger Hareketli Sosyal Butonlar Eklentisini blogger'a eklemek için aşağıdaki adımı takip edin..

Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim..

<style> 
/*--------eklentileri.blogspot.com hareketli menu ------*/ 
.touchme a { 
display:block; 
height:50px; 
width:50px; 
padding:0 4px; 
float:left; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMA4HN6QrE_BQXqfDsltXK7QxZFDV6OcV_WRVFxUy3NR420VsZ2YORSFKOaQPkJ_Qu6PQxc0k4R6YdLwBoFdvh0mxNI0dNRTfH3cfh-T_wFRVkRPC-DBKXenIdXWlrJeyLkh-O5EBw8Abh/s1600/eklentileri.blogspot.com.png) no-repeat; 
-webkit-transition: ease-in 0.2s all;    
-moz-transition: ease-in 0.2s all;    
-o-transition: ease-in 0.2s all;    
-ms-transition: ease-in 0.2s all;    
transition: ease-in 0.2s all; 
cursor:pointer;
}

.touchme a.googleplus { 
background-position: 0px -58px;
} 
.touchme a.googleplus:hover { 
background-position: 0px 0px; 
}

.touchme a.twitter { 
background-position: 0px -290px;
} 
.touchme a.twitter:hover { 
background-position: 0px -232px;
} 
.touchme a.facebook { 
background-position: 0px -406px;
} 
.touchme a.facebook:hover { 
background-position: 0px -348px;
}

.touchme a.rss { 
background-position: 0px -174px;
} 
.touchme a.rss:hover { 
background-position: 0px -116px;
}

</style>

<div class='touchme'>
<!--RSS--> 
<a class='rss' href="RSS ADRESI" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> 
<a class='googleplus' href="GOOGLE PROFIL ADRESI" rel='external nofollow' target='_blank'></a>
<!--Facebook--> 
<a class='facebook' href="FACEBOOK ADRESI" rel='external nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="TWITTER ADRESI" rel='external nofollow' target='_blank' ></a>

</div>

Yukarıdaki kodlarda kırmızı ile yazılmış olan yerlere , kendi adreslerinizi yazmayı unutmayın...yapmanız gereken sadece bu kadar..

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

Blogger Hareketli Sosyal Butonlar Eklentisi , Blogger Hareketli buton , blogger sosyal medya butonları , renk değiştiren butonlar , blogger sosyal ağ butonları , blogger facebook twitter buton

Blogger Çılgın Karınca Eklentisi Widget

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

DEMO

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..

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..

DEMO

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOw_DPDO7sIg7hQTkE_1pDPVPT59J4sL8o2a4V-RMa3ethyphenhyphen3pl2O1ZPVrTm5oeqnw8A_q8BoldzUNZDKSPqMwF5-eTcpzZFtqYm5pkBFaCZ9CVR70cD2EGBuddycf-xhGVyn7VBcXfLo/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9xkki5b9ep41FokGLCF5yoTV5pX_S2JLS1vWTJWBIbezWY59OsYA8L6hW8csmpyC8naNtZTtKFecgPQDWTCTBmVzI2c8hIBgJxDOUdDt5hIas_UM7_HrEKzw3ym6Bd5FsXBZWvY1-uM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZig8Drbu2mUfvo3MZnS74C-mrVvgO-RTnpIiP2hJyypwfVdRpOA2mfke8k6ueKSEVHP4zsu0SojSSSQqMY2m6JZ9yDEikdl3FnjmFf8TgL3IzwB11MBo0euzVdyR8InLuZXHT3OmrR0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbtyvQdgA7fMCXTaaCvJjvwUfDNAnzrZFSnrbFukHMTs5GwqtSfptr3Qv669_dvbqBHImvqyN_Q8uO7CzlbNPqlUr6n1Ic4zawKF9DjDOcJbFzFDrQVNo31uDn1VrVrSGGw2d7WkXXkAE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHiLfewcCSWduCuudBiCr1il49aBFD25Co-beUAF6-CFMGfPzobIwOuwBvBfNv6vFmj3wYoGbd8LTYULI3asnqWWlPPcVkArZarxsVP2gRTuavBlVe0aqtErtAvuxWopgAupmXrfnQhg4/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

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

DEMO

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ığı