Cara Membuat Recent Comment Dengan Avatar

Widget Recent Comment dengan Avatar -- Atau sering juga disebut dengan komentar terbaru dengan icon atau gambar profil komentator memang terkadang ada juga kegunaannya, contohnya saat kita membuka blog kita tentunya kita dapat melihat komentar terbaru yang ada tanpa membuka blogger/home.Mungkin sobat menginginkan widget Recent Comment yang seperti ini :

Untuk Membuat Komentar Terbaru Dengan Icon Avatar, ikuti langkah berikut :


1. Masuk ke Blogger
2. Masuk ke Edit Tata Letak ( Layout )
3. Tambahkan widget HTML/JavaScript
4. Copy Paste Kode Berikut :

<div style=" overflow:auto; text-align: left; width: 300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 6,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]></script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://eko-tipsntrick.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>
</div>

NB :
Perhatikan kode warna Biru !
6 adalah jumlah komentar yang tampil
30 adalah besar image avatar
40 adalah jumlah maksimal karakter
eko-tipsntrick.blogspot.com ganti dengan URL alamat Blog sobat.
Sobat bisa ganti sendiri sesuai dengan selera.
Simpan dan lihat hasilnya.

Sumber : http://warehouse1994.blogspot.com/

Read more

Membuat komentar twitter, facebook dan blog berdampingan

Pasang Komentar Twitter, Facebook dan Blog -- Hehehe... baru dapat informasi terupdate lagi dari blog tetangga , dan saya copas dengan tambahan dan sentuhan sendiri.Postingan kali ini memberikan tutorial tentang bagaimana memasang tiga komentar sekaligus dalam satu yaitu komentar twitter, facebook dan blog .Tentunya komentar tersebut dipasang dalam bentuk tab-view yang membuat komentar tersebut lebih elegan dan membuat komentar blog lebih bagus.

Untuk memasang komentar twitter, facebook dan blog kalian harus membuat aplikasi dari facebook dan twitter terlebih dahulu, tapi tenang karena membuatnya cukup mudah.Langsung saja ke tutorialnya, ikuti langkah berikut :

Untuk membuat kotek komentar Blogger, Twitter, Facebook dengan digabungkan ikuti langkah dibawah ini :

Yang kita butuhkan adalah :
- APP ID (pada facebook) Untuk membuat nya KLIK DISINI
- API Key (pada twitter ) Untuk membuatnya KLIK DISINI
- ID Blogger (pada blogger) login ke blogger lalu pada Address Bar (copy angka setelah ID=…….)

Langkah pertama sudah selesai ...

Masuk Langkah Kedua ...

• Login ke blogger
• Masuk ke edit HTML --> Centang 'Expand Template Widget'
• Masukkan kode berikut tepat di bawah kode </head>

 <meta content='Profile_ID' property='fb:admins'/>
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_KEY&amp;v=1'/>

Keterangan : ganti warna biru dengan Profil_ID, APP_ID dan API_KEY yang sudah kalian buat tadi.

• Copas kode <div class='comments' id='comments'> dan letakkan dibawah kode

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
  </b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'> 

Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
Kita bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang diinginkan

• Simpan template dan lihat hasilnya.

Tambahan !!! bagi yang ingin menghapus komentar tersebut dari Halaman Static , tinggan anda masukkan kode berikut :

<b:if cond='data:blog.pageType != "static_page"'> 

dan letakkan di bawah kode

 <div class='comments' id='comments'>

lalu scroll kebawah sampai ketemu kode

<div class='clear'/>

dan letakkan kode </b:if> tepat dibawah kode diatas.

Keterangan : kode untuk menghilangkan di halaman static ini masih sama letaknya dengan kode yang kalian copas tadi ( Langkah kedua pada step 1 )

Read more

Membuat Fans Page AutoHide Pada Saat Kebawah

Baik. kali ini Anthzo memposting tentang tutorial blog. hihi yang dimana sekarang memposting yang berjudulkan Cara Membuat FansPage Facebook Auto Hide, jadi kotak like fanspagenya itu muncul ketika blog dibuka dan tertutup pada saat jarak dari atas ke bawah berubah. dari pada bingung sama penjelasannya lebih baik langsung saja ke TKP sob. hehe


Cara Membuat Fans Page Facebook Auto Hide :
1. Login ke Blogger.
2. Klik Elemen Laman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode berikut  (Ctrl+C) :

<script src="http://eko-yulianto.googlecode.com/files/slidboxordinary.js" type="text/javascript"></script>
<div id="fbslidebox" style="position: fixed; width: 310px; overflow: hidden; bottom: 5px; right: 5px; background: #fff;) repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 5px ridge #80ff00; display: block;">
     <div style="width: 295px; padding: 10px; margin: 0pt auto; overflow: hidden;">
         <a id="fbcloseslidebox" style="float: right; color: #000; padding: 0pt 2px; border: 1px solid #000; text-decoration: none; font-size: 10px; font-family: Verdana" href="#">Exit</a>
       <strong style="color:#000;">Terima Kasih Bagi Yang Kasih Like/Suka</strong>
LETAKKAN KODE FACEBOOK LIKE BOX/FAN PAGE DI ISINI
</div></div>

6. Simpan. Cukup mudah kan :) jangan lupa berikan komentar anda 

Read more

Cara Menghitung Jumlah Kata Postingan Blog

Blogger pasti tidak asing dengan permainan kata untuk menulis,saya katakan permainan karena sebenarnya artikel atau postingan blog adalah karya juga tempat bermain kata atau kalimat, he he.. lucu juga yah.. apalagi seperti saya, sangat bawel sebenarnya, jadi karena saya bawel setidaknya dengan ngeblog bisa terkurangi karena hanya berbentuk text seperti ini yang anda lihat.

Malah gladur.. kembali ke pokok masalah, yaitu Cara Menghitung Jumlah Kata Postingan Blog, pernahkah kamu memikirkan berapa kata atau karakter yang telah kamu ketik setelah publish postingan blog kamu? eits.. jangan dihitung satu2 pasti capek nantinya. eko kali ini juga cuma update ringan,yaitu cuma memberi beberapa tool online untuk menghitung seberapa banyak kata yang kamu tulis. berikut dua tool yang bisa kamu pakai untuk mengetahui jumlah kata postinganmu.

1. http://www.wordcounttool.com/
2. http://centricle.com/tools/word+character-counter/

Nah,kamu bisa memakai kedua tool diatas untuk menghitung jumlah kata postingan blog kamu atau yang lainya.

Demikian artikel tentang Cara Menghitung Jumlah Kata Postingan Blog yang bisa saya publikasikan malam ini, semoga bermanfaat! amiin ya Alloh Robbal Alamiin. 

Read more

Membuat sebuah tabel dengan html

Sekarang kita akan masuk pada tahap yang lebih rumit, kenapa saya kata rumit? karena dalam membuat tabel dengan HTML ini diperlukan ketelitian, kecermatan dan kawan-kawannya. untuk menunjukkan daftar, misalkan tentang daftar sebuah harga atau data tertentu memang lebih mudah ditunjukkan dengan sebuah tabel, salah satu teman saya juga pernah saya buatkan tabel tentang harga pulsa dengan kode html,daripada menngunakan image/jpg yang loadingnya lama mungkin ada baiknya kamu pakai html saja,misal kode sbb:


<table border="1">
<tbody><tr>
<td>Hari1</td>
<td>Hari2</td>
<td>Hari3</td>
<td>Hari4</td>
<td>Hari5</td>
</tr>
<tr>
<td>Hari1</td>
<td>Hari2</td>
<td>Hari3</td>
<td>Hari4</td>
<td>Hari5</td>
</tr>
<tr>
<td>Hari1</td>
<td>Hari2</td>
<td>Hari3</td>
<td>Hari4</td>
<td>Hari5</td>
</tr>
</tbody></table>


maka akan terlihat sbb:

Hari1	Hari2	Hari3	Hari4	Hari5
Hari1	Hari2	Hari3	Hari4	Hari5
Hari1	Hari2	Hari3	Hari4	Hari5

atau kamu bisa memasukkan seperti dibawah ini:

<table border="1">
<tbody><tr>
<th>Hari</th>
<th colspan="2">jenis pengunjung</th>
</tr>
<tr>
<td>
</td>
<td>Cewe'</td>
<td>Cowo'</td>
</tr>
<tr>
<td>Senin</td>
<td>50</td>
<td>6</td>
</tr>
<tr>
<td>Selasa</td>
<td>70</td>
<td>90</td>
</tr>
<tr>
<td>Rabu</td>
<td>3</td>
<td>150</td>
</tr>
</tbody></table>

maka hasilnya spt ini:

Hari	jenis pengunjung
	Cewe'	Cowo'
Senin	50	6
Selasa	70	90
Rabu	3	150

lihatlah hasinya dan editlah sesuai keinginan kamu.
semoga bermanfaat!

Read more