Tips Membuat Widget Latest Update di Blog Super Lengkap

Tips/Cara Membuat Widget Latest Update di Blog Super Lengkap - Sama juga dengan widget-widget lainnya yang menurut saya telah anda gunakan baik hasil dari blog lain maupun mungkin blog saya ini, Widget yang satu ini saya bahas untuk memenuhi tambahan dari widget-widget sebelumnya karena dengan widget yang satu ini sedang mas jonny bahas adalah mengenai widget latest update atau widget yang memberitahukan pengunjung akan artikel yang baru diperbaharui atau bahasanya diUpdate. Jangan lupa untuk membaca widget koleksi mas jonny lainnya, Cara Membuat Widget Artikel Terbaru Ringan, Widget Menu di Sidebar, Widget Komentar Terbaru, Cara Membuat Blog SEO Mobile Friendly.

Untuk memiliki widget latest update cukup mengikuti langkah langkahnya dengan baik dan benar sesuai dengan apa yang saya tuliskan dibawah ini.

Tips Membuat Widget Latest Update di Blog Super Lengkap

• Pertama masuk ke Template > Edit HTML
• Kedua silahkan cari kode ]]></b:skin> atau </style> dan letakkan kode dibawah ini tepat diatas kode tadi.

/*Latest Updated*/

li.update {list-style: none;height:auto;overflow:hidden}

li.update a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}

li.update a:hover{color:#859ce6}

.imgupdate{float:left; margin:0 10px 10px 0}

.imgupdate:hover{opacity:0.7}

.tgl-com {display:block;font-size:16px;margin-top:5px;font-size:16px}

• Kemudian cari kode </body> dan letakkan kode dibawah ini tepat diatas kode </body>.

<script type='text/javascript'>

//<![CDATA[

//Terakhir Diperbaharui by Infokmu.com

function updatedPosts(a){if(document.getElementById("updated-posts")){var e=a.feed.entry,title,img,link,date,content="",o=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],ct=document.getElementById("updated-posts");for(var i=0;i<5;i++){for(var j=0;j<5;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t,pd=e[i].published.$t.substring(0,10).split("-");if("media$thumbnail"in e[i]){img=e[i].media$thumbnail.url}else{img="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSRk60_Dz3Z062PgEBTFjQUxsc5eBdR_1NP2P50se4uvTWjHPvYqjLdDjGq4zebD6Ar2MXZjF72NjpPUYgXwxWeVlcdouFn7GYEyGmgYCva_q_QXY6gh-rto423FEoOyx8egVl9u0xa33C/s70-c/KM+Icon.png"}content+='<li class="update"><a href="'+link+'" target="_blank" title="'+title+'"><img src="'+img.replace(/\/s72-c/,"/s70-c")+'" class="imgupdate" alt="'+link+'" height="70px" width="70px"/></a>';content+='<strong><a href="'+link+'" target="_blank" title="'+title+'">'+title+'</a></strong><span class="tgl-com" datetime="'+pd.join("-")+'">  '+(pd[2]+" "+o[(parseInt(pd[1],10)-1)]+" "+pd[0])+'</span></li>'}ct.innerHTML=content}}function getScript(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;documenhttp://jsfiddle.net/#savet.body.appendChild(s)}getScript("/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=5&callback=updatedPosts");

//]]>

</script>

Simpan Template Anda.
Masuk ke Tata Letak > Tambah Widget > HTML/Javascript
Kemudian masukkan kode dibawah ini tepat didalam HTML/Javascript tadi.

<ul id="updated-posts"></ul>

Simpan Widget Anda.

Demikian Tips Membuat Widget Latest Update di Blog Super Lengkap semoga dapat bermanfaat buat anda dan Selamat Mencoba....

Tweet

Postingan terkait:

— Tuesday, July 14, 2015 — Add Comment — Tips Blogger