Cara membuat Daftar Isi Responsive Ringan Dengan Mudah

rul 12:09:00 Tips & Trik Blog 5 comments

Cara Memasang Daftar Isi Responsive dan ringan di Blog - Yoow dikesempatan kali ini admin Ry-share ingin membagikan sebuat Tutorial memasang daftar isi responsive dengan tampilan yang cukup keren dan elegant, biasanya daftar isi ini digunakan untuk mempermudah pengunjung mencari artikel/postingan yang dia inginkan. tapi biasanya pengunjung mencari - cari artikel yang unik dan diminati oleh pengunjung tersebut.
Jadi agar Blog lebih maksimal sebaiknya kalian memasang menu Daftar isi untuk mempermudah para pengunjung yang nongkrong di Blog kalian.

Berikut dibawah ini adalah langkah - langkah Cara Memasang Daftar Isi Responsive dan ringan di Blog :

1. Buat Laman Baru
2. Ganti Mode ke HTML jika tidak tau silahkan liat screenshoot dibawah ini

3. Selanjutnya Copy kode dibawah ini

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,center 60,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://ry-share.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

Ganti huruf yang berwarna merah dengan Url blog sobat

Demikian lah Cara membuat Daftar Isi Responsive Ringan Dengan Mudah semoga sukses selalu untuk kalian semua, terima kasih sudah berkunjung jika berkenan silahkan klik Tombol Share dibawah ini dan sampai jumpa di postingan berikutnya