blogger eklentileri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
blogger eklentileri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

5 Ocak 2017 Perşembe

09:36 Paylasan onuronline Yorum Yok Katagoriler : ,
Merhaba arkadaşlar,

Bugün sizlere blogger da resimli son yorumlar eklentisini paylaşacağım. Kendimde kullandığım bu eklenti bloglarınza görsellik açısından ayrı bir yer oluşturacaktır. Bu eklentinin kurulumu ise oldukça basit.


  • Tek yapmanız gereken sey K.paneli'ne girip Yerleşim sekmesinden yeni bir Gagdet Ekle diyerek yeni bir html sayfasi eklıyoruz. Daha sonra aşagıdaki kodu o kısma yapıstırıp kaydediyoruz ☺ İşte bu kadar.

<div class="widget-content"> <style scoped="" type="text/css"> #HTML5 .widget-content {max-height:300px;overflow:auto;} ul.arlinacomments{list-style:none;margin:0;padding:0}.arlinacomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-all;padding:10px 0;margin:0;}.arlinacomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.arlinacomments li img{position:relative;overflow:hidden;display:block;width:42px;height:42px}.arlinacomments li a{font-weight:700}.arlinacomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4} </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments function arlinacomments(a){var e;e='<ul class="arlinacomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW00hy7GDqfMtwoMuwMGuVXLKAcMVenCdeM0tOoHMuTrKK7vuF-V9Zz79bnE0iSRgwWaksBYcsCxx3DK1tpjmPY7Xg4kxMhIZP20h3p6eYVWi3s1M7TMIRQJTq9k9lpyGCYkSXl9TG794h/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDYPJzAGNIpQ9cRZVjowKkR0Zc54iC9Jw_tUVUVABDkXwgk3ZpL9Ccx-LgL53DdVBHA3tp3FcuMmICFOGTjkDQOV_L0djdn6SuH4Cjv9rVPQEfcPczZfGp5YRnPbfP-SvcLvUtjFfWHbEK/"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=15,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://2.bp.blogspot.com/-XjxrXKBPQqs/VYcGtLWPGUI/AAAAAAAAKaQ/5jr871JIwds/s1600/default-avatar.jpg",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUvN9MU6WeAIwW6_qNsx5z0Ij3-i4GvLBuIE8KZbny6dILjLWSsyjsM5UPOq3BpVg6fNV5UziSw1wmrDob7uwcDh5YMYHh1pdS0Hj6pX09IvOqtk5naketBTgpWJE3McXQL48WT3DuyA0_/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar; //]]> </script> <script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=arlinacomments&amp;max-results=15"></script><ul class="arlinacomments"><li><div class="avatarImage avatarRound"></div></li></ul> </div>


Herkese iyi bloglamalar ☺
09:22 Paylasan onuronline 2 adet yorum var! Katagoriler : ,
Merhabalar,

Blogger da eklenti yayınlarına başlamış bulunmaktayız ☺ İlk yayınımız da sizlere blogger da genelde tema paylaşım sitelerinin kullanabileceği bir eklentiyi sizlerle paylaşıyorum.

Bu şık ve gösterişli eklentiyi oluşturmak o kadar da zor değil. Sadece yapmanız gereken şey aşağıda vereceğim adımları sırasıyla uygulamak olacaktır.

  •  K.Paneli > Şablon > Html Düzenle adımlarını takip ediyoruz ve ( ctrl+f ) yardımıyla </head> etiketini buluyoruz , hemen üstüne aşağıdaki kodu yapıştırıyoruz.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

  • Yine aynı sayfadan sırasıyla ctrl+f yardımıyla " </style> " kodunu buluyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz.

.bstbuton{margin:20px auto;padding:20px 0;width:200px}
.bstbuton a{background:#fff;color:#666;display:block;font-size:17px;font-weight:700;font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2}
.bstbuton a:before{content:'\f019';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.bstbuton span{background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial',Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.bstbuton .up{background:#e25734;margin:-30px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.bstbuton .down{margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform:translate(0,-50px);transition:350ms}
.bstbuton:hover .up{opacity:1;transform:translate(0,0)}
.bstbuton:hover .down{opacity:1;transform:translate(0,-90px)}
.bstbutondemo{margin:20px auto;padding:20px 0;width:200px}
.bstbutondemo a{background:#e25734;color:#fff;display:block;font-size:17px;font-weight:700;font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;transition:350ms}
.bstbutondemo a:before{content:'\f08e';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.bstbutondemo a:hover{color:#fff}
.bstbutondemo span{background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial',Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.bstbutondemo .up{background:#444;margin:-28px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.bstbutondemo:hover .up{opacity:1;transform:translate(0,0)}


. Şablon kısmına eklememiz gereken kodlar bu kadar.


  • Şimdi ise aşağıda verdiğim kodları yazılarınızda bu butonları nerede görüntülemek istiyorsanız oraya yapıştırmanız gerekiyor. 
<div class="bstbutondemo"> <a href="https://tastanblog.blogspot.com/">Demo</a> <span class="up">Demo için tıklayın</span></div> <div class="bstbuton"> <a href="https://tastanblog.blogspot.com/">Download</a> <span class="up">İndirmek için tıklayın</span> <span class="down">https://tastanblog.blogspot.com/</span></div>

GÖRÜNÜMÜ BU ŞEKİLDE OLACAKTIR 


Evet herşey bu kadar basit arkadaşlar. Herhangi bir sıkıntı yaşayanlar yorum kısmında belirtirse yardımcı olmaya çalışırım. Herkese iyi bloglar ☺

ADs

AddPro Submit Your Site To The Web's Top 50 Search Engines for Free! Sonic Run: Internet Search Engine