Blogger 5 Harika Son Paylaşımlar Tasarımı

Paylaşan Admin

21 Temmuz 2019 Pazar

Blogger 5 Farklı Son Paylaşımlar Tasarımı

Blogger 5 Harika Son Paylaşımlar Tasarımı

Blogunuzda ki en son paylaştığınız içeriklerin düzenli bir şekilde sidebar kısmında veya nerede görüntülenmesini istiyorsanız o bölümde güzel bir görselliğe sahip 5 farklı tasarımla listelenmesini ister misiniz? Bu paylaşımda 5 Harika Son Paylaşımlar Tasarımını adım adım uygulayarak blogunuza ekleyebilirsiniz.

✅Son Paylaşımlar Nasıl Eklenir?

1- Blogger Kontrol Paneli'ne giriyoruz.
2- "Yerleşim>Hangi alanda görüntülenmesini istiyorsak o alanda Yeni Gadget Oluştur" diyoruz.
3- Açılan pencereden "HTML/JavaScript" i seçiyoruz ve aşağıdaki 5 farklı tasarımdan hoşunuza giden tasarımın kodlarını kopyalayıp yapıştırıyoruz.

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul 
class="recent-posts-container">');for(var e=0;e<posts_no;e++){var 
r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var
o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var
l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var
u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var
h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new
Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li
class="recent-posts-list">'),1==posts_date&&document.write('<div
 class="post-date">'+A[parseInt(w,10)]+" "+v+" 
"+f+"</div>"),1==showpoststhumbs&&document.write('<a 
href="'+r+'"><img class="recent-post-thumb" 
src="'+u+'"/></a>'),document.write('<div 
class="recent-post-title"><a href="'+r+'" target 
="_top">'+i+"</a></div>");var 
g="",k=0;document.write('<div 
class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+="
 <br> "),"1 Comments"==l&&(l="1 Comment"),"0 
Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target 
="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+="
 | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target 
="_top">Read 
more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script 
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; 
width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 
1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: 
left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 
0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: 
counter(countposts,decimal);counter-increment: countposts;z-index: 
2;position:absolute; left: 5px; font-size: 16px;color: 
#4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid 
#efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul 
class="recent-posts-container">');for(var e=0;e<posts_no;e++){var 
r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var
o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var
l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var
u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var
p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new
Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li
class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a
 href="'+r+'"><img class="recent-post-thumb" 
src="'+u+'"/></a>'),document.write('<div 
class="recent-post-title"><a href="'+r+'" target 
="_top">'+i+"</a></div>"),"content"in n)var 
A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var 
A="";var 
k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var
 y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var 
_="",$=0;document.write('<br><div 
class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+"
 "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | 
"),_=_+'<a href="'+r+'" class="url" target ="_top">Read 
more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" 
<br> "),"1 Comments"==l&&(l="1 Comment"),"0 
Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target 
="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script 
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px
 0px 
0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background:
 #fff}
ul.recent-posts-container {list-style-type: none; background: 
#fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 
0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var 
r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var
a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var
 i="... read more";i=i.link(r);var 
l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new
Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in
 s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var 
d="";var 
v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li 
class="recent-post-title">'),document.write(n),document.write('</li><div
class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var
 f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" 
"+i)}document.write("</div>"),1==posts_date&&document.write('<div
 class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: 
counter(countposts,decimal);counter-increment: countposts;float: 
left;z-index: 1;position:relative;font-size: 15px;font-weight: 
bold;color:#fff;background:#69B7E2; margin:13px 5px 0px 
-6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom:
 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px 
"Avant Garde",Avantgarde,"Century 
Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 
0px 5px 0px 20px; margin-left: 10px; font: 15px 
Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New 
Roman",serif;}
</style></div>

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul 
class="recent-posts-container">');for(var e=0;e<posts_no;e++){var 
r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var
o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var
l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var
u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var
p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new
Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li
class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a
 href="'+r+'"><img class="recent-post-thumb" 
src="'+u+'"/></a>'),document.write('<div 
class="recent-post-title"><a href="'+r+'" target 
="_top">'+i+"</a></div>"),"content"in n)var 
A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var 
A="";var 
k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var
 y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var 
_="",$=0;document.write('<br><div 
class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+"
 "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | 
"),_=_+'<a href="'+r+'" class="url" target ="_top">Read 
more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" 
<br> "),"1 Comments"==l&&(l="1 Comment"),"0 
Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target 
="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script 
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: 
counter(countposts,decimal);counter-increment: countposts;z-index: 
1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color:
 #fff;background: 
#69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius:
 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul 
class="recent-posts-container">');for(var e=0;e<posts_no;e++){var 
r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var
o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var
l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var
u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var
h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new
Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li
class="recent-posts-list">'),1==posts_date&&document.write('<div
 class="post-date">'+A[parseInt(w,10)]+" "+v+" 
"+f+"</div>"),1==showpoststhumbs&&document.write('<a 
href="'+r+'"><img class="recent-post-thumb" 
src="'+u+'"/></a>'),document.write('<div 
class="recent-post-title"><a href="'+r+'" target 
="_top">'+i+"</a></div>");var 
g="",k=0;document.write('<div 
class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+="
 <br> "),"1 Comments"==l&&(l="1 Comment"),"0 
Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target 
="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+="
 | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target 
="_top">Read 
more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script 
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"
 rel="nofollow"></script>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px 
-35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  
float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 
0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: 
counter(countposts,decimal);counter-increment: countposts;z-index: 
2;position:absolute; left: -20px; font-size: 16px;color: 
#616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; 
margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; 
list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid 
#FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

✅ Kodu ekledikten sonra kaydedip kapatıyoruz ve blogumuzun ilgili kısmına gidip bakıyoruz.Herhangi bir adımda hata alırsanız yorum olarak veya iletişim sayfasından bildirebilirsiniz.Yardımcı olmaya hazırım.

Bunu Paylaş :

Yorum Ekle

Diğer Ayarlar

Yorum Kuralları
*Lütfen yanlızca yazı ile ilgili yorumlar yazınız.
*Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın.
*Bir Google Hesabınız yoksa Yorumlama Biçimi seçeneklerinden "Anonim" tıklayıp yorum yapabilirsiniz.

Blogger 5 Harika Son Paylaşımlar Tasarımı

✅Son Paylaşımlar Nasıl Eklenir?

✅ Kodu ekledikten sonra kaydedip kapatıyoruz ve blogumuzun ilgili kısmına gidip bakıyoruz.Herhangi bir adımda hata alırsanız yorum olarak veya iletişim sayfasından bildirebilirsiniz.Yardımcı olmaya hazırım.

comment 0 Yorum

0 Yorum