Setelah pada sebelumnya aku bagikan Cara Memasukkan Video Youtube Pada Artikel Blog Dengan simpel, 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 teman menjadi bosan. Hal ini akan berakibat pada jumlah page view yang akan sajianrun pada artikel yang terpasang video youtube ini lantaran video tersebut muncul dalam waktu yang usang.
Catatan!
Jika kode ini sudah terpasang pada blog sobat, sobat bisa untu tidak memasangnya lagi.
5. Jangan simpan dahulu template teman, sehabis sobat sudah memastikan instruksi diatas sudah terpasang, selanjutnya letakkan arahan di bawah ini sempurna di atas instruksi ]></b:skin> kalau teman kesulitan untuk mencarinya, sahabat bisa gunakan tombol CTRL + F
6. Selanjutnya letakkan arahan di bawah ini tepat di atas isyarat </body>
7. setelah semuanya terpasang dengan benar, silahkan sahabat klik Simpan Template.
Untuk sobat yang ingin memasukkan video youtube pada artikel yang ingin teman buat, di dalam Entri baru pilih HTML ( Bukan Compose) letakkan isyarat di bawah ini.
Keterangan:
Pada kepingan aba-aba yang saya beri warna merah adalah url video yang akan sahabat pasang pada artikel blog teman. sedangkan
Pada serpihan arahan yang saya beri warna biru, yaitu judul video yang akan sahabat pasang.
Itu tadi tutorial Cara simpel Mempercepat Loading Video Youtube Yang Terpasang Pada Blog, jika ada pertanyaan perihal artikel sederhana ini, mampu teman tanyakan pada kolom komentar di bawah artikel.
Sebenarnya hal ini dapat diatasi dengan simpel. jika sobat ingin mempercepat loading video youtube yang ada pada blog teman, berikut totorialnya:
1. Pertama tentu sobat harus login pada blog sobat
2. Selanjutnya sahabat pilih menu Template pada dasbor blogger
3. Di dalam hidangan Template, teman klik saya Edit HTML
4. Carilah aba-aba </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 teman, sehabis sobat sudah memastikan instruksi diatas sudah terpasang, selanjutnya letakkan arahan di bawah ini sempurna di atas instruksi ]></b:skin> kalau teman kesulitan untuk mencarinya, sahabat 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 arahan di bawah ini tepat di atas isyarat </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 sahabat klik Simpan Template.
Untuk sobat yang ingin memasukkan video youtube pada artikel yang ingin teman buat, di dalam Entri baru pilih HTML ( Bukan Compose) letakkan isyarat di bawah ini.
<a class="youtube-link" href="https://www.youtube.com/watch?v=vL7ZGcsPOAY"> Fatin Feat Mikha Angelo - Kaulah Kamuku</a>
Keterangan:
Pada kepingan aba-aba yang saya beri warna merah adalah url video yang akan sahabat pasang pada artikel blog teman. sedangkan
Pada serpihan arahan yang saya beri warna biru, yaitu judul video yang akan sahabat pasang.
Itu tadi tutorial Cara simpel Mempercepat Loading Video Youtube Yang Terpasang Pada Blog, jika ada pertanyaan perihal artikel sederhana ini, mampu teman tanyakan pada kolom komentar di bawah artikel.
Post a Comment