Membuat halaman portfolio berdasarkan kategori

Template Landing Page untuk Blogspot

Beberapa hari yang lalu aku di tantang temanku membuat halaman portfolio yang unik. Lalu tanpa sengaja pun aku menemukan halaman portfolio yang unik, sayangnya aku lupa di mana link tersebut. Jadi akupun mencoba membuatnya sendiri dan berbagi di sini. 😉 *ting. Untuk membuat halaman portfolio ini aku mengunakan jquery jadi jangan lupa bahan-bahannya.

Bahan-Bahan

eggs copy

  1. 1 File Jquery yang nantinya di masukan di folder js, (link1, link2)
  2. 5 gambar portfolio anda, bisa di tambah sesuai selera. Untuk file img-ku bisa di ambil di sini
  3. 1 file reset CSS (link)
  4. Script Editor

Cara Membuatnya

  1. Buat code HTML seperti ini dan beri nama index.html
    <!DOCTYPE html>
    
    <html>
    <head>
        <link href="css/style.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <title>My Portfolio</title>
    </head>
    
    <body>
        <div id="wrapper">
            <h1>My Portfolio</h1>
    	<div id="navi">
    	    <ul>
    		<li class="allButton">All Design</li>
    		<li class="gdButton">Graphic Design</li>
    		<li class="wdButton">Web Design</li>
    		<li class="pdButton">Product Design</li>
    	    </ul>
    	</div>
    	<div id="portfolio">
    	    <div class="port graphic">
    		<img src="images/1.jpg"/>
    		<h3>Portfolio 1</h3>
    		in <span>Graphic Design</span>
    	    </div>
    	    <div class="port web">
    		<img src="images/2.jpg"/>
    		<h3>Portfolio 2</h3>
    		in <span>Web Design</span>
    	    </div>
    	    <div class="port graphic">
    		<img src="images/3.jpg"/>
    		<h3>Portfolio 3</h3>
    		in <span>Graphic Design</span>
    	    </div>
    	    <div class="port web">
    		<img src="images/4.jpg"/>
    		<h3>Portfolio 4</h3>
    		in <span>Web Design</span>
    	    </div>
    	    <div class="port product">
    		<img src="images/5.jpg"/>
    		<h3>Portfolio 5</h3>
    		in <span>Product Design</span>
    	    </div>
    	</div>
        </div>
    </body>
    </html>

    div dan class merupakan pembungkus pada HTML, bedanya kelas id lebih tinggi dari class. id hanya boleh 1 pada tiap halaman html

    goreng telur copy

  2. Setelah itu siapkan folder css sejajar dengan index.html lalu di isi dengan reset.css, dan style .css.
  3. style.css
    @import url('reset.css');
    
    /*attribute*/
    body {
        background: #f2f2f2;
        font-family: sans-serif;
        font-size: 12px;
        color: #181818;
        line-height: 18px;
    }
    
    /*--------------end of Position----------------*/
    /*---------------------Layout----------------*/
    #wrapper {
        width: 960px;
        margin: 20px auto;
    }
    
    /*Style buat portfolio*/
    #portfolio {
        margin: 20px 10px;
        width: 960px;
    }
    
    .port {
        width:200px;
        padding: 9px;
        margin: 10px;
        background: #fff;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        float: left;
    }
    
    .port:hover {
        -moz-box-shadow: 0 0 5px #000;
        -webkit-box-shadow: 0 0 5px #000;
        box-shadow: 0 0 5px #000;
    }
    
    .port img{
        border: 1px solid #131313;
        margin-bottom: 10px;
    }
    
    #navi ul li{
        display: inline-block;
        margin-left: 10px;
        background: #444;
        color: #f2f2f2;
        padding: 5px 10px;
        text-shadow: 1px 1px 0 #181818;
        cursor: pointer;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }
    
    /*------------------------Element-------------*/
    hr {
        border: solid #f6f6f6 1px;
        margin: 5px 0 20px;
        -moz-box-shadow: 0px 1px 0px #ababab;
        -webkit-box-shadow: 0px 1px 0px #ababab;
        box-shadow: 0px 1px 0px #ababab;
        clear: both;
    }
    
    /*--------Typo-----------*/
    h1 {
        text-align: center;
        font-family: serif;
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    h2 {
        font-size: 12px;
        margin-bottom: 5px;
    }
    
    span {
        color: #ff0000;
    }
    
    span:hover {
        color: #018181;
    }

    id=”#” , class = “.”, dan di akhir “;”.
    contoh penulisannya: #id {keterangan: nilai;}

  4. Tampilan maka kurang lebih akan seperti web demo tadi, tetapi masih kurang fungsi2nya. buat 1 lagi folder yang bernama “js”. Di dalam folder “js” di isi dengan jquery.js dan script js.
  5. script.js
    $(document).ready(function(){
     $(".allButton").click(function(){
     $(".web").show("slow");
     $(".graphic").show("slow");
     $(".product").show("slow");
     });
    });
    
    $(document).ready(function(){
     $(".gdButton").click(function(){
     $(".web").hide("slow");
     $(".graphic").show("slow");
     $(".product").hide("slow");
     });
    });
    
    $(document).ready(function(){
     $(".wdButton").click(function(){
     $(".web").show("slow");
     $(".graphic").hide("slow");
     $(".product").hide("slow");
     });
    });
    
    $(document).ready(function(){
     $(".pdButton").click(function(){
     $(".web").hide("slow");
     $(".graphic").hide("slow");
     $(".product").show("slow");
     });
    });

    jquery:
    $(document).ready(function(){
    $(“.kelas”).trigger(function(){
    $(“.kelas”).action();
    });
    });

Hasil

ceplok copy copy

Jika sudah melakukan langkah-langkah tersebut dengan benar, maka tampilannya akan sama seperti web portfolioku tadi. Untuk script pada jquery menurutku agak terlalu banyak maklum baru coba Jquery :]. Jika teman-teman punya sugesti script yang lebih hemat, jangan lupa beri tau.

baru-baru saja aku tau klo ada service google yang bisa menyimpang cahce jquery. caranya: ketik script ini di head

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Penampakan Demo

Baca Juga:  Tutorial Bootstrap untuk Pemula - Fixed & Fluid Layout (bagian 3)

DEMO

tulisan ini aq juga tulis di blogku. 🙂

Tags

membuat tampilan web dengan css,cara membuat portfolio design,langkah-langkah membuat portofolio,cara membuat web dengan html5,membuat tampilan web dengan php,css unik,membuat tampilan website dengan css,cara-cara membuat portfolio,contoh index html,tampilan css,tutorial membuat portofolio,kode html yang sudah jadi,contoh tampilan website dengan html,tampilan web dengan css,portfolio diri,tampilan web unik,contoh website yang unik,contoh web yang unik,contoh halaman index html,membuat layout dengan Jquery

Komentar

comments

finnfirrior

Web Designer and Graphic Designer Freelance. Interest in Web and Printable Design.

grain storage kocaeli escort