Wednesday, March 20, 2013

Domain Gratis 2013 dari CO.DE

Posted by dav On 5:33 PM
Sesuai Judul kali ini Cara menapatkan Domain Gratis 2013 dari CO.DE, saya yakin setiap orang khususnya yang sudah mengerti atau memunyai Blog / Website tergiur dengan namanya Domain Gratis, Apalagi domain gratis yang sedikit unik atau beda dari ada yang lain, itu juga termasuk saya, hehee..

Well, langsung saja pada Intinya Bagaimana  Cara menapatkan Domain Gratis 2013 dari CO.DE yang akan saya terangkan step by stepnya :D

Pertama untuk mendapatkan Domain gratis dari CO.DE tentunya anda harus mempunyai Account di website CO.DE, bagi yang belum silahkan daftar di website CO.DE

silahkan isi data Anda dengan sebenar-benarnya .
Lihat gambar Untuk lebih Jelasnya !
Domain Gratis 2013 dari CO.DE
Setelah Data sudah di isi lanjutkan dengan mengklik Tombol Register Now For Free

Jika sudah Success, silahkan Buka Email yang Anda daftarkan tadi, Password Account anda akan di kirim Via Email Soalnya :D
Domain Gratis 2013 dari CO.DE

Langkah Selanjutnya silahkan Anda login Menggunakan Email dan Password yang telah di berikan oleh pihak CO.DE tadi,
Setelah Login, Klik Menu New Project >> Webspace Create dan Isilah data Sesuai ke inginan Anda dan Klik Next
Lihat Gambar Untuk lebih jelasnya !
Domain Gratis 2013 dari CO.DE

Selanjunya Anda akan di suruh memilih domain yang Anda suka dan pastinya Gratiss tisss :D dan jika sudah cocok klik Next lagi !
Domain Gratis 2013 dari CO.DE

Jika sudah dan selamat Anda telah berhasil mendaatkan Domain Gratis dari CO.DE
Domain Gratis 2013 dari CO.DE

Selanjutnya tinggal Anda edit Suka-suka anda, mau di bikin seperti apa terserah anda bukan terserah saya :D
Domain Gratis 2013 dari CO.DE


Note :
Untuk Subdomain .co.de saat ini sedang tidak tersedia, jadi anda register Free Domain yang lain dari web CO.DE juga, "co.de domain registrations are not possible at the moment"

Setelah Mendaftar silahkan menunggu beberapa jam sebelum Domain anda UP

Ini contoh Domain Yang saya buat dari CO.DE
http://kamarsebelah.com.nu/

Disarankan setelah Login Segera mengganti Password Sefault Anda, dan untuk domain gratis dari CO.DE ini kita tidak bisa mengatur DNS servernya, so.. jika ingin mengedit website anda bisa menggunakan FileZilla, jika belum mempunyai FileZilla Bisa Anda Download di Sini !!

Domain Gratis CO.DE


Sekian Tutor yang sangat Cupu dari saya tentang Info Domain Gratis terbaru 2013, Tutor ini dihususkan bagi yang Newbie saja, dan yang master lewat dulu. jika ada pertanyaan silahkan tinggalkan komentarnya dan dengan senang hati saya akan memberikan solusi pertanyaan anda :D Terima Kasih.


Monday, March 18, 2013

Sesuai dengan Judul Meta Tag Super SEO Ampuh Optimalkan SEO Blog 

dimana kita akan membahas tentang cara mengedit Meta Tag agar Lebih SEO lagi, Sebelumnya kita sudah pernah membahas Tentang Pengertian SEO itu sendiri, bagi yang besum silahkan Baca Apa yang dimaksud dengan SEO (Search Engine Optimization),
Kita Mengetahui Bahwa salah satau pendukun SEO Blog Itu adalah Meta Tag, Gunakan Meta Tag Berikut pada Blog Anda dan rasakan perbedaanya :D meta tag ini di jamin Ampuh 100% Untuk optimalkan Seo Blog Anda,
Langsung saja cara Mengubah Meta Tag Menjadi Lebih SEO :
Pertama Anda Harus Login ke Akun Blogger anda
Setelah Login Pilih Menu template dan Klik Edit HTML dan jangan lupa centang Expand Widget Templates,
Selanjutnya Silahkan Anda cari Kode Ini : <b:include data='blog' name='all-head-content'/>
Gunakan CTRL+F untuk lebih mudah,
Setelah Ketemu, silahkan Copy semua Kode di bawah ini dan Letakkan Tepat di bawah Kode <b:include data='blog' name='all-head-content'/>

Code Meta Tag Super SEO :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='Deskripsi Blog Anda Silahkan EDIT' name='description'/>
<meta content='KeyWord SEO Blog Anda Disini' name='keywords'/>
<b:else/>
</b:if>

<meta expr:content='data:blog.pageName' name='subject'/>
<meta expr:content='data:blog.pageName' name='abstract'/>
<meta content='Judul BLOG Anda' name='copyright'/>
<meta content='NAMA ANDA' name='author'/>
<meta content='UTF-8' name='charset'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
<meta content='all,INDEX,FOLLOW,noodp,noydir' namd='Robots'/>
<meta content='1 days' name='revisit'/>
<meta content='1 Days' name='revisit-after'/>
<meta content='ID' name='language'/>
<meta content='ID' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='ID' http-equiv='content-language'/>
<meta content='no-cache' http-equiv='cache-control'/>
<meta content='no-cache' http-equiv='pragma'/>
<meta content='global' name='distribution'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='global' name='target'/>
<meta content='index,follow,snipet' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='noodp' name='robots'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='follow, all' name='Scooter'/>
<meta content='all' name='audience'/>
<meta content='all' name='Spiders'/>
<meta content='all' name='Webcrawlers'/>

Keterangan : Silahkan Anda Ganti dan Sesuaikan Tulisan Warna Merah Dengan blog Anda,

dan langkah Terakhir silahkan Save Template Anda.
Jika ada yang kurang paham Tentang Meta Tag Super SEO Ampuh Optimalkan SEO Blog Bisa meninggalkan komentarnya di bawah ini, terima kasih :)

Sunday, March 17, 2013

Apa yang dimaksud dengan SEO (Search Engine Optimization) 

Disini penulis blog Kamar sebelah akan menjelaskan sedikit pengertian dari SEO (Search Engine Optimization),
Sebelumnya mungkin sudah sangat banyak sekali blog atau web yang membahas tentang SEO (Search Engine Optimization) ini, karena memang Teknik SEO ini sangat berperan penting untuk kesuksesan kita dalam bisnis di dunia internet ataupun blogging, karena secara teknis web atau blog yang menempati urutan pertama di Google akan memiliki peluang yang lebih besar dalam menarik trafik pengunjung.
Ada beberapa Elemen untuk Mengoptimalisasikan SEO (Search Engine Optimization) Blog Atau website anda,
Diantaranya :
  • Nama Domain
  • Title atau Judul Blog Anda
  • Deskripsi Serta Keyword ( Meta )
  • Kontent atau Isi Blog Anda
  • Sitemaps dan Backlink.
Nama Domain Sangat berpengaruh Untuk SEO (Search Engine Optimization) Blog Anda Sendiri, Usahakan Nama Domain anda berhubungan dengan materi-materi yang ada dalam Blog anda sendiri.
Title atau Judul Blog Serta Judul Artikel yang anda Buat juga akan mendukung proses pencarian di Search Engine, Usahakan Judul Blog Anda Atau Judul Artikel Blog Anda yang nantinya berhubungan dengan keyboard dan Deskriptsi dan Isi Blog Anda.
Deskripsi dan Keyword (Meta) Blog Sangat berperan penting untuk mengoptimalkan SEO (Search Engine Optimization) atau Pencarian dari mesin pencari untuk Blog Anda, Tanpa Deskripsi Blog anda akan susah terindex oleh Mesin Pencari seperti Google, Begitu Juga dengan Keyword Blog, dengan Deskripsi dan Keyword Blog yang optimal, blog anda akan mudah dan bisa mendapatkan urutan pertama dari mesin pencari,
Kontent atau Isi Blog Anda, Dengan Kontent Blog yang banyak atau kaya akan kontent membuat blog anda di sukai mesin pencari seperti Google,Bing, Yahoo dan lain sebagainya, Bukan itu saja dengan kontent yang menarik dan unik tidak hanya sekedar Copy Paste, melainkan buatan atau karya anda sendiri dan blog anda akan mendapatkan trafik yang tinggi dari pengunjung serta akan lebih di pandang dari pada Blog yang hanya mempublikasikan Karya orang lain,
Sitemaps dan Backlink, untuk tambahan cara SEO (Search Engine Optimization) dengan menambahkan Sitemap atau seumpama Peta Blog anda, dengan Menyumbit Sitemap ke mesin pencari akan mempermudah bagi mesin pencari untuk menelusuri seluruh isi kontent di blog anda, sedangkan Backlink adalah kegiatan yang sering dilakukan oleh para Blogger dalam melakukan Blogwalking serta mempromosikan Blog ke Jejaring sosial agar lebih mudah mendapatkan Backlink.

Sekian dulu dari Penulis yang membahas tentang Pengertian SEO (Search Engine Optimization), Untuk Cara Mengoptimalkan SEO Blog akan di bahas di Next Posting, Silahkan tinggalkan komentarnya untuk meninggalkan saran, terima kasih

Tuesday, January 29, 2013

Cara Mudah Menambahkan Nomor di Komentar Blog

Posted by dav On 12:34 AM
Tutorial Cara Menambahkan Nomor di Komentar Blogspot - Cara lama yang mungkin beberapa orang belum tahu, yaitu menambahkan Nomor pada Komentar Pengunjung Blog. Cara ini digunakan di beberapa Blog yang saya rasa cukup bagus juga untuk diterapkan.
Cara Menambahkan Nomor di Komentar Blog
Cara Menambahkan Nomor di Komentar Blog
Anda bisa lihat script berikut dan silahkan di copy jika berminat :
  1. Cari script ]]></b:skin>
  2. Kopi Kode Berikut Sob, diatas no.1 tadi.
.comment-thread ol {
 counter-reset: countcomments;
}
.comment-thread li:before {
 content: counter(countcomments,decimal);
 counter-increment: countcomments;
 float: right;
 font-size: 22px;
 color: #555555;
 padding-left: 10px;
 padding-top: 3px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-MN8eZoAzn2VdzGqxiRgd9lMSD0LuwVzYQbm9-cA4EgZ_xLvtjYGR79Tx97d3Uo9uDBa-KAEI8IaslVkTRwQEZ_Adn1z34-ry6prEXl2xX6s02aKiTEsLl-wOSNCX747mY3esNO3cvbLr/s1600/comment+bubble2.png) no-repeat;
 margin-top: 7px;
 margin-left: 10px;
 width: 50px;
 /*image-width size*/
 height: 48px;
 /*image-height size*/
}
.comment-thread ol ol {
 counter-reset: contrebasse;
}
.comment-thread li li:before {
 content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
 counter-increment: contrebasse;
 float: right;
 font-size: 18px;
 color: #666666;
}    
Oke demikian Cara Mudah Menambahkan Nomor di Komentar Blog, kemudian Save Template ente, semoga berhasil.

Tuesday, January 15, 2013

18 Situs Editing CSS CSS3 dengan Cepat

Posted by dav On 8:10 AM
18 Situs Editing CSS CSS3 dengan Cepat - Situs untuk menunjang Edit Blog dengan CSS dan CSS 3 dengan cepat. Kalian akan sangat dibantu jika menggunakan web atau situs-situs berikut ini. Mulai dari membuat button hover, menu, css gradien, transition dan masih banyak lagi tool untuk memodifikasi blog kita dengan CSS tentunya.

Lanjut Bos, berikut ini daftar ke 18 Blog Situs Editing CSS-CSS3 dengan Cepat.

CSS Table Generator
18 Situs Editing CSS CSS3 dengan Cepat
  1. CSS Table Generator
  2. CSS3 Generator
  3. Ultimate CSS Gradient Generator
  4. CSS Border Radius
  5. CSS Box Shadow
  6. CSS Generators
  7. CSS3 Button Generator
  8. HTML Tabble Style Generator
  9. CSS Button Maker
  10. CSS3 Generator
  11. CSS3 Transforms
  12. CSS3 Button Generator
  13. CSS3 Gradiente Generator
  14. CSS3 Playground
  15. CSS Menu Builder
  16. Creative CSS3 Animation Menus
  17. CSS3 Generator-Webtutorials
  18. CSS Menu Maker
18 Situs Editing CSS CSS3 dengan Cepat


Oke, semoga link-link diatas dapat membantu Anda memaksimalkan Blog kesayangan Anda. Selamat Mencoba dan semoga lancar-lancar sadja, heee.

Monday, January 14, 2013

Cara Mudah Membuat Scrool di Komentar

Posted by dav On 3:21 PM
Cara Mudah Membuat Scrool di Komentar - Cara Paling Mudah membuat Scrool kotak di komentar blog. Related Post adalah sebuah list artikel lainnya yang bisa dibaca oleh pengunjung blog ketika sudah membaca satu artikel, biasanya berada dibawah postingan. Related post ini biasanya diset untuk menemukan artikel sejenis dari label yang di buat oleh admin blog. berikut ini tips Cara Mudah Membuat Scrool di Komentar. 
Cara Mudah Membuat Scrool di Komentar
Cara Mudah Membuat Scrool di Komentar
Pertama silahkan Login ke blog Anda kemudian masuklah ke Edit HTML.
Setelahnya silahkan Centang Expand Widget
Ketiga tekan ctrl+f kemudian ketik <data:post.body/>, jika ada 2 pilih saja yang atas.
Setelah itu Copykan script Scrool Komentar ini di Atas cara ketiga tadi.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rscr'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
Untuk tulisan yang berwarna merah bisa Anda sesuaikan.

Langkah berikutnya ini adalah menempatkan code CSS, cari ]]></b:skin> lalu copy script berikut diatas code tersebut.
.rscr{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rscr:hover{background-color: rgb(255, 255, 255);}
Setelahnya silahkan Save template Anda.


Wednesday, January 2, 2013

Membuat Log in dan Sig up dengan CSS dan J-Query - Cara membuat Simple Effective Drop Down Log in dan Sign Up dengan CSS dan Jquery. Anda dapat melihat gambarannya seperti gambar dibawah ini. Anda dapat mengkombinasikan dengan PHP misalkan untuk proyek Website Anda.

Membuat Log in dan Sig up dengan CSS dan J-Query
Membuat Log in dan Sign up dengan CSS dan J-Query
Tampilan yang dihasilkan nantinya adalah seperti diatas, anda dapat melihatnya dengan mengklik gambar karena saya tidak membuatkan untuk demonya.

Membuat Log in dan Sig up dengan CSS dan J-Query
Analogi dari proyek membuat drop Log  in
Oke lanjut untuk script dalam membuat Log in dan Sig up dengan CSS dan J-Query sebagai berikut :

HTML
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="Your email address" required>
<input id="password" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
</fieldset>
</form>
</div>                  
</li>
<li id="signup">
<a href="">Sign up FREE</a>
</li>
</ul>
</nav>
CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;  
}
nav li {
  float: left;        
}
nav #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff;
}
nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}
nav #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
nav #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
  background: #fff;
}
nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;  
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: -o-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(top, #fff, #eee);
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}
nav li #login-content {
  right: 0;
  width: 250px;
}
/*--------------------*/
#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;
}
#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;
}
/*--------------------*/
#login #actions {
  margin: 10px 0 0 0;
}
#login #submit {   background-color: #d14545;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
  background-image: -webkit-linear-gradient(top, #e97171, #d14545);
  background-image: -moz-linear-gradient(top, #e97171, #d14545);
  background-image: -ms-linear-gradient(top, #e97171, #d14545);
  background-image: -o-linear-gradient(top, #e97171, #d14545);
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;  
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}
#login #submit:hover,
#login #submit:focus {   background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
  background-image: -moz-linear-gradient(top, #d14545, #e97171);
  background-image: -ms-linear-gradient(top, #d14545, #e97171);
  background-image: -o-linear-gradient(top, #d14545, #e97171);
  background-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit:active {   outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; }
#login #submit::-moz-focus-inner {
  border: none;
}
#login label {
  float: right;
  line-height: 30px;
}
#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}
J-Query
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active'); if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
else $(this).find('span').html('&#x25BC;')
})
});
Oke, selesai dan selamat mencobanya.
thanks TRD for sharing about this tutorial.

Follow my blog with Bloglovin