Komen Bergambar Dan Video Untuk Blog
Demo di sini
Langkah 1: 'Log in' ke dalam 'Blogger dashboard' anda --> pergi ke 'Template' --> 'Edit HTML', dan gunakan Ctrl+F untuk mencari kod </body>
Langkah 2:Di atas kod </body> yang telah ditemui tersebut,'copy' dan 'paste' kod dibawah ini
*Untuk meletakkan gambar,taip seperti ini diruangan komen
[img]URL imej[/img]
Gantikan tulisan berwarna merah.Contoh seperti ini:
[img]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-x6l_uXawQTQQuaKiPI2dwLcAy41ncuCZlQxMcpVh7zEI2TnEHb6NtFQb91ucJezjyD17kRZN9UESIW8S-9leA5zw0vC0XIsJvZX343NZkIRdUydiFrWr0zRMPlfT0tGtlVqICSKNgM/s1600/naruto.jpg[/img]
*Untuk meletakkan video,taip seperti ini diruangan komen
[video]URL video[/video]
Gantikan tulisan berwarna merah.Contoh seperti ini:
[video]https://www.youtube.com/watch?feature=player_embedded&v=AlG9CKka5Wo[/video]
Anda boleh lihat atau cuba letakkan komen bergambar atau video di ruangan komen di demo blog tersebut.
Langkah 1: 'Log in' ke dalam 'Blogger dashboard' anda --> pergi ke 'Template' --> 'Edit HTML', dan gunakan Ctrl+F untuk mencari kod </body>
Langkah 2:Di atas kod </body> yang telah ditemui tersebut,'copy' dan 'paste' kod dibawah ini
<script>
//<![CDATA[
// Insertar imágenes y videos en los comentarios
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>
<!--
#comment-holder .img-comentarios, #comment-holder i[rel="image"] {
max-width: 450px; /* Ancho máximo de las imágenes */
width: auto;
height: auto;
display: block;
border: 5px solid #FFF; /* Borde de las imágenes */
margin: 0 auto;
padding: 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra de las imágenes */
}
#comment-holder .vid-comentarios {
width: 450px; /* Ancho del video */
height: 253px; /* Alto dle video */
display: block;
margin: 0 auto;
padding: 0;
border: 5px solid #FFF; /* Borde del video */
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra del video */
}
-->
</style>
//<![CDATA[
// Insertar imágenes y videos en los comentarios
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>
<!--
#comment-holder .img-comentarios, #comment-holder i[rel="image"] {
max-width: 450px; /* Ancho máximo de las imágenes */
width: auto;
height: auto;
display: block;
border: 5px solid #FFF; /* Borde de las imágenes */
margin: 0 auto;
padding: 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra de las imágenes */
}
#comment-holder .vid-comentarios {
width: 450px; /* Ancho del video */
height: 253px; /* Alto dle video */
display: block;
margin: 0 auto;
padding: 0;
border: 5px solid #FFF; /* Borde del video */
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra del video */
}
-->
</style>
*Untuk meletakkan gambar,taip seperti ini diruangan komen
[img]URL imej[/img]
Gantikan tulisan berwarna merah.Contoh seperti ini:
[img]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-x6l_uXawQTQQuaKiPI2dwLcAy41ncuCZlQxMcpVh7zEI2TnEHb6NtFQb91ucJezjyD17kRZN9UESIW8S-9leA5zw0vC0XIsJvZX343NZkIRdUydiFrWr0zRMPlfT0tGtlVqICSKNgM/s1600/naruto.jpg[/img]
*Untuk meletakkan video,taip seperti ini diruangan komen
[video]URL video[/video]
Gantikan tulisan berwarna merah.Contoh seperti ini:
[video]https://www.youtube.com/watch?feature=player_embedded&v=AlG9CKka5Wo[/video]
Anda boleh lihat atau cuba letakkan komen bergambar atau video di ruangan komen di demo blog tersebut.
4 ulasan
Dekat komen pon boleh letak video dengan pic ek.. x tahu plak.. hehe
ReplyYup,memang boleh lepas letak kod dari tutorial ni:)
Replycool!!! kena try buat nih!
Reply[img]http://4.bp.blogspot.com/-o9Zb5YkJGe0/VEi_NLy2AfI/AAAAAAAAFdE/CFT1uqeGneY/s1600/183765.gif[/img] Good Luck :)
ReplyNota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.