Eklenti blog sahibinin yorum rengini değiştirerek daha belirgin hale getirmeye yarayan eklenti.Eklentinin en güzel yani çok kolay kuruluma sahip olması yani oldukça güzel bir eklenti ve kurulumu oldukça basit ve artık kuruluma geçelim.
Kurulum: Şablon>Htmlyi Düzenle>Devam Et yolunu izleyerek Widget Şablonlarını Genişlet'i işaretleyip aşağıdaki kodu aratın.
</body>
Bulduğunuz kodun üstüne aşağıdaki kodları ekleyin.
<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- ss highlight author starts -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('background','#F0A2A2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ibamGMZimoxoJsk4s7UORuDCyu0SlfmGPU0tkKavoutSBqxh9TJ68PvoOwhwdN3nrV7mG6nlen7h3WnvHV3AmIyE7I_H4JnApl2UreuQ2J_DjC2AxJlhOFNDMT1-ltR2aoZROy9rYmA/s1600/beyaz.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- ss highlight author ends -->
Kodu ekledikten sonra artık olması gerek eklentinin yorumlarınızın rengi değişmiş olucak.Kodlar arasında ' .css('background','#F0A2A2 ' kısmındaki renkleri değiştirerek istediğiniz rengi seçebilirsiniz
İlgili özelliği sağlıklı bir biçimde kullanmak için öncelikle temamızın HTML kodları içerisinde aşağıdaki kodu bulalım.
</body> <script type="text/javascript">
//<![CDATA[
var snowmax=300
var snowtype=new Array("Times","Arial","Times","Verdana")
var snowcolor=new Array("#f2f8fa","#eff5f7","#dcedf1","#ffffff","#BFE4FF")
var snowletter="*"
var sinkspeed=0.6
var snowmaxsize=30
var snowminsize=10
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.scrollHeight
marginright = document.body.clientWidth-15
}
else if (ns6) {
marginbottom = document.body.scrollHeight
marginright = window.innerWidth-15
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size+'px';
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].style.zIndex=1000
snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left=snow[i].posx+'px';
snow[i].style.top=snow[i].posy+'px';
}
movesnow()
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
snow[i].style.top=snow[i].posy+'px';
if (snowi].posy>=marginbottom-2*snow[i].size .style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0
}
}
var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
window.onload=initsnow
}
//]]>
</script> 
Öne Çıkan Yayın adlı özellik sayesinde artık bu yöndeki ihtiyaçlarımızı kolaylıkla giderebileceğiz. Artık blogunuzda yer alan istediğiniz bir yazıyı, öne çıkarabileceksiniz. Böylelikle ilgili yazınız daha fazla okunacaktır. Nedeni ise, bildiğiniz gibi ana sayfada yer alan yazılar, yeni içerik ekledikçe arka sayfalara gitmektedir. Bu özellik sayesinde ise, sabit olarak bir yazınızı öne çıkarabiliyorsunuz. Peki bu gadget’ı nasıl kullanacağız?
- Öncellikle Blogger‘a giriş yapın.
- Blogunuzun Kontrol paneli’ne giriş yapın.
- Yan menüde yer alan Yerleşim bağlantısına tıklayın.
- Gadget Ekle > Öne Çıkan Yayın bağlantısına tıklayın.
- İlgili ayarları tamamladıktan sonra, Kaydet butonuna tıklayın.
Not: İlgili yönergeler çerçevesinde, öne çıkardığınız ilgili yayını aralıklarla değiştirmenizi öneririz. Böylelikle web sitenizde yer alan diğer yazılarınızın da ulaştığı kitle olasılıkla artmış olacaktır.
Blogger kullanımı kolay bir bloglama sistemidir. Eklentiler ile kullanımı daha da kolay hale getirebilecek kadar basittir. Bu eklentimiz sayesinde blog yazılarımızda, klavyelerimizde bulunan yön tuşları ile önceki ya da sonraki yazılara geçiş yapmayı sağlayan bir eklentiden bahsedeceğiz. Eklenti kodları tek yapıdadır, yani uğraştıracak eklentilerimizden değil. Dilerseniz eklenti kurulumuna geçelim.
Blogger panelinden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izliyoruz ve her zamanki gibi kodları ekliyoruz.
<script type="text/javascript">
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
</script>
Uzun süredir Facebook, hep aynı tasarımdan oluşan beğeni kutusu kullanıyordu ve herhangi bir değişiklik bulunmuyordu.Kısa bir süre önce tasarım değişikliği yapıldı.Kapak fotoğrafını da işin içine dahil eden Facebook güzel bir görüntü ortaya çıkarmayı başarmış.Dilerseniz gelin özelliklerden söz edelim.
Ne gibi değişiklikler yapıldı?
Nasıl Kullanılır?
Blogger > Blogunuz > Yerleşim > Gadget Ekle > HTML/Javascript kısmına aşağıdaki kodları kendinize göre düzenledikten sonra kopyalayıp yapıştırın ve kaydedin.
Değiştirebileceğiniz Yerler;
Ne gibi değişiklikler yapıldı?
- Sayfanıza ait kapak fotoğrafı görüntüleme/gizleyebilme
- Sayfa akışını görüntüleyebilme
- Eklenti üzerinde beğen ve paylaş butonları
- Genişlik ve uzunluk değerlerini ayarlayabilme
- Çok daha şık ve modern bir görünüm
Nasıl Kullanılır?
Blogger > Blogunuz > Yerleşim > Gadget Ekle > HTML/Javascript kısmına aşağıdaki kodları kendinize göre düzenledikten sonra kopyalayıp yapıştırın ve kaydedin.
<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/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/BlogEklentileri"
data-width="330" data-height="350"
data-hide-cover="false" data-show-facepile="true" data-show-posts="false">
</div>
Değiştirebileceğiniz Yerler;
- https://www.facebook.com/BlogEklentileri buradaki adresi kendi sayfa adresinizle değiştirin.
- data-width="330" 330 değeri eklentinin genişliği ifade eder, kendinize göre arttırıp azaltabilirsiniz.
- data-height="350" 350 değeri eklentinin yüksekliğini ifade eder.
- data-hide-cover="false" false değerini true yaparak kapak fotoğrafının görünmesini engelleyebilirsiniz.
- data-show-facepile="true" true değerini false yaparak beğenen kişilerin fotoğraflarının görünmesini engelleyebilirsiniz.
- data-show-posts="false" false değerini true yaparak yayın akışınızı görüntüleyebilirsiniz.
Css Kodları
]]></b:skin> kodunu aratın ve hemen üstüne alttaki kodları ekleyin.
#header3-1-left-tickerimg{float:left;}
#beakingnews {
float: left;
height: 20px;
line-height: 25px;
overflow: hidden;
width: 107.2%;
}
#recentpostbreaking li a {
color:#000000;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 5px;
}
#recentpostbreaking li a:hover {
color:#333;
}
#beakingnews .tulisbreaking {
background:#333;
}
#beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#beakingnews .tulisbreaking {
color: #000000;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 5px 10px;
position: absolute;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
}
#recentpostbreaking {
float: left;
margin-left: 14px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:-22px 0 0}
Html Kodları
Aşağıdaki kodları sitenizin neresine isterseniz oraya yapıştırabilirsiniz.
<div class='header3-1-left-tickerimg'><img alt='Headlines' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzJaL62ge-YN5KAAaasslrHxcfwxf04WzC7z04qmRVWNiCzXLjRMgr2_BTKfKThDeKhW__Wt6oaxXD8z7ll64BrkEf8nRJW2TEsFAmg9wu4zhUg1HBY0R5-hFG7pb_TdpMhjjA5TMRor_/s1600/yazi-bandim.png'/></div>
<div id='header3-1-left-ticker'><ul>
<div id='beakingnews'>
<div id='recentpostbreaking'>
Yükleniyor...
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://yunusbalimm.blogspot.com.tr', // Replace With your Blog Url
numpostx = 20; // Maximum Post
$.ajax({
url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl, posttitle, skeleton = '',
entry = data.feed.entry;
if (entry !== undefined) {
skeleton = "<ul>";
for (var i = 0; i < entry.length; i++) {
for (var j=0; j < entry[i].link.length; j++)
{
if (entry[i].link[j].rel == "alternate")
{
posturl = entry[i].link[j].href;
break;
}
}
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
}
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking
ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#recentpostbreaking').html('<span>No result!</span>');
}
},
error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script></ul></div>
Yukarıda kırmızı ile belirttiğim 20 sayısını ne kadar yazı gösterilmesini istediğiniz sayı ile değiştiriniz.Kırmızı ile belirttiğim http://yunusbalimm.blogspot.com.tr adresini kendi blog adresiniz ile değiştirin.Yapamadığınız bir yer olursa yorum yazarak belirtiniz.
Bu eklenti blogunuzdaki resimlerin hepsinin birden yüklenmesini engeller, sadece görünen yerlerdeki resimleri yükler ve bu sayede blogunuz hızlanmış olur. Hiç bir zararlı etkisi yoktur, özellikle galeri tarzı blogu olan yada çok görsel kullanan bloggerlar için birebir eklenti diyebiliriz.
Gelelim kuruluma;
Öncelikle Blogger Kontrol Panelinden Şablon > HTML'yi Düzenle kısmına giriyoruz ve aşağıdaki kodu aratıyoruz.
</head>
Bu kodun hemen altına aşağıdaki kodu ekliyoruz.
<script charset='utf-8' src='http://konfor.enesilhan.net/js/jquery.min.js' type='text/javascript'></script>
<script src='http://konfor.enesilhan.net/js/jquery.lazyload.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
$("img").lazyload({
placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQFwb-qHsnFhqUS403VlDKzRDETIFJFsuUt38xneTyrCakJxtcdgoDkMemVkOqiQszKtXb80ph8XfaN5OZSTODTUjMh-QUkJ7Z7AhT1rmKHHgnJzPMptsYFDVN9F_K9niB4879_xsPAHE/s1600/grey.gif",
effect : "fadeIn"
});
});
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
Blogger İçin sayfa yükleniyor eklentisi.
Css Kodları;
]]></b:skin> kodunu aratın ve hemen üstüne alttaki kodları ekleyin.
/* CSS Yükleniyor Sayfası */
div.sayfa-yükleniyor{opacity:0.9;filter:alpha(opacity=90);position:fixed;z-index:4000; text-align:center;}
div.sayfa-yükleniyorhd{top:0px;left:0px;}
div.sayfa-yükleniyor{_position:absolute;}
div.sayfa-yükleniyorhd{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
div#yukleniyor{background-color:#ffffff;width:100%;height:100%;padding-top:20%;}
.yukleniyor_resim {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqBRP01Mm1Xy_dzwhSt3jNMxWRqRUFdWj1WevTt7oKAHshmzGM7BQ78pac1f9Dee2yIGAmtF9ebMfcZJ_kD3T0pxjI0haqJEsgEfTOi66uT91wxfHB8Po5DIzM0h8W0ssN0vDyVGQF27J/s1600/Loader3.gif);padding:0px;margin:0px;background-color:transparent;border:none;width:110px;height:110px;}Js Kodları;
</head> kodunu aratın ve hemen üstüne alttaki kodları ekleyin.
<script type="text/javascript">
window.onload=function(){document.getElementById("yukleniyor").style.display="none";}
</script>Html Kodları;
</head> kodunu aratın ve hemen altına alttaki kodları ekleyin
<div id="yukleniyor" class="sayfa-yükleniyor sayfa-yükleniyorhd">
<center>
<div style="font-family:Arial;font-size:19px;color:#4f4f4f;">Lütfen Bekleyiniz..</div><br/><br/>
<div class="yukleniyor_resim"> </div>
</center>
</div>
