Search

WebRank Toolbar - Google Pagerank, Alexa, Compete and Quantcast Rank Versi 3.0

Posted by Kimberly on Monday, May 24, 2010

Webrank toolbar versi terbaru ini menjawab kekurangan webrank toolbar versi 1.1 yang sebelumnya sudah pernah saya tulis. Karena tidak munculnya google indexed pages pada webrank toolbar versi 1.1 tersebut, sehingga semua website atau blog terbaca N/A. Buat sobat yang ingin selalu melihat perkembangan blognya, webrank toolbar versi terbaru ini bisa menjadi alternatif. Webrank toolbar adalah add-ons mozilla, sehingga hanya bisa digunakan pada browser mozilla saja.

Webrank toolbar versi 3.0 sangat lengkap, mulai dari pagerank, alexa ranking, google indexed pages, bing indexed pages, yahoo indexed pages, google bing dan yahoo backlink, dan masih ada beberapa lagi yang terdapat didalmnya. Sangat praktis dan mudah dalam penerapannya.

Selamat menggunakan dan semoga dengan dipasangnya webrank toolbar 3.0, sobat akan semakin rajin meningkatkan traffic dan performa blog sobat.

https://addons.mozilla.org/id/firefox/addon/52177/

More aboutWebRank Toolbar - Google Pagerank, Alexa, Compete and Quantcast Rank Versi 3.0

20 Design Web Sebagai Inspirasi Buat Anda

Posted by Kimberly

imageBerbeda dengan postingan saya sebelumnya yang selalu menampilkan tutorial blog ataupun tips dan trik ngeblog. Kali ini saya ingin berbagi design template dari beberapa website yang saya ambil secara acak dan mungkin bisa menjadikan inspirasi buat sobat yang hobi mendesign ataupun membuat template. Ada 20 design web cantik yang bisa sobat jadikan referensi dalam membuat atau mempercantik blog/website sobat. Berikut design webnya, semoga bermanfaat.

 

 

Mint

image

Lionite Portfolioimage

Z-Index

image

Unlab

image

Reichweite

image

Webdesigner Depot image

Friml

image

Mein Eigner Baum

image

Wakeup Somebody Upimage

Creative Unitedimage

Campaign Monitorimage

Mocapoke

image

2Creative

image

Go Glampingimage

Icebrrg

 image

Terrededouceurimage

Champion Soundimage

Barrack Obamaimage

Gareth Dickey

image

The Pixel

image

More about20 Design Web Sebagai Inspirasi Buat Anda

Pengaturan Letak Widget Pada Halaman Tertentu

Posted by Kimberly

blockquote Menanggapi dan melihat pertanyaan sobat Fachry pada postingan widget sharing is sexy, dengan tampilan widget yang muncul pada halaman depan blog. Seharusnya widget tersebut munculnya pada halaman postingan atau setelah read more di klik. Ada sedikit kode yang harus sobat ketahui untuk meletakkan widget, ingin di letakkan pada halaman depan blog saja atau hanya ingin meletakkan widget pada halaman postingan. 2 kode ini saya rasa mutlak wajib sobat mengerti fungsinya, buat yang belum mengerti berikut HTML-nya.

 

  1. Meletakkan widget hanya pada halaman depan (home page)

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

    LETAK WIDGET

    </b:if>

     

  2. Meletakkan widget hanya pada halaman postingan (post page)

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    LETAK WIDGET

    </b:if>

Pada kasus yang dialami sobat Fachry adalah widget sharing is sexy muncul pada halaman depan blog, padahal seharusnya widget tersebut hanya muncul pada halaman postingan. Untuk itu kode yang digunakan adalah kode yang nomor 2. Sehingga kode lengkapnya untuk widget sharing is sexy tersebut adalah :

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div class='sexy-bookmarks'>

    <ul class='socials'>

    <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-ID' title='Subscribe to RSS'/></li>

    <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    </ul>

    <span class='sexy-rightside'/>

    </div>

</b:if>

Saya hanya memberikan 2 kode yang wajib sobat ketahui, sebenarnya masih ada beberapa kode lagi untuk peletakkan widget-widget di blog. Semoga bermanfaat !

More aboutPengaturan Letak Widget Pada Halaman Tertentu

Scopsore

Posted by Kimberly on Sunday, May 23, 2010

image 

 

Template Information

 

Name Scopsore
Type Blogger Template
Properties Blue. gray, 2 Columns, right sidebar
Include Avatar mybloglog, related posts
More aboutScopsore

Download Icon Cantik dan Menarik

Posted by Kimberly

image Untuk mempercantik tampilan blog atau desktop pada komputer sobat, dibawah ini ada beberapa icon cantik dan menarik yang dapat sobat download secara gratis. Sobat juga bisa menggunakan pada apilkasi blog atau web, dengan kualitas gambar yang bagus icon-icon ini bisa menjadi pilihan buat mengisi beberapa bagian di komputer sobat atau paling tidak sebagai koleksi.

 

  1. Round theme icons

    image

  2. Fortune 500 Badges

    image
  3. Set of Social Icons

    image

  4. Manto Smiley Icon Set

    image

  5. Reality

    image

  6. Baggy Icon Set

    image

  7. Flavours Icon Set

    image

  8. Banking Stuff Icons

    image

  9. Practica Icons Set

    image

  10. GP Icons

    image

  11. Music Icons

    image

  12. Email Me Icons

    image

  13. Cemagraphics Icons

    image

  14. Social Media Handycons

    image

  15. Antique Icons

    image

  16. Green and Blue Icon Set

    image

Selamat mendownload dan semoga bisa menambah koleksi icon sobat.

More aboutDownload Icon Cantik dan Menarik

Pasang Widget Lintas Berita di Blog

Posted by Kimberly on Thursday, May 20, 2010

image Menanggapi pertanyaan sobat ISS pada postingan widget sharing is sexy yang menanyakan perihal seputar pemasangan widget lintas berita di blog. Kebetulan saya belum pernah membahas masalah ini, dan sebenarnya widget lintas berita ini pernah saya pasang di blog ini karena beberapa hal saya hilangkan. Seperti kita ketahui, lintas berita merupakan situs portal tempat orang mempromosikan web atau blog mereka.

 

Hampir semua blogger menggunakan fasilitas lintas berita sebagai media untuk promosi blog atau istilah kasarnya menjadi benalu di lintas berita, dengan total ribuan  halaman/pages yang terindex di google. Dengan begitu blog kita jadi ikut terkenal dan setidaknya mendapat  cipratan traffic dari lintas berita. Untuk mempermudah dalam submit berita atau artikel blog, widget lintas berita ini mungkin bisa menjadi alternatif.

 

image

 

Cara pasangnya sangat mudah, coba perhatikan langkah-langkahnya berikut ini.

 

  • Pada Edit HTML, silahkan klik Expand Template Widget.
  • Letakkan kode css berikut ini diatas kode ]]></b:skin>

     

    #lintas-berita {
    background:#ECE0F8;
    border:1px solid #cccdcd;
    margin:15px 0px 10px 0px;
    padding:10px;
    color:#000;
    font-weight:normal;
    }

    .lintaskiri {
    float:left;
    margin:0px 15px 0px 0px;
    width:380px;
    }

    .lintaskanan {
    text-align:center;
    }

  • Kemudian letakkan kode berikut setelah kode <data:post.body/> atau <p><data:post.body/></p>

     

    <div class='clearfix' id='lintas-berita'>
    <div class='lintaskiri'>
    Jika menurut sobat artikel ini bermanfaat, silahkan vote ke <strong>Lintas Berita</strong> agar artikel ini bisa di baca oleh orang lain.
    </div>
    <div class='lintaskanan'>
    <script type='text/javascript'>lb_skin = &#39;mode2&#39;; </script>
    <script src='http://www.lintasberita.com/widget_vote/lintasberita.js' type='text/javascript'/>
    <noscript>Powered by www.lintasberita.com visit <a href='http://www.lintasberita.com'>Lintas Berita</a></noscript>
    </div>
    </div>


  • Simpan Template.

 

Perhatikan kode css yang berwarna merah, kode tersebut adalah lebar untuk widget sebelah kiri (widget untuk tulisan) harap disesuaikan dengan lebar template. Jika widget lintas berita muncul pada halaman depan blog, maka tambahkan kode

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

diantara kode yang berwarna hijau dan tutup dengan kode

</b:if>

 

Semoga berhasil.

More aboutPasang Widget Lintas Berita di Blog

Pasang Button Social Bookmark di Blog

Posted by Kimberly on Tuesday, May 18, 2010

facebook-8Jika ingin punya blog populer, buatlah konten yang menarik. Namun apakah itu sudah cukup untuk membuat blog kita jadi populer. Tentu dengan pemasangan meta tag yang mumpuni dan keyword yang relevan akan sangat membantu kita dalam meningkatkan traffic blog. Satu cara yang juga tidak boleh kita lupakan begitu saja adalah peran situs-situs social bookmark yang saat ini menjadi alternatif lain para blogger untuk mempromosikan blog mereka.

 

Dengan mensubmit artikel-artikel kita ke situs social bookmark akan memungkinkan kita mendatangkan banyak pengunjung. Untuk melakukan itu, kita memerlukan fasilitas cepat dalam mensubmit artikel kita, salah satu contoh dengan memasang widget atau button social bookmark di blog kita. Hal ini sudah pernah saya bahas sebelumnya pada postingan membuat widget share di blog. Sama dengan yang lalu hanya saja kali ini penerapannya lebih mudah dan dengan button yang lebih besar. 

 

image

Untuk memasangnya sangat mudah, silahkan ikuti langkah-langkahnya berikut ini.

  • Login to blogger.
  • Tuju Tata Letak.
  • Klik Edit HTML �>> Expand Template Widget .
  • Copy dan paste kode dibawah ini setelah kode <data:post.body/>

     

    <div style='clear:both; '>
    <div style='width:60px; float:left;'>
    <script type='text/javascript'>
    digg_url = &#39;<data:post.url/>&#39;;
    </script>
    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
    </div>
    <div style='width:60px; float:left;'>
    <script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble' src='http://lh4.ggpht.com/_7Y9pl24WpQY/S9xSmUeCjGI/AAAAAAAADpY/PwTpE9ERS0U/stumble_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Delicious' src='http://lh3.ggpht.com/_7Y9pl24WpQY/S9xSe2evJhI/AAAAAAAADpI/u2d3FXmIcCQ/delicious_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Technorati' src='http://lh5.ggpht.com/_7Y9pl24WpQY/S9xSo_MlhMI/AAAAAAAADpg/iFnP2vmL_D4/technorati_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Twitter' src='http://lh4.ggpht.com/_7Y9pl24WpQY/S9xSb_SokmI/AAAAAAAADpA/7BuK9F8-_NY/twitter_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Facebook' src='http://lh5.ggpht.com/_7Y9pl24WpQY/S9xSi2qVdTI/AAAAAAAADpQ/mZXQ8JqJlnI/facebook_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'> <a expr:href='&quot;http://www.reddit.com/submit?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://lh6.ggpht.com/_7Y9pl24WpQY/S9xStOwxCcI/AAAAAAAADpo/2U6vbGMS6GM/Reddit-icon_thumb%5B16%5D.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    </div>

  • Simpan Template.

 

Semoga berhasil dan banyak mendatangkan pengunjung. Nerd

More aboutPasang Button Social Bookmark di Blog

Memasang Comment Count Di Blog

Posted by Kimberly

1274007132_bubble_48 Tutorial memasang comment count memang sudah sering kita jumpai di berbagai tutorial blog, namun tidak ada salahnya kita bahas sama-sama. Kemarin lusa ada sobat blogger yang menanyakan tentang hal ini lewat facebook, dan kebetulan saya belum pernah menulis tutorial ini. Comment count atau comment bubble atau lebih mudahnya adalah kotak kecil yang berisi jumlah komentar dalam setiap postingan. Biasanya comment count pada umumnya terletak dibagian kanan atas postingan. Berikut tutorial singkatnya.

 

  • Masuk ke Tata Letak.
  • Klik tab Edit HTML.
  • Jangan lupa untuk membackup template terlebih dahulu sebelum melakukan pengeditan.
  • Klik radio radio button Expand Template Widget.
  • Kemudian letakkan kode css berikut ini diatas kode ]]></b:skin>

    .comment-count {
    background:url(http://lh6.ggpht.com/_7Y9pl24WpQY/S_AGNIqF3nI/AAAAAAAAD4A/3onsvK0-jmA/1274007079_speech_bubble_48_thumb%5B3%5D.png) no-repeat;
    float: right;
    font-family: maiandra gd, arial;
    font-size: 10px;
    text-align: center;
    width: 28px;
    height: 28px;
    margin-top: -5px;
    margin-right: 2px;
    padding-top: 5px;
    }

  • Setelah itu kode yang ditambahkan adalah seperti dibawah :

    <b:includable id='post' var='post'>
    <div class='post hentry uncustomized-post-template'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <span class='comment-count'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>
    </b:if>
    </span>
    </b:if>

    <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>
    </b:if>

  • Kode yang berwarna merah adalah kode yang harus sobat sisipkan.
  • Simpan Template.

 

Yang harus diperhatikan adalah margin-top:-5px dan padding-top:5px, karena itulah yang akan menentukan letak tinggi rendahnya widget comment count ini. Silahkan diatur sesuai template sobat, karena setiap template mempunyai karakter yang berbeda-beda.

 

Semoga berhasil.

 

More aboutMemasang Comment Count Di Blog

JooGoo Green Template

Posted by Kimberly on Monday, May 17, 2010

JooGoo Green Blogger Template
JooGoo Green Blogger Template adalah sebuah template blogger yang menggunakan style personal atau dengan kata lain template yang dibuat untuk keperluan pribadi. Karena dari bentuknya, template ini sedikit mengarah ke bentuk daun dan model buku diatasnya, sehingga memang cocok untuk blog pribadi. Template ini memiliki 2 kolom dan sidebar disisi kanan.

Silahkan sobat lihat saja langsung di demo templatenya, semoga tertarik dan bisa menggunakannya dengan mudah karena template ini tidak mempunyai setingan khusus.
More aboutJooGoo Green Template

Membuat Menu Horizontal Rounded Corner

Posted by Kimberly on Sunday, May 16, 2010

 image Bagi pengguna browser mozilla, safari atau opera membuat menu horizontal dengan garis melengkung (rounded corner) memang tidak ada masalah. Namun hal ini tidak berlaku pada browser IE. Untuk mengatasinya, ada satu cara yang bisa diterapkan, yaitu dengan menambahkan gambar rounded corner dalam css menunya. Saya menggunakan template gris amarillos sebagai demo, bisa dilihat disini.

 

Langkah pertama yang harus sobat lakukan adalah membuat gambar rounded corner terlebih dahulu. Ada 4 gambar yang harus sobat buat, left tab, right tab, left tab hover, right tab hover.

 

left-tab p1  left tab
right-tab  p1  right tab
left-tab hover  p1  left tab hover
right-tab hover p1  right tab hover

 

Kemudian upload gambar-gambar tersebut ke tempat penyimpanan online. setelah itu baru kita lanjutkan pada pemasangan kode css untuk menu horizontalnya.

 

  1. Masuk ke Tata Letak.
  2. Klik tab Edit HTML.
  3. Tambahkan kode berikut ini sebelum kode ]]></b:skin>

    #nav {
    width: 980px;
    height:34px;
    position: relative;
    float:center;
    margin:0px;
    padding:0px;
    }

    #nav left{
    float:left;
    display:inline;
    width:980px;
    }

    #nav a {
    color:#222;
    background:#dba72d url(http://lh5.ggpht.com/_7Y9pl24WpQY/S92v2xGQZ6I/AAAAAAAADqs/ajeGLWXobuE/left-tab_thumb%5B4%5D.png) left top no-repeat;
    text-decoration:none;
    padding:7px 0 6px 12px;
    }

    #nav a span {
    background:#dba72d url(http://lh3.ggpht.com/_7Y9pl24WpQY/S92v4-cWJvI/AAAAAAAADq0/F3FEArdJEg8/right-tab_thumb%5B2%5D.png) right top no-repeat;
    padding:7px 12px 6px 0; 
    }

    #navigation a, #navigation a span {
    display:block;
    float:left;
    }

    #nav a:hover {
    color:#222; 
    background:#2d61db url(http://lh3.ggpht.com/_7Y9pl24WpQY/S-WkCZSIonI/AAAAAAAADtg/yyvKetEpy4w/left-tab%20hover_thumb%5B3%5D.png) left top no-repeat;
    padding-left:12px;
    }

    #nav a:hover span {
    background:#2d61db url(http://lh3.ggpht.com/_7Y9pl24WpQY/S-WkE2Ya06I/AAAAAAAADto/JbhOEh9o7ak/right-tab%20hover_thumb%5B1%5D.png) right top no-repeat;
    padding-right:12px;
    }

    #nav ul {
    list-style:none;
    padding:0;
    margin:0;
    }

    #nav li {
    float:left;
    margin:0;
    }

  4. Cari kode HTML bagian Header blog :

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='JUDUL BLOG (Header)' type='Header'/>
    </b:section>
    </div>

     

  5. Kemudian tambahkan kode berikut ini dibawahnya :

    <div id='nav'>    
    <b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
    <b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
    <b:includable id='main'>
    <div class='widget-content'>
    <b:if cond='data:title'/>
    <div id='nav left'>   
    <ul>
    <li><a href='/'><span>Home</span></a></li>
    <b:loop values='data:links' var='link'>
    <li><a expr:href='data:link.target'><span><data:link.name/></span></a></li> </b:loop>
    </ul>
    </div>  
    </div>
    </b:includable>
    </b:widget>
    </b:section>   
    </div>

  6. Simpan Template.

 

Keterangan :

  • Kode yang berwarna biru adalah url tempat sobat menyimpan gambarnya, sekarang coba blok url tersebut satu persatu dan lihat gambarnya pada browser.
  • Yang berwarna merah adalah kode dari warna, sesuaikan dengan gambar yang dibuat.
  • Kode yang berwarna hijau adalah lebar menu horizontal, sesuaikan dengan lebar template.

 

Selamat mencoba semoga berhasil.

More aboutMembuat Menu Horizontal Rounded Corner
Related Posts Plugin for WordPress, Blogger...