ads

Jumat, 03 Juni 2011

Cara Pasang Tombol Share ke Social Bookmarking

Salah satu cara meningkatkan pengunjung blog atau website adalah dengan mendaftarkan artikel-artikel anda ke dalam Situs Social Bookmarking , Social bookmarking Network , Favourite Bookmarking dan lain sebagainya. Contohnya mendaftarkan posting anda ke digg, stumbleupon, ma.gnolia, delicious, furl, technorati, simpy, spurl, reddit, mybloglog, blogcatalog, dan situs social bookmarking lainnya. Saya akui cara ini sangat efektif untuk meningkatkan pengunnjung blog anda. Selain itu situs-situs social networking (situs pertemanan) seperti facebook, twitter, friendster dan lain-lain juga dapat dijadikan sebagai media promosi yang juga dapat meningkatkan pengunjung blog anda.
Dan pada trik kali ini saya akan menjelaskan bagaimana memasang tombol sharing dan tombol submit ke social bookmarking ke dalam blog. Dengan sobat blogger memasang tombol submit/share ke situs social bookmarking seperti ini, akan memudahkan siapapun untuk share artikel/posting sobat langsung ke media bookmarking bila dirasa bermanfaat bagi yang lainnya, ini akan sangat bermanfaat untuk meningkatkan reputasi dan akan meningkatkan pengunjung ke blog sobat. Tombol share/submit yang akan dibuat disini saya rasa sangat lengkap mulai dari facebook, twiiter, digg, stumbleupon, ma.gnolia, delicious, furl, technorati, simpy, spurl, reddit, mybloglog, blogcatalog, dan masih banyak lagi. Untuk tampilannya adalah sebagai berikut :

Nha jika sobat tertarik dan berminat memasang tombol tersebut, berikut saya akan jabarkan caranya memasang ke blog sobat, check it
1. Pertama, login dulu ke Blog sobat 
2. Masuk ke tab Rancangan (Design/Layout) -> Edit HTML
3. Klik pada Expand Widget Templates
4. Kemudian Carilah kode berikut ini
<data:post.body/>

atau

<p><data:post.body/></p>
(Note: Gunakan CTRL+F untuk mempermudah pencarian)
Kode ini biasanya ada 2 buah, pilihlah yang lebih bawah

5. Setelah ketemu, letakkan kode ini setelah kode <data:post.body/>

<div style='border-top:0px solid #ccc;border-bottom:3px solid #FE9A2E; padding:10px 0px 10px 0px;margin:15px 0px 7px 0px;width:100%;float:left;height:23px;'>
<div style='float:right;'>
<span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:&#39;63b83a98-def5-427f-ac7c-4b24bcff910d&#39;});</script>
</div>
</div>

6. Selesai, SAVE TEMPLATE anda dan lihat hasilnya

Note: Jika anda telah memasang readmore, tombol submit ini akan terlihat jika posting tampil fullpost

Selasa, 24 Mei 2011

Pasang Emoticon KASKUS di Kotak Komentar

Kembali lagi di trik-tipsnya blog-triks, kali ini saya akan memberikan trik seputar emoticon di kotak komentar (lagi). Ini adalah trik ketiga tentang Emoticon di kotak komentar, setelah 2 trik emoticon sebelumnya yaitu :
1. Pasang Emoticon Yahoo dan Emoticon Kucing
2. Pasang Emoticon Boy and Girl
Dan yang akan saya jelaskan sekarang adalah bagaimana Pasang Emoticon KASKUS di kotak komentar blog anda. Untuk Emoticon KASKUS begini ini penampakannya





Dengan banyak alternatif emoticon, semoga blog sobat jadi lebih rame dan ekspresif ya. Langsung saja yang pengen pasang emoticon KASKUS diatas, berikut ini langkah-langkahnya
1. Pertama,seperti biasa harus login blogger dulu, trus menuju ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>


<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/sundul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/jempol2.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/bingung.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/ngakak.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/hammer.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/najis.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/capede.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/s_sm_maho.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/takut.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/sorry.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/marah.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/ngacir2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/cewek.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/shakehand2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/malu.gif' alt='' width='40' class='smiley'/>");
b.item(i).innerHTML = _str;
}
}
}
a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'comment-body-author') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/sundul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/jempol2.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/bingung.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/ngakak.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/hammer.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/najis.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/capede.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/s_sm_maho.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/takut.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/sorry.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/marah.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/ngacir2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/cewek.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/shakehand2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://uniqueinterestingfacts.com/blog-triks/malu.gif' alt='' width='40' class='smiley'/>");

c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

4. Kemudian cari kode berikut ini :


<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>


5. Ketemu kan?Kalo sudah ketemu letakkan kode2 berikut setelah kode
<p class='comment-footer'>
(kalo ada dua buah kode diatas, pilih yang lebih dibawah)

<b><img src='http://uniqueinterestingfacts.com/blog-triks/sundul.gif' width='40'/>

:a:

<img src='http://uniqueinterestingfacts.com/blog-triks/jempol2.gif' width='40'/>

:b:

<img src='http://uniqueinterestingfacts.com/blog-triks/bingung.gif' width='40'/>

:c:

<img src='http://uniqueinterestingfacts.com/blog-triks/ngakak.gif' width='40'/>

:d:

<img src='http://uniqueinterestingfacts.com/blog-triks/hammer.gif' width='40'/>

:e:

<img src='http://uniqueinterestingfacts.com/blog-triks/najis.gif' width='40'/>

:f:

<img src='http://uniqueinterestingfacts.com/blog-triks/capede.gif' width='40'/>

:g:

<br/><img src='http://uniqueinterestingfacts.com/blog-triks/s_sm_maho.gif' width='40'/>

:h:

<img src='http://uniqueinterestingfacts.com/blog-triks/takut.gif' width='40'/>

:i:

<img src='http://uniqueinterestingfacts.com/blog-triks/sorry.gif' width='40'/>

:j:

<img src='http://uniqueinterestingfacts.com/blog-triks/marah.gif' width='40'/>

:k:

<img src='http://uniqueinterestingfacts.com/blog-triks/ngacir2.gif' width='40'/>

:l:

<img src='http://uniqueinterestingfacts.com/blog-triks/I-Luv-Indonesia.gif' width='40'/>

:m:


<img src='http://uniqueinterestingfacts.com/blog-triks/cewek.gif' width='40'/>

:n:

<img src='http://uniqueinterestingfacts.com/blog-triks/shakehand2.gif' width='40'/>

:o:

<img src='http://uniqueinterestingfacts.com/blog-triks/malu.gif' width='40'/>

:p:


</b>


6. Langkah terakhir dan terpenting adalah SAVE TEMPLATE

Kemudian coba akses blog sobat, lalu klik salah satu postingan, kalo di kotak komentar keluar emoticonnya,berarti sobat melakukan langkah2 tersebut dengan benar "MISSION COMPLETE".SELAMAT MENCOBA ya sobat semoga berhasil.

Catatan
@ Kadang-kadang ada beberapa template memiliki kode yang beda. Jika sudah melaksanakan cara2 di atas dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode pada templatenya berbeda atau bisa jadi karena mugnkin hosting untuk upload file emoticon dan javascriptnya sedang bermasalah.

Senin, 23 Mei 2011

Cara Membuat Spoiler di Blogger

Berjumpa lagi dengan blog-triks, kali ini saya akan memberitai eh memberitahu bagaimana cara membuat spoiler di blogger,saya tulis ini karena banyak pertanyaan lewat pesan facebook Setelah postingan saya Cara Membuat Stripe Bar Blogger saya kasih spoiler pada bagian akhirnya. Semua pasti sudah tahu apa itu spoiler kan? Spoiler itu kaya gini contohnya
Spoiler Contoh:

Ini adalah contoh spoiler



Diatas tadi adalah contoh spoiler, fungsi utama spoiler adalah mengurangi beban loading page, biasanya yang dimasukin ke dalam spoiler adalah image dengan resolusi besar, jadi dengan spoiler image tidak akan diload secara langsung yang dapat mempercepat waktu loading. Fungsi lainnya tentu dengan spoiler kita dapat menghemat space dan posting terlihat lebih rapi. Sekian dulu basa-basinya, langsung saja kita lihat bagaimana cara membuat spoiler dibawah ini:
caranya mudah sekali, tinggal masukin saja kode html berikut ini
Cara Membuat Spoiler :
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf dan lain2


</div>
</div>
</div>


Mudah sekali bukan?
Semoga bermanfaat ya :)

Sabtu, 14 Mei 2011

Cara Merubah Domain Blogspot menjadi .CO.CC


Blogspot.com adalah default domain yang diberikan ketika kita membuat blog di blogger.com. Sebenarnya ini bukan domain melainkan adalah subdomain. Banyak sekali website-website yang menyediakan domain gratis bagi anda, dengan domain yang cukup baik ratingnya, salah satunya adalah domain .CO.CC

Anda dapat menggunakan domain .CO.CC sebagai alternatif domain pengganti .blogspot.com .
Jika anda menggunakan domain .CO.CC, semula domain anda bernama blogkamu.blogspot.com dapat anda ubah menjadi www.blogkamu.co.cc, sehingga akan terlihat lebih singkat dan profesional. Walaupun anada berganti ke domain .CO.CC domain blogspot anda pun masih dapat diakses yang langsung akan diarahkan ke domain baru anda yaitu di .CO.CC.


Bagi anda yang tertarik merubah domain blogspot menjadi .CO.CC, berikut akan saya uraikan bagaimana langkahnya step by step

1. Cek terlebih dahulu ketersediaan domain .CO.CC yang anda inginkan pada form di bawah ini


misal: akuinginini.co.cc


2. Jika tersedia dan harganya 0$ alias gratis, selanjutnya klik continue to registration







3. Jika anda sudah punya account .CO.CC anda tinggal login dengan account tersebut, bagi yang belum punya klik Create an account now





4. Bagi yang mendaftar terlebih dahulu, anda akan disodori form pendaftaran, anda tinggal mengisinya sesuai identitas anda, untuk form homepage url isikan dengan domain yang ingin anda daftarkan. Jika sudah selesai, klik Continue





5. Selanjutnya login lah dengan account anda untuk setup atau pengatur domain anda.





6. Selanjutnya klik Manage Domain dan klik Setup pada domain yang ingin anda setting









7. Klik Zone Records, untuk mengarahkan domain anda ke blogspot. Isikan setingan seperti berikut ini :

Host isikan www.namadomainkamu.co.cc (dengan www)
TTL pilih 1D
Type pilih CNAME
Value isikan ghs.google.com

Selelah itu klik Setup untuk menyimpan setingan anda. Disini kita selesai menyeting domain kita, tinggal kita mengarahkan domain blogspot ke domain ini.




8. Langkah selanjutnya Login Account Blogger anda




9. Klik Setting masuk ke halaman Publikasi dan klik Costum Domain




10. Klik pada Switch Advanced Settings untuk pengaturan domain anda lebih lanjut.




11. Isikan domain .CO.CC diform yang telah disediakan, dan isikan Verification Code. Kemudian Klik Save Setting




12. Kita selesai menyeting domain kita, namun anda jangan terburu-buru keluar dari halaman ini, setelah setting success. Check atau Centang pada redirect domainkamu.co.cc to www.domainkamu.co.cc dan klik Save Setting , selesai sampai disini. Untuk setting ini paling lama membutuhkan waktu 2x24 jam untuk mengarahkan domain anda ke domain .co.cc.


Selasa, 26 April 2011

Cara Membuat Stripe Bar Blogger

Setelah lama sekali tidak nulis artikel, kali ini blog-triks kembali lagi untuk memberikan trik dan tips nya seputar blogging dan Internet . Untuk trik-tips kali ini saya akan menjelaskan cara membuat Stripe Bar . Ini sebagai request sobat2 blogger lewat email, banyak banget yang pengen tau caranya bikin Stripe Bar.

Sudah pada tau kan yang namanya Stripe Bar? . Ini penampakan Stripe Bar di blog saya


Stripe Bar bentuknya merip sekali dengan default navigation bar pada blogger. Stripe Bar dapat kita manfaatkan untuk meletakkan link iklan, informasi, Feed dan informasi lainnya sesuai keinginan anda, yang jelas dengan Stripe Bar link kita akan mudah di lihat pengunjung. Dilengkapi dengan icon close, stripe ini dapat ditutup bila dirasa mengganggu.


Cara pemasangan Stripe Bar untuk Blogger
1. Login Akun Blogger anda dulu
2. Masuk Editor HTML (Edit HTML)
3. Cari (CTRL + F) kode ]]></b:skin> kemudian letakkan script CSS berikut diatas kode ]]></b:skin>

#mta_bar { background:#FFFFE1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7INw7wQG_CC32yesJkEFBL2Gto0AqY3yLGzjU_PXBNRd2rpbQ4rmDPFd5rnBnYlZhmZki3JkGhQMRpfuSMLLIMfnpf_BoJce1C5NbIgqLFH70wVhznE9DXY3soHccjh8YR86G9FLL0oXW/s400/wow.gif?imgmax=800') repeat-x; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); } #mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#fff; width:65%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#fff; width:20%}
#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}
#mta_bar .right a{font-size:10px; color:#fff; text-decoration:underline}
#mta_bar .right a:hover{font-size:10px; color:#fff; text-decoration:none}
#left_bar a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCAi0HHzCR1kdQE6eNz2PTSBY7uKss9ZG4_pggWvLEKqchmCpiUdDaijXiUEPSD4ent5qBfcW5ssLWDiMxqZ6ezK37kNMOoIczr4QZhgPEEwN94kDS0pB85gg2rbws6P_DzomNV6PPsOVi/s400/stripead-feed.gif') no-repeat; text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar a:hover{text-decoration:underline; color:#fff}
#left_bar a:hover { text-decoration: underline; color: #0000FF; }
4. Selanjutnya masukkan kode berikut sebelum kode </head>

<script src='http://grandisk.xtgem.com/stripe-blog-triks.js' type='text/javascript'/>


5. Langkah selanjutnya letakkan kode berikut sebelum kode </body>

<div id='mta_bar'>
<div id='left_bar'><span class='center'><a href='
http://feedburner.google.com/fb/a/mailverify?uri=blogspot/blog-triks' target='_blank'>Gratis Berlangganan Blog-Triks Article Via Email, Join Now!!!
</a></span> </div>

<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;blog-triks.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9DVEIT5JI2OMpk2l0momxhgYQNJaZJCXeFQPuYzn0cwwHdrQylzGrDZz2bQNyb6ltLZ6rVt7IrrmVPKUZbUA532hx8D8CHksL3VR2ZjDXu0MHLrhYanDuFJNWeNu9OuS-YPDKku57ILd/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>
Kode yang berwarna biru silakan ganti sesuai dengan informasi yang akan anda pasang

6. Langkah terakhir, Warning: Ini adalah langkah terpenting yang tidak boleh salah.

Langkah Terakhir:

Klik


Selesai, dan silakan lihat apa yang terjadi pada blog anda...