• Login ke dashbor blog sobat.
• Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
• Copy dan paste code berikut di HTML/Javascript

• Save/Simpan, dan lihat hasilnya.

Cara Membuat Komentar Slide Panel Dengan JQuery

Cara Membuat Komentar Slide Panel Dengan JQuery |  Hay sobat apa kabar kalian semua ? Kali ini Acep-Computer akan berbagi tutorial seputar blog. Tutorial kali ini adalah Cara Membuat Komentar Slide Panel Dengan JQuery. Meskipun tutorial membuat slide panel ini sudah banyak bertebaran di si mbah google, Tapi biarkan saya membagikan tutorial ini kepada sobat yang belum tahu dengan komentar slide panel ini.

Sebelum anda mererapkan di blog anda, alangkah baiknya sobat buka demonya dulu biar lebih paham dengan komentar slide panel. Tinggal buka demonya DISINI. Setelah melihat demonya, pasti anda akan mencoba memasangnya di blog anda. Simak baik - baik tutorial Cara Membuat Komentar Slide Panel Dengan JQuery dibawah ini :

1. Buka blogger
2. Masuk Template => Edit Template
3. Cari kode ini ]]></b:skin> dengan menekan tombol ctrl+f  biar lebih cepat
4. Setelah ketemu, copy kode dibawah ini tepat DIATAS kode ]]></b:skin>

a.openpanel {
  display:block;
  clear:both;
  width:auto;
  padding:0px 0px;
  text-align:center;
  font-weight:bold;
  line-height:32px;
  background-color:#39f;
  color:white;
  text-decoration:none;
  margin:0px 0px;
  -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  position:relative;
}
a.openpanel em {
  width:0px;
  height:0px;
  display:block;
  position:absolute;
  top:15px;
  right:15px;
  border:6px solid transparent;
  border-top-color:white;
}
a.openpanel.active {background-color:#900;}
a.openpanel.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}
div.paneline {
  height:0px;
  border-bottom:4px solid #39b;
}
div.hompiPanel {
  padding:10px 20px 20px;
  -webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  -moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  margin:0px 0px !important;
}

5. Kemudian temukan kode </head> dan copy kode ini tepat DIATAS kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Poskan Komentar",
    closePanelText      = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>

Ingat, kode yang Saya beri garis bawah bewarna aqua adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, hapus kode tersebut !

6. Simpan atau Save Template sobat.

Coba di lihat dulu apakah sudah work 100% atau tidak? Jika tutorial diatas tidak work, silahkan anda berkomentar di bawah ini agar kodenya bisa dengan segera saya perbaiki. Oke cukup sekian saja tutorial Cara Membuat Komentar Slide Panel Dengan JQuery dari saya, semoga tutorial diatas bisa bermanfaat.

Cara Modifikasi Kotak Komentar Dengan Background

Cara Modifikasi Kotak Komentar Dengan Background | Hay sobat apa kabar kalian semua ? Kali ini Acep-Computer akan berbagi tutorial seputar blog. Tutorial kali ini adalah Cara Modifikasi Kotak Komentar Dengan Background. Sebenarnya ada yg tau engga sih sama tutorial kali ini ? Kalo engga ya seep deh, soalnya saya akan memberitahukannya kepada anda.

Komentar ber background juga bisa membuat sang kometator blog anda menjadi senang. Kenapa ? Mungking karena tampilan form komentar yang lebih fresh sehingga komentarnya juga bisa fresh. Dan juga tutorial ini bisa membuat blog sobat tampilannya menjadi lebih manis. Tutorial ini juga sudah saya terpakan di blog saya ini. berikut adalah scrennshootnya :

 Berikut adalah step by step cara memodifikasi kotak komentar dengan background :

1. Buka blogger
2. Masuk ke Template => Edit Template => Centang Template Widget
3. Setelah itu copy kode dibawah ini dan tarus tepat DIATAS kode ]]></b:skin>

/*Komentar Background By www.acep-computer-science.blogspot.com*/
#mbt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZNhwqJzigSlWVe8gI3Dftutrfd4I8r-MmyrL_vO9MNwHyIJwSTCiJ3acv_mkXgSgooroRck2mjG5QwWF8eBadAzqw_ihmApvTQK1M0v5ZDraV6LDr0kGNilkp6GyH625ri6bKv1HgYw5_/s400/11.png) repeat-x;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#2F97FF;
width:560px; height:213px !important;
}
#mbt-form a{
color:#fff;
}

4. Kemudian sobat cari kode <div class='comment-form'>

5. Setelah ketemu, sobat ganti sumua kode tersebut dengan kode ini <div id='mbt-form'>

6. Lalu save template sobat.

Jika anda ingin mengganti gambar sesuai dengan kesukaan anda sendiri, maka anda tinggal mengganti url gambar yang berwarna biru dengan url gambat yang anda ingikan. Untuk mendapatkan backroun yg bagus, sobat bisa mencarinya di backroundlabs.com

Oke cukup sekian tutorial Cara Modifikasi Kotak Komentar Dengan Background dari saya, semoga tutorial diatas bisa bermanfaat untuk kita semua.

EFEK ROLLER PADA TULISAN BLOG

OTMENAMBAH EMOTICON PANDA PADA BLOGSPOT

Sebelum berangkat study banding saya ingin membuat postingan yang berkaitan dengan tutorial blogspot yaitu mengenai emoticon pada blogspot, emoticon merupakan salah satu kelengkapan Blog yang menurut saya penting dan tidak penting, karena menambahkan emoticon pada blogspot hanyalah bertujuan untuk mempercantik blog terutama dalam proses komentar agar terlihat lebih menarik, banyak sekali jenis emoticon yang dapat kita gunakan untuk mempercantik blog kita, dan kali iniDiEza Blog akan sedikit memberikan tutorial blogspot mengenai menambahkan emoticon panda pada blogspot dan untuk contohnya sendiri dapat anda lihat pada bagian kolom komentar DiEza Blog. caranya dapat anda simak dibawah ini :

1. Pastikan anda sudah masuk pada akun blogspot anda
2. Lalu masuk pada menu Rancangan dan pilih Edit HTML
3. Jangan lupa beri tanda centang pada Expand Template Widget,
4. Pemasangan Script : temukan kode </body> dan letakkan kode berikut tepat diatas kode </body>

5. Peletakan emoticon panda : terdapat 2 cara peletakan, cukup gunakan salah satu cara saja yang menurut anda lebih  mudah.

Cara pertama : silahkan anda cari kode <p class='comment-footer'> jika anda menemukan 3 code seperti diatas silahkan pilih pada kode <p class='comment-footer'> yang ke-3 dan letakkan Code Emoticon tepat dibawahnya

Cara Ke-2: Cari kode <b:include data='post' name='comment-form'/> dan letakkanCode Emoticon tepat diatasnya 

Code Emoticon:

6. Setelah terpasang lakukan Pratinjau untuk jaga-jaga, jika tidak ada kesalahan silahkan simpan template anda. selamat mencoba!!!!!!!!!!!!!!!!

MEMPERCANTIK BLOG DENGAN ANIMASI FLASH

1. Klik alamat http://www.clocklink.com/
2. Kemudian pilih tab Gallery atau klik aja disini http://www.clocklink.com/gallery.php
3. Pilih Gallery sesuai selera atau tema blog, misalnya sobat memilih animal lalu klik link "animal" tersebut
4. Pilih gambar yang ingin sobat gunakan, lalu klik "view html" dibawah gambar jam.
5. Kemudian akan keluar halaman box lisensi dari layanan ClockLink, pilih aja tombol "Accept"
6. Pada halamat box selanjutnya kalian dapat memilih salah satu code, sebaiknya pilih kodeyang atas.
7. Copy atau Simpan kode yang telah dipilih untuk sementara waktu
8. Lalu kembali masuk kehalaman blogger, pilih Elemen halaman -> Tambahkan sebuah Elemen Halaman -> pilih HTML/JavaScript -> lalu Copy/Paste code tersebut, dan jangan lupa disimpan
9. Selesai :) dan lihat hasilnya.

promosi web lewat yahoo

Memasang kamus dan translator pada blogger

Untuk memasang translator, kita bisa menambahkan gadget HTML/Javascript pada blogger kita. Uuntuk kode javascriptnya kita bisa dapatkan darihttp://translate.google.com/translate_tools?hl=id

Untuk blog yang menggunakan lebih dari satu bahasa kita bisa menggunakan pilihan  untuk multy language/lebih dari satu bahasa yang terdapat pada menu advance

Sedangkan untuk menambahkan kamus, kita bisa menggunakan fasilitas yang telah tersedia pada blogspot, yaitu dengan menambahkan gadget pada blogger kita. Caranya : kita masuk pada edit layout blogger kita, kemudian kita tambahkan gadget google translate. Jika kita tidak menemukan gadget tersebut pada basic gadget, kita bisa search dengan kata kunci “google translate”.

Kelebihan dari kamus online dari google ini, selain fasilitas terjemahan teks secara online, kita juga bisa menggunakannya untuk menerjemahkan situs kita dengan memasukkan alamat blog/situs kita ke dalam kolom teks yang tersedia. Nah, dengan menggunakan kamus ini kita dapat juga menggunakan fasilitas translater blognya.

Selamat mencoba ^^

Bagaimana menampilkan sebagian postingan dengan “baca selengkapnya..” di blogspot

<MainOrArchivePage> 
  span.selengkapnya {display:none;}
  </MainOrArchivePage>
<ItemPage>
  span.selengkapnya {display:inline;} 
  </ItemPage>

<mainorarchivepage><br />
<a href="<$BlogItemPermalinkURL$>">baca selengkapnya..</a>
</mainorarchivepage>

cara membuat share box di blogspot- blogger blog anda

1. official tweet button dengan counter 
2. oficial Google Buzz dengan counter 
3. official Stumbleupon button dengan counter 
4. Blog This! 
5. Email this! 
6. Print this! 
7. Comment count link 
8. dan terakhir Facebook like button.

• Log in pada blogger anda 
• pilih Rancangan --> Edit HTML 
• Klik "Expand Widget Templates" 
• Cari kode berikut <div class='post-header-line-1'/>
• Copy dan pasang kode share box tepat dibawah kode <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == "item"'>


<style type='text/css'>
.multisharebox {
 background: none repeat scroll 0 0 #EFEFEF;
 float: right;
 margin: 5px 0px 3px 10px;
 padding: 0 5px 0;
 text-shadow: 0 1px 0 #FFFFFF;
 width: 260px;
 border:4px solid #d8dfea;
}
.fb-like-boxtop {
 background: none repeat scroll 0 0 #EDEFF4;
 border: 1px solid #D8DFEA;
 color: #000000;
 float: right;
 font-size: 11px;
 margin: 0 0;
 padding: 5px 10px;
 text-align: left;
 width: 230px;
}
.fb-like-boxtop a {
 color: #000000;
 text-decoration:none;
}
.fb-like-boxtop a:hover {
 color: #000000;
 text-decoration:underline;
}
.fb-like-box {
 background: none repeat scroll 0 0 #EDEFF4;
 border: 1px solid #D8DFEA;
 color: #000000;
 float: right;
 font-size: 11px;
 height: 60px;
 margin: 5px 0;
 overflow: hidden;
 padding: 5px 10px;
 text-align: left;
 width: 230px;
}
</style>


<!-- Perfect Share Box : Created by www.bloggertipandtrick.net  -->
<div class='multisharebox'>
<table><tr>
<td><table><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if></td>
<td><script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/></td>
<td><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' rel='nofollow' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td>
<td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
</tr></table></td>
</tr><tr>
<td><div class='fb-like-boxtop'><a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>BlogThis!</a> | <a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>Email This!</a> | <a href='javascript:window.print();'>Print This!</a> | <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></div></td>
</tr><tr>
<td><div class='fb-like-box'>
Do you like this post?
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=230&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/>
</div></td>
</tr></table>
</div>
<!-- Perfect Share Box : Created by www.bloggertipandtrick.net  -->


</b:if>