resim etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
resim etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
19 Şubat 2013 Salı
Blogger dinamik resim eklentisi
Unknown
12:30
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
Diğer
,
dinamik
,
resim
Hiç yorum yok
:
Blogunuza dinamik bir resim eklentisi istermisiniz ?
Bu eklentimiz , fare ile resim üzerine gelindiğinde resmi bir miktar yatırır , oldukça güzel bir eklenti olduğunu düşündümüz dinamik resim efektini sizde blogunuzda kullanabilirsiniz..
öncelikle blogunuzda aşağıda kodu buluyorsunuz.
yukarıdaki kodun hemen üstüne bu kodu yapıştırıyoruz
kaydedip çıkıyoruz...
22 Aralık 2012 Cumartesi
Blogunuzun Köşesine Mutlu Yıllar ( Yılbaşı Eklentisi )
Unknown
13:53
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
resim
Hiç yorum yok
:
Blogger blogunuzun köşesinde , mutlu yıllar resimi içeren bir eklenti istermisiniz ?
Demosunu şuan bulunduğunuz sayfada görebilirsiniz..
Aşağıda yer alan kodları ,Yerleşim >> Gadget Ekle >> HTML/JavaScript yolunu izleyerek blogunuza ekleyiniz
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmWsT6wFExU77GNqt8mYptmmw7iGjxXQV0Ii_-WKOyK4RMjPkImwfO_lhSeG1XndvihyphenhyphenAkhrZWk-d39d7T1YSpu_KE1NnbWyYehCOUajokikxX4xxfVJMqWibqIlcSaEC0gqfWopIiyxKf/s1600/yeniy%C4%B1l.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5; background-color: transparent;"/>
Yukarıdaki kodu eklediyseniz , yılbaşı resminiz blogunuzun sol üst kısmında çıkacaktır..
Sol alt için , top değerini bottom olarak değiştiriniz
Sol alt için , top değerini bottom olarak değiştiriniz
<<< Bu Yazı için Arama Sonuçları >>>
Blogunuzun Köşesine Mutlu Yıllar , Blogunuza Mutlu Yıllar Resmi , Yılbaşı eklentisi , Blogger Yeni Yıl Eklentisi , Blogunuzun soluna resim
Blogunuzun Köşesine Mutlu Yıllar , Blogunuza Mutlu Yıllar Resmi , Yılbaşı eklentisi , Blogger Yeni Yıl Eklentisi , Blogunuzun soluna resim
12 Kasım 2012 Pazartesi
Blog Ekle - Blog Tanit
Blogumuzun Sağ altında , Blog Sayfanızın reklamının yer almasınız istermisiniz ?
eklentileri.blogspot.com , Blogunuzu ücretsiz tanıtıyor , sizde blogunuzu ekleyin sizde blogunuzu başkalarına tanıtma fırsatına sahip olun..
Sayfamızın Sağ altında 125x125 lik alanda , banner , yazı vs.. ile blogger blogunuzu tanitabilirsiniz..
Blogumu Nasıl Eklerim ?
- Blogger blogunuzu eklemek için ;
- Öncelikle , Blogger blogunuzda bizi tanıtan bir yazı yazmak ve yazınızın sonuna http://eklentileri.blogspot.com/ adresini içeren bir link vermek..
- Yazınızı yayınladıktan sonra , iletişim'e girerek yada eklentileri.blogspot@gmail.com adresinden bize , 125x125 logo/yazı resminizi ve bizi tanıtan yazınızın linkini göndermek gerekiyor..
- Yapmanız gereken bu kadar..
Blogum Ne zaman Eklenir ?
- Üstte yer alan koşulları uyguladıktan sonra , Size atacağımız cevapta tarih ile belirtilecektir..Yoğunluğa göre süre değişebilir ,( Blogunuz eklendiğinde mail ile haber verilecektir )
Ne kadar süre Blogumun reklamını yapabilirim ?
- Blogunuz 5 gün süre ile , sayfalarımızın sağ altında kalır , 5 gün sonra yerini başka bir bloga devreder...Bu 5 günlük süre zarfında Blogunuza ziyaretçi çekebilirsiniz..
Reklamın iyisi kötüsü olmazmış diyen blogger kullanıcıları için ideal bir yöntem olan bu reklam alanını sizde kullanabilirsiniz..
3 Kasım 2012 Cumartesi
Resim üzerine gelince açılan açıklama kutusu
Unknown
14:49
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
kutu
,
resim
,
yazı
Hiç yorum yok
:
Blogger blogunuza eklediğiniz resimlerin üzerine fare ile gelindiğinde, aşağı doğru açılan metin/bilgi kutusu eklentisini blogger blogunuza eklemek için aşağıdaki anlatımı takip edip , blogger blogunuzda bu eklentiyi kullanabilirsiniz.
Alttaki kodu bulunuz..
]]></b:skin>Bir satır üzerine aşağıdaki kodları ekleyiniz..
.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 */
}
Yukarıdaki işlemi yaptıysanız eklentimiz hazırdır , bu eklentiyi kullanmak için , aşağıdaki kod dizilimini kullanmanız gerekiyor..
<div class="imagepluscontainer" >
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxlnqZMP-OA8ouLNjnLCxSBs0ZgPlbGWrRfGcX8SPWfzzxGtAmWvzYwXK0KwpVrtEiK6pPdvlSl7PHGFa00Et46C3qACP-iY0YhBk0Jz-3jZrDIG-hoyWnC9XuBYM5hCZYEevAn-fv3Lv/s1600/yorum.png" style="width:263px; height:199px; z-index:2" />
<div class="desc">
Tüm Blogger eklentilerini , eklentileri.blogspot.com adresinde bulabilir , blogunuza ekleyebilirsiniz..
</div>
</div>Kırmızı olan yere , resim linkiniz..Mavi olan yer ise görünmesini istediğiniz yazınız..düzenlemeri ona göre yapınız..
DEMO
DEMO
<<< Bu Yazı için Arama Sonuçları >>>
Resim üzerine gelince açılan açıklama kutusu , blogger resim üstüne gelince açıklama ekleme , blogger resim eklentisi , blogger resim üstü yazı eklentisi , blogger image widget , Image With Description Hover Effect , Blogger hower widget ,
Resim üzerine gelince açılan açıklama kutusu , blogger resim üstüne gelince açıklama ekleme , blogger resim eklentisi , blogger resim üstü yazı eklentisi , blogger image widget , Image With Description Hover Effect , Blogger hower widget ,
27 Ekim 2012 Cumartesi
Resimli En Çok Yorum Yapanlar Eklentisi
Unknown
14:59
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
resim
,
yorum
Hiç yorum yok
:
Blogger için Resimli En Çok Yorum Yapanlar Eklentisi Widget
Daha önceden ŞU konuda , en çok yorum yapanlar eklentisini paylaşmıştık..Şimdi ise en çok yorum yapanlar eklentisinin resimli versiyonunu sizlerle paylaşacağız..
Yapmanız gereken , aşağıdaki kodları Yerleşim >> Gadget Ekle >> HTML/JavaScript ile blogunuzda uygun bir yere gadget olarak eklemek..
<style type="text/css">
.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://eklentileri.blogspot.com/
//
// CONFIG:
var maxTopCommenters = 5; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 0; // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true; // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2X93FIFSNAb3UdAnVuC7j8wLBicZApUzrz0fLILJI5t6XVuRYs_c37hox3RGHP-EcZjbzV-U1AIt_pt_67YOsAgwP4tEbBjIOVJr8W721pTERWzwYfNVJNBroTsQwfwU0AuHhnL7YFws/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
// list top topcommenters:
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
Eklediyseniz , eklentimiz hazır halde blogunuzdan görebilirsiniz , bu eklentinin demosunu paylaşmıyoruz, yukarıdaki resime tıklayarak inceleyebilirsiniz..
<<< Bu Yazı için Arama Sonuçları >>>
Resimli En Çok Yorum Yapanlar Eklentisi , Blogger en çok yorum yapanlar , Resimli yorumlar , resimli en çok yorum yapanlar , yorumlar , Blogger yorum Eklentisi ,Blogger yorum resimli eklenti , Top Comment Gadget , Top Comment , Top Comment Gadget Avatars
Resimli En Çok Yorum Yapanlar Eklentisi , Blogger en çok yorum yapanlar , Resimli yorumlar , resimli en çok yorum yapanlar , yorumlar , Blogger yorum Eklentisi ,Blogger yorum resimli eklenti , Top Comment Gadget , Top Comment , Top Comment Gadget Avatars
19 Ekim 2012 Cuma
Blogger Resimlerinize Zoom Efekti Eklentisi
Unknown
16:54
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
efekt
,
resim
,
zoom
Hiç yorum yok
:
Blogger blogunuzda kullandığınız resimlere zoom özelliği eklemek istermisiniz ?
Blogger zoom eklentisi ile , kullanıcılar resimlerin üzerine geldiğinde , resimleriniz belli bir miktarda büyüyerek zoom etkisi gösterir..
Blogger resimlere zoom eklentisini blogger blogunuza eklemek için yapmanız gerekenler aşağıda..
Aşağıda yer alan kodu bulunuz..
]]></b:skin>Hemen üstüne alttaki kodlarımızı ekleyelim..
/* eklentileri.blogspot.com zoom efekti kod sonu */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNpYZUQIV0cqwhtcVaysNFV4ZWfsIBV-ITm3I9aWgh4W0zdrJ_do6uejUL3FQF2PPU6oBIDp7LWFtFXzDApSkSP5Fz1708k6b2Kc7aRP3GyoboY9w4h0LMKS_P0fZUDdShyP1S_uaTq70/) no-repeat center center; /* Image used as background on hover effect
border: none; /* eklentileri.blogspot.com zoom efekti kod sonu*/
}Yukarıdaki işlemi yaptıktan sonra , şimdide bu kodumuzu bulalım.
</head>Bu kodumuzunda hemen üstüne şu kodları ekleyelim..
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>Blogger resimlerinize zoom efekti eklentimiz hazır , nasıl kullanılacağına gelirsek , yazılarınızı yazarken , resimlerinizi alttaki şekilde ekleyeceksiniz..
<ul class="thumb">
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 1" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 2" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 3" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 4" alt="" /></a></li>
</ul>
<<< Bu Yazı için Arama Sonuçları >>>
Blogger Resimlerinize Zoom Efekti Eklentisi , Blogger Resimlerinize Zoom Efekti , Blogger Resimlerinize Zoom , Blogger zoom , zoom eklentisi , zoom , blogger resim yakınkaştırma , resim zoom , zoom efekti , zoom eklentisi , zoom widget , blogger photo zoom effect
Blogger Resimlerinize Zoom Efekti Eklentisi , Blogger Resimlerinize Zoom Efekti , Blogger Resimlerinize Zoom , Blogger zoom , zoom eklentisi , zoom , blogger resim yakınkaştırma , resim zoom , zoom efekti , zoom eklentisi , zoom widget , blogger photo zoom effect
28 Mayıs 2012 Pazartesi
Üzerine Gelince Saydamlaşan Resim Eklentisi
Unknown
13:45
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
efekt
,
resim
Hiç yorum yok
:
Üzerine Gelince Saydamlaşan Resim Eklentisi Widget
Bu eklentimizde , konu ve yazılarınızda bulunan bir resmin üzerine gelince , resmin saydamlaşmasını sağlayacağız..
DEMO iÇİN AŞAĞIDAKİ RESMİN ÜZERİNE GELİN..
Blogunuzda ,
]]></b:skin>kodunu bulun , hemen üstüne aşağıdaki kodları ekleyin..
.blur img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.blur:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}
Yukarıdaki işlemi yaptıysanız , Bundan sonra yeni yazılarımıza resim eklerken aşağıdaki şekilde eklemek
<a class="blur"> <img alt="resim" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4OexeyRTQ50abOxesd51qVlTFBaqgy96wauzidCcnJVDl6YwcAFk6vBwv1ienLJx2lgkSYEp0lMOQb-HNEQwX-9HBz975ndG67cd9KnhIVVsPXyxRn2S9rz5ZAvEYuCX98TLtKiFV7nSB/s1600/yorum.png" /></a>
<<< Bu Yazı için Arama Sonuçları >>>
Üzerine Gelince Saydamlaşan Resim Eklentisi , Resim eklentisi , Blogger resim effekt eklenti , Blogger resim eklentileri , üzerine gelince sis efekti , Blogger Resim üzerine gelince değişen resim eklentisi
Üzerine Gelince Saydamlaşan Resim Eklentisi , Resim eklentisi , Blogger resim effekt eklenti , Blogger resim eklentileri , üzerine gelince sis efekti , Blogger Resim üzerine gelince değişen resim eklentisi
23 Mayıs 2012 Çarşamba
Blogger Nivo Slider Eklentisi
Unknown
15:18
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
resim
,
Slider
Hiç yorum yok
:
Blogger Nivo Slider Widget
Öncelikle bu eklentinin demosunu BURDAN görebilirsiniz , Aynı zamanda bu slider eklentisini bizde kullanmaktayız , ana sayfamızda görebilirsiniz
Lafı uzatmadan , Blogger Nivo Slider Eklentisini blogger blogunuza nasıl ekleyeceğinizi anlatalım..
Aşağıda yer alan kodu buluyoruz...
]]></b:skin>
Hemen üstüne , aşağıdaki kodlarımızı ekliyoruz..
/*Start Nivo Slider Css eklentileri.blogspot.com*/
/*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* For blogger by - Rahul Ippar @ helperblogger.com
*
* March 2010
*/
/* The Nivo Slider styles */
#slider {
width: 618px;
height: 246px;
}
.nivoSlider {
position: relative;
}
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 6;
display: none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display: block;
position: absolute;
z-index: 5;
height: 100%;
}
.nivo-box {
display: block;
position: absolute;
z-index: 5;
}
/* Caption styles */
.nivo-caption {
position: absolute;
left: 0px;
bottom: 0px;
background: #000;
color: #fff;
opacity: 0.8;
/* Overridden by captionOpacity setting */
width: 100%;
z-index: 8;
}
.nivo-caption p {
padding: 5px;
margin: 0;
}
.nivo-caption a {
display: inline !important;
}
.nivo-html-caption {
display: none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position: absolute;
top: 45%;
z-index: 9;
cursor: pointer;
}
.nivo-prevNav {
left: 0px;
}
.nivo-nextNav {
right: 0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position: relative;
z-index: 9;
cursor: pointer;
}
.nivo-controlNav a.active {
font-weight: bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/
.theme-pascal.slider-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIUsnf80hdMfmMTCvCmKm7ZOk8v8gWBZHnRUDaWknIEj_Z47HEd7j6sgoCRfEJVHGyxdCp86X3FRvhaT122l-uCzYx0fxQ6mVY3QKzj3v1PUAKBxpxoMon_3UBWVtl7CElGv7ujGzxYAh/s1600/helperblogger-slider-bg.png) no-repeat;
width: 668px;
height: 299px;
margin: 0 auto;
padding-top: 17px;
position: relative;
}
.theme-pascal .nivoSlider {
position: relative;
width: 630px;
height: 235px;
margin-left: 19px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1aW_hGgL-voReo0ED0-ZGbiD2au4KCYD6q72VULEhJD9EFhh888eBwJTR_rU7Ygj_cLIOLKz_IkymrPv_Laa0cJn_2FgwoMUCKiFfpijnnj2I23jk6jF8ZiehvF9EYP-ixhDBVH7CS8t/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 630px;
/* Make sure your images are the same size */
height: 235px;
/* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border: 0;
display: block;
}
.theme-pascal .nivo-controlNav {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT7MozcEBeEz9zMVF5wpSC2UzO-DRLeISQ-XJjufh47PLSN31neZVw3GXAjy2_cfT67nJSloNFQzDc_vK_COGjgN-I98gJcnVBkrOiTq4ta5YjYoLpgFOGnWjmQ83KuON8oR6alnWFhr4P/s1600/helperblogger-controlnav.png) no-repeat;
width: 251px;
height: 40px;
position: absolute;
left: 200px;
/* Tweak this to center bullets */
bottom: -42px;
padding: 8px 0 0 82px;
z-index: 20;
}
.theme-pascal .nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9KzhMMsDA3tW7j6-eqTjfgm5Qcc_omkPpvAlIptgCAsQCTP8UMSi1U32IA3cHHoWIpEZzSOA2ZJ5_VW4v0Ra9H8h_NE2RPi8riLFDBIf19wpIO9NpvHGkHtm5zbMtK8Syqc5Kr_NO_yBX/s1600/helperblogger-bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}
.theme-pascal .nivo-controlNav a.active {
background-position: 0 -22px;
}
.theme-pascal .nivo-directionNav a {
display: none;
}
.theme-pascal .nivo-caption {
bottom: 40%;
left: auto;
right: 0px;
width: auto;
max-width: 630px;
overflow: hidden;
background: #fff;
text-shadow: none;
font-family: arial, serif;
color: #4c4b4b;
}
.theme-pascal .nivo-caption p {
padding: 5px 15px;
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}
.theme-pascal .nivo-caption a {
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}
.theme-pascal .ribbon {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZYFoHHCaEK_btr130GAaPlR_hnVDxZkIRzTXJhLftj0bg5vjdmhWnD9YckMlKzF9lAVTWLGDHGN1RIum_HmUfvfPtPClMtKMMRJz3YCGBYEAM247SH9yBTOrOAvkq5NM2MoPkztCCOqf/s1600/helperblogger-ribbon.png) no-repeat;
width: 111px;
height: 111px;
position: absolute;
top: -8px;
left: -8px;
z-index: 300;
}
/*End Nivo Slider Css eklentileri.blogspot.com*/
Şimdi ise aşağıdaki kodumuzu buluyoruz.
</body>
Bu kodumuzunda hemen üstüne , aşağıda yer alan kodlarımızı ekliyoruz.
<!--Start Slider Scripts-->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Üstte yer alan işlemleri yaptıysanız , şablon kısmı ile işimiz bitti , kaydedebilirsiniz..
Şimdi yerleşim kısmına girip , Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıda yer alan kodlarımızı ekliyoruz..
<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="http://eklentileri.blogspot.com/2012/04/blogger-facebook-yorum-kutusu-ekleme.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_tbZ7koWJu0sz7XZqyvYtD7OArSB5Iihxn_JB5mUZxEkqb7VN81pzZQyftJz9-RAyDrgHK6dRwn3984F1-1F82rk_2HcmHyglxsYoLF7M2hJv_Pqux4MZU-fZ4atyIMv7V7hKATBlgvdR/s1600/facebook-yorum-kutusu-eklentisi-ekleme.png" alt="" title="isteğe bağlı yazı" /></a>
<a href="http://eklentileri.blogspot.com/2012/03/blogger-yorum-kutusuna-arka-plan-ekleme.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGk87qxKN0-gSh5nvPVM3GnOjGv89GpYXg1GRqfzo92xAPgjFEX89RANwNrgMOmz2CiCM8dOCVd_3JQpl5xnNrq-VgIjf2iwvzGP70evKWzBLEmnxgi97SnwwJmqpS0giDHFrPsOHefd55/s1600/yorum-formu.png" alt="" title="isteğe bağlı yazı" /></a>
<a href="http://eklentileri.blogspot.com/2012/04/yandan-aclr-facebook-ve-twitter-takipci.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDs4GCEVNurTiBTrgGyBtdJw-uc0f7LFYHpr0gpUEUZp07ihbzS3hIxOsZpPJxlOxXH91JSqDkrMl0Lntc72VUr-xSvc8-2afuwzoUlU2OPjMKa0yQgGOcntXoGwAdsjWdwYH12h-iud5v/s1600/takipci.png" alt="" title="isteğe bağlı yazı" /></a>
<a href="http://eklentileri.blogspot.com/2012/03/blogger-admin-yazar-yorumlarn-farkl.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgIU2o_puTrjsBN113jJgSy69UeOl9HS43tn8XPkxelDelVgyf4YeLj67VJa4UVNsv_iFftFHciC2ukeZR-q0F-E6Diu1hhev4Mzxpaa7FlcR2gVUcX3Jw5qLTzt4h7Vbl0OJipSjDId-/s1600/yazar.png" alt="" title="isteğe bağlı yazı" /></a>
</div>
</div>
Yukarıdaki kodlar içinde , kırmızı yerlere resim adresleriniz , mavi yerlere resime tıklayınca gidilmesi gereken adres , siyah kalın yazılmış yerleri ise , resim üstüne yazı eklemek için kullanabilirsiniz ( yazı istemezseniz , boş bırakabilirsiniz.. )
Eklentiyi , aşağıdaki resimde gördüğünüz yere eklemeniz önerilir..
<<< Bu Yazı için Arama Sonuçları >>>
Blogger Nivo Slider Eklentisi , Blogger Nivo Slider Widgets , Blogger Slider Eklentisi , Blogger Sliders , Blogger Slider Eklentileri , Blogger Slider Ekleme , Bloga Slider Nasıl Eklenir
Blogger Nivo Slider Eklentisi , Blogger Nivo Slider Widgets , Blogger Slider Eklentisi , Blogger Sliders , Blogger Slider Eklentileri , Blogger Slider Ekleme , Bloga Slider Nasıl Eklenir
6 Mayıs 2012 Pazar
Resim üstüne yazı eklentisi
Unknown
16:06
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
resim
,
yazı
Hiç yorum yok
:
Blogger resim üstüne yazı eklentisi
Bu eklentimiz Serhat Yıldıko tarafından istenmiştir , blogger blogunda kullanmak isteyenler kullanabilirler..
Lafı uzatmadan eklentinin DEMO'suna bakabilir ve aşağıdaki yolları takip ederek blogunuza ekleyebilirsiniz..
Hemen anlatıma geçelim..
Aşağıdaki kodu bulun..
]]></b:skin>
Bir satır üstüne alttaki kodları ekleyelim..
#arka{
background-color:#FFFFFF;
}
#arka li{
display:inline-block;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
}
.text{
padding:3px 5px;
font-size:12px;
width:175px;
color:#FFFFFF;
background: #000000;
background: rgba(0,0,0,0.5);
position:relative;
z-index:1;
text-align:center;
margin-top:-36px;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.text:hover{
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
background: #000000;
background: #000000;
}
Yukarıdaki işlemi yaptıysanız kaydedin ve yerleşim kısmına girerek , gadget ekle > HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim..
<div id="arka">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHc93CaUagdZpdPSj4dOUX1SFQJUw9qxOJSnBs3RbND-JGSBPAuN5AxVzYm5YDXgHNpF1NsYHRq_BonhGCZyqX43VJ-s9aZn-aYR1cAjL76Mdm0WHuKxLegT7tr-FjmtZ0spanquWV/s1600/alt-bar.png" width="185" height="120" /></a>
<div class="text">Deneme Yazı 1 , Bu Bir Denemedir....</div></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Ob1cdssKGRgp0-pqIzgn59ixnrvshpyy4sYdrwDN_yfKsbpGKHcia1PGnuC7MQ7bWw6ZeskGwgN9-AJ0jLsA3ZBq52YDru5666mMKI3_jzGsb-OKz5AETYQdl4GyjILJfXtJzxNH/s1600/gadget+ortalama.png" width="185" height="120" /></a>
<div class="text">Deneme Yazı 2 , Bu Bir Denemedir....</div></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj91s2g3u48qOCm-5UjicD67PUCSoMq-Ap6bBNO8YaDUg2xgDgi-NI8qblmKmzqTGMJLONkVuXxnk5ltlp-kChz8e-uyA_L37Y_L-X5bEY6IGIevjVtaoZzp2KFi3q0zNbhuIYz8BUd/s1600/mause-blogger.png" width="185" height="120" /></a>
<div class="text">Deneme Yazı 3 , Bu Bir Denemedir....DENEME</div></li>
</div>
Kırmızı yazılar resim linkleriniz, mavi yazılar resim açıklamaları , yeşil # tıklandığında gitmek istediğiniz adres...Bu işlemide yaptıysak eklentimiz hazırdır , son olarak yapmamız gereken , eklediğiniz eklentiyi , konu üstüne taşımak..
<<< Bu Yazı için Arama Sonuçları >>>
Resim üstüne yazı eklentisi , Blogger Resim üstüne yazı eklentisi , Resim üstüne yazı yazma , Resim üstüne nasıl yazı yazılır , blogger resimm eklentileri , blogger image widgets ,
Resim üstüne yazı eklentisi , Blogger Resim üstüne yazı eklentisi , Resim üstüne yazı yazma , Resim üstüne nasıl yazı yazılır , blogger resimm eklentileri , blogger image widgets ,
5 Mayıs 2012 Cumartesi
Daha iyi Bir Blog için Yapılması Gerekenler
Unknown
16:30
Blogger
,
Blogger Eklentileri
,
blogger ipucu
,
resim
,
yayınlar
,
yazı
,
yorum
Hiç yorum yok
:
Daha iyi Bir Blog için Yapılması Gerekenler
Bir blog yazarının aklında, Blogumun hitini nasıl arttırırım ? Bloguma nasıl daha fazla ziyaretçi çekerim , Blogumu daha okunur bir hale nasıl getirebilirim vb. tarzı sorular her zaman vardır...
Resim kullanın ; Blogunuza yazdığınız yazılarınızda , en azından bir tane resim,logo,görsel öge içeren bir obje kullanmanız her zaman iyidir.Okurlarınızın yazılarınızdan keyif alması için bu gereklidir...
Fazla yazmayın ; Bir blog yazarının bazen yaptığı en büyük hata , yazılarını uzun tutarak ziyaretçileri sıkmasıdır , Uzun ve anlamsız cümleler ziyaretçilerinizi blogunuzdan uzaklaştırır.Yazılarınızı net ve anlaşılır biçimde yazın..
Yorumları unutmayın ; Blogunuza yorum yapan ziyaretçilerinizin yorumlarını görmezden gelmeyin , olumlu yada olumsuz mutlaka geri dönüş yapın , blogunuza yorum yapan kullanıcılar, mümkün olduğunca çabuk cevap bekler , bu süreyi çok fazla uzatmamaya çalışın..
Yazım hataları ; Blogunuza yazı yazarken yazım hatalarına dikkat edin , mutlaka hata yapabilirsiniz, olabildiğince az hata yapmaya çalışın , yazınızı yayınlamadan önce mümkünse önizleme yaparak yazım hatalarınızı kontrol edin..
Blogunuzu güncel tutun ; Ziyaretçiler güncel blog sever ! Blogunuzu çok fazla aksatmayın , yazdığınız yazılar mümkünse , bir çok kişiye hitap edecek şekilde olmalı , haftada bir yazı yazmayın , günde en az bir yazı paylaşın ve paylaştığınız bu yazıyı sırf yazmak için yazmayın , ziyaretçi kitlenize göre ne uygun bir yazı yazmaya çalışın....
Sıkıcı olmayın ; Her ne kadar ciddi bir blogunuz olsada , bazen blogunuzda komik bir resim , fotoğraf , karikatür vb.. paylaşımlar yaparak ziyaretçilerinizi anlıkta olsa eğlendirebilirsiniz..
Google ile aranızı sağlam tutun ; Yazılarınız güncel ve sizin tarafınızdan yazılmış olsun , kopyala yapıştır yapmayın , blogunuza yüzlerce etiket eklemeyin, etiketler önemlidir...
28 Nisan 2012 Cumartesi
Otomatik Thumbnail ve Devamını Oku Eklentisi
Unknown
14:00
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
kayıtlar
,
konular
,
otomatik
,
resim
,
Thumbnail
,
yayınlar
Hiç yorum yok
:
Otomatik Thumbnail ve Devamını Oku Eklentisi
Bir çok kişinin kullandığı Otomatik Thumbnail ve Devamını Oku Eklentisinde , blogunuzda yazdığınız yazılara otamatik olarak konu içerisindeki resim ve devamını oku bağlantısının nasıl ekleneceğini bu yazımızda bulabilirsiniz...
Görüntü açısından da kullanışlı olan Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogunuzda konuların uzayıp gitmesini engeller..Ana sayfada ve diğer sayfalarda daha iyi bir görüntü sağlar..
Hemen anlatıma geçelim..
Widget Şablonlarını Genişlet kutucuğunu işaretlediğinizden emin olun ve aşağıdaki kodu bulun..
</head>
Bulduğumuz kodun hemen üstüne , aşağıda yer alan kodları ekleyelim..
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 140;
img_thumb_width = 140;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3_LlVCNNEQB8TVYqPA9v1wH5muULrmqnWtsPhfRjg6DENtZ7dZnPVkOoRVyRpX_rNeUDGomJQ4xBpLNZ1ma5X7FkH_2nCYUwXRfd4g2LbDsvZT50lWQlcdzB_I0u17ZSM0upZSE70Gjn3/s0/2nrklth.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Şimdi ise aşağıdaki kodumuzu bulalım..
<data:post.body/>
Bu kodumuzu aşağıdaki kod ile değiştirelim..( Daha detaylı olarak , bu kodu silin ve yerine aşağıdaki kodları ekleyin )
<!-- eklentileri.blogspot.com thumbnail devamını oku başlangıcı -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Devamını oku...</a>
</b:if>
</b:if>
<!-- eklentileri.blogspot.com thumbnail devamını oku bitişi -->
Yukarıdaki işlemleri yaptıysanız Otomatik Thumbnail ve Devamını Oku Eklentisini artık blogger blogunuzda kullanabileceksiniz..
Yukarıda eklemeniz gereken ilk kod içinde yer alan ;
Yukarıda eklemeniz gereken ilk kod içinde yer alan ;
img_thumb_height = 140;
img_thumb_width = 140;
Değerlerini değiştirerek , thumbnail yani ana sayfanızda görünecek resmin boyutunu ayarlayabilirsiniz..<<< Bu Yazı için Arama Sonuçları >>>
Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogger Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogger Thumbnail ekleme , Blogger Devamını oku Eklentisi , Blogger Devamını Oku ekleme , Blogger Thumbnail ve Devamını Oku
Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogger Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogger Thumbnail ekleme , Blogger Devamını oku Eklentisi , Blogger Devamını Oku ekleme , Blogger Thumbnail ve Devamını Oku
27 Nisan 2012 Cuma
Blogger Resimli Benzer Yazılar Eklentisi v.2
Unknown
15:00
benzer
,
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
resim
Hiç yorum yok
:
Blogger Resimli Benzer Yazılar Eklentisi v.2
Blogger blogunuz için Resimli benzer yazılar eklentisi istermisiniz ?
Daha önce BU yazımızda , resimli benzer yazılar eklentisinin nasıl yapılacağını anlatmıştık , farklı olarak bu eklentimizde , benzer yazılarınız , alt alta resimli şekilde listeleniyor..
Ziyaretçilerinizin ilgisini çekmek için resimli benzer yazılar eklentisini blogunuza eklemek için aşağıdaki anlatımı takip edin.
Öncelikle , Widget Şablonlarını Genişlet kutucuğunu işaretleyin ve Aşağıda yer alan kodumuzu bulun..
</head>
Hemen üstüne , altta yer alan kodlarımızı ekleyelim..
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
text-transform:none;
padding-left:5px;
}
#related-posts li {
list-style:none;
}
#related-posts h2{
font-size: 18px;
font-weight: bold;
color: #003300;
}
#related-posts a{
font-size: 16px;
color:#868686;
}
#related-posts a:hover{
color:black;
}
a.hidden img{
filter:alpha(opacity=70);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.hidden:hover img{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;}
</style>
<script src='http://yourjavascript.com/1124875421/benzer.js' type='text/javascript'/>
</b:if>
Şimdi ise bu kodumuzu buluyoruz..
<data:post.body/>
Hemen altına aşağıdaki kodlarımızı ekleyelim..
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="BENZER YAZILAR";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
Anlatılanları doğru yaptıysanız eklentimiz artık hazır... << DEMO >>
<<< Bu Yazı için Arama Sonuçları >>>
Blogger Resimli Benzer Yazılar Eklentisi v.2 , Blogger Resimli Benzer Yazılar Eklentisi , Blogger Resimli Benzer Yazılar , Blogger Benzer Yazılar Eklentisi , Blogger Benzer Yazı Nasıl Eklenir
Blogger Resimli Benzer Yazılar Eklentisi v.2 , Blogger Resimli Benzer Yazılar Eklentisi , Blogger Resimli Benzer Yazılar , Blogger Benzer Yazılar Eklentisi , Blogger Benzer Yazı Nasıl Eklenir
21 Nisan 2012 Cumartesi
Blogger Blogunuz Daha Hızlı Açılsın
Unknown
13:43
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
blogger ipucu
,
resim
Hiç yorum yok
:
Blogger Blogunuz Daha Hızlı Açılsın
Öncelikle bu yazımız bir eklenti değildir , Sadece blogger blogunuzun daha hızlı açılması için ipuçları içerir..
<< Resim >>
Blogger bloglarınızda , yazı içlerinde onlarca resim kullanmayın , mümkünse tek resim her zaman açılış hızı açısından önemlidir..Blogunuza eklediğiniz resimlerin boyutu büyük olmasın , büyük boyutlu resimler sayfanın yüklenme süresini geciktirir..
Blogger bloglarınızda , yazı içlerinde onlarca resim kullanmayın , mümkünse tek resim her zaman açılış hızı açısından önemlidir..Blogunuza eklediğiniz resimlerin boyutu büyük olmasın , büyük boyutlu resimler sayfanın yüklenme süresini geciktirir..
<< Eklenti >>
Blogger bloglarımızda kullandığımız eklentiler vazgeçilmez , olmazsa olmazlardandır..Blogunuzda Gereksiz eklentilerden kaçının , mümkünse , hareketli çok fazla eklenti kullanmayın , örneğin ; flash obje içeren eklentiler blogunuzun açılış hızına etki eder..
Blogger bloglarımızda kullandığımız eklentiler vazgeçilmez , olmazsa olmazlardandır..Blogunuzda Gereksiz eklentilerden kaçının , mümkünse , hareketli çok fazla eklenti kullanmayın , örneğin ; flash obje içeren eklentiler blogunuzun açılış hızına etki eder..
<< Javascript >>
Blogger blogumuzda , Hıza etki eden bir faktörde javascript dosyalarıdır , Bazen kullandığınız temanın içinde zaten varlardır, bazende kullandığınız eklentilerde de yer alırlar , bu javascript dosyaları başka kaynaklarda yüklü olduklarından , Blogger açılırken , kendi barındıkları sunuculara bağlanıp blogunuzun açılışını yavaşlatabilirler..
Blogger blogumuzda , Hıza etki eden bir faktörde javascript dosyalarıdır , Bazen kullandığınız temanın içinde zaten varlardır, bazende kullandığınız eklentilerde de yer alırlar , bu javascript dosyaları başka kaynaklarda yüklü olduklarından , Blogger açılırken , kendi barındıkları sunuculara bağlanıp blogunuzun açılışını yavaşlatabilirler..
Sonuç olarak , blogger blogunuzun daha hızlı açılmasını istiyorsanız , yazılarınıza onlarca resim eklemeyiniz, ve gereksiz eklentilerden kaçınınız..
<<< Bu Yazı için Arama Sonuçları >>>
Blogger Blogunuz Daha Hızlı Açılsın , Blogger Daha Hızlı Açılsın , Blogger Hzılandırma , Blogger Sayfam Nasıl Hızlı Açılır , Blogum Yavaş Açılıyor , Blogger Hızlandırma teknikleri , Blogunuz Daha Hızlı Açılsın
Blogger Blogunuz Daha Hızlı Açılsın , Blogger Daha Hızlı Açılsın , Blogger Hzılandırma , Blogger Sayfam Nasıl Hızlı Açılır , Blogum Yavaş Açılıyor , Blogger Hızlandırma teknikleri , Blogunuz Daha Hızlı Açılsın
30 Mart 2012 Cuma
Blogger Yorum Kutusuna Arka Plan Ekleme
Unknown
13:23
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
kutu
,
resim
,
yorum
Hiç yorum yok
:
Blogger Yorum Kutusuna Arka Plan Ekleme Eklentisi...
Blogger blogunuzdaki yorum kutusunun görüntüsü hoşunuza gitmiyor yada daha hareketlilik kazandırmak istiyorjavascript:void(0);sanız bu eklenti tam size göre..
Blogger yorum kutunuz daha görsel ve renkli hale gelecek..
Aşağıdaki kodu bulun
]]></b:skin>
Bu kodun üstüne aşağıdaki kodları ekleyin
#mybtips-form iframe{
background:#ffffff url(BURAYA RESIM LINKI) repeat;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#ffffff;
width:560px; height:213px !important;
}
#mybtips-form a{
color:#000;
}
Üstteki işlemi yaptıktan sonra aşağıdaki kodu bulun , blogunuzda 1 veya 2 tane olacaktır..
<div class='comment-form'>
üstteki kodu silip yerine aşağıdaki kodu yapıştırınız..
<div id='mybtips-form'>
Resim linki yazan yere, aşağıdaki resimlerden beğendiğinizin linkini yazıp , o resmi kullanabilirsiniz..DEMO
Bu kısmı en son deneyiniz ! eğer yorum formunuz , yorum yapılan konularda gözükmüyorsa aşağıdaki adımı uygulayınız
'comment-holder' kodunu aratın blogunuzda , 2 sonuç çıkacaktır..
her ikisinide 'mybtips-form' olarak değiştirin..
Floral
Image URL:
http://1.bp.blogspot.com/-TjJflzKETo4/ToB8PzdeWdI/AAAAAAAAAO4/e39aQolo8c8/s1600/238+%25281%2529.jpg

Wire Fence
Image URL:
http://3.bp.blogspot.com/-9J_2sSAD-Wg/ToCAy4hppjI/AAAAAAAAAPM/3FKPo9TZoFU/s1600/153.jpg

Metallic
Image URL:
http://2.bp.blogspot.com/-nvs8ifZy9o8/ToB8Oh9jvoI/AAAAAAAAAO0/fPxeGXUTsG0/s1600/12.png

Stripes
Image URL:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFZu-AvC_wDJYR9M1-mm5Yh4Y1_SJ0gnRGdNgAeddUYNHcNM37buhDcwlToQteO7ZC7sJyay9jfUZdlecT1OHxdzN9I0DCON81YSTVSEV8xSSWsAEA8oZuSPZJ_CkI2Y6bgxEZSNPGZhd/s1600/152.jpg

Metallic Grid
Image URL:
http://3.bp.blogspot.com/-MayXHtLb8pA/ToCDZM4EUjI/AAAAAAAAAPU/qXueR9EGUks/s1600/115.jpg

<<< Bu Yazı için Arama Sonuçları >>>
Blogger Yorum Kutusuna Arka Plan Ekleme , Blogger Yorum Kutusu , Blogger Yorum Kutusu görsel , Blogger Yorum Kutusu renklendir , Blogger Yorum Kutusu resim ekle , Blogger Yorum Kutusu eklentisi , Blogger Yorum Kutusu eklentileri , Blogger Yorum formu arka plan ekleme , Blogger Yorum formu resmi
Blogger Yorum Kutusuna Arka Plan Ekleme , Blogger Yorum Kutusu , Blogger Yorum Kutusu görsel , Blogger Yorum Kutusu renklendir , Blogger Yorum Kutusu resim ekle , Blogger Yorum Kutusu eklentisi , Blogger Yorum Kutusu eklentileri , Blogger Yorum formu arka plan ekleme , Blogger Yorum formu resmi
27 Mart 2012 Salı
Yorum Gönder Yazısı Yerine Resim Eklemek
Unknown
02:25
Blogger
,
Blogger Eklenti
,
Blogger Eklentileri
,
blogger eklentisi
,
Blogger Widget
,
resim
,
yazı
,
yorum
Hiç yorum yok
:
Yorum Gönder Yazısı Yerine Resim Eklemek
Blogger blogunuzda bulunan yorum gönder yazısı yerine resim eklemek istermisiniz ? aşağıda yer alan kodlar yardımı ile , yorum gönder yazısı yerine istediğiniz resimi ekleyebilirsiniz..
Bu sayede yorum gönder formunuz daha şık bir hal alacak..
, Yorum Gönder Yazısı Yerine Resim Eklemek için , aşağıdaki kodu bulunuz..
]]></b:skin>
, Bu kodun hemen üstüne aşağıdaki kodu ekleyiniz..
#comment-post-message {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8hadSXjxXRBu2ui-qF_OlvmtP-rwoBrFpc6uI9CKkT67j7p9GvQwNoO_ZYwSoEuWS-VG4q5iONCZtHWnYROTePc-yTTv6xKyBzhsroC4bD1oLKyRwLiviXgoMNj3PciT8A5oI8736mC5S/s1600/yorum.png") no-repeat scroll left top transparent;
height:52px;
margin-bottom:10px;
text-indent:-9999px;
width:485px;
}
, Yapmamız gereken sadece bu kadar , artık yorum gönder yerine resmimiz çıkacak...eğer resmi değiştirmek isterseniz , kırmızı olan yere kendi upload ettiğiniz resim linkini ekleyiniz..
Kaydol:
Kayıtlar
(
Atom
)
















