Codesigncod: website

Showing posts with label website. Show all posts

Bagaimana cara mengembed video facebook ke halaman website ataupun blog

Codesigncod

Bagaimana cara mengembed video facebook ke halaman website atau blog — Facebook sekarang sudah mirip dengan youtube, facebook sekarang sudah membolehkan kita untuk meng-embed video kedalam website kita yang berada diluar facebook.
Itu artinya jika anda menemukan sebuah video yang menarik di situs facebook, maka anda dapat dengan mudah memasang di blog anda tanpa harus mengarahkan audiens Anda ke situs Facebook.
Namun ada hal penting yang harus anda ketahui. yaitu, Anda hanya bisa meng-embed video yang di share untuk public, sedangkan video yang di setting private tidak bisa anda putar meskipun bisa di embed.
Masalah lain yaitu saat ini Facebook masih menggunakan Adobe Flash Player untuk embed video jika anda membuka website tersebut dari desktop. Sedangkan untuk versi mobile akan otomatis diubah ke format HTML5, jadi jika website dibuka dari desktop dan laptop, maka membutuhkan plugin Shockwave Flash yang tentunya harus di aktifkan agar bisa melihat video.

Berikut adalah cara mengembed video facebook ke dalam website ataupun blog anada.
Pertama: Tentukan video yang ingin anda embed, anda bisa mencarinya melalui kolom pencarian facebook dengan memanfaatkan fitur Graph Search nya, misal dengan mengetik seperti contoh-contoh ini:

videos of cats liked by my friends
videos uploaded by me
videos uploaded by my friends of friends

Kedua: Klik gambar thumbnail dari video tersebut untuk membuka video dalam jendela popup/lightbox.
Ketiga: Arahkan mouse anda ke arah video, klik menu Options dan pilih Embed Video dari dropdown yang muncul.

Keempat: Facebook akan memberikan potongan kode yang dapat anda copy dan langsung paste di template website anda atau di postingan blog anda.

Ambil Code

Perlu di catat bahwa anda perlu login ke akun facebook anda untuk menghasilkan kode embed.
Berikut adalah contoh video yang dipasang dari facebook.

Video yang ditanam itu bersifat responsive dan tentunya memenuhi lebar parent div website kita dipasang. Jika anda ingin menentukan lebar video anda bisa mengubah atau menambahkan di css website anda properti di class .fb-video seperti contoh berikut ini.

  .fb-video { 
    
    /* Atur lebar agar video tidak full melebar*/
    max-width: 300px !important; 
    
    /* Atur float agar video jadi berada di sebelah kanan, dan teks mengikuti */
    float: right;
    
    /* tambahkan boder berwarna orange pada video */
    border: 2px solid orange;
    
    /* kode lainnya bisa anda tambahkan, sesuaikan dengan kebutuhan */
  }

Semoga berguna untuk anda, sampai jumpa di tips dan tutorial berikutnya.

03:05 HTML , website

Bagaimana Cara Membuat Kalkulator Dengan HTML

Codesigncod

Tutorial Cara Membuat Kalkulator Dengan Bahasa HTML – Kalkulator sejak dahulu dikenal sebagai alat untuk menghitung, banyak digunakan oleh pedagang yang ada dipasar atau orang-orang yang bergelut di dunia hitung-hitungan.

Kalkulator (Foto: letweknow.com)

Program kalkulator ternyata bisa dibuat dengan menggunakan HTML, kalkulator ini tentulah sangat sedarhana, dan tidak maksimal, namun bisa anda jadikan langkah awal untuk membuat aplikasi kalkulator yang lebih canggih lagi.
– Baca juga: Tutorial Cara Membuat Kalender Dengan PHP, HTML dan CSS
Berikut kode sederhana untuk membuat kalkolator hanya dengan HTML

<FORM NAME="Calc">
    <TABLE BORDER=4>
        <TR>
            <TD>
                <INPUT TYPE="text" NAME="Input" Size="20">
                <br>
            </TD>
        </TR>
        <TR>
            <TD>
                <INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="Calc.Input.value += '1'">
                <INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="Calc.Input.value += '2'">
                <INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value += '3'">
                <INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="Calc.Input.value += ' + '">
                <br>
                <INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="Calc.Input.value += '4'">
                <INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="Calc.Input.value += '5'">
                <INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="Calc.Input.value += '6'">
                <INPUT TYPE="button" NAME="minus" VALUE=" - " OnClick="Calc.Input.value += ' - '">
                <br>
                <INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="Calc.Input.value += '7'">
                <INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="Calc.Input.value += '8'">
                <INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="Calc.Input.value += '9'">
                <INPUT TYPE="button" NAME="times" VALUE=" x " OnClick="Calc.Input.value += ' * '">
                <br>
                <INPUT TYPE="button" NAME="clear" VALUE=" c " OnClick="Calc.Input.value = ''">
                <INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="Calc.Input.value += '0'">
                <INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)">
                <INPUT TYPE="button" NAME="div" VALUE=" / " OnClick="Calc.Input.value += ' / '">
                <br>
            </TD>
        </TR>
    </TABLE>
</FORM>

Letakan di antara tag body dan /body

DEMO & DOWNLOAD CODE
Anda bisa copy paste script tersebut di aplikasi seperti sublime teks atau notepad++, dan taruh kode tersebut di dalam tag [body] dan [/body].

02:50 HTML , website

Inilah Cara Untuk Menyembunyikan Teks, Gambar dan Elemen lainnya Dengan CSS

Codesigncod

Ada banyak cara untuk menyembunyikan teks atau elemen dengan css, berikut ini beberapa script atau kode yang bisa anda gunakan untuk menyembunyikan element dengan menggunakan css.

Cara-1 | Menyembunyikan teks

.hide-text {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

Cara-2

.hide-text{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Cara-3

.hide-text {
  text-indent: -9999em;
  outline: 0;
}

.hide-text {
  height: 0;
  overflow: hidden;
  position: absolute;
}

.hide-text {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);

  // only needed for an apparent bug in Webkit/Opera
  // http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  height: 1px;
  width: 1px;
  overflow: hidden;
}

Cara-4 | Menyembunyikan tombol

.submitbutton {
	display:block;
	width:100px; height:25px;
	background-image:url(image.jpg); background-repeat:no-repeat;
	text-indent:-999px;
	font-size:0px; line-height:0;
}

Cara-5 | Untuk logo di header biasanya kita mengganti nama website dengan logo

h1 {
	text-indent:-9999px;
	margin:0 auto;
	width:400px;
	height:100px;
	background:transparent url("images/logo.jpg") no-repeat scroll;
}

Sekian saja trik-trik singkat dalam menyembunyikan teks atau elemen dengan menggunakan CSS, semoga para pembaca terbantu dengan tulisan ini. Sampai jumpa pada tulisan selanjutnya

02:16 CSS , website

Berbagai elemen yang tidak harus ada pada blog

Codesigncod

Hal-hal yang tidak harus ada pada blog-- Memiliki blog memang sangat menyenangkan karena dengan blog anda bisa menyalurkan isi kepala anda menjadi sebuah tulisan yang bisa dibaca oleh orang lain.
Blog yang baik adalah blog yang tidak berat ketika di akses dan tentunya memiliki struktur navigasi yang baik agar orang lain bisa dengan mudah menjelajahi isi blog.

Namun ada beberapa hal yang sebenarnya tidak terlalu penting untuk ada di blog anda, karena akan membuat blog anda menjadi kotor bahkan hanya akan memberatkan.
1. Badges — Anda benar-benar tidak memerlukan elemen yang satu ini, sadarilah bahwa blog anda hanya memerlukan konten yang berkualitas sehingga berguna untuk pembaca.
2. Popup — Popup kadang mengganggu orang lain, popup kadang diperlukan ketika anda ingin menyampaikan pesan yang cukup penting, namun selain itu sebaiknya popup jangan digunakan karena popup ini tidak terlalu disukai oleh pengunjung web anda.
3. Iklan PPC — Website anda tidak perlu ditambahkan iklan seperti google adsense ketika website anda masih minim pengunjung. Walaupun anda ingin memasang iklan, janganlah terlalu banyak, dan gunakan ditempat yang baik agar tidak mengganggu pengunjung.
4. Blogroll – Ini juga tidak terlalu penting untuk ada di website anda, karena blogroll yang terlalu besar hanya akan meningkatkan bounce rate blog anda.
5. Backsound Musik — Anda tidak perlu untuk menyertakan backsound musik pada blog anda, karena tidak semua orang menyukainya dan perlu di ingat juga selera musik orang berbeda-beda. Musik ini juga hanya akan memberatkan waktu tunggu website anda.
6. Jam — Blogger pemula biasanya senang sekali menampilkan berbagai elemen termasuk jam digital ataupun analog yang sebenarnya tidak terlalu penting, karena setiap komputer tentu sudah memiliki jam. Orang bisa liat jam dari taskbar di desktop nya.
Menurut anda adakah elemen-elemen lain yang tidak diperlukan oleh sebuah blog? kalau ada silahkan informasikan agar blog indonesia semakin menarik dan menyenangkan.

02:08 News , website

Memodifikasi button css framework Bootstrap dengan Bootstrap button generator

Codesigncod

Haii sobat codesigncod ,..
kali ini admin mau berbagi sebuah tutorial singkat tentang bagaimana sih cara memodifikasi button dari css framework bootstrap ??
Penasaran ?? ayo dilanjutin bacanya , hehehe.

Bootstrap merupakan sebuah css framework buatan twitter yang sangat membantu bagi para desainer website dalam merancang front - end websitenya, Bootstrap menyediakan berbagai website component yang biasa digunakan dalam perancangan website.
Salah satu komponen web yang dibuat adalah button, dengan menggunakan Bootstrap maka anda akan mendapat berbagai kemudahan terutama dalam hal modifikasi component web, dan untuk memodifikasi button pada bootstrap sobat cukup menggunakan Bootstrap code generator dengan langkah - langkah sebagi berikut ini :

1. Kunjungi halaman bootstrap button generator berikut di Bootstrap Button Generator
2. Gantilah property warna dan berikan nama class untuk button sesuai keinginan sobat,

3. Copy code yang css yang ada, dan paste di file bootstrap.min.css dan simpan.
4. Untuk menggunakan sobat bisa langsung memanggil class button yang tadi sobat sudah berikan .

Jika sobat belum mendownload bootstrap silahkan sobat download di getbootstrap.com.
Sekian Tutorial kali ini semoga bermanfaat yea.

03:09 CSS , website

Mengenal 10 tren website yang ada pada tahun 2014

Codesigncod

Perkembangan website saat ini kian berkembang. Di mana tampilan user interface dan user experience mengalami banyak perubahan. Artinya tampilan website yang ada saat ini sangatlah berbeda dengan tahun lalu atau tahun sebelumnya. Jika Anda terbiasa memperhatikan tampilan website dari satu ke yang lainnya, Anda pasti dapat merasakan perubahan ini secara kasat mata. Pasalnya, desain web user interface dan user experience sangatlah mempengaruhi tampilan suatu website.

Berikut ini adalah trend desain website populer di tahun 2014:

1. Typografi membuat tampilan web tidak membosankan

Typografy saat ini banyak digunakan dalam berbagai jenis website. Tujuannya adalah untuk mempercepat pengaksesan internet. Kumpulan text yang berada di halaman utama situs web juga bisa menjadi faktor utama dalam penyampaian informasi dari situs web tersebut. Di sini, unsur kreatifitas juga tidak boleh dilewatkan, jika salah mengimplementasikan typograpy ke dalam website maka akan brakibat fatal dan mungkin akan membuat pengunjung menjadi bosan.

2. Flat desain

Masih sama dengan tahun 2013, Website bergaya flat pun masih sering dipakai hingga saat ini. Flat desain memiliki banyak kelebihan yang salah satunya adalah ringan saat di aksess. Flat desain memiliki ciri khas warna yang simple di website, warna yang solid namun berkarakter.

3. Ilustrasi gambar gantikan slider

Website dengan ilustrasi gambar saat ini juga masuk dalam jajaran desain web yang banyak dipakai tahun ini. Adanya illustrator ini dimaksudkan untuk menggantikan peran slider kedepanya.

4. Fokus ke Mobile (Responsive)

Tren website saat ini lebih fokus ke responsive desain. Hal ini dikarenakan adanya kemajuan teknologi. Semua orang hampit menggunakan smartphone ataupun tablet dalam mengakses beragam informasi.

5. Video menggantikan peran text

Video juga mengambil peran dalam tren website, sekarang banyak website yang menggunakan deskripsi dari service yang dimiliki melalui video. Tujuannya adalah untuk membuat user tidak mudah cepat bosan. Terlepas dari sifat masing - masing orang, video memudahkan user mengerti tentang pesan yang tersimpan di dalam web, ketimbang dengan tulisan yang memmiliki banyak makna.

6. Website yang memiliki scroll panjang

Berlandaskan karena banyak user yang berkunjung ke website pasti melakukakn scroll, banyak pembuat website melirik peluang ini. Yaitu dengan cara membuat website dengan scroll panjang. Tujuannya adalah agar irit halaman. Website satu halaman terlihat lebih praktis dan minimalis ketimbang berhalaman.

7. Skema warna desain simple

Warna merupakan unsur utama keindahan, begitupun untuk website. Warna juga menentukan indah atau tidaknya website tersebut, sedikit atapun banyak warna itu pilihan dari si pemilik untuk menarik perhatian para user sebuah situs web. pemilihan warna yang simpel dan tenang adalah salah satu pilihan terbaik, namun tidak menutup kemungkinan website dengan fullcolor tidak bagus. Namun di tren zaman sekarang banyak orang menggunakan skema warna yang simpel dalam websitenya, agar tampil elegan.

8. Pemilihan konten sederhana

Konten menjadi poin yang tidak boleh dilewatkan dalam pembuatan website. Kehadiran konten sangat mempengaruhi tampilan website dan user. Oleh karena itu pastikan untuk membuat konten yang sederhan dan tidak ribet agar lebih mudah dimengerti oleh user.

9. Pembuangan SIDEBAR

Mungkin memang benar sidebar jarang digunakan lagi oleh website" modern saat ini. Namun tidak semua melakukan hal ini, di Indonesia masih banyak yang menggunakan sidebar, terutama di dalam pembuatan website dinas atau pemerintahan karena mungkin dapat membantu dalam navigasi kemudahan. Jadi di kembalikan lagi oleh para user masih tetap memakai atau tidak tergantung kebutuhan.

10. Manipulasi perumpamaan

Jika dilihat, tampilan web saat ini banyak menggunakan gambar dalam penyampaian informasi. Jadi mungkin dengan memanipulasi informasi dari tulisan yang menjenuhkan, menjadi gambar ataupun bentuk lainnya, user akan lebih cepat memahami isi di dalam website.

20:19 website

Subscribe to: Posts ( Atom )

Codesigncod

Bagaimana cara mengembed video facebook ke halaman website ataupun blog

Bagaimana Cara Membuat Kalkulator Dengan HTML

Inilah Cara Untuk Menyembunyikan Teks, Gambar dan Elemen lainnya Dengan CSS

Berbagai elemen yang tidak harus ada pada blog

Memodifikasi button css framework Bootstrap dengan Bootstrap button generator

Mengenal 10 tren website yang ada pada tahun 2014

Quote

Labels

Popular Posts

Like Codesigncod

About Me

Blog Archive