UNIQUE WORLD

Kamis, 12 Januari 2012

Cara Memasang Tombol Google+ di Blogger

Ricky Hartanto di 21.20 1 komentar

Langkah memasang tombol G+ sangat mudah silahkan ikuti tutorial dibawah ini

Silahkan memasang Script dibawah ini atas Tag </body>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Kemudian anda bisa memasang tombol G+ dimana saja dengan menambahkan kode dibawah ini.

<g:plusone size="small"></g:plusone>

Cara memasang tombol G+ diatas sebenarnya sudah selesai, tapi jika anda ingin menambahkan kode yang lebih rinci anda bisa mencoba beberapa script dibawah ini:

Tombol G+ dengan ukuran Standar (24 piksel)

<g:plusone></g:plusone>

Tombol G+ dengan ukuran Kecil (15 piksel)

<g:plusone size="small"></g:plusone>

Tombol G+ dengan ukuran Sedang (20 piksel)

<g:plusone size="medium"></g:plusone>

Tombol G+ dengan ukuran Tinggi (60 piksel)

<g:plusone size="tall"></g:plusone>

Tombol G+ Untuk HTML5

<div class="g-plusone" data-size="standard" data-count="true"></div>

Anda juga dapat membuat custom tombol G+ sendiri

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {"parsetags": "explicit"}
</script>
<script type="text/javascript">
  function renderPlusone() {
    gapi.plusone.render("plusone-div");
  }
</script>
<body>
  <a href="#" onClick="renderPlusone();">Render the +1 button</a>
  <div id="plusone-div"></div>
</body>

Custom Tombol G+ dengan URL khusus

<!-- customized for a specific address -->
<g:plusone href="https://plus.google.com/108442421331149025926"></g:plusone>

Untuk customize tombol G+ saya menyarankan anda memasukan url dari Google+ profile atau halaman (page) G+ yang sudah ada buat, lihat tutorialnya disini

Cara pasang Tombol G+ disebelah Tombol Facebook (dalam halaman posting)

Kode standar Google+ tidak bekerja pada postingan dalam lingkup halaman home (index).

Pada halaman Posting dengan menggunakan kode <G:Plusone/> biasanya tidak terjadi masalah, tapi saat kalian mencoba memasang tombol G+ yang ditujukan pada halaman post yang letaknya berada dalam halaman utama ini biasanya bermasalah karena G+ setahu saya tetap akan mendeteksi sebagai halaman index bukan sebagai halaman post. Untuk mengatasi masalah ini silahkan mencoba menggunakan kode ini <g:plusone expr:href='data:post.url'/>

Sebenarnya G+ sendiri sudah menyedian Custom Badge yang bisa anda coba langsung di alamat ini disini atau anda bisa melihat informasi Full API selengkapnya disini

sumber:o-om.com

Terima Kasih sudah membaca artikel ini^^

Analisis Data Dan Fungsi-Fungsi Dasar:Feedburner 2

Ricky Hartanto di 21.18 0 komentar

Sebelum kita mengoptimalkan fungsi FeedBurner dan melakukanmonetasi feed blog kita sebagai salah satu cara make money blogging, kita perlu mengetahui apa saja data yang ditelusuri oleh feedburner dan apa saja fungsi-fungsi dasar yang dimiliki oleh feedburner.

Fungsi-fungsi dasar ini bisa kita lihat dan analisis langsung dengan mudah karena ditampilkan dalam bentuk grafik chart dan statistik. Untuk mengetahui fungsi-fungsi dasar feedburner lebih jelas silahkan ikuti langkah-langkah berikut:

Login ke Â FeedBurner di feedburner.com ataufeedburner.google.com. atau daftar dulu di feedburner dan dapatkan feed blog kita.

gambar 1 daftar dan login untuk membuat feedburner

Akan muncul tampilan daftar blog yang kita sudah daftarkan di feedburner. Klik judul blog yang ingin kita optimalkan.

gambar 2 klik judul feed blog

Halaman berikutnya akan langsung ke tab Analyze. Tab Analyze feedburner berfungsi untuk menganalisa statistik dan perkembangan feed kita. Ada 4 tab lain di feedburner yaitu “Optimize”untuk mengoptimalkan fungsi feedburner, “Publicize” untuk menampilkan logo, form, dan banner feedburner diblog kita, “Troubleshootize” bila kita menemukan masalah di feedburner, dan“monetize” untuk monetasi feed blog kita. What’s?? Menguangkan Feed Blog? Yah, feed blog kita bisa diuangkan, tapi hal tersebut kita akan bahas pada tulisan selanjutnya. Saat ini kita pahami dulu fungsi-fungsi dasar feedburner, yaitu item-item apa saja yang ditelusuri oleh feedburner. Ada 3 bagian pada tab analyze ini, yaitu Feed Stats, Headline Animator Stats, danConfigure Stats.

Analisis Data Statistik Feed Blog Kita Di FeedBurner Feed Stats

Feed Stats menampilkan grafik pelanggan blog kita. Ada 2 item dalam chart ini yaitu â€œsubscribersâ€� dan â€œreachsâ€�. Subscribers adalah jumlah pelanggan feed blog kita dan Reach adalah jumlah pelanggan yang melakukan aksi (view, klik, atau download) terhadap feed blog kita.

gambar 3 Klik Feed Stats

Seperti contoh gambar di atas, blog make money blogging ini memiliki 11 pelanggan (subscribers), 1 orang yang melakukan aktifitas, dan aktifitas yang dilakukan berupa melihat (view) 2 artikel blog make money blogging ini. Hayoo Ngaku, siapa yang melakukan ini ???.

Di bagian Feed Stats ini kita bisa lihat lebih detail pada 4 item lain, yaitu Subscribers, Item Use, Map Overlay, dan Uncommon Uses.

Subcribers: Pada bagian ini kita bisa menganalisis jumlah pelanggan blog kita, dari mana sumbernya, apa browser yang digunakan, platform reader dan aggregator yang digunakan, dan platform email yang digunakan untuk mendaftar. Email detailnya tidak diinformasikan oleh feedburner.
Item Use: Pada bagian ini kita bisa menganalisis aktifitas yang dilakukan pelanggan feed blog kita berapa jumlah artikel dan artikel yang mana yang dilihat, diklik dan didownload.
Map Overlay: Pada bagian ini kita bisa melihat data pelanggan blog kita berdasarkan lokasi.
Uncommon Uses: Pada bagian ini kita bisa menganalisis aktifitas lain dari pelanggan selain melihat, klik, dan download yang tidak umum.

Analisis Data Statistik Headline Animator Stats Feedburner

Bagian Headline Animator Stats berfungsi menampilkan jumlah tampilan dan jumlah klik yang orang lain lakukan terhadap Headline Animator blog kita. Headline Animator adalah banner animasi yang menampilkan judul blog kita dan judul 5 postingan terakhir blog kita secara animasi. Headline Animator ini bisa kita buat di bagian Tab Publicize atau langsung klik “provide your own” yang langkah-langkahnya akan kita bahas pada tulisan lain.

Konfigurasi Data Statistik Feed Blog Kita Di FeedBurner

Bagian Configure Stats bisa kita gunakan untuk mengatur apa saja yang ingin kita telusuri dari feed blog kita. Secara default 4 item sudah aktif ditelusuri. 3 item lain silahkan diaktifkan juga untuk menelusuri item yang dilihat, diklik, dan didownload.

Gambar 5 Klik Configure Sats

Kesimpulan

Setelah memahami fungsi-fungsi dasar feedburner kita mengetahui item-item apa saja yang ditelusuri oleh feedburner dan membantu kita berupa statistik data dari item tersebut. Dengan mengetahui item-item tersebut kita bisa mengoptimalkan fungsi feedburner untuk mendapatkan hasil yang lebih baik, sehingga nantinya blog kita bisa kita lakukan monetasi. Bagaimana cara menguangkan blog kita (monetasi) dengan feedburner ini akan kita bahas ditulisan lain. Stay Tuned dengan Berlangganan Feed Blog Ini.. Happy Blogging.

sumber http://www.bloggerpemula.info/feedburner-2-analisis-data-dan-fungsi-fungsi-dasar/#more-695

Terima Kasih sudah membaca artikel ini^^

Membuat Effek Zoom Gambar di Blog

Ricky Hartanto di 21.15 0 komentar

Sobat blogger mungkin masih sedikit yang tau tentangMembuat Effek Zoom Gambar di Blogspot, banyak kegunaan dari effek ini. Effek ini menggunakan jQuery, sehingga tampilannya akan lebih lembut dan halus. Ada kalanya kita melihat suatu gambar tutor yang tampilan gambarnya sangat kecil dan tidak jelas, Effek Zoom ini menampilkan gambar dengan ukuran sebenarnya, buat sobat yang penasaran, contohnya bisa sobat lihat di SudutPhoto. Jika sobat berminat, ikuti langkah-langkah berikut ini;

Membuat Effek Zoom Gambar di Blog
1.Masuk ke blogger
2.Klik Perancangan lalu klik Edit HTML;
3.Carilah kode ]]></b:skin>
4.Kemudian sisipkan kode berikut ini tepat di atasnya:

/* Zoom Image www.wakrizki.net
------------------------------- */
div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}
5.Selanjutnya cari kode </head>
6.Kemudian sisipkan kode berikut ini tepat di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://rizki-khaizir.googlecode.com/files/jquery.imageZoom.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>
7.Langkah terakhir adalah simpan template sobat. Semoga berhasil

Terima Kasih sudah membaca artikel ini^^

Cara Melihat Kembaran Gaib Kamu

Ricky Hartanto di 21.13 0 komentar

Percaya atau enggak???

Kamu pernah dengar kan kalo kita punya kembaran gaib? Nah, berikut 8 langkah cara lihat kembaran gaib kamu:

1. cabut 7 helai rambut kepala.

2. Ambil 7 potongan kuku tangan atau kaki

3. Terus kamu taro tuh semua di sehelai kain putih (apa aja, yg penting putih).

4. Udah gitu kamu gulung deh kain putih yang ada isinya tadi.

5. Ambil jeruk purut, satu aja, kamu peras sampe habis.

6. Air perasan tadi kamu tetesin di gulungan kain putih.

7. Gulungan kain tadi kamu taro deh ditaman atau halaman rumah, dimana aja yg penting deket pager rmh, kalo bisa jangan ketauan orang lain, ga perlu ditanam taro aja diantara tumbuhan.

8. Tungguin aja 7 hari, ntar tuh kembaran dateng, ga sampe malem kedelapan, dia bisa muncul dimana aja, ga ganggu, cuma muncul sepintas, biasanya kembaran itu niru apa yang udah pernah kita kerjakan atau yang lagi kita kerjakan, dia ga bisa diliat sama orang lain, cuma kita sendiri.

Terima Kasih sudah membaca artikel ini^^

Cara Membuat Warna Kotak Komentar Admin Berbeda

Ricky Hartanto di 21.09 1 komentar

Maksud dari judul di atas adalah kita akan memberi warna serta border pada kolom komentar admin sehingga pengunjung dapat dengan mudah membedakan mana komentar admin dan mana komentar pengunjung lain. Warna kotak komentar yang berbeda ini akan terjadi saat kita berkomentar jika kita selaku admin blog telah sign in di Blogger. Contohnya seperti kotak komentar admin di blog ini yang terlihat berbeda dengan komentar lainnya.

Bila tertarik untuk mengaplikasikan trik ini pada template blog Sobat, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Sobat.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang di Expand Template Widget.

5. Cari kode ]]></b:skin>. Tekan Ctrl + F lalu isikan kode untuk mempercepat pencarian.

6. Copy kode di bawah ini lalu paste di atas kode tersebut.

.comment-body-author {
background: #fee6e6; /* Warna Background */
border:2px dotted #d31111; /*Border*/
margin:0;
padding:0 0 0 0px;
}

#fee6e6 merupakan warna untuk latar belakang, silakan ganti kode warnanyauntuk mengubah warnanya.
2px dotted #d31111 adalah border style dot dengan ketebalan 2 piksel dan berwarna #d31111. Silakan diubah sesuai keinginan Sobat.

7. Cari kode seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<b:if cond='data:comment.isDeleted'>

<b:else/>

</b:if>

</dd>

8. Tambahkan kode:

<b:if cond='data:comment.author == data:post.author'>

</dd>

<b:else/>

di bawah kode:

<data:commentPostedByMsg/>

</dt>

dan kode </b:if> di bawah kode:

<b:if cond='data:comment.isDeleted'>

<b:else/>

</b:if>

</dd>

sehingga hasilnya menjadi seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<b:if cond='data:comment.author == data:post.author'>

</dd>

<b:else/>

<b:if cond='data:comment.isDeleted'>

<b:else/>

</b:if>

</dd>

</b:if>

9. Klik tombol SIMPAN TEMPLATE.

sumber:http://klikmunadi.blogspot.com/2011/07/cara-membuat-warna-kotak-komentar-admin.html

Terima Kasih sudah membaca artikel ini^^

Aneka Macam Kode Dasar -=HTML=-

Ricky Hartanto di 20.43 0 komentar

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halamanHTML dengan software instant seperti Dreamweaver dll.

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span>hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
BELAJAR

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar

Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>hasilnya seperti ini:
4₂

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
4²

Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf

Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
~~Belajar~~

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar

Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar

Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:

DOT 1

DOT 2

DOT 3

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:

Belajar

Membuat tabel border solid gunakan kode:

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)
DAN SEKARANG JUGA WAKTUNYA AGAN-AGAN MENCOBA ...HEHEH
GOOD LUCK..ALL Thanks....
sumber

Terima Kasih sudah membaca artikel ini^^

Cara Membuat Scroll Untuk Blog Archive(Daftar isi)

Ricky Hartanto di 20.26 0 komentar

Artikel kali ini Belajar Komputer masih membahas tentang tutorial blogger yaitu cara memasang fungsi scroll pada blog archive dengan sedikit mengedit template. Langsung saja Sobat berikut langkah-langkahnya :

Login ke blog sobat
Pilih Rancangan dan Edit Hmtl
Cari kode berikut <b:includable id='main'> agar cepat tekan F3
Setelah sobat temukan kode diatas perhatikan deretan kode berikut :

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>

Pada deretan kode diatas yang berwarna merah tambahkan style='overflow:auto; height:120px' sehingga lengkapnya seperti ini <div class='widget-content' style='overflow:auto; height:120px'>
Selanjutnya save template dan lihat hasilnya.

sumber

Terima Kasih sudah membaca artikel ini^^

UNIQUE WORLD

Kamis, 12 Januari 2012

Cara Memasang Tombol Google+ di Blogger

Analisis Data Dan Fungsi-Fungsi Dasar:Feedburner 2

Analisis Data Statistik Feed Blog Kita Di FeedBurner Feed Stats

Analisis Data Statistik Headline Animator Stats Feedburner

Konfigurasi Data Statistik Feed Blog Kita Di FeedBurner

Kesimpulan

Membuat Effek Zoom Gambar di Blog

Cara Melihat Kembaran Gaib Kamu

Cara Membuat Warna Kotak Komentar Admin Berbeda

Aneka Macam Kode Dasar -=HTML=-

Cara Membuat Scroll Untuk Blog Archive(Daftar isi)

Email subscribe

About Me™

Kategori Hal Unik

Daftar isi

Popular Posts

Pengikut