Your Ad Here
Rabu, 27 Januari 2010 0

Membuat Twitter Follower Counter Di Blog

Pada artikel kali ini kita akan membuat chicklet atau badge penghitung follower account twitter.
Chicklet ini hampir sama dengan feedburner yang menghitung jumlah reader, sedangkan Twitter Counter ini gunanya untuk menghitung Twitter Followers anda.

Default button :



Kodenya sebagai berikut :

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=username"></script>

Ganti tulisan merah username dengan id twitter anda

Tersedia 4 warna anda bisa lihat disini.

Untuk add di blogger caranya sebagai berikut
Sign ke Blogger » Layout » Add a gadget » html/javascript
paste the code and save it.

Untuk Wordpress :
Sign ke Wordpress > Widgets > Text
paste code kemudian save.
Widget by Css Reflex | TutZone
Label: ,
Rabu, 20 Januari 2010 0

Menambahkan Sexybookmarks di Blogger


Gambar di atas merupakan screen shoot dari sexybookmark V.2. Nah dengan tools ini kita bisa sharing artikel kita ke berbagai situs yang lain hanya dengan mengclik pada button sharing yang tersedia. Selain tampilannya sexy dan cantik sharing buttonnya bisa ngumpet n timbul lagi kalo dilewati mouse keren kan? Untuk cara pemasanganya gampang ikuti saja langkah di bawah ini:

1. Masuk ke Tata Letak > Edit Html
2. Beri tanda centang pada Expand Template Widget
3. Jika perlu backup lah template bloga anda
4. Masukan kode berikut Di atas kode </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function() { // xhtml 1.0 strict way of using target _blank jQuery('.sexy-bookmarks a.external').attr("target", "_blank"); // this block sets the auto vertical expand when there are more than // one row of bookmarks. var sexyBaseHeight=jQuery('.sexy-bookmarks').height(); var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height(); if (sexyFullHeight>sexyBaseHeight) { jQuery('.sexy-bookmarks-expand').hover( function() { jQuery(this).animate({ height: sexyFullHeight+'px' }, {duration: 400, queue: false}); }, function() { jQuery(this).animate({ height: sexyBaseHeight+'px' }, {duration: 400, queue: false}); } ); } // autocentering if (jQuery('.sexy-bookmarks-center')) { var sexyFullWidth=jQuery('.sexy-bookmarks').width(); var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width(); var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length; var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth); var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth; var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2; jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px'); } }); </script>

Dan yang ini juga (lanjutan yang tadi)

<style type="text/css"> div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important} div.sexy-bookmarks-expand{height:29px; overflow:hidden} .sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat} div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important} div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left} div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important} div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important} div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important} div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important} .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img717.imageshack.us/img717/3006/sexyspritenew.png') no-repeat !important;border: 0;outline: none;} .sexy-digg{background-position:-980px bottom !important} .sexy-digg:hover{background-position:-980px top !important} .sexy-reddit{background-position:-700px bottom !important} .sexy-reddit:hover{background-position:-700px top !important} .sexy-stumbleupon{background-position:-630px bottom !important} .sexy-stumbleupon:hover{background-position:-630px top !important} .sexy-delicious{background-position:-1190px bottom !important} .sexy-delicious:hover{background-position:-1190px top !important} .sexy-yahoobuzz{background-position:-1120px bottom !important} .sexy-yahoobuzz:hover{background-position:-1120px top !important} .sexy-blinklist{background-position:-1260px bottom !important} .sexy-blinklist:hover{background-position:-1260px top !important} .sexy-technorati{background-position:-560px bottom !important} .sexy-technorati:hover{background-position:-560px top !important} .sexy-myspace{background-position:-770px bottom !important} .sexy-myspace:hover{background-position:-770px top !important} .sexy-twitter{background-position:-490px bottom !important} .sexy-twitter:hover{background-position:-490px top !important} .sexy-facebook{background-position:-1330px bottom !important} .sexy-facebook:hover{background-position:-1330px top !important} .sexy-mixx{background-position:-840px bottom !important} .sexy-mixx:hover{background-position:-840px top !important} .sexy-scriptstyle{background-position:-280px bottom !important} .sexy-scriptstyle:hover{background-position:-280px top !important} .sexy-designfloat{background-position:-1050px bottom !important} .sexy-designfloat:hover{background-position:-1050px top !important} .sexy-newsvine{background-position:left bottom !important} .sexy-newsvine:hover{background-position:left top !important} .sexy-google{background-position:-210px bottom !important} .sexy-google:hover{background-position:-210px top !important} .sexy-comfeed{background-position:-420px bottom !important} .sexy-comfeed:hover{background-position:-420px top !important} .sexy-linkedin{background-position:-70px bottom !important} .sexy-linkedin:hover{background-position:-70px top !important} .sexy-friendfeed{background-position:-1750px bottom !important} .sexy-friendfeed:hover{background-position:-1750px top !important} .sexy-link{ margin-left:25px; float:left} .sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>

5. Kemudian masukan kode berikut dibawah kode <data:post.body/>

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'> <ul class='socials'> <li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li> <li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li> <li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li> <li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li> <li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li> <li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li> <li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li> <li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li> <li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li> <li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li> <li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li> <li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li> <li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li> <li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li> <li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li> <li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li> <li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li> <li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li> </ul> <div style='clear:both;'/> </div> <div class='sexy-link'> Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a></div>

Kemudian Save

Widget by Css Reflex | TutZone
Label: ,
Minggu, 17 Januari 2010 0

Cek Broken Link Di Blog

Untuk menambah performa blog anda tidak ada salahnya kita mengecek ada tidaknya broken link, dan kita tidak bisa menganggap remeh tentang adanya broken link di web kita. Karena banyak hal yang akan di timbulkan denagan adanya broken link tersebut. Di akhir posting ada situs yang bisa digunakan untuk cek adanya broken link atau tidak.

Sebenarnya Broken link bisa disebabkan oleh beberpa hal antara lain :
  • Terjadi perpindahan server
  • Kesalahan scipt html atau java
  • Salah ketik alamat URL

Beberapa efek negatif dari broken link alias broken link effect antara lain:

  1. Popularitas Backlink Menurun.
  2. SEO Hancur.
  3. Penurunan Traffic secara drastis. Karena loadnya terlalu lama kebanyakan para pengunjung akan langsung menutub web anda. Dan yang lebih parah mungkin pengunjung akan kapok datang ke situs anda lagi. Hingga akhirnya anda akan kehilangan pengunjung setia anda.
  4. Tidak Disukai Oleh Google. Google sebagai mesin pencari yang terbaik pasti tidak akan mengecewakan para penggunnya dengan adanya situs yang not found atau ngeload kelamaan. Maka untuk situs yang bermasalah akan diturunkan rangkingnya.
  5. Pencabutan pagerank oleh mesin pencari. Karena situs anda bermasalah dengan adanya broken link maka otomatis pagerank anda akan dicabut dan mungkin kembali ke nol lagi.
Untuk mengecek broken link silahkan kunjungi alamat ini : http://www.iwebtool.com/backlink_checker



Widget by Css Reflex | TutZone
Label:
Selasa, 01 Desember 2009 2

Menampilkan Status Twitter Di Blog



Cara menampilkan update status twitter di blog atau website:
  1. Login ke twitter.com
  2. Klik bagian Setting
  3. Lihat ke bawah pada more info URL kemudian klik link (You can also add Twitter to your site here)
  4. Pada list widget for... pilih My Website > Profile Widget
  5. Maka akan muncul halaman Customize Your Profile Widget anda dapat mengatur widget anda disini, antara lain:
  • Setting : mengedit username anda
  • Preferences : menampilkan atau menyembunyikan poll dan memberikan scroll bar dan jumlah tweets yang akan ditampilkan
  • Apperance : mengatur warna widget
  • Dimension : merubah ukuran widget dapat manual atau dapat menyesuaikan secara otomatis dengan memberi tanda centang pada auto width
    Setelah selesai klik "Finish & Grab Code"
Widget by Css Reflex | TutZone
Label: ,
Sabtu, 24 Oktober 2009 1

Mengubah Lebar Template blogger


Buka blog anda, Masuk menu Tata Letak > Edit HTML > Centang Expand Widget, Demi keamanan Back Up dulu data template anda..! ( copy –paste ke notepad atau word ).

Temukan angka width dari #header-wrapper, #outer-wrapper, dan #footer, #main-wrapper ,#sidebar-wrapper, yang merupakan patokan dari lebar halaman. untuk memudahkan pencarian tekan ctrl+f kemudian paste ke kota find. Angka yang saya blok merupakan ukuran width :

Untuk nilai width : #header-wrapper, #outer-wrapper dan #footer adalah sama, anda bisa rubah ke 750 px semua.

Dan untuk nilai width : #main-wrapper ,#sidebar-wrapper, bisa anda atur sesuai keinginan anda, main wrapper merupakan kolom posting anda dan sidebar adalah tampilan sebelah dari posting anda. Dan diantara kolom posting dan sidebar ada jarak beberapa pixel, agar antara kolom posting dan sidebar tidak terlalu dempet.

Jadi seperti ini ( contoh ) anda bisa ganti width dari masing-masing ukurannya :

#header-wrapper, #outer-wrapper, dan #footer,

750 px, 750 px, 750 px

#main-wrapper ,#sidebar-wrapper

470 px + 30 px ( jarak antara, anda bisa atur sendiri ), 250 px.

Untuk melihat hasilnya klik Preview

Apabila sudah selesai klik Save

Widget by Css Reflex | TutZone
Label:
Kamis, 01 Oktober 2009 0

Membuat Recent Comment

Wah biasanya kita sampai kesulitan mengecek komentar terbaru yang ada pada blog kita, soalnya komentar di lontarkan di postingan kita yang berbeda-beda, jadi kita akan merasa kesulitan untuk mengetahui siapa saja yang memberi komentar dan dimana dia melontarkan komentarnya juga isi komentarnya bagaimana.
Tapi jangan kawatir saya akan beri tips jadul tapi manjur yaitu cara membuat recent comments dengan JavaScript.
Dulu anas udah posting cara menampilkan postingan terbaru yang saya tulis sebelumnya, kali ini anas tulis juga membuat recent comments dehhh... ikuti yukkk

1. Pastikan dulu sudah Log In di blogger yah!

2. lalu beranjak ke menu Layout Kemudian Page elements

3. Kalau sudah! hoi sudah belom! sudah- sudah yaa jangan nangis... Lo kok malah mbulet-mbulet. Ahh serius nihhh Pilih tempat yang mau dipasangi terus Add a Gadget

4. Lalu pilih Menu HTML/JavaScript

5. Taruh Code Dibawah ini Kedalam HTML/JavaScript

Taruh Code Dibawah ini Kedalam HTML/JavaScript




5. Keterangan:
  • Tulisan NamaBlogKamu yang tercetak tebal dan merah diatas harus kamu ganti dengan alamat blog kamu
  • Angka 5 yang tercetak tebal dan biru itu menunjukkan Komentar terakhir yang ditampilkan di blog, kamu bisa mengubah sesuai selera kamu

6. Kalau sudah Simpan dehhhh

Aduhhh gampang kannnnn cuma itu aja gak ada yang ribet kok.
ohh yaa jangan sampai lupa isi komentar kamu dibawah yaaaa thx lo sebelumnya.... ihhh gemes dechhhhh
Widget by Css Reflex | TutZone
Label: ,
Senin, 21 September 2009 0

Membuat Recent Post Dan Thumbnail

 Widget yang satu ini fungsinya untuk menampilkan postingan terakhir kita (Recent Post), gambar, dan jumlah komentar.
Contoh tampilannya seperti dibawah ini :



Buat cara bikinnya simple aja, kamu tinggal "Add Gadget" ---- > "HTML/JavaScript" lalu copy paste code di bawah ini :



<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 300;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://NAMABLOGKAMU.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>




Setelah itu, ada beberapa yang harus dan bisa kamu edit, diantaranya :

boxwidth --> Ukuran dari kotak Widget
cellspacing --> Spasi diantara cells
thumbwidth dan thumbheight --> Ukuran lebar dan tinggi kotak gambar
numposts --> Jumlah recent post yang akan kamu tampilkan..
home_page --> http://NAMABLOGKAMU.com/ ( ganti alamat blog kamu )

Selamat mencoba ! Semoga Bermanfaat
Widget by Css Reflex | TutZone
Label: ,