√ Cara memasang widget daftar isi keren di halaman statis blog - Satriaryan22

Cara memasang widget daftar isi keren di halaman statis blog

Cara memasang widget daftar isi keren di halaman statis blog

SATRIARYAN22 - cara memasang widget ini sebenarnya sangat mudah dilakukan. Namun, sebagian orang kadang belum paham tentang cara membuat dan memasang nya.

Sebelum langsung ke pembahasan nya, alangkah baik nya kalian klik "Ikuti Blog" yang letaknya ada dibagian atas, agar kalian mendapatkan artikel - artikel terbaru dari saya.

Apa sih daftar isi itu? 

Daftar isi adalah salah satu elemen dari banyak elemen yang tergolong penting dalam sebuah blog / web. Ibarat sebuah buku, blog juga hrus mempunyai sebuah daftar isi yang dimana sebagai tempat informasi untuk para pengunjung blog nya yang berisi daftar judul - judul artikel yang telah dipublikasikan oleh pemilik blog, sehingga pengunjung pun bisa dengan mudah mencari informasi - informasi yang sedang di butuhkan.

Selain itu juga, menurut para ahli SEO, membuat sitemap atau daftar isi blog juga termasuk salah satu bentuk SEO, sebab di dalam Daftar Isi memuat susunan link yang sangat komplek dan secara otomatis memperkuat link building dari sebuah blog.

Mengapa disebut daftar isi otomatis? Karena setiap postingan yang kalian publikasikan akan secara otomatis tersimpan / tercantum di dalam halaman daftar isi blog tersebut. Jadi kita tidak perlu menulisnya secara manual, Praktis cuyy..

Berikut ini cara membuat daftar isi / sitemap otomatis di blog menggunakan script yang Responsive, sebab halaman daftar isi sederhana ini di muat tidak menggunakan bantuan Link apapun dari luar.

Ngomongin soal Responsive, sudahkah template Blogger kalian responsive, jika belum responsive alangkah baik nya kalian mengikuti panduan ini :

Langsung saja berikut langkah-langkahnya:

1. Login ke akun Blogger kalian >> Masuk ke menu “Halaman“
2. Klik tombol “Halaman baru” untuk membuat halaman statis yang baru
3. Selanjutnya kalian ganti mode editor nya dari “Compose” menjadi “HTML“
4. Masukan judul halaman (contoh: “Daftar Isi atau pun sitemap“)
5. Masukan kode script di bawah ini pada bagian konten:
<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}ul.rcentside{width:100%;height:500px}ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}ul.rcentside li:nth-child(2){left:0;top:50%}ul.rcentside li:nth-child(3){left:50.5%;top:50%}ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out}ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}ul.rcentside .overlayx:hover{opacity:.1}ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s;font-size:1em}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}.buttons{margin:5px 0 0}.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "https://www.satriaryan22.com",
  MaxPost: 5,
  idcontaint: "#featuredpostside",
  ImageSize: 500,
  interval: 10000,
  autoplay: true,
  tagName: false,
});
//]]>
</script>
6. Ganti yang bertanda huruf tebal dengan URL blog milik kalian
7. Terkahir tinggal kalian klik “Simpan tema“
8. Contoh tampilan daftar isi nya bisa kalian lihat di sini
Buka Komentar
Tutup Komentar

0 Response to "Cara memasang widget daftar isi keren di halaman statis blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel