CARA PASANG VIDEO YOUTUBE DI BLOG LANGSUNG PUTAR OTOMATIS

Posted by jhon on February 28, 2018 in Program aplikasi, tips dan trik,

CARA PASANG VIDEO YOUTUBE DI BLOG LANGSUNG PUTAR OTOMATIS

Caranya:

* Pertama anda harus mengambil kode embed dulu di youtube.

1. Bukalah video youtube yang ingin anda pasang di blog. Video boleh anda putar atau anda matikan. Terserah anda.

2. Perhatikan di bawah video. Silakan klik Bagikan atau Share, kemudian klik Sematkan atau Embed. Lihat gambar dibawah ini.

3. Setelah itu silakan copy kode embed yang tampak disitu. Lihat gambar atas yang berlatar biru

4. Pastekan kode semat/embeded code tadi di notepad. Lalu tambahkan kode: ?rel=0&autoplay=1

Jadinya akan seperti dibawah ini;

<iframe width="560" height="315" src="https://www.youtube.com/embed/y_dV-Cu-cCo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Note: 560 dan 315 adalah tinggi dan lebar video. Sesuaikan dengan lebar halaman posting anda.

* Bagaimana cara memasangnya di blog?

I. Jika anda ingin memasang di sidebar

* Buka Layout/Tata Letak, lalu pilih Gadget HTML, kemudian pastekan kode embed yang anda simpan di notepad tadi di situ, dan klik  Simpan. Selanjutnya seret gadget tersebut ke tempat yang anda kehendaki di blog.

II. Jika anda ingin memasang di halaman postingan

* Buka halaman entry baru, lalu klik HTML di sudut kiri atas. Kemudian pastekan kode embed yang anda simpan di notepad tadi di bagian yang anda kehendaki. Misalnya di bagian atas postingan, tengah, atau bawah. Selanjutnya klik publish.

^^ Selesai. Selamat mencoba dan semoga bermanfaat. Jangan lupa baca juga Cara Memasang Musik di Blog Langsung Putar (AutoPlay).

tutorialnya sebagai berikut
demi kenyamanan teman2 saat nonton tutorialnya matikan saja lagu yg autoplay di halaman blog

↞↠↠↠⇒⇒⇒⇒⟺⟹⟹

salam dari saya

Jhon Hendrik

Continue Reading

Cara Membuat Menu dan Sub Menu di Blogger

Cara Membuat Menu dan Sub Menu di Blogger

Posted by jhon on February 16, 2018 in Program aplikasi, tips dan trik,

Cara Membuat Menu dan Sub Menu di Blogger

Para blogger saya akan berbagi cara membuat sub menu bar di blog. Sub menu bar sangat diperlukan bagi setiap blogger sejati. Bagi para pengunjung hal ini juga sangat dibutuhkan guna mencari informasi berdasarkan pada kategori di sub menu bar. Memberi sub menu bar juga membuat blog kita tampak lebih tampan, teratur, dan praktis (tidak acak-acakan). Langkah-langkahnya berhubungan dengan edit HTML. Bagi para blogger pemula mungkin akan merasa sulit, tetapi sebenarnya hal ini sangat mudah. Ikuti saja langkah-langkah yang kami jelaskan di bawah ini. 


Langsung aja ya....

Berikut ini langkah-langkah yang harus dilakukan :

1. Klik Menu Desain 

2. Pilih Menu Template lalu pilih menu Edit HTML 

3. Pilih/klik menu Lanjutkan

4. Pilih/klik menu Expand Template Widget

5. <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>

   Cari scrift berikut :

Agar lebih mudah, klik saja F3 atau ctrl+F pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :

div class='main-outer'>.

Bisa jadi beda dengan template yang lain…

Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi : 

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>

PENJELASAN :

• Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
• Ganti Tulisan warna biru dengan menu dan sub menu yang anda inginkan.
• Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan. 

7. Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . Lalu simpanlah/save. Dan tutup edit HTML tersebut.

Saran : back up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas.

8. Untuk menghilangkan tampilan tampilan dabel dengan Laman Utama, 
Maka ikutilah saran berikut :

• Masuk ke Menu Laman 
• Lalu pilih tampilan halaman dengan memilih "jangan tampilkan"
• Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.

Blog sudah bisa dipublikasikan...

Apabila melalui cara yang kami bagikan ini belum berhasil, coba sahabat ulangi lagi dengan sabar. jika berkali-kali memang tidak bisa, sahabat bisa berkonsultasi dengan Info Bagus Fakta Bagus melalui komentar di bagian bawah ini. 

Semoga bermanfaat kebaikan.

Continue Reading

Cara Membuat Tulisan Berjalan di Blog (Marquee) Lengkap

Cara Membuat Tulisan Berjalan di Blog (Marquee) Lengkap

Posted by jhon on February 16, 2018 in Program aplikasi, tips dan trik,

Cara Membuat Tulisan Berjalan di Blog (Marquee) Lengkap

Cara Membuat Tulisan Berjalan di Blog (Marquee) Lengkap - Seringkali kita melihat pada acara berita yang disiarkan di televisi, terdapat potongan informasi yang disampaikan dengan running text atau teks berjalan.

Di dunia HTML, teks berjalan lebih dikenal dengan nama marquee, dan lingkupnya bukan hanya teks, gambar pun bisa dibuat berjalan.

Karena teks yang berjalan cukup menarik perhatian, pemilik blog sering memanfaatkan marquee untuk memberikan informasi yang bersifat penting kepada pengunjung blog mereka.

Marquee dapat dibuat dengan mudah dengan kode HTML. Kali ini blog Dua Rupa akan berbagi kode-kode HTML pembuat marquee lengkap dengan variasi dan atribut-atributnya.

Anda sedang membaca artikel Cara Membuat Teks Berjalan di Blog

Baca juga Cara Membuat Sitemap Otomatis Sederhana di Blogger.

Kode Dasar Marquee

<marquee>Teks Berjalan</marquee>

Teks Berjalan

Sebagai dasar, teks secara default akan berjalan dari kanan ke kiri dan berulang terus menerus.

Loop atau Perulangan Marquee

<marquee loop="5">Teks Berjalan berulang 5 kali</marquee>

Teks Berjalan berulang 5 kali

Loop menentukan banyak perulangan yang dilakukan marquee. Angka 5 menunjukkan jumlah perulangan, setelah berjalan 5 kali marquee tidak akan muncul lagi

Jeda Waktu Marquee

<marquee scrolldelay="500">Teks Berjalan dengan delay 0,5 detik</marquee>

Teks Berjalan dengan delay 0,5 detik

Scroll delay menunjukkan jeda waktu marquee. Angka 500 memiliki satuan milidetik, jadi sama dengan 0,5 detik. Teks akan berjalan setiap 0,5 detik.

Memberi Title Marquee

<marquee title="pesan tersembunyi">Teks Berjalan</marquee>

Teks Berjalan

Title memuat pesan yang akan aktif ketika kursor diarahkan ke marquee.

Warna Background Marquee

<marquee bgcolor="FFF300">Teks Berjalan dengan warna latar belakang kuning</marquee>

Teks Berjalan dengan warna latar belakang kuning

Bgcolor mengatur warna background marquee. FFF300 menunjukkan kode warna HTMLuntuk warna kuning, dapat diganti dengan warna dasar red, green, blue, atau yellow.

Kecepatan Gerak Marquee

<marquee scrollamount="100">Teks Berjalan dengan kecepatan 100</marquee>

Teks Berjalan dengan kecepatan 100

Scrollamount mengatur kecepatan gerak marquee. Angka 100 menunjukkan kecepatannya 100, kecepatan normal adalah 6.

Arah Gerak Marquee

<marquee direction="right">Teks Berjalan ke arah kanan</marquee>

Teks Berjalan ke arah kanan

<marquee direction="down" height="100">Teks Berjalan ke arah bawah</marquee>

Teks Berjalan ke arah bawah

Direction akan mengatur arah gerak marquee. Right menunjukkan arah pergerakan marquee ke kanan. Ada 4 arah yang bisa Anda gunakan :

• up untuk gerak ke atas
• right untuk gerak ke kanan
• down untuk gerak ke bawah
• left untuk gerak ke kiri (default)

Lebar dan Tinggi Marquee

<marquee width="300">Lebar Teks Berjalan 300px</marquee>

Lebar Teks Berjalan 300px

<marquee height="100">Tinggi Teks Berjalan 100px</marquee>

Tinggi Teks Berjalan 100px

Width untuk mengatur lebar marquee, dan height untuk mengatur tinggi marquee. Masing-masing menggunakan px sebagai satuan.

Mengatur Jenis, Ukuran, dan Warna Font Marquee

<marquee style="font-family:arial; font-size:20px; color:#ffffff;">Jenis ukuran dan warna font pada Teks Berjalan</marquee>

Jenis ukuran dan warna font pada Teks Berjalan

Anda dapat mengatur jenis, ukuran, dan warna font menggunakan style.

• font-family untuk jenis font
• font-size untuk ukuran font
• color untuk warna font

Sifat Marquee

<marquee behavior="alternate">Teks Berjalan memantul</marquee>

Teks Berjalan memantul

Behavior akan mengatur sifat marquee. Anda dapat mengatur marquee dengan 3 nilai :

• scroll : marquee menghilang ketika menabrak sisi kiri (default)
• slide : marquee berhenti ketika menabrak sisi kiri
• alternate : marquee memantul ketika menabrak sisi

Membuat Link pada Marquee

<marquee><a href="http://carabelajartutorial.blogspot.com/2016/09/cara-membuat-tulisan-berjalan-di-blog.html">Cara Membuat Tulisan Berjalan</a></marquee>

Cara Membuat Tulisan Berjalan

Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan kode HTML pembentuk link di dalam kode dasar marquee.

Membuat Gambar Berjalan

<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYtXfqOkknkS45n1bG_U2dXDDnP3XzDQzwAEzRD1BklWHnWUS3jzzlzjp9_fKhZhnvyETM8zPrw53OXGbJKYsUiOTMwjLBng7CTfjo0PLCothQvAx8ZO73vrRTtFntbfofBYALrfvGfnE/s1600/cara-membuat-teks-tulisan-berjalan-marquee.png" /></marquee>

Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan kode HTML pembentuk link di dalam kode dasar marquee.

Membuat Teks Berjalan Zig Zag

<marquee direction="up" scrollamount="2" align="center" behavior="alternate">
<marquee direction="right" behavior="alternate" height="30">Teks Berjalan Zig Zag
</marquee>
</marquee>

Teks Tulisan Zig Zag

Teks yang berjalan zig zag dapat dilakukan dengan menggabungkan 2 atribut direction (arah) dengan cara memasukkan teks berjalan diantara 2 marquee yang memiliki atribut arah berbeda. Dalam contoh kita gunakan arah up dan right sehingga membentuk zig zag.

Kombinasi Atribut Marquee

<div style="text-align: center;">
<span style="font-size: x-large;">
<marquee bgcolor="black" style="color: red;" direction="left" width="130">
<b>&lt;&lt;</b><b> MACAM &gt;&gt;</b>
</marquee>
<marquee bgcolor="black" style="color: blue;" direction="right" width="130">
<b>&lt;&lt; MACAM &gt;&gt;</b>
</span>
</marquee>
</div>

<< MACAM >><< MACAM >>

Kombinasi marquee dapat dilakukan dengan menggabungkan beberapa atribut sekaligus. Anda sudah mengetahui dasar-dasar membuat marquee, silahkan mengkreasikan marquee Anda sendiri.

Terima kasih telah membaca artikel Cara Membuat Tulisan Berjalan di Blog (Marquee) Lengkap. Jika ada pertanyaan, silahkan sampaikan di kotak komentar.

Continue Reading