Info Populer 2022

  Cara Menciptakan Widget Recent Post Ibarat Xadow Magz

Cara Menciptakan Widget Recent Post Ibarat Xadow Magz

Cara Menciptakan Widget Recent Post Ibarat Xadow Magz
Cara Menciptakan Widget Recent Post Ibarat Xadow Magz
Artikel kali ini masih seputar tutorial Blogger, yaitu ihwal cara menciptakan widget most recent post pada Blogger/blogspot menyerupai yang terpasang di Xadow Magz theme. Sedikit aku kasih gosip mengenai template Xadow Magz ini, template tersebut terdapat 4 desain style yang unik dengan meningkatkan secara optimal SEO yang maksimal, serta masih banyak lagi fitur lainnya, dan ke-empat style template itu cuma sanggup Anda dapatkan seharga 300 ribu Rupiah saja atau sekitar 23 USD untuk pembayaran melalui PayPal.
Artikel kali ini masih seputar tutorial Blogger Cara Membuat Widget Recent Post Seperti Xadow MagzXadowMagz Fully Responsive Blogger Template.

Demikian sekilas info kali ini. Terima kasih sudah membaca.

Kita kembali ke topik ihwal widget recent post. Topik yang bekerjsama ialah 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 gosip berikut.

JavaScript dan CSS untuk “memanggil” recent post ini bekerjsama ialah hasil kreasi dari Mybloggertricks.com, yang sedikit aku modifikasi demi kebutuhan fitur blogger di zaman kini ini.

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

Cara memasang widget recent post menyerupai XadowMagz Blogger Template

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

Tambahkan instruksi CSS berikut ini di atas instruksi </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 ialah pergi ke daerah 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/AVvXsEi8c9iM2bIjMDyTWbk13JaNXWZlfURjeffJrOn2y1WP0VvLqPY9T7FJSvBqc0n9kJVUtRUnZstjVxT4vojqHJ9QsXwY6APbA0TV7ozAwe3ESLaCabQa7j-wSVJ6q8CwW64_Jj1b4RXpxTk/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 instruksi var ListCount = 4; sesuaikan dengan jumlah artikel yang ingin Anda tampilkan pada widget tersebut.

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

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

Jika belum ada, silahkan simpan instruksi berikut ini, letakkan di atas instruksi </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 ihwal cara menciptakan widget/gadget Most Recent Posts di Blogger menyerupai template Xadow Magz. Semoga bermanfaat, terima kasih!

Source: https://www.infoterlengkap.com//search?q=xadowmagz-fully-responsive-blogger-templates
Advertisement

Iklan Sidebar