Windows 8.1 Pro Uptodate Juli 2016

        Assalamu'alaikum Wr.Wb, Salam Sejahtera untuk seluruh sobat blog Bismillah Gratis™ dimanapun berada, di sela-sela kesibukan kegiatan offline sehari-hari di kesempatan malam yang sedang mendung saya akan berbagi lagi salah satu operating system yang sedang ramai dan laris di tahun ini, operating system tersebut adalah Windows 8.1

        Windows 8 adalah : Windows 8 adalah nama dari salah satu versi Microsoft Windows, serangkaian sistem operasi yang diproduksi oleh Microsoft untuk digunakan pada komputer pribadi, termasuk komputer rumah dan bisnis, laptop, netbook, tablet PC, server, dan PC pusat media. Sistem operasi ini menggunakan mikroprosesor ARM selain mikroprosesor x86 tradisional buatan Intel dan AMD. Antarmuka penggunanya diubah agar mampu digunakan pada peralatan layar sentuh selain mouse dan keyboard, sehingga Windows 8 di desain untuk perangkat tablet sentuh.

       Dan Kali ini saya akan berbagi yang sepesial untuk sobat Bismillah Gratis™, yaitu Windows 8.1 Pro yang terakhir di perbarui pada bulan Juli 2016. Versi windows terbaru ini sebagai perbaikan pada versi windows 8 sebelumnya yang telah diluncurkan. Windows yang telah diluncurkan untuk publik tersebut adalah Windows 8.1 Professional.

       Dibawah ini adalah Gambar Hasil Screenshotnya

       Windows 8.1 Professional tersebut terdapat peningkatan pada waktu booting yang lebih cepat lagi dibandingkan versi Windows 7. Selain itu pada versi Windows 8.1 Pro terdapat tambahan fitur yang tidak ada pada versi windows 8 sebelumnya.
Sobat Bismillah Gratis™ Ingin Segera memilikinya ? Jika iya silahkan Sobat Bismillah Gratis™ Klik Link download yang sudah saya sediakan dibawah ini :

Free Download Windows 8.1 Pro uptodate Juli 2016

Download Windows 8.1 Pro uptodate Juli 2016 32bit [ 2,8 GB ]
Download Windows 8.1 Pro uptodate Juli 2016 64bit [ 2,8 GB ]
Password : bismillah gratis

Mirror Link :

Download Windows 8.1 Pro uptodate Juli 2016 32/64 bit [ 4,2 GB ]
Password : bismillah gratis

Mirror Link :

Download Windows 8.1 Pro uptodate Juli 2016 32bit [ 2,9 GB ]
Password : bismillah gratis

        Demikian tadi Artikel dari saya tentang Windows 8.1 Pro Uptodate Juli 2016, Dengan harapan semoga bermanfaat untuk seluruh Sobat Bismillah Gratis™ dimanapun berada. Terimakasih.

Wassalamu'alaikum Wr.Wb.

Read More

Windows 7 SP-1 AIO Juli 2016

        Assalamu'alaikum Wr.Wb, Salam sejahtera untuk seluruh sobat Bismillah Gratis™ bimanapun berada, Alhamdulillah wassyukurilah pada kesempatan kali ini saya masih di beri nikmat sehat walafiat guna untuk mengupdate postingan di blog Bismillah Gratis™ tercinta ini.

        Ok langsung saja ke topik, Pada postingan pagi ini saya selaku admin Bismillah Gratis™ mencoba berbagi Salah satu operating system yang cukup di gemari pada tahun - tahun ini yang di gadang-gadang sebagi pengganti operating system Windows XP, operating system tersebut adalah Windows 7.
        Kali ini Admin mencoba berbagi operating system Windows 7 dengan Versi windows 7 yang lengkap buat para sobat Bismillah Gratis™ yang ingin mengoleksi windows 7 dalam 1 paket DVD atau flashdisk yaitu Windows 7 SP-1 AIO x86/x64.

       Windows 7 SP-1 AIO x86/x64 sudah lengkap dengan versi yang umum digunakan di dalam windows 7. Windows 7 SP-1 AIO x86/x64 juga tersedia dalam versi 32 bit dan 64 bit, sehingga sobat Bismillah Gratis™ tidak repot untuk mengoleksinya.

       Sobat Bismillah Gratis™ penasaran ?? Apa itu Windows 7 SP-1 AIO x86 dan x64? Windows 7 SP-1 AIO x86 dan x64 adalah windows 7 yang telah teraktivasi dan mendukung versi 32 bit dan 64 bit.

     Gambar dibawah ini adalah Screenshotnya :

Installer versi ESD memiliki tampilan install seperti windows 8 namun isinya adalah windows 7

         Sobat Bismillah Gratis™ Ingin memiliki Windows 7 SP-1 AIO Juli 2016? jika iya silahkan Bismillah Gratis™ klik link download yang sudah saya sediakan dibawah ini :

Free Download Windows 7 SP-1 AIO Juli 2016

Download Windows 7 SP-1 AIO Juli 2016 X32 dan X64 bit [ 4,1 GB ]
Password : bismillah gratis

Mirror Link :

Download Windows 7 SP-1 AIO Juli 2016 X32 dan X64 bit [ 4,1 GB ]
Password : bismillah gratis

Mirror Link :

Download Windows 7 SP-1 AIO Juli 2016 X32 dan X64 bit [ 4,1 GB ]
Password : bismillah gratis

Mirror Link :

Download Windows 7 SP-1 AIO Juli 2016 X32 dan X64 bit [ 4,1 GB ]
Password : bismillah gratis

Demikian tadi DArtikel tentang Windows 7 SP-1 AIO Juli 2016, Semoga bermanfaat untuk para seluruh Sobat Bismillah Gratis™ dimanapun berada.

Wabillahitaufik walhidayah Assalamu'alaikum Wr.Wb.

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