Cara membuat widget blog dengan video youtube (mode auto play dan manual play)

Kali ini saya ingin belajar sekaligus berbagi tips dan trik bagaimana Cara menyematkan video youtube dipostingan blog. Selain berguna untuk mempromosikan channel youtube sobat, video youtube diblog juga berguna sebagai alat untuk meramekan blog sobat.

Seperti contoh dibawah ini, saya memasang video dari youtube dipostingan saya sendiri menggunakan mode Autoplay (Play manual juga bisa). Tips dan Trik Cara menyematkan video youtube ini bukan cuma bisa disematkan dipostingan saja, melainkan juga bisa kita pasang sebagai widget di blog kita. Kren hehe
Untuk sobat blogger yang menginginkan video dari youtube tampil sebagai widget, caranya cukup mudah, tinggal copy link dibawah yang sudah saya sediakan kemudian pastekan ke widget sobat (Widget HTML). Ukuran video untuk widget tergantung ketelitian kita mengatur ukurannya saja.
Nah... ini nih contohnya Cara menyematkan video youtube dipostingan blog:

Langkah atau Cara menampilkan video youtube di blog kali ini tidak terlalu sulit, juga tidak terlalu gampang hehe

Contoh pengambilan kode video dari Youtube

Berikut adalah langkah-langkah yang akan kita lakukan.

Langkah pertama adalah langkah pengambilan kode video diyoutube

1. Siapkan atau cari sebuah video di youtube yang sobat ingin masukkan ke blog sobat.
2. Buka atau lihat dulu video tersebut, kemudian PAUSE
3. Klik kanan dan Pilih: Salin Kode Semat
4. Selesai

Langkah selanjutnya adalah langkah menambahkan video dari Youtube ke Blog

1. Buka Blog sobat
2. Masuk ke bagian Tata Letak
3. Tambahkan Gadget
4. Pilih HTML
5. Pastekan kode video yang sudah sobat Copy tadi
6. Untuk ukuran video silahkan sobat sesuaikan sendiri  dengan ukuran yang sobat inginkan
7. Selesai

Cara memasukan video Youtube ke Blog sudah sukses. Langkah selanjutnya adalah langkah agar video sobat Auto Play. Jika sobat tertarik dengan langkah ini silahkan disimak baik-baik, Sebagai contoh: video yang saya tampilkan diawal postingan diatas adalah mode auto play.
Untuk membuat video yang sobat masukan ke blog sobat, yang sobat butuhkan hanyalah menambahkan kode dibawah ini:

<iframe width="300" height="200" src="https://www.youtube.com/embed/FTb4JcGLsGQ?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

Keterangan:

• Kode warna Biru adalah Kode video yang sobat Copy sebelumnya
• Kode warna merah adalah kode "auto play", yang harus sobat lakukan adalah copas kode tersebut dan letakan persis seperti kode contoh diatas.
• Sementara 300 dan 200, menunjukan ukurannya. untuk ukuran bisa sobat ganti sesuai dengan kebutuhan sobat.

Sekian Tutorial "Cara menampilkan video youtube di blog" dari saya, semoga bermanfaat untuk kita semua. Terima kasih

Kritik dan Saran silahkan sobat titipkan di kolom Komentar, atau jika sobat ingin kerabat sobat mengetahui tutrial ini, silahkan di Share.

Catatan:

Jika sobat masih belum paham dengan tutorial diatas, silahkan sobat copas kode yang sudah saya tempelkan diatas, kemudian tambahkan ke gadget sobat, jika videonya bisa tampil berarti tutorial saya sukses dan layak untuk dipublikasikan hehe

Cara membuat kotak script dipostingan blog

Selamat siang sahabat blogger...

Masih ditutorial tentang tampilan blog atau cara merapikan tampilan blog. Cara merapikan blog yang saya maksud kali ini, saya ingin mengajak teman-teman blogger untuk membuat kotak script pada postingan, khusus teman blogger yang suka berbagi tutorial, cara membuat kota script ini sangat cocok untuk teman blogger yang belum mengetahui caranya. Hehe
Artikel yang berjudul "Cara membuat kotak script dipostingan blog" ini bertujuan untuk memudahkan dan merapikan script yang akan sobat postingan ke blog sobat.
Nah... Berikut ini adalah langkah-langkah yang harus kita lakukan agar kotak script yang kita buat berhasil.

Contoh:
Seperti ini, nanti artikel atau script sobat diketik disini

Nah... Langkah-langkahnya sangat mudah dan simple bunget.

• Masuk ke blog sobat.
• Siapkan artikel yang ingin sobat post
• Pada blog sobat, pilih New Entri atau Entri Baru
• Pada Entri Baru silahkan sobat ketik sejenis kata pembuka postingan sobat. setelah itu, dari Mode Compose klik mode HTML, kemudian Copy kode dibawah ini

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Tulis artikel sobat disini.</div>
• Selesai, langkah selanjutnya ganti mode HMTL ke mode Compose lagi. Silahkan sobat masukan artikel sobat atau sobat ganti ".Tulis artikel sobat disini." dengan artikel sobat
• Selesai dah... Selamat mencoba sob...

Jangan sungkan untuk memberikan kritik dan saran. Kritik dan Saran dari teman-teman adalah sebuah dukungan untuk admin

Cara membuat tombol share di Blog

Selamat pagi sahabat blogger... tidak terasa kita telah memasuki hari kedua dibulan desember. Semoga kita semakin matang untuk memberikan artikel yang lebih menarik lagi.

Berhubungan dengan bagaimana cara menarik atau menambah pengunjung blog, salah satu cara yang sangat penting adalah dengan berbagi.

Nah... pada artikel yang berjudul "cara membuat tombol share diblog" kali ini, saya akan memberikan cara pembuatan tombol share atau tombol berbagi.

Langkah-langkahnya tidak terlalu sulit, hanya membutuhkan ketelitian dan kesabaran saja untuk mengganti bagian kode agar sesuai dengan tampilan blog sobat.
Sebagai contoh:

Adapun langkah-langkahnya adalah sebagai berikut:

• Sobat masuk ke Blog sobat terlebih dahulu
• Klik template dan pilih Edit HTML
• Pada halaman HTML

Cari kode: <data:post.body/>

• Kalau sudah ketemu, tempelkan kode dibawah ini tepat dibawah kode: <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bookmark'>
<style>
.bookmark{margin-top:5px;border:5px double Dodgerblue;border-right:1px solid Dodgerblue;border-left:1px solid Dodgerblue;background:#DCDCDC;box-shadow: 0 2px 5px 2px #ddd;}

.bookmark h4{color:#666;border-bottom:1px double Dodgerblue;padding:0;margin-bottom:10px;padding-left:10px;}
.bookmark img{}
.book{float:left;margin:0 8px 0 0;padding:1px;border:1px solid #eee;background:#ffffff;}
  .booklast{float:left;margin:0;padding:1px;border:1px solid #eee;background:#ffffff;}
</style>
<h4>Jika anda menyukai artikel ini, Bagikan ke semua temanmu</h4>
<div align='center'>
<span class='st_facebook_large' displayText='Facebook'/>
<span class='st_twitter_large' displayText='Tweet'/>
<span class='st_linkedin_large' displayText='LinkedIn'/>
<span class='st_digg_large' displayText='Digg'/>
<span class='st_stumbleupon_large' displayText='StumbleUpon'/>
<span class='st_reddit_large' displayText='Reddit'/>
<span class='st_tumblr_large' displayText='Tumblr'/>
<span class='st_email_large' displayText='Email'/>
<span class='st_dzone_large' displayText='DZone'/>
<span class='st_netlog_large' displayText='Netlog'/>
<span class='st_google_large' displayText='Google'/>
<span class='st_identi_large' displayText='identi.ca'/>
<div style='clear:both;'/></div></div>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
• Jangan beranjak dulu, karena masih ada satu kode lagi yang harus kita pasang. Masih dihalaman HTNL sobat, silahkan sobat cari kode: </head>
• Kalau sudah ketemu, silahkan sobat Copy dan Pastekan kode dibawah ini tepat diatas kode: </head>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
• Selesai. klik simpan template

Keterangan:

• Ganti "Jika anda menyukai artikel ini, Bagikan ke semua temanmu" menurut sobat
• Kode warna untuk garis atau border: dodgerblue, silahkan sobat ganti juga agar warna garis seusai dengan tampilan blog sobat
• Kemudian untuk warna dalam kotak : #DCDCDC, silahkan sobat ganti juga

Sekian artikel kali ini, semoga bermanfaat..

Jangan sungkan untuk memberikan kritik dan saran. Kritik dan Saran dari teman-teman adalah sebuah dukungan untuk admin

Cara membuat isi postingan blog 2 kolom

Selamat siang :) kali ini saya ingin berbagi tutorial lagi.
Tutorial kali ini yang berjudul tentang "Cara membuat postingan blog 2 kolom" tidak kalah pentingnya dengan tutorial Dayak Kanayatn yang berjudul "Cara mempercepat loading blog dan Cara membuat efek zoom" di blog sobat. Bagaimana tidak, bayangkan saja, jika artikel sobat terlalu banyak atau terlalu panjang, sedangkan yang sobat inginkan selain isi artikel sobat yang menarik, sobat juga ingin blog sobat terlihat lebih tersusun rapih. Cara membuat postingan blog 2 kolom ini sangat cocok untuk sobat.
Selain membuatnya mudah, keuntungan yang sobat dapatkan adalah nilai keindahannya (seperti sedang belajar PKn aja ya sob hehe).

Ok. Karena tutorial yang satu ini tidak seperti biasanya maka untuk langkah-langkahnya adalah sebagai berikut:

• Siapkan artikel yang ingin sobat posting
• Jika sudah disiapkan, buat Entri Baru dan pilih mode HTML
• Pada mode HTML, silahkan sobat Copas kode dibawah ini

<table width="500" border="0" cellspacing="10">
<tr>
<td width="250" valign="top">kolom kiri...</td>
<td width="250" valign="top">kolom kanan...</td>
</tr>
</table>
• Kelihatan kan? langkah selanjutnya, silahkan sobat bagi atau sobat perkirakan postingan sobat agar kolom kiri dan kolom kanan banyak kalimatnya sama.
• Sebagai contoh klik disini 
• Jika sobat sudah yakin, silahkan sobat Save dan Publikasi postingan

Sebagai Catatan:

• Angka "500" adalah lebar atau luas postingan sobat
• Sedangkan kedua angka "250" adalah hasil pembagian dari angka "500" diatas.
• Ukuran dalam tabel tersebut boleh sobat ubah sesuai dengan kebutuhan sobat

Sekian Tutorial tentang "Cara membuat isi postingan blog 2 kolom". Terima kasih atas kunjungan sobat. Salam Blogger

Jangan sungkan untuk memberikan kritik dan saran. Kritik dan Saran dari teman-teman adalah sebuah dukungan untuk admin

Cara mempercepat Loading Blog

Sebelumnya saya sudah membahas tentang artikel tentang cara membuat daftar isi dan cara membuat efek zoom pada gambar postingan blog sobat. Nah, untuk kali ini saya juga ingin berbagi tutorial yang sudah dimiliki blog SEO. Selanjutnya adalah artikel yang membahas tentang fast loading / loading cepat pada blog. Khususnya untuk pengguna blogspot. Salah satu cara untuk membuat betah para pengunjung selain artikel yang menarik adalah kecepatan blog. Kecepatan blog ini sangat berpengaruh buanget sob.

Untuk itu pada artikel kali ini saya ingin berbagi trik bagaimana cara design agar para pengunjung blog kita betah buanget sama blog kita. Mau gak ni?? hehe

Ok... kita langsung ke TKP saja ya...

Cara Memasang Kode

Gambar diatas adalah contoh pemasangan kode fast loading blog.
Langkah-langkahnya sebagai berikut:
Seperti biasa sob...

• Sign in ke blog sobat
• Klik Template dan pilih Edit HTML
• Pada halaman HTML, cari kode </head> lihat contoh bergambar diatas
• Jika sudah ketemu, Copy dan Pastekan kode dibawah ini tepat diatas kode </head>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://wadah-tutorial.googlecode.com/files/superload.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbFanMcqX2mhM6yGiu1aFtBw5gewd9EBafc7GVwt6qRVKcslHdKttZrOuhtugZ0BO1wI3zRTkctpgW1jde_56iMLRy7krOhTNAA8DdP85rh_UGoTpJiaJZUDGD0ty035ZcjL2z-xc4t0/&quot;,threshold : 200}); }); </script>
• Jika sudah sesuai dengan langkah-langkah diatas, Klik Simpan
• Selesai, 

Sekian tutorial tentang "Cara mempercepat Loading Blog". Semoga bermanfaat. Terimakasih atas kunjungannya.

Jangan sungkan untuk memberikan kritik dan saran. Kritik dan Saran dari teman-teman adalah sebuah dukungan untuk admin

Cara membuat efek zoom in gambar di Blog

Masih pada tutorial efek blog, kali ini saya ingin berbagi tentang bagaimana cara membuat efek zoom in pada sebuah gambar yang sobat posting atau gambar lain nya yang ada di blog sobat.
Sebagai contoh, silahkan sobat arahkan cursor sobat pada gambar yang ada didalam kotak dibawah ini.

Bagaimana? apakah sobat tertarik untuk mencobanya. Jika iya mari kita lakukan langkah-langkahnya:

• Langkah pertama sobat harus sign in dulu ke blog sobat
• Klik template kemudian pilih Edit HTML
• Pada HTML blog sobat, silahkan sobat cari kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian
• Jika kode sudah ]]></b:skin> ketemu.
• Copy dan pastekan kode dibawah ini tepat di atas kode ]]></b:skin>
• Jika sudah, klik save / simpan dan silahkan sobat lihat hasilnya 

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

Sekarang blog sobat sudah memiliki efek zoom. 
Dan untuk yang teman-teman yang ingin mencoba trik ini, silahkan ikuti langkah-langkah yang sudah saya tuliskan diatas.
Semoga postingan kali ini bermanfaat untuk kita semua. Terima kasih atas kunjungannya. Salam BLOGGER
Kritik dan Saran silahkan sisipkan di kolom komentar