Site tasarımı yapılır. İletişim için; ayseyldrm55@gmail.com mail atarak bize ulaşabilirsiniz.
Blogger Eklentileri Nasıl Eklenir ?
Site tasarımı yapılır. İletişim için; ayseyldrm55@gmail.com mail atarak bize ulaşabilirsiniz.
Blogger Animasyonlu Son Yazılar Eklentisi !
Öncelikle Blogger panelinizde Yerleşim > Gadget Ekle > HTML/JavaScript ekrana çıkan pencereye şu kodu yapıştırıyoruz.
<!--http://kisiselblogcumuz.blogspot.com/ -->
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://guney59.blogspot.com/2013/03/son-yazlar-eklentisi-animisyonlu.html" target="_blank">Sitene Ekle</a></small><!--http://kisiselblogcumuz.blogspot.com/ -->Ve işlem bu kadar arkadaşlar.. Yapabilen herkeze hayırlı uğurlu olsun.
Blogger Alternatif Facebook Beğeni Kutusu Eklentisi
1 - Öncelikle Blogger panelimizden Yerleşim > Gadget Ekle > HTML/JavaScript diyoruz ve şimdi aşağıda vereceğim kodu oraya yapıştırıyoruz.
<style>.blogtrixfb {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.blogtrixfb, .blogtrixfb:before, .blogtrixfb:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.blogtrixfb:before, .blogtrixfb:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.blogtrixfb:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>
<div class="blogtrixfb">
<div style="height:155px;overflow:hidden">
<fb:like-box href="FACEBOOK SAYFA LİNKİNİZİ BURAYA GİRİYORSUNUZ" data-width="300" data-height="250" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 250px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Feklentileri.blogspot.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&header=false&height=300&href=http://www.facebook.com/pages/Blogger-Eklentileri/126895440798640&locale=tr_TR&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box>
</div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Kırmızı ile olan yere kendi facebook sayfanızın linkini yapıştırıyorsunuz ve işlem bu kadar.. Şimdi kaydet diyoruz ve çıkıyoruz.
Blogger Renkli Katagori Ekleme !
1- Aşağıda vereceğim kodu Yerleşim > Gadget Ekle > HTML/JavaScript diyerek oraya kaydediyoruz ve bitiriyoruz...
<div id="main">
<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://b1301.hizliresim.com/15/d/hwswf.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>
<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://b1301.hizliresim.com/15/d/hwswj.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>
<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwszl.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>
<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwszq.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>
<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt0r.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>
<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt0n.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>
<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt1l.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>
<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt1p.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>
<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt2d.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>
</div>
</div>
<center>
</center>
</center>
NOT: www.sosyalbeyincik.net sitesinden alıntıdır. Lütfen eklentideki siteyi kaldırarak kendi sitenizi yazınız.
Arkadaslar islemimiz bu kadar.. Katagorileriniz güle güle kullanın.
Blogger Blogunda Kaç Online Olduğunu Gösteren Sayaç Eklentisi
İlk önce şu siteye girerek http://whos.amung.us/ Widget bölümüne tıklıyoruz ve istediğimiz sayaç tipini seçiyoruz. Daha sonra o sayaçların yanlarındaki kodu kopyalıyoruz ve Blogger panelimizden Yerleşim > Gadget Ekle > HTML/JavaScript diyoruz ve kopyaladığımız kodumuzu buraya yapıştırıyoruz. İşlem bu kadar. Eğer en üstte gösteriyorsa eklediğiniz HTML yi yerleşimden istediğiniz bölüme koyabilirsiniz.
Blogger Yukarı Çık Eklentisi !
1) Blogger panelimizde Yerleşim > Gadget Ekle > HTML/JavaScript diyoruz açılan pencereye şimdi aşağıda vereceğim kodu yapıştırıyoruz ve kaydediyoruz.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src=" http://1.bp.blogspot.com/-L5XHtSmOd-o/UmA2oR3htSI/AAAAAAAADak/skLqTeHAJUw/s1600/sayfabasina-don.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:25}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Sayfa Başına Dön'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
İşlemimiz bu kadar ve basittir.
Blogger Otomatik Sayfa Yenileme Eklentisi !
Yapımı ;
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
2 ) Ardından CTRL+F yardımı ile <head> kodunu bularak hemen üzerine aşağıda ki sayfa yenileme kodunu ekliyoruz.
Blogger Arşiv Sayfası Eklentisi !
Yönetim panelinize girdiğiniz zaman yandaki kategorilerden Sayfalar kategorisini seçip girin.Yeni Sayfa diyip açılan alt pencerede Boş Sayfa sekmesine tıklayın.Gelen düzenleme sayfasında HTML düzenleyicisini açıp aşağıda verceğim kodu ekleyiniz.
<script src="http://yourjavascript.com/9184200431/blogtoc-min.js"type="text/javascript"></script>
<script src="http://kisiselblogcumuz.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Kırmızı ile yazdığımız yeri kendi site URL'nizi ekleyiniz. İşlemimiz tamamdır.
Blogger Yazıların Kaç Kere Okundu Eklentisi !
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
2 ) Ardından CTRL+F yardımı ile <data:post.body/></div> kodunu bularak hemen altına aşağıda ki Blogger yazılarım kaç kere okundu eklentisi kodlarını ekliyoruz.
<div style='text-align: left;'>
<b:if cond='data:blog.pageType == "item"'><span style='color: magenta;'><b> Bu yazı daha önce
<img alt='counter'
expr:src='"http://www.e-zeeinternet.com/gd-count.cgi?page="
+ data:post.id +
"&style=times&nbdigits=1&reloads=1"'/>
kişi tarafından okundu.</b></span><b:else/></b:if></div>
Blogger E-Posta Aboneliği Eklentisi !
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 ekle olarak eklemeniz yeterli.
İşte kodumuz aşağıda verilmiştir.
<style>
#subscribe {
float:right;
width:258px;
padding:10px;
margin:0 0 20px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPzSzLelyUHlyvRyVzbTgOD7krXXsxLBmENfU-N2rVkCG9XlcxfgG_gcNnE1_GDL2foV3BbmkDCKAl7ZwH1csaD5nOAk8gsVIcGyF9Wpzz6tFNY7_7albVQ8agMAb4Mx-9kouu7dFUmx1p/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('http://feedburner.google.com/fb/a/mailverify?uri=kisiselblogcumuz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input class='input' name='email' onblur='if (this.value == "") {this.value = "E-Mail Adresiniz...";}' onfocus='if (this.value == "E-Mail Adresiniz...") {this.value = "";}' type='text' value='E-Mail Adresiniz...'/>
<input name='uri' type='hidden' value='kisiselblogcumuz'/><input name='loc' type='hidden' value='en_US'/><input class='sbutton' type='submit' value='Abone Ol'/></form>
</div>
<div>
kisiselblogcumuz'da yayınlanacak yeni yazılar e-mail adresinize gelsin.
</div></div>
Kırmızı ile yazılmış yerleri kendinize göre doldurunuz.
Blogger Sonraki/Önceki Yayınlar Yönlendirmelerine Title Ekleme Eklentisi !
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widget şablonlarını genişlet kutucuğunu işaretliyoruz.
2 ) Ctrl + F yardımı ile </head> kodunu bularak aşağıdaki kodu hemen üzerine ekliyoruz.
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
3 ) Ardından Ctrl + F yardımı ile </body> kodunu buluyoruz ve hemen üzerine aşağıda ki kodları ekliyoruz
<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> <![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) { href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/"); var title=urlToNavTitle[href]; if(!title) title=urlToPseudoTitle(href); if(title) $("a.blog-pager-newer-link").html("<< Sonraki Yayın<br />" + title); } href = $("a.blog-pager-older-link").attr("href"); if(href) { href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/"); var title=urlToNavTitle[href]; if(!title) title=urlToPseudoTitle(href); if(title) $("a.blog-pager-older-link").html("Önceki Yayın >><br />" + title); } }, 500); }); //]]> </script>
4 ) Son olarak tekrar Ctrl + F yardımı ile ]]></b:skin> kodunu bulup hemen üzerine aşağıda ki kodları 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;}
İşlememiz bu kadar arkadaslar işe yarar bir konudur. Zahmetli ama yapınca gerçekten işe yarıyor.
www.kisiselblogcumuz.blogspot.com
Blogger Skype Contact Eklentisi !
Nasıl Yapılır ?
Skype kutusunu oluşturmak oldukça kolay , bunun için Skype özel bir sayfa hazırlamış Blogger Skype Contact Eklentisi oluşturmak için buradan buyurun ; https://dev.skype.com/skype-uri/generator
Üç adet basamağı kendinize göre doldurmanız gerekiyor. İlk bölüme kullanıcı adınızı , ikinci aralığa size nasıl ulaşılmasını istediğinizi , üçüncü adamdı ise şekli belirleyebilirsiniz. Ardından dördüncü boşlukta sizin için hazırlanmış kodlar olacak. Kodları kullanmak için Blogger kontrol panelinden yerleşim seçeneğine geçerek kullanmak istediğiniz alana Gadget Ekle, Html/Javascript olarak ekleyebilirsiniz. Ayrıca kodlar yayınlar içerisinde de sorunsuz çalışıyor.
Blogger Popüler Yayın Numaralandırma Eklentisi !
1. Adım : Blogger > Düzene gidiyoruz.
2. Adım : Gadget Ekle seçeneğine tıklıyoruz.
3. Adım : Listeden Popüler Yayınları seçiyoruz.
Aşağıdaki gibi yapıyoruz ayarlarımızı;
Şimdi özel eklentileri eklemek gerekir. Onun içinde aşağıdaki yolları izleyiniz.
4. Adım : Blogger > Şablon
5. Adım : HTML Düzenlemeye tıklayın. ( HTML Kodlarınız yedeklemeyi unutmayınız.)
6. Adım : Ctrl + F Yardımı ile ]]></b:skin> kodunu arıyoruz.Bulduğunuz ]]></b:skin> kodun öncesine aşağıdaki kodu yapıştırıyorsunuz.
/*--- kisisel-blogcumuz Popular yaynlar --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
İşlemlerimiz tamamdır. Kodu tamamen okuyunuz bizim kendi adımıza doldurduğumuz yerleri kendinize göre doldururak düzenleyiniz.
Blogger İletişim Kutusu Ekleme !
1. Eklentiye eklemek için Blogger Kontrol panelinden Yerleşim > Gadget Ekle sayfasından ise diğer gadget'lar menüsünü seçiniz.
2. Diğer Gadget'lar menüsü sectikten sonra İletişim Formu seçeneğini görebileceksinzi.
Yapmış olduğunuz işlem, blogger hesabınızın bağlı olduğu mail adresine yollar. İnşallah yararlı olmuştur arkadaşlar.
Blogger Resim Üzerine Gelince Açıklama Kutusu Eklentisi !
Blogger sitemize giriş yapıyoruz. kontrol panelince şablon kısmına giriş yapıyoruz html düzenle diyip.Ctrl F yardımı ile açılan kod penceresine ]]></b:skin> kodunu aratıyoruz. buldugumuz ]]></b:skin> kodu öcseni sizlere verdigim kodu ekliyorsunuz ve şablon kaydet diyip cıkıyorsunuz.
.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}
.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}
Yukarda ki işlemi dogru bir şekilde yapdıysanız eklentimiz çalışcakdır. Bu eklenti yi çalışdırmanız icin aşagıda ki kodları kulanmanız gerekiyor.
<div class="imagepluscontainer" >
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbruQyk33W8RQqBOM7stcHxs85ZIa4K5wuW1NzSiXQcMcVodBk" style="width:263px; height:199px; z-index:2" />
<div class="desc">
Tüm Blogger eklentilerini , http://kisiselblogcumuz.blogspot.com adresinde bulabilir , blogunuza ekleyebilirsiniz..
</div>
</div>
İşlemimiz bu kadardır. Kırmızı ile yazdığımız yeri kendinize göre doldurunuz.
İnşallah işinize yarar.
www.kisiselblogcumuz.blogspot.com
Blogger Şu Kadar Gündür Sizinleyiz Ekletisi !
İlk önce Yerleşim > Gadget Ekle > HTML / JavaScript butonları ile açılan pencereye aşağıdaki kodu yapıştırıyoruz;
<script type='text/javascript'>
function dcountup(startingdate, baseunit){
this.currentTime=new Date()
this.startingdate=new Date(startingdate)
this.timesup=false
this.baseunit=baseunit
this.start()
}
dcountup.prototype.oncountup=function(){} //default action for "oncountup"
dcountup.prototype.start=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
var timediff=(this.currentTime-this.startingdate)/1000 //difference btw target date and current date, in seconds
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
var result={days: dayfield, hours:hourfield, minutes:minutefield, seconds:secondfield}
this.oncountup(result)
setTimeout(function(){thisobj.start()}, 1000) //update results every second
}
</script>
<div id='cpcontainer'>
</div>
<script type='text/javascript'>
//SYNTAX: myvariable=new dcountup(past_date_and_time_string, "baseunit")
var princewedding=new dcountup("October 30, 2013", "days")
princewedding.oncountup=function(result){
//result is an object containing the current count up date/time, updated every second
//Available properties: result["days"], result["hours"], result["minutes"], and result["seconds"]
var mycountainer=document.getElementById("cpcontainer")
mycountainer.innerHTML=""+result['days']+" Gündür Sizlere Hizmet Vermekteyiz.."
}
</script>
Sonra kaydedip çıkıyoruz. İşlemimiz bu kadar arkadaşlar inşallah işinize yaramıştır.
NOT : KIRMIZI ile yazılan yerleri kendinize göre doldurabilirsiniz.
www.kisiselblogcumuz.blogspot.com
){kind=link}