Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Rabu, 23 November 2016

Review web lokerjatengdiy

Review web Lokerjatengdiy yang sedang ikut kontes seo lomba review produk PERTAMINA dengan tema, PERTAMINA Solusi bahan bakar berkualitas dan ramah lingkungan, menampilkan informasi penggunaan LPG untuk kehidupan sehari hari, Lpg produk PERTAMINA yang ramah lingkungan dan berkualitas, merupakan soulusi dari keluarga - keluarga untuk kebutuhan sehari hari.

Produk PERTAMINA yang ramah lingkungan memang merupakan komitmen pemerintah untuk selalu berkembang melayani masyarakat.

Pertamina Solusi Bahan Bakar Berkualitas dan Ramah Lingkungan

Sabtu, 02 Agustus 2014

Evo Magz: Template Blogger Keren Responsive & SEO Friendly

Halo.. sahabat Blogger apa kabar? Blogger Peer kembali lagi setelah lama menghilang tentunya dengan desain dan tampilan yang baru. Terima kasih selama ini telah berkunjung ke blog ini dan mohon maaf kalau komentar anda semua tidak sempat saya balas, karena kesibukan saya dalam pekerjaan dan waktu istirahat sedikit jadinya untuk nyalurin hobby untuk nge-blog juga sedikit. Okey.. sesuai dengan judul post ini Evo Magz: Template Blogger Keren Responsive & SEO Friendly adalah template yang saya pakai di blooger.co.id sekarang, kenapa saya memakai template Evo Magz? karena saya sangat suka dengan tampilan elegan, simple, fast loading, SEO friendly dan responsive dari Evo Magz Blogger magazine theme ini. Saya banyak ketinggalan dari teman-teman Blogger yang lainnya dalam perkembangan dunia Blog dan SEO, apalagi sekarang menggunakan template HTML5, menerapkan Schema.org markup dan responsive design adalah hal yang sangat direkomendasikan oleh semua search engine termasuk Google yang tentunya sangat berpengaruh positif pada perkembangan SEO pada blog (Onpage SEO) dan agar bisa terindeks cepat oleh search engine dan juga agar mobile friendly karena sekarang ini hampir 75% orang-orang menggunakan internet dengan mobile ataupun tablet. Mungkin ada yang bertanya kenapa template yang dulu saya ganti? dan kenapa tidak di-edit saja sendiri agar bisa responsive? padahal template itu tampilannya lumayan bagus, jawabannya adalah sederhana template saya yang dulu tidak memakai HTML5, tidak responsive, tidak memakai Schema markups dan juga skill saya dalam hal designing dan waktu untuk meng-edit terbatas makanya saya memakai template yang langsung jadi dan tinggal memasang saja, cuman saya hanya merubah sedikit tampilan sidebar dan merubah form komentarnya memakai versi comments form dari Adhy Suryadi www.kompiajaib.com

Evo Magz Blogger Template

Evo Magz adalah template yang dibuat oleh Mas Sugeng, salah satu Blogger Indonesia yang template hasil karyanya banyak dipakai oleh para Blogger. Dibawah ini adalah beberapa fitur dari Evo Magz Blogger Template ini

Fitur-Fitur Evo Magz Template - SEO Friendly Responsive HTML5 Blogger Theme

  • 100% Responsive
  • Custom Mobile Template
  • SEO Optimized
  • Ad and AdSense Optimized
  • Fully Customizable
  • Font Awesome
  • Breadcrumb
  • Auto Readmore
  • Related Posts
  • Share Buttons
  • Tab View Widget
  • Recent Post Widget
  • Numbered Page Navigation
  • Back to Top button
  • Custom Error page
  • Facebook Comments
  • and much more

Demo bisa dilihat di blog ini atau klik disini

Nah bagi anda yang ingin memakai template Evo Magz ini silahkan kunjungi blog-nya Mas Sugeng di www.mas-sugeng.com

Kamis, 30 Januari 2014

Alexa | Cara Cepat Meningkatkan Alexa Rank

Alexa Rank | Cara Meningkatkan/Menaikkan Ranking Alexa di blog/website, tidak bisa dipungkiri lagi Alexa rank sangat berperan penting didalam karir blogging anda khususnya bagi anda yang memang Blogger profesional, banyak blog yang mempunyai Google pagerank dan traffic tinggi tetapi Alexa rank nya masih tetap rendah, mungkin ada beberapa dari anda belum mengetahui bahwa sebenarnya Alexa rank tidak ada hubungannya dengan Google pagerank.

Alexa Traffic Rank | Cara Meningkatkan Alexa Rank

Banyak perdebatan diantara para Blogger, Webmaster, maupun pakar SEO terhadap sistem ranking Alexa untuk blog maupun website. Banyak orang yang bingung kenapa situs mereka yang mempunyai traffic tinggi tetapi ranking Alexa nya tidak kunjung naik? Hal ini disebabkan karena Alexa menghitung traffic pada suatu situs dari browser yang ter-instal Alexa toolbar, jadi traffic dari browser yang tanpa di instal Alexa toolbar tidak termasuk didalam algoritma ranking Alexa. Tetapi kenyataannya algoritma dari sistem ranking Alexa untuk blog maupun website adalah salah satu yang terbaik di dalam industri ranking online.

Konten
Pengertian Alexa Rank | Apa Itu Alexa Rank
Teknik yang Terbukti Untuk Cepat Menaikkan Alexa Rank
Claim Your Site Pada Situs Alexa
Install Alexa Toolbar Pada Browser
Update Konten Blog Secara Teratur Agar Cepat Meningkatkan Alexa Traffic Rank
Konten Yang Berkualitas
Link Building
Blog Commenting
Konten Spesial untuk Webmasters
Alexa Pro

Pengertian Alexa Rank | Apa Itu Alexa Rank

Alexa rank merupakan salah satu indikator kepopuleran suatu situs dan juga sering dipakai untuk menilai kualitas suatu situs, situs yang mempunyai kualitas tinggi dari segi konten, backlink, dan traffic akan memiliki Alexa rank yang kecil, contoh: google.com (Alexa rank #1), facebook.com (Alexa rank #2).

Teknik yang Terbukti Untuk Cepat Menaikkan Alexa Rank

Dibawah ini adalah beberapa cara/teknik untuk menaikkan Alexa rank yang sudah terbukti dapat meningkatkan Alexa rank dengan cepat.

Claim Your Site Pada Situs Alexa

Claim Your Site, untuk meningkatkan ranking Alexa sebelumnya anda harus register dan claim blog/website anda terlebih dahulu dan menempatkan Alexa ID Meta tag pada bagian head di template anda, maka Alexa akan mempermudah mengakses situs anda. Site description, country name dan profile adalah hal yang sangat penting ketika melakukan claiming. Selalu gunakan keyword sesuai dengan tema blog anda ketika mendeskripsikan situs anda, meskipun itu adalah hal yang kecil tapi sangat membantu untuk menaikkan ranking Alexa pada blog anda.

Install Alexa Toolbar Pada Browser

Memasang/Install Alexa Toolbar pada browser anda adalah hal yang wajib anda lakukan untuk menaikkan Alexa rank. Anda harus meng-update blog anda menggunakan browser yang sudah ter-instal Alexa toolbar, semua aktivitas yang anda lakukan pada blog anda harus menggunakan browser yang sama dan sudah terinstal Alexa toolbar.

Update Konten Blog Secara Teratur Agar Cepat Meningkatkan Alexa Traffic Rank

Update konten secara teratur pada blog anda adalah cara yang sangat bagus untuk meningkatkan Alexa rank, Alexa sangat menyukai fresh konten sama halnya dengan Google. Saya pernah membaca pada sebuah situs yang terkenal bahwa meng-update blog 7-10 kali dalam seminggu akan sangat cepat menaikkan Alexa rank.

Konten Yang Berkualitas

Alexa juga mempertimbangkan page view, bounce rate, ketika me-ranking situs anda. Unik dan fresh konten akan membuat pengunjung blog anda akan betah berada pada blog anda, buatlah konten yang selalu sesuai dengan tema blog anda, konten yang tidak sesuai dengan tema blog akan berefek negatif bagi ALexa rank dan sangat merugikan.

Link Building

Alexa juga menghitung link, koleksi link atau backlink yang mengarah pada blog anda juga akan membuat Alexa rank meningkat, banyak cara untuk mendapatkan backlink seperti social bookmarking, link exchange, guest blogging, forum, dll.

Blog Commenting

Anda harus menyadari bahwa kebanyakan dari blog memiliki atribut NoFollow dalam sistem komentar mereka, Ini tidak membantu untuk meningkatkan Google pagerank. Dan, jika Anda berkomentar pada blog secara agresif untuk jangka panjang maka Anda mungkin menjadi korban dari massa spam oleh Google. Jangan takut, Anda percaya atau tidak, mesin pencari Google selalu mencari niat. Jika Anda memposting komentar konstruktif dengan menggunakan kata kunci dengan bijaksana, maka Google akan mengirimkan sinyal positif dan membantu Anda untuk meningkatkan Alexa rank.

Konten Spesial untuk Webmasters

Hampir semua webmaster dan pemilik blog menggunakan Alexa toolbar pada browser mereka, dan Jika Anda menulis posting khusus untuk mereka dengan optimasi mesin pencari yang optimal maka Alexa rank anda akan meningkat sangat cepat karena mereka akan mengunjungi blog anda dengan browser mereka yang sudah ter-instal Alexa toolbar. sedikit contoh konten untuk webmaster seperti membahas tentang SEO, Blogger, cara modifikasi website/blog, dll.

Alexa Pro

Jika anda seorang Blogger yang memang serius menekuni blogging dan mendapatkan keuntungan di dunia blog, tidak ada salahnya anda mencoba dan membeli Alexa Pro, selain untuk meningkatkan Alexa rank dengan cepat, anda juga bisa menikmati fitur -fitur lebih dari ALexa seperti mempromosikan website anda di Alexa search results, menambahkan company logo, link back ke situs anda, dll. Jika anda blogging hanya sekedar hobi seperti saya ini lebih baik memilih Alexa free saja.

Sabtu, 20 April 2013

Cara Buat/Pasang Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat,Cara Buat / Pasang Burung Twitter Terbang Di Blog hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

Pertama-tama silahkan login di Blogger

  • Klik Layout > Add Gadget > Html/Javascript
  • Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ85pp3ei73b3e1R2THbR8wAu-wm8tmZk-q84jKhYcTf7vUSnyAsMUqiKI22lgj_DsMazenQbQwRTLWr-ahkLDFxSCOGP7uR5B5a_zXkZrEwiioBoO5w-OnMPfG8K8jRNHjfvREQhQGAM/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://blooger.co.id/";
tripleflapInit();
</script>



  • Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
  • Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Rubah Warna Burung Twitter

Untuk membuat warna burung Twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibEm_uvdQXNesnRLmqsDV25EXHQv8N2qcm7zzbNU82xORyg3Co0g2HerEqwNVwLdK0MMd_fE4LbEYmOV8DtGhLlVfpM032eK72p0MuPx9Hz8bq98wYtCY8JHY_WGUiIr_NzLSmnlVOHTQ/s1600/yellow+bird.png
Warna Hitam

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdbFTfi2zUyfD6s4-lSB4UdB2mqUBQjlMTrgjIVQBqj90Vh1enYHIQQPaXSWV8MRdR-iY7SCo6L9Om5P2Rqs1jb45_-vJe1Tusd14-qlCGotfbqODO_w4qgEZbLAa1HLmevPLCZkj7IQ/s1600/black+bird.png
Warna Biru

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgVXf5ivyDlGkdJzgGLILfuZLdmEsTwxTtC9HFLmbdvNM-uTx2a8Sru1Ipkqw-nOw1znnhhbBFHOMeHZwjET20c2F8BXgCf3nUIGHr_Qk2M7sYo-kteZNCLsD6guiBM-Tkep_PkZ-0IU/s1600/Blue+bird.png
Warna Coklat

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9t1PI2joLDaavf-ncZ-CXkxU7pwop00CoAiRUVxlxx5pHRNjH56MY9caS8MMRJYMhVYh1U-M7t5sVVJwKyCVYWhibMmtdE6KxoAap5nrPrCEdUV2d2kFD4_pRrrzi5GbjwD69XabImbc/s1600/brown+bird.png
Warna Hijau

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6H9wReDlCUGObrgWGtbm93OeNUQyLl_rHDT-HXaUkPSY7tXba0gsl19j-ZzntTOjydX8Jlvhv6QpxsLe3ogC2xVMc1Jy2bDet8MqpolF3yclmuz9eSQXbijszjIurZZ5wxu71L2KqgQs/s1600/Green+bird.png
Warna Ungu

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDOQJMJoosM1LmN83UAz415wae8h6VXU74OCF3HA1l24RYLAbNm1q2AQuf6HUCAWIRQcUDjE5HEV79I2Hg84TE4F_He7WjetZL3E5GHRIdyz1UTW0yEji6auQBjIetLZKyBkAUzuS_hc/s1600/purple+bird.png
Warna Putih

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeevUi016bcV9095jnBmAwdtCl8uBgyTBwsDz0Gqk24J5-TojJ400IwndAXbvHMzkFHNuggnrNRbJUndcknSu2OEE56u0GKeXBuo459w37hfCqxO-uz8XABNrxxfydyzXN4lztmzhwHHw/s1600/white+bird.png
Warna Merah

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusE9Lv7k8RyYAJSmW-R4PGWW3paxD_iaf-uLF4H57tnTlYwjy3Tc9I-06of9OxjGh70SBukfXLMrj4VSc4XUcfMeqbgmRmk-rs7vi3GiXaLq9yzXD65H7jnaFW80SLr1cdLNAUzRq5g0/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!

Sabtu, 29 September 2012

Blogger | Kumpulan Tips Trik - Tutorial Blogspot

Blogger

Tips Trik Blogger - Kumpulan Tutorial Blogspot, artikel ini adalah beberapa kumpulan tips Blogger dan info dari blog saya blooger.co.id , meskipun koleksinya belum banyak tapi mudah-mudahan bisa membantu khususnya bagi anda yang sedang belajar membuat blog dengan platform Blogger/Blogspot, sebelumnya saya mohon maaf kalau ada satu atau beberapa tutorial yang mungkin tidak bisa digunakan atau tidak bisa bekerja dengan baik lagi dikarenakan oleh beberapa faktor, tetapi saya akan berusaha untuk meng-edit dan update kembali agar bisa digunakan dan berfungsi lagi

Kumpulan Artikel Tutorial Blogger & Tips Trik Blogspot

Alexa Rank | Cara Meningkatkan Ranking Alexa
Cara Membuat Burung Twitter Terbang Di Blogspot
Cara Buat Breadcrumb Seo Friendly di Blog
Windows Live Writer | Menulis Artikel Blog Post Offline
Yahoo Messenger Emoticons (Smileys) di Blogspot
Cara Buat Bintang Jatuh dari Kursor
Cara Buat Tombol Back To Top di Blogspot
Cara Membuat Link Bergerak Bergoyang / Nudging di Blog
Cara Membuat Breadcrumbs Terindex / Di indeks Google
Cara Membuat Custom URL Permalink Blogger SEO Friendly
Fitur Blogger Custom Permalinks Resmi Diluncurkan (update)
Technorati | Cara Claim Blog Di Technorati Directory
Cara Buat Tombol Share Dengan Efek jQuery Nudging

Rabu, 08 Agustus 2012

Cara Buat Tombol Share Dengan Efek jQuery Nudging

Cara Membuat Tombol Share Dengan Efek jQuery Nudging, cara memasang social bookmarking share button widget ini telah di request oleh salah satu pengunjung Blogger Peer yang kebetulan tertarik sama tombol share widget nudging menggunakan efek jQuery yang ada di blog saya ini, nah kebetulan sekarang saya sempat mengulasnya dan akan saya bagikan kepada anda semua

Tombol Sharing Widget Button
Tombol Share widget menggunakan jQuery nudging ini sebenarnya penerapan dari apa yang saya jelaskan pada artikel saya yang sebelumnya yaitu cara membuat link bergerak - link nudging, tetapi disini saya menggunakan gambar/ikon sehingga terlihat menarik dan unik. Icon sharing widget yang ada di blooger.co.id ini terdiri dari beberapa situs social media yang umum dipakai oleh orang untuk membagikan artikel yang bermanfaat bagi kerabat mereka. Banyak dari para pengunjung bertanya kepada saya apakah script jQuery tidak berat ketika di load? jawabannya adalah TIDAK, script jQuery ini sangat ringan dan saya pun memakai script ini pada sharing widget di blog ini dan juga pada tombol back to top yang ada pada bagian bawah halaman, jadi jangan khawatir untuk memasang script jQuery pada blog anda.

Sebelum kita memasang ikon sharing widget ini ada baiknya anda back up template terlebih dahulu untuk jaga-jaga kalau ada kesalahan pemasangan

  • Login di Blogger
  • Masuk ke Template > Edit Html
  • Centang pada Expand Widget Templates
  • Cari kode ]]></b:skin>
  • Copy kode dibawah ini dan paste tepat dibawah kode  ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge, .#Label2 ul li a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging --><!-- end LinkNudging -->
  • Gunakan CTRL+F kemudian cari kode <b:if cond='data:post.hasJumpLink'> setelah ketemu kemudian diatas kode tersebut akan ada kode <div style='clear: both;'/> <!-- clear for photos floats --></div>
  • Copy code dibawah ini dan paste tepat diatas kode <div style='clear: both;'/> <!-- clear for photos floats --></div>

<br/>
<b:if cond='data:blog.pageType == "item"'><b>Share it to your friends..!</b><br />
<br />
<table border='0'>
<tr> <td><script type='text/javascript'>
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script><g:plusone size="standard"></g:plusone></td>
<td><div class='bookmarks'>
<a class='nudge' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share to Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOukK0GPlvL3kxRXc7eMoYMawRnSGnfRtTrBPbYDpCzp_i4XfRKOb64W3aDlkU-WvY7qZrthx3d8I99B8t9sZUKlLwdEkvJQyjuHmOSBqw6mJmgwTD6ujI4BDG4GZ7Kh08VOuXEW9xVpM/s1600/facebook.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Facebook'/></a>
<a class='nudge' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;amp;url=&quot; + data:post.url ' rel='nofollow' target='_blank'><img alt='Share this post on twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJT1qHbdOMhaRQxz2FIUlbrikdgaQx5PxqOxq73gPkpsggTEHMq8B6nb9UVdt09zXWMqMkAjMtLyiD5F6r2W1onYT2NZfrVtKe4uOCNTOIOM8qk-jTF51BnG-1tENh-pHiyS3jg3EwP04/s1600/twitter.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share this post on twitter'/></a>
<a class='nudge' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Bookmark Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4ub1q6jY78SbkXQIcXJPvaPltgraa0vTJG6KAbuqIAEK2ohh9DxX_sKh_rUUr2fGPsRhfBCME6QCZ_i67Kxw5FPWsWvBy5EJOwnXhM5YeUaZijs_46RMgmvNgfY63-BInDF6nAmyTk4/s1600/delicious.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Bookmark on Delicious'/></a>
<a class='nudge' expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgctvausiDtWh3tV5loWIvBeVH5ocohvVDQEcIblPrRYlrpSBWHE6rhm_UU_UTa6JB70d0i1vCLDqqkLjTVvG_t090yiz2xz-8YSZV89agKLh5u0JxS8QGkABrL3b07K5AFMYsn8gDLamI/s1600/digg.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Digg This'/></a>
<a class='nudge' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumbleupon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8PsqwrzUswP8StrQCDUW6t55zhn3Fn1iM0NN7jA-20Gv1PUfaT37pTHNQq7a2XZw4IP2oRH9hZtcQRBalmqB2gT6yU-LRfkB90JdjuGFS82xiZ9QtonaY6UQeM5e-Sh91BP4-Ze5kDI/s1600/stumbleupon.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Stumble This'/></a>
<a class='nudge' expr:href='&quot; http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-SrhhIHLZ34DTPtTIahQ2HniL1daiAeUU-ko188s5HC4TuGQ3DWignThpEPYoTGOBZxerN1Voc5d7shJP3_S-9e8rRfFR1E0gkgWh287gTZAtDbviwz5eHdMgOpde8kRoMIgw2RtF9mg/s1600/reddit.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Reddit'/></a>
<a class='nudge' expr:href='&quot; http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Yahoo Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrb8cMu022ShZC5aMiNnqdtsLxPSFy_QHkHEf8JY-6ixADMBU0MVxbgb7RfG9Ye-ud9HyaFZP2w3sAZ2joAH49Ftxq7T-lYF2taFf5C1IgXc3qOjZbhl9c1lSvZF_0ymccSuVBWfr2IA/s1600/yahoo.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Yahoo Bookmark'/></a>
<a class='nudge' expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Furl-Diigo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNt9UjY0atxMcTN6LZQyAxXhw-vetUrD96rdmGvI3vtq0VxzdPRCFR-beqn0K36ZKi4Ne3cxb54W73vBB2p5KZs1ifbC3SBH4Un2z64OWkSiXBnA1aCFswG-3aWRB3sRFIOzxyZ_nBLeQ/s1600/furl.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Send to Furl/Diigo'/></a>
<a class='nudge' expr:href='&quot; http://www.google.com/bookmarks/mark?op=edit&amp;amp;output=popup&amp;amp;bkmk=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Google Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs7fSsgWd1sH-OwM_2n2p2yJy7vcMd2-mV3sdTWrZ3dLxQfgVGrRVf_5t0D6d2qD1PQ7ootxRTeqSwVPDaJz9HJvlhfReYzwNiB1_pMcFj2HF0MhgbavfvDJYSSTjdtcoqo4avsszqMNM/s1600/google.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Google Bookmark'/></a>
<a class='nudge' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZVvCSrWttae-jgMIlYmSYlzUsCIRIkYEMN2RyFC0ViRljg25_6aA92f1s5vZuOldC5I5DZU7AQx5I1xid1ry8UawFrn4eCAMOxcowMVp8-mUOlnIFJy2tmbxWt94cDrqRlMo4uDsleQ/s1600/technorati.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Technorati'/></a>
<a class='nudge' expr:href='&quot; http://www.newsvine.com/_tools/seed&amp;amp;save?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Newsvine' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoiNHjPYDmen13ucsSpbZpanageibqhGLmm4TcD0rhSvID0bmnV_EhQMAxYYvVKPEeJAzcdGi1_mmGuhhDR7FGPEKbULmo8xTF2hGNIp1RMZkb5HvGztUrxgFJfn2mWKDsf0JAxnOulc/s1600/newsvine.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Save to Newsvine'/></a>
<a class='nudge' href='http://blooger.co.id' target='_blank'><img alt='Tips Triks Blogger, Tutorial SEO, Info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzAFQvDcARe5uoRKWu2QOrRYTpqd_DESBpvchAMzNFs5rD_ThMWSWb178qjQRliLLhTbBfsg5Oe2nqBWLYWa2CwawK1ky85FFcoD9ZWydKc0G40EBsQF7GB9FQ1LNct2DelUDpCbPhQZA/s1600/blogger-peer.gif' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;'/></a></div>
</td></tr>
</table>
</b:if>

  • Terakhir simpan template
PENTING: SETELAH KEMARIN GOOGLE CHROME MELAKUKAN UPDATE, TOMBOL SHARE DENGAN EFEK NUDGING INI TIDAK DAPAT BEKERJA DENGAN BAIK KALAU DIBUKA MENGGUNAKAN BROWSER GOOGLE CHROME. SARAN SAYA, LEBIH BAIK GUNAKAN TOMBOL SHARE INI TANPA EFEK NUDGING DEMI KENYAMANAN PEMBACA BLOG ANDA.

CARANYA: Jangan memasang kode script yang dibawah kode ]]></b:skin> atau skip saja kode itu, kemudian lanjutkan dengan kode yang kedua dan terakhir simpan template.

Sabtu, 21 Juli 2012

Technorati | Cara Claim Blog Di Technorati Directory

Technorati Blog Directory

Cara claim blog di Technorati direktori, sebelumnya mari kita bahas apa itu Technorati? Pasti sudah pada tahu kan? Okey.. Technorati adalah sebuah mesin pencari (search engine) populer khusus untuk blog yang diciptakan oleh Dave Sifry yang diluncurkan pada November 2002. Saat ini sudah banyak bahkan jutaan blog yang ada di dunia terdaftar di situs ini, sebagai komunitas yang besar situs ini merupakan salah satu sumber untuk mendapatkan pengunjung/traffic, dengan alasan itulah kenapa kita harus mendaftarkan blog kita di Technorati disamping untuk menjaring pengunjung situs ini juga bisa dijadikan alat untuk mencari link dari blog-blog lain yang mempunya tema (niche) yang sama. Technorati juga merupakan blog directory yang cukup populer dan merupakan direktori yang favorit dari para blogger untuk meningkatkan pagerank dan traffic, nah sekarang timbul pertanyaan bagaimana cara claim blog di technorati? sebenarnya cara klaim nya dibilang gampang-gampang susah tapi jika ingin benar-benar serius dan teliti pasti bisa kok.

Cara Claim Blog di Technorati

  • Login di Technorati, kalo belum punya akun silahkan dibuat dulu
  • Masukkan alamat blog anda agar bisa di claim dan isi data-data yang diperlukan
  • Kemudian Technorati akan mengirim email balasan ke email anda yang berisi claim token, lihat contoh dibawah ini
This is an automatically-generated email. Thank you for submitting your blog claim on Technorati. Technorati will need to verify that you are an author of the site http://blooger.co.id by looking for a unique code. We have just assigned the claim token B9MUD4AM3YKB to this claim. Please visit http://technorati.com/account/ for more details, including how to use the claim token. Thank you.
  • Kemudian masuk ke blog anda dan buatlah postingan baru tentang Technorati dengan menyertakan kode token (contoh token: kode warna merah)
  • Publish post baru anda
  • Kembali ke situs Technorati dan klik "Verify Claim Token"

Kemudian tunggu beberapa saat kemudian Technorati akan meng-claim blog anda dengan mengirim email ke inbox anda

This is an automatically-generated email.
Thank you for submitting your blog claim on Technorati. We have successfully crawled your blog and found the claim token, and your claim is now awaiting review.

Setelah diclaim maka blog anda akan di review oleh Technorati dan blog anda akan di masukkan didalam direktori

Semoga tips blogger tentang cara claim blog di Technorati ini bermanfaat


B9MUD4AM3YKB

Kamis, 19 Juli 2012

Fitur Blogger Custom Permalinks Resmi Diluncurkan (update)

Fitur custom permalink Blogger resmi di luncurkan (update), Sebelumnya saya sudah pernah posting artikel tentang cara membuat custom url permalink Blogger dimana pada saat itu fitur baru ini cuma bisa diakses melalui draft.blogger.com, tetapi sekarang Blogger sudah resmi meluncurkan/meng-update fitur ini sehingga bisa diakses melalui blogger.com. Buat anda yang masih menggunakan tampilan lama (old interface) silahkan di upgrade dulu supaya bisa menggunakan  fitur custom permalink ini
Fitur Blogger Custom Permalink Resmi Diluncurkan (update)

Custom permalinks ini sangat membantu dalam meningkatkan SEO Blogger dengan mengoptimalkan keyword dan memasukkan nya di dalam url permalink, tetapi meskipun begitu fitur ini tetap mempunyai kelemahan yaitu kita tidak bisa mengubah (edit) url permalink pada post yang sudah diterbitkan/published (hanya untuk post baru saja), jadi double cek lah url permalink-nya sebelum di publish apakah sesuai dengan keinginan atau sesuai dengan keyword, kelemahan yang lainnya adalah kita tidak bisa menghilangkan tahun dan bulan yang ada pada url nya (contoh: 2012/ 08) karena blogger tidak mengijinkan kita untuk meng-edit itu

Ketika anda membuat sebuah post baru, Blogger secara otomatis akan menghasilkan permalink dari judul postingan anda, tapi jika anda memilih untuk menggunakan kustom permalink anda dapat mengubahnya sesuai dengan keinginan anda melalui pilihan "permalink" di kotak pengaturan post (di sebelah kanan kotak post).
Pada Gambar diatas adalah contoh permalink yang saya buat dengan judul "cara buat custom permalink". Jika anda membuat post pada bulan dan tahun sekarang maka secara otomatis blogger akan memasukkan nya

Sabtu, 30 Juni 2012

Cara Membuat Custom URL Permalink Blogger SEO Friendly

Cara membuat/meng-edit custom url permalinks Blogger/Blogspot agar lebih SEO friendly, Baru-baru ini Blogger telah memperkenalkan opsi untuk membuat custom URL permalink pada post editor-nya, meskipun masih beta atau tahap testing ini adalah berita yang sangat ditunggu-tunggu oleh pengguna Blogger platform karena kita bisa membuat URL permalink (permanent link) sesuai dengan title/judul blog post tanpa terpotong yang tentunya akan berpengaruh baik pada SEO

Custom URL Permalink Blogger

Sebelumnya pengguna Blogger platform merasa kecewa karena banyak kekurangan yang ada pada tubuh Blogger khususnya pada SEO, berbeda dengan Wordpress yang banyak option dan plugin untuk menunjang SEO. Tetapi sekarang kekecewaan pengguna Blogspot sudah sedikit terobati setelah Blogger melakukan banyak perubahan dan update pengguna Blogspot sekarang sudah bisa menggunakan option yang diberikan untuk menunjang SEO dan yang lainnya, seperti meng-edit robot.txt, meta description, threaded comments, fitur blogger custom permalink, dll. Apalagi sekarang ini saya sudah banyak melihat teman-teman yang berhasil membuat breadcrumbs terindex Google yang membuat blog terlihat lebih profesional. Nah sekarang kita akan bahas cara membuat custom url permalink blogger, silahkan ikuti tips & trik blogger dibawah ini.

Cara Membuat Custom URL Permalink Blogspot

  • Silahkan masuk di draft.blogger.com bukan di blogger.com
  • Buatlah post baru dan lihat disamping kanan post editor ada pilihan Permalink
  • Kemudian buatlah permalink yang diinginkan atau sesuai dengan judul/title post
  • Pisahkanlah antar kata permalink dengan karakter minus ( – ) agar lebih SEO friendly, menggunakan karakter ( - ) sangat direkomendasikan
  • Klik selesai/done

Contoh URL permalink

Judul post " High PR Dofollow Blog Auto Approve Indonesia"

Jika menggunakan Automatic Permalink maka URL permalink dari judul post diatas akan terpotong karena standard blogger tidak lebih dari 38 karakter termasuk spasi,dan ini kurang baik untuk SEO sehingga akan menjadi

http://blooger.co.id/ 2012/06/high-pr-dofollow-blog-auto-approve-indonesia. html

Jika menggunakan Custom Permalink maka URL Permalink akan terbentuk tanpa ada potongan kata dan tentunya ini akan sangat baik bagi SEO, sehingga akan menjadi

http://blooger.co.id/ 2012/06/high-pr-dofollow-blog-auto-approve-indonesia. html

Nah sekarang terserah anda karena pilihan terakhir ada di tangan anda untuk membuat URL Permalink karena Blogger telah memberikan kita opsi yang sangat baik khususnya untuk membuat URL Permalink, untuk sementara kita hanya dapat membuat custom Permalink dari draft.blogger.com karena ini masih tahap percobaan (Beta) tetapi saya kira tidak lama lagi akan di-update sehingga bisa di akses dari blogger.com

Pada postingan ini saya belum menggunakan fasilitas Custom URL Permalink Blogger karena saya masih menggunakan Windows Live Writer untuk menulis artikel post.

Minggu, 24 Juni 2012

Cara Membuat Breadcrumbs Terindex / Di indeks Google

Cara membuat / memasang navigasi breadcrumbs terindex Google di blog agar terlihat di dalam mesin pencari Google (Google search), beberapa waktu lalu saya pernah menjelaskan tentang cara membuat breadcrumb seo friendly yang tujuannya untuk memudahkan visitor menjelajahi halaman demi halaman pada blog anda sesuai dengan kategori yang ada

Cara membuat breadcrumb terindex Google

Sekarang saya akan membahas sedikit tentang perbedaan menu navigasi breadcrumbs seo friendly yang pernah saya tulis sebelumnya dengan yang akan kita terapkan sekarang. Mungkin sebelumnya anda sudah memasang breadcrumbs yang saya jelaskan dulu tetapi hasilnya tidak terlihat didalam pencarian Google seolah-olah tidak di index oleh Google, memang membutuhkan waktu yang sangat lama baginya untuk meng-indeks breadcrumbs yang seperti itu bahkan saya sempet dengar blog anda harus ber-pagerank 3 atau lebih. Tetapi sekarang hal itu tidak perlu dipersoalkan lagi meskipun blog anda belum mempunyai pagerank karena navigasi breadcrumbs yang satu ini akan terlihat di mesin pencari Google dengan waktu yang singkat dan semua label blog akan ter-index olehnya, nah untuk membuatnya anda ikuti tips dan trik blogger dibawah ini

Cara membuat Breadcrumbs di Blogspot / Blogger

  • Login di Blogger
  • Pilih Template
  • Pilih Edit HTML (lebih baik back up template dulu untuk menghindari kesalahan)
  • Centang Expand Widget Templates
  • Kalau sebelumnya anda sudah memasang breadcrumbs silahkan dihapus dulu kode breadcrumb yang lama
  • Kemudian cari kode ]]></b:skin>
  • Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

  • Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian
  • Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Terakhir simpan template anda dan navigasi breadcrumbs akan siap di index Google

Baca artikel menarik lainnya tentang Link Bergoyang / link Nudging

Sabtu, 16 Juni 2012

Cara Membuat Link Bergerak Bergoyang / Nudging di Blog

Cara membuat link bergerak/bergoyang di blog, Link Nudging adalah suatu efek yang bergerak atau bergoyang dari sebuah/beberapa links yang ditimbulkan dari penerapan jQuery pada template di sebuah website ataupun blog. Mungkin dari kita biasa menyebutnya dengan Link Bergoyang/Bergerak atau menari, selain itu efek jQuery ini juga bisa diterapkan pada sebuah gambar (image)

jQuery link nudging bergoyang bergerak

Untuk sobat blogger yang gemar utak atik blog mungkin bisa mencoba trik link bergerak yang satu ini dan saya rasa bisa membuat blog sobat unik dan menarik. Sebagai contoh sobat bisa melihat link bergoyang/nudging pada label yang ada di sidebar blog saya ini, efek ini menggunakan script jQuery yang menurut saya sangat ringan ketika di-load dan penerapannya juga lumayan gampang, sama halnya seperti tombol back to top yang beberapa waktu lalu saya jelaskan yang sama-sama menggunakan jQuery.

Cara Pasang Efek jQuery Link Nudging/Bergoyang pada Label Blog

  • Login di Blogger
  • Masuk ke bagian Edit HTML pada template
  • Centang pada bagian Expand Widget Template
  • Cari kode </head>
  • Copy paste script dibawah ini dan letakkan tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge, .#Label1 ul li a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

Kalau kode yang berwarna merah tersebut sudah ada di template sobat, kode itu tidak usah di pasang lagi jadi sobat hanya perlu memasang kode dibawahnya saja, Kemudian huruf yang berwarna biru diatas adalah widget id pada label, sobat bisa sesuaikan pada label id di blog sobat. Dibawah ini adalah contoh widget id label dari template blog saya.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>

Kemudian untuk membuat Link Nudging manual pada setiap link apakah itu didalam postingan ataupun widget sobat bisa menambahkan class="nudge" seperti dibawah ini

<a href="http://blooger.co.id" class="nudge">Blogger Peer</a>

Dan untuk membuat gambar bergoyang / Image nudging sobat bisa membuatnya seperti dibawah ini

<a href=http://blooger.co.id" class="nudge"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4sH8yOpKroOsAfnCMsCzA7VPZgXRM_v2oWv9qfSvrusLVQ7N2mxHQ0R7O08mOsB0ou9uYLDA-1BWo3NzQdGJbby9WXIWs5xa8PwTuZs59C4BvMpn4NxjnYCn2U87OcVCA-yIQqCFJCgw/s400/Tips-Trik-Blogger-Tutorial-SEO-Info-BloggerPeer-Blogspot.jpg"/></a>

Minggu, 20 November 2011

Cara Buat Tombol Back To Top di Blogspot

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

Cara Buat Tombol Back To Top di BlogspotFitur back to top 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 bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top 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 tips & tricks blogger berikut.

 

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

  • Silahkan login di Blogger
  • Pilih Template > Edit HTML > klik Expand Widget Template
  • Cari kode </body>  (gunakan CTRL+F)
  • Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

  • Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas

<script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - blooger.co.id -->
<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/AVvXsEjUicopLllTuuEXYcnmuMMgpa4mB5GFHlNB5qrn0w6wFaEC031vKM-IDvt8crls-7K3MqvdmSZUP0ldKEviY29o52Fc74jHxkO7lea7ZLRgr4ys8eHgDhEdZrjKADvDamyjiozs2gSaZyE/s1600/back-to-top.gif'/></a>

  • Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai

Kamis, 17 November 2011

Cara Buat Bintang Jatuh dari Kursor

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

Cara Buat Bintang Jatuh dari Kursor

Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh 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 Colorpic software, tertarik? silahkan ikuti tutorial blogger dibawah ini

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

  • Login di Blogger
  • Pilih Design > Add gadget > HTML/Javascript
  • Masukkan kode dibawah ini ke kolom HTML/Javascript

<script type='text/javascript'>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat

Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat

Rabu, 09 November 2011

Yahoo Messenger Emoticons (Smileys) di Blogspot

Yahoo! Messenger (YM)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? Yahoo emoticons 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 Windows Live Writer saat di-instal minta koneksi internet tapi yang full installer juga ada kok tinggal search aja di om Google

Cara Memasang Yahoo Messenger Emoticons di Kotak Komentar Blogger

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 Yahoo messenger emoticons yang umum dipakai dalam chat.

Langkah-langkahnya adalah :

  • Login di Blogger > Template > Edit HTML
  • Centang pada Expand Widget Templates
  • Cari kode dibawah ini

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

Copy kode dibawah ini kemudian letakkan (paste) diantara kode diatas

<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'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

Kemudian cari kode </body>

Copy kode dibawah ini dan paste tepat diatas kode </body>

<script src="https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/smiley.js" type="text/javascript"/><noscript><a href="http://blooger.co.id" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

Terakhir simpan dan sobat sudah bisa menggunakan emoticon dari Yahoo ini.


Note

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

Sabtu, 05 November 2011

Windows Live Writer | Menulis Artikel Blog Post Offline

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

wlw - Menulis Artikel Post Dengan Windows Live WriterSelain itu sobat juga dapat menulis dan memasukkan foto secara offline dengan aplikasi Windows Live Writer (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.

Apakah Windows Live Writer Application berguna untuk SEO?

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.

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 navigasi breadcrumb 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

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

http://rpc.pingomatic.com
http://rpc.twingly.com
http://api.feedster.com/ping
http://api.moreover.com/RPC2
http://api.moreover.com/ping
http://www.blogdigger.com/RPC2
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://blogsearch.google.co.za/ping/RPC2
http://blogsearch.google.com.au/ping/RPC2
http://blogsearch.google.com.br/ping/RPC2
http://blogsearch.google.com.do/ping/RPC2
http://blogsearch.google.com.vn/ping/RPC2
http://blogsearch.google.hr/ping/RPC2
http://blogsearch.google.ie/ping/RPC2
http://blogsearch.google.nl/ping/RPC2
http://blogsearch.google.pl/ping/RPC2
http://ping.kutsulog.net/
http://bulkfeeds.net/rpc
http://www.newsisfree.com/xmlrpctest.php
http://ping.blo.gs/
http://ping.feedburner.com
http://ping.syndic8.com/xmlrpc.php
http://ping.weblogalot.com/rpc.php
http://rpc.blogrolling.com/pinger/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://blo.gs/ping.php
http://www.pingerati.net
http://www.pingmyblog.com
http://geourl.org/ping
http://ipings.com
http://www.weblogalot.com/ping

Url ping servers diatas hanyalah beberapa saja dan sobat bisa mencari (search) list ping servers ter-update lainnya di Google

Cara Instal Windows Live Writer di Komputer

Untuk instal / pemasangan WLW ini juga sangat gampang, sobat hanya download aplikasi nya di situs Microsoft Windows Live Essentials 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

wlw-instalasi 1

wlw-instalasi 2

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

Setelah proses instalasi selesai kemudian sobat masukkan blog sobat beserta username dan password blog sobat

wlw-instalasi 3

wlw-instalasi 4

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

wlw setting pada wordpress

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

Good Luck Sob..!!

Kamis, 03 November 2011

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 breadcrumb 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 )

Cara Pasang Navigasi Breadcrumb di blogger

Gambar diatas adalah contoh breadcrumb navigation yang saya ambil dari screenshot blog saya ini, kebetulan judul post-nya waktu itu adalah tentang burung twitter terbang, untuk membuat dan memasang breadcrumb saya kira tidak begitu sulit jadi sobat bisa membuat nya dengan tutorial blogger yang saya berikan berikut ini:

Cara Membuat Navigasi Breadcrumb Seo Friendly di Blogspot

  • Login di Blogger
  • Pilih Design 
  • Pilih Edit Html
  • Centang pada Expand Widget Templates
  • Cari kode ]]></b:skin>
  • Copy paste kode dibawah ini tepat diatas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

  • Kemudian cari kode seperti di bawah ini
<div class='post hentry uncustomized-post-template'>
Kalau kode diatas tidak ada, coba sobat cari kode yang seperti dibawah ini
<div class='post hentry'>


  • Letakkan kode dibawah ini tepat diatas salah satu kode biru diatas
<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>

  • Klik save dan sobat sudah berhasil membuat Breadcrumb yang SEO friendly
Update
    Diberdayakan oleh Blogger.