Saturday, October 28, 2017

WIDGET RECENT POST / POSTINGAN TERBARU UNTUK BLOG + CARA MEMASANG DAN EDIT



Hi bro, kali ini admin berbagi script widget recent post yang baru admin pasang, hehe. widget ini admin dapatkan dari blog bloggersorigin.com, dengan sedikit edit warna bisa benar benar cocok untuk template Bonbitcoin.

Widget Recent Post bisa dikatan hal yang wajib dimiliki oleh blog agar postingan terbaru bisa terlacak oleh pembaca, langsung saja di bawah ini scriptnya. silakan di copy scriptnya, jangan dibaca, kalau dibaca di jamin pusing. hehe
.
- Widget Recent Post Script -
.
<div class="recentpostarea"><style type="text/css">.recentpostarea {list-style-type: none;counter-reset: countposts;}.recentpostarea a {text-decoration: none; color: #0ca50c;}.recentpostarea a:hover {color: #000;}.recentpostarea li:before {background: #0ca50c;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}li.r-p-title { padding: 5px 0px;}.r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.r-p-title a {text-decoration: none;color: #0000ff;font-weight: bold;font-size: 13px; padding: 2px;}.recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}.r-p-summ { border-left: 1px solid #0ca50c; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}</style><script type = "text/JavaScript">function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }} </script> <script> var posts_number = 5; var posts_date = false; var post_summary = true; var summary_chars = 80; </script> <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script> <noscript>Your browser does not support JavaScript!</noscript></div>
CARA MEMASANG PADA BLOGGER

1. Pilih TATA LETAK 
2. TAMBAHKAN GADGET pada tempat yang diinginkan
3. Pilih HTML/JAVASCRIPT
4. Copy Paste Script Widget di atas



CARA MENGEDIT WARNA

Warna Teks Judul postingan (color: #0000ff ) (BIRU)

1. CTRL+F 

2. Ketik #000ff 
3. Ganti #000ff dengan warna yang diinginkan

Cara Mengedit Bubble (backround angka) (hijau)
1. CTRL+F
2. Ketik #0ca50c , ada muncul beberapa, pilih yang berlabel background
3. Ganti #0ca50c dengan warna yang diinginkan.
4. Save





Keterangan Tambahan (untuk edit, ubah True menjadi False atau sebaliknya)

var posts_number = 5;  (Jumlah Post yang ditampilkan)
var posts_date = false; (Tanggal Post)
var post_summary = true; (Cuplikan Postingan)
var summary_chars = 80; (Jumlah karakter)

Selamat Mencoba,

No comments:

Post a Comment