Bagaimana cara mengembed video facebook ke halaman website ataupun blog

Codesigncod 03:05 , No comments
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.

embed video facebook

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

embed video facebook get code


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.


No comments :

Post a Comment

Bagaimana Cara Membuat Kalkulator Dengan HTML

Codesigncod 02:50 , No comments
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 dengan HTML



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].

No comments :

Post a Comment

Bagaimana Cara Membuat Kalender Dengan Bahasa PHP, HTML dan Juga CSS

Codesigncod 02:25 No comments
Kalender / Calendar sering kita jumpai di halaman website. Segitu pentingnya fungsi kalendar di sebuah website?  kalendar juga sering kita temui di website portal yang memiliki banyak sekali berita, untuk mempermudah pengunjung mengakses berita pada tanggal tertentu biasanya di sediakan kalendar.
Pertanyaannya bagaimanakan cara membuat kalendar itu agar dinamis? agar sistem tabel nya sesuai dengan jumlah hari pada bulan tersebut (29, 30 atau 31 hari dalam sebulan). Mari kita coba saja langsung.

Membut Fungsi di PHP

Pertama kita perlu untuk membuat sebuah fungsi dengan script PHP berdasarkan bulan dan tahun tertentu. Diawali dengan menentukan hari-hari dalam seminggu, table header, dll.
function draw_calendar($month,$year){

	// Draw table for Calendar 
	$calendar = '<table cellpadding="0" cellspacing="0" class="calendar">';

	// Draw Calendar table headings 
	$headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
	$calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$headings).'</td></tr>';

	//days and weeks variable for now ... 
	$running_day = date('w',mktime(0,0,0,$month,1,$year));
	$days_in_month = date('t',mktime(0,0,0,$month,1,$year));
	$days_in_this_week = 1;
	$day_counter = 0;
	$dates_array = array();

	// row for week one 
	$calendar.= '<tr class="calendar-row">';

	// Display "blank" days until the first of the current week 
	for($x = 0; $x < $running_day; $x++):
		$calendar.= '<td class="calendar-day-np"> </td>';
		$days_in_this_week++;
	endfor;

	// Show days.... 
	for($list_day = 1; $list_day <= $days_in_month; $list_day++):
		if($list_day==date('d') && $month==date('n'))
		{
			$currentday='currentday';
		}else
		{
			$currentday='';
		}
		$calendar.= '<td class="calendar-day '.$currentday.'">';
		
			// Add in the day number
			if($list_day<date('d') && $month==date('n'))
			{
				$showtoday='<strong class="overday">'.$list_day.'</strong>';
			}else
			{
				$showtoday=$list_day;
			}
			$calendar.= '<div class="day-number">'.$showtoday.'</div>';

		// Draw table end
		$calendar.= '</td>';
		if($running_day == 6):
			$calendar.= '</tr>';
			if(($day_counter+1) != $days_in_month):
				$calendar.= '<tr class="calendar-row">';
			endif;
			$running_day = -1;
			$days_in_this_week = 0;
		endif;
		$days_in_this_week++; $running_day++; $day_counter++;
	endfor;

	// Finish the rest of the days in the week
	if($days_in_this_week < 8):
		for($x = 1; $x <= (8 - $days_in_this_week); $x++):
			$calendar.= '<td class="calendar-day-np"> </td>';
		endfor;
	endif;

	// Draw table final row
	$calendar.= '</tr>';

	// Draw table end the table 
	$calendar.= '</table>';
	
	// Finally all done, return result 
	return $calendar;
}
Fungsi diatas digunakan untuk meng-generate tabel pada bulan tertentu sesuai dengan yang kita inginkan.
Cara Menggunakan Fungsi tersebut adalah seperti berikut
echo '<h2>Juli 2013</h2>';
echo draw_calendar(7,2013);
Jika dijalankan maka akan terbentuk kalender seperti berikut ini :

Kalender PHP
Agar tampilan lebih bagus anda bisa mempercantik tabel tersebut dengan CSS, agar lebih mudah, di fungsi PHP tadi sudah di tentukan nama-nama class nya.
Percantik Dengan CSS
@charset "utf-8";
/* CSS Document */
html,body,form{ margin:0px; padding:0px; font-family:Ebrima, Arial, Helvetica, sans-serif; font-size:12px; color:#666; empty-cells:hide;}
table.calendar{border-style: solid; border-width: 1px; border-width:1px; border-color:#666; -moz-box-shadow:0px 0px 4px #CCCCCC; -webkit-box-shadow:0px 0px 4px #CCCCCC; box-shadow:0px 0px 4px #CCCCCC; }
tr.calendar-row  {  }
td.calendar-day  { min-height:80px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover  { background:#FFF; -moz-box-shadow:0px 0px 20px #eeeeee inset; -webkit-box-shadow:0px 0px 20px #eeeeee inset; box-shadow:0px 0px 20px #eeeeee inset; cursor:pointer;}
td.calendar-day-np  { background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head {font-weight:bold; text-shadow:0px 1px 0px #FFF;color:#666; text-align:center; width:64px; padding:12px 6px; border-bottom:1px solid #CCC; border-top:1px solid #CCC; border-right:1px solid #CCC; background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed));
background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
div.day-number{padding:6px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np {padding:5px; border-bottom:1px solid #DBDBDB; border-right:1px solid #DBDBDB; font-size:14px;background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
}


.overday{ color:#164b87; text-shadow:0px 1px 0px #FFF;}
.currentday{background: #6cb7f3 !important;
background: -moz-linear-gradient(top,  #6cb7f3 0%, #388be8 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6cb7f3), color-stop(100%,#388be8)) !important;
background: -webkit-linear-gradient(top,  #6cb7f3 0%,#388be8 100%) !important;
background: -o-linear-gradient(top,  #6cb7f3 0%,#388be8 100%) !important;
background: -ms-linear-gradient(top,  #6cb7f3 0%,#388be8 100%) !important;
background: linear-gradient(to bottom,  #6cb7f3 0%,#388be8 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cb7f3', endColorstr='#388be8',GradientType=0 ) !important; color:#FFF  !important; font-weight:bold; -moz-box-shadow:0px 0px 18px #1F68BA inset; -webkit-box-shadow:0px 0px 18px #1F68BA inset; box-shadow:0px 0px 18px #1F68BA inset;
}
.currentday:hover{-moz-box-shadow:0px 0px 24px #074080 inset !important; -webkit-box-shadow:0px 0px 24px #074080 inset !important; box-shadow:0px 0px 24px #074080 inset !important;}
Hasilnya adalah sebagai berikut
kalender php html css
Tampilan Kalender











Sekian
Sekian tutorial membuat tabel dengan PHP, HTML dan CSS kali ini, semoga berguna untuk anda. Jika anda ingin mencoba silahkan download langsung di Github berikut ini.

Download Script

No comments :

Post a Comment

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

Codesigncod 02:16 , No comments
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.

Menyembunyikan text dengan 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

No comments :

Post a Comment

Berbagai elemen yang tidak harus ada pada blog

Codesigncod 02:08 , No comments
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.

No comments :

Post a Comment

Inilah cara hidup sehat dari Google

Codesigncod 01:51 No comments
Inilah  cara hidup sehat dari Google — Mulai saat ini mungkin Anda (ups.., maksudnya kita) harus mulai untuk hidup sehat agar memiliki kualitas hidup yang lebih baik. Gaya hidup sehat seharusnya dimulai dari diri sendiri, kabar baiknya, saat ini Anda bisa dengan mudah mendapatkan tips cara hidup sehat melalui teknologi Internet.
Hidup sehat tentu banyak sekali faktornya, bisa makanan dan minumah yang sehat, pola hidup sehat dan juga berolahraga.
Dengan memanfaatkan semua fasilitas yang dimiliki Google, Anda bisa mempelajari cara hidup sehat.

1. Olahraga dengan Youtube
Mungkin Anda berfikir bahwa untuk mempelajari Yoga, pilates atau aerobik maka Anda harus mendatangai sebuah klub olahraga, atau kelas yoga yang tentu membutuhkan biaya.
Namun dengan aplikasi video sharing milik Google, yaitu Youtube maka Anda bisa mempelajari semua gerakan yoga dan olahraga lain, namun pastikan kuota internet Anda besar, agar kuota internet tidak cepat habis.
Asiknya lagi, Youtube sekarang memungkinkan Anda untuk menyimpan video secara offline agar bisa ditonton kapanpun, bahkan pada saat internet Anda sedang mati. Anda bisa mengikuti berbagai channel, seperti “Yoga with Andrienne” disana Anda bisa mengikuti tantangan “30 days of Yoga”, semua bisa Anda lakukan dirumah, dikamar atau diruang lain dirumah Anda.

2. Makan sehat kapanpun
Ada banyak sekali referensi yang mudah dan murah untuk membuat makanan sehat dari dapur Anda sendiri. Jika Anda memiliki aplikasi Google di smartphone, Anda bisa menggunakan icon merah bergambar microphone lalu katakan “Resep Quinoa”. Maka dengan cepat google akan mencarikannya untuk Anda.
Contoh lain apabila Anda ingin membuat jus sayuran, namun Anda tidak menyukai bayam, maka Anda bisa mengetik di mesin pencari “Resep jus sayur-bayam”, dengan menambahkan tanda (-) seperti itu maka google akan mencarikan resep jus sayur selain sayur bayam. Wow gampang kan?
3. Aplikasi Google Fit
Google sangat mendukung pola hidup sehat, baru-baru ini perusahaan raksasa tersebut meluncurkan sebuah aplikasi bernama Google Fit yang bisa dioperasikan dengan sangat mudah. Anda bisa cek sudah berapa langkah Anda berjalan pada hari ini? atau Sudah berapa lama Anda bersepeda?

Google Fit
Google Fit (Image: engadget)

No comments :

Post a Comment

Subscribe to: Posts ( Atom )