Cara Menambahkan Widget Sitemap di Blog

Sebetulnya tutorial cara menambahkan widget sitemap atau daftar isi postingan blog yang akan bismillah gratis™ bagikan ini sudah pernah bismillah gratis™ buat. Namun mungkin blog tersebut jarang dikunjungi jadi akan bismillah gratis™ bagikan kembali disini.

Adapun keuntungan menambahkan widget sitemap ini adalah agar blog tampil lebih profesional dari sebelumnya. Selain itu, pengunjung juga bisa melihat dan mencari semua artikel blog kita dengan mudah. Tentunya itu akan menambah nilai plus untuk blog jika pengunjung membuka artikel tertentu pada widget sitemap ini.

Ok langsung saja, cara penerapannya pun sangat mudah. Silakan ikuti beberapa langkah di bawah ini :

1. Buka Blogger > Laman > Buat Laman baru > Terapkan kode di bawah ini pada tab HTML

<div id="bp_toc"></div><script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script><style scoped="" type="text/css">#comments {display:none;}</style>

2. Kemudian publikasikan laman.
3. Selanjutnya, klik Template > Buka Edit Template > Terapkan kode di bawah ini tepat sebelum </style>

/* CSS Full Sitemap */#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {text-decoration:none;}.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}.toc-entry-col1 {counter-increment:rowNumber;}#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}td.toc-entry-col2 {background:#fafafa;}

Tentukan penggunaan font dan warna sesuai blog sobat.

4. Terakhir, simpan template.

Contohnya seperti Gambar Dibawah ini.

Jika di blog sobat bismillah gratis™ sudah terdapat ratusan artikel, ada baiknya membatasi tinggi halaman dengan menambahkan style pada kode pertama. Misal seperti ini :

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;"></div><script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script><style scoped="" type="text/css">#comments {display:none;}</style>

Silakan tentukan nilai max-height di atas sesuai keinginan.

Demikianlah Mengenai Cara Menambahkan Widget Sitemap di Blog Semoga Bermanfaat.

Read More

Beberapa Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog

Beberapa Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog kesayangan Sobat Bismillah Gratis™ Yang Sedang Belajar Blogging atau mengedit Blog kesayangannya.. Cara pemasangannya sangatlah gampang, Sobat Bismillah Gratis™ tinggal masuk ke...

1. layout ( Tata Letak ). 
2. Click on add a gadget ( Tambahkan Gadget ). 
3. Pilih html / javascript. 
4. Copy kode menubarnya di bawah ini. 
5. Dan paste kode ke dalam html / javascript / gadget. 
6. Simpan

Ada Beberapa Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog, Silahkan Pilih menu Bar yang Sobat Bismillah Gratis™ suka.

1. Black Navigation Menu Bar

Ini kode javascript nya :

 <style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;} border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="Link Target 1"><span class="myname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIA2fgBO7WmOOCtj9FkURoHPy2d7QmRNmD9PogXoeMs1gZ6Srkk6myepl2XNnPtCxsV02dbxRebEgA-DF1nZIefmiGusDfzRDV-4t2zcVnyceFzS6G8mWEwaXC0Y-6dMurNUc9WEZiSRI/s1600/Arrows-Up-circular-icon.png" /> </a> </li>

<li> <a href="Link Target 2"> <span class="myname">About</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIA2fgBO7WmOOCtj9FkURoHPy2d7QmRNmD9PogXoeMs1gZ6Srkk6myepl2XNnPtCxsV02dbxRebEgA-DF1nZIefmiGusDfzRDV-4t2zcVnyceFzS6G8mWEwaXC0Y-6dMurNUc9WEZiSRI/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="Link Target 3"> <span class="myname"> Author</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIA2fgBO7WmOOCtj9FkURoHPy2d7QmRNmD9PogXoeMs1gZ6Srkk6myepl2XNnPtCxsV02dbxRebEgA-DF1nZIefmiGusDfzRDV-4t2zcVnyceFzS6G8mWEwaXC0Y-6dMurNUc9WEZiSRI/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="Link Target 4"> <span class="myname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIA2fgBO7WmOOCtj9FkURoHPy2d7QmRNmD9PogXoeMs1gZ6Srkk6myepl2XNnPtCxsV02dbxRebEgA-DF1nZIefmiGusDfzRDV-4t2zcVnyceFzS6G8mWEwaXC0Y-6dMurNUc9WEZiSRI/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div> 

Keterangan :

1. Link Target : Isi Link yang akan sobat tuju.
2. Homes/About/Author/Contact : Ganti Sesuai Nama Link Yang Akan Dituju.

2. Animated call to action navigation menu bar

Ini kode javascript nya :

 <style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;} border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="#"><span class="myname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIA2fgBO7WmOOCtj9FkURoHPy2d7QmRNmD9PogXoeMs1gZ6Srkk6myepl2XNnPtCxsV02dbxRebEgA-DF1nZIefmiGusDfzRDV-4t2zcVnyceFzS6G8mWEwaXC0Y-6dMurNUc9WEZiSRI/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">About</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIA2fgBO7WmOOCtj9FkURoHPy2d7QmRNmD9PogXoeMs1gZ6Srkk6myepl2XNnPtCxsV02dbxRebEgA-DF1nZIefmiGusDfzRDV-4t2zcVnyceFzS6G8mWEwaXC0Y-6dMurNUc9WEZiSRI/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname"> Author</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIA2fgBO7WmOOCtj9FkURoHPy2d7QmRNmD9PogXoeMs1gZ6Srkk6myepl2XNnPtCxsV02dbxRebEgA-DF1nZIefmiGusDfzRDV-4t2zcVnyceFzS6G8mWEwaXC0Y-6dMurNUc9WEZiSRI/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIA2fgBO7WmOOCtj9FkURoHPy2d7QmRNmD9PogXoeMs1gZ6Srkk6myepl2XNnPtCxsV02dbxRebEgA-DF1nZIefmiGusDfzRDV-4t2zcVnyceFzS6G8mWEwaXC0Y-6dMurNUc9WEZiSRI/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div> 

3. Mega Drop Down Menu Bar

Ini kode javascript nya :

 <style type="text/css">
#multimenu{ background:#156AA6; overflow:hidden;
}
#multimenu ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0; padding:0;
}
#multimenu li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0;
}
#multimenu li a { background:#156AA6; color:#eee; display:block; font-weight:400; line-height:30px; border-left:1px solid #4B88B3; border-right:1px solid #043457; text-align:center; text-decoration:none; margin:0; padding:0 25px;
}
#multimenu li.depan a { border-left:none;
}
#multimenu li ul { background:#156AA6; height:auto; border:0; position:absolute; width:225px; z-index:80; box-shadow:0 1px 5px #034257; display:none; margin:0; padding:0;
}
#multimenu li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3; border-bottom:1px solid #043457; margin:0; padding:0;
}
#multimenu li:hover li a { background:#156AA6;
}
#multimenu li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px;
}
#multimenu li a:hover,#multimenuli:hover > a { color:#fff;
}
#multimenu li:hover ul.hidden { display:block;
}
</style>
<nav id='multimenu'>
<ul>
<li class='depan'><a href='/'>Home</a></li>
<li><a href='#'>Widgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Gadgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Blogging Tips</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
</ul>
</nav>
<script type="text/javascript">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$('#multimenu li ul').removeClass('hidden');
$('#multimenu li').hover(function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
}, function() {
$('ul', this).slideUp(600, 'easeInExpo');
});
//]]>
</script>
</script>

4. 3D Flying Book Navigation Menu Bar

Ini kode javascript nya :

<style type="text/css">
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">blogger widget</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">blogger templates</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Horizontal menu</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Website SEO </b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Google traffic</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->

5. Blue White

Ini kode javascript nya :

<style type="text/css">
#menu9 ul {
list-style:none;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#00adef;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{
}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}
</style>


<h2>Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>

Cukup itu saja dulu Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog, Semoga bermanfaat untuk seluruh sobat Bismillah Gratis™.

Read More

Cara Membuat Daftar Isi Responsive Blog Otomatis Dan Keren

Assalamau'alaikum Wr.Wb, Salam Sejahtera untuk Seluruh Sobat Bismillah Gratis™ dimanapun Berada, Beberapa hari lalu ada teman yang datang kerumah minta tolong untuk di ajari cara blogging dan membuat blog plus editing Template Blog.
Nah Kali ini saya sengaja iseng nulis artikel tentang cara editting Template Blog ( mumpung belum lupa ) heheheh.. Dan pada postingan kali ini saya akan mencoba berbagi kode CSS Daftar Isi Responsive Blog Otomatis Dan Keren.
Cara Membuat Daftar Isi Responsive Blog ini sepertinya sangat berguna, karena sudah banyak sekali para pengguna platform blog yang menggunakan template yang sudah versi responsive pada smartphone android dan tablet, Dan CSS ini sangat cocok untuk dipasang pada blog sobat Bismillah Gratis™ yang menggunakan template canggih sekarang ini dengan menggunakan script daftar isi yang akan Bismillah Gratis™ share untuk kalian ..

Sitemap (Daftar Isi) Responsive pada blog sebenarnya sudah banyak sekali yang share dengan berbagai macam gaya yang keren dan dapat digunakan secara otomatis, namun apa salahnya jika Bismillah Gratis™ juga membagikan lagi untuk sobat Bismillah Gratis™ yang ingin menggunakan fitur baru yang pernah saya pakai pada blog Bismillah Gratis™ ini.
Untuk apa sih harus responsive? tentunya ya agar sitemap sobat bisa tampil pas saat kalian menggunakan versi ponsel pintar, kan sekarang jamannya sudah menggunakan elektronik canggih jadi blog juga harus tampil keren dengan menyajikan sesuai dengan keadaan pengguna dan pembaca blog kita agar lebih nyaman dan mudah dalam membaca artikel diblog kita semua hehehehe....

Adapun Cara - Cara Penempatannya adalah Sebagai Berikut :

A). Silahkan sobat Bismillah Gratis™ masuk/login ke akun blogger dan masuk bagian laman blog kemudian pilih laman baru, lengkapnya lihat gambar berikut ini :

1. Klik Laman.

2. Klik Laman Baru.

Setelah Itu akan muncul halaman baru, Maka Lakukanlah Sesuai Urutan Nomer yang ada pada seperti gambar dibawah ini : 

3. Isi Judul Postingan
4. Klik HTML, Ingat jangan dibagian compress ya! karena kalian akan memasukkan kode dengan format script jadi silahkan sobat klik HTML dan pastekan kode berikut kedalamnya
5. Letakkan / Paste Kode CSS 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,left 80,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://bismillah-gratis.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

6. Publikasikan

Dan Setelah Di Publikasikan Maka Tampilannya akan seperti pada gambar dibawah ini :

B).Silahkan sobat ganti warna merah dengan URL blog sobat kemudian silahkan sobat Bismillah Gratis™ simpan dan lihat hasilnya....
Nah mudah bukan sobat cara membuat Daftar Isi Responsive Blog yang paling keren sekali, silahkan sobat Bismillah Gratis™ terapkan juga untuk blog kalian agar tampilannya jos dan memuaskan pengunjung kalian kawan.

Read More