Cara Menambah Recent Video Youtube Pada Blog Secara Manual

Ada banyak cara yang bisa dilakukan untuk membuat daya tarik pada blog lebih diminati oleh visitor diantaranya ialah menembah recent video pada bagian sidebar blog. Video yang di pasang pada bagian ini haruslah tetap berhubungan dengan topik blog, sehingga akan membuat daya tarik tersendiri bagi para peminatnya.

Untuk penempatannya sangat mudah, tinggal menembahkan beberapa style, script dan html pada bagian yang sudah ditentukan nantinya. Kita mulai saja pada bagian awal yaitu:

Letakkan css/style dibawah ini tepat diatas kode ]]></b:skin> atau </style>.

#slider-wrapper{width: 100%;height:315px;position: relative;}

#faded{height:315px}

#faded ul,#faded ul li{margin:0;padding:0;background:none;border:none}

#faded .slides{width:788px;height:315px;overflow:hidden;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Or0Pri93VSR02-dbaw-n7UConNHpQ02Ot_S0LmoCuoSrcK27gmXb2rLAieShDpVIh5rwThCgrs9tjsjF5dBbdp8IS5UxsteJUWvtAzT96mU4QvCPn4AB7KCQMUlufvkwxfwqPdh6f8KY/s32/loading_2.gif) no-repeat 50% 50%}

#faded .slides li{width:100%;height:315px;position:relative;margin-top:-24px}

#faded .pagination{position:absolute;right:0;top:0;width:136px}

#faded .pagination li{margin-bottom:5px;overflow:hidden;vertical-align:top;width:136px;height:75px;position:relative}

#faded .pagination li .hover-bg{position:absolute;left:0;top:0;width:136px;height:75px;background-repeat:repeat;background-position:0 0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggeSgHqhYNEi7p-L1sFS9opuUY-tXvCXl9elha97WHSdsvXdJslAVcTf63eUPKEy8jz9fO7-gavnUSkjpwEAs3-DGqG7hNi9QhTC76Ni0KaDtgfWRlhfD2aSQ49sNNk6yQNhcit4LVbxqu/s43/hover-bg.png);opacity:0;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}

#faded .pagination li:hover .hover-bg{opacity:1}

.no-opacity #faded .pagination li .hover-bg{visibility:hidden}

.no-opacity #faded .pagination li:hover .hover-bg{visibility:visible}

#faded .pagination li .title{color:#fff;position:absolute;left:15px;top:-37px;z-index:3;font-size:12px;line-height:18px;font-weight:bold;text-decoration:none;height:37px;overflow:hidden;padding-right:5px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}

#faded .pagination li:hover .title{top:10px}

#faded .pagination li .link{width:12px;height:9px;position:absolute;right:-19px;bottom:9px;z-index:99;background-position:0 0;background-repeat:no-repeat;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLbjtEDYVpQTZd8PJbXtVm6Lohw-4IodtdPoWS9SoBMKy4MsZIsWcOj642q2GI5F98ZGVKAaPceCWY_w4Uq7ubXxTFNsbcyYKImhBb3SwGVRgXjjYLIQM-_-muanyk3Gtxo5j8BP4XfEGR/s12/link-bg1.png);-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}

#faded .pagination li:hover .link{right:7px}

#faded .pagination li .views{position:absolute;left:-110px;bottom:5px;color:#fff;z-index:3;width:95px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}

#faded .pagination li:hover .views{left:15px}

#faded .pagination li a{background:none;padding:0}

.ie #faded .pagination li img{height:auto}

.video-item img { max-width:600px; }

.post blockquote { font: italic 13px georgia; margin: 1em 20px;}

.video-item {background-color:#FFF;border: 1px solid #cfcfcf;padding: 15px 19px;margin-top:-1px;box-shadow:0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);}

.video-item h1{color: #222222;font-size: 12px;font-weight: bold;margin-bottom: 0.2em;margin-top: 2px;}

Sesuaikan kode 788 dengan kondisi template blog.

Letakkan script dibawah ini tepat ditas kode </body>.

<script src='https://raw.githack.com/ardezign/js/master/Youtube_Slide.js'/>

Kemudian letakkan kode html dibawah ini sesuai dengan keinginan.

<section id='slider-wrapper'>

<div id='faded'>

<ul class='slides'>

<li class='item'>

<p><iframe frameborder='0' height='315' src='http://www.youtube.com/embed/AoM-EjSQ6ew' width='100%'/></p>

</li>

<li class='item'>

<p><iframe frameborder='0' height='315' src='http://www.youtube.com/embed/r4s6TdiBU0M' width='100%'/></p>

</li>

<li class='item'>

<p><iframe frameborder='0' height='315' src='http://www.youtube.com/embed/3AOYfNtrXig' width='100%'/></p>

</li>

<li class='item'>

<p><iframe frameborder='0' height='315' src='http://www.youtube.com/embed/bvZFQ3N7e_c' width='100%'/></p>

</li>

</ul>

<ul class='thumbs pagination'>

<li>

<span class='youtube-temp'/>

<span class='hover-bg'/>

<a class='title' href='https://kabarteve.blogspot.com/2018/11/merdunya-sholawat-remas-ainul-yaqin.html' rel='0'>Merdunya Sholawat Remas Ainul Yaqin</a>

<a class='link' href='https://kabarteve.blogspot.com/2018/11/merdunya-sholawat-remas-ainul-yaqin.html'/>

</li>

<li>

<span class='youtube-temp'/>

<span class='hover-bg'/>

<a class='title' href='https://kabarteve.blogspot.com/2018/11/ceramah-agama-kh-romzie-al-amiri-mannan.html' rel='1'>KH. Romzi Al Amiri Mannan</a>

<a class='link' href='https://kabarteve.blogspot.com/2018/11/ceramah-agama-kh-romzie-al-amiri-mannan.html'/>

</li>

<li>

<span class='youtube-temp'/>

<span class='hover-bg'/>

<a class='title' href='https://kabarteve.blogspot.com/2018/11/habib-hasyim-assegaf-ceramah-agama-lucu.html' rel='2'>Habib Hasyim Assegaf Banyuwangi</a>

<a class='link' href='https://kabarteve.blogspot.com/2018/11/habib-hasyim-assegaf-ceramah-agama-lucu.html'/>

</li>

<li>

<span class='youtube-temp'/>

<span class='hover-bg'/>

<a class='title' href='https://kabarteve.blogspot.com/2018/11/ceramah-habib-hasyim-assegaf-banyuwangi.html' rel='3'>Ceramah Habib Habib Hasyim Assegaf Banyuwangi</a>

<a class='link' href='https://kabarteve.blogspot.com/2018/11/ceramah-habib-hasyim-assegaf-banyuwangi.html'/>

</li>

</ul>

</div>

</section>

Ganti teks box merah dengan kode video youtube anda.
Ganti teks box hijau dengan link entri posting pada blog.
Ganti teks box jingga dengan judul entri posting pada blog.

Demikian pembahasan singkat tentang Cara Menambah Recent Video Youtube Pada Blog Secara Manual. Mudah-mudahan akan memberikan manfaat bagi kita semua, jangan lupa masukan berupa saran, kritik atau sekedar komen selalu saya tunggu dan tak lupa selalu saya ucapkan terima kasih.