Tuesday, February 10, 2015

Membuat Layout Komik Di Blog

Membuat Layout Comic di blog by Muiz-Techno

membuat komik layout di blog By Muiz-Techno

Secara garis besar komik itu pasti biasanya ada cerita yang ada fotonya, biasanya kata kata komik itu bersifat pendek dan mempunyai bubble diatasnya seperti awan,bulat,dan lain lain. Nah lantas bagaimana kalau kita yang membuatnya sendiri alias foto kita yang ada dalam komik layout tersebut.
Untuk membuatnya kita hanya perlu mengikuti langkah langkahnya dibawah ini.
sebelumnya saya sudah pernah share artikel mengenai Softaware yang terbaik untuk mengedit lagu atau untuk mengedit Mp3 sekarang saya share tutorial ini.


Membuat Comic Layout Di Blog By Muiz-Techno

All images taken from flickr.com 

Ingin membuat layout comic hanya menggunakan CSS seperti contoh di atas? 

Ini kodenya. 

CSS 
/* CSS untuk lebar halaman comic */
    .laman-comic {
      max-width:826px;
      margin:60px auto 0;
    }
/* CSS untuk lebar elemen tempat meletakkan gambar */
    .kotak-scene {
      width: 250px;
      height:250px;
      border:3px solid black;
      background: #fff;
      margin:8px;
      display: inline-block;
      position: relative;
    }
/* CSS untuk gambar, lebar dan tinggi sepenuh elemen */
    .kotak-scene img {
      width:100%;
      height:100%;
      display: block;
    }
/* CSS untuk keterangan/penjelasan gambar, misalnya alur cerita. */
    .jelaskan {
      padding:10px;
      margin:0;
      position: absolute;
      left:0;
      right:0;
      background:#e2e971;
      text-align:left;
      top:0;
    }
/* CSS untuk posisi keterangan gambar, yaitu di atas dan di bawah gambar */
    .jelaskan.bottom {
      bottom:0;
      top:auto;
      border-top:2px solid black;
    }
    .jelaskan.top {
      top:0;
       border-bottom:2px solid black;
    }
/* CSS untuk speech bubbles, bulatan berisi dialog */
    .bicara {
      width:40%;
      border-radius:50%;
      border:2px solid black;
      margin:0;
      position: absolute;
      z-index:1;
      background: Snow ;
      padding:20px;
      top:-15px;
      text-align: center;
    }
    /* CSS untuk pointer speech bubbles */
    .bicara:after {
      border-color: snow transparent;
      border-style: solid;
      border-width: 13px 13px 0;
      bottom: -11px;
      content: "";
      display: block;
      left: 50%;
      margin-left:-14px;
      position: absolute;
      width: 0;
    }
    .bicara:before {
      border-color: black transparent;
      border-style: solid;
      border-width: 16px 16px 0;
      bottom: -15px;
      content: "";
      display: block;
      left: 50%;
      margin-left:-17px;
      position: absolute;
      width: 0;
    }
/* CSS untuk letak speech bubbles, kiri dan kanan */
    .bicara.left {
      left:-15px;
    }
    .bicara.right {
      right:-15px;
    }


HTML 
  
  <div class="laman-comic">

      
      <div class="kotak-scene">
        <p class="jelaskan bottom">Set the scene for the comic...</p>
        <p class="bicara left">Look at the view!</p>
        <img src="http://farm1.staticflickr.com/13/17778109_cc9d631ba7.jpg" alt="" />
      </div>

      
      <div class="kotak-scene">
        <p class="jelaskan top">...write anything in a caption.</p>
        <img src="http://farm7.staticflickr.com/6022/5918997962_f472e3ab8f.jpg" alt="" />
      </div>

     
      <div class="kotak-scene">
        <p class="bicara left">Speech bubbles OMG!</p>
        <img src="http://farm1.staticflickr.com/184/423566194_4513adf82d.jpg" alt="j" />
      </div>

      <div class="kotak-scene">
        <p class="bicara right">What is this?</p>
        <img src="http://farm9.staticflickr.com/8290/7762873604_216c58c99e.jpg" alt="" />
      </div>
      
      <div class="kotak-scene">
        <img src="http://farm8.staticflickr.com/7289/8735312953_992e5a8b8f.jpg" alt="" />
      </div>

      <div class="kotak-scene">
        <p class="jelaskan bottom">The End!</p>
        <img src="http://farm7.staticflickr.com/6231/6315319040_ece0b381a2.jpg" alt="" />
      </div>

       
  </div>




jadi sebenarnya intinya adalah membuat speech bubbles menggunakan CSS kemudian menggabungkannya dengan gambar sehingga menjadi layout sebuah halaman comic.


Selamat mencoba.




Script By Webmaker
Incoming Search trik membuat layout komik di blog,cara membuat comic layout di blog dengan CSS,cara membuat foto kita tampil di comic,trik membuat foto seperti komik,cara membuat speech bubbles di blog dengan CSS,cara membuat speech bubbles keren di blog seperti komik

Anda Sedang Membaca Artikel Tentang Membuat Layout Komik Di Blog Dan Artikel Ini URL Permalinknya Adalah https://muiztech.blogspot.com/2015/02/membuat-layout-komik-di-blog.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner