Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

09 April 2010

Memasang FBcounter dan FBshare di Blogspot

Untuk Measang FBcounter di Blogspot sebenarnya cukup simple, tapi saya juga baru belajar kali ini. Mungkin tanpa perpanjang lebar saya akan beragi tutorial blog untuk widget yang keren ini:

Pertama
Login dan Masuk pada halaman Edit HTML dan jangan lupa expand TEmplate Widget

Kedua
Cari kode berikut ini:


<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
Catatan: Terkadang Untuk beberapa Template Blog berbeda, Saya yakin anda bisa menyesuaikannya. Intinya Kode untuk menampilkan Judul Postingan.

Ketiga
Copy dan pastekan Kode berikut ini dibawah tepat di kode yang ada di penjelasan Kedua
<div style="float: right;">

Kode FBcounter
</div>

Keempat
Copy dan pastekan Kode berikut ini untuk mengganti Kode FBcounter
Standar

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
Sedang



<script>var fbShare = {

url: '<data:post.url/>',
size: 'small',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
Besar


<script>var fbShare = {
url: '<data:post.url/>',
size: 'large',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
Kelima
Simpan dan lihat hasilnya

Note:
Jika anda menggunakan Platform Wordpress anda dapat mengganti Kode <data:post.url/> dengan <?php the_permalink() ?>
dengan menggunakan FBcounter dan FBshare ini harapan kita artikel artikel yang kita buat dapat lebih bermanfaat bagi pembaca lainya yang ada di Facebook.
Hal ini juga sebagai langkah untuk Belajar SEO agar blog kita mempunyai traffic yang lebih tinggi.

Jika Anda menyukai Artikel di Blog and SEO Tips ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Blog and SEO Tips ini.

29 March 2010

Membuat Menu Navigasi pada Blogspot

Sahabat saya awan, menanyakan kepada saya cara membuat tab menu untuk menghias blognya. Mungkin saya langsung bisa tulis ulang saja tutorial blognya special buat Awan karmawan yang punya blog awan-smith.blogspot.com
Sebelumnya saya mohon izin kepada master Blog o-om dan kang rohman buat menulis ulang artikelnya tentang membuat CSS Menu generator online dan offline.

Membuat Menu Css dengan Cara Online
Seperti yang sudah dibahas oleh o-om tentang MyCSS menu ini dapat dilakukan oleh siapa saja baik yang jago CSS maupun yang sama sekali tidak menguasi CSS.Anda bisa langsung membuka MyCSSMenu. Saya sendiri pernah menggunakan MyCSS Menu ini untuk membuat dan menghiasi blog pada saat belajar dulu (meskipun sekarang juga masih belajar).
Intinya setelah anda menggunakan cara ini saya yakin akan sangat mudah dalam mempraktekannya tanpa tool dan akan lebih faham tentang membuat menu dengan CSS, karena semua komponen yang di suguhkan oleh tool ini berupa CSS.
Selain itu banyak sekali template yang bisa anda pilih, bukan hanya menu horizontal maupun menu vertikal semuanya ada disini so, langsung saja ke TKP dan menjalankan misi Tutorial Blog ini.


Membuat Menu Css dengan Cara Online
Untuk cara ini pernah dibahas oleh master template dan master blog juga kang Rohman, Anda cukup mendownload Softwarenya secara gratis dan menggunakanya dengan navigasi yang sudah disediakan untuk para blogger agar lebih mudah.
Untuk penjelasan secara rincinya saya rasa tidak harus detil, karena saya yakin untuk tehnik seperti ini teman teman Blog and SO Tips pasti sudah ahlinya, selain itu kalo saya rentetkan urutan cara cara nya pasti yang belum bisa CSS makin akan ga faham, Contohnya saya dulu seringkali ngikutin atau nyari tutorial blog yang terperinci, akhirnya sampai saat ini saya ga bisa bisa and termasuk murid yang bengal kalo kata guru, udah 2 tahun nge blog ga pinter pinter .... {maaf jadi malah curhat}
Ya udah download aja deh Software CSS Menu Generatornya disini
http://wonderwebware.com/css-menu/download.html

Oh ya, kemarin saya baru memposting tentang cara menentukan Keyword Statis dan dinamis, jika tidak keberatan dan anda bisa membaca hasil pemahaman saya tentang Keyword dinamis dan Statis disini.
Dan mari meningkatkan persahabatan antar blogger dengan saling silaturahmi dan memberi komentar, U Comment I Follow.



Jika Anda menyukai Artikel di blog ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di dankerizer.com

15 March 2010

Membuat Navigasi BreadCrumbs di Blogspot dan Wordpress

Breadcrumbs Navigasi adalah sebuah penunjuk arah bagi pengunjung Blog yang menunjukan Posisi Postingan Yang sedang di Baca terhadap Kategori Blog yang ada. Contoh: "Home >> Kategori/Sub Kategori > Judul Postingan yang dibaca"
Beberapa waktu yang lalu saya cari kemana mana, dan mencoba salah satu tutorial yang saya baca, namun baru kali ini saya berhasil dan sukses setelah membaca tutorial dari Mas Bambang Oke.
Langsung saja kita menuju Ke TKP Blogger/Blogspot

 BLOGSPOT


Langkah Pertama Masuk Ke Dashboard Blog anda >> Edit Layout HTML
draft.blogspot.com >> Edit layout >Edit HTML (jangan Lupa Expand Widget HTML)

Cari Kode Berikut ini:
<b:includable id='main' var='top'>
(bisa menggunakan Fasilitas Pencarian atau tekan Ctrl+F)

Copy Code Dibawah ini dan Letakan tepat diatas Kode  <b:includable id='main' var='top'>
Cari Kode Berikut ini <b:if cond='data:post.dateHeader'>

Lalu Copas kode berikut inidan Letakan diatas kode <b:if cond='data:post.dateHeader'>



Tambahkan Kode CSS Berikut diatas ]]></b:skin>
.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}
Simpan Template anda dan Lihat Hasilnya


Nah klo untuk Wordpress Begini Caranya:


  • Buka template kamu pada file single.php, cari &alt;?php the_title(); ?>. Ini adalah PHP untuk menampilkan Judul postingan.

  • Paste Code ini di atas title, atau atur sendiri dibagian mana anda meletakkannya.
<b>Navigation: <a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('description'); ?>">
<?php bloginfo('name'); ?></a>&rarr;
<?php if (!is_attachment()) { the_category(', '); } ?>&rarr;
<?php the_title(); ?></b><br/>
Simpan dan Lihat hasilnya.

  • Atau Ada cara yang lebih mudah dengan cara menggunakan Plugin yang sudah di sediakan oleh Developer Wordpress.
Tinggal Download Aja Plugin nya Berikut Pilihanya:
Yoast Breadcrumbs untuk Mendownload dan Instal Klik aja disini  Yoas Breadcrumbs
Breadcrumb Navigation XT untuk Mendownload dan Instal Klik aja disini Breadcrumb Navigation XT
Breadcrumb Trail: WordPress Plugin  untuk Mendownload dan Instal Klik aja disini Breadcrumb Trail: WordPress Plugin
Untuk Menginstal Nya saya Yakin anda sudah Bisa.

Cukup Mudah dan ga terlalu Ribet Menurut Saya, Anda Tinggal Memasang Kode kode yang ada di posisi yang sudah saya tulis di atas. Mari Berkoment Jika Anda punya pengalaman yang berbeda atau sudah menerapkan Trik ini.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di dankerizer.com






Daftar di PayPal, lalu mulai terima pembayaran menggunakan kartu kredit secara instan.

26 February 2010

Memasang Social Network Button Melayang

twitterGoogle Buzzrss feedFacebook
Social Network (RSS, Facebook, Twitter, google buzz, dan lain sebagainya) adalah media penting dalam mengembangkan atau meningkatkan traffic web atau blog kita. Karena dengan Social Network Media kita bisa berbagi dengan jaringan yang lebih luas.
Saat ini facebook, twitter, google buzz adalah sarana yang cukup diminati oleh blogger di seluruh dunia. Hal ini terbukti social network media tersebut menjadi nomor satu di peringkat alexa, google page rank, maupun penghitung peringkat website lainya.
Nah untuk itu kita harus menyediakan sarana ini untuk mudah di akses oleh pembaca blog kita. Agar para pembaca dapat menambahkan kita ke daftar teman atau follower di social network mereka.
Lalu bagaimana jika pada blog kita sudah penuh dengan widget maupun iklan yang sudah kita pasang?
Jawabanya adalah kita bisa memasang nya di tempat yang fleksible. Untuk itu saya akan bagikan tutorial nya berikut ini.
Sebelumnya anda bisa melihat di bagian kanan blog saya.
Pertama : Anda Harus login ke draft.blogger.com dan masuk pada setting layout HTML blog anda

Kedua : Copy kode berikut ini:
#melayang {
position:fixed;_position:absolute; Top:255px; left:0; right:0;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Perhatikan Teks Berwarna merah diatas:
 Anda dapat merubah posisi widget yang akan anda pasang. Contoh, Anda dapat merubah posisi menjadi di bawah dengan merubah Top menjadi Bottom.

Ketiga : Letakan kode yang sudah anda Copy dan modifikasi tepat diatas ]]></b:skin> agar mudah untuk di edit kembali jika kurang pas.
Keempat : Copy Kode berikut ini dengan sedikit modifikasi atau modivikasi total

<div id='melayang'>
<a title="Add me on Facebook as Friend" rel="http://www.facebook.com/hadie.danker" href="http://www.facebook.com/hadie.danker" target="_blank"><img title="Add Me On Facebook" src="http://lh4.ggpht.com/_cUNVl2vjOio/S4eCG9i9GOI/AAAAAAAAAkY/9yzO2fYEWB0/facebooklogo.png" alt="Facebook" width="35" height="35" /></a>
</div>

Pada intinya anda harus menambahkan <div id='melayang'> ....... </div> dan kode merah diatas adalah kode Social Network yang ingin anda tambahkan dan warna biru adalah kode URL Social Network anda, dan warna ungu adalah link Gambar anda.

Anda juga bisa menempatkan iklan atau adsense pada widget float/melayang tersebut. Namun untuk bisa memasang Adsense anda harus Memphrase terlebih dahulu. Untuk Memphrase anda bisa menggunakan Online Tool di www.blogcrowds.com

Sangat mudah bukan? Tentunya hal ini sangat berarti buat saya jika anda memberikan komentar terhadap postingan ini pada Blog yang do follow ini.

Terimakasih.




Jika Anda menyukai Artikel di blog ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di dankerizer.com





Daftar di PayPal, lalu mulai terima pembayaran menggunakan kartu kredit secara instan.

04 February 2010

Social Bookmark Widget

Membuat Social Bookmark merupakan salah satu tehnik SEO untuk memperluas jaringan Pembaca kita. Ada banyak Media bookmarking yang bisa blogger gunakan. dan ini adalah salah satu Widget untuk Blogger agar disetiap postingan muncul atau tampil.
1. Masuk ke sociofluid
Atau langsung aja anda bisa copy Java Script Dibawah ini;

<!--SocioFluid--><script type="text/javascript" src="http://sf2.sociofluid.com/v2?widget=124480-0001030405090a0b0c0d111415"></script><noscript><a href="http://www.sociofluid.com/">SocioFluid</a></noscript><!--SocioFluid-->

2. Jika anda tidak terlalu suka dengan tampilan standar yang ditawarkan, anda bisa mengubahnya dengan merubah ukurannya saat mouse diarahkan serta style Mouse Hover serta memilih Socia Bookmark mana yang akan ana cantumkan disitu. kemudian Arahkan kebawah dan Generate
3. Kemudian anda bisa lagsung menambahkan widget tersebut pada bagian bawah posting dengan memilih Add to Blogger

4. Anda bisa langsung mengatur letak widget tersebut di posisi blog anda [sesuai dengan keinginan anda tentunya]

nah bagi yang ingin lebih agak ribet tapi power full, anda bisa menambahkan widget ini ke setiap postingan seperti halnya punya saya.

Berikut langkahnya:
Cara 1,2 sama dengan yang diatas
3. Copy Kode Java script sociofluid 
<!--SocioFluid--><script type="text/javascript" src="http://sf2.sociofluid.com/v2?widget=124480-0001030405090a0b0c0d111415"></script><noscript><a href="http://www.sociofluid.com/">SocioFluid</a></noscript><!--SocioFluid-->

4. Masuk pada Edit HTML blog anda dengan masuk di draft.blogger.com dan pilih layout - edit html - expand widget template
5. cari kode ini <data:post.body/>  dan letakan kode yang telah anda copy tadi tepat dibawahnya.
6. Save Template dan lihat Hasilnya

Silahkan anda pilih cara yang menurut anda mudah.

Hadie Danker

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di dankerizer.com


Daftar di PayPal, lalu mulai terima pembayaran menggunakan kartu kredit secara instan.

26 January 2010

Automatic Link Exchange



Jika Anda menyukai Artikel di blog ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di dankerizer.com





















Daftar di PayPal, lalu mulai terima pembayaran menggunakan kartu kredit secara instan.

07 December 2009

Hadiah akhir tahun dari Paypal.com



Dalam rangka menyambut tahun baru, paypal.com memberikan bonus kepada para penggunanya untuk bisa mendapatkan $100 atau more or less Rp. 1000.000. paypal sendiri mrupakan alat pembayaran elektronik Online yang banyak digunakan diseluruh dunia dan paling aman. teman teman dankerizer.com bisa mengikuti langkah-langkah ini  klo pengen ikutan.



PROGRAM INI TANPA ADA REKAYASA DARI DANKERIZER.COM, SEMUA HASIL NYA DITANGGUNG SEPENUHNYA OLEH WWW.PAYPAL.COM
KARENA PAYPAL.COM MERUPAKAN SITUS TERPERCAYA, MAKA SAYA YAKIN 99% PROMOSI INI BENAR, JADI TUNGGU APALAGI, BACA SAMPAI HATAM DAN IKUTI LANGKAH-LANGKAHNYA!!!

1. Silahkan login di www.facebook.com. Lalu klik link PayPal WishList on Facebook


Jika ada pilihan Allow, maka klik Allow. Artinya anda menyetujui menggunakan aplikasi Paypal Wishlist ini
Maka akan muncul halaman seperti di bawah ini :


2. Lalu masukkan email Paypal Anda dengan menekan tulisan “Click Here” seperti yang dilingkari warna merah gambar di atas. Jika Anda belum mempunya account paypal, silahkan mendaftarkan di www.paypal.com . Mudah kok. [klik disini untuk tau cara bikin paypal.com]
Maka akan muncul pop up seperti di bawah ini, lalu silahkan masukkan email Anda (email ini sama dengan email untuk paypal:


Lalu tekan submit. Selamat, Anda sudah mendapatkan $ 1 pertama Anda. Mudah kan? Tapi masak Cuma dapat $1 doank,,,hehehe… biar bisa dapat sampai $100 maka kita buat wishlist dulu dan mengundang teman-teman untuk bergabung.

 Cara membuat wishlist, klik tombol Create New Wishlist seperti yang tampak pada gambar di atas.



Sekarang tinggal memilih produk apa yang Anda inginkan. Bebas loh… dan ga perlu bayar. Cukup 5 saja produk yang Anda pilih.
Maka akan muncul pop up seperti di bawah ini. Lalu tekan tombol PUBLISH.





Sekarang Anda sudah bisa mereferensikan teman-teman yang lain melalui status Anda. Setiap teman yang bergabung, Anda mendapatkan 1 Dollar.
Untuk mendapatkan dollar lebih banyak, silahkan ajak teman anda untuk bergabung melalui menu Invite Friend pada Aplikasi Paypal Wishlist. dalam sehari anda maksimal di ijinkan mengundang sebanyak 6 teman. dan jika ingin mengajak teman lagi harus menunggu 1 hari berikutnya.
Masa promosi program ini hingga 31 Desember 2009. Jadi jangan tunda lagi, segera bergabung…

INFORMASI
Pembayaran via paypal pada tanggal 28 Ferbuari 2010. Dan Bonus maksimal hanya $ 100. jadi klo yang udah dapat $ 100 ya bantuin temen-temen yang lainya untuk bisa dapat $ 100 juga.
Untuk melihat bonus kamu, lihat aja di Applikasi paypal wishlist.


info: bambangoke.com


If you enjoyed this post, please make sure you subscribe to my RSS feed!




Sign up for PayPal and start accepting credit card payments instantly.

14 November 2009

Membuat Search Engine Sendiri



Cara Membuat Searach Engine untuk blog kita sendiri cukup gampang banget kok, ga usah ribet-ribet ya, langsung aja danker kasih tau sourch nya 



Nah Jangan Lupa Ganti Nama Blog Kamu dulu di blogmu.blogspot.com anda juga bisa mengganti text pada tombol pada value="search" dapat anda ganti sesuai dengan keinginan anda.


Nih danker kasih sample contohnya:







Nah, anda juga bisa menambahkan sourch tadi sebagai widget, selamat mencoba
If you enjoyed this post, please make sure you subscribe to my RSS feed!


08 November 2009

Membuat PopUp Sendiri


Giaman caranya embuat PopUp? itulah yang saya pikir dari kemarin waktu melihat www.kompas.com.
nah, akhirnya ketemu contoh yang sedikit agak cocok, tapi belum memuaskan, Nih Contohnya....

























Nah Aku Bagi-Bagi Cara Bikinya ya....


Caranya cukup simple anda tinggal memasukan kode ini pada Blog anda:

Tinggal anda ganti aja URL Yang ingin anda buat dan Tubah Ukuranya sesuai dengan keinginan Anda. 
Selain itu Anda bisa mengganti TEXT PADA TOMBOLNYA.
Gampang Kan
Nah sekarang aku lagi nyari cara bikin PoUp yang otomatis saat blog kita i loud....
Klo ada yang tau kasih infonya ya...
dankerizer.com




If you enjoyed this post, please make sure you subscribe to my RSS feed!

Membuat Search Engine Kaya Punya google dengan Nama Sendiri


Membuat Search Engine denganNamamu sendiri layaknya google poenya...
caranya mudah banget and simple banget kok, tinggal klik aja disini.
Trus Input nama kamu, jadi deh....


dankerizer 's Search Engine : FunnyLogo.info : Personal Search Engine with many styles Google
 















 


 Advanced Search
 Preferences
 Language Tools


Set as home page   Bookmark    Create a new search engine now

FunnyLogo is not affiliated with Google Inc.
Trademarks remain trademarks of their respective companies.
© 2009 dankerizer.com









If you enjoyed this post, please make sure you subscribe to my RSS feed!


05 November 2009

Membuat Email dengan domain sendiri


Tentunya kita pingin dong punya email dengan nama domain kita sendiri, misal namamu@domainmu.com. Nha sekarang ini google menyediakan fasilitas untuk membuat email seperti itu dengan cara yang lumayan mudah. Tapi sayangnya saat ini fasilitas tersebut belum bisa digunakan untuk blog yg masih menggunakan domain blabla.blogspot.com. Fasilitas ini hanya untuk yang memiliki domain sendiri, misal domainmu.com , .net. .org . dan top level doamin lainnya. Makanya itu bagi yang pengen, cepetan beli domain, aku sarankan beli di indonitahost.com, murah lho (promosi...he..he..). Trus yang pake domain "co.cc" bisa gak? aku bilang "bisa", tapi sekarang aku pingin bahas yang pake domain .com/.net/.org, dll dulu. bagi yang punya domain "co.cc" sabar dulu ya.
Ok mari kita mulai tutorialnya bagaimana cara membuat email sendiri.

1. Buka alamat ini : http://www.google.com/a/cpanel/domain/new
2. maka km akan langsung disuguhi form seperti ini:




3. Isikan nama domain kamu didalam form tersebut lalu klik tombol "Get Started"
4. Kemudian akan muncul fomr lagi untuk mengisikan data-data yang diperlukan, Kalo sudah diisi klik "Continue"
5. Setelah itu akan muncul menu2 seperti ini :



6. Klik pada link "Activate email".
7. Setelah itu akan muncul lagi halaman untuk "Setup Email Delivery" , itu untuk setting MX Record. Caranya yaitu dengan mengisikan MX Record km dengan data2 yang ada disana. Datanya seperti ini :

MX Server address
Priority
ASPMX.L.GOOGLE.COM.
10
ALT1.ASPMX.L.GOOGLE.COM.
20
ALT2.ASPMX.L.GOOGLE.COM.
20
ASPMX2.GOOGLEMAIL.COM.
30
ASPMX3.GOOGLEMAIL.COM.
30
ASPMX4.GOOGLEMAIL.COM.
30
ASPMX5.GOOGLEMAIL.COM.
30


Bagi yang menggunakan DNS setting dari DNS park caranya yaitu : Klik domain kamu yg berada di "Domain list". Setelah itu pilihan "Type" pilih yg "MX". Pada kolom "Mail Domain" kosongi saja kolom tersebut. Pada kolom "Order" isikan data2 "Priority" diatas. Trus pada kolom "mail server" isikan dengan data "MX Server Address" diatas kemudian klik tombol "Update All". begitu terus sampai data diatas dimasukkan semua.

Bagi yang menggunakan DNS setting dari indonitahost.com caranya : masuk ke menu "Domain-->LIst last 10", trus klik link "Managed DNS", kemudian klik tombol Manage DNS Record. Setelah itu klik tombol "MX Records" trus klik tombol "Add MX Record". Untuk kolom "Value" pilih yg bawah (yg "Type In A Fully Qualified Domain Name eg. abc.pqr.com.') . isikan data "MX Server address" di kolom tersebut. kemudian isikan data "Priority" dikolom "MX Priority". begitu terus sampai selesai semua data dimasukkan.
8. kalo sudah selesai klik tombol " I have completed these steps". Maka akan muncul page seperti ini lagi.



9. Sebenarnya sampai disini sudah bisa selesai, tp untuk membuka email km, km harus mengetikkan alamt URL seperti ini "http://mail.google.com/a/domainmu.com" . Nha klao misalnya km pingin menggantinya menjadi seperti : "http://mail.domainmu.com" maka ikuti lagi langkah berikut ini.

10. Klik link "Email" maka akan muncul halaman "Email setting"
11. Trus klik link "Change URL" , kemudian akan muncul halaman untuk "Change URL for email".
12. PIlih yg "custom" trus klik tombol "Continue".
13. Setelah itu km setting dulu DNS km, Tambahkan "CNAME Records" dan isikan "mail" di kolom "Hostname" dan isikan "ghs.google.com" dikolom http://naldoton.blogspot.com"Value"
14. Setelah itu klik tombol "I have complete these step"

Nha sekarang km sudah bisa memiliki email dengan nama doamin blogmu sendiri. Untuk setting2 lainnya pelajari sendiri ya. Udah capek nih.....



If you enjoyed this post, please make sure you subscribe to my RSS feed!

17 October 2009

Show Avatar On Your Comment



Blogger is now introducing features every day as part of its 10th birthday celebrations.Now it has formally announced the Blogger Comment avatars. To know what it means take a look at the comments here on this blog and you will see the profiles pictures of the commentators near to the comments.If you are using some default blogger template things would be much easy.Here is a little screenshot of the new feature.



Implementation of Comment Avatars

1.First of all Go to Blogger > Settings >Comments and enable “Show profile images on comment”
2.Now if you have a normal un customized template you will see the avatars on the comments on your blog.
3.If you have a customized template you will have to add some codes and play around with your template.For that first go to Blogger Layout >Edit HTML and backup your template.
4.Expand the widget templates and check if you can find this line there

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
If you can’t then that means we have something to do..
If you couldn’t find this,then do the following steps.
a)Find
<dl id='comments-block'>
and replace it with
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
b)Now Find all occurrences of

<a expr:name='data:comment.anchorName'/>

and replace each of it with

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>

<data:comment.authorAvatarImage/>
</div>
</b:if>

If you are using the author comment highlighting trick and if doesn’t work out with that trick,then leave a comment and i will try to help you out..

Further Styling.

If you want to add a default avatar for the ones with no profile pics,then place the CSS code just above
]]></b:skin>

CSS Code
.avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; }
.avatar-image-container  img { border:none;}

You can customize the CSS according to what you need.
If you need bigger avatars instead of smaller ones,then use the following CSS instead of the one above.

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1dN8D9TRLDgljIdloI2PX9XGiDPosZQmECf1wYZ_zVw3t51GZXBBnrJIkcP8vL3vpUPiLPUnC9dWcr6nNL0Pl-X5LtOKP5zThnPLknOzdIzD08iUXBAMGOGnERMgEZ7GOaVev1FQJHY/s400/grav.png);width:50px;height:50px;}

This will give you a bigger avatar and also a default gravatar image but it has a little drawback.It will also resize the small blogger favicons to a big size.(blooger favicon is displayed when a blogger user doesn’t have a profile avatar.Similarly OpenId also has a similar small icon.. ).
BTW to set you avatar pic you can use two methods.You can choose the edit profile link on your blogger profile and upload an image there,The second method is to enter a blogger comment somewhere in any blogger comment form and then click the Preview button instead of the Post Comment button.Now you will see an option to upload your avatar.
In case anything bad happens restore the template backup.. and comment here..:)

Thanks To :Blogger Plugin 


Recent Posts Widget for Blogger with Thumbnails, Summaries, Comments, etc

Display beautifully crafted links to Recent Posts on your blog with this widget. You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles.


Features and Customization:
  1. The Recent Post Titles
  2. Display Post Thumbnails
  3. Choose which blog posts to display (choose URL).
  4. Display Post Summaries
  5. Length of Summaries
  6. Display Post Date
  7. Display Number of Comments on each post
  8. Display Read More Link
  9. Display separator between posts
  10. Number of Posts do Display
  11. Determine height
Install the Recent Post Widget on Your Blog:
This widget is very simple to install. Just simply click the button below to choose which blog you would like to implement it on.
add to blogger

Many thanks to widgetforfree!
If you enjoyed this post, please make sure you subscribe to my RSS feed!

Related Post Widget


 Now here is wonderful hack for displaying links to related posts beneath each of your blog posts. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.






Steps for Implementation:
  1. Go to Layout >Edit HTML in your Blogger Dashboard.
  2. Back up your existing Template before making any changes!
  3. Make sure to check the "Expand Widget Templates" box.
  4. Search for the </head> tag.
  5. Add the following code just before the </head> tag.





  6. <style>
    #related-posts {
    float : left;
    width : 540px;
    margin-top:20px;
    margin-left : 5px;
    margin-bottom:20px;
    font : 11px Verdana;
    margin-bottom:10px;
    }
    #related-posts .widget {
    list-style-type : none;
    margin : 5px 0 5px 0;
    padding : 0;
    }
    #related-posts .widget h2, #related-posts h2 {
    font-size : 20px;
    font-weight : normal;
    margin : 5px 7px 0;
    padding : 0 0 5px;
    }
    #related-posts a {
    text-decoration : none;
    }
    #related-posts a:hover {
    text-decoration : none;
    }
    #related-posts ul {
    border : medium none;
    margin : 10px;
    padding : 0;
    }
    #related-posts ul li {
    display : block;
    background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRov418f54yd7lo8h10AoWLXPlY3_7t-aDPiU2VlBrzNqraApDNeYEfP_TLhdwmU0dD0VihH0E-pWL49D9OSXYPbfj_DPgvBIXxhkOuZkZbzUSJX9DFf6-i7L5-qFysFSwsEwr6Errwq4/") no-repeat 0 0;
    margin : 0;
    padding-top : 0;
    padding-right : 0;
    padding-bottom : 1px;
    padding-left : 21px;
    margin-bottom : 5px;
    line-height : 2em;
    border-bottom:1px dotted #cccccc;
    }
    </style>
    <script src='http://bsaves.com/scripts/Related_posts_hack.js' type='text/javascript'/>








  7. Now search for <p><data:post.body/></p>. In some of the templates this code may look like this
    <div class='post-body>
    or
    <p><data:post.body/></p>

  8. Add the following code just beneath the code you just searched for.









    <b:if cond='data:blog.pageType == "item"'>
    <div id="related-posts">
    <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div></b:if>






  9. Now Save your Template and you're done!
Customization
  • In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.



  • max-results=5
    http://widgetsforfree.blogspot.com
    If you enjoyed this post, please make sure you subscribe to my RSS feed!



Hosting Paling Murah

Recent Post Widget




You may also enjoy our: Recent Posts with Thumbnails Widget
This wonderful widget displays links to recent posts made on your google powered blogger blog. It works great in your blog's sidebar. If you don't like only being able to display 5 of your recent posts you can now show as many as you want. The default is set to 10 posts, but all you need to do is change the number 10 within the code to any desired amount.
  • As you can see, I have this widget in my sidebar, which is called the "Recent Posts".
+- Get this Widget







If you enjoyed this post, please make sure you subscribe to my RSS feed!