Cara Nomor Komentar Di Blogger / Blogspot

Blogger ini hack akan menunjukkan kepada Anda bagaimana untuk menambahkan komentar count di dalam gelembung pidato, sehingga Anda & pembaca Anda dapat menggunakan nomor untuk menyebutkan atau titik untuk komentar tertentu pada salah satu posting Anda dan selain ini, bisa juga meningkatkan tampilan dan nuansa blog Anda. 

Catatan: ini bekerja dengan   blogger sebelumnya sistem komentar, jadi jika Anda ingin menambahkan hack ini, Anda harus menghapus pertama komentar Blogger threaded. Pelajari di sini Bagaimana menghapus komentar Blogger berulir 

UPDATE! Sekarang Anda dapat menambahkan komentar gelembung dalam komentar berulir Anda juga. Bacatutorial ini: 
Cara Tambah Komentar bernomor Dalam Threaded Comments 

 Bagaimana menambahkan komentar bernomor di blog Blogger / Blogspot kami 

. Langkah 1 Pergi ke Dashboard - Template - Edit HTML (klik pada tombol Lanjutkan, jika diperlukan) 

Langkah 2. Pilih "Expand Template Widget" (membuat cadangan) 

. Step 3 Sekarang cari (CTRL + F) kode berikut pada template anda: 

 <b:loop values='data:post.comments' var='comment'>

. Langkah 4 Segera di atas / sebelum, paste kode ini: 

 <script type='text/javascript'> var CommentsCounter = 0; </ script>

Langkah 5 Cari kode ini.: 

 <data:commentPostedByMsg/>

Langkah 6 Dan langsung di bawah / setelah, copy dan paste ini.: 

 <-! Komentar-count-starts ->
<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter = CommentsCounter +1;
document.write (CommentsCounter)
</ Script>
</ A>
</ Span>
<-! Komentar-count-stop ->

. Langkah 7 Cari (CTRL + F) tag ini dalam template: 

 </ Head>

. Langkah 8 Paste kode ini tepat di atas / sebelum: 

 <-! Komentar-count-starts ->
<style type="text/css">
. Komentar-nomor: link, komentar-nomor:. Visited {
warna: hitam penting;!
text-decoration: none penting;
background: no-repeat;
width: 50 px; / * ukuran gambar-lebar * /
height: 48 px; / * ukuran gambar-height * /
float: right;
display: block;
margin-right: 5px;
margin-top: 15px-; / * posisi komentar-counter * /
text-align: center;
font-family: 'Century Gothic', 'Lucida Grande', Arial, Helvetica, Sans-Serif;
font-size: 15px;
font-weight: normal;
}
. Komentar-nomor:. Hover, komentar-nomor: active {
color: # 1BA0E1 penting;
text-decoration: none penting;
}
</ Style>
<-! Komentar-menghitung-stop-http :/ / helplogger.blogspot.com-->

Catatan: 

• Untuk mengubah komentar gelembung, mengganti teks merah dari atas dengan alamat email anda
• Untuk mengubah warna angka, mengganti teks biru dengan nilai hex warna Anda

Komentar Bubbles 

Untuk memilih komentar bubble, klik kanan pada gambar dan pilih "Copy Image Address / Location": 





PENTING: Anda bisa menggunakan gambar apapun bukan yang terkait dalam kode di atas (STEP 8) tapi setelah itu, Anda harus mengubah nilai ukuran (lebar dan tinggi), sehingga angka-angka dalam gelembung harus disesuaikan dengan benar. 

Langkah 9. Simpan template ... dan menikmati komentar Anda:] 

Anda juga mungkin tertarik pada tutorial ini dari kategori yang sama: 
Cara Tambah Komentar gelembung ke Blogger Posting Judul .

Cara Menambah Emoticon / Smileys Di Blogger Komentar

Emoticon / Smileys adalah cara yang bagus untuk membuat diskusi lebih menarik dan menyenangkan, sehingga sangat disayangkan bahwa Blogger tidak mendukung mereka. Tutorial ini akan menunjukkan beberapa langkah sederhana tentang cara untuk menambahkan beberapa emoticon yang sangat lucu yang disebut Kolobok ke Blogger / Blogspot komentar Anda, sehingga Anda dan pengunjung blog Anda akan dapat memiliki waktu yang menyenangkan bersama-sama. 

Sekarang tersedia untuk ulir sistem komentar juga! 

DEMO

Cara Tambah Kolobok Smileys Di Blogger Komentar 

. Langkah 1 Pergi ke Dashboard - Template - Edit HTML - Lanjutkan 

Langkah 2. Expand Widget Template (membuat cadangan) 

Langkah 3 Cari (CTRL + F) untuk tag ini.: 

 </ Body>

. Langkah 4 Copy dan paste tepat di atas itu, kode ini: 

• Untuk sistem komentar sebelumnya (komentar tanpa opsi jawaban)

 <-! Kolobok-smiley ->
<script src='http://helplogger.googlecode.com/svn/trunk/[helplogger.blogspot.com]smileys.js' type='text/javascript'/> <noscript> <href = 'http:/ 'target =' / helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html _blank "> <span style='font-size: x-small;'> Tambahkan emoticon </ span> </ a> </ noscript>
<-! Kolobok-smiley ->

• Untuk sistem komentar berulir (komentar dengan opsi jawaban)

 <script src='https://helplogger.googlecode.com/svn/trunk/kolobok threaded.js' type='text/javascript'/>

Catatan: mengabaikan langkah 5-8 jika Anda menggunakan komentar berulir! 

. Langkah 5 Sekarang menemukan potongan kode ini: 

 <b:loop values='data:post.comments' var='comment'>

Langkah 6 Paste kode berikut tepat di atasnya.: 

 <div id='smileys'>

Langkah 7. Cari kode berikut (perhatikan dengan teliti, itu harus berada di suatu tempat di bawah kode dari langkah 5) 

 </ B: lingkaran>

. Langkah 8 Paste tag berikut hanya setelah itu: 

 </ Div>

. Langkah 9 Sekarang cari kode ini: 

• Untuk sistem komentar sebelumnya:

 <data:blogTeamBlogMessage/>

Catatan: jika Anda akan menemukan seperti 4 kali, berhenti untuk 2 satu! 

• Untuk sistem komentar berulir:

 <div class='post-footer-line post-footer-line-3'>

Langkah 10 Dan tambahkan kode ini hanya setelah itu.: 

 <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'>
/ / <! [CDATA [
fungsi moreSmilies () {
. document.getElementById ('tersenyum-lebih') mungkin dikenakan biaya 'inline';
document.getElementById ('tersenyum-ubah'). innerHTML = '<a href="javascript:lessSmilies()"> <div style="font-size:small; font-weight:bold;color:#000000;"> Sembunyikan Emoticons / <a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html"> TambahkanEmoticons </ div> </ a> </ span > ';
}
fungsi lessSmilies () {
. document.getElementById ('tersenyum-lebih') mungkin dikenakan biaya 'tidak ada';
document.getElementById ('tersenyum-ubah'). innerHTML = '<a href="javascript:moreSmilies()"> <div style="font-size:small; font-weight:bold;"> Tampilkan Emoticons </ div > </ a> ';
}
/ /]]>
</ Script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='http://4.bp.blogspot.com/-k4ujC23cSgI/UTIq7eUkmuI/AAAAAAAABAQ/YUNL9_RhDB0/s1600/smile3.gif'/> :)
<img src='http://2.bp.blogspot.com/-XSBJ7zBZKZs/UTIrT-hMYyI/AAAAAAAABAY/6B26_8Ttwj4/s1600/sad.gif'/>: (
<img src='http://2.bp.blogspot.com/-Ph2wxEvy2mc/UTIr8-fdHjI/AAAAAAAABAo/3use2PsPhMA/s1600/taunt.gif'/> :))
<img src='http://3.bp.blogspot.com/-pcE-4ot-gjk/UTIsLRff6SI/AAAAAAAABAw/LYvZ8__88Ak/s1600/cry2.gif'/>: ((
<img src='http://1.bp.blogspot.com/-lNNTReQVc0A/UTIrjDhVLAI/AAAAAAAABAg/BsVMYnr54pI/s1600/rofl.gif'/> =))
<Img
<Img
<img src='http://1.bp.blogspot.com/-gG_Wn6D6Ux4/UTIyqFyfKbI/AAAAAAAABCo/qEmU8s8ndVI/s1600/tongue.gif'/>: P
<img src='http://3.bp.blogspot.com/-Zb5g0OWHx4c/UTIsuPLt90I/AAAAAAAABA4/cmP1ltBmVF0/s1600/shock.gif'/>:-O
<img src='http://1.bp.blogspot.com/-TSIzPWeGBwk/UTI0S-nw5tI/AAAAAAAABDQ/xyHPCFZH4fI/s1600/think.gif'/>: -?
<Img
<Img
<img src='http://3.bp.blogspot.com/-qlyn_deOhFw/UTIzY8aRgqI/AAAAAAAABC4/pfSojMdD33s/s1600/doh.gif'/> d (
<Img
<Img
<img src='http://4.bp.blogspot.com/-veVoDPEc7I4/UTIv9wCS0jI/AAAAAAAABCQ/4c5FgCHAiU4/s1600/help.gif'/> h-(
<img src='http://2.bp.blogspot.com/-_ttAcnBbAaw/UTIvKtxfWvI/AAAAAAAABCA/X2JLEShhOQU/s1600/good.gif'/> g-)
<img src='http://2.bp.blogspot.com/--o9jZ1nMcec/UTIuyCBgS_I/AAAAAAAABB4/Jf03oz5yKrU/s1600/beee.gif'/> 5-p
<img src='http://2.bp.blogspot.com/-6-BTJcVpwY0/UTIvhF_PL-I/AAAAAAAABCI/SS-LDADTSls/s1600/yahoo.gif'/> y-)
<img src='http://3.bp.blogspot.com/-khAwhIYbgvQ/UTItD_PfNyI/AAAAAAAABBI/HMpRMQh5Uak/s1600/crazy.gif'/> c-)
<Img
<Img
<img src='http://2.bp.blogspot.com/-Mc5ed3Ymk7s/UTI1GIXMAMI/AAAAAAAABDg/PyDOfoXgsl0/s1600/cheer.gif'/> w-)
<img src='http://2.bp.blogspot.com/-JOgaMRI61Jk/UTItsGc5KdI/AAAAAAAABBY/6UDCabfZQbg/s1600/hi+2.gif'/>:-h
<Img
</ Span>
<span id='smiley-toggle'> <a href='javascript:moreSmilies()'> <div style='font-size:small;font-weight:bold;'> Tampilkan Emoticons <img
</ Div> </ b: if>

Catatan: Abaikan langkah 11-12 jika Anda menggunakan komentar berulir! 

Langkah 11. Akhirnya, cari kode ini 

 ]]> </ B: skin>

. Langkah 12 Tambahkan satu di bawah ini, tepat di atas]]> </ b: skin>

 . Emoticon {-moz-background-clip:-moz-awal;-moz-background-asal:-moz-awal;-moz-background-inline-kebijakan:-moz-awal; text-align: left; width: 400 px;}
.. Emoticon, emoticon a: hover {margin-left: 20px; text-decoration: none;}

Catatan: Jika Anda ingin mengubah ukuran wadah emoticon, mengedit kode merah. 

Langkah 13. Simpan Template dan Anda sudah selesai. Nikmati!

Google Translate Widget Dengan Flags Untuk Blogger

18Google Translate Widget Dengan Flags Untuk Blogger

Google Translate Widget untuk Blogger memungkinkan pengunjung untuk menerjemahkan situs atau blog dalam bahasa mereka sendiri.
Widget ini juga otomatis mendeteksi bahasa blog Anda dan kemudian menerjemahkannya ke bahasa yang dipilih pembaca.

Ini mendukung 12 bahasa yang berbeda:
Inggris, Perancis, Jerman, Spanyol, Italia, Belanda, Portugis, Rusia, Jepang, Korea, Arab dan Cina.

Cara Tambah The G oogle Translate Widget Untuk Blogger

Langkah 1. Pergi ke Blogger Dashboard >> Layout dan klik "Add A Gadget" link

Langkah 2. Dari pop-up window, gulir ke bawah dan pilih HTML / JavaScript

Langkah 3 Paste kode di bawah di kotak kosong.:

<script type="text/javascript">
fungsi showHide (SHID) {
if (document.getElementById(Shid)) {
if (document.getElementById(Shid + '-show'). style.display! = 'none') {
document.getElementById (Shid + '-show') mungkin dikenakan biaya 'tidak ada'.;
document.getElementById(Shid) mungkin dikenakan biaya 'blok'.;
}
else {
document.getElementById (Shid + '-show') mungkin dikenakan biaya 'inline'.;
. document.getElementById(Shid) mungkin dikenakan biaya 'tidak ada';
}
}
}
</ Script>

<style>

. Google_translate img {
margin: 10px 20px 0px 20px;
height: 24px;
width: 24px;
}
. Google_translate: melayang-layang img {
filter: alpha (opacity = 0,30);
-Moz-opacity: 0.30;
opacity: 0.30;
border: 0;
}

. Lebih {
display: none;
a.showLink, a.hideLink {
text-decoration: none;
color: # 0880C4;
padding-left: 18px;
background: transparent ('down.gif') no-repeat left;}

a.hideLink {
background: url transparan ('up.gif') no-repeat left;
color: # 0880C4;}

a.showLink: hover, a.hideLink: hover {
color: # 0880C4;
}

</ Style>

<div>

<Target class = "google_translate" href = "#" = "_blank" rel = "nofollow" title = "English" return false; "> <img alt =" English "border =" 0 "align =" absbottom "title =" English "height =" 24 " style = "cursor: pointer; margin-right: 8px" width = "24" /> </ a>

<Kelas = "google_translate" href = "#" target = "_blank" rel = "nofollow" title = "French" return false; "> <img alt =" French "border =" 0 "align =" absbottom "title =" French "height =" 24 "src =" http://2.bp.blogspot.com/-aklFaq6pPeQ/ T5xOV1mPbcI/AAAAAAAAARg/CcBmt1ptN88/s1600/France.png "style =" cursor: pointer; margin-right: 8px "width =" 24 "/> </ a>

<Kelas = "google_translate" href = "#" target = "_blank" rel = "nofollow" title = "Jerman" return false; "> <img alt =" German "border =" 0 "align =" absbottom "title =" German "height =" 24 "src =" http://1.bp.blogspot.com/-nX0ktPsJQTA/ T5xOMiiOGQI/AAAAAAAAARY/VXhAPARvh9E/s1600/Germany.png "style =" cursor: pointer; margin-right: 8px "width =" 24 "/> </ a>

<Target class = "google_translate" href = "#" = "_blank" rel = "nofollow" title = "Spain" return false; "> <img alt =" Spain "border =" 0 "align =" absbottom "title =" Spain "height =" 24 "src =" http://4.bp.blogspot.com/-QPXkbtHOD4c/ T5xODxO-FVI/AAAAAAAAARQ/1jye5k8T0DI/s1600/Spain.png "style =" cursor: pointer; margin-right: 8px "width =" 24 "/> </ a> <a href =" # "id =" contoh- acara "class =" showLink "
onclick = "showHide ('contoh'); return false;"> </ a>
<div id="example" class="more">
<Kelas = "google_translate" href = "#" target = "_blank" rel = "nofollow" title = "Italia" return false; "> <img alt =" Italia "border =" 0 "align =" absbottom "title =" Italia "height =" 24 "src =" http://3.bp.blogspot.com/-0QwKU5U8K2k/ T5xN5VZK2tI/AAAAAAAAARI/SvXac8-EQEg/s1600/Italy.png "style =" cursor: pointer; margin-right: 8px "width =" 24 "/> </ a>

<Kelas = "google_translate" href = "#" target = "_blank" rel = "nofollow" title = "Belanda" return false; "> <img alt =" Belanda "border =" 0 "align =" absbottom "title =" Belanda "height =" 24 " style = "cursor: pointer; margin-right: 8px" width = "24" /> </ a>
<Kelas = "google_translate" href = "#" target = "_blank" rel = "nofollow" title = "Rusia" return false; "> <img alt =" Rusia "border =" 0 "align =" absbottom "title =" Rusia "height =" 24 " style = "cursor: pointer; margin-right: 8px" width = "24" /> </ a>

<Kelas = "google_translate" href = "#" target = "_blank" rel = "nofollow" title = "Portugis" return false; "> <img alt =" Portugis "border =" 0 "align =" absbottom "title =" Portugis "height =" 24 "src =" http://2.bp.blogspot.com/-IVx5Fq_02dE/ T5xNZIbiHzI/AAAAAAAAAQw/dvI6mI6z3Dw/s1600/Brazil.png "style =" cursor: pointer; margin-right: 8px "width =" 24 "/> </ a>
<br />
<Kelas = "google_translate" href = "#" target = "_blank" rel = "nofollow" title = "Jepang" return false; "> <img alt =" Jepang "border =" 0 "align =" absbottom "title =" Jepang "height =" 24 "src =" http://2.bp.blogspot.com/-O932f9wBvk4/ T5xNO_hx5uI/AAAAAAAAAQo/n8-iF7S_R8A/s1600/Japan.png "style =" cursor: pointer; margin-right: 8px "width =" 24 "/> </ a>

<Kelas = "google_translate" href = "#" target = "_blank" rel = "nofollow" title = "Korea" return false; "> <img alt =" Korea "border =" 0 "align =" absbottom "title =" Korea "height =" 24 " style = "cursor: pointer; margin-right: 8px" width = "24" /> </ a>

<Kelas = "google_translate" href = "#" target = "_blank" rel = "nofollow" title = "Arab" return false; "> <img alt =" Arab "border =" 0 "align =" absbottom "title =" Arab "height =" 24 " style = "cursor: pointer; margin-right: 8px" width = "24" /> </ a>

<Target class = "google_translate" href = "#" = "_blank" rel = "nofollow" title = "Cina Sederhana"return false; "> <img alt =" Cina Sederhana "border =" 0 "align =" absbottom "title =" Cina Sederhana "height =" 24 "src =" http://1.bp.blogspot.com/- eXup49w042c/T5xMxliSlmI/AAAAAAAAAQQ/v9efq8I4TI0/s1600/China.png "style =" cursor: pointer; margin-right: 8px "width =" 24 "/> </ a>
<p> <a href = "#" id = "contoh-hide" class = "hideLink"
onclick = "showHide ('contoh'); return false;"> Sembunyikan / </ a> <a href="http://helplogger.blogspot.com"> <font size="1px"> Dapatkan widget ini </ font> </ a> </ p>
</ Div>
</ Div>

Langkah 4. Sekarang klik Simpan

Dan Anda selesai! Nikmati (: 

Cara Hapus Menampilkan Posts Dengan Label Di Blogger

Untuk setiap standar Blogger tata letak, yang " Menampilkan posting dengan label "pesan muncul di atas posting setiap kali Anda mengklik link label. Seperti itu pesan yang cukup berguna dan mengganggu, banyak orang ingin memilikinya dihapus. Jika itu keinginan Anda, cukup ikuti tutorial di bawah ini: 

Menghapus "Menampilkan posting dengan label ... menampilkan semua posting" 

. Langkah 1 Pergi ke Dashboard - Template - Edit HTML (jika perlu, klik tombol Lanjutkan) 

. Langkah 2 Klik suatu tempat di dalam kode template, kemudian cari - menggunakan CTRL + F - kode ini: 

 <b:includable id='status-message'>

Setelah Anda menemukannya, klik tanda panah ke samping sebelahnya, untuk memperluas sisa kode. 

Screenshot:

. Langkah 3 Berikut ini adalah kode yang Anda butuhkan untuk menghapus - bersama dengan yang pertama, juga: 

 <b:includable id='status-message'>
blog.pageType cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</ Div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'> <data:navMessage/> </ div>
</ Div>
</ Div>
</ Div>
<div style='clear: both;'/>
</ B: if>
</ B: includable>

Screenshot

Langkah 4 Ganti dengan yang satu ini.: 

 <b:includable id='status-message'>
blog.pageType cond='data:navMessage'>
<div>
</ Div>
<div style='clear: both;'/>
</ B: if>
</ B: includable>

Langkah 5. Simpan template itu. Sekarang melihat blog Anda dan klik pada beberapa label .... tidak boleh ada kotak lagi.

Cara Tambah Sebuah Komentar Hitungan Gelembung Untuk Blogger Posting Judul

Sebuah komentar gelembung dengan saat ini jumlah komentar yang ditampilkan pada setiap judul posting blogger bisa membuat blog Anda lebih menarik. Hal ini tidak hanya meningkatkan komentar Anda menghitung tapi juga memungkinkan pengunjung Anda untuk melihat apa yang tulisan paling populer di blog Anda. Ketika sebuah tulisan memiliki banyak komentar, maka komentar gelembung akan menunjukkan popularitas posting Anda untuk pembaca dan pengunjung sehingga mereka mungkin akan lebih tertarik untuk membacanya. 

Jadi mari kita mulai menambahkan hal ini: 

. Langkah 1 Pergi ke Dashboard - Template - Edit HTML (klik pada tombol Lanjutkan, jika diperlukan) 

Langkah 2. Pilih "Expand Template Widget" (membuat cadangan) 

. Langkah 3 Cari - menggunakan CTRL + F - potongan kode berikut pada template anda: 

 ]]> </ B: skin>

Langkah 4 Tambahkan kode di bawah ini tepat di atas]]> </ b:. Skin>: 

 . Komentar-gelembung {
float: right;
width: 48px;
height: 48px;
background:
background-repeat: no-repeat;
font-size: 18px;
margin-top: 15px-;
margin-right: 2px;
text-align: center;
}

. Langkah 5 Sekarang cari kode ini: 

 <b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Catatan: Jika Anda tidak dapat menemukannya, cari kode ini sebagai gantinya: 

 <b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>

Langkah 6 Dan tambahkan kode ini segera setelah itu.: 

 blog.pageType cond='data:post.allowComments'>
<A class = 'comment-bubble' expr: 'Data: post.addCommentUrl' href = expr: onclick = 'Data: post.addCommentOnclick'style = 'color: # ffffff; font-size: 18 px; font-weight: bold; "> <data:post.numComments/> </ a>
</ B: if>

Catatan: 

• untuk mengubah warna dari jumlah komentar, ganti # ffffff dengan nilai hex warna Anda;
• untuk mengubah ukuran font, kenaikan / penurunan nilai 18 px;

Langkah 7. Preview template Anda dan jika semuanya ok, klik Save Template. 

Komentar Bubbles 

Anda dapat memilih salah satu gambar di bawah ini - klik kanan pada gambar yang diinginkan dan pilih "Copy Image Address / Location", lalu ganti kode yang berwarna merah dari langkah 3 dengan alamat yang baru saja disalin. 




Itu saja! Nikmati (: