free-cpanel-hosting

http://ainunxxx.blogspot.com/2017/03/free-cpanel-hosting-we-offer-you-unique.html

cpanel + hosting

28 Mar 2017

Free CPanel Hosting We offer you unique feature that no one else can give you - free web hosting account with Basic CPanel control panel

EXAMPLE>>> http://ainunx.thefreecpanel.com/ Features you will Enjoy Free Site Builder Don't know how to code your...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #1

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #2

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #3

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #4

    Content Text...

TOP themes

  • Cara Membuat Images Slider Tanpa Jquery

    Title #1

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #2

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #3

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #4

    Content Text...

Videos News

21 Mar 2017

AccessPress Store - How to set HomePage

AccessPress Store – A next generation WooCommerce theme fully built in customizer! We call it next generation because it i...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #1

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #2

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #3

    Content Text...

  • Cara Membuat Images Slider Tanpa Jquery

    Title #4

    Content Text...


» » Slide Vertikal dengan jQuery




 info yang ada di sebelah kiri atas. Bagi anda yang tertarik untuk membuatnya berikut ini langkah-langkahnya :
  1. Login ke blogger dengan akun anda.
  2. Kemudian klik rancangan
  3. Pilih Edit HTML jangan lupa centang "Expand Template Widget"
  4. Cari kode berikut ]]></b:skin> gunakan control + f biar cepet, kemudian copy kode dibawah dan letakkan diatas kode tersebut
    .panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
    .panel p{color:#ccc;margin:0 0 15px;padding:0}
    .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
    .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
    a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
    a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
    a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
    .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
    .colleft{float:left;width:130px;line-height:22px}
    .colright{float:right;width:130px;line-height:22px}
    a:focus{outline:none}
    .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
    .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
    .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
  5. Setelah itu cari kode </head> lalu copy kode dibawah ini dan letakkan diatasnya.
    <script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>
  6. Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.
  7. Masukan kode Javascript berikut dibawah script jQuery tadi:
    <script type="text/javascript">
    $(document).ready(function(){
    $(".trigger").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
    });
    </script>
  8. Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.
    <div class='panel'>
    <h3>Selamat Datang bahasa inggrisnya welcome</h3>
    <p style='text-align:justify'>Selamat datang di blog maskolis, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://creatingwebsite-maskolis.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

    <h3>Sekilas tentang maskolis</h3>
    <img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTM01yiOw-3AFsjLZtg1FiHuiuA1P8IECWIO8eydp8WY_jkJkjvNQ2RfMuYH0457p4lrzWDlTPBbJMc2URAabxg3pk4CT-XOx_DRmgXMaEryhcPuvrgu-_jwm9E-Sx6M-kxjc8nohIt4/s1600/maskolis.jpeg' width='73px'/>
    <p>Photo di samping itu bukan saya dan juga bukan pacar saya, pokoknya bukan siapa-siap saya. Nama saya maskolis saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan Desember 2010</p>

    <div style='clear:both;'/>

    <div class='columns'>
    <div class='colleft'>
    <h3>Navigasi</h3>
    <ul>
    <li><a href='#' title='home'>Home</a></li>
    <li><a href='#' title='about'>About</a></li>
    <li><a href='#' title='portfolio'>Portfolio</a></li>
    <li><a href='#' title='contact'>Contact</a></li>
    <li><a href='#' title='blog'>Blog</a></li>
    </ul>
    </div>

    <div class='colright'>
    <h3>Social Stuff</h3>
    <ul>
    <li><a href='http://twitter.com/#!/4rifin123' title='Twitter'>Twitter</a></li>
    <li><a href='http://www.blogger.com/profile/00429201158192562265' title='About Me'>About Me</a></li>
    <li><a href='mailto:helmi4rifin@gmail.com' title='Gmail'>Gmail</a></li>
    </ul>
    </div>
    </div>
    <div style='clear:both;'/>
    </div>
    <a class='trigger' href='#'>Info</a>
  9. Terakhir Save Template anda, dan lihat hasilnya
About Me

«
Next
Chatbox Slide Vertikal Dengan jQuery di Blog
»
Previous
Older Post

No comments:

Leave a Reply

a