kopi-paste

Wednesday, 28 September 2016

jQuery Plugin : Membuat galeri dengan YoxView

 

YokView adalah plugin jquery untuk menampilkan galeri gambar. YokView dapat menampilkan galeri gambar secara dua tipe plugin jquery yakni image view dan lightbox, sangat mudah digunakan dengan fitur yang cukup banyak. Anda dapat mendownload plugin jQuery YoxView secara gratis di http://www.yoxigen.com/yoxview/ . Ada banyak macam model dari tampilan plugin YoxView , selain menampilkan galeri gambar YoxView juga dapat menampilkan galeri berupa kontetn video. Berikut ini adalah cara paling sederhana menmapilkan galeri gambar dengan plugin jQuery YoxView

Pertama adalah menyiapkan halaman HTML kemudian memanggil file jQuery library, javascript serta CSS dari YoxView  dan menginisialkan fungsi javascript seperti berikut
<link rel="Stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="../yoxview/yoxview-init.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
$(".yoxview").yoxview();
});
</script>

Letakan script di atas dalam tag <Head> kemudian script untuk menampilkan gambarnya ke halaman HTML adalah seperti berikut

<div class="thumbnails yoxview">
<a href="gambar01.jpg"><img src="gambarthumbnail01.jpg" alt="First" title="gambar 1" /></a>
<a href="gambar02.jpg"><img src="gambarthumbnail02.jpg" alt="First" title="gambar 2" /></a>
<a href="gambar03.jpg"><img src="gambarthumbnail03.jpg" alt="First" title="gambar 3" /></a>
</div>

Ubahlah gambar serta gambar thumbnail pada script di atas dengan gambar yang Anda inginkan , letakan script-script tersebut dalam div container dalam tag <Body>. Anda tinggal menambah berapa banyak gambar yang Anda inginkan .
Untuk melihat demonya langsung aja menuju TKP di sini  
Sumber : Klik disini
Posted by Defi at 02:35 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Yang harus kamu tahu membuat tampilan website responsive dengan media query


linkdesain.com, Saat ini hampir semua website sudah menerapkan layout yang mobile friendly dalam artian layaot web akan otomatis menyesuaian lebar atau resolusi layar device atau perangkat yang kita gunakan, jika jaman dulu sebelum maraknya perangkat ponsel pintar kebanyakan website menggunakan layout atau halaman web terpisah dimana saat website mendeteksi bahwa web tsb dibuka melalui layar dengan resolusi terntentu misal resolusi dibawah 760px atau tampilan mobile maka website tersebut akan menggunakan halaman dalam mobile version yang biasanya berbeda halamannya dengan desktop version, sekarang menampilkan web dengan cara tersebut sudah jarang kita temui walaupun masih ada juga sih sebenarnya seperti  situs-situs berita atau forum yang banyak menggunakan kolom dan layout yang ribet , tapi saat ini kebanyakan website sudah menggunakan 1 halaman web saja untuk menampilkan layout web versi mobile, tablet dan desktop yang biasanya kita sebut dengan responsif. 

Ada banyak cara yang dapat kita gunakan untuk membuat tampilan website responsive yang pertama kita bisa menggunakan CSS Framework seperti Bootstrap dari twitter, foundation, materialize dari google,  purecss dari yahoo dan framework css lainnya. Dengan menggunakan framework css memang cukup mudah karena kita tinggal memanggil class untuk besar gridnya tapi terkadang kalau mengandalkan framework saja layout website kita juga belum belum tentu rapi sesuai dengan yang kita harapkan di tampilan mobile, tablet, dan desktop dan untuk merapikannya tersebut kita perlu styling css secara manual dengan media query.







Yang harus kamu tahu tentang Media Query 
Untuk membuat tampilan website yang responsive atau layout website yang menyesuaikan otomatis di tampilan mobile, tablet, desktop secara manual tanpa menggunakan CSS Framework kita harus menggunakan media query.
media query memiliki format atau baris kode yang standar seperti berikut 

@media only screen and ( batas resolusi layar bisa max, min ) { kondisi style }
contoh : @media only screen and (min-width: 768px)  { width:200px; height:100px } 

 atau kita bisa menggunakan batasan antara resolusi sekian sampai sekian seperti berikut

@media screen and (min-width: 1200px) and (max-width: 1365px)  { kondisi style }

dan harus kita masukan dalam file css, perlu diperhatikan kamu harus membuat penulisan media query harus sesuai standar untuk menghindari crossbrowser issue dan bekerja disemua browser seperti safari, chrome, mozilla , iphone, macbook, android dll

karena saat ini ada sangat banyak device dengan standar resolusi berbeda misal saja pada iphone memilike standar resolusi seperti berikut 



/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}



belum lagi standar resolusi smartphone-smarphone lainya yang saat sangat banyak model nya maka kita dapat mengkondisikan batasan resolusi setiap device seperti pada bootsrap saja seperti berikut



 /*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}



misal kita memiki halaman web dimana heading dengan tag html seperti berikut <h1> loerm ipsum </h1> di tampilan desktop ukuran fontnya adalah 18px dan saat dibuka pada tablet ukuran font menjadi 16px dan di buka menggunakan smartphone / mobile menjadi 12px, maka kondisi style css dengan media query akan seperti ini



   h1 { font-size: 18px; }

   /* Medium Devices, Desktops */
   @media only screen and (max-width : 992px) {
   h1 { font-size: 18px; }
   }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    h1 { font-size: 16px; }
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
    h1 { font-size: 12px; }
     }




         Sumber : Klik disini
Posted by Defi at 02:33 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Cara sederhana membuat kustom preloading screen website dengan JavaScript

Linkdesain.com . Apa itu preloading screen pada website? preloading screen yang dimaksud disini adalah suatu area yang akan menutupi halaman web sebelum website tsb benar-benar keload / terbuka seluruhnya, jadi selama website dalam keadaan loading area preloading ini akan menutup halaman web dan pengunjung situs tidak dapat mengakses konten apapun sampai halaman benar-benar selesai loading. Membuat preloading ini sangatlah mudah kita dapat membuat dengan animasi css atau gambar animasi yang kita taruh di preloading screen dan dengan bantuan javascript tentunya.

tambahkan js ini dihalaman webmu
<script >
jQuery(document).ready(function($) {
    $(window).load(function() { $(".preloading").fadeOut("slow"); })
});
</script>
maksud js tersebut adalah ketika halaman masih loading maka area dengan class .preloading akan dimunculkan dan setelah loading halaman benar-benar selesai, area preloading tsb akan hilang secara fadeout dan pengunjung web dapat mengakses halaman web.


tambahkan tag html berikut setelah tag <body>
<div class="preloading">
<div class="textpreload">LOADING</div>
</div>
maksud tag html tsb adalah preloading berserta konten dalam class .preloading dalam hal ini adala text loading dengan nama class .textpreload yang akan dimunculkan saat halaman web masih loading. kita dapat mengganti text loading ini dengan gambar animasi (Gif) ataupun animasi css.


Kemudian tambahkan css
.preloading {width: 100%; 
text-align: center;
height: 100%;
position: fixed;
background: #000000;
z-index: 999999;
top: 0px; 
display: table; 
left:0}
.preloading .textpreload {
display: table-cell; 
text-align: center; 
vertical-align: middle;}
 banyak sekali situs yang menyediakan gambar preloading ini, contohnya kamu dapat mengambilnya dari sini
http://preloaders.net/en/free
Sumber : Klik disini
Posted by Defi at 02:32 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Jquery Gallery & Slide : TinySlideshow

TinySlideshow Adalah plugin jQuery dengan model slideshow atau image slider yang terdiri dari gambar utama dan gambar thumbnail. Dimana Anda dapat menggeser-geser gambar thumbnail tersebut dan memilihnya untuk ditampilkan sebagai gambar utama. Berada dibawah creative commons license plugin ini dapat Anda gunakan secara gratis dan bisa Anda dapatkan di (http://www.scriptiny.com/2008/12/javascript-slideshow/) .
Ketika sudah mendapatkan Plugin jQuery TinySlideshow Anda akan mendapatkan dua buah file javascript dan satu file CSS serta gambar-gambar ikon pendukung dan contoh gambar yang akan dibuat slideshow.
Cara menggunakannya sama halnya menggunakan plugin-plugin jQuery lainnya, kita perlu memanggil terlebih dahulu file javascript dan CSS yang dibutuhkan.
Pertama Anda memanggil file javasript (js) dan CSS dengan sintak seperti berikut.
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="compressed.js"></script> 
Letakan script tersebut dalam tag <Head>
<ul id="slideshow">
<li>
<h3>judul1</h3>
<span>1.jpg</span>
<p>deskripsi1</p>
<a href="#"><img src="thumbnails/1.jpg" alt="Yellow Fish" /></a>
</li>
<li>
<h3>judul2</h3>
<span>2.jpg</span>
<p>deskripsi2</p>
<a href="#"><img src="thumbnails/2.jpg" alt="Squid" /></a>
</li>
<li>
<h3>judul3</h3>
<span>3.jpg</span>
<p>deskripsi3</p>
<a href="#"><img src="thumbnails/3.jpg" alt="Small Fish" /></a>
</li>
</ul>
Pada script sederhana di atas anda cukup mengganti judul, gambar, deskripsi, dan gambar thumbnail dengan yang Anda inginkan. Setelah script di atas tambahkan juga script untuk menampilkan tombol navigasi dan atributnya seperti berikut
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
Dan juga script untuk parameternya
<script type="text/javascript">
    $('slideshow').style.display='none';
    $('wrapper').style.display='block';
    var slideshow=new TINY.slideshow("slideshow");
    window.onload=function(){
        slideshow.auto=true;
        slideshow.speed=5;
        slideshow.link="linkhover";
        slideshow.info="information";
        slideshow.thumbs="slider";
        slideshow.left="slideleft";
        slideshow.right="slideright";
        slideshow.scrollSpeed=4;
        slideshow.spacing=5;
        slideshow.active="#fff";
        slideshow.init("slideshow","image","imgprev","imgnext","imglink");
    }
</script>
Parameter di atas dapat Anda atur nilainya seperti yang Anda inginkan.
Sumber : Klik disini
Posted by Defi at 02:31 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Cara ikut kontes 99design dan cara menang kontes 99design





linkdesain.com , 99desain adalah marketplace untuk pekerjaan desain terbesar didunia, ada ribuan kontes berlangsung tiap harinya di 99d yang di selenggaraan oleh Contest Holder alias pembuat kontes / pemegang kontes dari berbagai belahan dunia yang mempercayakan proyek mereka ke designer-designer di 99d. Dan ada jutaan designer yang bergabung di 99d dan sejauh pengamatan saya mungkin sekitar 50% designer yang ada di 99d adalah orang Indonesia, yup jangan heran jika kita ikut kontes di 99d dan nama-nama dengan bahasa indonesia mendominasi di kontes tersebut karena emang sebagian besar designer disini berasal dari indonesia, bahkan logo 99d saat ini juga di buat oleh orang indonesia juga, belum lama ini (ketika artikel ini ditulis) 99d mengadakan mega kontes untuk logo baru mereka yang berhadiah $3000 atau lebih dari 30jt dan kontes tersebut dimenangkan oleh designer dari magelang.

Bagaimana ikut kontes di 99design atau yang sering kita sebut dengan 99d ?
Caranya tentu saja kamu harus mendaftar di 99designs.com kemudian pilih sign up dan isi semua fieldnya, sama seperti membuat email bahkan lebih mudah.

Bagaimana cara kerja di 99d?
Cara kerja di 99d cukup sederhana, pertama CH membuat kontes misal logo untuk perusahaanya, designer yang tertarik bisa mengikuti kontes tsb dengan mengirim desainnya dalam bentuk JPG atau PNG, kontes berlangsung selama 6hari , dimana 3 hari untuk babak qualifikasi dan 3hari untuk babak final, dan setelah pemenang dipilih tahap berikutnya adalah Handover atau pemenang kontes menyerahkan hasil akhir desain berupa file EPS (CMYK & RGB) dan jpg. Dalam babak kualifikasi designer harus berlomba-lomba menunjukan desain terbaik mereka , walaupun bnyak juga yang curang seperti copy paste atau ngetrace dari logo yang sudah ada, multi akun, ngeklaim konsep designer lain , bajak-mebajak desain dll,  yang penting pinter-pinter atur strategi dan kalau ada yang curang report saja ke tim 99desain. Sedangkan tahap finalist adalah dimana CH akan memilih maksimal 6 designer terpilih untuk melanjutkan persaingan mereka di kontes.




Berapa prize yang bakal kamu dapatkan jika menang ngontes di 99d?
Untuk kontes yang paling populer sendiri di 99d adalah kategori logo design dengan minimal prize yang bakal kamu dapat adalah $190 atau sekitar 2,5 jt , jadi sekurang-kurangnya kamu udah dapat 2,5 jt jika memenangkan 1 kontes dalam 1 bulan , 1bulan cukup menang 1 kontes aja kamu sudah mendapatkan penghasilan yang hampir sama atau mungkin lebih dari umr di kotamu  :D dan untuk membuat 1 desen logo biasanya kita bisa menyelesaikannya dalam waktu hitungan menit, perlu diingat ini sifatnya spekulasi dalam artian dalam 1 bulan kamu belum tentu juga bisa memenangkan 1 kontespun, tapi asalkan fokus dan rutin peluang kita sangat besar untuk memenangkan 1 kontes saja. Kategori lainnya yang lebih bergengsi adalah kontes web desain, karena pengerjaan cukup rumit dan memakan waktu berjam-jam prize untuk 1 kontes desain web (tanpa koding) rata-rata prizenya  $1000 atau diatas 10juta .

Bagaimana caranya memenangkan kontes?
Memang untuk memenangkan kontes di 99d bukan hal yang mudah, selain kita harus tau keinginan CH kita juga harus membuat desain yang berkualitas dan memahami brief yang diberikan. Dan apabila desain kita mendapatkan respon yang baik segeralah membuat desain alternatif lainny yang mendekati dengan desain kita yang telah mendapatkan rating sampai mendapatkan rating sempurna.

Apa yang harus kita lakukan setelah memenangkan kontes?
Setelah memenangkan kontes berkutnya adalah proses handover dimana si pemenang menyerahkan semua file final berupa file vector EPS dan JPG atau PNG, dan merevisi sesuai permintaan CH (Jika ada revisi) dan file-file yang dibutuhkan CH (jika ada). Sebelum menerima  pembayaran/hadiah dari 99d jangan lupa untuk verifikasi ID (kartu identitas) verifikasi ID cuma sekali saja setelah kita mendaftar di 99d bisa sim atau ktp yang di scan. setelah kamu menyerahkan semua file akhir kamu tinggal menunggu respon dari CH untuk menga approve file akhir kamu, dan pembayaran akan masuk ke saldo 99d kamu.

Bagaimana kita mengambil uang hasil memenangkan kontes? 
Saldo yang telah terkumpul di akun kita bisa kita tarik ke rekening bank lokal atau istilahnya withdraw, karena ini sifatnya internasional tentu saja penghasilan yang kita dapat tidak dapat langsung ditransfer ke bank indonesia dan harus melalui perantara bank online seperti Paypal, Payoneer, atau Skrill. jadi kamu harus punya salah satu rekening/akun di bank online tsb, kalau saya sendiri menggunakan payoneer karena mudah dan cepat, untuk membuat rekening payoneer juga cukup mudah kamu bisa langsung signup ke sini . Dan untuk withdraw saldo di 99d sendiri bisa kamu lakukan kapanpun dan berapapun kamu mau withdraw, misal kita memenangkan kontes web desain $1500 jika kamu mau kamu bisa withdraw bertahap $300 tiap bulan selama 5bulan. ~hdr



Sumber : Klik disini
Posted by Defi at 02:28 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Contoh desain login form menarik

Login form adalah area/halaman awal dimana pada halaman login form ini biasanya user ataupun admin akan mengisikan username dan password. Cara kerja Login form biasanya adalah menggunakan session. ketika user tersebut memasukan data username dan password maka session data tersebut akan dikirim ke database saat Anda menekan tombol login. Data username tersebut akan dicocokan dengan data yang ada dalam database . Jika data tersebut ada yang cocok dengan yang ada dalam database maka akan ada suatu kondisi tertentu yang dijalankan sesuai dengan yang telah diprogram yakni masuk ke member area dengan data user tersebut. Jika tidak ada data dari session username atau password tersebut  tidak ada yang cocok dengan data-data yang ada dalam database maka juga ada suatu kondisi tertentu yang dijalankan sesuai dengan yang telah diprogram biasanya munculnya tulisan atau halaman lain yang menandakan bahwa Anda gagal login.
Mungkin bagi si pengembang web desain login form tidaklah penting terlebih lagi jika web tersebut bukan web komunitas yang siapapun dapat register dan login melainkan hanya admin saja yang dapat melihat login page ini.
Contoh desain login form menarik
MIG33
AudioLogic
VIMEO
World of Warcraft login form
Tiny Bass login form
 iCloud login form
 loginID


Kalau ada yang mau menambahkan silahkan diShare .. :)
Sumber : Klik disini
Posted by Defi at 02:26 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

6 plugin jQuery terkeren versi LinkDesain untuk membuat layout web seperti Pinterest


Anda pasti tau situs Pinterest (www.pinterest.com) situs sosial media yang memungkinkan kita untuk berbagi konten berupa video, teks, maupun gambar. Salah satu yang menarik dari situs tersebut adalah desain layoutnya yang menggunakan dynamic column grid. dimana konten dari situs tersbut akan ditampilkan seperti layaknya kolom koran dan tersusun dengan rapi tanpa adanya celah kosong. Cukup unik memang dan tidak banyak situs yang menerapakan konsep desan web seperti dynamic column grid pada pinterest tersebut. Layout dengan dynamic column grid tersebut memang sangat cocok untuk menampilkan konten yang banyak berisi gambar, Seperti situs portofolio, atau untuk fotografi. Lalu bagaimana cara membuat agar web kita bisa menjadi dynamic column grid seperti pada Pinterest. Ada banyak cara, tapi Anda juga dapat membuatnya dengan plugin jQuery. Berikut ini adalah  6 plugin jQuery terkeren versi LinkDesain untuk membuat Pinterest Web Layout.
6. Flex



5. Pinterest Clone Layout







4. BlocksIt






3. Isotope






2. Wookmark



1. Masonry    ||  Contoh web dengan Masonry





























Sumber : Klik disini
Posted by Defi at 02:25 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Membedakan Copycat dan Plagiat



Pernahkah kamu mendengar istilah copycat? Tahu apa bedanya copycat dengan plagiat? Copycat adalah menyalin kucing??? Tentu saja bukan, Copycat (menurut saya) adalah dimana bila seseorang menyalin ide dari hasil karya orang lain berbeda dengan plagiat, plagiat sendiri memiliki makna menyalin hasil karya orang lain, atau menyalin sebagian hasil karya orang lain dan menambah sedikit karya kita di karya orang tersebut... 

Bila dibandingkan dengan copycat, plagiat bisa dibilang lebih parah karena mengambil hasil karya orang lain secara terang-terangan sedangkan copycat adalah mengambil ide orang lain yang kemudian dibedakan sedikit walaupun konsepnya hampir-hampir mirip sehingga si copycater ini tidak menjiplak secara terang-terangan. Tetapi walaupun begitu tetap saja copycat adalah hal yang tidak dibenarkan karena mencuri ide dan mencuri hasil karya orang lain adalah sama buruknya.
Sumber : Klik disini
Posted by Defi at 02:23 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Situs-situs ini bisa merapikan baris-baris kode CSS, PHP, HTML yang berantakan dengan cepat dan rapi


Linkdesain.com , Sering kita mebuat seribu atau bahkan 1 juta baris kode yang kita ketik dengan mengabaikan struktur dan kerapian kode, hal ini akan cukup membingungkan ketika kita bekerja dalam tim dan programer lain membaca kode-kode yang telah kita ketik secara acak-acakan, cara seperti ini sering mengakibatkan kesalahan pengetikan tag-tag html dll. Untuk mengatasi masalah tsb kali ini saya akan share beberapa situs yang sering saya gunakan untuk merapikan kode-kode CSS, HTML, dan PHP dengan cepat tanpa register terlebih dahulu ke situs tsb.

Merapikan CSS  ~ www.cssportal.com 
cssportal adalah situs apapun tentang css, salah satu fitur yang menarik dari situs ini adalah format css, yakni merapikan css dengan cepat cukup paste kode css kita dan generate, dan ribuan baris kode css anda yang semula berantakan dan tak jelas sekarang menjadi rapi dan bersih.
Kelebihan memformat css dengan cssportal
-easy to read > format css dengan jarak anatar style yang mudah dibaca
-one line per style > 1 class akan dibuat 1 baris
-Super Compressed > yang ini adalah super compress, semua baris kode anda akan dibikin dalam 1 line saja, jadi yang semula anda punya 1000baris kode css, dengan super compressed 1000baris tadi akan menjadi 1 baris line saja.

Merapikan HTML ~ www.fisip.net
untuk merapikan baris-baris kode yang berantakan saya menggunakan tool dari fisip.net , pada menu pilih pengrapian html kemudian pasteka isi kode html anda ke field yang disediakan kemudian klik "rapikan" , dan semua baris kode html anda sekarang akan sangat rapi.

Merapikan PHP ~ phpcodecleaner.com
untuk merapikan isi file php yang berantakan kita bisa mengunakan tool dari phpcodecleaner, cukup pastekan kode php anda dan klik format mycode.
Sumber : Klik disini
Posted by Defi at 02:22 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

jQuery Plugin : Nivo Slider 3.1

Nivo Slider adalah salah satu Plugin jQuery  yang bersifat open source untuk image slider yang cukup popular dan gratis digunakan,  Anda dapat mendownload plugin jQuery image slider ini di (http://nivo.dev7studios.com/) . Saat postingan ini ditulis Versi terbaru dari Nivo Slider adalah Nivo Slider 3.1  Kelebihan Nivo Slider ini selain mudah diimplementasikan juga menggunakan 16 macam transition effects yang terus berganti-ganti seacara random  saat gambar berpindah-pindah dari gambar yang satu ke gambar yang lain. Fitur yang terdapat dari Nivo Slider juga cukup lengkap seperti  direction navigasi, Kontrol navigasi dengan gambar thumbnail atau hanya tanda point saja, dan menampilkan teks untuk keterangan pada gambarnya. 


 Lihat Demo

Untuk menggunakan Plugin Jquery Nivo Slider 3.1 , Anda harus menggunakan minimum jQuery v1.4+ dan web browser yang mendukung seperti Internet Explorer v7+, Firefox v3+, Google Chrome v4+, Safari v4+, Opera v10+. Untuk mencobanya anda membutuhkan file Jquery, Nivo Slider script, dan Nivo Slider CSS, Semua sudah anda dapatkan dalam satu paket ketika anda mendownloadnya secara gratis di situs resminya.

Cara menggunakan plugin ini juga tidak terlalu sulit, pertama adalah memanggil 3 file CSS dari Nivo Slider dan masukan di dalam tag <Head>

<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Untuk mengatur ukuran bagian slider gambar anda dapat membuka file nivo-slider.css kemudian pada bagian class nivoSlider ubahlah ukuran width-nya. Anda juga dapat mengatur sendiri tampilan image slider dengan memodifikasi file-file CSS tersebut.

Selanjutnya adalah  memanggil jQuery 1.7.1 dan plugin jQuery Nivo Slider 3.1 , Scriptnya adalah seperti berikut :

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>

Anda juga perlu memanggil scriptnya menggunakan fungsi $(window).load()

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</script>

Jangan sampai salah menulis lokasi letak file-file jquery tersebut karena jika salah Image slider tidak akan berjalan sebagaimana mestinya. Script-script diatas dapat Anda letakan di dalam tag <Head><.Head>  atau di dalam Tag <Body></Body>  ,

Setelah memanggil file CSS dan jQuery 1.7.1 serta plugin jQuery Nivo Slider 3.1 , Kita tinggal membuat untuk bagian Body halaman HTML nya. 

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">

<img src="images/spiderman.jpg" data-thumb="images/spiderman.jpg" alt="" />


<a href="#"><img src="images/alice.jpg" data-thumb="images/alice.jpg"  alt="" title=  "deskripsi gambar" /></a>

<img src="images/im.jpg" data-thumb="images/im.jpg" alt="" data-
transition="slideInLeft" />


<img src="images/kungfupanda.jpg" data-thumb="images/kungfupanda.jpg" 
alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
Contoh jika menggunakan teks atau caption<em>HTML</em>  berupa<a
href="#">link</a>.
</div>
</div>

Dapat dijelaskan pada script diatas terdapat 4 macam gambar yang akan muncul secara bergantian dengan effect transition random.  Gambar pertama adalah gambar spiderman.jpg kemudian alice.jpg yang akan muncul dengan title "deskripsi gambar", gambar ketiga adalah im.jpg khusus gambar ini akan muncul dengan effect transition slide dari kanan ke kiri karena data-transition menggunakan setingan slideInLeft . Dan gambar keempat adalah  kungfupanda.jpg , gambar ini menggunakan caption html sebagai deskripsinya yang berupa script-script html seperti link dan script html lainnya. Anda dapat mengatur gambar-gambar slider tersebut dengan gambar yang anda inginkan tentunya dengan ukuran yang telah di sesuaikan dengan ukuran wrap slider tersebut. Untuk lebih jelas dan melihat hasilnya Anda dapat membuka file demo.html dari Plugin Jquery Nivo Slider 3.1 di Web Browser.

Untuk setingan Image slider dari Plugin Jquery Nivo Slider 3.1  dapat anda atur di file jquery.nivo.slider.js dibaris paling bawah di bagian Default settings-nya, kemudian mengatur seperti effect transition-nya, kecepatan animasi, menampilkan dan menghilangkan direction Navigasi, kontrol navigasi , kontrol thumb navigasi, dll.

Berikut ini adalah effect-effect transition yang mampu di tampilkan Nivo Slider 3.1  

·      sliceDown
·      sliceDownLeft
·      sliceUp
·      sliceUpLeft
·      sliceUpDown
·      sliceUpDownLeft
·      fold
·      fade
·      random
·      slideInRight
·      slideInLeft
·      boxRandom
·      boxRain
·      boxRainReverse
·      boxRainGrow
·      boxRainGrowReverse

Sumber : Klik disini
Posted by Defi at 02:21 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Cara menggunakan mockup PSD - bikin desain kamu makin realistis!


Suatu ketika kita membuat sebuah desain tshirt, baru desain vectornya aja dan kita ingin melihat hasilnya ketika desain tersebut sudah jadi dalam bentuk tshirt, nah dengan bantuan mockup ini kita bisa langsung melihat hasil desain tersebut di tshirt tanpa harus mencetaknya, dan hasilnya sangat realistis, kamu cukup mendownload mockup psd tersebut dengan googling di internet, kalo kamu ga mau bayar y cari aja yang gratisan, mockup-mockup psd ini bnyak juga yang gratisan, ketik aja di google free psd mockup tshirt jika kamu ingin mencari mockup untuk deseain tshirt. Ada banyak macam-macam mockup psd yang dapat kita gunakan dan bisa kamu cari di internet seperti mockup stationery, mockup mug, mockup logo bisa logo yang di aplikasikan di kertas, logo yang biasa di pasang di dinding ( wall signed) , logo di kaca, mockup stempel , mockup untuk desain botol minuman, mockup untuk desain mobil, mockup ui di smartphone, mockup untuk desain web di macbook dan masih banyak lagi aneka mockup desain lainnya.

untuk mendapatkan mockup-mockup psd secara gratis kamu bisa mencarinya di google atau situs-situs design resources seperti www.graphicburger.com  , www.mockupworld.co , dll

Lalu agaimana cara menggunakan mockup ini?
Caranya sangat mudah sekali , pertama y searching dan download terlebih dahulu mockup yang kamu cari kemudian buka dengan photoshop.. tidak perlu menggunakan photoshop versi paling baru, karena biasanya menggunakan photoshop versi lama seperti cs4 atau cs5 pun sudah bisa. Setelah dibuka biasany di mockup tersebut ada layer dengan judul "logo here" atau "design here" atau "your design here" dll pokokny layer yang judulnya meminta kamu untuk meletakan desainny di layer tsb.. klik layer tsb maka akan terbuka lembar kerja photoshop baru, kemudian taruh desain kamu disitu , jika desein kamu ada background putih hilangkan dahulu background tersebut dan ganti dengan transparan agar hasilnya maksimal, kemudian save, dan buka kembali lembar kerja mockup yang kamu download tadi dan lihat hasilnya.. sekarang desain yang kamu buat nampak realistis..

Sebagai contoh disini saya mempunyai desain tshirt yang saya bikin dengan corel draw yang kemudian saya eksport ke gambar png transparan, desainnya seperti ini...



 


Kemudia gunakan mockup tshirt di photoshop , klik pada layer color shirt dan pilih warnanya , pad mockup psd dibawah saya menggunakan warna merah maron, lihat gambar berikut.




kemudia pada daftar layer cari layer dengan nama "put your design here" berarti kamu harus menempatkan desain kamu disitu.




setelah memilih layer tsb, maka lembar kerja baru akan muncul dan letakan desain kamu di lembar kerja tsb, di page baru tadi kamu akan menemui layer dengan gambar tshirt lagi , tapi thisrt disini menggunakan warna flat atau solid, ubah lagi warna solid tsb ke merah agar kontras dengan gambar tshirt yang sebelumnya, dan buat layer baru dengan nama misal "layer 1" kemudia letakan desainmu di layer 1 tsb ( layer tshirt dibawah layer 1 ) . Desen we are drowning bla bla bla juga bisa kita ubah-ubah warnanya dengan  blending option dan pilih "color overlay" disini saya menggunakan warna kuning.



kemudian klik save.. dan buka page/halaman mockup yang tadi dan liat hasil..




Sumber : Klik disini
Posted by Defi at 02:19 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Frontend Web : kode-kode css ini bisa mengatasi masalah crossbrowsermu tanpa bantuan javascript.


Crossbrowser issue adalah masalah yang timbul ketika tampilan website berubah atau tidak seperti yang kita lihat di browser lain. misal template web yang kita buat sudah sangat bagus di browser mozila dan crome tapi muncul masalah di browser safari atau muncul masalah pada safari di leptop macbook dmana ada bagian-bagian template tsb menjadi rusak, hilang, tidak bekerja semesti, dan issue lainnya. Rusaknya template website pada browser-browser tertentu ini biasanya karena css di browser tersebut tidak bekerja semestinya, sedangkan hal yang membuat css tsb tidak bekerja dengan baik biasanya karena struktur html dan css yang kita buat tidak semantic atau tidak sesuai standar , tidak teratur, asal asalan, sangat dipaksakan dan tidak rapi .

Ada bnyak cara untuk mengatasinya, biasanya untuk mengatasi masalah ini kita bisa menggunakan javascript , cara kerja javascript tsb adalah dengan mendeteksi browser yang digunakan oleh user. Setelah js tsb mendeteksi browser si user script tsb akan menambah class tertentu di tag <body> dan kita membuat class-class khusus untuk setiap browser , misal si user menggunakan browser safari untuk mengakses webnya maka kita harus membuat class yang akan dibuat oleh js disafari contohnya dengan nama class "safari" setelah script tersbut mendetksi bahwa situs tsb diakses dengan safari maka otomatis di tag body akan muncul class safari seperti berikut <body class="safari">

Langkah selanjutnya adalah membuat style css khusus untuk safari. misal bagian yang rusak di safari ada dibagian tag header maka kita harus membuat style khusus untuk header dengan menambahkan class induknya tadi yang ada di tag body yaitu class "safari" jadi code yang harus kita tulis di css haruslah diawali dengan klas safari seperti berikut

.safari header { isi style cssnya }

style tsb hanya akan bekerja di browser safari saja karena dibrowser lain style dengan class safari tidak akan terdeteksi.

Kekurangan mengunakan cara javascript seperti ini biasa adalah dari tampilan header yang rusak tadi menjadi bagus akan ada delay sekian detik atau sekian milidetik karena style css safari tadi harus menunggu script js pendeteksi browser tadi ke load oleh browser terlebih dahulu, jika koneksi internet kita sangat cepat delay ini tidak akan terlihat.

Cara paling mudah dan cepat kita cukup menggunaka css yang lain darpada biasany.. yakni code css yang memang di khususkan untuk browser broser terntentu jadi kita tidak perlu menggunakan javascript apapun karena css ini sudah dapat mendeteksi browser yang digunakan tanpa bantuan js dan tanpa delay untul meload js karena memang tidak menggunakan js (javascript)

Dan seperti inilah css khusus browser browser terntentu tsb, dengan properti class misal width 100px dan height 80px..

/*mozilla*/
@-moz-document url-prefix() {
    .classnya {width: 100px; height: 80px }
}

/* chrome*/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .classnya {width: 100px; height: 80px}
}

/* ie>9 */
@media screen and (min-width:0\0) {
    .classnya {width: 100px; height: 80px}
}


/* ie8 */
@media \0screen {
    .classnya {width: 100px; height: 80px}
}

/**safari**/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari 5+ ONLY */
    ::i-block-chrome, .classnya {
     width: 100px; height: 80px
    }
}






Sumber Klik disini
Posted by Defi at 02:16 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Tutorial Photoshop : Desain mobil Need For Speed (cara memanipulasi gambar)


Kembali saya akan bagi2 ilmu tentang photoshop. Tutorial Photoshop : Desain mobil ala NeedForSpeed (cara memanipulasi gambar). udah tepat belum y saya membuat judul tersebut :D ? asalnya aja judulnya daripada belum ada judul.. hhe :p . intinya disini akan saya gambarkan/jelaskan bagaimana cara memanipulasi gambar dan dalam contoh ini saya akan merubah gambar mobil yang saya ambil dari wallpaper need for speed carbon dan akan kita ubah model mobilnya menjadi lebih keren tentunya dan ini semua Cuma ada di codingdesain :D.. ok langsung aja...





Inilah gambar yang akan saya edit..



Pertama kita akan mencat hitam body mobil
Yang akan kita gunakan adalah polygonal lasso tool. Ambil area body mobil saja (karena yang akan kita cat body mobil saja jadi lampu dan kaca mobil tidak kita seleksi)



Body sudah dicat hitam.. skarang ambil bagian dari bawah body mobil kemudian tarik sedikit kebawah.




Sekarang yang akan kita lakukan adalah memperbesar diameter velgnya biar kelihatan lebih sangar.. ^^


Memperbesar velg mobil ...





Kalau hanya hitam polosan saja gak begitu keren… sekarang kita tambahkan gambar pada bodynya…




Dicat sudah gambar pada body mobil juga sudah ? yang terakhir kita tambahkan neon pada bawah mobil :D biar makin keliatan keren..



Sperti sudah cukup karna saya sendiri sudah bosan bermain photoshop.. hhe.. selanjutnya bisa kalian kembangkan sendiri,,,


gambar asli


Hasil editan
Sumber : Klik disini 
Posted by Defi at 02:12 No comments:
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Newer Posts Older Posts Home
Subscribe to: Posts (Atom)

ADS

Kategori

  • ANDROID
  • ARTIKEL
  • DESTINATION
  • FASHION
  • FOOD
  • FUN-FACT
  • KOMPUTER
  • Naruto
  • ONE PIECE
  • RELATIONSHIP
  • TIPS & INFO KECANTIKAN
  • TIPS & TRICK
  • TIPS DAN INFO KESEHATAN

Blog Archive

  • ►  2008 (4)
    • December (4)
  • ►  2009 (18)
    • January (1)
    • March (4)
    • May (1)
    • June (6)
    • September (1)
    • October (1)
    • December (4)
  • ►  2010 (2)
    • February (2)
  • ►  2011 (1)
    • November (1)
  • ►  2012 (5)
    • October (5)
  • ►  2013 (2)
    • January (1)
    • February (1)
  • ►  2014 (6)
    • October (6)
  • ►  2015 (2)
    • October (2)
  • ▼  2016 (505)
    • September (344)
    • October (161)
Powered by Blogger.