kumpulan tutorial blog

At a Glance

Mahfid Mayanto adalah namaku tinggal di jl.tamrin dusun kebonsari kecamatan balung desa balunglor kabupaten jember ,pekerjaan utamaku adalah photo Editing jadi sebagian besar Aktifitasku berada depan Komputer,berawal dari itulah untuk mengisi waktu senggang aku coba buat blog dengan tema kumpulan tutorial blog

Mari Bergabung

Banyak teman banyak ilmu itulah Motifasi yang selalu aku pegang teguh ,belajar bisa dari mana saja selama ada keinginan apa yang selama ini kita kira sulit ternyata terasa sangat mudah jika kita tidak merasa malu untuk bertanya dan mencoba ,Dengan semangat kegagalan adalah awal kesuksesan yang tertunda ,Salam semangat blogger indonesia

menu horisontal keren part 2

Posted on 01.41 No Comments
Label:

Setelah sebelumnya aku posting tentang menu horisontal keren part1 nah sebagai kelanjutannya kumpulan aneka tutorial kali ini masih akan membuat tentang menu horisontal keren part 2 sebagai contoh demonya kunjungi disini..nah untuk cara membuatnya ikuti tutorialnya seperti di bawah ini :
  1.  login ke blogger setelah masuk dasboard pilih edit HTML jangan lupa download lengkap dulu template takut ada kesalahan . Cari kode ]]> lalu letakkan kode css di bawah ini tepat di atas ]]> berikut kodenya
    2.     #rl-menu, #rl-menu ul {

        margin: 0;

        padding: 0;

        list-style: none;

        }

        #rl-menu {

        width: 700px;

        margin: 60px auto;

        border: 1px solid #222;

        background-color: #111;

        background-image: -moz-linear-gradient(#444, #111);

        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

        background-image: -webkit-linear-gradient(#444, #111);

        background-image: -o-linear-gradient(#444, #111);

        background-image: -ms-linear-gradient(#444, #111);

        background-image: linear-gradient(#444, #111);

        -moz-border-radius: 6px;

        -webkit-border-radius: 6px;

        border-radius: 6px;

        -moz-box-shadow: 0 1px 1px #777;

        -webkit-box-shadow: 0 1px 1px #777;

        box-shadow: 0 1px 1px #777;

        }

        #rl-menu:before,

        #rl-menu:after {

        content: "";

        display: table;

        }

        #rl-menu:after {

        clear: both;

        }

        #rl-menu {

        zoom:1;

        }

        #rl-menu li {

        float: left;

        border-right: 1px solid #222;

        -moz-box-shadow: 1px 0 0 #444;

        -webkit-box-shadow: 1px 0 0 #444;

        box-shadow: 1px 0 0 #444;

        position: relative;

        }

        #rl-menu a {

        float: left;

        padding: 12px 30px;

        color: #999;

        text-transform: uppercase;

        font: bold 12px Arial, Helvetica;

        text-decoration: none;

        text-shadow: 0 1px 0 #000;

        }

        #rl-menu li:hover > a {

        color: #fafafa;

        }

        *html #rl-menu li a:hover { /* IE6 only */

        color: #fafafa;

        }

        #rl-menu ul {

        margin: 20px 0 0 0;

        _margin: 0; /*IE6 only*/

        opacity: 0;

        visibility: hidden;

        position: absolute;

        top: 38px;

        left: 0;

        z-index: 9999;

        background: #444;

        background: -moz-linear-gradient(#444, #111);

        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

        background: -webkit-linear-gradient(#444, #111);

        background: -o-linear-gradient(#444, #111);

        background: -ms-linear-gradient(#444, #111);

        background: linear-gradient(#444, #111);

        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

        box-shadow: 0 -1px 0 rgba(255,255,255,.3);

        -moz-border-radius: 3px;

        -webkit-border-radius: 3px;

        border-radius: 3px;

        -webkit-transition: all .5s ease-in-out;

        -moz-transition: all .5s ease-in-out;

        -ms-transition: all .5s ease-in-out;

        -o-transition: all .5s ease-in-out;

        transition: all .2s ease-in-out;

        }

        #rl-menu li:hover > ul {

        opacity: 1;

        visibility: visible;

        margin: 0;

        }

        #rl-menu ul ul {

        top: 0;

        left: 150px;

        margin: 0 0 0 20px;

        _margin: 0; /*IE6 only*/

        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

        box-shadow: -1px 0 0 rgba(255,255,255,.3);

        }

        #rl-menu ul li {

        float: none;

        display: block;

        border: 0;

        _line-height: 0; /*IE6 only*/

        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

        box-shadow: 0 1px 0 #111, 0 2px 0 #666;

        }

        #rl-menu ul li:last-child {

        -moz-box-shadow: none;

        -webkit-box-shadow: none;

        box-shadow: none;

        }

        #rl-menu ul a {

        padding: 10px;

        width: 130px;

        _height: 10px; /*IE6 only*/

        display: block;

        white-space: nowrap;

        float: none;

        text-transform: none;

        }

        #rl-menu ul a:hover {

        background-color: #0186ba;

        background-image: -moz-linear-gradient(#04acec, #0186ba);

        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

        background-image: -webkit-linear-gradient(#04acec, #0186ba);

        background-image: -o-linear-gradient(#04acec, #0186ba);

        background-image: -ms-linear-gradient(#04acec, #0186ba);

        background-image: linear-gradient(#04acec, #0186ba);

        }

        #rl-menu ul li:first-child > a {

        -moz-border-radius: 3px 3px 0 0;

        -webkit-border-radius: 3px 3px 0 0;

        border-radius: 3px 3px 0 0;

        }

        #rl-menu ul li:first-child > a:after {

        content: '';

        position: absolute;

        left: 40px;

        top: -6px;

        border-left: 6px solid transparent;

        border-right: 6px solid transparent;

        border-bottom: 6px solid #444;

        }

        #rl-menu ul ul li:first-child a:after {

        left: -6px;

        top: 50%;

        margin-top: -6px;

        border-left: 0;

        border-bottom: 6px solid transparent;

        border-top: 6px solid transparent;

        border-right: 6px solid #3b3b3b;

        }

        #rl-menu ul li:first-child a:hover:after {

        border-bottom-color: #04acec;

        }

        #rl-menu ul ul li:first-child a:hover:after {

        border-right-color: #0299d3;

        border-bottom-color: transparent;

        }

        #rl-menu ul li:last-child > a {

        -moz-border-radius: 0 0 3px 3px;

        -webkit-border-radius: 0 0 3px 3px;

        border-radius: 0 0 3px 3px;

        }

Read more »»

Cara membuat menu horisontal keren bag 1

Posted on 10.09 No Comments
Label:

M
enu adalah sebuah wadah atau tempat untuk menampung semua isi blog ,baik dalam bentuk label ataupun kategories ,tentu saja tidak sembarangan kita membuat sebuah menu ,karena menu itu sendirilah yang akan membuat tampilan blog kita akan terlihat Istimewa...!!!!!,menu itu sendiri dapat kita kategorikan menjadi 2 macam :
  1. Menu Horisontal /yaitu menu yang penataan nya dalam bentuk horisontal yang biasanya terletak di bawah header 
  2. Menu Vertikal / yaitu menu yang sering kita jumpai dalam bentuk Vertikal yang biasanya terletak di bagian kanan / kiri  Template .
    Nah untuk yang pertama yang akan kita bahas adalah cara membuat menu horisontal keren bag 1 sebagai contoh coba lihat  DEMO nya disini ,sedangkan untuk cara membuatnya adalah sebagai berikut
  1. Loggin ke blogger.com
  2. Setelah masuk dasboard pilih EDIT HTML jangan lupa download lengkap dulu template untuk menjaga kemungkinan salah dalam penempatan script 
  3. Cari kode ]]></b:skin> lalu taruh kode Css di bawah ini tepat di atas kode ]]></b:skin> berikut kodenya:

Read more »»
Langganan: Postingan (Atom)