Cara Menampilkan Video di Atas Judul Postingan dan di Bawah Header Blog

Cara Menampilkan Video di Atas Judul Postingan dan di Bawah Header Blog

Solusi Isi Ulang Pulsa Online
Kuota internet anda sudah mau habis? Isi ulang saja di situspulsa.com dijamin harga lebih murah dan proses lebih mudah
www.situspulsa.com
Ads by guru-up.date info
Mau Jadi Master Dealer Pulsa?
Harga paling murah, Produk lengkap, Pendaftaran Gratis!!
situspulsa.com
Ads by guru-up.date info

Loading...
Mungkin anda berkeinginan untuk menampilkan postingan videonya di atas postingan atau di atas judul postingan blog dan di bawah header blog agar tampilan blog menjadi lebih menarik terutama bagi yang mempunyai blog-blog yang mengkoleksi postingan video.

Kebetulan sekali saya telah mencoba untuk melakukan hal tersebut dan hasilnya bisa dilihat pada demo postingan blog berikut

DEMO


Nah bagi yang berkeinginan untuk mencobanya anda silahkan ikuti langkah-langkah di bawah ini!
Cara Menampilkan Video di Atas Judul Postingan dan di Bawah Header Blog

Cara Menampilkan Video di Atas Judul Postingan dan di Bawah Header Blog

Sebetulnya tutorial ini di bersumber dari tulisan Kang Adhy Suryadi pemilik kompiajaib.com dengan judul postingannya "Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar" yang membahas cara memindahkan judul dan gambar postingan blog di atas postingan dan sidebar blog, namun saya menggunakannya untuk menampilkan video sehingga postingan video menjadi di atas judul postingan atau di bawah header blog.

Untuk menampilkan video di atas judul dan di bawah header blog anda harus mengedit template blog oleh karena itu disarankan untuk memback-up template blog terlebih dahulu untuk berjaga-jaga apabila gagal dalam menerapkan cara ini.

Setelah anda telah memback-up template blog selanjutnya ikuti langkah langkah berikut
1. Copy kode di bawah ini 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#items-thumbnail{display:none}
.post-upper{text-align:center;margin:0 30px;padding:20px 0 20px;border-bottom:1px solid#ddd}
.post-upper p.title{font-size:42px;font-weight:500;line-height:1.3em;color:#fff;margin:0;padding:0}
.post-upper .thumb-post{text-align:center;margin:0;padding:0}
.post-upper .thumb-post img{width:100%;max-width:100%;height:auto;margin-top:15px}
h3.post-title,.post-header,.post h1,.posth2{margin:0!important;padding:0!important;height:0!important;font-size:0!important;line-height:0!important;}
p.att-javascript{font-size:150%;text-align:center}
</style>
</b:if>
Tempatkan kode tersebut di atas kode </head> dan untuk menyesuaikan tampilan silahkan ubah ukuran margin dan padding dengan sesuai dengan tampilan blog anda.

2. Copy kode berikut
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-upper'>
<div class='thumb-post'/>
<p class='title'>
<data:blog.pageName/>
</p>
</div>
</b:if>
Tempatkan kode tersebut di bawah kode <div id='outer-wrapper'> atau <div class='main-outer'>

3. Tempatkan script di bawah ini di atas kode </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'><script>
//<![CDATA[
var items=document.getElementById("items-thumbnail"),divs=document.getElementsByClassName("thumb-post");[].slice.call(divs).forEach(function(e){e.innerHTML=items.innerHTML});
//]]>
</script>
</b:if>

4. Tambahkan script berikut dan taruh di bawah kode <body>
<noscript>
<p class='att-javascript'>This site requires JavaScript. This message will only be visible if you have it disabled.</p>
</noscript>

5. Simpan template blog anda

6. Setelah menyimpan template selanjutnya buat postingan pada mode HTML menggunakan kode berikut :
<div class="separator" id="items-thumbnail" style="clear: both; text-align: center;"> KODE EMBED VIDEO</div>

Silahkan ganti tulisan KODE EMBED VIDEO dengan kode embed video yang akan ditampilkan

contoh :
Kode embed video dari youtube sebagai berikut : 
<iframe width="100%" height="350" src="https://www.youtube.com/embed/ZuIKGQTT6XU" frameborder="0" allowfullscreen></iframe>

Sehingga kodenya menjadi seperti ini
<div class="separator" id="items-thumbnail" style="clear: both; text-align: center;"> <iframe width="100%" height="350" src="https://www.youtube.com/embed/ZuIKGQTT6XU" frameborder="0" allowfullscreen></iframe></div>

Hasilnya postingan video tidak akan tampil pada postingan dan akan pindah menjadi dibawah header dan di atas judul postingan blog. Ingat!!! Hal ini juga akan berdampak pada semua tampilan judul postingan blog dan cara ini mungkin tidak cocok diterapkan pada semua template blog dan kebetulan saya menggunakan template buatan kompi ajaib apabila anda berminat silahkan kunjungi www.kompiajaib.com.
Isi pulsa online 24 jam
loading...
Share this with short URL:
Facebook
Blogger
Pilih Sistem Komentar

No comments