Monday, 17 December 2012

Cara hilangkan tulisan diberdayakan oleh blogger pada blogspot


Cara hilangkan tulisan diberdayakan oleh blogger pada blogspot


SHADOWS
|| Cara hilangkan tulisan diberdayakan oleh blogger pada blogspot
 ,, Okkeee!!.. langsung  aja caranya ya.

Caranya cukup gampang, sobat tinggal mengikuti langkah-langkah dibawah ini:
1. Sobat harus Login dululah
2. Trus ke Template -> Klik Edit HTML
3. Setelah itu centang "Expand Template Widget"
4. Cari kode ]]></b:skin, atau tekan Ctrl+f untuk memudahkan pencarian
5. Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin :
 
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

6. Klik Simpan Template

CRREENNNGGG!!!..... Tulisan "Diberdayakan oleh blogger" pada blog  sobat sudah hilang begitu saja .

Semoga blog sobat tambah jreng.

Tuesday, 4 December 2012

Cara Pasang Daftar Isi Akordion dengan Auto Label

SHADOWS || Apa kabar.para sobat bloger, kali ini kita akan bahas mengenai daftar isi atau yang lebih populer dengan SITEMAP, yaitu peta situs yang akan terindek oleh google melalui Daftar Isi Akordion dengan Auto Label ini. Widget ini bentuknya sangat elegant, nah marilah kita lihat dan praktekan semoga berguna bagi para bloger, langsung menuju TKP gan


Cara Pasang Daftar Isi Akordion dengan Auto Label
                                                                 

                                                                                         Lihat Demo



Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:


Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:


Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script

type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" type="text/css" />
<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true, 
    maxNew     = 10,
    baru       = "Baru!",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/hompishive-labels-v1.js"></script>
<script src="http://shadows-k.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>



Ganti URL http://shadows-k.blogspot.com dengan alamat blog Anda, lalu Simpan dan Terbitkan.

Lebih Banyak Pilihan

OpsiNilaiKeterangan
showNewtrueJika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskanBaru! akan disembunyikan.
false
accToctrueJika bernilai true, efek akordion akan diterapkan, jika bernilai false, efek akordion akan hilang sehingga semua daftar isi akan terlihat.
false
openNewTabtrueJika bernilai true, setiap link akan secara otomatis terbuka di tab/jendela baru saat diklik, jika bernilai false, setiap link akan terbuka di tab/jendela yang sama saat diklik.
false
maxNew1, 2, 3, ... (numerik)Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).
baru"Baru!", "New!", "Terbaru!", ... (teks)Digunakan untuk mengubah teks Baru!.
sDownSpeed"slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript)Digunakan untuk menentukan kecepatan efek.slideDown() panel.
sUpSpeed"slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript)Digunakan untuk menentukan kecepatan efek .slideUp()panel.

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Nah selesai sudah Cara Buat Daftar Isi Akordion dengan Auto Label semoga bermanfaat..




                                                                                                     

Monday, 3 December 2012

Cara Memasang Google Bot, Yahoo Bot, Msn Bot Last Visit Di Blog

Cara Memasang Google Bot, Yahoo Bot, Msn Bot Last Visit Di Blog

 Shadows || sob bagaimana saat ini baik baik sajakah semoga baik ya, nah kali ini saya akan share tentang cara memasang atau membuat widget google bot, yahoo bot, dan msn bot di blog anda semua, google bot, yahoo bot, maupun msn bot adalah sebuah widget di blog yang memberitahukan tentang kapan tanggal, bulan dan tahun robot google menghampiri blog anda,widget blog yang saya share kepada anda tersebut dapat membuat robot google senang berkunjung ke blog anda, dengan menggunakan widget google bot, yahoo bot, dan msn bot dapat mendatangkan robot google menuju blog anda, jika anda menginginkannya silahkan ikuti tutorberikut :
1. kunjungi situs http://www.scriptme.info/
2. kemudian klik salah satu yang ingin lebih dahulu anda buat, misalnya memmbuat google bot last visit, lihat gambar berikut



3. kemudian masukkan link blog anda dan klik "check google bot last visit"



4. maka akan keluar kode html untuk anda memasang widgetnya, copy dan paste pada blog anda
5. selesai.... jika anda ingin membuat widget yahoo bot dan msn bot tinggal klik tombol home pada menu kemudian klik yahoo/msn bot last visit



sekian dulu tentang cara memasang widget google bot, yahoobot, dan msn bot di blog, semoga bermanfaat untuk para bloger...


Saturday, 1 December 2012

Cara buat judul sidebar widget rata tengah (Center Positions).

SHADOWS || Selamat malam sobat semua OOk, hari ini saya ingin share kepada para sobat semua tentang bagaimana cara Membuat Judul Sidebar Widget Rata Tengah (Center Positions), cantik bukan?

Nah untuk para sobat, terkadang untuk sebagian besar templates bawaan default untuk semua posisi Judul berada di Rata Kiri (Left Positions) termasuk templates saya yang sekarang ini, tetapi kalau bagi mata saya (khusus untuk judul sidebar widget) rata kiri tidak enak untuk dilihat (note: berbeda orang beda pendapat).

Begini, karena penampilan blog selalu menjadi perhatian saya (blog terlihat klop secara keseluruhan) agar bisa juga dinikmati dengan rasa tidak jenuh, khususnya oleh para sobat dan umumnya untuk para pengunjung, maka saya pun mengambil inisiatif mencari cara bagaimana agar Judul Sidebar Widgettersebut berada di rata tengah.


lihat pict

Cara buat judul sidebar widget rata tengah (Center Positions).



Bagi para sobat semua yang ingin membuat Judul Sidebarnya berada di Rata Tengah, silahkan ikuti langkah-langkah di bawah ini:

1. Login akun blogspot,
2. Klik design/rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Lalu cari kode berikut: .sidebar h2 {

Kode tambahan (untuk membuat menjadi rata tengah): text-align:center; 

Ket:

- Apabila diurutan kode tersebut sudah terdapat kode: text-align:leftmaka yang hanya diubah adalah tulisan 'left' nya diganti menjadi 'center',

- Apabila kode: text-align:leftnya tidak ada maka tambahkan kode: text-align:center; berada setelah kode: .sidebar h2 {

4. Jika sudah, sekarang bisa klik Save Templates.

Note:

Cara ini juga bisa digunakan untuk Judul Widget pada Footer, langkah-langkahnya juga sama seperti di atas, teman-teman hanya perlu mencari kode: #footer { atau id.footer atau #bottom h2 { (disesuaikan saja, tiap templates berbeda). Lalu bisa juga untuk Judul Postingan, silahkan cari kode .post h3 {

Seperti itulah cara Membuat Judul Sidebar Widget Rata Tengah (Center Positions), semoga bisa bermanfaat dan selamat mencoba. Salam bloger..

Cara Pasang Related Post dengan Tumbnails di Blog


Shadows || Apa khabar sobat blogger.. saya akan memberikan cara yang indah untuk sebuah artikel terkait di bawah setiap posting blog Anda, bersama dengan thumbnail. Artikel terkait dipilih dari posting lain dalam kategori yang sama/label/tag. Dengan hack ini banyak pembaca Anda akan tetap di situs Anda untuk waktu yang cukup lama ketika mereka melihat posting terkait kepentingan.

Cara Pasang Related Post dengan Tumbnails di Blog

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4QM9U7gK_PzysSHjlbtdLW-h60t60syAqFBeGpMEPAgLblS7HPtSd8Q_-Cpum3qoYJXaGsQRhTzfFdSyH3tkJ5bQege6zUkDTkFrg18nk6GYDnKHJGRXfElLnrXQxtHuo8QzNPb_PEq14/s1600/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Catatan:
  • Untuk mengubah gambar default bila tidak ada gambar yang tersedia, ganti URL warna biru dengan URL Anda sendiri.
  • Untuk menampilkan lebih dari 5 postingan, ganti 5 nilai dari "var maxresults = 5;"
  • Hapus kode violet jika Anda ingin artikel terkait ditampilkan di homepage.





           5.   Cari kode dibawah ini :

    <div class='post-footer-line post-footer-line-1'>

    Jika Anda tidak dapat menemukannya, kemudian mencari satu ini :

    <p class='post-footer-line post-footer-line-1'>

    atau,

    <data:post.body/>
         
           6.  Pastekan kode dibawah ini dibawah pada kode diatas :

    <!-- Related Posts with Thumbnails Code Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
    </script>
    </div><div style='clear:both'/>
    <!-- remove --></b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    </b:if></b:if>
    <!-- Related Posts with Thumbnails Code End-->

    Catatan:
    • Ubah nilai 6 dari max-results=6 dengan jumlah posting yang ingin ditampilkan.
    • Jika Anda ingin artikel terkait yang akan ditampilkan di homepage juga, hapus kode violet.


             7. Save Template Anda.



      Cara Buat Agar Breadcrumbs Langsung Terindex Google


      Agar Breadcrumbs Langsung Terindex Google
      SHADOWS || Seberlumnya beberapa hari yang lalu, saya sudah memakai breadcrumbs, namun setelah saya coba, kok belum berhasil juga terindek google. Nah ahirnya saya menggunakan cara yang kedua ini, dan  sudah berhasil. Cara buat Agar breadcrumbs langsung terindex google dengan sangat baik dan langsung.

      Ok jika sobat tertarik untuk menerapkan seperti apa yang saya lakukan ini, mari kita langsung saja kita ke langkah-langkahnya.

      1. Pertama login dulu ke akun bloggernya sobat.
      2. Kemudian langsung menuju Template - Edit HTML - Centang Expand Tenplate Widget.
      3. Masukan kode css untuk breadcrumbsnya, taruh di atas kode ]]></b:skin>

      .breadcrumbs{padding:5px ;margin:5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

       4. Setelah itu cari kode  <b:includable id='main' var='top'> , hapus kode tersebut dan ganti dengan kode berikut :
      <b:includable id='breadcrumb' var='posts'>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <!-- breadcrumb for the post page -->
      <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
      <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
      <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
      <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == &quot;true&quot;'>
       &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
      </b:if>
      </b:loop>
       &#187; <span><data:post.title/></span>
      </div>
      <b:else/>
      <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
      </b:if>
      </b:loop>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <!-- breadcrumb for the label archive page and search pages.. -->
      <div class='breadcrumbs'>
      <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
      </div>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <div class='breadcrumbs'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
      <b:else/>
      <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
      </b:if>
      </div>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:includable>
      <b:includable id='main' var='top'>
      <b:include data='posts' name='breadcrumb'/> 

      Save template.

      Nah.. bagaimana sob,, Sangat simple sekali bukan?? 
      Untuk mengecek apakah breadcrumbs langsung  terindex google,  sudah diindex dengan google apa belum?, silahkan sobat buat artikel dengan menyertakan label yang sudah terindex oleh google (untuk cek sobat tinggal copy paste url label ke google).
      Setelah selesai membuat artikel baru, tunggu hingga artikel tersebut terindex oleh google, dan lihat hasilnya.
      Semoga bermanfaat untuk para blogger..

      Cara Pasang Kotak Permalink di Bawah Postingan Untuk Menyebarkan Link

      Cara Pasang Kotak Permalink di Bawah Postingan Untuk Menyebarkan Link

      SHADOWS || Cara Membuat Kotak Permalink di Bawah Postingan BlogPermalink adalah tautan permanen dari halaman postingan blog. Dengan membuat kotak permalink di bawah postingan, dapat mempermudah pembaca atau blogger lain untuk mengetahui permalink dari postingan yang sedang dibacanya.

      Blogger lain bisa saja menyematkan kode HTML permalink itu di blognya, sehingga memberikan tautan (backlink) ke halaman postingan kita. Bagi anda para blogger yang tertarik untuk memasang di blognya, Silahkan untuk di terapakan di blog sobat.

      Cara Buat Isi Kotak Permalink di Bawah Postingan Blog
      1. Login ke blogger
      2. Pilih Template kemudian Edit HTML
      3. Jangan lupa centang "Expand Template Widget"
      4. Cari kode <data:post.body/> Lalu taruh kode berikut berikut di bawahnya:
      <br /><textarea cols='55' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea><br/>

      5. Save template.

      Jika setelah disimpan kurang sesuai dengan tampilan blog kita, bisa kita edit. Untuk <data:post.body/>jika kita menggunakan Auto Read More, akan ada dua kode, pilih kode yang kedua. 55 adalah panjangnya kotak dan 2 adalah tingginya.

      Selesai sudah Cara Pasang Kotak Permalink di Bawah Postingan Untuk Menyebarkan Link terpasang di blog sobat, semoga bermanfaat...

      Cara Agar Semua Label Terindex Google

      Cara Agar Semua Label Terindex Google


      SHADOWS || Cara Membuat Semua Label di Blogpot Terindex GooglePada postingan kali ini sama halnya dengan postingan yang kemarin yaitu :Cara Agar Breadcrumbs Langsung Terindex Google .Namun setelah cara yang kemarin saya terapkan hanya memunculkan satu label saja, tidak untuk semua label. Nah setelah saya muter2 browsing di google, akhirnya saya menemukan cara ini yaitu semua breadcrumbs yang kita masukkan saat kita membuat postingan baru dapat di index semuanya. 

      Tak perlu panjang lebar, jika anda semuanya tertarik. Langsung saja kita terapkan langkah-langkah di bawah ini.

      Cara Agar Semua Label/Breadcrumbs Terindex Google :
      1. Login ke blogger.
      2. Klik Tata Letak
      3. Klik Edit HTML
      4. Download Template Full terlebih dahulu.
      5. Jika sudah di backup, Centang Expand Template Widget.
      6. Masukan kode css untuk breadcrumbs nya, taruh di atas kode ]]></b:skin>
      .breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}


      7. Setelah itu cari kode  
      <b:includable id='main' var='top'> , hapus kode tersebut dan ganti dengan kode berikut :

      <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <!-- breadcrumb for the post page -->
      <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
      <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
      <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
      <b:loop values='data:post.labels' var='label'>
      &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
      </b:loop>
      &#187; <span><data:post.title/></span>
      </div>
      <b:else/>
      <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
      </b:if>
      </b:loop>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <!-- breadcrumb for the label archive page and search pages.. -->
      <div class='breadcrumbs'>
      <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
      </div>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <div class='breadcrumbs'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
      <b:else/>
      <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
      </b:if>
      </div>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:includable>
      <b:includable id='main' var='top'>
      <b:include data='posts' name='breadcrumb'/>

      8. Simpan Template. Selesai.

      Untuk mengecek keberhasilan anda, silahkan cek pada Google Rich Snippets Testing Tool, yaitu menuju link dibawah ini :
      Silahkan masukkan URL salah satu postingan anda, kemudian klik Preview

      Untuk melihat kinerja dari langkah diatas, silahkan anda membuat postingan baru, kasih label anda yang sudah terindex oleh mesin pencari google (Silahkan cek dengan mencopy paste URL label yang ada di blog anda, lalu paste di pencarian google). Setelah anda publish artikelnya, tunggu hingaa artikel tersebut teridex google, dan lihat hasilnya.
      Selamat mencoba Cara Agar Semua Label Terindex Google, Semoga berhasil, Tetap Semangat dan semoga selalu bisa bermanfaat

      Sumber artikel by: http://abdu-green.blogspot.com/

      Monday, 19 November 2012

      Membuat tooltip dengan menggunakan css


      Membuat tooltip dengan menggunakan css

      MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS




      Kali ini saya ingin berbagi pada teman blogger khususnya blogger  pemula yang mungkin masih belum tahu bagaimana membuat tooltip dengan menggunakan css. Saya memilih untuk menggunakan tooltip dengan css ini karena menganggap cukup ringan dari pada dengan menggunakan javascript.
      Untuk membuatnya sobat bisa menggunakan cara di bawah ini:
      • Seperti biasa login ke blog sobat.
      • Pilh tata letak.
      • Klik edit html.
      • Letakkan kode di bawah ini di atas kode ]]</b:skin>hingga posisinya sbb:

        .tooltip {position:relative;}
        .tooltip span {display:none;}
        .tooltip:hover span {
        display:block;
        position:absolute;
        width:200px;
        left:20px;
        top:20px;
        background-color:#006633;
        border:3px solid #0099FF;
        padding:5px;
        font-size:15px;
        color:#000000;
        text-decoration:none;
        font-family:Verdana,arial, helvetica, sans-serif;}

        ]]></b:skin>
      • Kemudian klik simpan.
      CARA MENAMPILKAN KE DALAM POSTINGAN

        <a href="http://vioren-ky.blogspot.com/2012/11/membuat-tooltip-dengan-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>

        Ganti link yang dicetak merah dengan link milik sobat.
        Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.

        Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.

        Cara menulis kodenya seperti di bawah ini:

        background:url("http://i265.photobucket.com/albums/xx141/vioren_bucket/gambar8.jpg")no-repeat bottom;

        Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.

        Selesai sudah semoga bermanfaat...