✔ Widget Recent Post Blogger Keren Dengan Css Dan Javascript
Widget Recent Post Blogger Keren Dengan CSS dan Javascript
Widget merupakan salah satu elemen penting untuk meningkatkan secara optimal SEO On Page. Dengan meletakan widget Recent Post di dalam sidebar, maka dapat jadi visitor kita akan semakin usang di web kita dan tentunya akan menaikan rate klik iklan.
Kali ini, aku akan membagikan Tutorial cara menciptakan Widget Artikel Terbaru yang dapat dipakai oleh para blog yang memakai CMS Blogger.com. Tutorial ini belum dapat diterapkan pada Template AMP sebab memakai JavaAScript.
Cara Menambahkan Widget Recent Post
Silahkan pergi ke Blogger.com dan buka blog yang ingin anda pasang Widget Latest Post-nya.
Kemudian klik Layout, kemudian tambahkan Gadget dan pilih HTML/Javascript Widget.
Copy arahan HTML berikut ini.
<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom: 1px solid #f1f1f1;border-left: solid 3px #019688;padding: 10px 5px 5px 10px;margin: 10px auto;text-decoration: none;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#000;text-decoration:none}
li.recent-posts {border-left: solid 3px #019688;
padding: 10px 5px 5px 10px;
margin: 10px auto;}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "https://amp.alinuxblog.com",
numPosts = 6;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="✔ Widget Recent Post Blogger Keren Dengan CSS dan Javascript" >'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script> Kode ini sudah aku masukan CSS untuk memodifikasi tampilan widget. Sebenarnya anda juga dapat memasukan arahan CSS nya di template, namun biar lebih gampang dalam penginstallan, maka aku masukan saja dalam tag <style>.
Jangan lupa untuk mengubah tanda berwana kuning dengan alamat blog anda, lengkap dengan memakai protokol https:// atau http:// .
Setelah itu, klik Save. Maka widget akan eksklusif terpasang di blog anda. Untuk demo widget, silahkan lihat di sidebar blog ini.
Semoga bermanfaat :)
Sumber http://ampidn.blogspot.com
Jangan lupa untuk mengubah tanda berwana kuning dengan alamat blog anda, lengkap dengan memakai protokol https:// atau http:// .
Setelah itu, klik Save. Maka widget akan eksklusif terpasang di blog anda. Untuk demo widget, silahkan lihat di sidebar blog ini.
Semoga bermanfaat :)
0 Response to "✔ Widget Recent Post Blogger Keren Dengan Css Dan Javascript"
Posting Komentar