Showing posts with label pasang. Show all posts
Showing posts with label pasang. Show all posts
Sunday, November 27, 2016
Cara Pasang Video Youtube Responsive di Blog
Cara Pasang Video Youtube Responsive di Blog
Artikel ini saya buat karena saya memiliki pengalaman kurang baik ketika menyertakan script video youtube di Blog yang saya anggap kurang responsive. Script saya ambil dari fitur embed video yang bisa sobat tambahkan dan dapat ditonton langsung di blog. Namun dengan menambahkan video tersebut akan mengurangi nilai SEO sebuah blog karena adanya elemen iframe yang membuat tampilannya pun belum responsive jika ukuran layar diperkecil. Script bermanfaat ini saya dapat dari Mbak Arlina Fitriyani yang cantik dan seorang ahli desain Web ternama Indonesia.
Cara Membuat Video Youtube Menjadi Responsive di Blog
Berikut cara penerapannya :
1. Buka Blogger >> Template >> Edit HTML >> Tambahkan kode di bawah ini
sebelum ]]></b:skin> atau </style>
BLOGGINGPASURUAN - CSS
/* Responsive Youtube for blogger */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
2. Tambahkan kode di bawah ini sebelum </body>
BLOGGINGPASURUAN - HTML/Java Script
<script type=text/javascript>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith(<iframe class="video-youtube loader" src="+$(this).data("src")+" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>)})},5e3);
//]]>
3. Simpan template.
4. Selanjutnya untuk menambahkan video pada postingan, gunakan kode di bawah ini
BLOGGINGPASURUAN - HTML
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="MASUKKAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>
Berikut ini cara mengambil dan masukkan Link YouTube
5. Terakhir simpan / publikasikan postingan.
Cara Agar Youtube Tampil Responsive di Blog dengan CSS
Masukkan kode dibawah ini di atas kode ]]></b:skin>atau </style>
BLOGGINGPASURUAN - CSS
/* CSS for YouTube Resposive Video on Blogger*/
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
Anda bisa mengatur sendiri CSS max-height dalam media query jika kurang sesuai.
Available link for download
Wednesday, November 23, 2016
Cara Pasang Yahoo! Messenger YM Pada Website Atau Blog
Cara Pasang Yahoo! Messenger YM Pada Website Atau Blog
Pernahkah Anda mendengar tentang YM Yahoo! Messenger? Jika Anda memiliki sebuah website, dan ingin pengguna Anda untuk menghubungi Anda melalui Yahoo! Messanger aka YM, pengguna dapat mengirimkan pesan instan dengan mengklik ikon di website Anda. Website Anda akan memeriksa apakah Anda sedang online atau tidak untuk melihat ikon yang tepat, maka pengguna mengetahui status Anda.
Apakah Anda tertarik Pasang Yahoo! Messenger YM pada website atau blog? Silakan simak artikel ini. Saya berharap akan sangat membantu bagi Anda dan website Anda.
Cara Pasang Yahoo! Messenger (YM) Pada Website Atau Blog
Saya berasumsi bahwa Anda tahu bagaimana membuat sebuah website HTML dengan tag HTML.
Pada awalnya, saya akan menunjukkan cara untuk membuat hyperlink yang pengguna dapat digunakan untuk mengirim pesan instan ke pengguna didefinisikan menggunakan Yahoo! Messenger. Hal ini sangat sederhana, Anda membuat hyperlink dengan tag <a> dengan href atribut dalam bentuk ymsgr:Sendim?userID. Sebagai contoh:
Dalam contoh ini, ketika pengguna mengklik hyperlink, Yahoo! Messenger chat window baru akan muncul bagi pengguna untuk mengirim pesan ke pengguna yang ditetapkan, dalam contoh ini pengguna novavnu. Anda dapat menempatkan user ID Anda bukan novavnu. Hasilnya terlihat seperti pada gambar di bawah:<a href = ymsgr:sendim?novavnu>Send me a message</a>
Anda juga dapat menggunakan kode di bawah ini, sehingga pengunjung website anda tahu status anda apakah YM sedang online atau offlin :
<a href = ymsgr:sendim?novavnu>
<img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border=0>
</a>
Dalam contoh ini, Anda menggunakan tag <img> untuk melihat gambar dari hasil dari Yahoo!. Anda memiliki dua atribut di Yahoo! link website. Atribut pertama adalah u, Anda mengganti yourid dengan ID Yahoo! Anda. Atribut kedua adalah t, Anda mengganti StyleID dengan nomor dari 1 sampai 3, ini adalah gambar. Yahoo! memberikan tiga gaya seperti pada gambar di bawah ini. Aku memberikan enam gambar, pertama tiga gambar yang bagi pengguna yang sedang online dan tiga gambar terakhir adalah bagi pengguna yang sedang offline.
Kalau anda sudah paham dengan kode tersebut di atas, anda tinggal meletakkannya pada halaman website anda. Cara Pasang Yahoo! Messenger (YM) Pada Website Atau Blog
Available link for download
Subscribe to:
Posts (Atom)