Sakty Blog

Pengaruh permalink Content Terhadap SEO

2015-09-21T07:06:00.001-07:00

Pertama-tama saya bahas apa itu Link. Seperti yang saya kutip dari sumber

"Link yang merupakan singkatan dari “hyperlink” adalah sebuah fungsi dalam HTML yang digunakan untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website bersangkutan. Link juga berguna untuk menghubungkan antar dokumen HTML." dan sumber

"tujuan utama dari internal linking adalah untuk memudahkan mesin pencari dalam menjelajahi, mengindeks semua halaman, dan melihat struktur blog saya secara keseluruhan. Struktur website yang rapih akan membuat semua halaman website Anda terindeks dengan baik di Search Engine, dan ini artinya halaman situs Anda akan mudah dicocokkan dengan pencarian user di Search Engine, misalnya Google."

Berdasarkan 2 (dua) kutipan di atas jelas Link content berpengaruh terhadap SEO. Lalu hal apa yang mesti kita lakukan?

Sebagai blogger pemula, saya selalu membuat link content secara lengkap contoh:

Judul: Membuat Ebook Dengan Mudah Menggunakan Open Office
Link: http://saktiuy.blogspot.co.id/2014/03/membuat-ebook-dengan-mudah-menggunakan-openoffice.html

jelas terlihat link judul tsb saya menggunakan full text sesuai dengan title atau judul contentnya. terkadang saat kita membuat judul yang panjang, blogspot akan memotong otomatis link tsb karena terlalu panjang. tapi hal itu bisa kita buat menjadi full text sesuai title atau judul contentnya. cara sebagai berikut:

1. Masuk blogger.com menggunakan user dan password anda
2. Klik New Post
3. Bualah Judul atau title postnya
4. Klik Permalink seperi gambar di bawah

5. Pilih "Custom Permalink" dan ketik sesuai judul atau title contentnya secara lengkap. contoh lihat gambar. lalu klik "Done." *setelah klik "Done" permalink tidak bisa diubah kembali.

Jadi apa manfaat permalink diblogger?

1. Sudah barang tentu fasilitas ini pasti memiliki manfaat besar bagi blog, terutama dalam memaksimalkan SEO on page di artikel.

2. Manfaat permalink lainnya, permalink memudahkan kita sebagai pengguna blogger untuk mengelola blog lebih baik lagi dengan memasang url artikel kita sesuai dengan judul artikel yang kita inginkan. Karena biasanya jika judul artikel kita terlalu panjang, maka yang akan terjadi adalah url artikel kita nantinya akan terpotong pada kata yang berada di tengah.

Dengan memanfaatkan fasilitas permalink seperti contoh diatas, jelas tentu SEO on page pada artikel akan memiliki nilai lebih tersendiri, karena memiliki kerelevanan antara judul artikel dengan url artikel, dengan begitu mesin pencari akan lebih mudah merayapi artikel dan otomatis traffik juga meningkat.

Create Website with Drupal

2015-09-20T09:07:00.000-07:00

COMING SOON..!!!

Create Web with Joomla

2015-09-20T09:05:00.001-07:00

COMING SOON...!!!

How to Create Your Website with CMS

2015-09-20T09:03:00.001-07:00

COMING SOON...!!!

How to Create Your Website with Notepad++

2015-09-20T09:02:00.001-07:00

COMING SOON...!!!!

Membuat Signature dengan MS. Outlook

2015-01-28T20:39:00.002-08:00

Gambar di atas adalah contoh Signature email yang dibuat dari MS. Outlook. Sesuai judul blog ini, saya akan menjelaskan cara membuat signature email di MS. Outlook sebagai berikut:

1. Buka MS. Outlook dan buka Tools > Option > Mail Format > Buka Signature. Lihat contoh gambar di bawah.

2. Setelah buka signature maka akan muncul form untuk membuat signature, lihat gambar untuk detailnya.

3. Customize signature anda dengan mudah seperti di MS. Word. Setelah selesai klik "OK" dan setiap kali anda membuat email baru maka signature tersebut otomatis ada pada pragraf email anda.

Demikian yang dapat saya sampaikan, semoga bermanfaat.

Membuat Ebook Dengan Mudah Menggunakan Open Office

2014-03-19T03:02:00.000-07:00

Selamat datang di blog saya selamat membaca artikel saya ini yang berjudul membuat ebook dengan mudah menggunakan open office. Tentunya banyak hal yang menjadi kendala saat kita membuat ebook menggunakn aplikasi adobe yang berekstensi .pdf padahal jika kita cari tau ternyata membuat file .pdf itu mudah hanya dengan menggunakan open office. Membuatnya pun semudah kita mengetik di Ms Word hanya saja ada menu export to Pdf di menu open office ini. Berikut langkah-langkah mengekspor tulisan ataupun foto menjadi file .pdf.

1. Download Open Office dan buka openoffice writer

2. Klik File >> pilih Export as PDF

3. Tentukan Quality-nya lalu klik Expor

4. Cari lokasi penyimpanan dan klik save.

Berikut langkah-langkah membuat file PDF yang telah saya sampaikan, selebihnya jika ada kesalahan mohon untuk mengoreksinya. terima kasih. salam blogger!

Mendownload Video dari Youtube

2014-03-03T08:35:00.002-08:00

Youtube merupakan situs sosial video terbesar. siapa yang tak kenal youtube. Mulai dari aktifitas mencari bahan pengetahuan dari video yang diunggah maupun salah satu media yang menyediakan berbagai peluang untuk sukses. Tak sedikit orang menjadi artis karena youtube dan tak sedikit semua film dari era modern hingga era jaman dahulu pun ada di media sosial video ini. Tentu untuk mendokumentasikan video yang kita lihat ingin sekali menyimpannya dalam HDD. Tak sedikit orang menggunakan IDM untuk mendownload video dari Youtube ini. Namun sekarang konten video tersebut sebagian ada yang memang tidak bisa diwonload menggunakan IDM. Untuk mengatasi hal itu, saya punya cara simple untuk mendownloadnya. tak perlu uninstal IDM anda, justru IDM ini membantu untuk mempercepat proses download. Langkah pertama anda hanya tinggal membuka situs en.savefrom.net lalu copy paste link url video youtube yang dipilih kemudian tekan Download maa akan muncul pilihan format video.

Mudah bukan? oke selamat mendokumentasikan video anda.

Master of Puppets - Metallica

2014-02-04T06:16:00.001-08:00

Playing Metallica - Master of Puppets in Zurich

2014-02-04T06:13:00.001-08:00

The Red Jumpsuit Apparatus - Face Down(Screamo Version)

2014-02-04T06:08:00.003-08:00

Dream Theater - Constant Motion

2014-02-04T06:05:00.001-08:00

Dream Theater - In The Name of God

2014-02-04T06:02:00.001-08:00

Dream Theater - In The Name of God ini merupakan salah satu lagu favorit saya milik Band asal paman Sam Dream Theater

Alternatif Lain Anonymous Menggunakan Cyber Ghost

2013-08-01T14:19:00.001-07:00

Anonymous adalah kelompok Aktivis atau "Hacktivis" yang dibentuk pada tahun 2003. Para anggotanya dapat dibedakan di depan publik dengan mengenakan topeng Guy Fawkes atau yang biasa dikenal V for Vendetta. Pada tahun 2011, Majalah Time memasukkan nama "Anonymous" sebagai salah satu orang paling berpengaruh di dunia. Tidak ada cara bagaimana bergabung dengan Anonymous, karena kita semua bisa menjadi Anonymous, Anonymous tidak memiliki pemimpin dan tidak memiliki struktur organisasi (wiki). Anonymous menyembunyikan identitasnya sedemikian tertutup agar tidak diketahui orang lain. Alternatif lain anonymous untuk menyembunyikan identitasnya adalah menggunakan Cyber Ghost.

Berbeda dengan DNS jumper, Cyber Ghost memiliki kemampuan untuk menyembunyikan ip menggunakan server yang cepat. Program Cyber Ghost ini bisa diunduh dan digunakan secara gratis (Free user). Cara penggunaannya mudah sekali. Anda cukup mendownload Cyber Ghost dan instal. Setelah itu mendaftarkan diri melalui form pendaftaran. Mencantumkan email, membuat username, dan password untuk login. Setelah login, tinggal koneksikan ke vpn dan Cyber Ghost akan menyembunyikan ip address anda melalui server yang disarankan kemudian tunggu hingga bertuliskan "YOU ARE ANONYMOUS"

Setelah terkoneksi, anda tinggal berselancar ria di internet. Dengan Cyber Ghost anda dapat membuka situs yang diblokir dan program ini juga sering digunakan untuk melakukan hacking demi melindungi identitas asli. Jika anda ingin mencobanya silahkan download Cyber Ghost di bawah ini:

DOWNLOAD CYBER GHOST

Memasang Fixed Menu di Blog

2013-05-05T04:56:00.004-07:00

Menu di blog berfungsi untuk mempermudah pengunjung blog menemukan konten yang mereka cari. Agar lebih mempermudah lagi, menu tersebut dibuat melayang atau float/fixed jadi ketika di scroll ke bawah atau ke atas menu akan tetap terlihat. Contohnya seperti menu yang ada di atas blog ini.

Pada kesempatan kali ini saya akan berbagi bagaimana memasang fixed menu di blog. Ada 2 (dua) cara memasang fixed menu yang akan saya bahas kali ini, yaitu dengan memasangnya di tubuh HTML/HTML editor dan/atau di layout HTML/JavaScript.

Sebelum memulai, saya akan membagikan kode-kodenya terlebih dahulu agar lebih mudah untuk mempraktekkannya.

1. Kode yang pertama adalah kode CSS yang akan digunakan pada fixed menu yang akan dipasang. Berikut adalah kode CSS nya.

#floating_menu{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#floating_menu ul li{float:left}
#floating_menu ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#floating_menu ul li a:hover{background-color:#666;color:white;}

2. Kode yang kedua adalah kode untuk mendeklarasikannya. Berikut adalah kodenya.

<div id='floating_menu'>
<ul>
<li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='http://3.bp.blogspot.com/-ICp2UiqBjGM/UYNUHAqlhHI/AAAAAAAAAeo/uwU58yeDnlE/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
</ul>
</div>

A. Nah setelah kita ketahui kodenya, kita beranjak ke langkah-langkah memasang fixed menu metode pertama. Berikut adalah langkah-langkah memasang fixed menu di gadget layout.

1. Masuk blogger > Layout > Add gadget > HTML/JavaScript.

2. Tambahkan kode berikut

<div style="position: fixed; top: 0px; center: 0px;width:150px;height:130px;">

<style>
#floating_menu{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#floating_menu ul li{float:left}
#floating_menu ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#floating_menu ul li a:hover{background-color:#666;color:white;}
</style>

<div id='floating_menu'>
<ul>
<li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='http://3.bp.blogspot.com/-ICp2UiqBjGM/UYNUHAqlhHI/AAAAAAAAAeo/uwU58yeDnlE/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
</ul>
</div>
</div>

3. Save dan lihat hasilnya.

B. Di atas adalah cara memasang fixed menu menggunakan metode pertama, dan sekarang memasang fixed menu menggunakan metode ke dua yaitu memasang fixed menu di tubuh HTML menggunakan HTML/Editor blogger (sumber). Berikut adalah langkah-langkahnya.

1. Masuk blogger > Template > Edit HTML > cari kode berikut ]]></b:skin>

2. Masukkan kode css berikut tepat di atas kode ]]></b:skin>

#floating_menu{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#floating_menu ul li{float:left}
#floating_menu ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#floating_menu ul li a:hover{background-color:#666;color:white;}

3. Cari kode </head> dan simpan kode berikut tepat di bawah kode </head>

<div id='floating_menu'>
<ul>
<li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='http://3.bp.blogspot.com/-ICp2UiqBjGM/UYNUHAqlhHI/AAAAAAAAAeo/uwU58yeDnlE/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
</ul>
</div>

4. Simpan template dan lihat hasilnya.

Catatan: tanda # yang dicetak biru diubah dengan url menu anda.

Mudah yang mana langkah-langkahnya? silahkan pilih salah satu metodenya ya. Semoga artikel memasang fixed menu di blog ini bermanfaat. Semoga berhasil. Terima kasih sudah berkunjung.

Membuat Floating Social Share Bar

2013-04-16T22:56:00.003-07:00

Jika sebelumnya saya sudah menjelaskan cara membuat mini floating social bookmark, kali ini saya akan menjelaskan cara membuat floating social share bar facebook, twitter, google plus, dan lain-lain. Caranya sangat mudah ikuti aja langkah-langkah membuat floating social share bar berikut ini.

1. Masuk blogger > Layout > Add a gadget > pilih HTML/JavaScript dan masukkan kode berikut di kolomnya.

<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="saktiuy.blogspot.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://saktiuy.blogspot.com/2013/04/membuat-floating-social-share-bar">code</a></div>
</div>

2. Save dan lihat hasilnya. Mudahkan?

Selamat mencoba. Semoga langkah-langkah membuat floating social share bar ini bermanfaat. Terima kasih sudah berkunjung.

Penggunaan Ctrl+F di HTML Editor Blogger

2013-04-16T22:23:00.000-07:00

Jika sebelumnya saya sudah menjelaskan wajah baru HTML editor di blog, kali ini saya akan sedikit menjelaskan penggunaan Ctrl+F di HTML Editor Blogger dengan benar. Penggunaan Ctrl+F kali ini berbeda. Jika sobat keliru atau bingung di mana letak search ketika mengedit template di html editor yang baru ini menggunakan ctrl+F, ga usah khawatir di sini saya akan menjelaskan bagaimana menggunakan ctrl+f yang benar di edit html. Berikut adalah contohnya.

Masuk ke blogger > Template > Edit HTML > lalu tekan Ctrl+F.

Contoh gambar di atas menunjukkan jika kita ingin mencari kode </body>. Masukkan kode </body> di kotak search seperti gambar di atas dan tekan "Enter" lalu otomatis akan menunjuk ke kode </body> pada tubuh HTML dan tidak perlu meng-Expand template widget lagi.

Gimana? Gampang kan sob? Semoga cara penggunaan Ctrl+F di HTML editor blogger ini bermanfaat ya. Terima kasih sudah berkunjung.

Membuat Read More Otomatis di Blog

2013-04-16T21:48:00.000-07:00

Jika sebelumnya saya sudah menjelaskan cara membuat related post atau artikel terkait, kali ini saya akan berbagi cara membuat read more otomatis di blog. Read more otomatis ini berfungsi agar penulis tidak perlu repot-repot lagi memotong artikel saat membuat atau mengedit artikel, jadi tinggal dipublish aja. Readmore otomatis ini saya sudah terapkan dan berfungsi dengan baik di template bawaan blogger saya ini.

Langsung aja ke TKP ya hehe. Berikut adalah langkah-langkah membuat read more otomatis di blog.

1. Masuk blogger > Template > Edit HTML > Ctrl+F > cari kode berikut (Sebelumnya Backup dulu templatenya).

]]></b:skin>

2. Masukkan kode css berikut tepat di atas kode ]]></b:skin>

.readmorecontent{float:right;margin:5px 5px 0 0;padding:2px 0}
.readmorecontent a{color: #555;text-shadow: 0 1px 0 rgba(255,255,255,.5);border-width: 1px;border-style: solid;border-color: #fff #ccc #999 #eee; background: #c1c1c1;background: -moz-linear-gradient(#f5f5f5, #c1c1c1);background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);background: -o-linear-gradient(#f5f5f5, #c1c1c1);background: -ms-linear-gradient(#f5f5f5, #c1c1c1);background: linear-gradient(#f5f5f5, #c1c1c1); text-decoration:none;font-size:11px;padding:5px 7px}
.readmorecontent a:hover{text-decoration:none;color:#48d}

3. Cari kode berikut

</head>

4. Masukkan kode javascript berikut tepat di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 300;summary_img = 300;img_thumb_width = 180;img_thumb_height = 130;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,f){if(e.indexOf("<")!=-1){var g=e.split("<");for(var h=0;h<g.length;h++){if(g[h].indexOf(">")!=-1){g[h]=g[h].substring(g[h].indexOf(">")+1,g[h].length)}}e=g.join("")}f=(f<e.length-1)?f:e.length-2;while(e.charAt(f-1)!=" "&&e.indexOf(" ",f)!=-1){f++}e=e.substring(0,f-1);return e+"..."}function createSummaryAndThumb(k){var i=document.getElementById(k);var h="";var g=i.getElementsByTagName("img");var j=summary_noimg;if(g.length>=1){h='<span style="display:none;float:left;margin:0px 10px 5px 0px;"><img src="'+g[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';j=summary_img}var l=h+"<div>"+removeHtmlTag(i.innerHTML,j)+"</div>";i.innerHTML=l};
//]]>
</script>

5. Cari kode berikut

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>

6. Hapus kode di atas dan ganti dengan kode berikut.

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div class='readmorecontent'><a expr:href='data:post.url'>Read more »</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

jadi kodenya akan seperti ini.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div class='readmorecontent'><a expr:href='data:post.url'>Read more »</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear: both;'/>

7. Save template dan lihat hasilnya. Gimana? berhasil ga? :)

Selamat mencoba ya. Jika ada kesalah mohon komentarnya ya buat masukan. Semoga langkah-langkah membuat read more otomatis di blog ini bermanfaat. Terima kasih. Semoga berhasil. Hehe.

Membuat Related Post Dengan Beberapa Label Pada Template Bawaan Blogger

2013-04-14T09:50:00.001-07:00

Setelah sekian lama saya mencari cara bagaimana membuat related post dan menemukan banyak sekali ragam caranya dan ternyata cara membuat artikel terkait hasil semua pencarian saya di google tidak berhasil diterapkan di template bawaan blogger. Akhirnya setelah bereksplorasi dan bereksperimen sendiri, saya menemukan cara membuat related artikel dengan cara saya sendiri.

Upaya untuk menarik minat pembaca salah satunya adalah dengan mencantumkan related post atau artikel terkait di bawah postingan. Related post ini berfungsi agar pembaca tidak meninggalkan blog bergitu saja setelah membaca artikel. Dengan adanya related post kemungkinan pembaca akan membaca artikel yang berkaitan dengan artikel yang telah dibacanya. Maka, pada kesempatan kali ini saya akan menjelaskan langkah-langkah membuat related post dengan beberapa label pada template bawaan blogger, berikut adalah langkah-langkahnya.

1. Masuk blogger > klik template > edit html > tekan Ctrl+F dan cari kode ini ]]></b:skin>
2. Masukkan kode css di bawah ini tepat di atas kode ]]></b:skin>

#related-posts{float:left;width:100%;border-bottom:1px solid #aaa;border-top:3px solid #bbb;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h2{font:16px Oswald;color:#111;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#333;font:12px Tahoma}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjVivZOzHEIO90hJzZ-fD8kY8oKlEX3pOzmmCauR7RnEgn1tWSpBvibtUTfYWmrv3wdFwYQqWBrnAeus-wNta4GaOudcnrhfaKwf0oe1nRWV6w8yrE3mm_jSAELfLZelOn9DT4VnW81o/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.2em;border-bottom:1px dashed #ddd;margin:0;padding:3px 0 3px 12px}
#related-posts a:hover{color:#2482d6;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

3. Masih di edit html, cari kode berikut.

<b:if cond='data:post.hasJumpLink'>

4. Masukkan kode di bawah ini tepat di atas kode <b:if cond='data:post.hasJumpLink'>

<div id='related-posts'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel terkait:</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</div>
</b:if>

5. Save template dan lihat hasilnya.

Bagaimana? Mudahkan? Semoga langkah-langkah membuat related post ini bermanfaat ya. Ok terima kasih banyak sudah berkunjung :))

Membuat Tombol Back To Top Dengan Mudah

2013-04-10T18:15:00.000-07:00

Tombol Back to top berfungsi mempermudah pembaca untuk kembali ke atas postingan tanpa menggeser scroll. Tombol back to top ini menempel di bagian pojok kanan bawah. Untuk membuatnya sangat mudah sekali tanpa menanamkan javascript. Jika ingin mencobanya, silahkan ikuti langkah-langkah membuat tombol back to top dengan mudah di bawah ini.

1. Masuk blogger.
2. Klik Layout > Add gadget > HTML/JavaScript.
3. Tambahkan kode berikut.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://2.bp.blogspot.com/-h7kIE_fO3Po/UWOfiBG3sfI/AAAAAAAAAXU/FLzLx353d74/s1600/Up.jpg" /></a>

4. Save dan lihat hasilnya. Selamat mencoba ya.

Membuat Mini Floating Social Bookmark

2013-04-10T09:41:00.001-07:00

Mini floating bookmark adalah sejenis widget yang menempel di layar dan akan mengikuti kemanapun scroll bergerak ke atas ataupun ke bawah. Di dalam mini floating social bookmark ini kita bisa memasukkan link akun jejaring sosial kita seperti facebook, twitter, dan youtube.

Pada kesempatan kali ini saya akan memberikan langkah-langkah membuat mini floating social bookmark yang mirip dengan widget yang ada di tepmlate Dinamic View. Mini floating social bookmark ini letaknya akan menempel di sebelah kanan. Untuk mencobanya silahkan ikuti langkah-langkah membuat mini floating social bookmark berikut ini.

1. Masuk blogger.

2. Buka template > Edit html > Tekan Ctrl+F masukkan kode ]]></b:skin> di search (Ctrl+F) lalu cari atau tekan enter.
3. Tempel kode css berikut tepat di atas ]]></b:skin>

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://2.bp.blogspot.com/-Ka8xfSsJCCs/UWYF2Cn05LI/AAAAAAAAAck/lJVKAUXNMD0/s1600/float_icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

4. Masukkan kode javascript berikut tepat sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $('.social-buttons .social-icon').mouseenter(function(){
            $(this).stop();
            $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
        });
        $('.social-buttons .social-icon').mouseleave(function(){
            $(this).stop();
            $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
        });
    });
</script>

Catatan: Kode javascript yang dicetak biru di atas jika sudah ada di blog anda sebelumnya sebaiknya jangan dipakai.

5. Kemudian tempel kode berikut tepat sebelum kode </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/YOUR FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/YOUR TWITTER' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/YOUR G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/YOUR ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/YOUR ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/YOUR feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

Customize: Ganti kata yang di cetak biru dengan id anda.

6. Save template dan selesai. Jika berhasil, penampakannya akan seperti berikut.

Demikian langkah-langkah membuat mini floating social bookmark ini sudah dijelaskan, semoga bermanfaat. Ngopi lagi yuks hehe.

Wajah Baru HTML Editor di Blog

2013-04-09T22:40:00.001-07:00

Jika anda seorang blogger yang memiliki hobi mengubah template, kini blogger telah menambahkan wajah baru HTML editor di blog. HTML editor yang lebih mudah digunakan. Dengan wajah baru HTML editor pengguna lebih mudah mencari bagian-bagian widget di HTML seperti Navbar, Header, Blog, Attribution, Blog Archive, dan Profile. Jika ingin mengubah template blog anda silahkan masuk blogger > template > edit html.

Jika anda ingin mengubah bagian widget di html, klik "Jump to widget" dan pilih widget yang akan diubah di html.

Ketika di klik, otomatis akan menuju widget yang dipilih. misal "Blog1"

Nah, lalu di mana letak opsi centang "Expand widget template?"

Pada HTML editor baru ini memang tidak akan menemukan Expand template widget. Tapi ternyata Expand template widget itu teletak pada tanda "►" klik tanda "►" akan membuka lipatan kode di dalamnya atau bisa disebut tanda "►" merupakan expand template widget.

Demikian wajah baru wajah baru HTML editor di blog sudah dijelaskan. Jika dalam tulisan ini ada kesalahan mohon dimaklum dan berikan masukkan karena saya cuma blogger cupu yang baru belajar wajah editor html baru ini tadi pagi hehe. Terima kasih sudah berkunjung.

Membuat Breadcrumbs di Atas Postingan

2013-04-09T10:52:00.002-07:00

Jika sebelumnya saya sudah menjelaskan bagaimana caranya membuat judul artikel di blog bisa diklik, kali ini saya akan menjelaskan bagaimana caranya membuat breadcrumbs SEO Friendly di atas judul postingan.

Ketika saya browsing ternyata breadcrumbs merupakan menu navigasi di atas judul postingan yang berpengaruh terhadap SEO. Ketika browsing banyak sekali yang menjelaskan langkah-langkahnya. Pada kesempatan kali ini saya blogger cupu akan menjelaskan langkah-langkah membuat breadcrumbs di atas postingan, berikut adalah langkah-langkahnya.

1. Masuk blogger > Template > Edit HTML > centang Expand template widget.

2. Cari kode (biar lebih cepat tekan Ctrl+F) ]]></b:skin> dan simpan kode berikut di atasnya.

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

3. Cari kode <b:includable id='main' var='top'> lalu ganti dengan kode berikut.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>

5. Save Template dan lihat hasilnya.

Untuk mengeceknya silahkan kunjungi:

http://www.google.com/webmasters/tools/richsnippets

dan masukkan link url artikel.

Semoga langkah-langkah membuat breadcrumbs di atas postingan ini bermanfaat.Semoga berhasil ;)

Membuat Judul Artikel di Blog Bisa Diklik

2013-04-09T10:14:00.000-07:00

Jika anda membuat blog di blogger dan menggunakan template bawaan, otomatis judul artikel tersebut tidak bisa diklik tapi mungkin ada juga template bawaan blogger yang memang bisa diklik (belum pernah nyoba semuanya sih hehe). Nah untuk optimasi SEO pada blog alangkah baiknya judul artikel tersebut bisa diklik, tapi itu semua tergantung anda. Menurut saya sih sebaiknya kita ubah judul postingan tersebut agar bisa diklik. Untuk mencobanya silahkan ikuti langkah-langkah membuat judul artikel di blog bisa diklik berikut ini.

1. Biasa sob, kopi sama rokok dulu biar anget ni malem hehe.

2. Login blogger buka Template > Edit HTML > centang Expand widget template.
3. Temukan kode berikut dan hapus kode yang saya beri warna merah.

            <h3 class='post-title entry-title' itemprop='name'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:else/>
                <b:if cond='data:post.url'>
                  <b:if cond='data:blog.url != data:post.url'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <data:post.title/>
                  </b:if>
                <b:else/>
                  <data:post.title/>
                </b:if>
              </b:if>
            </h3>

4. Save template dan lihat hasilnya.

Ketika anda mencari kode tersebut namun tidak ketemu, coba diganti h3 menjadi h2. Bagimana hasilnya? berhasilkah? Selamat mencoba.

Demikian langkah-langkah membuat judul artikel di blog bisa diklik semoga bermanfaat.

Install Aplikasi Lama di Windows 8 Menggunakan Troubleshoot Compatibility

2013-04-07T19:23:00.000-07:00

Windows 8 ternyata masih ada kelemahan yaitu jika ingin mengintall aplikasi dibutuhkan NetFX3. Jika anda belum menginstal NetFX3 silahkan baca installasi net FX3 di windows 8 pada artikel sebelumnya.

Windows 8 adalah product baru, jadi aplikasi-aplikasi lama masih belum kompatibel dengan windwos 8 seperti Driver dan aplikasi-aplikasi lainnya. Nah jika anda sudah membaca artikel sebelumnya, pada kesempatan kali ini akan dijelaskan langkah-langkah install aplikasi lama di windows 8 menggunakan troubleshoot compatibility. Berikut adalah langkah-langkah install aplikasi lama di windows 8 menggunakan troubleshoot compatibility.

1. Siapkan aplikasi atau driver.

2. Klik kanan pada aplikasi dan pilih Troubleshoot Compatibility.

3. Tunggu proses Detecting issues.

4.Pilih Troubleshoot program.

5. Pilih point "The program worked in earlier verison of windows but won't install or run now" dan "The requires additional permissions.

5. Pilih versi windows sebelumnya yang kompatibel dengan aplikasi atau driver tersebut. Jika kompatibel dengan windows 7 pilihlah windows 7. Kebetulan saya praktek cara ini di windows 7 jadi tidak ada pilihan windows 7. Jika di windows 8 akan ada pilihan windows 7.

6. Klik start the program lalu klik next.

7. Pilih "Yes, save these settings for this program."

8. Klik close troubleshooter dan jalankan installasi aplikasi.

Demikian langkah-langkah install aplikasi lama di windows 8 menggunakan troubleshoot compatibility dijelaskan, semoga bermanfaat.