MEMASANG SYNTAX HIGHLIGTER RINGAN DENGAN CSS

Fungsi dari Syntax Highlighter itu sendiri yaitu untuk menyisipkan code2 seperti Javascript, Css, dan HTML agar source code yang ada didalam posting mudah dibedakan. Bagi para blogger yang menyajikan tutorial Blog pasti sudah tidak asing lagi dengan Syntax Highlighter ini.

Langsung saja :

1. Login pada blog
2. Pilih dashboard template edit html
3. Kemudian letakan CSS di bawah ini tepat di atas code ]]></b:skin> 

 
/*Pre*/
pre,i[rel="pre"]{display:block;padding:5px .5em 5px 1em;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;border:2px solid #c5d0e3;position:relative;overflow:auto;word-wrap:normal;white-space:pre;-webkit-user-select:text;-moz-user-select:-moz-text;-moz-user-select:text;-khtml-user-select:text;-ms-user-select:text;user-select:text;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
pre:hover,i[rel="pre"]:hover {background-color: #e6e9f1;}
pre code{display:block;color:#111;margin-top:3px;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;letter-spacing:0;white-space:pre;overflow:auto;}
pre[rel="HTML"],pre[data-codetype="HTML"]{border-color:#4584BE;}
pre[rel="CSS"],pre[data-codetype="CSS"]{border-color:#5DA028;}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{border-color:#545448;}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{border-color:#7073CF;}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{border-color:#E36B23;}
pre[rel="XML"],pre[data-codetype="XML"]{border-color:#C44032;}
pre[rel="PHP"],pre[data-codetype="PHP"]{border-color:#FF9900;}
pre[rel*="+"],pre[data-codetype*="+"]{border-color:#0B7E88;}
pre .comments,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#00BB4B;font-style:italic;}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{color:#859900;}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#9B0909}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{color:#103197;}
pre .tag .title,pre .rules .property,pre .django .tag .keyword{font-weight:bold;}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{color:#0499D3;}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#cb4b16;}
pre .deletion{color:#dc322f;}
pre .tex .formula{background:#073642;}
pre.numbered{border-left-width:2px;}
pre .line-number,pre.numbered code{display:block;line-height:16px;}
pre .line-number{float:left;margin:0 1em 0 -1em;color:#586E75;border-right:2px solid #c5d0e3;text-align:right;min-width:35px;}
pre .line-number span{display:block;position:relative;padding:0 .5em 0 1em;}
pre .line-number span:nth-child(even){background-color:#FAFAFA;}
pre .line-number span em{position:absolute;bottom:-1px;left:100%;background-color:orange;padding:0 2px 1px 2px;border:1px solid black;font-style:normal;color:black;display:none;}
pre .line-number span:hover em{display:block;}
pre .line-number span:target a{display:block;color:white;position:relative;background-color:#268bd2;margin:0 -.5em 0 -1em;padding:0 .5em 0 0;}
pre.numbered code span{line-height:12px;}
pre[data-codetype="HTML"] .line-number span:target a{background-color:#4584BE;}
pre[data-codetype="CSS"] .line-number span:target a{background-color:#5DA028;}
pre[data-codetype="JavaScript"] .line-number span:target a{background-color:#bbbbbb;}
pre[data-codetype="JQuery"] .line-number span:target a{background-color:#7073CF;}
pre[data-codetype="JQuery UI"] .line-number span:target a{background-color:#E36B23;}
pre[data-codetype="XML"] .line-number span:target a{background-color:#C44032;}
pre[data-codetype="PHP"] .line-number span:target a{background-color:#FF9900;}
pre[data-codetype*="+"] .line-number span:target a{background-color:#B58900;}
pre code mark {background: white;}
pre[data-codetype]:before {content:attr(data-codetype);display:block;position:static;top:0;right:0;left:0;background-color:#666;padding:0 7px;margin:0 -3px;font:bold 11px/20px Arial,Sans-Serif;color:white;}
pre[data-codetype="HTML"]:before {background-color:#4584BE;}
pre[data-codetype="CSS"]:before {background-color:#5DA028;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#7073CF;}
pre[data-codetype="JQuery UI"]:before {background-color:#E36B23;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#C44032;}
pre[data-codetype*="+"]:before {background-color:#0B7E88;}
code,pre{padding:0 3px 2px;font-family:Monaco, Menlo, Consolas, "Courier New", monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code,i[rel="code"]{overflow:auto;max-height:200px;padding:2px 4px;color:#d14;white-space:nowrap;background-color:#f7f7f9;border:1px solid #e1e1e8;-webkit-user-select:text;-moz-user-select:-moz-text;-moz-user-select:text;-khtml-user-select:text;-ms-user-select:text;user-select:text;}
i[rel="code"]{display:block;} 

4. Selanjutnya simpan script di bawah ini tepat di atas code </head> atau di atas code </body>

 
<script src="http://googledrive.com/host/0Bwggu85mZBaxeWRoSXlwUV9QNzA/" type="text/javascript"> 

5. Save template

Cara Pemakaian :

Buat posting seperti biasa dan letakkan code di bawah ini pada halaman HTML bukan pada compose :

HTML

<pre class="numbered" data-codetype="HTML" title="Click"><code class="xml">
Masukkan Code Script Disini 
</code></pre>

CSS

<pre class="numbered" data-codetype="CSS" title="Click"><code class="xml"> 
Masukkan Code Script Disini 
</code></pre>

JAVASCRIPT

<pre class="numbered" data-codetype="JavaScript" title="Click"><code class="xml"> 
Masukkan Code Script Disini 
</code></pre>

XML

<pre class="numbered" data-codetype="XML" title="Click"><code class="xml"> 
Masukkan Code Script Disini 
</code></pre>

HTML+jQuery

<pre class="numbered" data-codetype="HTML+jQuary" title="Click"><code class="xml"> 
Masukkan Code Script Disini 
</code></pre> 

Setelah selesai, silahkan lihat hasilnya.

Read more »

LetterPress Text Effect with CSS

CATATAN HARIANKU - Selamat siang semua, jumpa kembali bersama Catatan Harianku yang kali ini membahas tentang text effect LetterPress yakni effect teks seperti tenggelam contohnya pada blog ini.

Sebenarnya dulu iseng - iseng juga sih dalam pembuatan blog ini dan banyak juga yang menanyakan tentang bagaimana sih cara pembuatannya ?

Sebenarnya karena saya bukan ahli apalagi pakar CSS sehingga banyak pertanyaan seperti itu yang sampai saat ini belum saya jawab alias diabaikan begitu saja, bukan karena saya sombong tapi dikarenakan memang tidak bisa untuk menjelaskannya.

Tapi supaya kawan - kawan tidak terlalu penasaran, dalam postingan ini saya hanya bisa memberikan contoh saja sedangkan untuk pengaplikasiannya nanti terserah pada kawan - kawan semua.

Contoh hasil seperti diatas ini hanya memanfaatkan satu baris pada CSS yakni pemanfaat text-shadow yakni :

text-shadow : 0px 2px 3px #555;

Pengertiannya adalah :
text-shadow - mendeklarasikan kepada css bahwa kita ingin memberikan effect bayangan kepada text
0px - bayangan x-offset pada text
2px - bayangan y-offset pada text
3 px - merupakan besarnya blur yang diinginkan pada text
#555 - merupakan warna text

Contoh pemakaian :

Misalnya kita memiliki kode CSS seperti dibawah ini

h2 {
        font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
 text-align: center;
}

Kode diatas nanti akan menampilkan h2 dalam bentuk standar biasa dengan besarnya font 70px dan bentuk huruf Helvetica dengan posisi ditengah

Nah sekarang baru kita sisipkan kode CSS shadow diatas untuk memberikan effect LetterPress pada kode CSS diatas yang nantinya tertulis seperti ini

h2 {
        font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
 text-align: center;

        text-shadow: 0px 2px 3px #555; 

 }

Nah, kode CSS yang berwarna merah itu adalah kode CSS yang saya sisipkan sehingga nanti hasilnya akan merubah text standar asal menjadi sesuatu yang berbeda seperti dibawah ini atau tulisan dalam postingan ini.

Nah demikian penjelasan singkat ini, semoga bermanfaat.

Read more »

Membuat Garis 1px Effect Inset

Kemaren ada seorang teman yang bertanya melalui inbox facebook

Mas saya mau tanya, bagaimana sih caranya membuat garis dibawah judul postingan kayak diblog CATATAN HARIANKU itu. Tolong ajarin dong...

Lalu saya bingung mau menjawab apa, sebab saya orang yang buta sama sekali dengan bahasa pemrograman. Semua dalam blog ini hasil dari copy-paste hehehe... (jujur sekali...). Tapi saya masih ingat cara membuatnya tapi sayang saya sudah lupa dimana mendapatkan kode tersebut.

Jadi kalau ada yang merasa kode yang saya masukkan disini adalah copyright seseorang, silahkan komplain, ntar biar saya delete aja. Tapi saya yakin kok.. bahwa teman - teman blogger disini orangnya pada ikhlas - ikhlas semua dalam berbagi sehingga hal yang seperti ini biasanya tidak terlalu diperpanjang.. hehehe (ngareeeep....com).

Sebenarnya, garis - garis yang seperti terlihat pada blog ini hanya memakai sedikit kode CSS saja dengan memanfaatkan warna dan tata letak garis.

---

CARA PEMASANGAN

---

Ikuti langkah - langkah dibawah ini :

1. Login ke Account Blogger 
2. Lalu Template - Edit HTML - centeng pada Expand Widget Templates 
3. Cari kode ]]></b:skin> (Gunakan Ctrl+F untuk mencari) 
4. Lalu selanjutnya Copy-Paste kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut.




5. Sebelum menyimpan pekerjaan sobat, biasakan untuk melakukan Pratinjau dahulu dengan menekan tombol Preview. 
6. Kalau tidak ada masalah silahkan klik Save Template untuk menyimpan. 

Sekarang untuk pemasangan CSS sudah selesai. NEXT.....

---

CARA PEMAKAIAN

---

Kalau cara pemakaiannya sih gampang, tinggal letakkan saja kode HTML dibawah ketempat yang ingin diberi garis.

<hr class="onepixel" /> 

Bagaimana sob... gampang kan. Semoga postingan ini bermanfaat.

Read more »

Widget Social Rotation Hover Style

---

BASA YANG SUDAH BASI

---

CATATAN HARIANKU - Tombol social Media memang saat ini sedang booming dikalangan blogger sehingga membuat para pemikir - pemikir berlomba - lomba untuk membuat tombol social media secantik dan semenarik mungkin.
Contohnya seperti social media yang satu ini, dengan effect Rotation Hover Style atau efek berputar sangat cocok sekali dipasang di blog anda. Widget ini tanpa harus editing template atau hanya tinggal templok aja pada penambahan widget. Untuk menambahkan widget baca disini.

D e m o

Kalau begitu kita langsug saja bagaimana cara pembuatannya.

---

CARA PEMASANGAN

---

Ikuti langkah - langkah dibawah ini :

1. Login ke Account Blogger 
2. Lalu Layout - Add a Widget
3. Lalu selanjutnya Copy-Paste kode dibawah ini




Keterangan :




4. Lalu Save untuk menyimpan. 

Sekarang coba lihat hasilnya... cantik bukan..!!

---

PENUTUP

---

Semoga postingan kali ini bisa berguna dan bisa dimanfaatkan dengan baik. Sampai ketemu lagi di postingan yang tidak kalah menarik lainnya. Alhamdulillah

Read more »

Button Effect Nudging Dengan CSS

---

BASA YANG SUDAH BASI

---

CATATAN HARIANKU - Kemaren saya sedang JSS (Jalan Sore-Sore) di perkotaan internet ini sambil mencari sesuatu yang bermanfaat. Kebiasaan saya kalau lagi blogging selalu menyimpan atau mengarsipkan artikel atau source kode HTML/CSS yang menurut saya berguna (entah kapan.. siapa tau) dan yang paling penting adalah kalau itu berupa artikel maka artikel itu benar - benar saya perlukan dan kalau itu berupa Source Kode, hal itu harus benar - benar working dan teruji. Ketika melihat blog BLOGGER TUNEUP (modification-blog[dot]blogspot[dot]com) saya sangat tertarik dengan tombol DEMO pada salah satu postingan yang bereffect nudging yang pada awalnya hanya terlihat sebuah ikon tapi ketika mouse diarahkan ke ikon tersebut maka gambar tersebut seperti membuka.. wow amazing.

Nah.. terinspirasi itulah saya kemudian mencari tentang bagaimana cara membuat itu hingga pada akhirnya kutemukan diblog CSS Tuts (under-88[dot]blogspot[dot]com) tentang cara pembuatan effect tersebut. Dan yang paling mencengangkan lagi, ternyata effect animasi itu hanya dibuat dengan kode CSS saja bukannya Javascript.

Lihat Demo

Kalau begitu kita langsug saja bagaimana cara pembuatannya.

---

CARA PEMASANGAN

---

Ikuti langkah - langkah dibawah ini :

1. Login ke Account Blogger 
2. Lalu Template - Edit HTML - centeng pada Expand Widget Templates 
3. Cari kode ]]></b:skin> (Gunakan Ctrl+F untuk mencari) 
4. Lalu selanjutnya Copy-Paste kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut.




5. Sebelum menyimpan pekerjaan sobat, biasakan untuk melakukan Pratinjau dahulu dengan menekan tombol Preview. 
6. Kalau tidak ada masalah silahkan klik Save Template untuk menyimpan. 

Sekarang untuk pemasangan CSS sudah selesai. NEXT.....

---

CARA PEMAKAIAN

---

Kalau dalam source kode aslinya adalah seperti ini



Sehingga kalau di klik akan membuka pada halaman yang sama, tapi sekarang kita akan memanfaatkan kode target="output" sebagai tambahan supaya ketika kita klik maka akan terbuka pada tab yang baru.
Akan tetapi hal ini sebagai opsional saja, jika tidak suka maka silahkan dibuang saja dan kembali pakai kode yang diatas.
Untuk cara pemakaian menyertakan kode HTML dibawah ini :

Ini untuk tombol DEMO



Ini untuk tombol DOWNLOAD



Ini untuk tombol Informasi



Untuk pemanfaatannya silahkan memakai kreasi masing - masing.

---

PENUTUP

---

Semoga postingan kali ini bisa berguna dan bisa dimanfaatkan dengan baik. Sampai ketemu lagi di postingan yang tidak kalah menarik lainnya. Alhamdulillah

Read more »

Membuat Sticky Footer Menu

---

BASA - BASI

---

CATATAN HARIANKU - Hollaaaaa.... jumpa lagi bersama CatHar yang kali ini menyuguhnya sesuatu yang "sesuatu banget" hehehe... kayak Syahrini aja.

Betul, kali ini saya kembali menyuguhkan tentang cara pembuatan Menu menempel pada footer atau bahasa daerahnya "Sticky Footer menu". Pembuatan ini secara tidak sengaja saya ketemukan di salah satu blogger luar tapi terus terang lupa nama blog dan alamatya (kalau ada yang tau silahkan beritahu saya ya...).

Lihat Demo

Setelah melihat demo diatas, apakah sobat - sobat tertarik... kalau ya silahkan lanjutkan membacanya tapi kalau tidak ya.. ngga apa-apa sih...

---

CARA PEMASANGAN

---

Ikuti langkah - langkah dibawah ini :

1. Login ke Account Blogger 
2. Lalu Template - Edit HTML - centeng pada Expand Widget Templates 
3. Cari kode ]]></b:skin> (Gunakan Ctrl+F untuk mencari) 
4. Lalu selanjutnya Copy-Paste kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut.




5. Sebelum menyimpan pekerjaan sobat, biasakan untuk melakukan Pratinjau dahulu dengan menekan tombol Preview. 
6. Kalau tidak ada masalah silahkan klik Save Template untuk menyimpan. 

Sekarang untuk pemasangan CSS sudah selesai. NEXT.....

---

CARA PEMAKAIAN

---

• Masih di Account Blogger Pilih Tab Layout
• Lalu klik Add a gadged (Cara menambah gadged baca disini)
• Masukkan kode dibawah ini

Keterangan :
Ganti "#" dengan link yang dikehendaki
Ganti "username" dengan account social media

• Simpan gadged sobat. 

Sekarang pekerjaan sudah selesai dan silahkan lihat hasilnya, maka akan muncul menu yang menempel di footer.

Semoga postingan ini bermanfaat. Alhamdulillah.

Read more »

Widget Alexa dan Cara Pemasangannya

---

BASA YANG SUDAH BASI

---

CATATAN HARIANKU - Assalamualaikum, jumpa lagi bersama saya orang awam yang masih berani aja nongol di internet hanya sekedar sok tahu dan sok pinter.. hehehe. Kali ini kita akan membahas masalah ALEXA. Mungkin diantara kalian ada yang masih belum tahu apa sih itu Alexa ?, sedangkan bagi yang sudah paham dan ngerti silahkan meneruskan membaca kalau pengen. Saya barusan jalan - jalan (di internet) ternyata banyak sekali toturial tentang Alexa ini, sampai - sampai bingung karena semuanya memiliki pendapat dan persepsi yang berbeda - beda (bagi yang punya pengalaman dan pemahaman) sedangkan bagi plagiat...(seperti saya .... hehehe) itu ngga jadi masalah yang penting copas dan posting... done!!

Oke... sebelum kita lebih jauh masuk kedalam, ada baiknya kita simak step-by-step tentang Alexa ini dan pahami serta aplikasikan sesuai dengan kebutuhan kalian.

---

APA ITU ALEXA

---

Menurut wikipedia, alexa adalah anak perusahaan dari amazon.com, yang dulunya dikenal dengan toolbar dan website. Lambat laun, situs ini berubah menjadi situs yang mengumpulkan data tentang perilaku browsing yang selanjutnya akan dianalisa untuk menyediakan informasi mengenai banyaknya pengunjung suatu situs dan berbagai aspek pendukungnya.
Oleh karena itu, bagi kebanyakan orang, adalah kebanggaan kalau mempunyai rangking tinggi di alexa, meskipun menurut Kila Morton, perhitungan di alexa kurang akurat. Selain kebanggan pribadi, alexa juga dijadikan acuan oleh beberapa perusahaan atau badan organisasi untuk menilai seberapa bermutu website yang kita miliki.

---

PENTINGKAH ALEXA INI

---

Kalau masalah penting atau tidaknya itu sih tergantung pada masing - masing perorangan sipemilik web/blog untuk apa yang mereka harapkan. Kalau memang dirasa dengan meningkatkan rangking di alexa bisa meningkatkan nilai jual website kita, yaa kenapa ngga pastinya penting juga sih. Tapi klo cuma web/blog kita sekedar tampil dan numpang lewat aja, yaa udah jangan diperpanjang lagi mendingan stop membacanya sampai disini.

Kalau saya pribadi (ini menurut saya lo..bukan menurut tetangga..hehehe) yang mencari recehan di blog, Alexa itu sangat penting untuk kelangsungan hidup blog dan kelangsungan dapur saya... hehehe kok bisa dapur, emang ada hubungannya?? Ya iyalah ada... dengan meningkatnya traffic yang tercatat di Alexa dan backlink yang didapat otomatis juga meningkatkan pengunjung ke blog saya sehingga banyak kesempatan salah satu pengunjung mengklik iklan adsense yang ditempatkan di blog dan hal itu merupakan penghasilan.. hehehe betul tidak.

Anda mungkin ingin meningkatkan Alexa rank karena pengiklan, networkers iklan menggunakannya sebagai ukuran untuk menentukan popularitas website/blog anda. Jadi, jika anda adalah seseorang yang menghasilkan uang dari iklan, anda pasti ingin meningkatkan rangking alexa.
Menurut seobook dalam salah postingan “Apakah Alexa Relevan di Tahun 2010″, dijelaskan meskipun alexa bukanlah no 1 dalam bidang ini, tetapi mereka memberikan layanan yang lebih baik dengan fasilitas gratisnya. Apalagi pada bulan Maret 2009, Alexa.com mengalami desain ulang lengkap dengan metrik baru termasuk : Pageviews per User, Bounce Rate, dan Time on Site dan pada minggu-minggu berikutnya mereka menambahkan fitur baru termasuk Demografi, Clickstream dan Search Traffic stats. Tentunya dengan penambahan fasilitas ini, kita lebih diuntungkan karena kita bisa mengetahui demografi pengunjung dari website/blog kita.
Nah, dengan kata “Gratis” dan “Menguntungkan” ini, apa anda tidak tertarik ???

---

PEMANFAATANNYA GIMANA ?

---

Ada beberapa pemanfaatan cara menaikkan rangking kita di alexa, yaitu dengan cara melakukan instalasi toolbar alexa di browser kita, memasang widget alexa di website/blog kita, menulis artikel tentang alexa, atau bahkan menginstall script khusus. Masalahnya, dari sekian banyak tips/trik tersebut, apakah bisa menjamin bahwa rangking website/blog kita akan naik??
Sebenarnya Alexa-nya ngga usah digeber seperti kendaraan bermotor, karena yang kita pacu sebenarnya adalah blog kita yang sudah didaftarkan di Alexa dengan melakukan hal - hal lazim sebagai pemicu peningkatan rangking di Alexa, antara lain :

• Update konten. Usahakan setiap hari anda rajin untuk mengupdate konten website/blog anda. Minimal 2 artikel per hari agar website/blog anda tidak monoton dan pengunjung anda tidak bosan dengan konten yang “itu-itu” saja
• Bookmark Sosial. atau bahasa kerennya Social Bookmarking. Daftarkan situs anda pada situs social bookmarking dan update konten anda ke situs tsb.
• Blogwalking. Rajin-rajinlah mengunjungi website/blog orang lain. Selain kita bisa tambah temen, kita bisa ngasih komentar terhadap postingan tertentu dan yang pasti kita bisa "nitip link"
• Kreatif. Buatlah postingan/artikel yang selalu baru. Jangan copas mentah-mentah milik orang. Kalau terpaksa, buatlah modifikasi agar artikel tidak seperti milik orang lain (seperti saya ini..hehehe).
• Belajar Menulis. Mungkin aneh ya…tapi memang menulis itu ada aturannya. Bukan main asal tulis, tapi ikuti juga aturannya. Karena dengan belajar menulis, tentunya postingan/artikel kita akan lebih enak dibaca.

---

COBA APLIKASIKAN KE BLOG

---

Nah.. ini inti dari pembahasan diatas, bagaimana cara mendaftarkan blog ke Alexa biar bisa seperti punya kawan - kawan lain yang memiliki rangking tertinggi. Tapi seiring dengan berjalannya waktu kita juga bisa kok.
Sekarang ikuti lagi step-by-stepnya dibawah ini :

• Silahkan kunjungi Alexa
• Maka nanti kalian akan masuk kehalaman seperti terlihat dibawah ini, terdapat 3 pilihan widget yang bisa kalian pilih. Jadi sesuaikan saja dengan kebutuhan blog/web kalian.





• Masukkan URL blog/web kalian kedalam salah satu form pilihan widget (contoh: http://suriyadi.blogspot.com) lalu klik Build Widget
• Selanjutnya kalian akan masuk kehalaman selanjutnya, nah silahkan copy code pada salah satu widget yang diinginkan.





• Langkah selanjutnya adalah pasang kode tersebut di Widget blog kalian (Dengan asumsi bahwa kalian semua sudah bisa memasang widget di blogger - Yang belum bisa cara memasang widget silahkan baca caranya disini).
• Sekarang sudah selesai.

---

PENUTUP

---

Bagaimana...??? apakah kalian puas. Hohoho.... kalau kalian merasa puas syukur deh tapi kok saya jadi lemes ya..hehehe.
kalau begitu, cukup sampai disini dulu toturial kali ini, semoga bisa bermanfaat dan berguna bagi kalian.. See You again. Alhamdulillah Done !

Read more »