Ingin pasang Widget Google Translate seperti gambar dibawah ini ..?

Cara nya sangat mudah sobat, ada 2 pilihan yaitu untuk Blog yang berbahasa Indonesia dan 1 lagi bahasa Inggris. Ikuti petunjuk dibawah ini jika sobat ingin pasang di Blog sobat.

1. Login ke Blogger.

2. Pilih Rancangan.

3. Edit HTML.

4. Letakan kode dibawah ini diatas kode </body>

[*] Untuk Blog yang Berbahasa Indonesia :

<!-- TranslateClient BEGIN -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script language="javascript">var gtc_stl='http://translateclient.com/js/widget/gtc.css';</script><script type="text/javascript" src="http://translateclient.com/js/widget/gtc.js"></script><script language="javascript">translateclient.srclang="id";translateclient.checkload();gtc_ws=1;</script><div id="gtc_pan"><div id="gtc_t">Just select text on the page and get instant translation from Google Translate!</div><label><input id="gtc_chk" type="checkbox" checked="checked" />Translate to </label><select id="gtc_lang"></select><a id="gtc_w" href=""></a><a id="gtc_d" href="http://translateclient.com">Download Free Translator</a></div>
<!-- TranslateClient END -->

[*] Untuk Blog yang Berbahasa Inggris :

<!-- TranslateClient BEGIN -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script language="javascript">var gtc_stl='http://translateclient.com/js/widget/gtc.css';</script><script type="text/javascript" src="http://translateclient.com/js/widget/gtc.js"></script><script language="javascript">translateclient.srclang="en";translateclient.checkload();gtc_ws=1;</script><div id="gtc_pan"><div id="gtc_t">Select a text on the page and get translation from Google Translate!</div><label><input id="gtc_chk" type="checkbox" checked="checked" />Translate to </label><select id="gtc_lang"></select><br><a id="gtc_w" href=""></a> <a id="gtc_d" href="http://translateclient.com">Free translator</a></div>
<!-- TranslateClient END -->

5. Simpan Template. Selesai selamat mencoba, salam ..?

sumber: http://aryandhani.blogspot.com/2011/04/widget-translate-clien.html

Read More...

CARA MEMBUAT READ MORE (BACA SELENGKAPNYA)0

Postingan kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

2.cari kode html berikut ini : <data:post.body/> atau <p><data:post.body/></p> ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
Summary noimg 430 = tinggi artikel terpenggal tanpa image

Summary img 430 = tinggi artikel terpenggal dengan image

Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll... 
3. klik save template

Read More...

CARA MEMBUAT GADGET MUSIC0

Gadget musik? asik banget yah bisa liat-liat postingan sambil dengerin musik favorit kamu. Untuk mewujudkannya berikut tutornya.
1.buka stafans.com 
2.pilih atau cari lagu yang kamu inginkan.
3.copy embed codenya tuh yang ada dibawah play preview.

contohnya bisa seperti punya saya ini: Now Playing : Now Playing : Greenday - American Idiot - 06. St. Jimmy<br>
<iframe src="http://stafans.com/embed-1327584.html" width=100% height=70 scrolling="no" frameborder=0></iframe>

4.trus log in ke blog kamu.
5.pilih layout trus page element trus add gadget.
6.pilih yang HTML/Java Script.
7.paste code yang tadi ke blog kamu.
8.pilih penempatan gadget.
9.kalo dah pas tinggal simpan dan nikmatin musik di blog kamu.

good luck....

Read More...

VIDEO CARA MEMBUAT BLOG0

Semoga Sukses

Read More...

CARA MEMBUAT MENU MULTI LEVEL DROP DOWN MENU JQUARY0

Berikut langkah-langkah membuat menu multi level drop down menu jquary:
 Login ke akun blogger anda

1.  Tuju ke -> Rancangan --> Edit HTML.
2. Lalu taruh kode script berikut sebelum kode </head>
3.  

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

     4.Lalu Tambahkan Script Berikut dibawah kode script tadi:

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" /> <!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style><![endif]--> <script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

     5.Kemudian tambahkan kode script berikut tepat diatas kode ]]></b:skin>

.jqueryslidemenu{ 
font: bold 12px Verdana; 
background: #414141; 
width: 100%; 
} 
.jqueryslidemenu ul{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 
/*Top level list items*/ 
.jqueryslidemenu ul li{ 
position: relative; 
display: inline; 
float: left; 
} 
/*Top level menu link items style*/ 
.jqueryslidemenu ul li a{ 
display: block; 
background: #414141; /*background of tabs (default state)*/ 
color: white; 
padding: 8px 10px; 
border-right: 1px solid #778; 
color: #2d2b2b; 
text-decoration: none; 
} 
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ 
display: inline-block; 
} 
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ 
color: white; 
} 
.jqueryslidemenu ul li a:hover{ 
background: black; /*tab link background during hover state*/ 
color: white; 
} 
/*1st sub level menu*/ 
.jqueryslidemenu ul li ul{ 
position: absolute; 
left: 0; 
display: block; 
visibility: hidden; 
} 
/*Sub level menu list items (undo style from Top level List Items)*/ 
.jqueryslidemenu ul li ul li{ 
display: list-item; 
float: none; 
} 
/*All subsequent sub menu levels vertical offset after 1st level sub menu */ 
.jqueryslidemenu ul li ul li ul{ 
top: 0; 
} 
/* Sub level menu links style */ 
.jqueryslidemenu ul li ul li a{ 
font: normal 13px Verdana; 
width: 160px; /*width of sub menus*/ 
padding: 5px; 
margin: 0; 
border-top-width: 0; 
border-bottom: 1px solid gray; 
} 
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ 
background: #eff9ff; 
color: black; 
} 
/* ######### CSS classes applied to down and right arrow images  ######### */ 
.downarrowclass{ 
position: absolute; 
top: 12px; 
right: 7px; 
} 
.rightarrowclass{ 
position: absolute; 
top: 6px; 
right: 5px; 
}

    6.Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'> 

<div id="myslidemenu" class="jqueryslidemenu"> 
<ul> 
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li> 
<li><a href="#">Item 2</a></li> 
<li><a href="#">Folder 1</a> 
  <ul> 
  <li><a href="#">Sub Item 1.1</a></li> 
  <li><a href="#">Sub Item 1.2</a></li> 
  <li><a href="#">Sub Item 1.3</a></li> 
  <li><a href="#">Sub Item 1.4</a></li> 
  </ul> 
</li> 
<li><a href="#">Item 3</a></li> 
<li><a href="#">Folder 2</a> 
  <ul> 
  <li><a href="#">Sub Item 2.1</a></li> 
  <li><a href="#">Folder 2.1</a> 
    <ul> 
    <li><a href="#">Sub Item 2.1.1</a></li> 
    <li><a href="#">Sub Item 2.1.2</a></li> 
    <li><a href="#">Folder 3.1.1</a> 
        <ul> 
            <li><a href="#">Sub Item 3.1.1.1</a></li> 
            <li><a href="#">Sub Item 3.1.1.2</a></li> 
            <li><a href="#">Sub Item 3.1.1.3</a></li> 
            <li><a href="#">Sub Item 3.1.1.4</a></li> 
            <li><a href="#">Sub Item 3.1.1.5</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Sub Item 2.1.4</a></li> 
    </ul> 
  </li> 
  </ul> 
</li> 
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li> 
</ul> 
<br style="clear: left" /> 
</div>

Lalu klik save.

Read More...