✔ Cara Gampang Menambahkan Gambar, Video, Isyarat Pada Komentar Blog

Menambahkan Gambar Pada Komentar Blog

Belajar Komputer -  Sebenarnya postingan kali ini berawal dari pengalaman langsung yang penulis alami, pada update sebelumnya penulis pernah membahas wacana Cara Mempercepat Koneksi Modem Smartfren dan beberapa hari sesudah postingan ini dipublish, ada pengunjung blog yang menanyakan Bagaimana Cara Menghubungkan Modem dengan Antenanya, sempat galau bagaimana cara menjelaskannya jikalau memakai kata-kata, risikonya terbersit dalam benak aku untuk menjelaskan dengan kombinasi kata-kata disertai gambar, nah kini yang jadi hambatan ialah Bagaimana Menambahkan Gambar Pada Komentar Blog Saya.

Setelah itu aku memutuskan untuk mencari Tutorial wacana Bagaimana Cara Menambahkan Gambar Pada Komentar Blog, risikonya sesudah beberapa ketika browsing ketemulah dengan blog Kang Ismet yang secara rinci pertanyaan yang ada di benak saya, pada tutorial yang aku temukan, tidak hanya membahas wacana Bagaimana Cara Menambahkan Gambar Pada Komentar Blog, tetapi juga dibahas Bagaimana Menambahkan Video, Kode dan Blockquote Pada Komentar Blog.

Sekarang apa yang aku sudah dapatkan dari Blog Kang Ismet sudah aku aplikasikan pada blog kesayangan aku ini, dan pada postingan kali ini aku juga akan membagikannya kepada teman-teman semua yang ingin mempercantik blognya dengan Menambahkan Gambar, Video, Kode dan Blockquote Pada Komentar Blog. Silahkan simak langkah-langkahnya berikut ini:

Langkah 1 - Simpan arahan berikut diatas ]]></b:skin>

   #comment-holder .cm-youtube {     display:block;   border:none !important;   background-color:#333;   width:450px;   height:240px;   margin:0 auto 30px; } #comment-holder .cm-image {   display:block;   margin:0 auto 15px;   outline:none;   border:1px solid #ccc;   background-color:white;   -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);   -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);   box-shadow:0px 1px 3px rgba(0,0,0,0.2);   padding:5px;   max-width:96%;   height:auto;   width:auto; } code, #comment-holder code, #comment-holder i[rel="code"] {   font:normal 12px Monaco,"Courier New",Monospace;   color:blue; } pre, #comment-holder pre, #comment-holder i[rel="pre"] {   display:block;   font:normal 12px Monaco,"Courier New",Monospace;   background-color:#333;   color:white;   padding:0.5em 1em;   word-wrap:normal;   white-space:pre;   overflow:auto;   white-space: pre-wrap;   white-space: -moz-pre-wrap;   white-space: -pre-wrap;   white-space: -o-pre-wrap;   word-wrap: break-word; } blockquote, #comment-holder blockquote, #comment-holder b[rel="quote"] {   margin:0 2%;   background-color:#eee;   padding:1em 1.2em;   border-left:4px solid #7498AD;   display:block;   font-weight:normal;   font-style:italic; } #comment-holder i[rel="image"], #comment-holder i[rel="youtube"] {   display:block;   overflow:hidden;   border:2px solid black;   position:relative;   width:170px;   height:100px;   margin:0 auto 30px; } #comment-holder i[rel="image"]:before, #comment-holder i[rel="youtube"]:before {   content:"Silahkan enable JavaScript Anda untuk melihat gambar ini!";   position:absolute;   top:0;   right:0;   bottom:0;   left:0;   background-color:red;   color:white;   font-weight:bold;   text-align:center;   padding:15px 0; } #comment-holder i[rel="youtube"]:before {   content:"Silahkan enable JavaScript Anda untuk melihat video ini!"; }

Langkah 2 - Simpan arahan berikut diatas </body>

<script type='text/j4vascript'> //<![CDATA[ function repText(id) { var a = document.getElementById(id),  b = a.innerHTML,  b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");  b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");  b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");  b = b.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");  b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");  b = b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");  document.getElementById(id).innerHTML = b;  b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");  b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");  b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");  b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");  b = b.replace(/\/s(640|1600)/g, "/s400");  } repText('comment-holder');    c = document.getElementById('comment-holder'); if (c) {  b = c.getElementsByTagName("p");  for (i = 0; i < b.length; i++) {   if (b.item(i).getAttribute('CLASS') == 'comment-content') {    ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");    ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");    ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");    ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");              b.item(i).innerHTML = ki_comm;   }  } } //]]> </script> 

Kemudian Simpan Template.

Langkah 3 - Cara Penulisan (Mengaplikasikan)

Berikut ialah cara Menuliskannya / format penulisan pada komentar blog Anda.

Menulis Tag <code>
<i rel="code">Tulis arahan yang sudah diparse di sini</i>, atau
[code]Tulis arahan yang sudah diparse di sini[/code]

Menulis Tag <pre>
<i rel="pre">Tulis arahan yang sudah diparse di sini</i>, atau
[pre]Tulis arahan yang sudah diparse di sini[/pre]

Menulis Catatan (Blockquote)
<b rel="quote">Tulis catatan di sini</b>, atau
[quote]Tulis catatan di sini[/quote], atau
[blockquote]Tulis catatan di sini[/blockquote]

Memasukan/Menambahkan Gambar
<i rel="image">Tulis URL gambar di sini</i>, atau
[img]Tulis URL gambar di sini[/img]

Memasukan/Menambahkan Video Youtube

<i rel="youtube">Tulis URL Video Youtube di sini</i>, atau
[youtube]Tulis URL Video Youtube di sini[/youtube]

Sekian dulu postingan kali ini agar sanggup bermanfaat untuk semuanya, jangan lupa untuk membaca update sebelumnya mengenai Bagaimana Cara Membuat Pesan Diatas Kotak Komentar.

Inspirasi Blog :
mamapayish-online.blogspot.com/search?q=cara-mempercepat-koneksi-modem
Sumber http://webberbagi.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: