KrishnaVandanu

Meta Tags Deskripsi/Keyword Otomatis for SEO Blogger | Blog SEO Test™

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> Untuk urusan SEO blog khususnya blogger, terkadang kita harus melakukan uji coba(eksperimen). Dari hasil uji coba pemilik blog <a href="http://blogseotest.blogspot.com/">Blog SEO Test</a> pemilik blog menulis tips memasang <a href="http://blogseotest.blogspot.com/2012/03/meta-tags-deskripsikeyword-otomatis-for.html">meta tag deskripsi & keyword otomatis</a> buat SEO Blogger yg telah mereka terapkan untuk berbagi ilmu, pengalaman juga pengetahuan dengan teman-teman blogger agar blog kita semakin baik dalam peringkat search engine dan bisa bersaing (persaingan sehat) dgn blog/situs yg lebih dulu/lama melakukan blogging.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Tidak bisa dipungkiri, bahwa meta description atau meta keyword blog sangat penting untuk di pasang agar bisa memberikan penjelasan detil tentang misi, tujuan dan target dari blog kita kepada bot/crawler.</div> <div style="text-align: justify;"> Tetapi yg seringkali dilupakan adalah - bahwa meta deskripsi / kata kunci blog juga untuk membantu pengguna internet yg melakukan pencarian di mesin pencari agar mendapatkan penggalan informasi yg melengkapi sebuah judul posting blog lebih relevant, sehingga mereka akan melakukan klik untuk masuk dan melihat isi keseluruhan dari judul dan deskripsi(penjelasan) di search results.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Seringkali blogger hanya berfikir bagaimana cara blog berada pada posisi halaman pertama paling atas di mesin pencari, tapi sebenarnya tanpa didukung meta deskripsi yg relevan dan benar, itu tidak akan mengundang mereka (pengguna iternet) melakukan klik utk mengetahui sumber posting dari judul dan deskripsi yg di tampilkan search engine results.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Ok, mari kita pelajari lebih lanjut bagaimana meta description / keyword agar bekerja dgn baik pada blog. Berikut adalah contoh meta tags description/keyword yg sy gunakan pada awal membuat blog, pernah di posting <a href="http://blogseotest.blogspot.com/2012/02/cara-terbaik-memasang-meta-tag-blog-seo.html">cara terbaik memasang meta tag blogger SEO friendly</a>, di asumsikan, anda sudah tau & menggunakannya.</div> Kemudian kita tambahkan meta tags description / keyword menjadi seperti berikut : <blockquote class="tr_bq">     <b:include data='blog' name='all-head-content'/>      <b:if cond='data:blog.pageType == &quot;item&quot;'>     <title><data:blog.pageName/> | <data:blog.title/></title>     <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>     <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>     <b:else/>     <title><data:blog.pageTitle/></title>     <meta name='DESCRIPTION' content='DESKRIPSI UNTUK BLOG ANDA'/>     <meta name='KEYWORDS' content='KATA KUNCI/KEYWORD BLOG ANDA'/>     </b:if>  </blockquote> Maka hasilnya di search result seperti ini : Untuk halaman posting : <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfnPDJZy5-P8wPjHE2souMf6n4GIAwm1CW_Zhh5Co-gxY_B8R2m7XhHhczm6xNuvlSnBRyPrBPRHFj6kvG_tvhzBb1QlG6f_HuBgrklIgo60xEAKsS0YBLMJ9Vh3t9H2Db4g8z0d_unw/s1600/meta+6.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tags Deskripsi" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfnPDJZy5-P8wPjHE2souMf6n4GIAwm1CW_Zhh5Co-gxY_B8R2m7XhHhczm6xNuvlSnBRyPrBPRHFj6kvG_tvhzBb1QlG6f_HuBgrklIgo60xEAKsS0YBLMJ9Vh3t9H2Db4g8z0d_unw/s400/meta+6.jpg" title="Meta Tags Deskripsi" width="400" /></a></div> Untuk halaman Beranda / Home : <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMa71L1GdcvB4I27my9YyQxUeerJMi3ITQrYOI4xs_5doQO4z87L7plHl-fjyL5L2RCyiP2eJTtfpZQpPtI3sSrNiIIDrvQ4a5mLy-fYUcZMS1jsENBLXLZq1v7F0J2jzoXrRAsdJ3MAA/s1600/meta+5.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tags Keyword Otomatis" border="0" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMa71L1GdcvB4I27my9YyQxUeerJMi3ITQrYOI4xs_5doQO4z87L7plHl-fjyL5L2RCyiP2eJTtfpZQpPtI3sSrNiIIDrvQ4a5mLy-fYUcZMS1jsENBLXLZq1v7F0J2jzoXrRAsdJ3MAA/s400/meta+5.jpg" title="Meta Tags Keyword Otomatis" width="400" /></a></div> <div style="text-align: justify;"> Nah, saat meneliti hasil dgn meta tags di atas, agaknya kurang cocok/sesuai dengan yang kita inginkan. Karena berdasarkan optimasi SEO, hasil di atas kurang memberi deskripsi yang bisa melengkapi judul posting. Kecuali hanya menampilkan judul + nama blog diulang 2 kali. Dan hasilnyapun kurang bagus di posisi search engine juga kurang mengundang klik pengguna internet. Maka, penulis mencari alternativterbaik dgn menghilangkan meta deskripsi untuk halaman posting - <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>, kenapa begitu ? :</div> <div style="text-align: justify;"> Alasannya karena walaupun tanpa meta description, Blogger sudah menyediakan fasilitas otomatis mengambil deskripsi dari paragraf awal dan paragraf akhir dlm setiap posting artikel, kemudian megambil setiap keyword/kata kunci dari keseluruhan artikel berupa snippet yg kita beri tanda dgn sengaja (huruf tebal/huruf miring) atau bot/crawler sendiri yg akan menentukan apa adanya.</div> <div style="text-align: justify;"> Lalu, setelah penulis mencoba hilangkan meta deskripsi utk halaman posting tapi masih tetap mempertahankan meta keyword otomatis (kata kunci berbeda pada setiap posting, menyesuaikan dgn judul) - <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>, maka hasilnya seperti ini :</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0Kz0tU8UHzi8O2RXKMy-CUS7PNImrIaUHIiV6FBNXIfd3D5IMAkkel3Ulr-0zZxW0oZ64mFLIASClhIsBqfC7OMQolN_ab6v7eMg_RTQNLUeS34SD2YJrFdt7ohpBApCpx9FiuSixKE/s1600/meta+1.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tags Deskripsi/Keyword Otomatis" border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij0Kz0tU8UHzi8O2RXKMy-CUS7PNImrIaUHIiV6FBNXIfd3D5IMAkkel3Ulr-0zZxW0oZ64mFLIASClhIsBqfC7OMQolN_ab6v7eMg_RTQNLUeS34SD2YJrFdt7ohpBApCpx9FiuSixKE/s400/meta+1.jpg" title="Meta Tags Deskripsi/Keyword Otomatis" width="400" /></a></div> <div style="text-align: justify;"> Silahkan lihat perbedaan judul dan deskripsi yg tertata rapi mulai dari kata pengantar > kategori > tags > judul, tentu SEO friendly (menurut penulis).</div> <div style="text-align: justify;"> Hasil di atas tentu saja perlu sentuhan kreatif saat proses menulis artikel pada awal paragraf dan ahkir paragraf supaya menampilkan deskripsi berkaitan dgn judul (relevant). Dan itu tergantung pada pilihan dan cara anda utk menyesuaikannya agar <a href="http://blogseotest.blogspot.com/2012/03/meta-tags-deskripsikeyword-otomatis-for.html">meta tags deskripsi / keyword otomatis untuk seo blogger</a> bekerja secara sempurna. Semoga berguna, sukses!</div> Terima kasih kepada penulis artikel ini, Saudara: <div class="left"> <a href="https://google.com/+AgiefIkhsan" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"> <img alt="Author" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7fy_cT0ec24a_8B3717LjIsQojy1IgAHeHyxHiLPTSQ_KA9BOWcLokDs229Ce-6-73B5-yfRGPe_pL5ZkHpXQbteEZDiGhypZV0IKXK5G9ebdxPXVn9zzoBy4ImJ7FfGxixwdmDH_hk/s200/Author.jpg" style="background-color: #101116; height: 85px; padding: 8px; width: 85px;" title="Penulis Blog SEO Test" /> </a> <h4> » Agief Ikhsan </h4> </div> <a href="http://blogseotest.blogspot.com/2012/03/meta-tags-deskripsikeyword-otomatis-for.html">Meta Tags Deskripsi/Keyword Otomatis for SEO Blogger | Blog SEO Test™</a> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=dd963a8f-7bf1-4b4f-962d-55d627e4d9a6" style="border: none; float: right;" /></div> </div>

Meta Tags Deskripsi/Keyword Otomatis for SEO Blogger | Blog SEO Test™

Untuk urusan SEO blog khususnya blogger, terkadang kita harus melakukan uji coba(eksperimen). Dari hasil uji coba pemilik blog Blog SEO Tes...

efek animasi loading halaman dengan css3 pada blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="post-header"> </div> <div dir="ltr" style="text-align: left;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK2sUzXSs9jp19KrTDNCOGdHgn5iEHPz-JfQdZD-fIXL2reEWunshTmkY29Qwo-sDDNLwUWykTB8v6JSyjEJLeuPG858h9CTYNjTL19CGklGdXoeI8VtLM146Os-cpppgQfQH4NCWGLLA/s1600/animasi+loading+halaman+blogger.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK2sUzXSs9jp19KrTDNCOGdHgn5iEHPz-JfQdZD-fIXL2reEWunshTmkY29Qwo-sDDNLwUWykTB8v6JSyjEJLeuPG858h9CTYNjTL19CGklGdXoeI8VtLM146Os-cpppgQfQH4NCWGLLA/s400/animasi+loading+halaman+blogger.png" width="400" /></a></div> <div style="text-align: center;"> </div>  efek loading ini hanya dibuat dengan <a class="zem_slink" href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" rel="wikipedia" title="Cascading Style Sheets">CSS</a>, untuk menambahkan efek menarik ini di blog anda, silahkan ikuti langkah-langkah berikut: 1. Untuk menampilkan efek load diatas pada halaman Anda, letakkan kode berikut sebelum tag <code>]]></b:skin></code> dalam template blog anda <pre><code class="css">#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;} .loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;} .loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;} @-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }} @-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }} @-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }} @-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}</code></pre> 2. Masukkan kode di bawah ini sebelum kode tag <code></body></code> <pre><code class="xml"><div id='loadhalaman'> <div class='loadball'></div> <div class='loadball-2'></div> </div> <script type='text/javascript'> $(function() { var siteURL = "http://" + top.location.host.toString(); var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']"); $internalLinks.click(function() { $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000); }); // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank' $('#loadhalaman').click(function() { $(this).hide(); }); }); </script></code></pre> demikian semoga berguna dan bisa membuat blog anda lebih menarik....</div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=18d007e9-435b-4d21-a6a4-0b9c8507938e" style="border: none; float: right;" /></div> </div>

efek animasi loading halaman dengan css3 pada blogger

efek loading ini hanya dibuat dengan CSS , untuk menambahkan efek menarik ini di blog anda, silahkan ikuti langkah-langkah berikut: 1. Untu...

Hosting File dengan Google Code dan TortoiseSVN

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> Selama ini kita biasa menggunakan <a href="http://code.google.com/">Google Code</a> untuk menyimpan maksimal hanya tiga jenis berkas/file saja. Yaitu JavaScript, ZIP dan gambar. Selain itu tidak pernah. Alasannya, saat file selain JavaScript, ZIP dan gambar yang tersimpan di Google Code dibuka maka akan gagal bekerja. Misalnya file CSS atau HTML. Saat dibuka malah hanya muncul sebagai teks biasa dan tidak bisa digunakan sebagaimana file CSS dan HTML pada normalnya. Biasanya kita mengunggah file melalui situs Google Code secara langsung, atau bisa juga melalui aplikasi subversi seperti <a href="http://tortoisesvn.net/">TortoiseSVN</a>. Kabar baiknya, dengan cara mengatur MIME yang beragam pada aplikasi tersebut, maka itu akan memungkinkan kita untuk mengunggah berbagai file dengan format yang berbeda-beda. Sehingga direktori Google Code tidak lagi tampak sebagai ruang penyimpanan file berupa kode saja, tetapi juga bisa kita gunakan untuk menyimpan berbagai macam file seperti halnya situs-situs penyedia layanan hosting file pada umumnya. Saya masih belum begitu berani untuk mengungkapkan apa itu pengertian MIME. Tapi kalau kamu ingin mencari tahu lebih jauh, kamu bisa membacanya di <a href="http://en.wikipedia.org/wiki/MIME">Wikipedia - MIME</a> Dengan mendefinisikan properti otomatis pada aplikasi, maka kita bisa mengunggah beberapa file yang bisa dibilang sama sekali tidak ada hubungannya dengan kode seperti PDF, DOC, SWF (Flash), WAV dan lain-lain. Untuk mengubah masukan berkas Google Code menjadi lebih luas, maka ada dua buah pekerjaan yang harus kita lakukan. Pertama adalah menginstal aplikasi TortoiseSVN dan ke dua adalah membuat sebuah halaman proyek baru.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Pekerjaan I: Menginstal TortoiseSVN Kunjungi situs ini ⇒ <a href="http://tortoisesvn.net/downloads.html">http://tortoisesvn.net/downloads.html</a>. Unduh aplikasi tersebut lalu instal. Setelah terinstal, komputer harus di-restart karena aplikasi ini akan terintegrasi dengan menu konteks/menu klik kanan (shell command). Setelah itu klik kanan pada desktop. Pilih menu TortoiseSVN » Settings:</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> <a href="http://4.bp.blogspot.com/--eRTyvIbYgQ/URe8R2Z2H8I/AAAAAAAAG2Q/B5SBUZuhGpg/s1600/tortoise-svn_settings.png"><img src="http://4.bp.blogspot.com/--eRTyvIbYgQ/URe8R2Z2H8I/AAAAAAAAG2Q/B5SBUZuhGpg/s1600/tortoise-svn_settings.png" /></a> </div> <div style="text-align: justify;">  TortoiseSVN » Settings</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Akan muncul kotak dialog seperti ini. Klik General dan klik tombol Edit:</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> <a href="http://3.bp.blogspot.com/-TbQ2aQxBGqo/URe8Wl5BYqI/AAAAAAAAG2g/0jTmGqgxn0o/s1600/tortoise-svn_edit-mime-type.png"><img src="http://3.bp.blogspot.com/-TbQ2aQxBGqo/URe8Wl5BYqI/AAAAAAAAG2g/0jTmGqgxn0o/s400/tortoise-svn_edit-mime-type.png" /></a> </div> <div style="text-align: justify;"> Pengaturan TortoiseSVN Setelah file config terbuka, salin kode ini dan letakkan di bawah komentar <a href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%23%20Makefile%20%3D%20svn%3Aeol-style%3Dnative&sa=Telusuri"># Makefile = svn:eol-style=native</a></div> <pre id="code-block:1"><code class="no-highlight"> [miscellany] enable-auto-props = yes [auto-props] # Scriptish formats *.bat = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain *.bsh = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell *.cgi = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain *.cmd = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain *.js = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript *.php = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php *.pl = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable *.pm = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl *.py = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable *.sh = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable # Image formats *.bmp = svn:mime-type=image/bmp *.gif = svn:mime-type=image/gif *.ico = svn:mime-type=image/ico *.jpeg = svn:mime-type=image/jpeg *.jpg = svn:mime-type=image/jpeg *.png = svn:mime-type=image/png *.tif = svn:mime-type=image/tiff *.tiff = svn:mime-type=image/tiff # Data formats *.pdf = svn:mime-type=application/pdf *.avi = svn:mime-type=video/avi *.doc = svn:mime-type=application/msword *.eps = svn:mime-type=application/postscript *.gz = svn:mime-type=application/gzip *.mov = svn:mime-type=video/quicktime *.mp3 = svn:mime-type=audio/mpeg *.ppt = svn:mime-type=application/vnd.ms-powerpoint *.ps = svn:mime-type=application/postscript *.psd = svn:mime-type=application/photoshop *.rtf = svn:mime-type=text/rtf *.swf = svn:mime-type=application/x-shockwave-flash *.tgz = svn:mime-type=application/gzip *.wav = svn:mime-type=audio/wav *.xls = svn:mime-type=application/vnd.ms-excel *.zip = svn:mime-type=application/zip # Text formats .htaccess = svn:mime-type=text/plain *.css = svn:mime-type=text/css *.dtd = svn:mime-type=text/xml *.html = svn:mime-type=text/html *.ini = svn:mime-type=text/plain *.sql = svn:mime-type=text/x-sql *.txt = svn:mime-type=text/plain *.xhtml = svn:mime-type=text/xhtml+xml *.xml = svn:mime-type=text/xml *.xsd = svn:mime-type=text/xml *.xsl = svn:mime-type=text/xml *.xslt = svn:mime-type=text/xml *.xul = svn:mime-type=text/xul *.yml = svn:mime-type=text/plain CHANGES = svn:mime-type=text/plain COPYING = svn:mime-type=text/plain INSTALL = svn:mime-type=text/plain Makefile* = svn:mime-type=text/plain README = svn:mime-type=text/plain TODO = svn:mime-type=text/plain # Code formats *.c = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain *.cpp = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain *.h = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain *.java = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain *.as = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain *.mxml = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain # Webfonts *.eot = svn:mime-type=application/vnd.ms-fontobject *.woff = svn:mime-type=application/x-font-woff *.ttf = svn:mime-type=application/x-font-truetype *.svg = svn:mime-type=image/svg+xml </code></pre> Simpan perubahan yang kamu lakukan. Biarkan sampai di sini dulu. Pekerjaan II: Membuat Halaman Proyek Baru Jika belum punya akun Google, buat terlebih dahulu agar bisa mendapatkan akses ke Google Code. Kunjungi <a href="http://code.google.com/">http://code.google.com</a>, lalu klik <a href="https://code.google.com/hosting/createProject">Create A New Project</a>: <a href="http://2.bp.blogspot.com/-AEg1k24-H9w/URebrWqy1pI/AAAAAAAAG0A/RGRuNMBOQUw/s1600/google-code_create-a-new-project.png"><img src="http://2.bp.blogspot.com/-AEg1k24-H9w/URebrWqy1pI/AAAAAAAAG0A/RGRuNMBOQUw/s1600/google-code_create-a-new-project.png" /></a> Buat proyek baru. Isi formulirnya, atur pilihan version control system ke Subversion, lalu pilih lisensi yang kamu kehendaki untuk file-file yang diunggah di situ: <a href="http://2.bp.blogspot.com/-_mGU-eXbHPU/URebsKNdoFI/AAAAAAAAG0I/M_C7jS_Q64A/s1600/google-code_filling-the-project-form.png"><img src="http://2.bp.blogspot.com/-_mGU-eXbHPU/URebsKNdoFI/AAAAAAAAG0I/M_C7jS_Q64A/s400/google-code_filling-the-project-form.png" /></a> Mengisi formulir. Klik Create Project. Kamu akan dibawa menuju halaman <a href="https://code.google.com/p/reader-download/">dasbor</a> proyek barumu jika sudah berhasil. Klik tab Source lalu klik tautan <a href="https://code.google.com/hosting/settings">googlecode.com password</a> untuk membuat password. Ini digunakan untuk menghubungkan aplikasi dengan proyek Google kamu: <a href="http://2.bp.blogspot.com/-8Dn0pcw4Dow/URecykjWosI/AAAAAAAAG0Q/As5ilb9QIq4/s1600/google-code_generate-password.png"><img src="http://2.bp.blogspot.com/-8Dn0pcw4Dow/URecykjWosI/AAAAAAAAG0Q/As5ilb9QIq4/s1600/google-code_generate-password.png" /></a> Mengenerasikan password Google Code. Catat password yang tampil: <a href="http://1.bp.blogspot.com/-77MbQQRzouY/UReczlEqX6I/AAAAAAAAG0Y/rN6x9TngUyg/s1600/google-code_generating-password.png"><img src="http://1.bp.blogspot.com/-77MbQQRzouY/UReczlEqX6I/AAAAAAAAG0Y/rN6x9TngUyg/s1600/google-code_generating-password.png" /></a> Password —dan alamat email— sudah digenerasikan. Mulai Mengunggah Buka aplikasi TortoiseSVN dengan cara mengeklik kanan pada desktop lalu pilih TortoiseSVN » Repo Browser: <a href="http://4.bp.blogspot.com/-0zk3CrqdmJk/URfGgXT-86I/AAAAAAAAG4o/tygfWFPiwL8/s1600/tortoise-svn_repo-browser.png"><img src="http://4.bp.blogspot.com/-0zk3CrqdmJk/URfGgXT-86I/AAAAAAAAG4o/tygfWFPiwL8/s1600/tortoise-svn_repo-browser.png" /></a> Repo browser. Akan muncul kotak dialog untuk memasukkan URL proyek: <a href="http://1.bp.blogspot.com/-ZiP7S1JF4E8/URfGQeKV9KI/AAAAAAAAG4Y/Hb1eXkD3Wz4/s1600/tortoise-svn_input-project-url-with-https.png"><img src="http://1.bp.blogspot.com/-ZiP7S1JF4E8/URfGQeKV9KI/AAAAAAAAG4Y/Hb1eXkD3Wz4/s1600/tortoise-svn_input-project-url-with-https.png" /></a> Memasukkan URL proyek. Pola URL selalu berbentuk seperti ini:https://nama_proyek.googlecode.com/svn/trunk/ Yang harus diingat dan yang paling sering membuat gagal dalam pengunggahan file: Saat menuliskan URL proyek di aplikasi, gunakan <a href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=https&sa=Telusuri">https</a>, tapi saat ingin melihat hasilnya atau mengakses hasil kerjanya secara online, gunakan <a href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=http&sa=Telusuri">http</a> Klik OK. Tunggu sampai proses memuat selesai. Buka folder dimana terdapat file yang ingin diunggah. Seret file yang diinginkan ke area daftar file unggahan: <a href="http://4.bp.blogspot.com/-npUQwlBB2Cc/URfGVAXKqCI/AAAAAAAAG4g/ib0WsaGNvf0/s1600/tortoise-svn_uploading.png"><img src="http://4.bp.blogspot.com/-npUQwlBB2Cc/URfGVAXKqCI/AAAAAAAAG4g/ib0WsaGNvf0/s400/tortoise-svn_uploading.png" /></a> Mengunggah file. Tunggu beberapa saat, maka kamu akan diminta untuk mengautentikasikan akun Google Code kamu seperti ini: <a href="http://1.bp.blogspot.com/-yanKZVMiY1I/URe8TQGdZmI/AAAAAAAAG2Y/FEYK7FEH4sk/s1600/tortoise-svn_authentication.png"><img src="http://1.bp.blogspot.com/-yanKZVMiY1I/URe8TQGdZmI/AAAAAAAAG2Y/FEYK7FEH4sk/s1600/tortoise-svn_authentication.png" /></a> Autentikasi akun Google Code. Isi alamat email dan password yang sebelumnya sudah kamu catat. Centang Save authentication agar kita tidak perlu berkali-kali login pada saat pengunggahan file di masa mendatang. Dengan menggunakan aplikasi subversi, selain bisa mengunggah berbagai file yang tidak biasa, kita juga bisa mengedit file yang sudah kita unggah. Sehingga kita tidak perlu menghapus file lama dan mengunggah file yang baru berulang kali seperti saat menggunakan akun Google Code pada umumnya. Untuk memeriksa hasil kerja satu per satu secara online, akses pola URL ini: http://nama_proyek.googlecode.com/svn/trunk/ Kita juga bisa mengedit (hanya mengedit) file melalui situs Google Code secara langsung (jika kita memberikan izin pada pengaturan pengeditan secara online). Kunjungi pola URL ini: http://code.google.com/p/nama_proyek/source/browse/trunk/ Thanks to Taufik Nurrohman for great Article : <a href="http://www.dte.web.id/2013/02/hosting-file-dengan-google-code-dan.html">Hosting File dengan Google Code dan TortoiseSVN</a> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=1e59e869-d6dc-4918-9ea6-c0f9350940c2" style="border: none; float: right;" /></div> </div>

Hosting File dengan Google Code dan TortoiseSVN

Selama ini kita biasa menggunakan Google Code untuk menyimpan maksimal hanya tiga jenis berkas/file saja. Yaitu JavaScript, ZIP dan gambar....

iFrame “Auto Height” dengan Jquery

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> Dalam tag tidak berlaku untuk elemen style=”height:100%” melainkan yang bisa berlaku hanya style=”width:100%”. Untuk membuatnya menjadi auto height 100% bisa menggunakan jQuery Jadi berapapun ukuran iframe akan tetap menyesuaikan secara otomatis, sehingga seolah-seolah tidak memakai iframe. </div> Caranya : - masukkan jQuery library, terserah pakai yang versi keberapa <script type="text/javascript" src="jquery-1.6.2.js"></script> - masukkan jQuery buat auto height iframe <script type="text/javascript" src="https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.iframe-auto-height.js"></script> - masukkan script iframe, untuk jQuery ini akan otomatis mendeteksi semua iframe menjadi auto height <iframe src="iframe.html" width="100%" scrolling="no" frameborder="0"></iframe> - masukkan fungsi javascript iframe autoheight <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> - Simpan dan lihat hasilnya <a href="https://www.dropbox.com/s/f6hkh5p7gvvnqrc/jQuery%20iFrame%20autoheight.rar">Download Script Lengkap</a> Source Script : <a href="https://github.com/house9/jquery-iframe-auto-height">https://github.com/house9/jquery-iframe-auto-height</a> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=1e59e869-d6dc-4918-9ea6-c0f9350940c2" style="border: none; float: right;" /></div> </div>

iFrame “Auto Height” dengan Jquery

Dalam tag tidak berlaku untuk elemen style=”height:100%” melainkan yang bisa berlaku hanya style=”width:100%”. Untuk membuatnya menjadi aut...

JS Quicktags : alexking.org

<div dir="ltr" style="text-align: left;" trbidi="on"> JS Quicktags <div class="page-content"> I’ve released the JavaScript Quicktags used in <a href="http://alexking.org/projects/tasks-pro">Tasks Pro™</a>, <a href="http://alexking.org/projects/tasks">Tasks</a> and <a href="http://alexking.org/projects/wordpress">WordPress</a> under the LGPL license. This is a set of buttons that allow you to insert HTML tags into a content area. The tags are cursor aware – placed around a selection or at the cursor position. This is also an example of <a href="http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript">how to get the cursor position with JavaScript</a>. <h3 style="text-align: left;"> <a href="http://alexking.org/projects/js-quicktags/demo/index.html" target="_blank">Example Page</a></h3> A sample insertAtCursor function: <div class="code"> <pre>function insertAtCursor(myField, myValue) { //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; } //MOZILLA/NETSCAPE support else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); } else { myField.value += myValue; } } // calling the function insertAtCursor(document.formName.fieldName, 'this value'); </pre> </div> </div> <a href="http://alexking.org/projects/js-quicktags">JS Quicktags : alexking.org</a>: JS Quicktags <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=65c741d5-378a-4401-a4b5-c7f80bd592df" style="border: none; float: right;" /></div> </div>

JS Quicktags : alexking.org

JS Quicktags I’ve released the JavaScript Quicktags used in Tasks Pro™ , Tasks and WordPress under the LGPL license. This is a set of butt...

Online HTML Editor Simple

<div dir="ltr" style="text-align: left;" trbidi="on"> <html><head> <title>Online HTML Editor: Real time online with preview</title> <script src="http://ajabingung.googlecode.com/svn/js_quicktags.js" type="text/javascript"></script> <link href="http://ajabingung.googlecode.com/svn/style.css" media="screen" rel="stylesheet" type="text/css" width="100%"></link> <script type="text/javascript"> var old = ''; function update() { var textarea = document.f.ta; var d = parent.dynamicframe.document; if (old != textarea.value) { old = textarea.value; d.open(); d.write(old); d.close(); } window.setTimeout(update, 150); } </script> </head> <body onload="update(); document.f.ta.select();"> <form method="post" name="f" target="dynamicframe">  <script type="text/javascript">edToolbar('canvas');</script> <textarea cols="140" id="canvas" name="ta" rows="10" style="height: 200px; width: 100%;"> <h2> Welcome to the HTML editor!</h2> Just type the HTML and it will be shown below. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum neque id magna. Mauris sollicitudin nisi sit amet sem. Etiam sit amet lectus a velit interdum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In tincidunt eleifend neque. Maecenas interdum, neque in fringilla pellentesque, lacus massa eleifend elit, nec scelerisque nulla orci a nunc. Quisque sollicitudin. Sed pulvinar lacus id lacus. Vestibulum imperdiet tellus eget risus. Quisque libero nisl, feugiat eu, euismod at, elementum eget, tellus. <a href="http://www.clesto.com">Clesto.com</a> <img src="http://www.google.se/images/google_80wht.gif" alt="Google logo"> <h2> Heading in h2, som more sample text</h2> Phasellus sem odio, varius quis, cursus at, ullamcorper eget, turpis. Maecenas a mi. Mauris dignissim lectus malesuada odio. Duis elit arcu, lobortis ut, porta ac, venenatis ornare, odio. Pellentesque scelerisque. Ut elementum laoreet massa. Suspendisse hendrerit odio eget turpis. Cras tellus dui, malesuada id, adipiscing ut, laoreet sed, magna. Phasellus scelerisque aliquet ligula. Quisque vitae elit sit amet enim suscipit interdum. Curabitur laoreet, mauris sit amet aliquet interdum, pede sapien malesuada metus, in tincidunt turpis justo id arcu. Donec gravida odio ac lectus. Nam rutrum ante in nisi laoreet aliquet. Sed at ante. <h3> Heading in h3, som more sample text</h3> Nulla facilisi. Nullam cursus scelerisque erat. Praesent convallis rhoncus dui. In hac habitasse platea dictumst. Nullam pellentesque. Mauris ac orci. Donec dictum. Etiam purus tortor, elementum a, posuere nec, pulvinar id, ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vel justo. Nullam posuere purus sed arcu. <ul> <li>Nulla facilisi.</li> <li>Pellentesque habitant morbi</li> <li>Quisque vel justo.</li> <li>Nullam posuere purus sed arcu.</li> </ul>

Credits

Thanks to Alex King for making JS Quicktags and releasing it under LGPL and thanks to Jesse Ruderman for having made the javascript for live edits.

Jim Westergren made this web site, primary for use with Clesto.com.

Online HTML Editor

Here you can write and see HTML in action.

Start your own web site in 5 minutes at www.n.nu.

Online HTML Editor Simple

Online HTML Editor: Real time online with preview <h2> Welcome to the HTML editor!</h2> &l...

Add Facemoods Emoticons To Your Blogger Comments

<div dir="ltr" style="text-align: left;" trbidi="on"> Here are some amazingly funny emoticons compatible with your <a class="zem_slink" href="http://blogger.com/" rel="homepage" title="Blogger">Blogger</a> comments - also with threaded commenting system! If you want to know how to add them, just follow the next steps: <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yKcyMMbfPdSliSm4VihmWzeBn3Znb6mo8Lk9ELLvhOJPZ_vEEvp1DHr31aCKAMw6AFQcwAiHfttFTv774XQbULLwGbcvZzBT3sYxEAzZiwRYLyG9IfS7nHeB1NICBK_FwUDWYi4iTNGD/s1600/add+facemood+smileys+emoticons+to+blogger+comments.png" style="margin-left: 1em; margin-right: 1em;"><img alt="emoticons, smileys, blogger, tricks" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yKcyMMbfPdSliSm4VihmWzeBn3Znb6mo8Lk9ELLvhOJPZ_vEEvp1DHr31aCKAMw6AFQcwAiHfttFTv774XQbULLwGbcvZzBT3sYxEAzZiwRYLyG9IfS7nHeB1NICBK_FwUDWYi4iTNGD/s400/add+facemood+smileys+emoticons+to+blogger+comments.png" title="facemoods emoticons for blogger blogspot comments" width="400" /></a></div> <div style="color: #0b5394; text-align: center;"> <a href="http://facemoods-emoticons.blogspot.com/2012/05/lorem-ipsum.html#comment-form" rel="nofollow" target="_blank">DEMO</a></div> <a class="zem_slink" href="http://en.wikipedia.org/wiki/USMLE_Step_1" rel="wikipedia" title="USMLE Step 1">Step 1</a>. Go to <a class="zem_slink" href="http://www.apple.com/downloads/dashboard/" rel="homepage" title="Dashboard (Mac OS)">Dashboard</a> - Template - Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia" title="HTML">HTML</a> - Proceed <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJokTjvkSpUqz9grYDGBorTqIwMpIYH6HxgsShVYXX6CMk7BFHdQXWBfX2a3weJmzql3hQgx09gLlYmgfv8C2DMnlfbVAyYIkiIPn6JBmt3TZ6-22U8P8Kdu7drHsvkM-ZnmUJMX5FkGlt/s1600/remove-blogger-labels.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJokTjvkSpUqz9grYDGBorTqIwMpIYH6HxgsShVYXX6CMk7BFHdQXWBfX2a3weJmzql3hQgx09gLlYmgfv8C2DMnlfbVAyYIkiIPn6JBmt3TZ6-22U8P8Kdu7drHsvkM-ZnmUJMX5FkGlt/s1600/remove-blogger-labels.png" width="320" /></a></div> ...and select Expand Widget Template (don't forget to make a backup) <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2N1J5HSVk4p8Jve_RgNTvjvOZazbQQba9-MlccSnKBj0tr8kGj9Iii5kcheQlVIGEWVf0noFEO48qhRjQjIePlnptO277jhUMMBRDisAed5BsUoT6mj00WU60Z-blH7KyWOlWwYTRoumE/s1600/blogger-expand-widget-templates.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2N1J5HSVk4p8Jve_RgNTvjvOZazbQQba9-MlccSnKBj0tr8kGj9Iii5kcheQlVIGEWVf0noFEO48qhRjQjIePlnptO277jhUMMBRDisAed5BsUoT6mj00WU60Z-blH7KyWOlWwYTRoumE/s1600/blogger-expand-widget-templates.png" width="320" /></a></div> Step 2. Search (using <a class="zem_slink" href="http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts" rel="wikipedia" title="Table of keyboard shortcuts">CTRL + F</a>) for this <a class="zem_slink" href="http://en.wikipedia.org/wiki/Code" rel="wikipedia" title="Code">code</a>: <ul> <li>For previous commenting system: </li> </ul> <blockquote class="tr_bq"> <h4 id='comment-post-message'><data:postCommentMsg/></h4></blockquote> <ul> <li>For threaded comments:</li> </ul> <blockquote class="tr_bq"> <div class='post-footer-line post-footer-line-3'> </blockquote> Step 3. Add the below code just above it (for threaded comments, add the code after): <blockquote class="tr_bq"> <b:if cond='data:blog.pageType == "item"'> <div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkA0MwWddTTRdT0A5VJkAmIv9dTj0agaX_VWI4PBY3-lJanHTg1SqzDG-K51sAvoChOxv0RIm-QS8IuoiTdhA4-krrc2bswTKlun-Jfaws7wMWdYHeuA1h1izbK5X5VX2_9MyqT_qD4H04/s1600/helplogger.blogspot.com(1).gif'/> :a &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxDhizRNrVX_KpzHx7QXNa84at1woqNhh89yf8zNKPbd78rKqDyEW6Omk6fcgOXiuE8v0wDH7Lp6mU9BnCNW6X8dj1y8u3Ni_CcWDZ7-cZR-VudPQkwfX-MmssrbdOSOGae_d1fnpPCnW/s1600/helplogger.blogspot.com+(2).gif'/> :b &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG3_TgIOtFjNQEbrcasVFQnUtQbq9VHa2jxViNIDSP8KrNQwNdPA7Y5HjoINvagj-_p7A-1js28btDwI6zGTOvM9nnvHxu7ml-xsDtFsrkmHB2CBALL_2p0oiKkofriJXhqji6cEm2EarT/s1600/helplogger.blogspot.com(3).gif'/> :c &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbxwx-iZiYtyXIOrdcX56RAPbgz4w9-Jwiky5GQyFRL9QFULYp7NAtbVPSzxN5UhUAazn3wYyeQvnM18af3ZjUGPpsyrtc7sBgXZCGG7aYAY846J_yLfX0RQa1hVnNw0LhGUBwIyZG2l5/s1600/helplogger.blogspot.com(4).gif'/> :d &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXyVCnwnhZcgmLbCPfhs3hzPP4LdPaDiVu-lI54wBEY_-q_D-_eRZa9xIAOnuhW4D_eTPoYYjUM9jhn8U-hBq2FL5Fh4sAldR_uBmXlDeH4fUgvq5BCYCzzkRRDX3UOaFkVMnVks7VfNjw/s1600/helplogger.blogspot.com(5).gif'/> :e &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEtVe2PsUtyFbw5gCfS6FyVcF-TA_Fn4FOfsrCuzAeLPZCj3uBiK8Kt8zImgH4lG-yfFjowLFepuekC7eyCq84rflymfZH51rtOPVdLwkuobHg4-C3MjVZO3EdNmmB7aOHMfNSvxIMXoN/s1600/helplogger.blogspot.com(6).gif'/> :f &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeS9KJtoqsShlGboxe7teI_5GOSroI-G6dlt36r_hYFybSDUhyphenhyphendEFo633RGu-rny1rnEw4kZsILjGkhq0XmnTqQIiCD3CPvMqka_xa-mSHHK90J8pB2uJ6uMh6jpC7N3KKnKLQn31mn0So/s1600/helplogger.blogspot.com(7).gif'/> :g &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiUSn5W_SUnjv5HQwkyHSHCYSkyonjE5Lx07p7r7-b3fDkkJ_ebgRdLqClajaPXr2vEz0gzGc7WEGS6Tlug_jl-uviLQzaRkYb71bUKGCKTt_-Hoyk6npQsHNNduTzMU7x1MzjYzXmY2fn/s1600/helplogger.blogspot.com(8).gif'/> :h &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjieaJcdn6u-46ppZow0MAcppfo8XNf9RFN0mD6fiYPwSbnazOXR0SXIzEv8R_zwr4nIMTghE210FuAZsig0MlAKwA9uZpdSb4sx2bGRCm7MJydTa9IqA4Z3Opu65b28z3zNfIaHHmWAzC8/s1600/helplogger.blogspot.com(9).gif'/> :i &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRVuIDnxoBV6pyydhCV698oH76oLDcwzRWKUkoDsPrA9kUVzf1zdgy-hRmLOeNvDdkAUsQy0aDhcQ7yK0NZciqHXiKEoos5L8jRIKpJdg1O7tzdMiyplPUvJdEeV97NsJ36HhdPlHIwW5h/s1600/helplogger.blogspot.com(10).gif'/> :j &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3kfSmp8v6ex9r7KUoF1QMj-ajqN5wlzJeUwHE27UqqjZDna47L73qYzBhxWhF6PMEScKOkX7Rm6eGa4d25qykuoTKGYoNsnNHFn365jnDjNHBrusKq8TaL8lT4sq1HjodEQu-LaVP0UIu/s1600/helplogger.blogspot.com(11).gif'/> :k &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQr2lOmQtixAcVNvQDlA8_AKdAU1pCao6Ad8Kv2ymk3Ms8TeVC34xWy0EyQ6iBWnVKsOfyvr1zZkR35tvTk04roc4bXf93mir3WSpzV616BqbLrr4k0tu3dsAdnZ7MFI5ccSYF0uizLbd/s1600/helplogger.blogspot.com(12).gif'/> :l &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3nLfMxr7HV-ZU7tIrf0wV-VXKk7jLJwbhK1-3qeFm9YDXutm9j_uaIB_98t1ohXgIcdC1rSayRSgzhs61BSzTR72cODLYDYInTI4kOi92b6LhjcBhjk1c1E-1eCAP7ngQdiOZPj9pHXT1/s1600/helplogger.blogspot.com(13).gif'/> :m &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyiFjZfo6ozejTJ6Fc4CaHiuImm6Nx-5COWPyhygmMeCEiwgVeouox8k3Q3pM5sq97X_CRhtMDJq8xkFVdC_A4rHNWKmHyIEz3sG9ti-yFBBB6zBW5p935vhzfLUInK4fZd9Ra12j8f5VE/s1600/helplogger.blogspot.com(15).gif'/> :n &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifcN6xUU-V_zYxaVn0SSowvQokr7HDFcSHMSskl3xLhT_mn6GbgeiCbAGbmMNh48qXf0Tt4olVFvaPf_QQAdTcXaunpSkgyuZ3bxrZ5hPqjBDasWbMDhPliNZhWz96RnE6g_dm4KfRp3hb/s1600/helplogger.blogspot.com(16).gif'/> :o &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgspnGUc_3i7yJEGbe8pTGxl4PbXI3FSV8TxB4ERiabQXj9ADqk1qRP7E2o8ajEohyFpBFoOX0FlNQomME_G_eXLicO_ENYZn4JijUp08M9C5zC1Evw8VDOI26vY6vhjo_oJnzKX9y59aTH/s1600/helplogger.blogspot.com(14).gif'/> :p &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6hIQiCdL-SmBNZYzjQJC_D3eWDCQJQ2S-ugAx8nCDXOW-Geh-ytuanHEktOrdKJdXyqsnxWW8Q4pBmKfeAxes-iFmp3Fq3wJPDrU_OD6bSD_ZFIU6W8_oD59sL1Ju98y3fUrr79dxo1tH/s1600/helplogger.blogspot.com(17).gif'/> :q &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTmBJhOS_-bkLmWALvxyie5lfKf0_-tzdkYZMctA9JMVPtSJ8NMyqmMp-EDGGqwbAHBPid2DpZodBaqZkZJ2wjf_6WvUn7uXadRNQwNCGlyRSjz6vvEsxPUQCJEdM7WTr4wGLQqIZ5uAc/s1600/helplogger.blogspot.com(18).gif'/> :r &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH6n0se-cxP9CEUBCESdstUf3_g0y9fyHFV18z0A4mHme5Bez8C6YS_KFgjE3qgu5fDDPT6D-8VPme8k4n1BzU4SToDb9c-3fO5jyVqcAAkssyFbKV2h_pDmXU2Hixk8G_sw8HJkhhYbXI/s1600/helplogger.blogspot.com(19).gif'/> :s &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmHxVL9G3hCtSIgQBeo7EQ2rJ70ygGj930AEz5SiRmyGVOgNiC-Dno7GGZ0Jv8bjv4FG-RquJFzX_c8MPcF5-jcGjVKs5jz-FsugRX8W6heNhufUBtLQ0VhfNHYbPLykmnTDoSOiCfTGJ/s1600/helplogger.blogspot.com(20).gif'/> :t   <a href='http://helplogger.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a> </div></b:if></blockquote> Step 4. Now search for this piece of code: <blockquote class="tr_bq"> </body></blockquote> Step 5. And add the following code immediately above it: <ul> <li>For previous commenting system:</li> </ul> <blockquote class="tr_bq"> <script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/></blockquote> <ul> <li>For threaded comments: </li> </ul> <blockquote class="tr_bq"> <script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/></blockquote> Step 6. Save the Template. Now, enjoy your comments! <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div> </div>

Add Facemoods Emoticons To Your Blogger Comments

Here are some amazingly funny emoticons compatible with your Blogger comments - also with threaded commenting system! If you want to know h...

add go to top and go to bottom buttons Using jQuery in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="post-title entry-title" style="text-align: justify;"> <a class="zem_slink" href="http://en.wikipedia.org/wiki/Comment_%28computer_programming%29" rel="wikipedia" title="Comment (computer programming)">/*</a> The Up and Down <a class="zem_slink" href="http://en.wikipedia.org/wiki/Button" rel="wikipedia" title="Button">buttons</a> can be used to navigate to the top and bottom of the page content, especially when on the main page there are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s1600/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger widgets, blogger navigation" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s200/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" title="how to add back to top go to bottom navigation in blogger" width="200" /></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> Demo You can see a live demo on my blog, the buttons are located on the right side. How to put Go Up and Go Down buttons using the <a class="zem_slink" href="http://jquery.com/" rel="homepage" title="JQuery">jQuery</a> slide effect <a class="zem_slink" href="http://en.wikipedia.org/wiki/USMLE_Step_1" rel="wikipedia" title="USMLE Step 1">Step 1</a>. Go to Template, click on the Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia" title="HTML">HTML</a> button <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s1600/blogger-template-edit-html.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s400/blogger-template-edit-html.png" width="400" /></a></div> Step 2. Select the "Expand Widget Templates" box <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s1600/blogger-expand-widget-templates.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s320/blogger-expand-widget-templates.png" width="320" /></a></div> Step 3. Search (using <a class="zem_slink" href="http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts" rel="wikipedia" title="Table of keyboard shortcuts">CTRL + F</a>) for the following piece of code: <blockquote class="tr_bq"> ]]></b:skin></blockquote> Step 4. Just above this code, paste this one: <blockquote class="tr_bq"> /* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #<a class="zem_slink" href="http://en.wikipedia.org/wiki/Civilian_Conservation_Corps" rel="wikipedia" title="Civilian Conservation Corps">CCC</a>; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUdelsPJ5E4HdlQd4gr-ZLwIikDFNJga8uel0exKaBYyIpof9RY4hiPLCHFE2ATK23CFK_H7NDVlE7lzgWjA5sbyKaTu-P025GBefZqVZrp2LoP-tvGx37ou6NHNjkJayi_69JxrE_drE/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; /* <a class="zem_slink" href="http://en.wikipedia.org/wiki/Web_button" rel="wikipedia" title="Web button">Button</a>'s width */ height:20px; /* Button's height */ bottom:280px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .button_down{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZwTfp2whlkvJ8Potpv9stHiT6hE9crgoWGZYVpeZYo9VbdAmcZufhMsufDivyPZrc7lRTQvCg_5XODmo2gIXy5WOY30DrP9gjngdBlEan1qvaQcW3x5TkughVhQKhpHTpr1CPIIZ58s/s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:242px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }</blockquote> Note:  - in green are some annotations that explains what styles you can modify on their left side.            - You can change the arrows by changing the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia" title="Uniform resource locator">URLs</a> in blue.            - To change the buttons background color of buttons, change the white text with your color Step 5. Now search (CTRL + F) for this tag: <blockquote> </body></blockquote> Step 6. And just above it, paste the following code: <blockquote class="tr_bq"> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <div class='button_up' id='button_up' style='display:none;'/> <div class='button_down' id='button_down' style='display:none;'/> <script> //CDATA[ (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})(); $(function() { var $elem = $('body'); $('#button_up').fadeIn('slow'); $('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#button_up,#button_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#button_up,#button_down').stop().animate({'opacity':'1'}); }); $('#button_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#button_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );}); //]]> </script></blockquote> Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one. Step 7. Finally, Save your Template. Enjoy! <div class="post-title entry-title" style="text-align: justify;"> </div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div> </div>

add go to top and go to bottom buttons Using jQuery in Blogger

/* The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are m...

Manually adding a Disqus gadget to Blogg

<div dir="ltr" style="text-align: left;" trbidi="on"> <div id="support-main"> <div class="article-content"> If the <a href="http://disqus.com/admin/blogger">Disqus gadget installer</a> isn't working, you have the option of manually installing the gadget on your Blogger site. This will require editing your Blogger template HTML, so it won't work with Dynamic Views templates.  Add a new gadget <ol> <li>Go to your Blogger "Layout" section and click Add a gadget in the sidebar <img alt="" src="http://dl.dropbox.com/u/13552259/Screenshots/2h3r9~oj9gtu.png" /></li> <li>In the Add a Gadget popup, scroll down to find the HTML/Javascript gadget and click the + button <img alt="" src="http://dl.dropbox.com/u/13552259/Screenshots/p91e~aniyct_.png" /></li> <li>Enter Disqus as the title and the following code for the content: <pre><code></code></pre> </li> <li>Click save and the window will close</li> <li>Click Save arrangement in the Layout viewer</li> </ol> <h2> Add the Disqus code to your template</h2> <ol> <li>Go to your blog's Template section and then click the "Edit template" button <img alt="Edit template button within Blogger template editor" src="http://disqus-cloudfront.s3.amazonaws.com/docs/install-blogger-edittemplate.png" /></li> <li>Click inside the text area and search for the widget you just created in your HTML template by pressing Ctrl-F (Command-F on OSX) then typing Disqus. You should find the following line: <pre><code><b:widget id='HTML1' locked='false' title='Disqus' type='HTML'></code></pre> </li> <li>Change that line to add mobile='yes' to load Disqus on your mobile template. It will look like this when you're done: <pre><code><b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'></code></pre> </li> <li>Below that locate and DELETE the following code right before the closing tag. The section you're deleting should look like this: <pre><code><b:includable id='main'>  <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable></code></pre> </li> <li>BEFORE the closing <code></b:widget></code> tag, add the following Disqus code (remember to change EXAMPLE to your site's shortname – you should leave both '&#39;' characters on either side of the shortname): <pre><code><b:includable id='main'> <script type='text/javascript'> var disqus_shortname = &#39;EXAMPLE&#39;; var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;; if (!disqus_blogger_current_url.length) { disqus_blogger_current_url = &quot;<data:blog.url/>&quot;; } var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;; var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;; </script> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #comments {display:none;} </style> <script type='text/javascript'> (function() { var bloggerjs = document.createElement(&#39;script&#39;); bloggerjs.type = &#39;text/javascript&#39;; bloggerjs.async = true; bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;; (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs); })(); </script> </b:if> <style type='text/css'> .post-comment-link { visibility: hidden; } </style> <script type='text/javascript'> (function() { var bloggerjs = document.createElement(&#39;script&#39;); bloggerjs.type = &#39;text/javascript&#39;; bloggerjs.async = true; bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;; (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs); })(); </script> </b:includable></code></pre> </li> <li>Click Save template. Assuming there are no errors, Disqus should properly show up on your site now.</li> <li> (Optional) Verify that the meta tags in your Blogger Template do not force Internet Explorer to load using IE7 standards. For more information see <a href="http://help.disqus.com/customer/portal/articles/666084-troubleshooting-disqus-in-internet-explorer-8-9-10#IE7-standards">Troubleshooting Disqus in Internet Explorer 8/9/10</a> </li> </ol> </div> </div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=b9b83919-29a1-4dbf-940d-05cbeff21651" style="border: none; float: right;" /></div> </div>

Manually adding a Disqus gadget to Blogg

If the Disqus gadget installer isn't working, you have the option of manually installing the gadget on your Blogger site. This will req...

Meta Tag Generator

<div dir="ltr" style="text-align: left;" trbidi="on">   <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td valign="top"><table border="0" cellpadding="0" cellspacing="0" style="width: 300px;"> <tbody> <tr> <td height="16" width="16"><img height="16" src="http://images.devshed.com/sc/seotools/image_01.gif" width="16" /></td> <td background="http://images.devshed.com/sc/seotools/bckg06.gif" height="16" width="130"><img height="16" src="http://images.devshed.com/sc/seotools/spacer.gif" width="130" /></td> <td background="http://images.devshed.com/sc/seotools/bckg06.gif" height="16" width="118"><img height="16" src="http://images.devshed.com/sc/seotools/spacer.gif" width="150" /></td> <td background="http://images.devshed.com/sc/seotools/bckg06.gif" width="40"><img height="16" src="http://images.devshed.com/sc/seotools/spacer.gif" width="40" /></td> <td height="16" width="18"><img height="16" src="http://images.devshed.com/sc/seotools/image_02.gif" width="16" /></td> </tr> <tr> <td background="http://images.devshed.com/sc/seotools/bckg07.gif" height="30"></td> <td bgcolor="#CCCCCC" class="toolbox" colspan="2" valign="top" width="*">Meta Tag Generator Tool © <a href="http://www.seochat.com/">SEO Chat™</a> <form action="http://www.seochat.com/seo-tools/meta-tag-generator?tool=3?tool=3&code=1/?tool=3" class="tool-form" method="POST" name="form"> <input name="go" type="hidden" value="1" /> <h5> Keywords</h5> List of relevant keywords<textarea cols="30" name="keywords" rows="5" tabindex="1">