Multi-Color Random Post Style For Blogger

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>

0

0

Loading...