Membuat Daftar Isi Perlabel Dengan Gambar dan Navigasi
Seocips.com : Cara membuat daftar isi perlabel dengan thumbnails dan navigasi.
Ok sobat berikut ini kami bagikan tentang cara membuat daftar isi
perlabel dengan gambar dengan navigasi next prev atau pagenumber di
blog.Nah daftar isi perlabel ini memiliki tampilan yang menarik menurut kami karena sudah dilengkapi dengan thumbnails/gambar, ada navigasinya dan bahkan menurut blogger lain tamplilannya mirip homepage beberapa blog.
Diartikel sebelumnya juga telah kami bagikan tentang membuat widget perlabel juga daftar isi perlabel sederhana dan cara memasang navigasi pagenumber di blog. Ok sobat untuk membuat daftar isi seperti di demo diatas berikut ini adalah caranya:
1. Di Blog Bloggernya sobat
2. Plih laman atau postingan terserah sobat.
3. Buat laman baru atau buat postingan baru.
4. Ganti Mode Compose ke Mode HTML dan masukan kode dibawah ini kedalamnya.
<style type="text/css">Untuk kode berwarna merah diatas silahkan diganti dengan Nama Labelnya sobat dan untuk kode berwarna biru diatas silahkan diganti dengan alamat website/blognya sobat. Untuk yang lainnya silahkan di sesuaikan.
#toc-outer { background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYLd-IroP4RF-NCakOxkjp9yQXFC064g85s0tOIgsGBd5zTBHB9WCetxGED9ntq76NTSJOVDqYmeE0xUEJgB0RLjB5NYbkMFH0Kp8Z2P9OLUW9IRuU55vAY2e_bG4TBzCISSvMkMefvbaX/s1600/loading.gif) no-repeat 50% 50%; color:black; font:normal 11px/14px Arial,Sans-Serif; height:auto; margin:0 auto; overflow:hidden; padding:0; text-align:left; }
#loadingscript { background:transparent url(' http://3.bp.blogspot.com/-Z0w4M80kNoE/Tz4_RrLC4fI/AAAAAAAACJY/2mQ2yk5hCdU/s1600/loading.gif' ) no-repeat 50% 45%; font-weight:bold; font-size:20px; height:345px; padding:30px 0; text-align:center; text-indent:-99999px; }
.itemposts { background-color:#fff; border:1px solid #ccc; float:right; height:130px; margin:0 1% 5px; overflow:hidden; position:relative; padding:1%; width:45%; }
.itemposts h6 { border-bottom:1px solid #333; color:#333; font:bold 11px/16px Sans-Serif; height:15px; margin:0 0 5px; overflow:hidden; padding:2px 6px !important; text-transform:none; }
.itemposts h6 a:hover { color:#AD3000; text-decoration:none; }
.itemposts img { background-color:#fff; border:1px solid #ccc; float:left; height:75px; margin:0 7px 5px 0; padding:3px; width:75px; z-indent:99999px; }
.itemposts .iteminside {}
.itemposts .itemfoot { border-top:1px solid #333; padding:3px; clear:both; background-color:#fff; color:333; overflow:hidden; }
.itemposts .itemfoot a.itemrmore { color:#333; float:right; font-weight:bold; text-decoration:none; }
.itemposts .itemfoot a.itemrmore:hover { text-decoration:underline; }
#itempager { clear:both; padding:10px 0; }
#halaman,#totalposts { color:#000; display:block; font:bold 10px Verdana,Arial,Sans-Serif; margin-bottom:10px; text-align:center; padding:0; }
#halaman span,#halaman a { background-color:#666; color:#fff; display:inline; margin:0 1px; padding:3px 5px; text-indent:0; text-decoration:none; }
#halaman a:hover { background-color:#333; }
#halaman span.actual { background-color:black; }
#halaman span.hidden { display:none; }
</style>
<script type="text/javascript">
//<![CDATA[
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = true,
labelSorter = "Template Blogger",
loadingText = "Loading...",
totalPostLabel = "14",
jumpPageLabel = "4",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya ►",
prevText = "Prev",
nextText = "Next",
siteUrl = "http://www.seocips.com/",
postsperpage = 14,
numchars = 150,
imgBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
//]]>
</script>
<script src="https://mbah-siyam.googlecode.com/svn/trunk/daftar-isi.js"></script>
0 komentar:
Posting Komentar