Setelah pada sebelumnya saya bagikan Cara Memasukkan Video Youtube Pada Artikel Blog Dengan Mudah, Pada artikel kali ini cara mudah untuk mempercepat loading video youtube yang terpasang pada blog. Jika video yang terpasang pada artikel blog lama untuk munculi akan membuat pengunjung setia blog sobat menjadi bosan. Hal ini akan berakibat pada jumlah page view yang akan menurun pada artikel yang terpasang video youtube ini karena video tersebut muncul dalam waktu yang lama.
Catatan!
Jika kode ini sudah terpasang pada blog sobat, sobat bisa untu tidak memasangnya lagi.
5. Jangan simpan dahulu template sobat, setelah sobat sudah memastikan kode diatas sudah terpasang, selanjutnya letakkan kode di bawah ini tepat di atas kode ]></b:skin> Jika sobat kesulitan untuk mencarinya, sobat bisa gunakan tombol CTRL + F
6. Selanjutnya letakkan kode di bawah ini tepat di atas kode </body>
7. Setelah semuanya terpasang dengan benar, silahkan sobat klik Simpan Template.
Untuk sobat yang ingin memasukkan video youtube pada artikel yang ingin sobat buat, di dalam Entri Baru pilih HTML ( Bukan Compose) letakkan kode di bawah ini.
Keterangan:
Pada bagian kode yang saya beri warna merah adalah url video yang akan sobat pasang pada artikel blog sobat. sedangkan
Pada bagian kode yang saya beri warna biru, adalah judul video yang akan sobat pasang.
Itu tadi tutorial Cara Mudah Mempercepat Loading Video Youtube Yang Terpasang Pada Blog, jika ada pertanyaan tentang artikel sederhana ini, bisa sobat tanyakan pada kolom komentar di bawah artikel.
Sebenarnya hal ini dapat diatasi dengan mudah. Jika sobat ingin mempercepat loading video youtube yang ada pada blog sobat, berikut totorialnya:
1. Pertama tentu sobat harus login pada blog sobat
2. Selanjutnya sobat pilih menu Template pada dasbor blogger
3. Di dalam menu Template, sobat klik saya Edit HTML
4. Carilah kode </head> dan pasangkan kode ini di atasnya.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Catatan!
Jika kode ini sudah terpasang pada blog sobat, sobat bisa untu tidak memasangnya lagi.
5. Jangan simpan dahulu template sobat, setelah sobat sudah memastikan kode diatas sudah terpasang, selanjutnya letakkan kode di bawah ini tepat di atas kode ]></b:skin> Jika sobat kesulitan untuk mencarinya, sobat bisa gunakan tombol CTRL + F
.youtube-box,.youtube-frame { display:block; width:420px; height:315px; background-color:black; background-size:100%; position:relative; border:none; margin:0 auto 15px; }.youtube-box span { display:block; position:absolute; top:0; right:0; bottom:0; left:0; }.youtube-box .youtube-title { background-color:rgba(0,0,0,0.4); font:bold 15px Verdana,Arial,Sans-Serif; color:white; text-shadow:0 1px 2px black; bottom:auto; line-height:30px; height:30px; overflow:hidden; padding:0 15px; }.youtube-box .youtube-bar { background:black url('http://4.bp.blogspot.com/-7keKvgPlMUA/T7vJpi3X_YI/AAAAAAAACtw/4OUd7uHadDk/s1600/yt-bar-center.png') repeat-x top; height:35px; top:auto; }.youtube-box .youtube-bar .yt-bar-left { background:transparent url('http://4.bp.blogspot.com/-WL_y2cwe57k/T7xHS3C8tTI/AAAAAAAACug/xIqhenfa-4o/s1600/yt-bar-left.png') no-repeat top left; z-index:4; cursor:pointer; }.youtube-box .youtube-bar .yt-bar-right { background:transparent url('http://1.bp.blogspot.com/-DCNevn4jQx0/T7vJt3X3pjI/AAAAAAAACuA/uIKxoT3685M/s1600/yt-bar-right.png') no-repeat top right; }.youtube-box .youtube-play { cursor:pointer; width:83px; height:56px; top:50%; left:50%; margin:-28px 0 0 -42px; background:transparent url('http://1.bp.blogspot.com/-JVqaIffy7Ws/T7vK4-ya81I/AAAAAAAACuI/UCL8Y7G4DqE/s1600/yt-play.png') no-repeat top left; }.youtube-box .youtube-play:hover { background-position:bottom left; }
6. Selanjutnya letakkan kode di bawah ini tepat di atas kode </body>
<script type='text/javascript'>//<![CDATA[$(function() { $('a.youtube-link').each(function() { var yt_url = this.href, yt_id = yt_url.split('?v=')[1], yt_title = $(this).text(); $(this).replaceWith('<div class="youtube-box" style="background-image:url(http://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play"></span></div>'); $('div.youtube-box').click(function() { $(this).replaceWith('<iframe class="youtube-frame" src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1"></iframe>'); }); });});//]]></script>
7. Setelah semuanya terpasang dengan benar, silahkan sobat klik Simpan Template.
Untuk sobat yang ingin memasukkan video youtube pada artikel yang ingin sobat buat, di dalam Entri Baru pilih HTML ( Bukan Compose) letakkan kode di bawah ini.
<a class="youtube-link" href="https://www.youtube.com/watch?v=vL7ZGcsPOAY"> Fatin Feat Mikha Angelo - Kaulah Kamuku</a>
Keterangan:
Pada bagian kode yang saya beri warna merah adalah url video yang akan sobat pasang pada artikel blog sobat. sedangkan
Pada bagian kode yang saya beri warna biru, adalah judul video yang akan sobat pasang.
Itu tadi tutorial Cara Mudah Mempercepat Loading Video Youtube Yang Terpasang Pada Blog, jika ada pertanyaan tentang artikel sederhana ini, bisa sobat tanyakan pada kolom komentar di bawah artikel.
EmoticonEmoticon