Solutions For You

logo
close
Blog ini akan Saya hapus soalnya banyak masalah di Webmaster. Maklum dulunya blog gado - gado, isinya copasan haha. Mungkin nanti muncul blog baru pengganti Blog Saeful13 dan tentunya pake TLD biar terlihat professional gitu haha..

Sebentar, ente tahu TLD gak ? Kalau gak tahu TLD itu Top Level Domain :) Masih belum ngerti juga ? Ane jelasin lagi ya, TLD merupakan akhiran pada suatu nama domain yang mengindikasikan pemilik tingkatan tertinggi Domain tersebut dan jenis domain tersebut. Kayak .com, .net dan kawan - kawannya :)

#JustKiddingBro
close
menu

Menambahkan Kode, Gambar dan Blockquote Pada Komentar

Adding Images, Blockquotes and Codes to Blogger Comments - Alhamdulillah, akhirnya bisa menulis artikel kembali. Pada kesempatan kali ini saya akan mencoba berbagi kepada sobat blogger, yaitu Menambahkan Kode, Gambar dan Blockquote Pada Komentar. Coding ini saya dapat dari Agit Anugrah dan MKR-Site yang saya modifikasi kembali.
Menambahkan Kode, Gambar dan Blockquote Pada Komentar

Langkah Pemasangan

Pertama blog sobat harus sudah terpasang jQuery, bila blog sobat belum terpasang silakan pasang jQuery ini diatas kode </head>, atau pasang jQuery terbaru.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Tambahkan kode CSS ini diatas kode ]]></b:skin>.
/*Tag Pre*/
code,i[rel="code"]{margin:5px 0;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px}
pre code,i[rel="pre"]{display:block;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#126AAF;background:#F7F7F9;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:1px 2px;overflow:auto;max-height:200px}
/*Gambar*/
.gambarnya{max-width:100%}
/*Blockquote*/
blockquote{margin:0 10px;background-color:#eee;padding:5px;border-left:4px solid #7498AD;display:block;font-weight:normal;font-style:italic;}
Lalu tambahkan jQuery ini diatas kode </body>.
<script type='text/javascript'>
//<![CDATA[
$("#comment_block").each(function () {
    $('i[rel="pre"]', this).replaceWith(function () {
        return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
    });
    $('i[rel="image"]', this).replaceWith(function () {
        return $('<img class="gambarnya" src="" />').attr("src", $(this).text())
    });
    $('b[rel="quote"]', this).replaceWith(function () {
        return $("<blockquote></blockquote>").append($(this).contents())
    });
    $('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>

Pengaturan dan Format Penulisan

Silakan sobat ganti ID #comment_block pada JS diatas sesuai dg komentar yang digunakan.

Menulis tag Code
<i rel="code"> Tulis kode yang sudah diparse di sini </i>
Menulis tag Pre
<i rel="pre"> Tulis kode yang sudah diparse di sini </i>
Menulis Catatan Blockquote
<b rel="quote"> Tulis catatan anda disini </b>
Memasukan Gambar
<i rel="image"> Masukan URL gambar disini </i>

Bila ada masalah pada pemasangannya, silakan berkomentar pada kolom komentar. Semoga bermanfaat...
Previous
Posting Lama

57 Komentar

avatar

PERTAMAX sob, saya sudah pake tutorialnya, hehe :D
http://yoga-tc.blogspot.com/

BalasHapus
avatar

Wah,saya belum menerapkan ini di blog saya :D makasih gan,
sekali mau tanya cara menampilkan emoticon tapi tidak tampak diatas form komentar terma kasih :D

BalasHapus
avatar

itu kode pre yang berwarna warni bukan ?, klo iya saya akan coba, hehe

BalasHapus
avatar

sip deh kalau sudah menerapkan dg lancar. :)

BalasHapus
avatar

Maksudnya emoticon jendela munculan ?. Tentunya sobat sudah memasang ini kan.
http://blog.kangismet.net/2013/05/membuat-judul-pada-pesan-formulir-kommentar.html
http://mkr-site.blogspot.com/2013/02/emoticon-pada-komentar-blogspot.html

Kemudian tambahkan ini.
<a class='small-button' href='http://boyz.googlecode.com/svn/html/mdf-emoticon.html' onclick='window.open(this.href,"popupwindow","status=0,height=150,width=530,resizable=0,top=50,left=100");return false;' target='_blank' title='Emoticon Pada Komentar'>Emoticon</a>.

Catatan : Saya menggunakan emoticon punyanya mas Abdul.

BalasHapus
avatar

bukan gan, yg saya pakai ditambahkan syntax highlighter. Nanti saya coba akan bagikan mengenai Syntax Highlighter pada blog ini. :)

BalasHapus
avatar

keren.. boleh dicoba nih.. makasih gan :)

BalasHapus
avatar

silakan sob. Kalau gk salah sobat kan sudah dipasang kayak ginian. :)

BalasHapus
avatar

gan tau gak daftar isi blog kayak gini : http://imronfhatoni94.blogspot.com/p/sitemap.html

BalasHapus
avatar

Waduh gan kurang tahu tuh, coba tanyakan sama Mas Imron. Kalau mau sobat juga bisa pilih daftar isi di DTE, soalnya banyak pilihan.
http://www.dte.web.id/p/cari-artikel.html?q=daftar+isi#.UhCCsDtgeuI

BalasHapus
avatar

gan kalau pasang biar komentar iklan gimana ajarin saya dong ? :D

BalasHapus
avatar

Pasang JS ini diatas kode </body> dan ganti ID nya sesuai komentar yg digunakan pada blog sobat. :)
<script type='text/javascript'>
//<![CDATA[
//Blocking Ads by Kang Ismet
//http://blog.kangismet.net
function blockNotAllowed(parentID, children) {
if (!document.getElementById(parentID)) return;
var parent = document.getElementById(parentID),
content = parent.getElementsByTagName(children);
for (var i = 0; i < content.length; i++) {
if (/(^| |>)(Menjual|Jual|Dijual|Rp.|togel|KABOIRENG|Shop|shop)(nya|"|'|&quot;|&#39;|\,|\.|\!|\?|\:|\;|\)|\/|<| |$)/i.test(content[i].innerHTML)) {
content[i].innerHTML = 'Ups!!! Dilarang ngiklan di kolom komentar.' + '<br><br><cite class=\'note\'>Mohon maaf, komentar anda terblok otomatis oleh sistem kami.</cite>'
}
}
}
blockNotAllowed('comment_block', 'p');
//]]>
</script>

BalasHapus
avatar

CSS
#comments .note{display:block;margin:auto;padding:5px 10px;border:1px solid #b3c5e0;background-color:#e0ecff;color:#666;font:normal normal 12px Arial}

BalasHapus
avatar

oke gan makasih gan,,
hehehe kalau boleh klik iklan di blog ane ya makasih :D

BalasHapus
avatar

oh ya cara bikin .js ke google code gimana?

BalasHapus
avatar

udah gan, bgi tips daftar di GA dong ? hehehe :)

BalasHapus
avatar

Kesini aja gan.
mkr-site.blogspot.com/2013/01/simpan-file-google-code-tortoisesvn-subversion.html

BalasHapus
avatar

Atau simpan saja di GD.
Tutotnya dari Kang Ismet.
http://blog.kangismet.net/2013/06/cara-termudah-upload-file-ke-google-drive.html

BalasHapus
avatar

gan mampir yah,ada postingan baru : http://bmaster23.blogspot.com/2013/08/aplikasi-blackberry-yang-wajib-anda.html

BalasHapus
avatar

Daftar GA lewat YouTube aja mas ... Dijamin deh Full Approve dalam 1 Jam ... Cuma butuh 2 Video Krasi sendiri .. :D

BalasHapus
avatar

Ini fungsinya untuk apa ya mas ?? Mohon di jelaskan dong :D ...

BalasHapus
avatar

Eh, ternyata untuk menyisipkan kode, blockquote dan gambar toh ... Hehe kurang teliti nih bacanya ... :D

BalasHapus
avatar

Dapat hal baru lagi nih kang
Perlu nih buat di coba :)

BalasHapus
avatar

Upload videonya masalahnya gan, modem punya saya lola ,tapi nanti saya coba tips mas Nazar. :D

BalasHapus
avatar

Gak usah pakai Video beneran mas ... Upload Gambar pakai Fitur video Slide youtube juga bisa ... :D

BalasHapus
avatar

Mas, tanya mas #comment_block itu diganti apa ya mas? Kalau bisa di kasih contohnya ...

Terimakasih..

BalasHapus
avatar

Nah ini kan kode yang diatas
<script type='text/javascript'>
//<![CDATA[
$("#comment_block").each(function () {
$('i[rel="pre"]', this).replaceWith(function () {
return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
});
$('i[rel="image"]', this).replaceWith(function () {
return $('<img class="gambarnya" src="" />').attr("src", $(this).text())
});
$('b[rel="quote"]', this).replaceWith(function () {
return $("<blockquote></blockquote>").append($(this).contents())
});
$('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>


Sya lihat komentar punya mas nazar, menggunakan id #comment-holder karena komentar bawaan blogger. Jadi kodenya seperti ini.
<script type='text/javascript'>
//<![CDATA[
$("#comment-holder").each(function () {
$('i[rel="pre"]', this).replaceWith(function () {
return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
});
$('i[rel="image"]', this).replaceWith(function () {
return $('<img class="gambarnya" src="" />').attr("src", $(this).text())
});
$('b[rel="quote"]', this).replaceWith(function () {
return $("<blockquote></blockquote>").append($(this).contents())
});
$('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>

BalasHapus
avatar

Ouh begitu ... :D Saya bingung tadi, cz saya ganti-ganti ID nya gak ada yang cocok ... :D

BalasHapus
avatar

Sekalian tanya lagi mas, kalau membuat jika ada komentar baru biar ada bordernya (beda) gimana mas? Keren .. :D

BalasHapus
avatar

yang ini sip pake jquery, lebih gampang dimengerti. terkadang banyak yang bermasalah karna beda atribut ID atau Class =( jadi memang harus nanya ya sama mastahnya kalo gak berhasil. saya ijin coba versi jquerynya sob :yaya:

BalasHapus
avatar

cip...
artikel yang memang bermanfaat mas saeful :-d

BalasHapus
avatar

gan cara pasang (infox) warna biru di blog saya gimana?

BalasHapus
avatar

kesini aja.
www.agitanugrah.com/2013/06/efek-smooth-scrolling-pada-komentar.html

BalasHapus
avatar

Silakan sob semoag berhasil. :)

BalasHapus
avatar

Ikuti penjelasan dari saya sama mas Yoga.
http://saeful13.blogspot.com/2013/08/membuat-tombol-keren-untuk-blog.html?showComment=1376759215964#c4931066848429687156

BalasHapus
avatar

Wih, keren bung saeful apalagi klau ada contoh gambarnya, hehee,.. ohh iy ane boleh request, tolong buatin postingan cara bikin komentar mirip blog agan ini ..
hehe thanks dari http://catatan-kk.blogspot.com/ (sepupunya v-datoe) hehe..

BalasHapus
avatar

Ternyata banyak saudaranya ya... Untuk contoh udah ada pada komentar blog ini. :D
Contohnya :
http://4.bp.blogspot.com/-LscmzkpR0ZE/UhBoZthBV4I/AAAAAAAACLY/2o5Yk8mLPsM/s1600/Code,+Blockquotes+and+Images.jpg

BalasHapus
avatar

keren juga kalau dipasang di blog. Saya juga sudah pasang, makasih yah Mas tutorialnya. Oh iya saya lupa, kunjungan pertama saya nih di blog ini ^_^

BalasHapus
avatar

boleh dicoba nih..trims infonya mas..

BalasHapus
avatar

saya juga sudah coba sob. tapi masalahnya kodenya nggak berwarna sob :(

BalasHapus
avatar

Pasang tutor selanjutnya mas, tentang Memasang Syntax Highlighter.

BalasHapus
avatar

Mas bro,kenapa saya taruh code itu di pesan komentar,kok code nya gak muncul

BalasHapus
avatar

gimana ya biar form komentar ttep terbaca seperti kayak gini?

Menulis tag Code
Tulis kode yang sudah diparse di sini
Menulis tag Pre
Tulis kode yang sudah diparse di sini
Menulis Catatan Blockquote
Tulis catatan anda disini
Memasukan Gambar
Masukan URL gambar disini

BalasHapus
avatar

kalo buat tag pre seperti di blog ini + otomatis scroll kalo isinya panjang. gimana caranya?

BalasHapus
avatar

harus diparse dulu biar muncul

BalasHapus
avatar

Tinggal pasang aja [url="http://saeful13.blogspot.com/2013/08/memasang-syntax-highlighter-pada-blog.html"]Syntax Highlighter[/url] terus ganti aja CSS nya pake CSS punya saya. Kalau mau membatasi tinggal tambahkan kode overflow:auto;max-height:200px.

BalasHapus

Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode pendek, gunakan tag <i rel="code"> ... KODE ... </i>
• Untuk menyisipkan kode panjang, gunakan tag <i rel="pre"> ... KODE ... </i>
• Untuk menyisipkan catatan, gunakan tag <b rel="quote">.. TEKS ... </b>
• Untuk menyisipkan gambar, gunakan tag <i rel="image"> ... URL GAMBAR ... </i>

Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar

Konversi Kode OOT

About | Contact | Forum | Sitemap | Privacy
© Copyright 2013 Saeful13 | Asuransi Kesehatan Terbaik Indonesia - All Rights Reserved