Cara dan Tips Memasang Reply di Komentar Blog

Pada postingan ini saya akan menunjukkan cara memasang opsi reply di form komentar blogger. Seperti yang kita ketahui, tool ini sangat berguna untuk mempermudah pemilik blog maupun pengunjung dalam membalas komentar. 

Kalau pada platform Wordpress tool ini sudah otomatis terpasang dalam form komentarnya. Lain halnya dengan platform blogger. Meskipun demikian, anda juga dapat memasang opsi reply di blog blogspot anda hanya dengan sedikit penambahan kode pada template blog anda.

Bagi anda yang ingin mengetahui bagaimana cara kerjanya, langsung saja praktek di blog ini karena saya sudah memasang opsi reply di form komentar.

Nah bagi anda yang tertarik untuk memasang opsi reply di form komentar blog anda. Berikut tutorialnya:

1. Login ke menu dashboard Blogger. Buka menu Design -> Edit HTML

2. Beri centang pada 'Expand Widget Templates'

3. Cari kode

<data:commentPostedByMsg/>

atau

<data:comment.timestamp/>

4. Letakkan kode berikut diatasnya

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BloggerIdAnda&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=yes, width=400, height=450&quot;); return false;'>[Reply Comment]</a></span>

Ganti tulisan yang berwarna merah dengan id blog anda. Untuk mengetahui id blog anda klik menu Designlalu perhatikan digit angka pada address bar anda.


Jika anda ingin mengganti kata reply yang muncul dalam form komentar, edit tulisan yang berwarna hijau.

5. Kalau sudah simpan template anda dan lihat hasilnya.

Agar lebih menarik anda juga bisa mengganti tulisan reply dengan icon gambar. Caranya, ganti tulisan berwarna hijau dengan <img src='url-gambar'/>

Jangan lupa ganti url-gambar dengan alamat icon gambar anda. Misal:http://lh4.ggpht.com/_15FopxVONSo/TEF6-vtUqHI/rcwCiaUc-Os/reply.png

Sebagai contoh, berikut saya sediakan beberapa model icon reply. Kalau tertarik, silahkan upload icon gambar tersebut ke image hosting anda atau copy saja alamat gambar icon disamping untuk menggunakannya.

 -->https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGmi_C_a-ptJsdFXNNkaM4LC3bCp52b29oZvu2tSZP2nG93TEOEb6yRC_L_XV7ShT7e_wfXMg-qZa8USiC9GeAiOy1tdomvseTMIXCHrzUDL5amI_4zkPRA_e6SvivpHDUgWrRAsivn70p/

 --> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix06MEXFi6mBQ1BPTAPyCg15eRxRKmq7h4kKLV-cqat3enpfbGSX7cYb0g5s9-kSZs0O4sCTTneljwW0bONfyGUU6jdnYqXU6qVfY_TlkeAdOorsqJoNMnlN_r6hw2wK4geepaXhH8mgaU/

 --> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9CQYe5XWMEVOeml6STvqyQW0ubYaVEOQJ4fEjFxYZNTqUk71wsDw0ueTQsqaJOPueoj3VGDU9v2y10cY8KVo7Y-V-aKUxubq8xY0Bj-xVK3ub8gfg6hJpS_xgfwOsqO0-jMvnHOlq18b/

 --> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpujWBC9xOJb8fO2pUP85eIA5XhMaILaK2iEtpwEMc0I0n2RU2A1ajCdkp2HpgS_fGxubDzq8KAE_2l1GR8IzgYxCDAqHPJmtLrhp2XmZLGC5SDGZ6VidGf7V09ILuRabfr3uWY9ADWre5/

 --> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipsCH9pBC63KqNFwceI867SEKghK1ipqyjEVIJBD9u8MzgmTxHa6Mq9h5DzWkfU53MiI2xpuZomF93dfhBNwSOO0AaVF8LXNPLzV2ojsjKHd_6jUpLvviFhRZfDyXOvx7QmuLM-k_gf5R1/

Selamat mencoba. Semoga bermanfaat.

Read More

Cara membuat permalink

Tips dan Cara Membuat Permalink di Blog - Apa kabar sobat blogger semua!!! Kali ini saya akan mempostingan jawaban atas pertanyaan sobat blogger tentang cara membuat / memasang permalink di blogspot sama persis dengan permanen link di blog ini. Sekedar informasi, postingan sebelumnya adalah cara membuat logo. Sebelum kita ke tkp ada baiknya saya jelaskan sedikit dulu tentang Permalink.

Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog sobat. Biasanya sobat yang newbie menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel, sebelum sobat tahu bahwa namanya adalah permanen link.

Permalink kali ini saya sudah di lengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milik sobat, juga di lengkapi dengan url artikel yang auto drag ( otomatis ter blok ) . Contohnya seperti di bawah ini...

Sobat yang tertarik dengan widget yang satu ini, silahkan ikuti tutorial berikut.

Cara Membuat Permanen Link di Blog

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
3. Letakkan kode berikut di atas kode ]]></b:skin>

.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

4. Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya. 

<!-- Permalink Bakalan City -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
<div class='kontainer'>
<img alt='Suprayitno bakalan city' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgma1v_mUXiFk5S0Cng5po-qnrEX5UrpkyTj6tCMJIv4DV1BiShXXtNIha-SKJEEH7_4Ctbhy2DM-wtMjOExOx8WpI3betI4T4H0AIhUA6h4o3clzOo64-l06qhzyVNxznB1In53NWnpOY/s1600/559457_366792523361390_100000919374428_1083481_1160803163_n.jpg'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://bakalan-tlogorejo-city.blogspot.com/search/label/Tips%20dan%20cara%20Blogspot' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink Bakalan City -->

5. Klik save dan lihat hasilnya.

Tambahan :

• Ganti kode yang berwarna dengan Url foto / gambar milik sobat
• Sesuaikan angka yang berwarna  dengan ukuran template blog sobat ( ukuran textarea )
• Semoga Artikel Ini Bermanfaat.......
• Terima Kasih

Sumber : Ibaddroid.blogspot.comIbaddroid.blogspot.com

Read More

Tips dan Cara Membuat / Memasang Burung Twitter Terbang di Blog

Tips dan Cara Membuat Burung Twitter Terbang di Blog - Lebih suka mana?? ngetweet apa ngeblog?? kalo ane sih kedua - duanya.. Kali ini ane akan kasih tahu bagaimana cara memasang burung twitter terbang atau melayang - layang atau mondar - mandir di blog sobat. Bagi sobat yang tertarik untuk memasang burung twitter terbang atau melayang - layang ini, silahkan ikut tutorial berikut .



1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript

Masukkan Script berikut ke dalam kotak yang telah di sediakan.

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://tateluproject.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYfSxqd7qwi3LP7mK7M_II8W3bnU0JC92TSUcB5ZOx9YU3IKdKLARC5A4Adrjg7j1M2HMqyvOrjxUrrzZuwMAwN5vc9v8fYzfoRFhnF-FkgPshu3Wo-YF7P8DENAhEzt6vC1tiFeh12W8/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/joko_love";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

3. Klik save / simpan.

Tambahan:
Ganti tulisan yang berwarna merah dengan warna icon twitter kesukaan sobat.

Warna Kuning


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4qZepbUVKpAFK6IBrdulVr9_U5puqG-KkWi34dia5sHach5_X-bOZx10-h3-V4ffthcEhFy6mXfJHwj2OfbkXUvOUiGkz39gcMASzY7X9TrsIwtU-iso4mI7yoiqDfbkSP94SATJ1Es/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRZCm4c1Z-MWUtUQYq7C-gDMlizNkC0uUoESV8HpsNwTJbnZUJuRfGA6hZkSzXiUAxW045sT3_vFPqXVc_cJN69t6wNVgJsyM_g1Q97Oakz3sq_zX0leMJv1uZ7QJP2GHZcWwyf0CC510/s1600/black+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvAGkklUwhO2ZVbaXeKKXVdf1VrDpKeP_E0lV58nckNfcvV2DcEpowTtBzOusPDvOAf3P3zEvdTsnPswn6HhoQaimwtDzEBRF82RSArKABAnV7_V1M9q2mIjeNvFqIx6HVO6DfuCUbQs/s1600/Blue+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqf7Hls83eM5KcZYPZcyQXZ0XQ7kae2oMBd_KJC509c-EDMCUbIyYRO3py2BCrhaE0_IMhZ80TxivZaQ4_atgcjhDZ_tWuDEMy1DJEBQcmJO3hPG75bmeEcnPn194MfQwmrF8q08IioM/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNPCXPq0RqsxwAHdNoxTURKpyf04J5TB3u6HtBxC4YkGz0bqP69q0TZaOF2br0hixMma7w5jNPXWk-y9F9cbVIqUHvwK_VBqIc5V3LKRLvN2cKupS4vbfaZO5bv3Wc73ybsZVlHf0B3xg/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm0XUXmVDB2cTNw4rRZBZmAHaoVJ_Ku16tiBWPcEXpsK3SeR92_j0391LoyJHr1Odg3OBf82k9L9seIieQtQHqs3X8p0THiOuxYOBfmtxyo-HyHguNZWs742iKeczNFrlNoVi52BFefo4/s1600/purple+bird.png

Warna Putih


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJvUWOGC1DXaRCiWmolhVTiCwW3sbOk8GAJuZ3M3DCBwaem6XYwOkqVIvGchDl7XoBVncWrJSl3fN0FPf2ye2zi9HshBXDGGaiFONSwANWcqCOC1ebcDGBX1xfmh-6AcFfWcdOubdc6c/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbePYv4hFYH7Cf8tiKis9fsR6MM0zOnDEI1n9NMH-B0wtGwrSQ2X0Mf-JFprUpLTMpmHZMWA3eUf-wz116yAmbH6v-GcVjazk5oVY2ryBg3vlvmGovRGqMIwB9tO7M4f-GUUozqrdZkNI/s1600/red+bird.png

Ganti Tulisan yang berwarna biru dengan username twitter sobat.

Semoga membantu Dan bermanfaat Untuk Anda......

Read More

Cara Pasang Kode Warna Di blog

HTML Color Codes adalah color tool atau tool warna yang digunakan untuk menemukan warna HTML untuk website atau blog. Dengan kode warna HTML ini, sobat blogger dapat mengatur warna latar belakang blog sobat, warna teks, sel-sel dalam tabel dan banyak lagi. Jika sobat blogger bertanya-tanya "Apakah ini kombinasi aneh antara huruf dan angka memiliki makna?" Yah jawabannya adalah "Ya". Setiap kode HTML berisi simbol "#" dan 6 huruf atau angka. Jumlah ini dalam sistem angka heksadesimal. Sebagai contoh "FF" dalam heksadesimal mewakili nomor 255 di Desimal.

Mungkin sobat blogger bingung dengan penjelasan di atas. Jadi, sobat blogger langsung saja menggunakan tool warna di bawah ini. Untuk menggunkan tool ini, sobat klik pada bagian warna yang sobat inginkan, lalu sobat perhatikan kode yang muncul disebelahnya. Itu adalah kode dari warna yang sobat klik.

Kalau sobat blogger suka dengan Tool HTML Color Code ini, sobat blogger tinggal Copy Paste kode di bawah ini di tempat yang sobat blogger inginkan (Area Posting atau kolom widget).

<center><div style="text-align: center;"> <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"> <param value="sameDomain" name="allowScriptAccess" /> <param value="http://www.2createawebsite.com/build/col.swf" name="movie" /> <param value="high" name="quality" /> <param value="#ffffff" name="bgcolor" /> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="480" align="middle" height="480"></embed> </object></div> </center> 

Read More

Membuat Border dan Modifikasinya

Untuk memberikan kesan lebih indah dalam warna dan tampilan blog khususnya kode HTML/Script yang akan diletakan didalam posting pada saat menulis artikel, Anda bisa meletakan kode Script di dalam kotak dengan border dan warna background yang berbeda sesuai dengan warna pilihan, baik itu dengan border yang garis tipis, tebal atau garis putus-putus.

Ada beberapa jenis border yang saya ketahui yaitu :

1. Ridge Border
2. Groove Border
3. Solid Border
4. Insert Border
5. Outset Border
6. Double Border
7. Doptted Border
8. Dashed Border

Langkah membuat dengan border sangat mudah

• Copy kode Script dibawah ini
• Kemudian letakan pada posting Anda

Contoh Dashed Border

 <div style="border: 2px #006400 dashed; padding: 10px; background-color: #F2F5A9; text-align: left;"> TEKS ANDA DISINI.. </div> 

Contoh Ridge Border 

 <div style="border: 5px #006400 ridge; padding: 10px; background-color: #F5A9D0; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Dotted Border

 <div style="border: 2px #006400 dotted; padding: 10px; background-color: #FFFF00; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Double Border

 <div style="border: 3px #006400 double; padding: 10px; background-color: #A9F5A9; text-align: left;">  TEKS ANDA DISINI..  </div> 

Contoh Groove Border

 <div style="border: 5px #006400 groove; padding: 10px; background-color: #F2F5A9; text-align: left;">  TEKS ANDA DISINI.. </div> 

Contoh Solid Border

 <div style="border: 3px #1627A7 solid; padding: 10px; background-color: #61FFF6; text-align: left;">  TEKS ANDA DISINI..  </div> 

Demikian adalah beberapa sample border ala Trik Bloger. Semoga Bermanfaat.

Read More