Membuat Label Bergoyang

Postingan kali ini adalah membuat label/kategori blogspot bergoyang pastinya sobat sudah tahu maksudnya seperti goyang inul tahu tidak ini dia screenshotnya :

Bagaimana sobat keren bukan sudah penasaran cara membuatnya baiklah saya beritahu :

• login ke blogger
• masuk ke rancangan => edit html
• cari kode </head> letakkan kode berikut diatas kode tadi

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

• kemudian letakkan kode berikut diatas kode </head>

<script type='text/javascript'>$(document).ready(function() {$(&#39;#Label1 li&#39;).hover(function() { //mouse in$(this).animate({ marginLeft: &#39;12px&#39; }, 400);}, function() { //mouse out$(this).animate({ marginLeft: 0 }, 400);});});</script><!-- end LinkNudging -->

• kemudian save template 

Read more

Membuat Background Pada Judul Sidebar

Posting kali ini adalah tentang membuat background pada judul sidebar pada template bawaan blogger tampilan judul sidebar masih kurang indah jadi kita akan mengganti sesuai kemauan kita sebenarnya cara ini sangat mudah dipahami baiklah langsung saja

• login ke blogger
• rancangan => edit html
• cari kode sidebar-wrapper h2 atau .sidebar h2 
• diarea kode tersebut terdapat deretan kurang lebihnya seperti berikut

sidebar h2 {
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;

repeat-x top left;
}

Ket : kode yang berwarna biru adalah warna huruf judul sidebar

        kode yang berwarna pink adalah ukuran huruf

        kode yang berwarna merah adalah posisi judul sidebar bisa sobat ganti dengan center = tengah, right =                 kanan

        

Bila sobat ingin menambahkan background dengan warna ini kodenya : background:#2200CC kode yang berwarna biru adalah warna background, bila sobat ingin memberi gambar ini kodenya : background:url('URL gambar') kode yang berwarna biru adalah url gambar anda kemudian simpan dan lihat hasilnya selamat mencoba

Read more

Memasang Share Button Keren

Kali ini saya akan posting tentang memasang share button  keren ini berfungsi untuk mengirim ke facebook, twitter dan masih banyak sosial network lainnya. Cara memasangnya tidak rumit hanya saja paham dengan tulisan. Berikut ini caranya :

• Login ke blogger
• masuk ke rancangan => edit html => centang expand template widget 
• cari kode <data:post.body/> kemudian copas kode berikut letakkan dibawah kode yang berwarna merah

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script>
<!-- AddThis Button END -->

• kemudian save template bila penasaran dengan tombol share ini screenshotnya :

Bagaimana keren nggak sobat semoga artikel ini bermanfaat

Read more

Membuat Sidebar Kiri Dan Kanan

Kali ini saya akan posting tentang membuat sidebar kiri dan kanan jika masih ada yang bingung tentang sidebar kiri dan kanan ini dia screenshotnya :

sudah tidak bingung kan mari saya beritahu caranya :

• masuk ke blogger.com dengan akun anda
• pilih rancangan => edit HTML
• cari kode ]]></b:skin> letakkan kode dibawah ini diatas kode tadi

#sidebar-wrapper2 {
  width: 200px;
  float: center;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

.sidebar2 {
  color: #ffffff;
  line-height: 1.5em;
 }

.sidebar2 ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar2 li {
  margin:0;
  padding-top:0;
  padding-right:0;
  padding-bottom:.25em;
  padding-left:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

.sidebar2 .widget {
  border-bottom:1px dotted #cccccc;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

• setelah itu masukkan kode berikut diatas kode <div id='main-wrapper'>

<b:section class='sidebar2' id='sidebar2' preferred='yes'>

</b:section>
    </div>

• jika sudah save template dan lihat hasilnya

Read more

Cara Membuat Emoticon Pada Komentar Punya Vikrymadz

Nih ane punya tips blogging lagi, yaitu Cara Memasang Emotion Pada Kotak Komentar.

Tips ini tentunya akan membuat blog sobat menjadi lebih seru, Komentator pun menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon).

Nih langsung aja ane share Cara Memasang Emotion Pada Kotak Komentar.

1. login blog
2. rancangan --> Edit HTML (centang pada expand widget template)
3. lalu masukkan kode dibawah ini diatas kode </body>

<script src='http://vikrymadz.googlecode.com/files/smiley.js' type='text/javascript'></script>

4. lalu cari kode yang seperti ini

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. nah lalu taruh kode dibawah ini tepat dibawah kode  <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b>

 6. Simpan.

Lihat hasilnya dengan cara membuka salah satu artikel sobat lalu pada kotak komentar akan muncul emotion"nya..... Nah Klo Tidak Kluar????? Komentar dulu ntar ane bantu... hihihihihihihi

Good luck....

Sumber : http://vikrymadz.blogspot.com/2011/04/cara-memasang-emotion-pada-kotak.html

Read more