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.
Cara Membuat Widget Recent Post Seperti Xadow Magz
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= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/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 &lt;/head&gt;&lt;!--<head/>--&gt;

<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
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.