Tuesday, May 29, 2012

Membuat Widget Sassy Social Bookmark di Blogger

Animated Sassy Bookmarks Widget For Blogger Blogs

Setelah beberapa hari vakum akhirnya saya balik lagi. Yap kesibukan di dunia nyata memaksa saya agak kurang mengurusi blog ini, padahal pada awal-awal membangun blog ini saya bagun dengan ssusah payah dam penuh keringat hehehe. Oke sesuai dengan nama dari blog ini, kurang lengkap apabila saya tidak membagikan tutorial tentang widget untuk blogger. Dan masih tentang widget sosial bookmark, widget yang saya ambil dari salah satu master dunia bllog yakni pemilik www.spiceupyourblog.com akan sangat menarik untuk di tempatkan di blog kamu. Langsung saja lihat tutorialnya di bawah ini :

1. Masuk ke Blogger.com

2. Untuk blog dengan tampilan baru, klik template --> Edit Html dan pilih lanjutkan --> Kemudian kamu centang expand template widget. Dan untuk blog dengan tampilan lama cukup klik Rancangan --> Edit HTML --> Centang Expand Template Widget.

3. Cari kode </body> lalu kamu salin kode di bawah ini dan letakkan kode di bawah ini sebelum kode </body>.

<!-- Start Shareaholic Sassy Bookmarks HTML - http://www.hzndi.blogspot.com -->
<div class='shr_ss shr_publisher'>

</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-ss.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://www.spiceupyourblog.com/2012/05/animated-sassy-social-bookmark-gadget.html'>Animated Social Gadget</a> - <a href='http://www.spiceupyourblog.com'>Blogger And Wordpress Tips</a></small>

<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://www.hzndi.blogspot.com -->

4. Simpan template kamu, oh iya jika penasaran dengan hasilnya, kira-kira tampilannya akan menjadi seperti ini.

Sunday, May 27, 2012

Bagaimana Cara Mendapatkan Peringkat Tertinggi di Halaman Awal Google

Bagaimana Cara Mendapatkan Peringkat Tertinggi di Halaman Awal Google 
 
Kira kira sudah beberapa hari saya tidak memperbaharui blog ini karena kurangnya gairah untuk menulis huft, namun demi kelangsungan hidup blog ini akhirnya saya putuskan untuk menulis lagi dengan mengunjungi beberapa website luar negeri untuk mendapatkan "ilham". Oke pada kali ini saya akan membahas bagaimana cara blog kamu untuk mendapatkan peringkat paling tinggi di dalam SERP mesin pencari, namun sebelumnya kalian harus mengerti apa itu SERP, Untuk pengertiannya mungkin saya tidak bisa jelaskan satu persatu, namun kalina bisa lihat disini.

Tidak dapat di pungkiri jika Internet merupakan salah satu produk teknologi yang berkembang paling cepat di Dunia. Berbeda dengan perkembangan televisi ataupun radio, Internet berkembang dengan sangat cepat, dari hanya di gunakan untuk kalangan militer, kemudian kalangan universitas dan sekarang hampir dairi penduduk dunia mulai mengenal dan menggunakan internet baik itu negara maju maupun negara-negara berkembang. 

Dengan perkembangannya ini, internet merupakan lahan yang pas untuk berbisnis. Kita bisa memanfaatkan salah satu media bisnis yang terdapat dari internet yakni dunia web atau blog. Biasanya orang-orang mencari hal-hal yang dibutuhkannya melalui mesin pencari dan mesin pencari yang paling besar serta efektif saat ini tidak lain adalah google. Jika blog/web kita menjalankan suatu bisnis, tampil di halaman pertama atau bahkan di peringkat pertama google adalah suatu hal yang sangat strategis dan menguntungkan. Bayangkan berapa banyak lalu lintas poengunjung yang bisa kita dapatkan setiap harinya jika blog/web kita menempati peringkat pertama dalam SERP google. Tetapi untuk meraih peringkat pertama di SERP google tidaklah mudah, butuh beberapa trik khusus untuk menjalankannya.Berikut beberapa tipsnya yang saya dapatkan dari para master-master SEO yang ada diseluruh dunia bagi kamu yang ingin blog/web kamu mendapatkan peringkat pertama di SERP google.

Optimalkan Mesin Pencari Blog
Jika optimisasi mesin pencari adalah fitur utama dari blog, maka frekuensi posting harus menjadi fokus utama dari blogger. Mesin pencari yang ada di dalam pada blog dengan banyaknya jumlah artikel blog yang kamu punya pada gilirannya akan membantu dalam menghasilkan jumlah lalu lintas yang banyak. Artinya, gunakanlah waktu senggang kamu setidaknya untuk menulis artikel di blog kamu minimal seminggu sekali atau lebih baik lagi sehari 3 kali. Dan salah satu cara untuk meningkatkan hasil postingan kamu di mesin pencari adalah dengan  Menambahkan gambar beserta properties alt dan tag judul di dalam gambar yang ada di postingan kamu.

Keywords
Kata Kunci merupakan aspek penting dari blogging SEO. Google akan membaca setiap kata kunci yang kamu buat di dalam blog kamu. Kata kunci adalah suatu "alat" yang mungkin cara terbaik dalam hal peringkat SERP. Pergunakanlah kata kunci yang tidak terlalu banyak pesaingnya namun efektif untuk pencarian. Dan semua itu mungkin bisa kamu cari di google keyword

Untuk mencapai pemasukan maksimum dari sebuah kata kunci, gunakanlah selalu menulis beberapa posting seputar topik umum yang sama. Untuk pencarian, di beberapa posting, masing-masing berisi kata kunci yang sama dan masing-masing dengan konten yang unik akan membantu dalam mendorong blog kamu menuju ranking 1 pada halaman Hasil Search Engine.

Selain cara-cara di atas juga, jangan lupa untuk tetap melakukan blogwalking , berkomentar pada postingan orang lain dan mempromosikan blog kamu pada orang lain agar blog kamu semakin di kenal oleh orang-orang.

Monday, May 21, 2012

Berapa Lama Waktu yang Di Butuhkan Untuk Kenaikan Sebuah PageRank ?


Pagerank, sebuah kata yang menjadi momok bagi setiap blogger yang mengerti tentang apa itu pagerank, Ibarat kata, pagerank itu adalah sebuah ranking tetapi jika rangking di kelas semakin kecil adalah semakin bagus, pagerank semakin besar justru semakin bagus dan bernilai tinggi untuk sebuah blog, berikut penjelasan singkatnya di bawah ini.

Sejarah Singkat PageRank Google

PageRank namanya berasal dari nama pendiri Google Larry Page. Konsep di balik PageRank adalah salah satu alasan utama untuk keberhasilan awal Google sebagai mesin pencari. Google menggunakan algoritma yang rumit untuk memutuskan betapa pentingnya sebuah halaman web didasarkan pada relevansi, jumlah dan otoritas hyperlink yang masuk dari website lain. Jadi, Bisa di katakan PageRank memberi kamu sejumlah peringkat dari 1 sampai 10 berdasarkan kepercayaan situs yang kamu kelola dan otoritas yang ada di situs kamu. Sebagai contoh.

Faktor PageRank

Google memberikan dasar untuk menentukan  jumlah PageRank pada lebih dari 200 faktor dalam algoritma yang rumit. Pada tingkat dasar, PageRank kamu mungkin tidak akan  naik sama sekali jika blog yang kamu kelola tidak memiliki konten yang fresh, yang bermanfaat dan dan tentu saja up to date. PageRank kamu mungkin akan naik lebih cepat jika kamu secara konsisten menambahkan konten baru yang menarik link atau lalu lintas pengunjung dari berbagai sumber (promosi ke forum atau jejaring sosial contohnya). Meskipun demikian, Hal ini tidak menjamin PageRank kamu akan segera naik karena algoritma Google begitu kompleks, Sehingga kamu tidak dapat mengasumsikan bahwa melakukan hal-hal tertentu secara otomatis akan meningkatkan PageRank kamu dalam waktu tertentu.
 
PageRank Update


Beberapa situs mungkin melihat perubahan dalam waktu 30 hari. Hal ini sebagian didasarkan pada ketika Google memutuskan untuk memperbarui PageRank, yang tampaknya tidak mengikuti jadwal yang ditetapkan. Jadi paling sebentar google memperbarui Pagerank setiap blog adalah selama 30 Hari sekali, jadi selama sebulan itu lah kamu di haruskan memberikan konten yang baru dan menyegarkan agar saat google meng-update PageRank setiap blog, otomatis blog kamu akan memiliki PR yang tinggi bahkan bisa saja dari PR 0  ke PR 3 !!!

Tingkatan PageRank
 
Perbedaan peningkatan dari PageRank 0 ke PageRank 1, atau dari PR 1 ke PageRank 2 dari sebuah situs memiliki lompatan yang lebih kecil di bandingkan peningkatan dari PageRank 7 ke 8 situs PageRank. Jadi, akan membutuhkan waktu yang lebih lama untuk sebuah blog/situs untuk berpindah dari PageRank 7 sampai 8. Jadi jika PR kamu sekarang sudah agak tinggi sekitar 3, 4, ataupun 5, bersabarlah karena di butuhkan waktu yang tidak sebentar untuk mendapatkan PR yang lebih tinggi lagi mungkin berbulan-buln atau bertahun-tahun. Gunakan tips2 dari para master SEO yang bisa kamu cari di google untuk mempertahankan PR blog kamu atau meningkatkan PR blog kamu.

Sunday, May 20, 2012

Membuat Halaman Tabel konten Untuk Blogger



Akhirnya dapat inspirasi juga unuk membuat postingan terbaru hehe, okey sesuai dengan judulnya, kali ini saya akan membagikan sebuah widget berbentuk tabel yang apabila di klik atbel tersebut akan menampilkan postingan-postingan kamu terdahulu. Yah seperti daftar isi lah namun lebih keren lagi dong hehe kamu bisa melihat demonya langsung di blog ini. Lihat cara membuatnya di bawah ini :

1. Masuk ke Akun blogger kamu.

2. Klik Template (Blogger baru) atau Rancangan (Blogger lama) -->  Edit HTML --> dan kamu cari kode ]]></b:skin> oh iya sebelum meng-edit template blog kamu, jangan lupa di backup dahulu yah templatenya.

3. Salin kode CSS di bawah ini dan letakkan diatas kode ]]></b:skin>.

/*--------MBT TOC-----*/ 
/*----http://hzndi.blogspot.com*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top,  #9dc2e7 #438cd2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

4. Simpan Template, namun belum selesai.
5. Sekarang buatlah sebuah LAMAN BARU bukan postingan terbaru, untuk tampilan blogger lama bisa kamu lihat di gambar di bawah ini.

Table-of-contents 
Dan untuk tampilan blogger baru, klik Laman --> Laman Baru dan pilih laman Kosong, lalu klik bagian edit HTML seperti gambar di atas.


 
6. Salin kode di bawah ini dan masukkan ke dalam HTML tadi, seperti gambar di bawah ini, dan kamu ganti alamat yang di sorot dengan alamat blog/ web kamu.


 <script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.hzndi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

7. Publikasikan dan kamu lihat hasilnya :D

source code & images by : mybloggertricks.com

Saturday, May 19, 2012

Membuka Blog Dengan Tampilan Mobile Lewat PC


Pada kali ini saya akan membagikan salah satu tips untuk kamu yang ingin blogwalking tetapi memiliki koneksi supeeerrr keong alias lelet. Apa itu tipsnya ? yakni membuka blog atau website dengan tampilan Mobile namun di akses lewat PC. Salah satu keuntungnnya adalah tidak di butuhkan koneksi yang cepat, mudah dan ga harus nunggu widget2 yang menyebalkan. Oh iya, cara ini menurut saya lebih baik loh dari pada mengunjungi lewat PC, kenapa ? karena kita akan mengisi "buku Tamu" lewat kotak komentar bukan pada kotak cbox/shoutbox sehingga akan meninggalkan link-link kepada blog kita sendiri dan saya yakin dalam waktu beberapa bulan kedepan saat google memperbarui Pagerank, Pagerank blog kamu juga akan naik dengan drastis. Langsung saja lihat cara di bawah ini :

1. Tambahkan kode ?m=1 di belakang alamat blog yang ingin kamu buka, misalkan blog ini di buka dengan alamat http://hzndi.blogspot.com?m=1

Tampilan mobile blog ane di buka lewat PC, sederhana banget hehe


Bagaimana ? Mudah bukan ? :D

Thursday, May 17, 2012

Membuat Artikel Terkait di Blog Dengan Gambar


Ada beberapa widget blog yang menurut saya sangat penting, Kenapa ? karena widget ini sangat sangat berguna untuk membuat pengunjung blog kamu lebih betah berlama2 di blog yang kamu punya. Mungkin widget ini sudah tidak asing lagi bagi kalian namanya linkwithin, linkwithin adalah widget yang berguna untuk menampilkan related post atau postingan yang berkaitan dengan thumbnail atau gambar kecil yang biasanya terletak di bawah postingan blog kamu. Namun pada kesempatan kali ini saya akan member tahu dari alternatif dari widget linkwithin itu sendiri. Lihat langkahnya di bawah ini :

1. Masuk ke blogger.com

2. Klik Tata Letak (blog baru) atau Rancangan (blog lama) --> Pilih Edit HTML --> Klik Lanjutkan (untuk blog baru)  --> Centang Expand template Widget lalu kamu cari kode </head> . Gunakan ctrl+f untuk memudahkan pencarian.

3. Salin kode di bawah ini dan letakkan di atas atau sebelum kode </head>

<!--Start Related Posts Script From http://www.hzndi.blogspot.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPiB_2EKywyES0bVc_Q_FDdeTYsSSCZaGM6yu6xHbq-cYSN8cJEbwQiwM9ROxIh88y4B2vStoTI1GIZh2blQIxxWEdmEL2JHbjYHQzfzmD-wWjvQeuLH7ydQokGAaGeu506dhSJUg3jnSv/s1600/No+Image.jpg&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post From http://www.hzndi.blogspot.com-->

 Note
  • Ganti angka 7 dengan angka berapapun yang kamu suka karena itu akan menampilkan jumlah postingan terkait yang akan di tampilkan.
  • Ganti Related Posts dengan kata-kata yang kamu suka seperti "artikel terkait, baca juga, dll".

4.  Cari kode <div class='post-footer'> atau jika tidak ada maka kamu cari <data:post.body/> gunakan ctrl + f untuk memudahkan pencarian. Salin kode di bawah ini dan letakkan di bawah kode <div class='post-footer'> atau <data:post.body/>.

<!-- start related posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><br/><a href='http://www.hzndi.blogspot.com' target='_blank'><font color='#ccc' size='small'>Tutorial Blog dan SEO</font></a><div style='clear:both'/>
</b:if>
<!-- end related posts-->

5. Simpan Template dan kamu lihat hasilnya.

source code : spiceupyourblog.com

Twitter Delicious Facebook Digg Stumbleupon Favorites More