November 2013

Cara Membuat Tombol Demo dan Download di Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<b><span style="font-size: large;"> </span></b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qclzt6U-iFJpzhSSUGWYCsg6e8ZWHPyKtENjagjExqhyphenhyphenwHaj9FGu9wZPRSpXH1DYHCJw9lPiawUMewP05WA7yv36BsIo5BQq7zX8eL3eBZYaeIaNPVRSw2E7OFEZv6-gnrmLd8TJzP4/s1600/demo_download_button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a><b><span style="font-size: large;">M-S Blog</span> || Cara Membuat Tombol Demo dan Download di Blogger </b>- Banyak tutorial 
bagaimana cara membuat tombol demo dan download, nah kali ini saya share
 CSS tombol Demo dan Download ala kangismet, dgn warna dan efek gulir 
hover yg halus membuat tombol demo dan download lebih enak dipandang :).
  mau tau gimana tampilannya ? berikut SSnya</div>
<div style="text-align: center;">
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qclzt6U-iFJpzhSSUGWYCsg6e8ZWHPyKtENjagjExqhyphenhyphenwHaj9FGu9wZPRSpXH1DYHCJw9lPiawUMewP05WA7yv36BsIo5BQq7zX8eL3eBZYaeIaNPVRSw2E7OFEZv6-gnrmLd8TJzP4/s1600/demo_download_button.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Tombol Demo dan Download di Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qclzt6U-iFJpzhSSUGWYCsg6e8ZWHPyKtENjagjExqhyphenhyphenwHaj9FGu9wZPRSpXH1DYHCJw9lPiawUMewP05WA7yv36BsIo5BQq7zX8eL3eBZYaeIaNPVRSw2E7OFEZv6-gnrmLd8TJzP4/s1600/demo_download_button.png" title="Cara Membuat Tombol Demo dan Download di Blogger" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<u style="font-weight: bold;">Cara Membuat Tombol Demo dan Download di Blog :</u><br />
<div style="text-align: left;">
1. Buka Blogger<br />
<br />
2. Klik Template -> Edit HTML<br />
<br />
3. Copy kode dibawah ini dan paste diatas kode ]]></b:skin></div>
<blockquote class="tr_bq">
/* -- M-S Button --*/<br />
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}<br />
.button ul {margin:0;padding:0}<br />
.button li{display:inline;margin:0;padding:0}<br />
.demo {border: none; 
-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding:
 8px 80px !important; background: #E55E48; color: #fff 
!important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); 
-webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 
1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); 
transition: background-color 1s ease-out 0s; 
-moz-transition:background-color 1s ease-out 0s; 
-webkit-transition:background-color 1s ease-out 0s; 
-o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }<br />
.download {border: none; 
-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding:
 8px 80px !important; background: #5FAAE3; color: #fff 
!important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); 
-webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 
1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); 
transition: background-color 1s ease-out 0s; 
-moz-transition:background-color 1s ease-out 0s; 
-webkit-transition:background-color 1s ease-out 0s; 
-o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}<br />
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; 
-moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; 
-ms-text-shadow: 0 0 1px #222 }<br />
.download:hover { background: #454242; text-shadow: 0 0 1px #222; 
-moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; 
-ms-text-shadow: 0 0 1px #222 }</blockquote>
<div style="text-align: left;">
<br />
4. Simpan template<br />
<br />
5.  Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode HTML)</div>
<blockquote class="tr_bq">
<div style="text-align: center;"><br />
<ul class="button"><br />
<li><a class="demo" href="<span style="color: red;">http://muhammad-sholeh.info/</span>" target="_blank">Demo</a></li><br />
<li><a class="download" href="<span style="color: lime;">http://muhammad-sholeh.info/</span>" target="_blank">Download</a></li><br />
</ul><br />
</div><br />
<div class="clear"></div></blockquote>
5. Kemudian publikasikan dan lihat hasilnya<br />
<div style="text-align: left;">
<br />
Keterangan :<br />
Ganti Link yang berwarna <span style="color: red;">merah</span> dengan link <b>demo</b> anda !<br />
Ganti Link yang berwarna <span style="color: lime;">hijau</span> dengan link <b>download</b> anda !<b></b></div>
</div>
</div>

M-S Blog || Cara Membuat Tombol Demo dan Download di Blogger - Banyak tutorial bagaimana cara membuat tombol demo dan download, nah kali ini saya s…

Nov 21, 2013 +

Cara Membuat Search Box Blog Seperti Search Box Google di Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Verdana,sans-serif;"><b><span style="font-size: large;">M-S Blog</span> || Membuat Search Box Blog Seperti Search Box Google </b>- Membuat search box blog seperti 
search box kepunyaan Google ini cukup sederhana dengan sedikit kode CSS 
agar tampilannya mirip, seperti yang bisa Anda lihat di atas postingan 
ini (<i>jika belum saya ganti lagi hehehe...</i>). Jika ada yang tertarik untuk
 mencobanya juga silahkan copy kode-kodenya di bawah ini.</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxVBqBjTRZooScQ8H0DqP-8n04R8bs0WB2e-PIQDSMGTxV1F6OYdn1GMCgY6fbbHHrEJBgUBjPfPSFccLqgrlMjrBR-1Zf5l76xs_hopSwiEaxjW_xqC01jVfrr40zc-c_Tn_Z4tHEq0/s1600/Search+Box+Google.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Search Box Blog Seperti Search Box Google di Blogger" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxVBqBjTRZooScQ8H0DqP-8n04R8bs0WB2e-PIQDSMGTxV1F6OYdn1GMCgY6fbbHHrEJBgUBjPfPSFccLqgrlMjrBR-1Zf5l76xs_hopSwiEaxjW_xqC01jVfrr40zc-c_Tn_Z4tHEq0/s320/Search+Box+Google.png" title="Cara Membuat Search Box Blog Seperti Search Box Google di Blogger" width="320" /></a></div>
<span style="font-family: Verdana,sans-serif;"><br /></span>
<br />
<div>
<span style="font-family: Verdana,sans-serif;"></span></div>
<div>
<span style="font-family: Verdana,sans-serif;"></span></div>
<div>
<span style="font-family: Verdana,sans-serif;"></span></div>
<div>
<span style="font-family: Verdana,sans-serif;"><br /><u style="font-weight: bold;">Membuat Search Box Blog Seperti Search Box Google :</u><br /><br />1. Buka blogger<br /><br />2. Simpan kode CSS di bawah ini di atas kode <span style="background-color: yellow;">]]></b:skin></span></span></div>
<span style="font-family: Verdana,sans-serif;">

</span><br />
<div>
<span style="font-family: Verdana,sans-serif;"><span style="background-color: white;"></span></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana,sans-serif;"><span style="background-color: white;">#search {background: #fff;border-radius: 2px;}</span></span><br />
<span style="font-family: Verdana,sans-serif;"><span style="background-color: white;">#search-form 
{color:gray;width:50%;padding:6px 70px 6px 10px;font:14px 
Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px 
solid #ccc;border-radius:2px;}</span></span><br />
<span style="font-family: Verdana,sans-serif;"><span style="background-color: white;">.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px
 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 
0;font-size:13px;cursor:pointer;border:none;position:relative;}</span></span><br />
<span style="font-family: Verdana,sans-serif;"><span style="background-color: white;">#search-form:hover{border:1px solid #aaa}</span></span><br />
<span style="font-family: Verdana,sans-serif;"><span style="background-color: white;">#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}</span></span></blockquote>
<span style="font-family: Verdana,sans-serif;"><span style="background-color: white;">
<span style="background-color: #999999;"><span style="color: #eeeeee;"><i><span style="font-size: x-small;">*Agar menjadi responsive maka saya gunakan persentase untuk lebarnya 
(width) pada search-form-nya, silahkan atur-atur agar sesuai dengan blog
 Anda.</span></i></span></span></span></span></div>
<div>
<span style="font-family: Verdana,sans-serif;"><br /></span></div>
<span style="font-family: Verdana,sans-serif;">
</span>
<div>
<span style="font-family: Verdana,sans-serif;">
3. Kemudian silahkan copy kode HTML-nya di bawah ini dan silahkan simpan di mana Anda ingin menampilkannya.</span></div>
<span style="font-family: Verdana,sans-serif;">
</span>
<blockquote class="tr_bq">
<span style="font-family: Verdana,sans-serif;">
<div id='search'><br /><form id='searchform' action='/search' method='get' target='_blank'><br /><input
 id='search-form' name='q' 
onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;'
 
onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;'
 type='text' value='Search here ...'/><br /><button type='submit' 
class='search-button' title='Search'><img alt='search button' 
height='21' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF3_yyPQcworgfMs6R7Y9VpEekNG9aVpTbu3w6g6-h1uTw58Rmd61NZmUmM42XDQ_eYBfbkXWV-o9VOUGjh-NXKQfxCSC6vE_bC7O5v9YQqbgFfO0VUlThaI9jZY8qRO9Gxp1EhSaJml8H/s1600/search.png'
 title='Search' width='21'/><br /></button><br /></form><br /></div></span></blockquote>
<span style="font-family: Verdana,sans-serif;">

bisa di simpan pada gadget -> <span style="background-color: yellow;">HTML/Javascript</span>, ataupun di dalam template html<br /><br />5. simpan template :D</span></div>

Cara Membuat Search Box Blog Seperti Search Box Google di Blogger

M-S Blog || Membuat Search Box Blog Seperti Search Box Google - Membuat search box blog seperti search box kepunyaan Google ini cukup sederhana deng…

Nov 19, 2013 +

Free Download Smadav Pro 9.4.2 2013 + Keygen

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-size: x-small;"><span style="font-family: Verdana,sans-serif;"><b><span style="font-size: small;">M-S Blog</span> || Free Download Smadav Pro 9.4.2 2013 + Keygen</b>, Siapa orang Indonesia yang tidak tau Smadav 2013? Smadav adalah 
software dan anti virus nomor 1 di Indonesia dan ampuh dalam mengatasi 
berbagai macam virus di Indonesia. Kali ini Smadav update dengan versi <b>Smadav 9.4.2</b> . Di versi <b>Smadav 9.4.2 2013</b>, Smadav telah melakukan penyempurnaan pembersihan virus VBS dan registry, dsb.</span></span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIjQ_k3zTRI8sxkkvmdIABssR4k1jan6RugbWnJJkJYfTxYu4ads5N1yx_2cvbgZCs5rP9anWzIxcXD5oY-_JeTvq0oZ4-n9nCWzbf5Rmgz_s0pWA0laWR2MFWfdMEKZZiZtRSobdj1A/s1600/Smadav+Pro.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Free Download Smadav Pro 9.4.2 2013 + Keygen" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIjQ_k3zTRI8sxkkvmdIABssR4k1jan6RugbWnJJkJYfTxYu4ads5N1yx_2cvbgZCs5rP9anWzIxcXD5oY-_JeTvq0oZ4-n9nCWzbf5Rmgz_s0pWA0laWR2MFWfdMEKZZiZtRSobdj1A/s1600/Smadav+Pro.jpg" title="Free Download Smadav Pro 9.4.2 2013 + Keygen" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<b>Cara Aktivasi Smadav Pro :</b></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ol>
<li>Install Smadav Pro</li>
<li>Jangan Di jalankan dulu smadav</li>
<li><span style="color: red;"><b>Matikan Antivirus dan internet</b></span></li>
<li>Jalankan Keygen untuk mendapatkan Serial Numbernya , Dan masukan serial numbernya ke Smadav<br />Pro</li>
<li>Selesai <span style="font-size: x-large;"><i><b>:)</b></i></span></li>
</ol>
<span style="font-size: large;"><b>Download :</b><b> <a href="http://www.sharebeast.com/oephwx69ezhn">Smadav Pro 9.4.2 2013 + Keygen</a></b></span>
<div class="separator" style="clear: both; text-align: left;">
</div>
</div>

M-S Blog || Free Download Smadav Pro 9.4.2 2013 + Keygen, Siapa orang Indonesia yang tidak tau Smadav 2013? Smadav adalah software dan anti virus no…

Nov 18, 2013 +

Membuat Menu Horizontal CSS3 Dengan Efect Hover pada Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7CEFshDFmOGATX3eHwyrYnwOP_b_WH36oWe_bqUWHj2Ewjl46WLPIUZcVYGbBPi-4itDx48t3leYMJEQhbn_0QHMmOHK6j9C2JICLISYtLiJW2LFrO92IYU83gNo2XpAm6F8MvOHjXMo/s1600/CSS3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Menu Horizontal CSS3 Dengan Efect Hover pada Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7CEFshDFmOGATX3eHwyrYnwOP_b_WH36oWe_bqUWHj2Ewjl46WLPIUZcVYGbBPi-4itDx48t3leYMJEQhbn_0QHMmOHK6j9C2JICLISYtLiJW2LFrO92IYU83gNo2XpAm6F8MvOHjXMo/s1600/CSS3.jpg" title="Membuat Menu Horizontal CSS3 Dengan Efect Hover pada Blog" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="line-height: 25px; text-align: left;"><span style="color: #222222; font-family: Open Sans, Arial, Helvetica, Geneva, sans-serif;"><b><span style="font-size: large;">M-S Blog</span><span style="font-size: x-small;"> || Membuat Menu Horizontal CSS3 Dengan Efect Hover pada Blog</span></b></span></span><span style="background-color: white; color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 25px;"><b>  </b> - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya .</span></div>
<span style="background-color: white; color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 25px;"><br /></span>
<br />
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 25px; text-align: center;">
<a class="standard blue" href="http://jsfiddle.net/RulyNakula/jZPnM/show/" style="-webkit-box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px inset; background-color: white; background-image: -webkit-linear-gradient(top, rgb(22, 164, 200) 0%, rgb(16, 134, 182) 100%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 0px solid rgba(0, 0, 0, 0.2); box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px inset; color: white; display: inline-block; outline: none; padding: 0.5em 0.8em; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.498039) 1px 1px 1px;" target="blank">See Demo</a></div>
<h3 style="border-bottom-color: rgb(210, 210, 210); border-bottom-width: 3px; color: #222222; font-family: Oswald, Arial, Helvetica, Geneva, sans-serif; font-size: 25px; font-weight: normal; line-height: 27.454544067382813px; margin: 5px 0px 10px; width: 620px;">
<span style="background-color: white;"><a href="http://www.blogger.com/blogger.g?blogID=6247387641494309963" name="more" style="color: #0d86cc;"></a></span></h3>
<h3 style="border-bottom-color: rgb(210, 210, 210); border-bottom-width: 3px; color: #222222; font-family: Oswald, Arial, Helvetica, Geneva, sans-serif; font-size: 25px; font-weight: normal; line-height: 27.454544067382813px; margin: 5px 0px 10px; width: 620px;">
<span style="background-color: white;">Komposisi  </span></h3>
<b style="background-color: white; color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 25px;">CSS3 </b><br />
<blockquote class="tr_bq" style="background-color: #364146; background-position: 0% 0%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #d5c881; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 13px; line-height: 20px; padding: 10px 20px; position: relative;">
/.....---CSS3 BREWOK---.....\<br />
nav {<br />
  font:700 16px/60px 'Lato', sans-serif;<br />
  width:90%;<br />
  margin:30px auto 0 auto;<br />
  background:<b><span style="color: #134f5c;">#374D61</span></b>;<br />
  overflow:hidden;<br />
  -webkit-border-radius:8px;<br />
  -moz-border-radius:8px;<br />
  -o-border-radius:8px;<br />
  border-radius:8px;<br />
}<br />
nav ul {<br />
  height:60px;<br />
  overflow:hidden;<br />
}<br />
nav ul li {<br />
  width:25%;<br />
  float:left;<br />
  text-align:center;<br />
}<br />
.item-container {<br />
  position:relative;<br />
  height:120px;<br />
  cursor:pointer;<br />
  -webkit-transition: all 0.3s ease;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-moz-transition:  <span class="Apple-tab-span" style="white-space: pre;"> </span>all 0.3s ease;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>-o-transition:  <span class="Apple-tab-span" style="white-space: pre;"> </span>  all 0.3s ease;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>transition: <span class="Apple-tab-span" style="white-space: pre;">  </span>    all 0.3s ease;<br />
}<br />
.item-container:hover{<br />
  top:-60px;<br />
}<br />
.item-top,<br />
.item-bottom {<br />
  height:60px;<br />
  position:relative;<br />
}<br />
.item-top {<br />
  color:#ffffff;<br />
}<br />
.item-bottom {<br />
  background:#4D6377;<br />
  color:#ffffff;<br />
}</blockquote>
</div>
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 25px; text-align: justify;">
<b style="background-color: white;">HTML</b><br />
<blockquote class="tr_bq" style="background-color: #364146; background-position: 0% 0%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #d5c881; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 20px; padding: 10px 20px; position: relative;">
<nav><br />
  <ul><br />
    <li><br />
      <div class="item-container"><br />
        <div class="item-top"><b><span style="color: #134f5c;">Home</span></b></div><br />
        <div class="item-bottom">Home</div><br />
      </div><br />
    </li><br />
    <li><br />
      <div class="item-container"><br />
        <div class="item-top">Work</div><br />
        <div class="item-bottom">Work</div><br />
      </div><br />
    </li><br />
    <li><br />
      <div class="item-container"><br />
        <div class="item-top">About</div><br />
        <div class="item-bottom">About</div><br />
      </div><br />
    </li><br />
    <li><br />
      <div class="item-container"><br />
        <div class="item-top">Contact</div><br />
        <div class="item-bottom">Contact</div><br />
      </div><br />
    </li><br />
  </ul><br />
</nav></blockquote>
<h3 style="border-bottom-color: rgb(210, 210, 210); border-bottom-width: 3px; font-family: Oswald, Arial, Helvetica, Geneva, sans-serif; font-size: 25px; font-weight: normal; line-height: 27.454544067382813px; margin: 5px 0px 10px; width: 620px;">
<span style="background-color: white;">Kustomisasi </span></h3>
<div>
<ul style="margin: 0px 20px 20px 0px; padding-left: 40px;">
<li><span style="background-color: white;">Tempatkan CSS3 diatas kode <span style="font-family: 'Courier New', Courier, monospace;">]]></b:skin></span> atau <span style="font-family: 'Courier New', Courier, monospace;"></style></span> </span></li>
<li><span style="background-color: white;">HTML bisa ditempatkan dalam kerangka template atau pada Tata letak dan Add Gadget </span></li>
</ul>
<div>
<b style="background-color: white;">Catatan </b><br />
<blockquote class="tr_bq" style="background-color: #364146; background-position: 0% 0%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #d5c881; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 20px; padding: 10px 20px; position: relative;">
ul {<br />
  list-style: none;<br />
}</blockquote>
<span style="background-color: white;">Tempatkan kode diatas sebelum kode CSS3  apabila pada hasil terdapat list .  </span></div>
</div>
</div>
</div>

M-S Blog || Membuat Menu Horizontal CSS3 Dengan Efect Hover pada Blog - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin ya…

Nov 11, 2013 +

Membuat Recent Post ber-Gambar pada Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px; text-align: left;">
<span style="background-color: white;"><b><span style="font-size: large;">M-S Blog</span> || Membuat Recent Post ber-Gambar pada Blog</b>, </span>Untuk <b>DEMO</b> sobat bisa melihat widget recent post di sidebar footer (<i>scroll sampai bawah</i>)</div>
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXY1oZ2vVJRvZVOCvrDzFIlePatcm4vQupdFP3iCmFFA4CgJA9hxVqOB1FyLOccYkLVyBOK2bNpptJH3LV6Lj0KPzQajpSrCS7dYYcgfQNrUTFzvoBKM2wSIfNE5O9bEsimB69ba9XQ2Q/s1600/Recent-Post-Image-Gallery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Recent Post ber-Gambar pada Blog " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXY1oZ2vVJRvZVOCvrDzFIlePatcm4vQupdFP3iCmFFA4CgJA9hxVqOB1FyLOccYkLVyBOK2bNpptJH3LV6Lj0KPzQajpSrCS7dYYcgfQNrUTFzvoBKM2wSIfNE5O9bEsimB69ba9XQ2Q/s1600/Recent-Post-Image-Gallery.jpg" title="Membuat Recent Post ber-Gambar pada Blog " /></a></div>
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px; text-align: left;">
<span style="font-size: x-small;"><br /></span></div>
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px; text-align: left;">
<span style="font-size: x-small;"><br /></span></div>
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 25px; text-align: center;">
</div>
<span style="background-color: white;"><b style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px;">Berikut beberapa fitur dari Recent Post gallery </b></span><br />
<ul style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px; margin: 0px 20px 20px 0px; padding-left: 40px;">
<li><span style="background-color: white;">Sobat bisa mengatur ukuran gambar yang disesuaikan dengan selera.</span></li>
<li><span style="background-color: white;">Recent post yang ditampilkan dapat disesuaikan dengan label </span></li>
</ul>
<h3 style="border-bottom-color: rgb(210, 210, 210); border-bottom-width: 3px; color: #222222; font-family: Oswald, Arial, Helvetica, Geneva, sans-serif; font-weight: normal; line-height: 27.454544067382813px; margin: 5px 0px 10px; width: 620px;">
<span style="background-color: white;"><span style="font-size: small;">#Kustomisasi</span></span></h3>
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px;">
<ul style="margin: 0px 20px 20px 0px; padding-left: 40px;">
<li><span style="background-color: white;">Cari kode <b></head></b> dan tempatkan kode dibawah ini tepat atasnya</span></li>
</ul>
<div>
<blockquote style="background-color: #364146; background-position: 0% 0%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #d5c881; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 13px; line-height: 20px; padding: 10px 20px; position: relative;">
<script><br />
// Blogger Recent Posts [ OBC ]<br />
// Tutorial at http://duniaradioku.blogspot.com<br />
// Free to use or share, but please keep this notice intact.<br />
//<![CDATA[<br />
function bsrpGallery(root) {<br />
var entries = root.feed.entry || [];<br />
var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];<br />
for (var i = 0; i < entries.length; ++i) {<br />
var post = entries[i];<br />
var postTitle = post.title.$t;<br />
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJH2Lnd9zCIOjxqZwrU6pUYF7zN4zP1YbsGgKwqCbzTGfHGUw4D7fIHgkSvJnNIfZzcNXJdC2IPlaCYitMrsGN7jTSn1DoiC-bngESbhRAq4EBXeKQKh7OM9sJc1BA1k2We6LTfhgUTU_l/s72-c/default+image.png';<br />
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');<br />
var links = post.link || [];<br />
for (var j = 0; j < links.length; ++j) {<br />
if (links[j].rel == 'alternate') break;<br />
}<br />
var postUrl = links[j].href;<br />
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';<br />
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';<br />
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';<br />
html.push('<div class="bs-item">', item, '</div>');<br />
}<br />
html.push('</div>');<br />
document.write(html.join(""));<br />
}<br />
//]]><br />
</script></blockquote>
<span style="background-color: white; font-size: 13px;"><br /></span>
<ul style="margin: 0px 20px 20px 0px; padding-left: 40px;">
<li><span style="background-color: white;">Selanjutnya cari kode <b>]]><b:skin></b> dan tempatkan kode dibawah ini tepat diatasnya </span></li>
</ul>
</div>
</div>
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px;">
<blockquote class="tr_bq" style="background-color: #364146; background-position: 0% 0%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #d5c881; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 13px; line-height: 20px; padding: 10px 20px; position: relative;">
/* BloggerSentral Recent Posts Image Gallery CSS Start */<br />
.bsrp-gallery {padding:10px; clear:both;}<br />
.bsrp-gallery:after {content: "";display: table;clear: both;}<br />
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}<br />
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}<br />
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}<br />
.bsrp-gallery a:hover img {background: #ee7e22;}<br />
/* BloggerSentral Recent Posts Image Gallery CSS End */</blockquote>
<br />
<span style="background-color: white;">Lalu <b>Save </b></span><br />
<ul style="margin: 0px 20px 20px 0px; padding-left: 40px;">
<li><span style="background-color: white;">Dan masuk pada tataletak <b>Add Gadget/HTML Javascript</b> masukan kode dibawah ini </span></li>
</ul>
<br />
<blockquote style="background-color: #364146; background-position: 0% 0%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #d5c881; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 13px; line-height: 20px; padding: 10px 20px; position: relative;">
<script><br />
var bsrpg_thumbSize = <span style="color: #660000;"><b>150</b></span>;<br />
var bsrpg_showTitle = <span style="color: #660000;"><b>true</b></span>;<br />
</script><br />
<script src="<span style="color: #660000;"><b>/feeds/posts/summary?max-results</b>=<b>8</b></span>&alt=json-in-script&callback=bsrpGallery"></script></blockquote>
<h3 style="border-bottom-color: rgb(210, 210, 210); border-bottom-width: 3px; font-family: Oswald, Arial, Helvetica, Geneva, sans-serif; font-weight: normal; line-height: 27.454544067382813px; margin: 5px 0px 10px; width: 620px;">
<span style="background-color: white;"><span style="font-size: large;">#NOTE</span></span></h3>
</div>
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px;">
<ul style="margin: 0px 20px 20px 0px; padding-left: 40px;">
<li><span style="background-color: white;">Tulisan <span style="color: #660000;"><b>150</b></span> merupakan ukuran gambar / thumbnails sobat bisa merubahnya sesuai selera</span></li>
<li><span style="background-color: white;">Tulisan <span style="color: #660000;"><b>true</b></span> ( thumb dengan keterangan ) bisa sobat ganti dengan <b>farse</b> ( thumb tanpa keterangan ) untuk memberikan penampilan yang berbeda </span></li>
<li><span style="background-color: white;">Angka <span style="color: #660000;"><b>8</b></span> adalah jumlah thumb gallery yang ditampilkan </span></li>
</ul>
<div>
<span style="background-color: white;">Untuk menampilkan Recent Post sesuai label </span></div>
</div>
<div style="color: #222222; font-family: 'Open Sans', Arial, Helvetica, Geneva, sans-serif; line-height: 25px;">
<blockquote style="background-color: #364146; background-position: 0% 0%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #d5c881; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 13px; line-height: 20px; padding: 10px 20px; position: relative;">
<script><br />
var bsrpg_thumbSize = 150;<br />
var bsrpg_showTitle = true;<br />
</script><br />
<script src="/feeds/posts/summary/-/<b><span style="color: #660000;">Label</span> </b>=8&alt=json-in-script&callback=bsrpGallery"></script></blockquote>
<span style="background-color: white;">Ganti tulisan<span style="color: #660000;"> <b>label</b></span>  dengan label sobat</span></div>
</div>

M-S Blog || Membuat Recent Post ber-Gambar pada Blog, Untuk DEMO sobat bisa melihat widget recent post di sidebar footer (scroll sampai bawah) Beriku…

Nov 11, 2013 +

Mengenal Sintak Lesser pada CSS3

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;"><b><span style="font-size: large;">M-S Blog</span> || </b></span><span style="color: #333333; font-family: Abel, sans-serif;"><span style="line-height: 22.390625px;"><b>Mengenal Sintak Lesser pada CSS3</b>, </span></span><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;">Untuk membangun halaman web penuh HTML5 dan CSS3 Anda akan mulai menggunakan beberapa stylesheet jauh lebih kompleks. Banyak desainer tahu kode singkat (seperti font: properti), karena ini telah menjadi standar bahkan pada sebelum CSS2.</span><br />
<span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHi37fcg23Lily5NlItWKxSxGRIffJeFkyX75s2BM7Vcxhu0x5tMUQh5D-4fNC8bUiar7xGI6za5EUfQS-McmIC5mQBkRrH6vrcKtoKZNclyZtAHHC1hXMvOQHz7b5hx3BpilNRWLpzk/s1600/day1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mengenal Sintak Lesser pada CSS3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHi37fcg23Lily5NlItWKxSxGRIffJeFkyX75s2BM7Vcxhu0x5tMUQh5D-4fNC8bUiar7xGI6za5EUfQS-McmIC5mQBkRrH6vrcKtoKZNclyZtAHHC1hXMvOQHz7b5hx3BpilNRWLpzk/s1600/day1.jpg" title="Mengenal Sintak Lesser pada CSS3" /></a></div>
<span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"><br /></span>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;">Tetapi ada beberapa properti baru di CSS3 yang banyak desainer tidak berpikir tentangnya. Banyak dari ini tidak hanya untuk estetika, tetapi juga mencakup efek animasi. Berikut adalah daftar singkat yang menjelaskan beberapa sifatnya Anda dapat mempertimbangkan untuk bermain dengan ini. Coba googling untuk contoh sintaks jika Anda merasa kurang jelas.</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: #eeeeee; border: 0px; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"> box-shadow </span><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"> : menambahkan efek bayangan rapi untuk elemen halaman Anda. Anda diberikan 4 parameter yang mengatur posisi kiri / kanan , atas / bawah , bayangan kabur dan warna. Perhatikan bahwa bayangan kotak tidak dianggap ruang tambahan dengan lebar asli / tinggi .</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: #eeeeee; border: 0px; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"> text-shadow </span><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"> : menciptakan bayangan indah di belakang teks halaman Anda. Dengan efek yang tepat Anda dapat memunculkan untuk pop langsung dari halaman. Baca lebih banyak tentang bayangan teks di pos ini .</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: #eeeeee; border: 0px; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"> border-radius </span><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"> : sudut Rounded telah mengambil waktu yang lama untuk menjadi standar yang diterima. Beberapa tahun yang lalu banyak web 2.0 desainer kerajinan gambar latar belakang hanya untuk menyesuaikan sudut bulat dengan CSS. Tetapi menggunakan CSS3 border-radius Anda dapat memanipulasi kurva masing-masing perbatasan pada setiap elemen .</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: #eeeeee; border: 0px; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"> opacity </span><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"> : Sepertinya properti sederhana yang banyak desainer tidak menganggapnya. Opacity mengharapkan masukan numerik tunggal berkisar 0-1,0 ( 0 % - 100 % ). Efek ini bekerja  sebagai animasi melayang-layang .</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: #eeeeee; border: 0px; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"> @font-face </span><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"> : contoh indah lain dari beberapa gaya CSS kompleks dan tipografi. Web desainer sekarang dapat bekerja dengan font kustom mereka sendiri dengan mendefinisikan mereka sebagai variabel dalam dokumen CSS Anda. Proses ini agak membingungkan, tapi Unsur Zen telah menggariskan proses dengan cara yang sangat sederhana.</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: #eeeeee; border: 0px; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"> box-sizing </span><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"> : secara default kotak - sizing akan mengatur semua elemen Anda sebagai konten - kotak. Ini berarti lebar, padding, dan perbatasan semua termasuk ke dalam lebar maksimal. Tapi diatur ke perbatasan - kotak Anda dapat menentukan lebar maksimal (katakanlah 20px ) dan menambahkan bantalan / perbatasan akan memasukkan diri ke dalam ini, sehingga menghilangkan ruang di dalam objek. Ini adalah properti yang fantastis setelah Anda menguasainya.</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;">Properti ini semuanya memiliki keuntungan dan downfalls mereka. Saya tidak akan berusaha merekomendasikan untuk menjejalkan mereka semua ke dalam halaman web Anda. Tapi praktik akan memberikan pola pikir yang jelas untuk masuk ke dalam mengembangkan website lebih lanjut dengan mudah.</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;">Salah satu bagian inti tambahan sintaks layak disebutkan adalah penyeleksi atribut. Dengan CSS3 kini Anda dapat menentukan gaya berdasarkan atribut HTML (seperti jenis, href, judul) dan bahkan memberikan nilai-nilai tertentu. Jadi misalnya kita dapat menargetkan link dengan atribut judul didefinisikan dan memberi mereka satu set ikon latar belakang.</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br />
<pre style="background-color: #002b36; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 3px; color: #111111; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 11.6px; line-height: 1.5em; margin-bottom: 1em; margin-top: 1em; padding: 0.5em 1em; position: relative; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;"><code class="css" style="background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; color: #859900; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; margin: 0px auto; padding: 0px; vertical-align: baseline;">    <span class="tag" style="border: 0px; font-weight: bold; margin: 0px auto; padding: 0px; vertical-align: baseline;">ul</span> <span class="tag" style="border: 0px; font-weight: bold; margin: 0px auto; padding: 0px; vertical-align: baseline;">li</span><span class="attr_selector" style="border: 0px; color: #586e75; margin: 0px auto; padding: 0px; vertical-align: baseline;">[title^="ico"]</span> <span class="rules" style="border: 0px; margin: 0px auto; padding: 0px; vertical-align: baseline;">{  
        <span class="rule" style="border: 0px; margin: 0px auto; padding: 0px; vertical-align: baseline;"><span class="attribute" style="border: 0px; margin: 0px auto; padding: 0px; vertical-align: baseline;">background</span>:<span class="value" style="border: 0px; color: #268bd2; margin: 0px auto; padding: 0px; vertical-align: baseline;"> <span class="function" style="border: 0px; margin: 0px auto; padding: 0px; vertical-align: baseline;">url(<span class="string" style="border: 0px; margin: 0px auto; padding: 0px; vertical-align: baseline;">'my-icon.gif'</span>)</span>;</span></span>  
    <span class="rule" style="border: 0px; margin: 0px auto; padding: 0px; vertical-align: baseline;">}</span></span>  </code></pre>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;">Jika Anda melihat saya telah menyertakan simbol caret sebelum tanda. Ini adalah sebuah operator yang mendefinisikan semua item daftar yang memegang awalan,</span><b style="background-color: white; border: 0px; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"> ico</b><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;">. Atau Anda dapat mengganti tanda sisipan </span><b style="background-color: white; border: 0px; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;">(^)</b><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"> dengan tanda dolar </span><b style="background-color: white; border: 0px; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;">($)</b><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"> untuk menargetkan daerah akhiran judul Anda. Dengan cara ini CSS3 tahu untuk menambahkan gambar latar belakang di mana Anda bisa mengatur judul sebagai 'pertama ico' atau 'buku ico'. silahkan membaca lebih banyak tentang penyeleksi atribut di mana saja atau tutor lain jika Anda tertarik.</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" /><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;">Demikian semoga memberi anda pengertian baru dan berguna untuk blog atau web anda...</span></div>

M-S Blog || Mengenal Sintak Lesser pada CSS3, Untuk membangun halaman web penuh HTML5 dan CSS3 Anda akan mulai menggunakan beberapa stylesheet jauh l…

Nov 11, 2013 +

Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #222222; letter-spacing: 0.29333335161209106px; line-height: 26px; outline: none; padding: 0px; vertical-align: baseline;">
<b style="font-family: 'Open Sans', sans-serif;"><span style="font-size: large;">M-S Blog</span><span style="font-size: 15px;"> || Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar, </span></b><span style="font-family: Verdana, sans-serif; font-size: x-small;"><span style="color: #444444; letter-spacing: normal; line-height: 22.390625px; text-align: justify;">sistem operasi ubuntu adalah salah satu distro atau varian linux yang diturunkan dari keluarga debian, bagi sobat yang baru mendengar pasti bingung. Jadi singkatnya ubuntu adalah sistem operasi ya seperti windows 7 atau windows 8, tetapi ubuntu ini gratis sob tidak harus membayar license atau crack-crackkan jadi 100% halal sob. </span></span><br />
<div style="font-family: 'Open Sans', sans-serif;">
<br /></div>
</div>
<div style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 15px; letter-spacing: 0.29333335161209106px; line-height: 26px; outline: none; padding: 0px; vertical-align: baseline;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGnVu6cp7ex9u9ITRqkMXJn1-Seq59I_w6cxfIIBm6OVPduCjzxBWaMkZXM_3dEug9LovVy6l_8JRxzQgpsYJ4z2fS1YdbHtFXJ82Vi0pcai97wdR3lyi3KSP1c3fDyP4FKXp6vvX30SA/s1600/ubuntu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGnVu6cp7ex9u9ITRqkMXJn1-Seq59I_w6cxfIIBm6OVPduCjzxBWaMkZXM_3dEug9LovVy6l_8JRxzQgpsYJ4z2fS1YdbHtFXJ82Vi0pcai97wdR3lyi3KSP1c3fDyP4FKXp6vvX30SA/s320/ubuntu.png" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" width="320" /></a></div>
<br /></div>
<div style="background-color: white; color: #222222; font-size: 15px; letter-spacing: 0.29333335161209106px; line-height: 26px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif;">Download dulu OS ubuntu nya di <a href="http://www.ubuntu.com/desktop/get-ubuntu/download" style="color: #d3624f; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;" target="_blank">SINI</a> dan lu burn CD nya  , cari CD di warnet ada atau beli aja ,, palingan 5rb , sebaik nya lu install yang 32 bit , walaupun PC mu itu 64 bit , lah , kenapa ? Karena dengan install 32 bit , mempermudah untuk instalasi software , contoh nya modem , bagi yang pengguna modem dan software lain nya</span></div>
<div style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 15px; letter-spacing: 0.29333335161209106px; line-height: 26px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="background-color: white; color: #222222; letter-spacing: 0.29333335161209106px; line-height: 26px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<span style="font-family: Verdana, sans-serif; font-size: large;"><b>Ikuti Langkah-Langkah DIBAWAH ini !</b></span></div>
<div style="background-color: white; color: #222222; letter-spacing: 0.29333335161209106px; line-height: 26px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<ul style="list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><span style="font-family: Open Sans, sans-serif; font-size: 15px;">Setiting PC mu  agar booting lewat CD (untuk laptop toshiba tidak perlu masuk ke bios, cukup tekan F12 sesaat setelah dihidupkan dan pilih boot from CD/DVD, laptop ASUS tekan </span><b style="background-color: transparent; border: none; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Shift + Esc</b><span style="font-family: Open Sans, sans-serif; font-size: 15px;"> untuk laptop merek lain saya belum pernah mencoba, jika ada kesulitan crash / error , silahkan wisata di </span><a href="http://www.google.com/" style="color: #d3624f; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;" target="_blank">Google</a><span style="font-family: Open Sans, sans-serif; font-size: 15px;"> </span><span style="font-family: Verdana, sans-serif; font-size: large;"><b><i>:)</i></b></span></li>
<li style="font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Misalnya  selama ini lu  telah menggunakan windows dengan partisi C,D dan E. Kosongkan Drive E dengan memindah semua data ke Drive D. Akan lebih baik jika data-data penting  mu di simpan dahulu di CD atau flashdisk gunanya biar gak kehilangan data data mu . </li>
<li style="font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Masukkan CD Ubuntu , kemudian akan tampil layar seperti di bawah, hebatnya VGA akan langsung terdetek oleh Ubuntu.</li>
</ul>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rbI6SYgqc7sIxjleDnkjTTyqAV9QVSEHzztPSNrjx1CTJky-4yCU0VAvk1sQi3im5seyDeNfcNP-m4wI4mzI5LCxcZmElIt-y02P8bBsUWVahXpzO1cfMfC7at9rV40uowyDwUYPFrs7/s1600/cara-install-ubuntu-1010-ubuntu-loading.png" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rbI6SYgqc7sIxjleDnkjTTyqAV9QVSEHzztPSNrjx1CTJky-4yCU0VAvk1sQi3im5seyDeNfcNP-m4wI4mzI5LCxcZmElIt-y02P8bBsUWVahXpzO1cfMfC7at9rV40uowyDwUYPFrs7/s1600/cara-install-ubuntu-1010-ubuntu-loading.png" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" /></a></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
</div>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li style="margin: 0px; outline: none; padding: 0px; text-align: left; vertical-align: baseline;">trus nanti nya klick <b style="background-color: transparent; border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><i style="background-color: transparent; border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Install Ubuntu (bkan usus buntu :v )</i></b></li>
<li style="margin: 0px; outline: none; padding: 0px; text-align: left; vertical-align: baseline;">Jika lu internetan nya pake modem atau wifian klick <b style="background-color: transparent; border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Download Update Whiles Installing</b>. Tp sebaiknya gausah , bikin lama aja waktu nge install nya</li>
</ul>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimKENS8x35yHjxFnuMaObEd78IqhwyJ2l-mROUI3UPuHYAu2JprBaaR0Nx7nJ8eip9q1RLxz-RLrSj1DiwWHdGSbAlbFpJsKEjkGak3gy9-Dyjy131vxpgJSAyOGynhDU4bzesV_4qD-X/s1600/cara-install-ubuntu-1010-preaparing-to-install-ubuntu.png" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimKENS8x35yHjxFnuMaObEd78IqhwyJ2l-mROUI3UPuHYAu2JprBaaR0Nx7nJ8eip9q1RLxz-RLrSj1DiwWHdGSbAlbFpJsKEjkGak3gy9-Dyjy131vxpgJSAyOGynhDU4bzesV_4qD-X/s1600/cara-install-ubuntu-1010-preaparing-to-install-ubuntu.png" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" /></a></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
</div>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Ini adalah langkah yang paling penting, jika di disk mu  terdapat data penting dan OS lain misalnya Windows silakan pilih Specify partitions manually.</li>
</ul>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxUGIU5UveVTS8-lBM-1bianl4iDnSEeW86kwHsdx7B_adNgQ7D9G3C7s03tAlVnsKr9un4bIN9pEAhQDDrJswnbFpGuOpzPL6nG5uBnuFw5tTHrHfnyvizov7PezP1Nr1oOvWX_cI3bnm/s1600/cara-install-ubuntu-1010-allocate-drive-space.png" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxUGIU5UveVTS8-lBM-1bianl4iDnSEeW86kwHsdx7B_adNgQ7D9G3C7s03tAlVnsKr9un4bIN9pEAhQDDrJswnbFpGuOpzPL6nG5uBnuFw5tTHrHfnyvizov7PezP1Nr1oOvWX_cI3bnm/s1600/cara-install-ubuntu-1010-allocate-drive-space.png" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" /></a></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
</div>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Kemudian klik pada drive E yang telah dikosongkan, Dilayar Anda mungkin akan terdeteksi sebagai sda3. Lu  bisa mengenalinya dengan mengecek dulu  besar drive E ketika masih di Windows. kemudian klik <b style="background-color: transparent; border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Delete </b>nantinya  akan tersedia freespace kaya gambar di bawah</li>
</ul>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3yzpY3miNZEQgmhQllb909f5AMaRABn0FnZHsSLH9k3kATjBaoC2myn4rqQRSpgwBM2EMywI5EIr1eaoR27mhw-v7i-9bm4sepc_-xVWelPKEMlCmLUklX4To322SYEPCoPFzsmWjJugY/s1600/cara-install-ubuntu-1010-memilih-drive-kosong.png" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3yzpY3miNZEQgmhQllb909f5AMaRABn0FnZHsSLH9k3kATjBaoC2myn4rqQRSpgwBM2EMywI5EIr1eaoR27mhw-v7i-9bm4sepc_-xVWelPKEMlCmLUklX4To322SYEPCoPFzsmWjJugY/s1600/cara-install-ubuntu-1010-memilih-drive-kosong.png" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" /></a></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
</div>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><br />
<li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Langkah selanjutnya membuat partisi swap. umumnya besar swap 2X besar RAM. Klik Add kemudian ketikan besarnya partisi baru.</li>
</ul>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmK7us1Yy18J_BWQ0rlieGCDGLrbHH0mf8ffKUzeHa5Rwm5i8B03HrfvKSDRH6xwtISsVRzY9mw0xVA2jGF-gL9URVPNamkbWmQXZ3SLRrKv7N7ka2oxnU8af3hLYzFhK-VZzPg1cMaq7/s1600/cara-install-ubuntu-1010-membuat-partisi-sda2-swap.png" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmK7us1Yy18J_BWQ0rlieGCDGLrbHH0mf8ffKUzeHa5Rwm5i8B03HrfvKSDRH6xwtISsVRzY9mw0xVA2jGF-gL9URVPNamkbWmQXZ3SLRrKv7N7ka2oxnU8af3hLYzFhK-VZzPg1cMaq7/s1600/cara-install-ubuntu-1010-membuat-partisi-sda2-swap.png" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" /></a></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
</div>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Membuat partisi root dengan cara klik <b style="background-color: transparent; border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Add</b> dan habiskan saja semua freespace yang tersisa , habiskan bukan berarti lu makan laptop / PC mu :v</li>
</ul>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"></ul>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWG1YPWEc4I9nQ_gHK9EkGtZRrrH2_pUFIyPEpbNi_dVeLLnSrFu3LkkwzD_6aFUGYY8UN2gUAGGmbFd0sx1RXPMpL_G1e4W0f8G7yqGvpseAAm_0lpynhRbw55W7B7nKTDockB4TPYJd/s1600/cara-install-ubuntu-1010-membuat-partisi-sda1-root.png" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWG1YPWEc4I9nQ_gHK9EkGtZRrrH2_pUFIyPEpbNi_dVeLLnSrFu3LkkwzD_6aFUGYY8UN2gUAGGmbFd0sx1RXPMpL_G1e4W0f8G7yqGvpseAAm_0lpynhRbw55W7B7nKTDockB4TPYJd/s1600/cara-install-ubuntu-1010-membuat-partisi-sda1-root.png" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" /></a></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
</div>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Jika suatu saat lu  udah merasa nyaman menggunakan Ubuntu dan akan menggunakannya sebagai OS utama untuk berbagai keperluan sebaiknya memisahkan menjadi beberapa drive. Settingan  ini khusus  pada laptop gw <b style="background-color: transparent; border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">sda</b>1 untuk /root (berisi files system), sda2 /home (berisi data user) dan sda3 /opt (berisi data mysql) dengan pertimbangan mempermudah backup menggunakan Ghost(bukan hantu :v )</li>
</ul>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizgFF7TGDtkAPv24cse3l44M7veNzOANBI6ya0uZOrQMNT0eSmRitd3gr-t0617qKdwc4kDyMB0XWvnuEJGX_zil6olJzaNrpUPjTefgjuKACWcNb-xO3uQ59Uqohb0ivCAb3POq7nRf_x/s1600/cara-install-ubuntu-1010-membuat-partisi-sda3.png" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizgFF7TGDtkAPv24cse3l44M7veNzOANBI6ya0uZOrQMNT0eSmRitd3gr-t0617qKdwc4kDyMB0XWvnuEJGX_zil6olJzaNrpUPjTefgjuKACWcNb-xO3uQ59Uqohb0ivCAb3POq7nRf_x/s1600/cara-install-ubuntu-1010-membuat-partisi-sda3.png" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" /></a></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
</div>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">trus lu tentukan dimana Lokasi mu , apa di bumi kah di Mars kah ? :v wkwkkw</li>
</ul>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBfsoLXpcb6tiiRT6iDVU5VIiBd30jwPrDlEQyOqAxg4lE14dBUkJYkb52Cb2zaVLzUeerHgVDudMdDiWWQnh__YZEBIBkcc0fjd7QOaqTGAHCEBJqN-4_TA4mquLZAXqSM-kg5NPABCJL/s1600/cara-install-ubuntu-1010-menentukan-lokasi.png" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBfsoLXpcb6tiiRT6iDVU5VIiBd30jwPrDlEQyOqAxg4lE14dBUkJYkb52Cb2zaVLzUeerHgVDudMdDiWWQnh__YZEBIBkcc0fjd7QOaqTGAHCEBJqN-4_TA4mquLZAXqSM-kg5NPABCJL/s1600/cara-install-ubuntu-1010-menentukan-lokasi.png" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" /></a></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
</div>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">terus lu tentukin Keyboard Layout , pilih USA </li>
</ul>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhASACkTEpVYItJ2mLY_17R3y7QVazrH_Cffvi2GGUy8oGy_GAM3GcO9__fOMALZhyphenhyphen1rr9lHRycpQ5B9GJTr2-fVBgaBpbZvPhMMNce4NuaAsSXyut9E2MOw92J7HRsaz_XoAoLXvNOZXRk/s1600/cara-install-ubuntu-1010-keyboart-layout-ubuntu.png" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhASACkTEpVYItJ2mLY_17R3y7QVazrH_Cffvi2GGUy8oGy_GAM3GcO9__fOMALZhyphenhyphen1rr9lHRycpQ5B9GJTr2-fVBgaBpbZvPhMMNce4NuaAsSXyut9E2MOw92J7HRsaz_XoAoLXvNOZXRk/s1600/cara-install-ubuntu-1010-keyboart-layout-ubuntu.png" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" /></a></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
</div>
<ul style="font-family: 'Open Sans', sans-serif; font-size: 15px; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Trus masukin deh , biodata mu , username dan password , ohya sebaiknya lu centang  <b style="background-color: transparent; border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Log in automatically</b></li>
</ul>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="font-family: 'Open Sans', sans-serif; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<span style="font-size: 15px;">nah selesai dehh , gmna agak susah sih bagi yang nge post :3 , tapi gapapa , ohya ada yang lupa lu instal </span><b style="background-color: transparent; border: none; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">WVDUAL , </b><span style="font-size: 15px;">cari di google aja .. untuk koneksi internet , supaya lancar waktu install software apa saja di Ubuntu..</span><br />
<br />
<br />
<b><i><span style="font-size: large;">Mau liat hasil nya ?</span></i></b><br />
<br />
<br />
<div class="separator" style="clear: both; font-size: 15px; margin: 0px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXGn56x0P6er0QME_yc7CU756d8Z8bsGBDF3TvbtXwreInngVyxdn5wHY39cKU3CiR5WMNs4DfGdJiG0FpM__nSe2-JKJVLk-LTIc2D8_ecis1SVN7YYtCPBxiQdIe5sDqAQx386Mr0zIw/s1600/zazazaza.jpg" imageanchor="1" style="color: #d3624f; margin: 0px 1em; outline: none; padding: 0px; vertical-align: baseline;"><img alt="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXGn56x0P6er0QME_yc7CU756d8Z8bsGBDF3TvbtXwreInngVyxdn5wHY39cKU3CiR5WMNs4DfGdJiG0FpM__nSe2-JKJVLk-LTIc2D8_ecis1SVN7YYtCPBxiQdIe5sDqAQx386Mr0zIw/s320/zazazaza.jpg" style="border: 1px solid rgb(221, 221, 221); height: auto; margin: 0px; max-width: 570px; outline: none; padding: 3px; vertical-align: baseline;" title="Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar" width="320" /></a></div>
</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
nah selamat mencobaa..</div>
</div>
</div>

M-S Blog || Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar, sistem operasi ubuntu adalah salah satu distro atau varian linux yang diturunkan dari …

Nov 09, 2013 +

Free Download Tune Up Utilities 2014 Full Crack

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; color: #555555; line-height: 18.03125px; margin: 0px; padding: 0px;">
<span style="font-family: Verdana, sans-serif;"><b>M-S Blog<span style="font-size: x-small;"> ||Free Download Tune Up Utilities 2014 Full Crack</span></b><span style="font-size: x-small;">, </span></span><span style="font-family: Verdana, sans-serif; font-size: 13px;">TuneUp Utilities mengoptimalkan kinerja komputer kalian, mengoreksi masalah dan membantu kalian untuk menyesuaikan sistem sesuai dengan kebutuhan. Ini menggabungkan aspek-aspek penting dari konfigurasi sistem, keamanan, pembersihan dan pemeliharaan. </span></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSRhrY42PWwJtnjIHScLVFoIhRSXYKa_nAral1dRjwyfQdWwt1XcxC_6JZNeniFS-bMJ0hzbB7Tg7oNXE5S13vbX47Za7H6o7dXlP4Dd1kV-cuvfcH9GFgGKq3f372iMRjj6dRaCaqiRA/s1600/TuneUp-Utilities-2014.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Free Download Tune Up Utilities 2014 Full Crack" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSRhrY42PWwJtnjIHScLVFoIhRSXYKa_nAral1dRjwyfQdWwt1XcxC_6JZNeniFS-bMJ0hzbB7Tg7oNXE5S13vbX47Za7H6o7dXlP4Dd1kV-cuvfcH9GFgGKq3f372iMRjj6dRaCaqiRA/s1600/TuneUp-Utilities-2014.jpg" title="Free Download Tune Up Utilities 2014 Full Crack" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px;">
<span style="font-family: Verdana, sans-serif;"><br style="margin: 0px; padding: 0px;" /></span></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px;">
<span style="font-family: Verdana, sans-serif;">Kalian dapat menghapus file yang tidak perlu dari hard disk kalian, membersihkan dan mengoptimalkan registri, tweak setting koneksi internet, memulihkan file dihapus, mengoptimalkan memori dan informasi hardware pandangan dan tips. </span></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px;">
<span style="font-family: Verdana, sans-serif;"><br style="margin: 0px; padding: 0px;" /></span></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px;">
<i style="margin: 0px; padding: 0px;"><span style="font-family: Verdana, sans-serif;">TuneUp Utilities juga memiliki Program Deactivator, Uninstaller, Editor registri, Task Manager dan bahkan alat Undelete untuk memulihkan file yang telah dihapus dari recycle bin. Sebuah alat yang sangat bagus, dengan banyak fitur yang akan menarik bagi pemula maupun pengguna tingkat lanjut, TuneUp Utilities membuat Windows lebih cepat, lebih aman, dan nyaman.</span></i></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Arial, Geneva, sans-serif; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Arial, Geneva, sans-serif; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Arial, Geneva, sans-serif; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px; text-align: center;">
<br style="margin: 0px; padding: 0px;" /></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Arial, Geneva, sans-serif; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px;">
<b style="margin: 0px; padding: 0px;">Download : </b><a href="http://www.mediafire.com/download/1fcanzzcivcqb61/Tune_UP_Utilities_2014.rar" style="-webkit-transition: all 0.5s; color: #0099cc; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.5s;">Download Tune Up Utilities 2014 + Patch</a></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Arial, Geneva, sans-serif; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px;">
<b style="margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;" /></b></div>
<div style="font-family: Arial, Geneva, sans-serif; line-height: 18.03125px; margin: 0px; padding: 0px;">
<span style="background-color: #444444; color: #eeeeee; font-size: x-small;"><span style="margin: 0px; padding: 0px;">Password : </span>teknologi-berkata</span></div>
<div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Arial, Geneva, sans-serif; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px; text-align: center;">
<b style="margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;" /></b></div>
<div style="background-color: white; color: #555555; font-family: Arial, Geneva, sans-serif; line-height: 18.03125px; margin: 0px; padding: 0px;">
<b style="margin: 0px; padding: 0px;"><u>Cara Instalasi </u></b></div>
<div style="background-color: white; color: #555555; font-family: Arial, Geneva, sans-serif; font-size: 13px; line-height: 18.03125px; margin: 0px; padding: 0px;">
<ol style="list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px;">
<li style="margin: 0.5em 0px; padding: 0px;">Install Tuneupnya sampai selesai</li>
<li style="margin: 0.5em 0px; padding: 0px;">Setelah selesai tutup semua program tuneup</li>
<li style="margin: 0.5em 0px; padding: 0px;">Matian anti virs kalian</li>
<li style="margin: 0.5em 0px; padding: 0px;">Ekstrack Patch tuneup yang sudah saya jadikan 1</li>
<li style="margin: 0.5em 0px; padding: 0px;">Copy Patch ke folder instalasi ( defaulf : C -> program files -> tune up )</li>
<li style="margin: 0.5em 0px; padding: 0px;">Jalankan Patchnya</li>
</ol>
</div>
</div>

M-S Blog ||Free Download Tune Up Utilities 2014 Full Crack, TuneUp Utilities mengoptimalkan kinerja komputer kalian, mengoreksi masalah dan membantu …

Nov 07, 2013 +

Download Template Premium - Warm Mag 100% Responsive

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="Table-Post" style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">
<table cellpadding="0" cellspacing="0" class="Table-Post2" id="AutoNumber1" style="height: 152px;"><tbody>
<tr><td class="Table-Post2" colspan="2" height="20" width="76%"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRL5LeGNToPvCxf4oXZlay7C1aWhfNrU14wP-aamWIE4KlvCUXWMX0oH00ROEW6CDkVoEnF2xeEeoJy-ELd_t3dIha6pKNE8iC0X-Zch7fF23UgyHii2X-sISTpTxK5E2xh3mf0coyEk/s1600/warm.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Download Template Premium - Warm Mag" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRL5LeGNToPvCxf4oXZlay7C1aWhfNrU14wP-aamWIE4KlvCUXWMX0oH00ROEW6CDkVoEnF2xeEeoJy-ELd_t3dIha6pKNE8iC0X-Zch7fF23UgyHii2X-sISTpTxK5E2xh3mf0coyEk/s1600/warm.jpg" title="Download Template Premium - Warm Mag" /></a></div>
<div style="line-height: 20px; padding-bottom: 5px;">
<span style="font-size: x-small;"><b><br /></b></span></div>
<div style="line-height: 20px; padding-bottom: 5px;">
<span style="font-size: x-small;"><b>TEMPLATE INFORMATIONS</b></span></div>
</td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger.com</td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>Warm Mag </b></td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Instructions</td><td class="Table-Post2" height="25" width="56%"><a href="http://www.ketemplate.com/p/ho.html" rel="nofollow" style="color: #2b7ccb; text-decoration: none;" target="_blank">Template install Here</a></td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Author name</td><td class="Table-Post2" height="25" width="56%">probthemes</td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Designer URL</td><td class="Table-Post2" height="25" width="56%">http://http://www.probthemes.com  </td></tr>
</tbody></table>
</div>
<strong style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;"><br /></strong>
<span style="font-family: Verdana, sans-serif;"><strong style="background-color: white; color: #444444; line-height: 18.1875px;">Warm Mag </strong><span style="background-color: white; color: #444444; line-height: 18.1875px;">Is a My New Blogger Template. Its High User Friendly Blogger Template. If You Blogger User This is a best Template For You, Mobile, Desktop And Tablet Friendly User Interface. Simple And Clean Color’s, Navigation Menu, Image Slider and Tabs Wight Ready Template </span></span><br />
<br style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;" />
<b style="background-color: white; color: #444444; font-family: Arial, serif; line-height: 18.1875px;">Features</b><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- 100% Responsive</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Auto Blog Post summarize And “Read More” Button</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Auto Image Crop With Thumbnail (Home Page and Label Page Only)</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Css And HTML Base Menu With Drop down</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Auto Date Show At Header Right side</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Tabs Widgets ready (Powered By Jquery)</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Image Slider (Powered By Jquery)</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Simple User Friendly Search Box</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Auto Pagination Added To Post Footer</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Social Share Widget (Placed Post Footer)</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Custom Error 404 Page With Search Box (Official 404 Page)</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Related Post Widget (Placed Post Footer)</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Ads Banner Ready</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Meta Keywords And Description Support (Official Meta Description Support)</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Random Post Selector</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Recent Post By Label</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- 4 Column Footer Area</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Flicker Image Gallery</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">- Official “FOLLOW BY EMAIL” Widget</span><br />
<ul class="tombolposting" style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px; list-style: none outside none; padding-bottom: 20px; padding-left: 30px; padding-top: 1px;"><b><b>
<li style="background-attachment: scroll; background-color: transparent; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; float: left; list-style: none outside none; margin: 0px 5px 0px 0px; padding: 0px;"><a class="demo" href="http://warmmag-cbtblogger.blogspot.com/" rel="nofollow" style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqFFj3eXzDmNB6qVxuHJVsfxuBZuTpC05cHHMoub0NvQDg4oaqAreTu_psUnhlwdiSgG7fuihMA0LSLNjrI2FD8OiPvGrbH9C-eaESVna_IxEmuS11G4BRsWUAdpheNJ0H2px4M0mV6Pb/s1600/tombol.png); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #2b7ccb; display: block; height: 34px; text-decoration: none; text-indent: -9999px; width: 256px;" target="_blank">Live Demo</a></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; float: left; list-style: none outside none; margin: 0px 5px 0px 0px; padding: 0px;"><a class="download" href="http://stashbox.org/1286094/Warmmag%20Responsive.rar" rel="nofollow" style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqFFj3eXzDmNB6qVxuHJVsfxuBZuTpC05cHHMoub0NvQDg4oaqAreTu_psUnhlwdiSgG7fuihMA0LSLNjrI2FD8OiPvGrbH9C-eaESVna_IxEmuS11G4BRsWUAdpheNJ0H2px4M0mV6Pb/s1600/tombol.png); background-position: 100% 100%; background-repeat: no-repeat no-repeat; color: #2b7ccb; display: block; height: 34px; text-decoration: none; text-indent: -9999px; width: 256px;" target="_blank">Download Theme</a></li>
</b></b></ul>
</div>

TEMPLATE INFORMATIONS Platform TypeBlogger.com Template NameWarm Mag InstructionsTemplate install Here Author nameprobthemes Designer URLhttp://http…

Nov 03, 2013 +

Template Premium - Quickly Responsive Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPYqf4pMd6zmx1c0IEvk9-IxcoVCVn01Ktg3OkknoLldTDcclJtFlQ0DNMLuMhuFbrOlzwHknTh3wMye_cDqrYdiRb_sCzJcclErVNzmN75ptZDeNhJzsfaH4LPaxSWriB02vCR1PXM1w/s1600/q.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Download Template Premium - Quickly Responsive Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPYqf4pMd6zmx1c0IEvk9-IxcoVCVn01Ktg3OkknoLldTDcclJtFlQ0DNMLuMhuFbrOlzwHknTh3wMye_cDqrYdiRb_sCzJcclErVNzmN75ptZDeNhJzsfaH4LPaxSWriB02vCR1PXM1w/s1600/q.png" title="Download Template Premium - Quickly Responsive Blogger" /></a></div>
<div class="Table-Post" style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">
<br /><table cellpadding="0" cellspacing="0" class="Table-Post2" id="AutoNumber1" style="height: 152px;"><tbody>
<tr><td class="Table-Post2" colspan="2" height="20" width="76%"><div style="line-height: 20px; padding-bottom: 5px;">
<span style="font-size: x-small;"><b>TEMPLATE INFORMATIONS</b></span></div>
</td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger.com</td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Template Name</td><td class="Table-Post2" height="25" width="56%">Quickly</td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Instructions</td><td class="Table-Post2" height="25" width="56%"><a href="http://www.ketemplate.com/p/ho.html" rel="nofollow" style="color: #2b7ccb; text-decoration: none;" target="_blank">Template install Here</a></td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Author name</td><td class="Table-Post2" height="25" width="56%">biyanpasau</td></tr>
<tr><td class="Table-Post2" height="25" width="20%">Designer URL</td><td class="Table-Post2" height="25" width="56%">http://www.dzignine.com</td></tr>
</tbody></table>
</div>
<span style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;"><br /></span>
<span style="background-color: white; color: #444444; line-height: 18.1875px;"><span style="font-family: Verdana, sans-serif;">QUICKLY is a clean multipurpose, elegant template for blogging system – Blogspot. It is highly customizable and it is easy to navigate through the posts and of course it’s written in the newest standards of HTML5 and CSS3! It’s focus on user-experience, usability, and beautiful typography and it will shows you how cool and flexible Blogspot Portfolio and Photography template can be. Fully Responsive – The theme looks great not only on desktops but also on devices, which means they are working super sleek on mobile device like ipad or iphone </span></span><br style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;" /><br />
<br />
<b><u>FUTURE</u></b><br />
<ul style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px;">
<li><b>100% RESPONSIVE</b></li>
<li>Auto Generate Logo if you have no one</li>
<li>Build Slider by adding image gadgets</li>
<li>Subscibe box at hot place</li>
<li>Support Advance Editor</li>
<li>Auto read-more, thumbnail for third party images</li>
<li>Professional pagination</li>
<li>Cool threaded comment system with up to 5 levels of replies</li>
<li>Compatible with major browsers</li>
<li>Professional admin layout, help you easy work with blog layout.</li>
</ul>
<ul class="tombolposting" style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.1875px; list-style: none outside none; padding-bottom: 20px; padding-left: 30px; padding-top: 1px;"><b><b>
<li style="background-attachment: scroll; background-color: transparent; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; float: left; list-style: none outside none; margin: 0px 5px 0px 0px; padding: 0px;"><a class="demo" href="http://themeforest.net/item/quickly-responsive-blogger-template/3136201" rel="nofollow" style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqFFj3eXzDmNB6qVxuHJVsfxuBZuTpC05cHHMoub0NvQDg4oaqAreTu_psUnhlwdiSgG7fuihMA0LSLNjrI2FD8OiPvGrbH9C-eaESVna_IxEmuS11G4BRsWUAdpheNJ0H2px4M0mV6Pb/s1600/tombol.png); background-position: 0% 100%; background-repeat: no-repeat no-repeat; color: #2b7ccb; display: block; height: 34px; text-decoration: none; text-indent: -9999px; width: 256px;" target="_blank">Live Demo </a></li>
<li style="background-attachment: scroll; background-color: transparent; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; float: left; list-style: none outside none; margin: 0px 5px 0px 0px; padding: 0px;"><a class="download" href="http://stashbox.org/1281875/quickly%20responsive.rar" rel="nofollow" style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqFFj3eXzDmNB6qVxuHJVsfxuBZuTpC05cHHMoub0NvQDg4oaqAreTu_psUnhlwdiSgG7fuihMA0LSLNjrI2FD8OiPvGrbH9C-eaESVna_IxEmuS11G4BRsWUAdpheNJ0H2px4M0mV6Pb/s1600/tombol.png); background-position: 100% 100%; background-repeat: no-repeat no-repeat; color: #2b7ccb; display: block; height: 34px; text-decoration: none; text-indent: -9999px; width: 256px;" target="_blank">Download Theme</a></li>
</b></b></ul>
<br /></div>

TEMPLATE INFORMATIONS Platform TypeBlogger.com Template NameQuickly InstructionsTemplate install Here Author namebiyanpasau Designer URLhttp://www.dz…

Nov 03, 2013 +

Download Ebook Cara Membuat Laporan dengan Crystal Report & Contoh Project di Visual Basic 6.0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<b style="font-family: Verdana, sans-serif;">M-S Blog<span style="font-size: x-small;"> || Download Ebook Cara Membuat Laporan dengan Crystal Report & Contoh Project di Visual BAsic 6.0</span></b><span style="font-family: Verdana, sans-serif; font-size: x-small;">, dalam pembuatan program database report dipergunakan untuk menampilkan data hasil seleksi maupun hasil proses pemrograman.</span></div>
<span style="background-color: white; font-family: Verdana, sans-serif;"><span style="font-size: x-small;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTT_RYvsJMlJA4-RUx8X95x5Jznw79Srckh5GXrHSe5ok_wEXaF9pD7UW-v847dIgu_MOmNr6jeW7VKtdMeVsqb231Xv2f9LWutdntBZqPjREfnqFwdbMrEOcYcz_xNtAY93YhlzuLbY/s1600/548ca5454ceba9e50eeeacfac2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Download Ebook Cara Membuat Laporan dengan Crystal Report & Contoh Project di Visual BAsic 6.0" border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTT_RYvsJMlJA4-RUx8X95x5Jznw79Srckh5GXrHSe5ok_wEXaF9pD7UW-v847dIgu_MOmNr6jeW7VKtdMeVsqb231Xv2f9LWutdntBZqPjREfnqFwdbMrEOcYcz_xNtAY93YhlzuLbY/s320/548ca5454ceba9e50eeeacfac2.jpg" title="Download Ebook Cara Membuat Laporan dengan Crystal Report & Contoh Project di Visual BAsic 6.0" width="320" /></a></div>
<span style="background-color: white; font-family: Verdana, sans-serif;"><br /><br style="font-size: 13px;" /><span style="font-size: 13px;">Crystal Report merupakan paket software yang dipergunakan untuk keperluan menampilkan report.</span><br style="font-size: 13px;" /><br style="font-size: 13px;" /><span style="font-size: 13px;">Banyak fitur pengolahan report yang disediakan oleh crystal report namun saya lebih suka memanipulasi data report melalui Query yang ada di SQL Server maupun melalui kode di Visual Basic 6.0</span><br style="font-size: 13px;" /><br style="font-size: 13px;" /><span style="font-size: 13px;">Misalnya kita akan menampilkan daftar nama kota ke file Kota.rpt</span><br style="font-size: 13px;" /><br style="font-size: 13px;" /><span style="font-size: 13px;">Komponen-komponen penyusun report dalam aplikasi kita adalah sebagai berikut:</span><br style="font-size: 13px;" /><span style="font-size: 13px;">1. View atau Table dibuat dengan SQL Server (MIS: tbl_kota atau View_kota)</span><br style="font-size: 13px;" /><span style="font-size: 13px;">2. Report dibuat dengan Crystal Report (misal kota.rpt)</span><br style="font-size: 13px;" /><span style="font-size: 13px;">3. Report Viewer (Penampil Report) dibuat dengan Form Visual Basic dan Komponen Crystal Report)</span><br style="font-size: 13px;" /><span style="font-size: 13px;">4. Script untuk memanggil frmViewer</span></span><br />
<span style="background-color: white; font-family: Verdana, sans-serif;"><span style="font-size: 13px;"><br /></span></span>
<br />
<div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b><a href="http://www.mediafire.com/download/lvbh6yqq93z8595/Basis_Javascript.rar">Download Ebook Cara Membuat Laporan dengan Crystal Report & Contoh Project di Visual BAsic 6.0</a></b></span></div>
</div>

M-S Blog || Download Ebook Cara Membuat Laporan dengan Crystal Report & Contoh Project di Visual BAsic 6.0, dalam pembuatan program database report d…

Nov 02, 2013 +

Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: #333333; font-family: Abel, sans-serif;"><span style="line-height: 22.390625px;"><b>M-S Blog || <span style="font-size: x-small;">Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS</span></b><span style="font-size: x-small;"> , </span></span></span><span style="font-size: x-small;"><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;">Dalam tutorial ini kita akan belajar tentang membuat Menu Accordion menggunakan CSS3. Ada banyak tutorial CSS3 akordeon yang bisa sobat temukan, namun dalam versi ini kita akan menggunakan css :target pseudo-class dan menu ini akan bekerja pada browser yang mendukung properti CSS3. cara dan langkajnya silahkan disimak dibawah ini:</span></span><br />
<span style="font-size: x-small;"><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;"><br /></span></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2bvW9yrYRIuANIcJAPxlbvDbEXQoFGWDlzTyykt53y-xhJ69QV_G1jTU_nb1Q6ECZwGta7tnvi2UeihekldWHrD29LO_FYkd4PJFvjNusOpyZNxN_8e-KMKOUrh57ISlSzbSRizQroM4e/s1600/html-css3-accordian-menu-tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS " border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2bvW9yrYRIuANIcJAPxlbvDbEXQoFGWDlzTyykt53y-xhJ69QV_G1jTU_nb1Q6ECZwGta7tnvi2UeihekldWHrD29LO_FYkd4PJFvjNusOpyZNxN_8e-KMKOUrh57ISlSzbSRizQroM4e/s320/html-css3-accordian-menu-tutorial.jpg" title="Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS " width="320" /></a></div>
<span style="font-size: x-small;"><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;"><br /></span></span>
<span style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"><b style="border: 0px; margin: 0px auto; padding: 0px; vertical-align: baseline;">Langkah awal membuat wrapper & menu</b></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b><br style="background-color: white; color: #333333; font-size: 16px; line-height: 22.390625px;" /></b></span><span style="font-size: x-small;"><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;">Pertama kita membuat wrapper utama tag div untuk menampung & pusat semua konten menunya di dalam tag body. Di dalam tag wrapper, kita perlu membuat daftar unordered dengan nama kelas dan memberi setiap item dengan id berbeda. Dengan memberikan setiap daftar item id itu sendiri, kita akan menggunakan: Target pemilih yang akan memungkinkan kita untuk memberi gaya dan efek membuka layaknya menu akordeon.</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;" /><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;">Anda perlu membuat setiap daftar id yang berbeda (misalnya satu, dua dst) untuk target pemilih sebagai fungsi, ini akan membuat sub menu terlihat dengan efek membuka ketika element menu diklik. lihat kode dibawah ini:</span></span><br />
<br />
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
<div id="wrapper"><br />
    <ul class="menu-akordeon"><br />
        <li id="satu"><a href="#link">Menu satu</a></li><br />
        <li id="dua"><a href="#link">Menu dua</a></li><br />
        <li id="tiga"><a href="#link">Menu tiga</a></li><br />
        <li id="empat"><a href="#link">Menu empat</a></li><br />
    </ul><br />
</div></blockquote>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" />
<span style="font-size: x-small;"><span style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"><b style="border: 0px; margin: 0px auto; padding: 0px; vertical-align: baseline;">Menambahkan sub Menu</b></span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;" /><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;">Untuk sub menu, kita perlu menambahkan unordered daftar kedua dengan nama kelas sendiri dalam setiap item daftar. kegunaan dari sub menu ini adalah ketika menu utama di klik, maka daftar menu ini yang akan muncul, cara membuatnya sbb:</span></span><br />
<br />
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
<li id="satu"><a href="#link">Menu satu</a><br />
     <ul class="sub-menu"><br />
           <li><a href="#link satu">Terbuka 1</a></li><br />
           <li><a href="#link satu">Terbuka 2</a></li><br />
           <li><a href="#link satu">Terbuka 3</a></li><br />
     </ul><br />
</li></blockquote>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" />
<span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;"><span style="font-size: x-small;">jika menu dan sub menu sampai pada hasil akhir, maka kode htmlnya akan menjadi seperti ini jika menu dan sub menu disatukan:</span></span><br />
<br />
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
<div id="wrapper"><br />
    <ul class="menu-akordeon"><br />
        <li id="satu"><a href="#link">Menu satu</a></li><br />
              <ul class="sub-menu"><br />
                 <li><a href="#link satu">Terbuka 1</a></li><br />
                 <li><a href="#link satu">Terbuka 2</a></li><br />
                 <li><a href="#link satu">Terbuka 3</a></li><br />
              </ul><br />
        </li><br />
        <li id="dua"><a href="#link">Menu dua</a></li><br />
        <li id="tiga"><a href="#link">Menu tiga</a></li><br />
        <li id="empat"><a href="#link">Menu empat</a></li><br />
    </ul><br />
</div></blockquote>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" />
<span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;"><span style="font-size: x-small;">jika anda lebih banyak sub menu, silahkan lakukan langkah yang sama membuat sub menunya dan tempatkan seperti yang telah saya terapkan. sedangkan untuk cssnya, kita buat wrappernya dulu seperti ini:</span></span><br />
<br />
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
#wrapper {<br />
width:250px;<br />
margin: 0 auto;<br />
}</blockquote>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" />
<span style="font-size: x-small;"><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;">ubah lebar 250 pixel sesuai keinginan atau kebutuhan anda. jika ingin anda bisa menambahkan gaya background, font, margin, pading dsb. untuk css menunya perhatikan kode css berikut:</span><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;" /><br style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;" /><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;">Sebagai langkah pertama untuk menu akordeon, Anda perlu menambahkan ulang gaya menu. css berikut ini akan menghapus margins, paddings, list styles, borders dan outline.</span></span><br />
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.menu-akordeon,<br />
.menu-akordeon ul,<br />
.menu-akordeon li,<br />
.menu-akordeon a,<br />
.menu-akordeon span {<br />
 margin: 0;<br />
 padding: 0;<br />
 border: 0;<br />
 outline: none;<br />
}<br />
<br />
.menu-akordeon li {<br />
 list-style: none;<br />
}</blockquote>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" />
<span style="font-size: x-small;"><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;">Sekarang membuat css untuk link menu, ini termasuk gaya CSS3 Gradient, gaya font, bayangan dengan beberapa css dasar.</span></span><br />
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
/* Contoh css3 menu Accordian db */<br />
<br />
.menu-akordeon li > a {<br />
 display: block;<br />
 position: relative;<br />
 min-width: 160px;<br />
 padding: 0 10px 0 0;<br />
 text-align: center;<br />
 height: 32px;<br />
 color: #FFFFFF;<br />
 font: bold 12px/32px Arial, sans-serif;<br />
 text-decoration: none;<br />
 background: #343435;<br />
 background: -moz-linear-gradient(top, #343435 1%, #4a4a4a 100%);<br />
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#343435), color-stop(100%,#4a4a4a));<br />
 background: -webkit-linear-gradient(top, #343435 1%,#4a4a4a 100%);<br />
 background: -o-linear-gradient(top, #343435 1%,#4a4a4a 100%);<br />
 background: -ms-linear-gradient(top, #343435 1%,#4a4a4a 100%);<br />
 background: linear-gradient(top, #343435 1%,#4a4a4a 100%);<br />
 -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);<br />
 -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);<br />
 box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);<br />
}<br />
<br />
.menu-akordeon > li:hover > a,<br />
.menu-akordeon > li:target > a {<br />
 text-shadow: 1px 1px 1px rgba(255,255,255, .2);<br />
 background: #20a4ca;<br />
 background: -moz-linear-gradient(top, #20a4ca 1%, #47b5d4 100%);<br />
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#20a4ca), color-stop(100%,#47b5d4));<br />
 background: -webkit-linear-gradient(top, #20a4ca 1%,#47b5d4 100%);<br />
 background: -o-linear-gradient(top, #20a4ca 1%,#47b5d4 100%);<br />
 background: -ms-linear-gradient(top, #20a4ca 1%,#47b5d4 100%);<br />
 background: linear-gradient(top, #20a4ca 1%,#47b5d4 100%);<br />
 -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);<br />
 -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);<br />
 box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);<br />
}</blockquote>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" />
<span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;"><span style="font-size: x-small;">Selanjutnya Anda perlu membuat css untuk sub-menunya, ini termasuk warna latar belakang, bayangan dan dasar-dasar lainnya untuk membantu membuat sub-menu terlihat rapi. lihat kode css ini:</span></span><br />
<br />
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
/* Contoh CSS Sub-Menu db */<br />
<br />
.sub-menu li a {<br />
 color: #797979;<br />
 text-shadow: 1px 1px 0px rgba(255,255,255, .2);<br />
 background: #eae9e9;<br />
 border-bottom: 1px solid #c1bfbf;<br />
 -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);<br />
 -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);<br />
 box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);<br />
}<br />
<br />
.sub-menu li:hover a { background: #f6f5f5; }</blockquote>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" />
<span style="font-size: x-small;"><span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;">Untuk melengkapi menu akordeon, Anda perlu menyelesaikan stylesheet dengan kode di bawah ini:</span></span><br />
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
/* CSS untu mengfungsikan Accordian */<br />
<br />
.menu-akordeon li > .sub-menu {<br />
 height: 0;<br />
 overflow: hidden;<br />
 -webkit-transition: height .2s ease-in-out;<br />
 -moz-transition: height .2s ease-in-out;<br />
 -o-transition: height .2s ease-in-out;<br />
 -ms-transition: height .2s ease-in-out;<br />
 transition: height .2s ease-in-out;<br />
}<br />
<br />
.menu-akordeon li:target > .sub-menu {<br />
 height: 98px;<br />
}</blockquote>
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" />
<span style="background-color: white; color: #333333; font-family: Abel, sans-serif; line-height: 22.390625px;"><span style="font-size: x-small;">CSS diatas untuk membuat efek menyembunyikan sub-menu, yaitu gaya transisi yang memberi akordeon sub-menu drop out ketika diklik. saya membuat ukuran 98px untuk tinggi karena saya membuat menu dengan ukuran yang sama dari sub link untuk setiap menu. Jika Anda berniat untuk membuat yang berbeda dari sub-link untuk setiap menu, Anda harus menambahkan ketinggian yang berbeda untuk masing-masing sub-menu tergantung pada berapa banyak link yang Anda tempatkan. </span></span><br />
<br style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;" />
<span style="background-color: white; color: #333333; font-family: Abel, sans-serif; font-size: 16px; line-height: 22.390625px;"><b><i>Semoga berguna dan bermanfaat...</i></b></span></div>

M-S Blog || Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS , Dalam tutorial ini kita akan belajar tentang membuat Menu Accordion menggunakan…

Nov 02, 2013 +

Load more posts

M-S Blog

M-S Blog

M-S Blog

Cara Membuat Tombol Demo dan Download di Blogger

Cara Membuat Search Box Blog Seperti Search Box Google di Blogger

Free Download Smadav Pro 9.4.2 2013 + Keygen

Membuat Menu Horizontal CSS3 Dengan Efect Hover pada Blog

Membuat Recent Post ber-Gambar pada Blog

Mengenal Sintak Lesser pada CSS3

Tuturial Cara Installasi OS Ubuntu 10.10 + Gambar

Free Download Tune Up Utilities 2014 Full Crack

Download Template Premium - Warm Mag 100% Responsive

Template Premium - Quickly Responsive Blogger

Download Ebook Cara Membuat Laporan dengan Crystal Report & Contoh Project di Visual Basic 6.0

Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS

Popular Posts

Blog Archive