• Beranda
  • Autosultan
  • Bitcoin
  • Dollar
  • Linux
  • LOKER
  • Printer
  • Sofware
  • sosial
  • TISniper
  • Virus
  • Windows

T.I Sniper

#Expert Advisor for MetaTrader 4 #Expert Advisor for MetaTrader 5 #youtube #google #free dollar business every day #Lowongan #Pekerjaan #Loker #forex #trading Autopilot #mining crypto #Update #Tutorial #Komputer Perbaikan, #Email #Facebook , #whatsapp ,#instagram #telegram ,#Internet ,#Motivasi , #Crypto , #AirDrop, #Bitcoin, #Ethereum, #Binance coin, #Cardano, #Degocoin, #Litecoin #Indodax, #Coinbase, #Nexo Dan Mata Uang Digital Lain , #Website, Perbaikan #Server #Domain , #Hosting, #Whm

    • Beranda
    • Contact Forum
    • Coffee JKs88
    • Tentang Kami
    • Parse Code Html
    • Text Terbalik
    • Privacy Policy

    Ikuti Kami!

    Follow Akun Instagram Kami Dapatkan Notifikasi Terbaru!
    Ikuti Kami di Facebok! Untuk mendapatkan notifikasi terbaru.

    Postingan Populer

    Cara Dapat Backlink dengan Google Dork

    Dork Seo
    Februari 13, 2016
    0

    Backlink dengan Google Dork Seo

    Dork Seo
    Januari 01, 2016
    0

    Download File ISO Windows 11 Dan Bootable USB Rufus

    Sofware Windows
    Desember 02, 2021
    0

    Cara Dapat Backlink Edu Gratis

    Seo
    Februari 13, 2016
    0

    FORUM 

    FORUM
    Desember 31, 2021
    0
    Author
    chmood
    Tautan disalin ke papan klip!
    Share Posts "Membuat Toggle Sederhana: Css dan jQuery"
  • Salin link
  • Simpan Ke Daftar Bacaan
  • Bagikan ke Facebook
  • Bagikan ke Twitter
  • Bagikan ke Pinterest
  • Bagikan ke Telegram
  • Bagikan ke Whatsapp
  • Bagikan ke Tumblr
  • Bagikan ke Line
  • Bagikan ke Email
  • HomewebsiteMembuat Toggle Sederhana: Css dan jQuery
    Membuat Toggle Sederhana: Css dan jQuery

    Membuat Toggle Sederhana: Css dan jQuery

    Simpan Postingan
    Selamat Malam kawan kawan  T.I Sniper😀
          Bertemu dengan saya angga a.k.a anggamovic, yap tak di duga ta dinyana diriku masuk kedalam author di sini ( gayanye….. wkwkkw)
    =========== Introduction ============
    Oke oke…. disini saya mungkin hanya sedikit menyinggung soal hacking, kenapa? ya karena saya sedikit menguasai soal hacking, nah sebagai gantinya saya akan lebih menitik beratkan kedalam pembahasan web desain / developer.
    Menurut Wikipedia CSS dan JQUERY adalah sebagai berikut
    CSS
    Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.Untuk mengawali perjumpaan kita, sebagai salam hangat ceritanya… saya akan memberi sebuah tutor ringan, yaitu membuat toggle sederhana dengan css dan jquery.
    Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
    CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
    JQUERY
    jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL
    Yuk, lanjut ke tutorialnya setelah mengetahui informasi mengenai CSS dan JQUERY. Berikut detail tutorialnya,
    toggle
    ==> Step 1. Wireframe & Style <==
    Kita mulai dengan tag h2 dengan link sebagai “trigger” untuk efek kita.
    HTML
    1
    2
    3
    4
    5
    6
    7
    &lt;h2&gt;&lt;a href="#"&gt;Toggle Header&lt;/a&gt;&lt;/h2&gt;
    &lt;div&gt;
        &lt;div&gt;
            &lt;h3&gt;Content Header&lt;/h3&gt;
            &lt;!--Content--&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    CSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    h2.trigger {
        padding: 0 0 0 50px;
        margin: 0 0 5px 0;
        background: url(h2_trigger_a.gif) no-repeat;
        height: 46px;
        line-height: 46px;
        width: 450px;
        font-size: 2em;
        font-weight: normal;
        float: left;
    }
    h2.trigger a {
        color: #fff;
        text-decoration: none;
        display: block;
    }
    h2.trigger a:hover { color: #ccc; }
    h2.active {background-position: left bottom;}
    /*--When toggle is triggered, it will
    shift the image to the bottom to show its "opened" state--*/
    .toggle_container {
        margin: 0 0 5px;
        padding: 0;
        border-top: 1px solid #d6d6d6;
        background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
        overflow: hidden;
        font-size: 1.2em;
        width: 500px;
        clear: both;
    }
    .toggle_container .block {
        padding: 20px;
    /*--Padding of Container--*/
        background: url(toggle_block_btm.gif) no-repeat left bottom;
    /*--Bottom rounded corners--*/
    }
    ==> Step 2. Aktifkan Toggle Dengan jQuery <==
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(document).ready(function(){
     
        //Hide (Collapse) the toggle containers on load
        $(".toggle_container").hide();
     
        //Switch the "Open" and "Close" state per click then slide up/down
    (depending on open/close state)
        $("h2.trigger").click(function(){
            $(this).toggleClass("active").next().slideToggle("slow");
            return false;
    //Prevent the browser jump to the link anchor
        });
     
    });
    Untuk demo:
    http://anggamovic.co.tv/demo/toggle.htm
    Oke, di cukupkan pembahasanya untuk sekarang, kita akan menyelam kedalam dunia web desain di pertemuan yang akan datang…
    So see ya…
    Have a nice day and GBU!
    website
    Agustus 28, 2015 •
    Disclaimer: gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami di halaman ini.
    T.I Sniper

    Your description here

    • Follow
    • Autosultan
    • Wa Admin Bisnis
    Copyright ©2010 - 2022 🔥 T.I Sniper.
    • Beranda
    • Cari
    • Posting
    • Trending
    • Tersimpan