Showing posts with label Widgets. Show all posts

gravatar

Cara Memasang Fitur Blogger Star Rating di Posting Blog

Star Rating Blogger
Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.

Cara Memasang Star Ratings Widget Pada Official Blogger Templates

Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:
1. Masuk ke dashboard Blogger.
2. Buka halaman layout (page elements).
3. Klik "edit" pada bagian badan posting (blog posts).
blogger
4. Klik/centang "Show Star Ratings"
blogger
5. Setelah itu save.
Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.

Cara Memasang Star Ratings Widget Pada Custom Blogger Templates

Pada template blogger yg tidak disediakan oleh Blogger sendiri, star ratings tidak akan muncul meskipun sudah diaktifkan dengan cara seperti di atas. Hal ini karena pada template Blogger yg disediakan oleh pihak ketiga tidak diberikan script serta HTML star ratings. Melihat hal demikian, saya mencoba menengok template-template resmi Blogger dan menemukan beberapa bagian widget star ratings. Sebagai uji coba, saya kemudian mengekstraknya & mengaplikasikannya pada template blog ini.
Ada dua langkah penting untuk memasang star rating blogger:
  • Memasang Kode HTML star ratings:
1. Aktifkan terlebih dahulu fitur star ratings seperti cara di atas. Apabila tidak ditemukan, akses dashboard melalui draft.blogger.com. Save.
2. Buka edit HTML ( template > edit HTML), jangan lupa centang "Expand Widget Templates".
3. Jika ingin memasang star ratings di bawah judul posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F), letakkan kode berikut di bawahnya. Jika ingin memasang di bawah isi posting, cari <data:post.body/>, letakkan kode berikut di bawahnya:
<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>
Note:
-Apabila anda telah menggunakan share buttons (Facebook, Twitter, Google+) yg saya share pada posting terdahulu, letakkan kode di atas </b:if>.
- Apabila <div class='post-header-line-1'/> tidak ditemukan, cari <data:post.body/>, letakkan kode di atasnya.
  • Memasang Script star ratings:
1. Masih pada edit HTML, cari <b:include name='feedLinks'/>, letakkan script berikut di bawahnya:
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
Note: Jika <b:include name='feedLinks'/> tidak ditemukan, cari <b:includable id='feedLinks'>.
2. Save template.
Blogger star ratings akan muncul di atas atau di bawah posting sesuai cara yg dipilih. Pastikan & perhatikan posisi widget agar sesuai dengan template blog. Jika perlu beri pengaturan CSS agar tampil pada posisi yg sempurna & sesuai keinginan.

Have a nice blogging * Have a nice learning!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Cara Memasang Fitur Blogger Star Rating di Posting Blog

Star Rating Blogger
Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.

Cara Memasang Star Ratings Widget Pada Official Blogger Templates

Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:
1. Masuk ke dashboard Blogger.
2. Buka halaman layout (page elements).
3. Klik "edit" pada bagian badan posting (blog posts).
blogger
4. Klik/centang "Show Star Ratings"
blogger
5. Setelah itu save.
Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.

Cara Memasang Star Ratings Widget Pada Custom Blogger Templates

Pada template blogger yg tidak disediakan oleh Blogger sendiri, star ratings tidak akan muncul meskipun sudah diaktifkan dengan cara seperti di atas. Hal ini karena pada template Blogger yg disediakan oleh pihak ketiga tidak diberikan script serta HTML star ratings. Melihat hal demikian, saya mencoba menengok template-template resmi Blogger dan menemukan beberapa bagian widget star ratings. Sebagai uji coba, saya kemudian mengekstraknya & mengaplikasikannya pada template blog ini.
Ada dua langkah penting untuk memasang star rating blogger:
  • Memasang Kode HTML star ratings:
1. Aktifkan terlebih dahulu fitur star ratings seperti cara di atas. Apabila tidak ditemukan, akses dashboard melalui draft.blogger.com. Save.
2. Buka edit HTML ( template > edit HTML), jangan lupa centang "Expand Widget Templates".
3. Jika ingin memasang star ratings di bawah judul posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F), letakkan kode berikut di bawahnya. Jika ingin memasang di bawah isi posting, cari <data:post.body/>, letakkan kode berikut di bawahnya:
<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>
Note:
-Apabila anda telah menggunakan share buttons (Facebook, Twitter, Google+) yg saya share pada posting terdahulu, letakkan kode di atas </b:if>.
- Apabila <div class='post-header-line-1'/> tidak ditemukan, cari <data:post.body/>, letakkan kode di atasnya.
  • Memasang Script star ratings:
1. Masih pada edit HTML, cari <b:include name='feedLinks'/>, letakkan script berikut di bawahnya:
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
Note: Jika <b:include name='feedLinks'/> tidak ditemukan, cari <b:includable id='feedLinks'>.
2. Save template.
Blogger star ratings akan muncul di atas atau di bawah posting sesuai cara yg dipilih. Pastikan & perhatikan posisi widget agar sesuai dengan template blog. Jika perlu beri pengaturan CSS agar tampil pada posisi yg sempurna & sesuai keinginan.

Have a nice blogging * Have a nice learning!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Cara Buat/Pasang Fitur Emoticon/Smiley di Comment Blogger

emoticon/smiley blogger
Emoticon/smiley dapat mewakili ekspresi komentator blog. Selain itu, emoticon/smiley dapat lebih mempercantik  tampilan bagian komentar blog. Dengan menggunakan javascript, kita dapat melakukan hack untuk menambahkan fitur emoticon pada blog berplatform Blogger. Emoticon ini menggunakan basis perintah emoticon  Yahoo! yg telah kondang itu. Misalnya, ketika ingin menampilkan gambar emoticon senyum, digunakan perintah/menuliskan karakter :), dst. Di blogger, perintah tersebut dapat diadaptasi guna memunculkan tampilan gambar smiley/emoticon tertentu. Pada fitur emoticon komentar Blogger ini, saya menggunakan gambar-gambar berformat gif milik Yahoo! yg memiliki efek animatif (bergerak).
demo smiley/emoticon comment blogger

Cara Pasang/Buat Fitur Emoticon Pada Komentar Blogger

Jika sobat Blogger tertarik memasang fitur emoticon pada blog sobat, ikuti beberapa langkah pemasangannya. Pada intinya ada 3 poin langkah penting:
a. Memasang CSS yg mengatur tampilan emoticon.
b. Memasang kode HTML guna menampilkan preview emoticon/smiley di bagian atas kotak komentar. Fungsinya sebagai panduan pengunjung ketika hendak membuat emoticon pada komentar.
c. Memasang kode javascript, yg berfungsi mengconvert perintah menjadi gambar emoticon.

Berikut cara pemasangannya:
1. Masuk ke Design/Template > Edit HTML
2. Centang "Expand Widget Templates"
3. Copy paste kode CSS berikut di ATAS ]]></b:skin> (cari dg Ctrl + F):
.bukarahasiasmiley {background: none repeat scroll 0 0 #EFF5FB !important;font-size: small !important;padding: 5px !important;margin:auto !important;text-align: left !important;font-weight:bold !important;width:100% !important;-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;}
.bukarahasiasmiley span {padding-right: 3px !important;} 
img.brbsmly {height: auto !important;vertical-align: middle !important;width: auto !important;border:0px !important;}
Jika ingin ganti warna background, ganti #EFF5FB dengan kode warna lain.
4. Cari <b:if cond='data:post.embedCommentForm'>. Biasanya ada dua tag xml seperti itu, cari & pilih yg kedua, yaitu yg berpasangan dengan <b:include data='post' name='comment-form'/>.
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
5. Copy kode HTML berikut (klik select all & copy), letakkan di BAWAH/SETELAH <b:if cond='data:post.embedCommentForm'>.



6. Copy kode berikut & letakkan di atas </body>:
<script src='
https://sites.google.com/site/bukarahasiahost/blogger-comment-smileys/bukarahasiablogspot-ysmileys-bloggercomments.txt' type='text/javascript'></script>
7. Save template.
8. You are done!

Kini pengunjung n sobat dapat menggunakan emoticon/smiley di komentar blog sobat.
Have a nice Blogging.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Cara Buat/Pasang Fitur Emoticon/Smiley di Comment Blogger

emoticon/smiley blogger
Emoticon/smiley dapat mewakili ekspresi komentator blog. Selain itu, emoticon/smiley dapat lebih mempercantik  tampilan bagian komentar blog. Dengan menggunakan javascript, kita dapat melakukan hack untuk menambahkan fitur emoticon pada blog berplatform Blogger. Emoticon ini menggunakan basis perintah emoticon  Yahoo! yg telah kondang itu. Misalnya, ketika ingin menampilkan gambar emoticon senyum, digunakan perintah/menuliskan karakter :), dst. Di blogger, perintah tersebut dapat diadaptasi guna memunculkan tampilan gambar smiley/emoticon tertentu. Pada fitur emoticon komentar Blogger ini, saya menggunakan gambar-gambar berformat gif milik Yahoo! yg memiliki efek animatif (bergerak).
demo smiley/emoticon comment blogger

Cara Pasang/Buat Fitur Emoticon Pada Komentar Blogger

Jika sobat Blogger tertarik memasang fitur emoticon pada blog sobat, ikuti beberapa langkah pemasangannya. Pada intinya ada 3 poin langkah penting:
a. Memasang CSS yg mengatur tampilan emoticon.
b. Memasang kode HTML guna menampilkan preview emoticon/smiley di bagian atas kotak komentar. Fungsinya sebagai panduan pengunjung ketika hendak membuat emoticon pada komentar.
c. Memasang kode javascript, yg berfungsi mengconvert perintah menjadi gambar emoticon.

Berikut cara pemasangannya:
1. Masuk ke Design/Template > Edit HTML
2. Centang "Expand Widget Templates"
3. Copy paste kode CSS berikut di ATAS ]]></b:skin> (cari dg Ctrl + F):
.bukarahasiasmiley {background: none repeat scroll 0 0 #EFF5FB !important;font-size: small !important;padding: 5px !important;margin:auto !important;text-align: left !important;font-weight:bold !important;width:100% !important;-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;}
.bukarahasiasmiley span {padding-right: 3px !important;} 
img.brbsmly {height: auto !important;vertical-align: middle !important;width: auto !important;border:0px !important;}
Jika ingin ganti warna background, ganti #EFF5FB dengan kode warna lain.
4. Cari <b:if cond='data:post.embedCommentForm'>. Biasanya ada dua tag xml seperti itu, cari & pilih yg kedua, yaitu yg berpasangan dengan <b:include data='post' name='comment-form'/>.
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
5. Copy kode HTML berikut (klik select all & copy), letakkan di BAWAH/SETELAH <b:if cond='data:post.embedCommentForm'>.



6. Copy kode berikut & letakkan di atas </body>:
<script src='
https://sites.google.com/site/bukarahasiahost/blogger-comment-smileys/bukarahasiablogspot-ysmileys-bloggercomments.txt' type='text/javascript'></script>
7. Save template.
8. You are done!

Kini pengunjung n sobat dapat menggunakan emoticon/smiley di komentar blog sobat.
Have a nice Blogging.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Cara Buat/Pasang Share Buttons di Posting Blogger (Like, Tweet, +1)

Facebook like, tweet, Google +1 buttons
Share buttons adalah tombol-tombol yg dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yg mereka sukai ke social media, baik Facebook, Twitter, Google+, dll. Banyak sobat Buka Rahasia Blogspot yg menanyakan tentang share buttons yg saya gunakan di bawah judul posting. Saya menggunakan 3 buttons milik 3 social media yg disusun sedemikian rupa menjadi satu bagian widget. Dulu saya pernah share cara pemasangan Facebook Like Button & Google +1 Button, namun Tweet Button belum. Tetapi karena banyak sobat yg meminta 3 button (tombol) share itu sekaligus menjadi satu widget, oke deh Tweet Button saya lompati dan akan langsung share cara membuat & memasang ketiganya.
buka rahasia blogspot
Masih seperti dua cara sebelumnya, widget ini hanya akan ditampilkan di bagian posting ketika halaman posting dibuka secara utuh serta tidak tampil pada jenis halaman lain (homepage, label, search, archive). Agar susunan, jarak serta tampilan tidak kacau, saya membuat ukuran-ukuran tersendiri pada masing-masing button lalu menyusunnya dengan tabel. So, jangan mengubah nilai apapun di dalam masing-masing button.

Sebelum memasang share buttons, perhatikan beberapa hal berikut:
a.  Jika sudah memasang widget Facebook like atau Google +1, khususnya yg saya share di blog ini, hapus atau ambil terlebih dahulu kodenya. Lihat 2 posting terdahulu untuk mengetahui mana yg harus dihapus.
b. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
c. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template.

Cara Memasang Share Buttons (Facebook Like, Tweet, & Google +1)
Setelah memastikan beberapa hal di atas, pasang widget share buttons dengan langkah-langkah berikut:
1. Copy script/kode berikut:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="bukarahasiablog">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>
Ganti bukarahasiablog dengan nama akun twittermu.
2. Buka halaman edit HTML/Edit Template:
Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates" 
2. Jika ingin memasang di bawah judul posting:
Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> buka rahasia blogspot lalu letakkan script/kode tepat di ATASnya.
3. Jika ingin memasang di bawah posting/artikel:
Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.
4. Save template 'n lihat hasilnya.
5. Done.

Good luck n enjoy your blog's share buttons (Facebook Like, Tweet Button, & Google +1 Button).

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Cara Buat/Pasang Share Buttons di Posting Blogger (Like, Tweet, +1)

Facebook like, tweet, Google +1 buttons
Share buttons adalah tombol-tombol yg dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yg mereka sukai ke social media, baik Facebook, Twitter, Google+, dll. Banyak sobat Buka Rahasia Blogspot yg menanyakan tentang share buttons yg saya gunakan di bawah judul posting. Saya menggunakan 3 buttons milik 3 social media yg disusun sedemikian rupa menjadi satu bagian widget. Dulu saya pernah share cara pemasangan Facebook Like Button & Google +1 Button, namun Tweet Button belum. Tetapi karena banyak sobat yg meminta 3 button (tombol) share itu sekaligus menjadi satu widget, oke deh Tweet Button saya lompati dan akan langsung share cara membuat & memasang ketiganya.
buka rahasia blogspot
Masih seperti dua cara sebelumnya, widget ini hanya akan ditampilkan di bagian posting ketika halaman posting dibuka secara utuh serta tidak tampil pada jenis halaman lain (homepage, label, search, archive). Agar susunan, jarak serta tampilan tidak kacau, saya membuat ukuran-ukuran tersendiri pada masing-masing button lalu menyusunnya dengan tabel. So, jangan mengubah nilai apapun di dalam masing-masing button.

Sebelum memasang share buttons, perhatikan beberapa hal berikut:
a.  Jika sudah memasang widget Facebook like atau Google +1, khususnya yg saya share di blog ini, hapus atau ambil terlebih dahulu kodenya. Lihat 2 posting terdahulu untuk mengetahui mana yg harus dihapus.
b. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
c. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template.

Cara Memasang Share Buttons (Facebook Like, Tweet, & Google +1)
Setelah memastikan beberapa hal di atas, pasang widget share buttons dengan langkah-langkah berikut:
1. Copy script/kode berikut:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="bukarahasiablog">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>
Ganti bukarahasiablog dengan nama akun twittermu.
2. Buka halaman edit HTML/Edit Template:
Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates" 
2. Jika ingin memasang di bawah judul posting:
Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> buka rahasia blogspot lalu letakkan script/kode tepat di ATASnya.
3. Jika ingin memasang di bawah posting/artikel:
Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.
4. Save template 'n lihat hasilnya.
5. Done.

Good luck n enjoy your blog's share buttons (Facebook Like, Tweet Button, & Google +1 Button).

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Cara Membuat & Memasang Twitter Follow Button (Official)

cara membuat twitter follow
Twitter Follow Button yg dirilis secara official oleh twitter kini semakin memiliki fitur yg canggih. Meskipun hanya ditampilkan dalam bentuk button dan link sederhana, sebenarnya ada beberapa hal yg dapat dilakukan hanya dengan sekali klik, tidak seperti twitter follow widget yg sebelumnya. "Dengan klik button, pengunjung dapat langsung melakukan follow tanpa harus masuk ke twitter." Link yg berada di sebelah button juga berfungsi untuk mengetahui profil serta update terbaru (tweet) nya. Jadi, memasang twitter follow button di blog kini dapat memberikan efek jauh besar bagi perkembangan dan popularitas blog serta pemilik blog.

Cara Membuat Twitter Follow Button

1. Masuk ke halaman follow button
2. Perhatikan gambar berikut:
cara pasang follow button
A. Kolom untuk mengisi nama account twitter. Isikan akun twitter blog atau akun twitter pribadi yg ingin dibuatkan button follow-nya.
B. Background. Sesuaikan dengan background blog dimana button akan dipasang. Jika terang, pilih "Light. Sebaliknya, jika gelap pilih "Dark".
C. Fitur untuk menampilkan / tidak menampilkan jumlah twitter followers. Pilih "No" jika tidak ingin menampilkan.
D. Bahasa. Klik menu dropdown pilih bahasa yg diinginkan, tersedia fitur Bahasa Indonesia.
E. Preview tampilan button.
F. Script/Kode twitter follow button. Setelah selesai melakukan setting, copy kode/scriptnya.

Cara Memasang Twitter Follow Button di Blog/Web

Button dapat dipasang di bagian manapun dari blog/web di dalam tag <body> seperti ketika anda memasang menampilkan link.

Untuk blog berplatform blogger:
a. Button dapat dipasang di dalam gadget (sebagai widget).
1. Buka dashboard > design/layout > klik "add a gadget/tambahkan gadget > Pilih HTML/Javascript > Masukkan kode ke dalam kolom > save.
2. Drag/geser gadget di halaman design/layout ke posisi yg diinginkan. Save lagi.

b. Opsi lain untuk memasang widget follow button adalah di bagian posting, yaitu di bawah judul posting atau di bawah posting/artikel:
1. Perhatikan script berikut:
<div style='float:right;margin-right:5px;'>Kode Twtter Button</div>
Copy script di atas. Ganti Kode Twtter Button dengan kode button yg telah dicopy  tadi. 
1. Masuk ke Edit HTML/Edit Template, centang "Expand Widget templates".
2. Untuk memasang di atas posting, cari <div class="post-header-line-1">. Jika tidak ketemu cari <data:post.body/>. Letakkan kode tepat di bawah <div class="post-header-line-1"> atau di atas <data:post.body/>.
3. Bagi yg ingin memasang button di bawah posting/artikel, cari <data:post.body/>, letakkan kode tepat di bawahnya.
4. Save & done.
Hasilnya akan seperti ini [sekalian follow ya :-) ]

Happy blogging.
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Cara Membuat & Memasang Twitter Follow Button (Official)

cara membuat twitter follow
Twitter Follow Button yg dirilis secara official oleh twitter kini semakin memiliki fitur yg canggih. Meskipun hanya ditampilkan dalam bentuk button dan link sederhana, sebenarnya ada beberapa hal yg dapat dilakukan hanya dengan sekali klik, tidak seperti twitter follow widget yg sebelumnya. "Dengan klik button, pengunjung dapat langsung melakukan follow tanpa harus masuk ke twitter." Link yg berada di sebelah button juga berfungsi untuk mengetahui profil serta update terbaru (tweet) nya. Jadi, memasang twitter follow button di blog kini dapat memberikan efek jauh besar bagi perkembangan dan popularitas blog serta pemilik blog.

Cara Membuat Twitter Follow Button

1. Masuk ke halaman follow button
2. Perhatikan gambar berikut:
cara pasang follow button
A. Kolom untuk mengisi nama account twitter. Isikan akun twitter blog atau akun twitter pribadi yg ingin dibuatkan button follow-nya.
B. Background. Sesuaikan dengan background blog dimana button akan dipasang. Jika terang, pilih "Light. Sebaliknya, jika gelap pilih "Dark".
C. Fitur untuk menampilkan / tidak menampilkan jumlah twitter followers. Pilih "No" jika tidak ingin menampilkan.
D. Bahasa. Klik menu dropdown pilih bahasa yg diinginkan, tersedia fitur Bahasa Indonesia.
E. Preview tampilan button.
F. Script/Kode twitter follow button. Setelah selesai melakukan setting, copy kode/scriptnya.

Cara Memasang Twitter Follow Button di Blog/Web

Button dapat dipasang di bagian manapun dari blog/web di dalam tag <body> seperti ketika anda memasang menampilkan link.

Untuk blog berplatform blogger:
a. Button dapat dipasang di dalam gadget (sebagai widget).
1. Buka dashboard > design/layout > klik "add a gadget/tambahkan gadget > Pilih HTML/Javascript > Masukkan kode ke dalam kolom > save.
2. Drag/geser gadget di halaman design/layout ke posisi yg diinginkan. Save lagi.

b. Opsi lain untuk memasang widget follow button adalah di bagian posting, yaitu di bawah judul posting atau di bawah posting/artikel:
1. Perhatikan script berikut:
<div style='float:right;margin-right:5px;'>Kode Twtter Button</div>
Copy script di atas. Ganti Kode Twtter Button dengan kode button yg telah dicopy  tadi. 
1. Masuk ke Edit HTML/Edit Template, centang "Expand Widget templates".
2. Untuk memasang di atas posting, cari <div class="post-header-line-1">. Jika tidak ketemu cari <data:post.body/>. Letakkan kode tepat di bawah <div class="post-header-line-1"> atau di atas <data:post.body/>.
3. Bagi yg ingin memasang button di bawah posting/artikel, cari <data:post.body/>, letakkan kode tepat di bawahnya.
4. Save & done.
Hasilnya akan seperti ini [sekalian follow ya :-) ]

Happy blogging.
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Cara Membuat Google+ Page & Widget Google+ Page di Blog/Web

google+ pages

Kehadiran Fitur Google+ Page

Google+ semakin menunjukkan kekuatannya. Fitur baru, yaitu Google+ Pages (halaman mirip dengan Facebook Page), telah diluncurkan pada 7 November 2011 lalu. Saya mendapat kan notifikasi dari Google+ mengenai hal tersebut serta telah mencoba membuatnya. Ternyata G+ Page memiliki potensi & fitur yg lumayan bagus juga. Google+ Page dapat menjadi alat yg kuat untuk share content blog/web dan mengukuhkan otoritas blog/web serta bisnis di dunia internet. Ada berbagai jenis Google+ Page yg dapat dibuat sesuai dengan kebutuhan. Karena baru saja diluncurkan (beta), pastinya Google+ Page masih memliki beberapa kekurangan dibanding Facebook Page. Namun saya yakin dalam beberapa bulan ke depan Google+ Page dapat bersaing dengan Facebook Page, terutama..... yah, dalam Hal SEO. SEO?!
.....

Google+ Page dan Search Engine Optimization (SEO)

Artikel ini sengaja saya luncurkan setelah melakukan beberapa uji coba terlebih dahulu pada efek Google+ Page terhadap SEO Google. Seperti halnya Google+ untuk account personal, saya yakin Google+ Page juga memiliki efek terhadap SEO dan search ranking di SERPs. Dan memang benar sekali, setelah beberapa hari membuat Google+ page Buka Rahasia Blogspot, hasil pencarian di Google untuk blog ini memunculkan Google+ Page Buka Rahasia Blogspot pada urutan ke dua setelah blog http://buka-rahasia.blogspot.com, serta menggeser posisi Facebook Page-nya.
cara membuat Google+ Pages
Kekuatan Google+ Page di SERP menunjukkan peran pentingnya terhadap upaya peningkatan authority serta visibility blog/web di mata search engine. Ini adalah hipotesis sementara yg ke depan tentu akan sangat berbeda serta mengalami pengembangan jauh lebih dalam mengenai keterkaitan antara Google+ Page dengan SEO.

So, apapun bentuk blog/web anda atau apapun jenis bisnis, organisasi, perusahaan, dll, saya sangat menganjurkan membuat G+ Page sekarang juga. Nantinya, yg akan muncul di web atau iklan tidak hanya like us on Facebook, atau follow us on Twitter, tapi juga Add us on Google+ :-).

Cara Membuat Google+ Page

Syarat utama membuat Google+ Page adalah kepemilikan account Google+. So, sebelum membuat G+ page, buat account Google+ terlebih dahulu.
1. Di halaman account G+ lihat pojok kanan bawah, disana ada link "Create a Google+ Page". Klik link tersebut.
2. Pilih jenis page sesuai kebutuhan pada menu "pick a category". Jika menurut anda kurang sesuai, pilih "Other".
buka rahasia blogspot: Google+ Page
3. Lanjutkan dengan mengisi data page pada "add your info", yaitu nama Page dan website. Centang semua persyaratan di bagian bawah form.
4. Setelah page terbuat, lakukan kostumisasi. Klik menu customize. Isikan tagline atau deskripsi page. Tambahkan juga gambar sebagai foto profil page yg telah dibuat tadi, klik "change profile photo", browse pada folder dimana terdapat gambar yg diinginkan lalu ipload.

5. Klik juga menu "get the word" untuk share Google+ Page baru ke circles anda di Google+.
6. Buat & pasang widget badge Google+ Page di blog/web.

Pilih jenis-jenis badge atau icon pada menu di bawah tampilan widget. Saat ini, widget yg tersedia adalah yg dalam bentuk icon.
Setelah itu, lihat kode di bawahnya:
a. Copy kode di bagian atas (ditandai kotak biru), buka halaman edit HTML template, letakkan kode di atas </head>. Lalu save.
b. Copy kode di bagian bawah (ditandai kotak merah), paste ke Gadget blog (di page elements klik add a gadget > pilih HTML/Javascript). Masukkan kode ke dalam kotal HTML/Javascript lalu klik "save". Di halaman page elements/layout drag/geser gadget ke posisi yg diinginkan lalu save lagi.

Done! You now have got a Google+ Page and its widget on your blog/web. Sekarang anda dapat share status, gambar, atau link yg berkaitan dengan blog, web, bisnis, organisasi, atau apapun di Google+ Page.

Stealing is for suckers! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Cara Membuat Google+ Page & Widget Google+ Page di Blog/Web

google+ pages

Kehadiran Fitur Google+ Page

Google+ semakin menunjukkan kekuatannya. Fitur baru, yaitu Google+ Pages (halaman mirip dengan Facebook Page), telah diluncurkan pada 7 November 2011 lalu. Saya mendapat kan notifikasi dari Google+ mengenai hal tersebut serta telah mencoba membuatnya. Ternyata G+ Page memiliki potensi & fitur yg lumayan bagus juga. Google+ Page dapat menjadi alat yg kuat untuk share content blog/web dan mengukuhkan otoritas blog/web serta bisnis di dunia internet. Ada berbagai jenis Google+ Page yg dapat dibuat sesuai dengan kebutuhan. Karena baru saja diluncurkan (beta), pastinya Google+ Page masih memliki beberapa kekurangan dibanding Facebook Page. Namun saya yakin dalam beberapa bulan ke depan Google+ Page dapat bersaing dengan Facebook Page, terutama..... yah, dalam Hal SEO. SEO?!
.....

Google+ Page dan Search Engine Optimization (SEO)

Artikel ini sengaja saya luncurkan setelah melakukan beberapa uji coba terlebih dahulu pada efek Google+ Page terhadap SEO Google. Seperti halnya Google+ untuk account personal, saya yakin Google+ Page juga memiliki efek terhadap SEO dan search ranking di SERPs. Dan memang benar sekali, setelah beberapa hari membuat Google+ page Buka Rahasia Blogspot, hasil pencarian di Google untuk blog ini memunculkan Google+ Page Buka Rahasia Blogspot pada urutan ke dua setelah blog http://buka-rahasia.blogspot.com, serta menggeser posisi Facebook Page-nya.
cara membuat Google+ Pages
Kekuatan Google+ Page di SERP menunjukkan peran pentingnya terhadap upaya peningkatan authority serta visibility blog/web di mata search engine. Ini adalah hipotesis sementara yg ke depan tentu akan sangat berbeda serta mengalami pengembangan jauh lebih dalam mengenai keterkaitan antara Google+ Page dengan SEO.

So, apapun bentuk blog/web anda atau apapun jenis bisnis, organisasi, perusahaan, dll, saya sangat menganjurkan membuat G+ Page sekarang juga. Nantinya, yg akan muncul di web atau iklan tidak hanya like us on Facebook, atau follow us on Twitter, tapi juga Add us on Google+ :-).

Cara Membuat Google+ Page

Syarat utama membuat Google+ Page adalah kepemilikan account Google+. So, sebelum membuat G+ page, buat account Google+ terlebih dahulu.
1. Di halaman account G+ lihat pojok kanan bawah, disana ada link "Create a Google+ Page". Klik link tersebut.
2. Pilih jenis page sesuai kebutuhan pada menu "pick a category". Jika menurut anda kurang sesuai, pilih "Other".
buka rahasia blogspot: Google+ Page
3. Lanjutkan dengan mengisi data page pada "add your info", yaitu nama Page dan website. Centang semua persyaratan di bagian bawah form.
4. Setelah page terbuat, lakukan kostumisasi. Klik menu customize. Isikan tagline atau deskripsi page. Tambahkan juga gambar sebagai foto profil page yg telah dibuat tadi, klik "change profile photo", browse pada folder dimana terdapat gambar yg diinginkan lalu ipload.

5. Klik juga menu "get the word" untuk share Google+ Page baru ke circles anda di Google+.
6. Buat & pasang widget badge Google+ Page di blog/web.

Pilih jenis-jenis badge atau icon pada menu di bawah tampilan widget. Saat ini, widget yg tersedia adalah yg dalam bentuk icon.
Setelah itu, lihat kode di bawahnya:
a. Copy kode di bagian atas (ditandai kotak biru), buka halaman edit HTML template, letakkan kode di atas </head>. Lalu save.
b. Copy kode di bagian bawah (ditandai kotak merah), paste ke Gadget blog (di page elements klik add a gadget > pilih HTML/Javascript). Masukkan kode ke dalam kotal HTML/Javascript lalu klik "save". Di halaman page elements/layout drag/geser gadget ke posisi yg diinginkan lalu save lagi.

Done! You now have got a Google+ Page and its widget on your blog/web. Sekarang anda dapat share status, gambar, atau link yg berkaitan dengan blog, web, bisnis, organisasi, atau apapun di Google+ Page.

Stealing is for suckers! © buka-rahasia.blogspot.com
Baca Selengkapnya

gravatar

Buat Widget Google Plus (Google+) di Blog/Web (Add To Circles Widget)

google plus (g+) widget
Google Plus menjadi social media yg keberadaannya semakin diperhitungkan, meskipun sampai saat ini bisa dibilang kekuatan Google+ masih kembang kempis dibandingkan Facebook yg tidak mau kalah dengan menghadirkan banyak inovasi dan fitur baru untuk memikat user. Namun, cara bagi kita, para Blogger, untuk lebih menguasai dunia maya & social media adalah dengan melebarkan sayap dalam bentuk apapun dan tidak terpatok pada satu atau dua lingkup social media saja. Bagi sobat yg memiliki blog, sangatlah penting untuk masuk ke social media manapun untuk memperluas jaringan.

Jika selama ini masih menggunakan Facebook dan Twitter saja, cobalah buat akun profil Google+ dan perluas jaringan sobat. Nah, seperti halnya Facebook dan Twitter, sobat pun bisa menambahkan dan menggunakan widget Google+ untuk menambah followers atau friends (dalam bahasa Google Plus: circles). Apalagi, dengan adanya pertambahan jumlah follower di dalam circles, kita bisa semakin memperluas sharing Google +1, yg nyata-nyata kini telah berpengaruh dalam SEO. Saya sendiri pun baru saja mencoba Google Plus. Meskipun anggota dalam circles saya baru sedikit, namun saya dapat merasakan sharing hal-hal penting menjadi lebih luas jangkauannya.

Cara Membuat & Memasang Google Plus Widget di Blog/Website

Widget Google+ sudah tersedia dalam bentuk dan kostumisasi maksimal sehingga tidak perlu lagi melakukan hack:
1. Buka / masuk ke situs Google Plus Widget. Klik di sini.
2. Klik tombol "Get Widget"
3. Lihat pada tab-tab yg muncul di bawahnya. Isikan dengan data Google Plus (id). Id Google+ dapat diambil pada halaman profil Google Plus. Klik button profile pada tab-tab pada navigasi atas Google+.
4. Ambil / copy id Google+ yg tertera di address bar browser.
5. Kemudian paste / masukkan id tersebut ke dalam form Google+ ID.
Pada tab-tab di bagian tersebut, set tampilan widget sesuai selera atau sesuai tampilan desain blog. Masukkan ukuran lebar, sesuaikan dengan lebar sidebar. Tampilan juga bisa diatur sesuai warna yg diinginkan. Ada fitur untuk melihat dan menyesuaikan warna ketika klik pada kolom kode warna. Namun jika ingin mengetahui kode warna yg tepat sehingga warna yg muncul sesuai keinginan, cek melalui Hex Color Code Generator. Set juga judul header, font, background. bahasa dan lain sebagainya. Lihat perubahan pada preview di pojok kanan atas. Semua lengkap ada disana sehingga kita tidak perlu lagi memasukkan kode secara manual.

6. Setelah setting selesai, klik "Get Code".
7. Copy kode / script yg muncul di bawahnya.
8. Untuk menambahkan widget ke Blogger, masuk ke Design > Add a Gadget (Tambahkan Gadget), pilih HTML/Javascript. Masukkan kode kedalamnya. Lalu save.
undefined
10. Geser / drag gadget ke posisi yg diinginkan apabila belum sesuai. Save lagi.
Done!
Oh ya, Jangan lupa "add me to your circles" yah. Klik "add to circles" pada widget di bawah. Masih new and mempelajari nih :- ) Nanti kalo punya sobat Blogger udah berhasil atau kalo ada problem, silahkan share di comment. Saya akan add to my circle dan berusaha bantu jika ada problem.

Happy Blogging, dudes! :-)
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Comment

free counters

Search Here