twitter

KURULUM HAKKINDA


Şablon > Html'yi düzenle deyin ve tema kodlarınız arasında Ctrl+F ile aşağıdaki kodu bulun.

</head>

Yukarıdaki kodun hemen üzerine aşağıdaki kodları ekleyin.

<script type='text/javascript'> 
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 0;
img_thumb_width = 0;
</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, pURL, pTITLE){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {    
        imgtag = '<span style="float:left; padding:0 10px 5px 0;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img style="background:url() center center no-repeat ;" src="'+img[0].src+'" width="'+img_thumb_width+'200px" height="'+img_thumb_height+'165px"/></a></span>';
        summ = summary_img;
    }
    
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

//]]>
</script>

Devam edin ve kodlarınız arasında aşağıdaki kodu bulun. Bu koddan temanızda birden fazla bulunabilir, hepsini tek tek deneyerek hangisinde çalıştığını bulabilirsiniz.DENEMEK LAZIM YANİ BİRAZ

<data:post.body/>

Yukarıdaki kodu silin ve yerine aşağıdaki kodları ekleyin. ÇOK GÜZEL GİDİYORSUNUZ DEVAM

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,
&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);
</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='devamini-oku'>
<a expr:href='data:post.url'>Devamını oku</a>
</div>
</b:if>
</b:if>

İlk kodu detaylı incelediğinizde kırmızı ile işaretlediğim 4 kısım olduğunu göreceksiniz. Bunların ne işe yaradığını aşağıda anlattım.

summary_noimg = 500; : Yazıda resim olmadığında görülecek karakter sayısı
summary_img = 500; : Yazıda resim olduğunda görülecek karakter sayısı
200px : Resmin uzunluğunu belirler
165px : Resmin yüksekliğini belirler

İŞLEM BİTTİ DENEYİN BAKALIM ŞİMDİ NASIL OLMUŞ BAKIN
5 Eylül 2015 Cumartesi | 0 yorum | Etiketler: , , ,


 

Kurulum


  • Blogger kumanda paneline gidin
  • Eklentiyi kurmak istediğiniz blogun ismine tıklayın
  • Sol menüden "Yerleşim" ögesini seçin
  • Açılan sayfada eklentiyi kurmak istediğiniz kısımda bulunan "Gadget Ekle" butonuna tıklayın.
  • Son olarak ögeler arasından "HTML/Javascript" i seçin ve "İçerik" kısmına kodları yapıştırıp kaydedin.
Resimli rastgele yazılar kodu:

<style>
#rastgele-yazi img{border-radius:5px;float:left;margin-right:5px;width:60px;height:60px;background:#F5F5F5;padding:3px;transition:all .2s linear 0}
#rastgele-yazi img:hover{opacity:.6}
ul#rastgele-yazi{list-style-type:none;padding:0}
#rastgele-yazi a{font-size:12px;font-weight:700;padding:0 auto 5px}
#rastgele-yazi a:hover{text-decoration:none}
.ry-icerik{font-size:11px;background:none;padding:5px;margin-right:8px}
.ry-bilgi{margin-top:5px}
#rastgele-yazi li{margin-bottom:10px;border-bottom:1px solid #EEE;padding:4px}
</style>
<ul id='rastgele-yazi'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=110;
var rdp_info='yes';
var rdp_comment='Yorum';
var rdp_disable='Yoruma kapalı';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>  
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcUfvAx9DrdXLDG9tR32t8EyXznWCDj1-vsMNUZBEtk33jdRrqfHISSR2uVjqMDepdd5KG1FT1VnHyYmUuf_AWUuLOW9lX2-RPlJIRC9Wn887D6r6fjlL4OxUkrrrGU1cZRB3O1dyA2lI/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="ry-bilgi">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="ry-icerik">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Instagram widgeti Blogger'a nasıl eklenir?


1. Widgeti oluşturmamızı sağlayan http://snapwidget.com/#getstarted adresine gidelim.

2. Açılan sayfada bilgileri kendinize göre doldurun.



Username: Instagram kullanıcı adınız buraya gelecek.
Hashtag: Özellikle göstermek istediğiniz bir fotoğraf serisi varsa kullanabilirsiniz. Örneğin cmylmz adlı kullanıcının AliBabaVe7Cüceler hashtagli fotoğraflarını listelemek gibi. Eğer bir hesabınız yoksa belli hashtaglere ait fotoğrafları da bu sayede sergileyebilirsiniz.
Widget Type: Eklenti tipini seçmeniz isteniyor. Eğer eklentiyi yan menüde kullanmayı düşünüyorsanız Grid'iseçmenizi öneririm. Onun dışında BoardScrollingSlideshow ve Map stili bulunuyor. Kullanmak istediğiniz stile göre özellikler artıp azalıyor. Tüm özellikleri barındırdığı için anlatıma Grid üzerinden devam etmek istiyorum.


Thumbnail Size: Fotoğrafların boyutunu buradan belirleyebilirsiniz. Çok fazla büyütüp insanları rahatsız etmek veya çok küçültüp görülmeyecek hale getirmek yanlış olacağından 125px çok ideal bir boyut gibi duruyor.
Layout: Bu kısımdaki sayıları değiştirerek yan yana ve alt alta kaç adet resim görüntüleneceğini belirleyebilirsiniz. Resim boyutunu ve eklentiyi kullanacağınız alanın ölçülerini hesaba katarak yazmakta fayda var.
Photo Border: Resimlere çerçeve eklensin mi?
Background Color: Resimlerin arkaplan rengini değiştirir.



Photo Padding: Resimler arasındaki ne kadar boşluk olsun?
Hover EffectFade In seçeneğinde resimler bir miktar karartılıyor ve mouse ile üzerine gelindiğinde düzeliyor.Fade Out seçeneğinde ise tam tersi olarak resimler net gösterilip mouse ile üzerine gelindiğinde kararıyor.
Share Buttons: Fotoğrafların üzerinde mini paylaşım butonları çıkmasına yarıyor. Kesinlikle kullanılmasını öneriyorum.
Responsive: Bu seçenek özellikle responsive yani uyumlu tasarım kullananların çok işine yarayacak. Çünkü eklenti bu sayede çözünürlüğe göre boyutlanıyor. Responsive tasarım kullanmayan arkadaşların da aktifleştirmelerini öneririm.

Sayfanın altında yer alan gri Preview butonu ile eklentinizin blogunuza eklemeden önce önizlemesini yaparak nasıl durduğunu görebilirsiniz. Yeşil Get Widget butonu ile de size lazım olan kodları elde edebilirsiniz.

kodları blogumda nasıl kullanacağım?


Blog > Yerleşim > Gadget Ekle kısmına gelin. Gadget Ekle bağlantısına tıkladıktan sonra açılan sayfada biraz aşağı inerek HTML/Javascript'i seçin ve kodlarını buraya yapıştırıp kaydedin.
Fotoğraflarınıza özel bir sayfa oluşturmak isterseniz; Sayfalar > Yeni Sayfa > HTML bölümünden halledebilirsiniz.

Alternatif siteler


Genellikle tüm siteler aynı işi yapıyor ancak bir köşede dursun lazım olur diyerek kaydettiğim iki siteyi de sizinle paylaşmak istiyorum.
Instansive: Responsive Instagram Widget sloganıyla yayın yapan site ek olarak bizlere pinterest tarzını sunuyor birden fazla widgeti düzenleyebiliyorsunuz.
Intagme: Snapwidget'in biraz daha yalın hali denilebilir.

Benzer yazılar eklentisi nasıl kurulur?


1. Adım: Panelinizi açın ve Şablon > Html'yi Düzenle kısmına gelin.
2. Adım: CTRL+F komutu ile </head> kodunu aratın ve hemen üzerine aşağıdaki kodları ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:15px;padding-left:5px}
#related-posts .widget{padding-left:6px;margin-bottom:10px}
#related-posts .widget h3,#related-posts h3{font-size:1.2em;font-family:Tahoma;font-weight:700;color:#000;margin-bottom:.75em;margin-top:0;padding-top:0}
#related-posts a{color:#000}#related-posts a:hover{color:#FC9F4E}
#related-posts ul{font-family:Tahoma;list-style-type:none;margin:0;padding:0;font-size:13px;text-color:#000}
#related-posts ul li{background:url(http://2.bp.blogspot.com/-5zmeLSEoaxY/VVsW9SsYsFI/AAAAAAAABXU/FHEXH8VwM_I/s1600/tick.png) no-repeat 0 3px transparent;display:block;list-style-type:none;margin-bottom:6px;padding:0 0 6px 20px}
</style>
  <script type='text/javascript'>var relatedpoststitle=&quot;Buna benzer diğer yazılar&quot;;</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h3>'+relatedpoststitle+'</h3>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'" title="'+relatedTitles[r]+'" target="_blank">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if>

3. Adım: Devam edin ve yine CTRL+F komut ile <div class='post-footer'> kodunu bulun.
4. Adım: Hemen üzerine aşağıdaki kodları ekleyin. <div class='post-footer'> kodundan temanızda birden fazla bulunabilir, tek tek deneyerek hangisinin uygun olduğunu bulabilirsiniz.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script></div></b:if>

var maxresults=5; kısmındaki sayıyı değiştirerek görüntülemek istediğiniz yazı sınırını belirleyebilirsiniz.
 Right Click to Save Logo


   


























Right Click to Save Logo
| 0 yorum | Etiketler: , , ,

BlanterCraft Kişisel Blogger Teması Türkçe



Merhaba Arkadaşlar,
bu yayınımda sizlere çok güzel bir responsive kişisel blogger temasınından bahseceğim.Blanter Craft temada olan farklı özellikler gerçekten bir tasarım harikası.

Temanın Özellikleri
-Responsive Blogger Teması
-Türkçe Blogger Teması
-Hazır Reklam Alanları
-Aç / Kapa Menü Özellikli
-Sosyal Paylaşım Eklentili
-Yukarı Çık Eklentili

Tema Kurulumu
-Temayı aşağıdan indirdikten sonra;
-Blogger Admin Panel > Şablon Yedekle/Geri Yükle Dosya Seç ve temayı seçip yükle diyoruz ve mobil tasarımı devre dışı bırakıyoruz.




Blogger Şablonları SİTELERİ

Sitenize on numara şablonlar mı eklemek istiyorsunuz?
En güncel ve profesyonel şablonları indirip sitenize ekleyebilirsiniz...
YSN TASARIM SUNAR 

http://btemplates.com/http://bloggertemplates.info/
http://www.bloggertemplatesblog.com/http://www.bloggertemplatesfree.com/
http://www.bloggerstyles.com/http://www.newbloggertemplates.com/
http://10bloggertemplates.com/http://www.bloggertemplatesgenie.com/
http://www.freebloggertemplates.info/http://bloggertemplateplace.com/
http://www.bloggertemplateblog.com/http://www.bloggerthemes.net/

ÖNERİLEN ŞABLON :
http://btemplates.com/2013/blogger-template-sederhana-2/