Cara Buat Tombol Back To Top di Blogspot

<p>Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini</p><p><img alt="Cara Buat Tombol Back To Top di Blogspot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzvmVrGPtYL9gEK-KRYSGd3wSmNCX4RzTFP5cP1t2wOnxbshp0fV9BnKtAxQeJ1VHiDYffCrMWamEqKD7E1aa90dE8TGnh3JXjdIU8fgKpzEVSKJEaje8ymALyFwDvixyzjWs4Mnx5uqU/" style="float:left; margin:0 1% 0 0;" title="Tombol Back To Top"/>Fitur <a href="http://en.wikipedia.org/wiki/Wikipedia:Back_to_top" target="_blank">back to top</a> yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi <a href="http://bloggerpeer.blogspot.com/2011/11/animasi-bintang-jatuh-adalah-sebuah.html">bintang jatuh dari kursor</a> yang menggunakan javascript biasa. Kelebihan nya juga adalah efek <a href="http://bloggerpeer.blogspot.com/2011/11/cara-buat-tombol-back-to-top-blog.html"><span style="color: black;">back to top</span></a> ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti <a href="http://bloggerpeer.blogspot.com/">tips & tricks blogger</a> berikut.</p><p> </p><h3>Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger</h3><ul><li>Silahkan login di Blogger </li><li>Pilih Template > Edit HTML > klik Expand Widget Template </li><li>Cari kode </body>  (gunakan CTRL+F) </li><li>Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi) </li></ul><blockquote><p><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></p></blockquote><ul><li>Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas </li></ul><blockquote><p><script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/> <br /><!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com --> <br /><a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKz5qKE1NCxp2m6KdHZU7SnyxZpENqKrPrHyJS1_OsRkmtM82FoO1ie8YfcMvcGSqNXWXSXZmOkGj-exfRojXGa5IzxL1k4gkJYf9QFbmYUl99tmaOT9GPWNx3bqxxekF-43NC3ufRK2w/s1600/back-to-top.gif'/></a></p></blockquote><ul><li>Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai </li></ul>

Posted by Hii Sekai

Cara Buat Bintang Jatuh dari Kursor

<p>Cara membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat</p><p><img alt="Cara Buat Bintang Jatuh dari Kursor" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOEOReaM0T02zSzLOIC7EPcSb9GVspl2oQj8KCmzmjm3h3O0HAwt0wCUvrEQJLVM5y4oX6bAs-A47QOOLlH6lu-AYVXyhrPcBlFnMMyqhU1qOPoQn8tWq_hEUA1MLnNoDyT_6rNGHhzOc/" style="float:left; margin:0 1% 0 0;" title="Bintang Jatuh"/></p><p>Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi <a href="http://bloggerpeer.blogspot.com/2011/11/animasi-bintang-jatuh-adalah-sebuah.html"><span style="color: black;">bintang jatuh</span></a> yang satu ini. Cara membuat <a href="http://id.wikipedia.org/wiki/Bintang_jatuh" target="_blank"><span style="color: black;">bintang jatuh</span></a> ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan <a href="http://bloggerpeer.blogspot.com/2011/11/colorpic-software-kode-warna-html.html">Colorpic software</a>, tertarik? silahkan ikuti <a href="http://bloggerpeer.blogspot.com/">tutorial blogger</a> dibawah ini</p><div class="separator" style="clear: both;"></div><div class="separator" style="clear: both;"></div><h3>Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger</h3><ul><li>Login di Blogger </li><li>Pilih Design > Add gadget > HTML/Javascript </li><li>Masukkan kode dibawah ini ke kolom HTML/Javascript </li></ul><blockquote><p><script type='text/javascript'> <br />// <![CDATA[ <br />var colour="#<span style="color: red;">52D8ED</span>"; <br />var sparkles=100; <br />var x=ox=400; <br />var y=oy=300; <br />var swide=800; <br />var shigh=600; <br />var sleft=sdown=0; <br />var tiny=new Array(); <br />var star=new Array(); <br />var starv=new Array(); <br />var starx=new Array(); <br />var stary=new Array(); <br />var tinyx=new Array(); <br />var tinyy=new Array(); <br />var tinyv=new Array(); <br />window.onload=function() { if (document.getElementById) { <br />var i, rats, rlef, rdow; <br />for (var i=0; i<sparkles; i++) { <br />var rats=createDiv(3, 3); <br />rats.style.visibility="hidden"; <br />document.body.appendChild(tiny[i]=rats); <br />starv[i]=0; <br />tinyv[i]=0; <br />var rats=createDiv(5, 5); <br />rats.style.backgroundColor="transparent"; <br />rats.style.visibility="hidden"; <br />var rlef=createDiv(1, 5); <br />var rdow=createDiv(5, 1); <br />rats.appendChild(rlef); <br />rats.appendChild(rdow); <br />rlef.style.top="3px"; <br />rlef.style.left="0px"; <br />rdow.style.top="0px"; <br />rdow.style.left="3px"; <br />document.body.appendChild(star[i]=rats); <br />} <br />set_width(); <br />sparkle(); <br />}} <br />function sparkle() { <br />var c; <br />if (x!=ox || y!=oy) { <br />ox=x; <br />oy=y; <br />for (c=0; c<sparkles; c++) if (!starv[c]) { <br />star[c].style.left=(starx[c]=x)+"px"; <br />star[c].style.top=(stary[c]=y)+"px"; <br />star[c].style.clip="rect(0px, 5px, 5px, 0px)"; <br />star[c].style.visibility="visible"; <br />starv[c]=50; <br />break; <br />} <br />} <br />for (c=0; c<sparkles; c++) { <br />if (starv[c]) update_star(c); <br />if (tinyv[c]) update_tiny(c); <br />} <br />setTimeout("sparkle()", 40); <br />} <br />function update_star(i) { <br />if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; <br />if (starv[i]) { <br />stary[i]+=1+Math.random()*3; <br />if (stary[i]<shigh+sdown) { <br />star[i].style.top=stary[i]+"px"; <br />starx[i]+=(i%5-2)/5; <br />star[i].style.left=starx[i]+"px"; <br />} <br />else { <br />star[i].style.visibility="hidden"; <br />starv[i]=0; <br />return; <br />} <br />} <br />else { <br />tinyv[i]=50; <br />tiny[i].style.top=(tinyy[i]=stary[i])+"px"; <br />tiny[i].style.left=(tinyx[i]=starx[i])+"px"; <br />tiny[i].style.width="2px"; <br />tiny[i].style.height="2px"; <br />star[i].style.visibility="hidden"; <br />tiny[i].style.visibility="visible" <br />} <br />} <br />function update_tiny(i) { <br />if (--tinyv[i]==25) { <br />tiny[i].style.width="1px"; <br />tiny[i].style.height="1px"; <br />} <br />if (tinyv[i]) { <br />tinyy[i]+=1+Math.random()*3; <br />if (tinyy[i]<shigh+sdown) { <br />tiny[i].style.top=tinyy[i]+"px"; <br />tinyx[i]+=(i%5-2)/5; <br />tiny[i].style.left=tinyx[i]+"px"; <br />} <br />else { <br />tiny[i].style.visibility="hidden"; <br />tinyv[i]=0; <br />return; <br />} <br />} <br />else tiny[i].style.visibility="hidden"; <br />} <br />document.onmousemove=mouse; <br />function mouse(e) { <br />set_scroll(); <br />y=(e)?e.pageY:event.y+sdown; <br />x=(e)?e.pageX:event.x+sleft; <br />} <br />function set_scroll() { <br />if (typeof(self.pageYOffset)=="number") { <br />sdown=self.pageYOffset; <br />sleft=self.pageXOffset; <br />} <br />else if (document.body.scrollTop || document.body.scrollLeft) { <br />sdown=document.body.scrollTop; <br />sleft=document.body.scrollLeft; <br />} <br />else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { <br />sleft=document.documentElement.scrollLeft; <br />sdown=document.documentElement.scrollTop; <br />} <br />else { <br />sdown=0; <br />sleft=0; <br />} <br />} <br />window.onresize=set_width; <br />function set_width() { <br />if (typeof(self.innerWidth)=="number") { <br />swide=self.innerWidth; <br />shigh=self.innerHeight; <br />} <br />else if (document.documentElement && document.documentElement.clientWidth) { <br />swide=document.documentElement.clientWidth; <br />shigh=document.documentElement.clientHeight; <br />} <br />else if (document.body.clientWidth) { <br />swide=document.body.clientWidth; <br />shigh=document.body.clientHeight; <br />} <br />} <br />function createDiv(height, width) { <br />var div=document.createElement("div"); <br />div.style.position="absolute"; <br />div.style.height=height+"px"; <br />div.style.width=width+"px"; <br />div.style.overflow="hidden"; <br />div.style.backgroundColor=colour; <br />return (div); <br />} <br />// ]]> <br /></script></p></blockquote><p>Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat</p><p>Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat</p>

Posted by Hii Sekai

Colorpic | Software Untuk Mengetahui Kode Warna HTML

<p><img alt="Download Colorpic Gratis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaCw25E9OXAfsvKGLHWJfc7tMCiK19t54yv3nJZumx5UW0CddqSTc8FrTPseRSp7Fc4tzHaIZP77_4C1azEd8hGigsA_O9-IuXUxSHsEW7vQ57zLYmkM8D7iri_qSd-NUSgX0ZayJxQU/" style="float:left; margin:0 2% 0 0;" title="Colorpic"/> Colorpic software untuk mengetahui kode warna HTML, Colorpic adalah sebuah desktop color picker software atau alat (tools) untuk mengetahui kode warna html yang sangat berguna bagi web designer ataupun blogger untuk meng-edit website atau blog khususnya dalam hal pengetahuan dan edit warna. Bagi saya sendiri colorpic adalah <a href="http://bloggerpeer.blogspot.com/2011/11/colorpic-software-kode-warna-html.html"><span style="color: black;">software kode warna</span></a> yang wajib saya miliki di komputer saya karena sangat membantu di saat saya kesulitan untuk mengetahui kode warna yang saya inginkan untuk meng-edit blog.</p><p>Cara kerja colorpic ini juga sangat mudah dan saya kira sobat juga pasti akan cepat bisa memahaminya, setelah selesai meng-instal sobat bisa langsung menggunakannya dengan hanya mengarahkan kursor atau mouse ke warna pilihan yang ada di desktop maka kode warna tersebut akan otomatis diketahui, mudah bukan? untuk screenshot nya sobat bisa lihat gambar yang ada dibawah, gambar ini adalah contoh untuk mengetahui kode warna kuning dari <a href="http://bloggerpeer.blogspot.com/2011/11/yahoo-messenger-emoticons-smileys.html">Yahoo Messenger emoticons</a>.</p><p><img alt="Colorpic, Software Untuk Mengetahui Kode Warna HTML" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpXqbL_mWEoUTsA_V_oY5L_tgk6Xvc_2AQemNu_TmIpDV_94UA_7WLx6SnpLAAgLJt7vN05llk5Bt-K95dPs6c1l77yZq1e-IZBlYKHjzd-rTPM-6Iw0WSMFyiM27g7QJH5xyWrmEFjkc/" style="margin:0px auto;display:block" title="Colorpic Software"/></p><p>Gambar diatas adalah contoh pengambilan kode warna kuning dari YM buddy, hanya dengan meletakkan kursor ke warna tersebut maka kodenya pun dapat diketahui, mudah kan? nah bagi sobat yang ingin download software colorpic ini silahkan langsung menuju ke situs <a href="http://www.iconico.com/colorpic/" target="_blank">Iconico</a> dan bagusnya lagi software ini gratis tanpa bayar sepeser pun.</p>

Posted by Hii Sekai

Yahoo Messenger Emoticons (Smileys) di Blogspot

<p><img alt="Yahoo! Messenger (YM)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhza7gDr272LCJcb9HEhzv7iRj5wGynDywOUbe7i65VpGbDmby9vKpCMYcNwl5MZJaA58UXUYQQqm6sf_zwAi7kmAnWZE5JPI8ScMK5FOPeUs5HjDyGAZJy6E9MzsuTz3i3u3UCgMDlvxY/" style="float:left; margin:0 1% 0 0;" title="Yahoo Messenger"/>Cara membuat/memasang Yahoo! messenger emoticons di kotak komentar Blogger, YM emoticons adalah kumpulan smileys / ikon yang dimiliki oleh yahoo untuk menggambarkan atau mengekspresikan suasana perasaan kita pada saat kita chat sama teman-teman kita, ikon tersebut bisa dalam bentuk gambar yang bergerak maupun tidak, mungkin dari sobat blogger sudah tidak asing lagi dengan emoticons ini bukan? <a href="http://bloggerpeer.blogspot.com/2011/11/yahoo-messenger-emoticons-smileys.html"><span style="color: black;">Yahoo emoticons</span></a> ini bisa kita lihat pada software Yahoo messenger, bagi yang belum punya software YM bisa di download di situsnya Yahoo! biasanya sih online installer sama seperti aplikasi <a href="http://bloggerpeer.blogspot.com/2011/11/menulis-dengan-windows-live-writer.html" target="_blank">Windows Live Writer</a> saat di-instal minta koneksi internet tapi yang full installer juga ada kok tinggal search aja di om Google</p><h3>Cara Memasang Yahoo Messenger Emoticons di Kotak Komentar Blogger</h3><p>Secara default kotak komentar (form comment) Blogger platform tidak dilengkapi dengan emoticons, tapi sobat jangan khawatir dengan sedikit tips dan trik kita bisa mengakalinya dengan memasang dan menambahkan sedikit script yang berisi beberapa kumpulan <a href="http://messenger.yahoo.com/features/emoticons/" target="_blank">Yahoo messenger emoticons</a> yang umum dipakai dalam chat.</p><p>Langkah-langkahnya adalah :</p><ul><li>Login di Blogger > Template > Edit HTML </li><li>Centang pada Expand Widget Templates </li><li>Cari kode dibawah ini </li></ul><blockquote><p><b:if cond='data:post.embedCommentForm'> <br /><b:include data='post' name='comment-form'/></p></blockquote><p>Copy kode dibawah ini kemudian letakkan (paste) diantara kode diatas</p><blockquote><p><div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #2b2b2b; padding: 5px; height:86'> <br /><b> <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :)) <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;)) <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;) <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;) <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :(( <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :) <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :( <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =(( <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/ <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-* <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :| <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-} <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)] <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x( <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-( <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x( <br /><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =)) <br /></b> <br /></div></p></blockquote><p>Kemudian cari kode </body></p><p>Copy kode dibawah ini dan paste tepat diatas kode </body></p><blockquote><p><script src="https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/smiley.js" type="text/javascript"/><noscript><a href="http://bloggerpeer.blogspot.com" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript> </p></blockquote><p>Terakhir simpan dan sobat sudah bisa menggunakan emoticon dari Yahoo ini.</p><br /><b>Note</b><br /><p>Trik memasang YM emoticon diatas tidak bisa diterapkan pada sistem komentar yang baru (threaded comment), tetapi kalau anda masih memasang sistem komentar yang lama pada blog anda tidak ada salahnya mencoba trik diatas</p>

Posted by Hii Sekai

Windows Live Writer | Menulis Artikel Blog Post Offline

<p>Menulis artikel blog post dengan Windows Live Writer secara offline, Windows Live Writer adalah sebuah aplikasi desktop publishing blog yang dikembangkan oleh Microsoft yang merupakan bagian dari Windows Live, kegunaan aplikasi ini salah satunya adalah sobat bisa menulis artikel langsung dari desktop tanpa harus masuk ke dashboard editor blog untuk menulis artikel post</p><p><img alt="wlw - Menulis Artikel Post Dengan Windows Live Writer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGoJruERsINfbM31NcRgk39xT5tQ3hyphenhyphenwlUekH88L5AYjsbJ-xNgMxBUmrsCi3jRrwwtLgbul-xyq5ejVA6z8pCL8QBEtOWqT9pQCX4xpC88fY_Rrauje_hHAue2MYTOJvnv9lScGkFVuA/" style="float:left; margin:0 1% 0 0;" title="wlw - windows live writer"/>Selain itu sobat juga dapat menulis dan memasukkan foto secara offline dengan aplikasi <a href="http://bloggerpeer.blogspot.com/2011/11/menulis-dengan-windows-live-writer.html"><span style="color: black;">Windows Live Writer</span></a> (WLW) ini, hal itu sangat menguntungkan bagi sobat yang mempunyai koneksi internet yang lambat apalagi kalau hanya mengandalkan WIFI gratisan  untuk koneksi internet, jadi sobat bisa menulis banyak artikel dan disimpan di draft kemudian sobat bisa publish artikel post nya kapan saja sobat sempat, sangat menghemat waktu dan biaya bukan? sobat juga bisa memasukkan link (hyperlink), maps, tabel (table), video, tags dan masih banyak lagi yang lainnya. Tidak salah kenapa aplikasi ini banyak dipakai oleh para blogger diseluruh dunia karena kemudahannya itu, dan mungkin menjadi salah satu tools yang wajib dimiliki oleh penulis ataupun blogger.</p><h3>Apakah Windows Live Writer Application berguna untuk SEO?</h3><p>Jawabannya adalah “IYA” aplikasi ini juga bermanfaat untuk SEO, secara default Blogger platform tidak mendukung Self Pinging Service yang berguna untuk memberitahukan search engine bahwa sobat telah mempublikasikan artikel baru atau meng-edit artikel, tetapi dengan WLW hal itu bisa sobat lakukan. Itulah sebabnya kenapa sobat harus mencoba menggunakan aplikasi gratis ini.</p><p>Cara kerjanya adalah setiap kali publish artikel post baru lewat WLW, sobat bisa langsung ping artikel sobat dan dengan cara itu akan mempercepat artikel post sobat ter-index oleh search engine, dan juga service ini akan memberikan posisi yang lebih baik di SERP (Search Engine Result Page), tetapi selain itu sobat juga harus optimasi SEO onpage seperti menambahkan <a href="http://bloggerpeer.blogspot.com/2011/11/cara-buat-breadcrumb-seo-friendly.html" target="_blank">navigasi breadcrumb</a> atau optimasi SEO offpage agar blog sobat lebih mantap di SERP, WLW ini hanyalah faktor kecil untuk optimasi SEO khususnya format penulisan artikel post yang benar dan SEO friendly</p><p>Cara untuk ping artikel post adalah buka Windows Live Writer kemudian Tools > Options > Ping Servers. Kemudian centang pada “Send pings to the url below”. Copy list url yang dibawah ini kemudian paste di kolom yang tersedia</p><p>http://rpc.pingomatic.com <br />http://rpc.twingly.com <br />http://api.feedster.com/ping <br />http://api.moreover.com/RPC2 <br />http://api.moreover.com/ping <br />http://www.blogdigger.com/RPC2 <br />http://www.blogshares.com/rpc.php <br />http://www.blogsnow.com/ping <br />http://www.blogstreet.com/xrbin/xmlrpc.cgi <br />http://blogsearch.google.co.za/ping/RPC2 <br />http://blogsearch.google.com.au/ping/RPC2 <br />http://blogsearch.google.com.br/ping/RPC2 <br />http://blogsearch.google.com.do/ping/RPC2 <br />http://blogsearch.google.com.vn/ping/RPC2 <br />http://blogsearch.google.hr/ping/RPC2 <br />http://blogsearch.google.ie/ping/RPC2 <br />http://blogsearch.google.nl/ping/RPC2 <br />http://blogsearch.google.pl/ping/RPC2 <br />http://ping.kutsulog.net/ <br />http://bulkfeeds.net/rpc <br />http://www.newsisfree.com/xmlrpctest.php <br />http://ping.blo.gs/ <br />http://ping.feedburner.com <br />http://ping.syndic8.com/xmlrpc.php <br />http://ping.weblogalot.com/rpc.php <br />http://rpc.blogrolling.com/pinger/ <br />http://rpc.technorati.com/rpc/ping <br />http://rpc.weblogs.com/RPC2 <br />http://blo.gs/ping.php <br />http://www.pingerati.net <br />http://www.pingmyblog.com <br />http://geourl.org/ping <br />http://ipings.com <br />http://www.weblogalot.com/ping</p><p>Url ping servers diatas hanyalah beberapa saja dan sobat bisa mencari (search) list ping servers ter-update lainnya di Google</p><h3>Cara Instal Windows Live Writer di Komputer</h3><p>Untuk instal / pemasangan WLW ini juga sangat gampang, sobat hanya download aplikasi nya di situs <a href="http://windows.microsoft.com/en-us/windows-live/essentials-other-programs" target="_blank">Microsoft Windows Live Essentials</a> dan langsung di-instal di komputer sobat pada saat online (online installer). Dibawah ini adalah sedikit contoh screenshot instalasi-nya yang saya ambil ketika saya memasangnya di komputer saya</p><p><img alt="wlw-instalasi 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJLut6PI4kRswQ6w3hnLBl5i8thjacy_qANebfwbUdMXYSpHRg-tpMHGtIqoJOioBue8fiB9WJgJBmTYjzfvOz-FzhC29IppHhKjqqXgBcgsmWKcSkU0HP_2YRHAl-THDxqT7SqH3mSO0/" style="margin:0px auto;display:block" title="wlw-instalasi 1"/></p><p><img alt="wlw-instalasi 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaDweOJo6RmkxSP5OngFZi5Qu-NJJ_HLD4PxF52UTwMkHlPhAPzBEoKW9OcoeohdJX6z-MtiIFXwjsNhqpjSehGiS1xvzAbBiph4GjgfbdKFy-iMqxo7szGHoUF4OFDc0KHdEkG1XjVYE/" style="margin:0px auto;display:block" title="wlw-instalasi 2"/> </p><p>Setelah sobat download dan instal maka akan mucul pemberitahuan aplikasi apa saja yang ingin di pasang, saya sarankan centang pada “writer” saja, tapi kalau sobat juga ingin memasang aplikasi lainnya sobat bisa pilih sesuai dengan keinginan sobat</p><p>Setelah proses instalasi selesai kemudian sobat masukkan blog sobat beserta username dan password blog sobat</p><p><img alt="wlw-instalasi 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbVt-Napnezy5moBOVAieYTXoDGRg8mwI4URMr1HiqfmKydfyjevXTj7rO5n4DqLXmHBtwnJf4fIk9j1gYk4j8uNj7hYf7eKApC9jzhjV00KgxsOGR_jueHGgOA1LhwIsQyMi9-8AoCX0/" style="margin:0px auto;display:block" title="wlw-instalasi 3"/></p><p><img alt="wlw-instalasi 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZv98vKOxHitFNa6x7Fj4P3T2T5-Ad964WdB1c_Ht5nwYNb4UbOellW67SgCyktioCBJz51zbWpk48N8CYPQ1Vcc6y2DeJtMrvTu32Kr6x4FDlMqqUguoUvYCeclX83hYvYCOclusb-bg/" style="margin:0px auto;display:block" title="wlw-instalasi 4"/> </p><p>Untuk pengguna wordpress sebelum mengisi semuanya diatas sobat harus login masuk ke dashboard terlebih dahulu. Masuk ke Setting > Writting dan turun kebawah dan centang pada XML-RPC seperti gambar dibawah, dan kemudian sobat lanjutkan dengan mengisi form seperti diatas</p><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6eGjs8adabn9EUwKe4zHD-rmQEYca-CzQzlWtkj1dLnET87AgrgkTZpJhdInTNbikudWH2IAmB2X2pBmY3Q6zur6RUESzB0ztd0ueC9LVYGDJt_PAufq_gYXT28m0MS540y37bCMrqA/s1600-h/wlw-wordpress%25255B5%25255D.jpg"><img alt="wlw setting pada wordpress" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pmBgbpbk6nUUhjfttjqA6slUmlcaJ-0jKxymFNi-DUD518RAYPeiFvmguPTSpal-evnJJeHs2quEhcBlj0_L9ieq-olDOI0NHqeiJCK_JFaF-WXlONxMfqgvS1SqlMyhymm4hYveu1Q/" style="margin:0px auto;display:block" title="setting pada wordpress"/></a></p><p>Kemudian terakhir klik finish dan sobat telah siap menggunakan aplikasi Windows Live Writer ini, bagi sobat yang sudah menggunakan aplikasi ini mungkin bisa sharing sedikit kelebihan-kelebihan lainnya atau kekurangannya. Kebetulan saya juga masih baru dalam menggunakan aplikasi ini jadi belum sempat menjelajahi kelebihan atau kekurangan lainnya</p><p>Good Luck Sob..!!</p>

Posted by Hii Sekai

Cara Buat Breadcrumb Seo Friendly di Blog

Breadcrumb navigation adalah sebuah menu yang dipakai untuk navigasi halaman sebuah website atau blog, sehingga akan memudahkan visitor atau pembaca untuk me-navigasi halaman blog atau website sobat. Dalam SEO, pemasangan <a href="http://bloggerpeer.blogspot.com/2011/11/cara-buat-breadcrumb-seo-friendly.html"><span style="color: black;">breadcrumb</span></a> adalah wajib yang sangat berguna untuk mempermudah seacrh engine untuk menjelajah atau crawling halaman blog sobat sehingga blog akan menjadi SEO friendly dan disenangi oleh search engine bot, dan juga blog sobat akan cepat ter-index oleh search engine ( Google khususnya )<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Cara Pasang Navigasi Breadcrumb di blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwbpK8HmU77H8jFKfw-mYOmZXzPb-aJfvn41Uj60pt-HOREeWVP6S_otThlE8qEvMDPvFzH4mW5jlznhgSrqEep_4h-Clf2W46YFfhOkGVRQLs8LAVUlbpqyWaC6kF5PUPcSopEmNQUo/s1600/Navigasi+Breadcrumb.png" style="margin:0px auto;display:block" title="Navigasi Breadcrumb" /></div><div class="separator" style="clear: both;"></div><p>Gambar diatas adalah contoh <a href="http://en.wikipedia.org/wiki/Breadcrumb_(navigation)" target="_blank"><span class="Apple-style-span" style="color: black;">breadcrumb navigation</span></a> yang saya ambil dari screenshot blog saya ini, kebetulan judul post-nya waktu itu adalah tentang <a href="http://bloggerpeer.blogspot.com/2011/10/membuat-burung-twitter-terbang-blogspot.html">burung twitter terbang</a>, untuk membuat dan memasang breadcrumb saya kira tidak begitu sulit jadi sobat bisa membuat nya dengan <a href="http://bloggerpeer.blogspot.com/">tutorial blogger</a> yang saya berikan berikut ini:</p><p></p><h3>Cara Membuat Navigasi Breadcrumb Seo Friendly di Blogspot</h3><ul><li>Login di Blogger</li><li>Pilih Design </li><li>Pilih Edit Html</li><li>Centang pada Expand Widget Templates</li><li>Cari kode ]]></b:skin></li><li>Copy paste kode dibawah ini tepat diatas kode ]]></b:skin></li></ul><div style="border: 1px solid #ccc; height: 70px; margin: 0; overflow: auto; padding: 10px; width: 400px;">.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}</div><br /><ul><li>Kemudian cari kode seperti di bawah ini</li></ul><b><span class="Apple-style-span" style="color: blue;"><div class='post hentry uncustomized-post-template'></span></b><br />Kalau kode diatas tidak ada, coba sobat cari kode yang seperti dibawah ini<br /><b><span class="Apple-style-span" style="color: blue;"><div class='post hentry'></span></b><br /><b><span class="Apple-style-span" style="color: blue;"><br /></span></b><br /><ul><li>Letakkan kode dibawah ini tepat diatas salah satu kode biru diatas</li></ul><div style="border: 1px solid #ccc; height: 70px; margin: 0; overflow: auto; padding: 10px; width: 400px;"><b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag,nofollow'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if></div><br /><ul><li>Klik save dan sobat sudah berhasil membuat Breadcrumb yang SEO friendly</li></ul><span style="color: red;"><b>Update</b></span><br /><ul></ul><div><a href="http://bloggerpeer.blogspot.com/2012/06/cara-buat-breadcrumbs-index-google.html">Membuat Breadcrumbs ter-index Google</a></div>

Posted by Hii Sekai