Cara Membuat Widget Recent Post Seperti Xadow Magz

bungfrangki Tutorial Blog Widget Cara Membuat Widget Recent Post Seperti Xadow Magz

Artikel kali ini masih seputar tutorial Blogger, yaitu tentang cara membuat widget most recent post pada Blogger/blogspot seperti yang terpasang di Xadow Magz theme. Sedikit saya kasih informasi mengenai template Xadow Magz ini, template tersebut terdapat 4 desain style yang unik dengan optimasi SEO yang maksimal, serta masih banyak lagi fitur lainnya, dan ke-empat style template itu cuma bisa Anda dapatkan seharga 300 ribu Rupiah saja atau sekitar 23 USD untuk pembayaran melalui PayPal.

Untuk mengetahui fitur template tersebut lebih lanjut, silahkan baca pada artikel XadowMagz Fully Responsive Blogger Template.

Demikian sekilas info kali ini. Terima kasih sudah membaca.

Kita kembali ke topik tentang widget recent post. Topik yang sebetulnya adalah modus untuk meningkatkan penjualan template-template saya. Bagaimana? Keren kan cara promosi saya?

Nah,
Bagi yang tertarik memasang widget recent posts tersebut pada blognya masing-masing, alangkah baiknya Anda perlu ketahui dulu beberapa informasi berikut.

JavaScript dan CSS untuk “memanggil” recent post ini sebetulnya adalah hasil kreasi dari Mybloggertricks.com, yang sedikit saya modifikasi demi kebutuhan fitur blogger di zaman sekarang ini.

Yaitu menambahkan satu potongan script agar widget/gadget recent post ini bisa support HTTPS (SSL). Itu saja sih, selebihnya beberapa perubahan pada CSS, biar sesuai kebutuhan layout dan look template.

Cara memasang widget recent post seperti XadowMagz Blogger Template

Langkah pertama, silahkan mengambil kesempatan untuk login ke Blogger > Theme > Edit HTML.

Tambahkan kode CSS berikut ini di atas kode </style>

/* Recent Posts Gadget By STCnetwork.org */
.relatedlist {list-style-type:none;overflow:hidden; margin:0 auto; padding:0;max-width:300px}
.relatedlist li {margin:0 auto 10px auto; clear:both; color:#666; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative;line-height:1.4em;}
.relatedlist li:last-child{margin:0}
.relatedlist li a { color:#666; text-decoration:none}
.relatedlist i{color:#999; padding-right:5px; }
.relatedlist .iline{line-height:1.2em; margin-top:3px;}
.relatedlist .icontent{line-height:1.5em; margin-top:5px;}
.relatedlist div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; }
.relatedlist .mbttitle {font-size:13px; color:#000; font-weight:normal;margin:5px auto; text-decoration:none;display:block}
.relatedlist .mbttitle:hover, .relatedlist .itotal a:hover {color:#0E9D58; text-decoration:none;}
.relatedlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.relatedlist .iedit:before, .relatedlist .iauthor:before, .relatedlist .itag:before, .relatedlist .icomments:before, .relatedlist .idate:before, .relatedlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
.relatedlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
float: none; display: inline-block; margin:0; padding-right:3px; position:relative; top:3px;}
.relatedlist .itag{color: #fff;position: absolute;left: 7px;top: 12px;display: inline-block;}
.relatedlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:uppercase;font-size: 8px!important;letter-spacing:1px;display:none}
.relatedlist .itag a:first-child{display:block}
.relatedlist .itag a:hover{background:#000; color:#0E9D58; text-decoration:none;}
.iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;}
.iFeatured a {padding:0 7px 0 0;display: block;margin:5px auto 0}
.iFeatured img{width:132px;height:85px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;}
.iFeatured:hover img{ opacity:1;}
.relatedlist .icomments a{color:#0080ff;font-size:12px;}
.relatedlist .icomments a:hover{text-decoration:underline}
.relatedlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
.relatedlist .idate:before {content:'\f073';padding-right:3px}
.relatedlist .iedit:before {content:'\f040';}
.relatedlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
.relatedlist .itotal {color:#333; padding:5px 0px; }
.relatedlist .itotal a {font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}
.relatedlist .itotal span:before {content:'\f07c';}
.relatedlist .itotal span font {padding:0px 3px; color:#333;font-size:15px; font-weight:bold}

Selanjutnya, simpan Template

Langkah berikut adalah pergi ke tempat lain dengan mengklik Tata Letak/Layout > Lihat Sidebar > Tambah Gadget > HTML/JavaScript.

Lalu copy-paste code JavaScript ini ke dalamnya:

<script type="text/javascript">
var ListCount = 4;
var ListLabel = "";
var ChrCount = 45;
var TitleCount = 66;
var ImageSize = 200;
var showcomments = "off";
var showdate = "on";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "off";
var showTotal = "off";
//################ Function Start
function relatedlist(json) {
document.write('<ul class="relatedlist">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);
mm = ListUpdate.substring(5, 7);
DD = ListUpdate.substring(8, 10);
TT = ListUpdate.substring(11, 16);
MM = ListMonth[parseInt(mm - 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace(/.*?:\/\//g , "//").replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace(/.*?:\/\//g , "//").replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzy5HBs4VJDIUJBvqQQr2nTe9xwwNVYEq0lDu_dEic5xKRqcO1Tb5Y8iUIFpBoH9K8fRSzZPP0NSQd2Zd0jVXJqRy5KXHds4RVuUlNuHqD0TUJgiXcrrqR7Sn-N0rbWpiMMGgTVPES8O0/s200/Icon.png'";
}
//################### Printing List
document.write( "<li class='node"+[i]+"' >");
if (showthumbnail == 'on'){
document.write("<div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div>");
}
if (showlabel == 'on'){
document.write("<span class='itag'>"
+ListTag +
"</span>");
}
document.write("<a class='mbttitle' href="
+ ListUrl+
">"
+ ListTitle+
"</a><div class='iline'>");
if (showauthor == 'on'){
document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span>");
}
if (showcomments == 'on'){
document.write("<span class='icomments'>"
+ListComments +
"</span> ");
}
if (showdate == 'on'){
document.write("<span class='idate'>"
+ M +
" "
+ D +
"</span>");
}
if (showcontent == 'on'){
document.write("<div class='icontent'>"
+ListContent +
"...</div> ");
}
document.write("</div></li>");
}if (showTotal == 'on'){
document.write("<div class='itotal'><span> <a href='/search/label/"+ListLabel+"'>View all <font>"+TotalPosts+"</font> posts in → " +ListLabel+" </a></span></div>");
}
document.write("</ul>");
}
document.write("<script src='/feeds/posts/default?alt=json-in-script&callback=relatedlist'></"+"script>");
</script>

Silahkan atur terlebih dahulu angka yang tertera pada kode var ListCount = 4; sesuaikan dengan jumlah artikel yang ingin Anda tampilkan pada widget tersebut.

Anda juga bisa mengubah fitur lainnya dengan memainkan fungsi “on” dan “off” pada kode-kode di bawahnya.

Perlu diperhatikan.
Widget ini menggunakan FontAwesome, jadi pastikan di template Anda terdapat link pemanggil FontAwesome.

Jika belum ada, silahkan simpan kode berikut ini, letakkan di atas kode </head> atau </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) };loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Tutorial Blogger sebelumnya: Cara Memasang slot Iklan dan Related Post di Tengah Postingan Seperti Website Profesional

Demikian tutorial tentang cara membuat widget/gadget Most Recent Posts di Blogger seperti template Xadow Magz. Semoga bermanfaat, terima kasih!

Source: http://www.mybloggertricks.com/2016/06/recent-posts-gadget.html