Wawasan spiritual dan blogging: September 2013

Tanpa diragukan lagi, tekhnologi responsif semakin lama semakin populer. Hal ini memungkinkan kita untuk menghemat waktu ketika kita mengembangkan desain yang dimaksud untuk digunakan pada berbagai perangkat: dari perangkat mobile (hand phone) sampai ke komputer layar lebar. Tidak perlu untuk mengembangkan versi khusus dari situs untuk setiap format (perangkat).

Pada kesempatan kali ini saya akan share lagi ke anda tentang membuat menu responsif baru yang terlihat seperti menu facebook. Untuk membuat menu ini, kita tidak perlu javascript, semuanya diimplementasikan hanya menggunakan CSS3 (untuk IE7-IE10, Firefox, Opera, Safari, Chrome dan iPad / iPod / iPhone).

View Demo

KODE HTML

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li class="subs"><a href="#s1">Menu 1</a>
        <ul>
            <li><a href="#">Submenu A</a></li>
            <li><a href="#">Submenu B</a></li>
            <li><a href="#">Submenu C</a></li>
            <li><a href="#">Submenu D</a></li>
        </ul>
    </li>
    <li class="subs"><a href="#s2">Menu 2</a>
        <ul>
            <li><a href="#">Submenu E</a></li>
            <li><a href="#">Submenu F</a></li>
            <li><a href="#">Submenu G</a></li>
            <li><a href="#">Submenu H</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/2013/09/cara-membuat-menu-responsif-seperti.html">Kembali ke tutorial</a></li>
</ul>

LANGKAH-LANGKAHNYA :

Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

Pastekan kode di atas didalamnya

Simpan Gadget...

Silahkan ganti tanda # dengan URL/Link anda, nama Menu dan Submenu yang anda inginkan

KODE CSS

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #E9EAED;
    height: 100%;
}
body {
    color: #333333;
    font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;
}

/* other elements */
#nav_v2 {
    display: none;
}
/* top level elements */
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: rgb(78,105,162);
    background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1)));
    background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);

border-bottom: 1px solid #3A4B7B;
    height: 22px;
    padding: 10px 0 10px 5px;
    position: relative;
}
#nav > li {
    float: left;
    height: 22px;
    padding-right: 6px;
    position: relative;
    text-align: left;
}
#nav > li > a {
    border: 1px solid transparent;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 27px;
    line-height: 27px;
    margin: -3px 0 0 -1px;
    padding: 0 1px 0 11px;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #425691;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    margin-right: -8px;
    padding: 0 9px 0 11px;
    position: relative;
    z-index: 1;
}
#nav > li.subs:hover > a {
    background-color: #FFFFFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    border-bottom-width: 0;
    border-radius: 2px 2px 0 0;
    color: #000000;
    text-shadow: 0 0 transparent;
    z-index: 2;
}
/* top items separator */
#nav > li:after {
    background-color: #405791;
    content: "";
    height: 17px;
    left: 1px;
    position: absolute;
    top: 2px;
    width: 1px;
}
#nav > li:first-child:after {
    background-color: transparent;
}
/* submenu */
#nav ul {
    background-color: #FFFFFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    *border: 1px solid rgb(100, 100, 100);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    display: none;
    left: -1px;
    margin-top: 2px;
    min-width: 200px;
    padding: 6px 0;
    position: absolute;
    top: 100%;
    z-index: 1;
}
#nav li:hover ul {
    display: block;
}
#nav ul li a {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    color: #232B37;
    display: block;
    font-size: 12px;
    line-height: 20px;
    padding: 0 22px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#nav ul li a:hover {
    background-color: #6D84B4;
    border-bottom: 1px solid #3B5998;
    border-top: 1px solid #3B5998;
    color: #FFFFFF;
}

LANGKAH SELANJUTNYA :

Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan dalam pencarian
Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag ]]></b:skin>
Simpan template...Selesai

HAPPY BLOGGING..!

Postingan kali ini adalah permintaan sobat blogger mengenai blockquote yang pernah saya pakai. Blockquote yang pernah saya pakai adalah blockquote dengan tampilan menggunakan background warna gradient dan merupakan salah satu pilihan diantara tampilan-tampilan blockquote yang ada. Blockquote ini ada 2 pilihan, silahkan pilih mana yang anda suka. Live demo bisa anda lihat pada gambar diatas.

Blockquote menggunakan CSS gradient pilihan 1

KODE CSS

blockquote {
  background: -moz-linear-gradient(left,  #f7ea00 2%, #00c10c 10%, #0072ff 43%, #ff0000 81%, #e000e0 96%);
  background: -webkit-gradient(linear, left top, right top, color-stop(2%,#f7ea00), color-stop(10%,#00c10c), color-stop(43%,#0072ff), color-stop(81%,#ff0000), color-stop(96%,#e000e0));
  background: -webkit-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: -o-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: -ms-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: linear-gradient(to right,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background-color:#F1FDFE;
  background-repeat:no-repeat;
  background-size:100% 5px;
  font-size:16px;
  line-height:1.4;
  margin:10px auto;
  padding:10px;
  width:90%;
}

Blockquote menggunakan CSS gradient pilihan2

KODE CSS

blockquote {
  background: -moz-linear-gradient(left,  #f4f466 10%, #26c14a 10%, #26c14a 20%, #7db9e8 20%, #7db9e8 30%, #ff0000 30%, #ff0000 40%, #0029e0 40%, #0029e0 50%, #ad9000 50%, #ad9000 60%, #eacf00 60%, #eacf00 70%, #e000e0 70%, #e000e0 80%, #db006d 80%, #db006d 90%, #aad100 90%);
  background: -webkit-gradient(linear, left top, right top, color-stop(10%,#f4f466), color-stop(10%,#26c14a), color-stop(20%,#26c14a), color-stop(20%,#7db9e8), color-stop(30%,#7db9e8), color-stop(30%,#ff0000), color-stop(40%,#ff0000), color-stop(40%,#0029e0), color-stop(50%,#0029e0), color-stop(50%,#ad9000), color-stop(60%,#ad9000), color-stop(60%,#eacf00), color-stop(70%,#eacf00), color-stop(70%,#e000e0), color-stop(80%,#e000e0), color-stop(80%,#db006d), color-stop(90%,#db006d), color-stop(90%,#aad100));
  background: -webkit-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: -o-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: -ms-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: linear-gradient(to right,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background-color:#F1FDFE;
  background-repeat:no-repeat;
  background-size:100% 5px;
  font-size:16px;
  line-height:1.4;
  margin:10px auto;
  padding:10px;
  width:90%;
}

CARA MENAMBAHKANNYA DI BLOG

Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
Kemudian pilih -> Template-> Edit HTML

Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan proses pencarian
Berikutnya kopi dan pastekan salah satu kode CSS diatas tepat diatas kode ]]></b:skin>

KUSTOMISASI

Ada 2 cara untuk menggunakan Blockquote CSS gradient ini di postingan blog anda :

Dengan cara manual ( di postingan HTML bukan Compose)

<blockquote>isi teks</blockquote>

Menggunakan Tombol Blockquote Blog yang telah disediakan pada format Bar di bagian Edit pos (klik gambar untuk memperbesar)

Semoga bermanfa'at...

Wawasan spiritual dan blogging

28 September 2013

Cara membuat menu responsif seperti facebook di blog

27 September 2013

Cara membuat blockquote menggunakan CSS gradient di blog

Blockquote menggunakan CSS gradient pilihan 1

Blockquote menggunakan CSS gradient pilihan2