Multi-Color Random Post Style For Blogger
ဒါကတော့အရမ်းကိုလှတဲ့ Random Post widget လေးပါ။အရမ်းကိုလှပသေသပ်လွန်းပါတယ်။မိတ်ဆွေတို့လဲကြိုက်နှစ်သက်လိမ့်မယ်လို့မျှော်လင့်မိပါတယ်။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲထုံးစံအတိုင်း HTML/JavaScript နဲ့ပဲပြုလုပ်ရမှာပါ။
No(1) မိမိ Blog site ကို account အရင်ဝင်ပါ
No(2) dashboard ထဲက Layout ကိုနှိပ်ပါ
No(3) Add Gadget ကိုနှိပ်ပါ
No(4) HTML/JavaScript ကိုနှိပ်
No(5) Random Post Style Code တွေထည့်ပြီးသွားရင် save ကိုနှိပ်ပါပြီးပါပြီ။
<style type="text/css">
.coloured_randomPosts ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.coloured_randomPosts ul li {
list-style-image:none;
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
height: 90px;
}
.coloured_randomPosts ul li img{
float: left;
margin-right: 5px;
}
.coloured_randomPosts ul li h2{
font-weight: normal;
margin: 0;
padding: 0;
}
.coloured_randomPosts ul li:nth-child(1) {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.coloured_randomPosts ul li:nth-child(1):after {
content: "1";
}
.coloured_randomPosts ul li:nth-child(2) {
background: none repeat scroll 0 0 #FF764C;
width: 94%;
}
.coloured_randomPosts ul li:nth-child(2):after {
content: "2";
}
.coloured_randomPosts ul li:nth-child(3) {
background: none repeat scroll 0 0 #FFDE4C;
width: 91%;
}
.coloured_randomPosts ul li:nth-child(3):after {
content: "3";
}
.coloured_randomPosts ul li:nth-child(4) {
background: none repeat scroll 0 0 #C7F25F;
width: 88%;
}
.coloured_randomPosts ul li:nth-child(4):after {
content: "4";
}
.coloured_randomPosts ul li:nth-child(5) {
background: none repeat scroll 0 0 #33C9F7;
width: 85%;
}
.coloured_randomPosts ul li:nth-child(5):after {
content: "5";
}
.coloured_randomPosts ul li:nth-child(6) {
background: none repeat scroll 0 0 #7EE3C7;
width: 82%;
}
.coloured_randomPosts ul li:nth-child(6):after {
content: "6";
}
.coloured_randomPosts ul li:nth-child(7) {
background: none repeat scroll 0 0 #F6993D;
width: 79%;
}
.coloured_randomPosts ul li:nth-child(7):after {
content: "7";
}
.coloured_randomPosts ul li:nth-child(8) {
background: none repeat scroll 0 0 #F59095;
width: 76%;
}
.coloured_randomPosts ul li:nth-child(8):after {
content: "8";
}
.coloured_randomPosts ul li:nth-child(9) {
background: none repeat scroll 0 0 #e0c9ff;
width: 73%;
}
.coloured_randomPosts ul li:nth-child(9):after {
content: "9";
}
.coloured_randomPosts ul li:nth-child(10) {
background: none repeat scroll 0 0 #85ecf7;
width: 70%;
}
.coloured_randomPosts ul li:nth-child(10):after {
content: "10";
}
.coloured_randomPosts ul li:nth-child(1):after, .coloured_randomPosts ul li:nth-child(2):after, .coloured_randomPosts ul li:nth-child(3):after, .coloured_randomPosts ul li:nth-child(4):after, .coloured_randomPosts ul li:nth-child(5):after, .coloured_randomPosts ul li:nth-child(6):after, .coloured_randomPosts ul li:nth-child(7):after, .coloured_randomPosts ul li:nth-child(8):after, .coloured_randomPosts ul li:nth-child(9):after, .coloured_randomPosts ul li:nth-child(10):after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.coloured_randomPosts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div class="coloured_randomPosts">
<script style='text/javascript'>
//<![CDATA[
/*
Latest/Random Post With Title And Default Thumbnail 1.0
Copyright (c) 2013 EXEIdeas International.
*/
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul>');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i
}
if (random_posts == true) {
indexPosts.sort(function() {
return 0.5 - Math.random()
})
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if (entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break
}
}
if ("media$thumbnail" in entry_gal ) {
var thumburl_gal = entry_gal.media$thumbnail.url;
} else {
var thumburl_gal = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIPOAEPH1AvkWN0pM6p0g5zagfvufB1h_sw_ToAyXBUO1dQDFNCVEop8eAI0i9EgKMVXE2No_ZpGkrCppxn_ny-Di5o0gGajy8uI15wTmAK4fPJdDpaBSqcnnzO5nZbMkqu2c3dNar18/s72-c/thumbnail-img.png";
}
document.write('<li><a href="' + posturl_gal + '">');
document.write('<img src="' + thumburl_gal + '"/>');
document.write('<h2>' + posttitle_gal + '</h2>');
document.write('</a></li>')
}
document.write('</ul>')
}
//]]>
</script>
<script style='text/javascript'>
var random_posts = true;
var numposts_gal= 10;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999'></script>
</div>