Cara mengganti tulisan readmore menjadi image

Gampang sekali caranya.Cukup anda cari tulisan Selanjutnya atau readmore.
 Pokoknya cari tulisan tersebut sesuaikan dengan template anda.
Ganti tulisan tersebuat dengan code di bawah,dan ganti text bewarna biru di bawah dengan
image url anda.atau di bawah ini juga tidak masalah.
selamat mancoba.

<img src="http://www.thegreenconnoisseur.com/images/read_more_arrow2.png"></img>

<img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img>

Read More

cara membuat facebook like box

Tips Membuat Floating Facebook Like Box  - Widget melayang Facebook Like Box kali ini lebih simple dan ringan daripada widget-widget melayang lain yang pernah saya coba. Menempatkan widget dengan cara disembunyikan atau widget floating/melayang selain menghemat tempat pada sidebar juga dimaksudkan supaya tidak menghambat kecepatan loading awal blog pada saat dibuka. Floating Facebook Like Box ini saya dapatkan saat melancong ke blog tetangga dari Uruguay (jauh sekalee..!) yang full stylish banget. So mumpung masih fresh mendingan langsung bagi-bagi aja buat sobat blogger yang mungkin kepingin memasang widget melayang Facebook Like Box di blognya.

Cara Membuat Widget Melayang Facebook Like Box

1.     Sebelumnya anda harus sudah mendaftar dan mendapatkan kode Facebook Like Box untuk nanti dipasang pada widget.

2.       Login ke dashboard blogger anda.

3.       Pilih Rancangan > Elemen Laman > Add Gadget (HTML/Javascript).

4.       Copy script widget dibawah ini dan paste pada gadget.

<style type="text/css">

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtTlnQ0ZKoWqn9RxK387bBwbs4idRvZI6e1mXSamt5445kUkLUVRXcRtEpHDZwtzLDdnIqwPJyzx2zv1Q9b0swValqiMp4su1uL0Sw8kk0Mbh7edQi6U2wUzeQiEV5Qx6sKZcgDCdSc-YL/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZrRIFEETO-ny_ao4AoViegsgp27gV7beXIxWY-hJ2PLEXd_m3wE1C5uzjq256EqMNAzt8S3KOXUMqKz_R8ahIZFloUJi2UDhC4iAW65lYzj8t-DFf_48m6l-XddWusPQBPRmP28xABRl/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}

.barcontefacebook{margin:5px 0 0 47px}

</style>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">

<!-- Begin Facebook -->

CONTENT FACEBOOK HERE

<!-- End Facebook -->

</div>

</div>

5.      Ganti tulisan CONTENT FACEBOOK HERE dengan kode Facebook Like Box anda.

6.      Jika pada template anda belum terdapat javascript dari Facebook, maka copy saja javascript dibawah ini dan letakkan tepat diatas kode </head>  pada template supaya widget Facebook Like Box ini bisa berfungsi.

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) {return;}

  js = d.createElement(s); js.id = id;

  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

  fjs.parentNode.insertBefore(js, fjs);

}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

7.     Sesuaikan tinggi dan lebar widget supaya sama dengan ukuran Facebook Like Box yang anda buat sebelumnya melalui Facebook.

8.      Save / Simpan.

Read More

Cara menambah Gadget di atas header

Gadget diatas header bisa difungsikan untuk pemasangan koleksi image atau apa saja yang anda suka, bahkan dapat juga untuk pemasangan iklan, karena tempatnya startegis, terdapat dibagian paling atas yang secara langsung loadingnya paling duluan dan yang pertama dilihat oleh pengunjung blog anda.
Hanya dengan sedikit penambahan kode, blog anda memiliki tempat widget diatas header. Simak cara-caranya :

• Masuk ke Blogger dengan ID anda
• Pilih Rancangan
• Pilih Edit HTML
• Backup dulu templatenya kalau anda takut gagal
• Beri tanda contreng pada kotak disamping Expland Widget Template
• Cari kode yang mirip dengan kode dibawah ini pada template anda
  <div id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
  </b:section>
• Perhatikan yang berwarna kuning. Angka 1 ganti dengan jumlah gadget yang ingin anda tampilkan (disarankan angka 1 jangan diubah) dan kata no anda ganti dengan kata yes . Setelah anda ubah kata-kata tersebut, copy kode dibawah ini dan letakan tepat dibawah kode <div id='header-wrapper'>
  <b:section class='header' id='topheader' preferred='yes'/>
• Setelah digabungkan kodenya menjadi seperti ini :
  
  <div id='header-wrapper'>
  <b:section class='header' id='topheader' preferred='yes'/>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
  <b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
  </b:section>
• Klik tombol Simpan Template
• Lihat pada Elemen Halaman
• Setelah muncul Tambah Gadget diatas header, sekarang cobalah anda tambah widget atau apa saja yang ingin anda tampilkan diatas header
• Selesai
• Selamat mencoba .....semoga bermanfaat.

Read More

Cara membuat banner exchange

Maksud nya apa ya judul postingan diatas??? mungkin begitu, agak asing memang bagi yang masih newbie di dunia netter, 

Kalo kita berkunjung ke blog orang lain atau website, biasanya terdapat script yang terdapat pada text area yang dapat di copy paste pada blog kita agar pada blog kita terdapat widget disertai gambar yang dapat me-Link dengan website tersebut. Itulah banner exchange yang dapat digunakan sebagai media promosi atau iklan. Mau tau cara membuatnya???

Silahkan amati code di bawah ini:

<br /> <a href="Alamat blog kamu" target="_blank"><br /> <img border="0" height="43" src="link banner kamu" title="Blogger Trick" width="250" /></a>

Keterangan tex yang berwarna:

Merah : Alamat Blog kamu

Ungu : Gambar thubnail yang akan ditampilkan.

Copy kode diatas kemudian Login ke blog kamu, Pilih tata letak, kemudian elemen halaman. Klik pada tambah Gadget. Pilih Java script/HTML kemudian paste dan editlah kode diatas sesuai petunjuk dan prosedur. Setelah itu... Tara....... lihat hasilnya. wow, kamu dah berhasil buat banner exchange buat blog kamu. Keren yach.....

Thank for reading bro...

Read More

cara membuat chatbox slider

cara membuat chatbox buka tutup slideshow , untuk demo dan contohnya bisa  dilihat sendiri di samping kanan bagastrickblogger ini. oke langsung saja kita bahas bersama tentang cara membuat chatbox buka tutup slideshow di blogger


1.) Baca basmallah
2.) Buat akun chatbox dulu, bisa menggunakan beberapa jasa chatbox seperti cbox,chatbox,atau jasa chatbox yang dikenal sobat
3.) Setelah itu daftar saja di salah satu jasa tersebut
4.) Setelah mengikuti beberapa langkahnya, sobat akan mendapat kode Chatboxnya, contohnya seperti milik bagastrickblogger :
5.) Setelah itu login ke akun blogger > Rancangan > Edit tata letak > tambah Gadget > Html/Text Javasript
6.) Masukkan kode ini di tempat kosong yang tersedia

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJYRXmsoL14wTRQHHoFGwMDHXJJhUy93H4c3zxd3g4Y4vDf8DC0CXx_ga_RThPr-OB9_M0IlIos_dPjmGDdSjgWuXuhKDV-wgVlz9BJlGLr_BPw29sFU-Qn_LlT0J2z1eQbVoq91iQWNgM/s1600/cbblue-2.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

GANTI KODE INI DENGAN KODE CHATOBOX SOBAT !!!!

<div style="text-align:right">

<a href="javascript:showHideGB()">

[tutup]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

7.) Ganti tulisan ganti tulisan chatbox disini dengan kode chatbox yang didapatkan sobat tadi setelah itu klik Simpan
8.) Lihat hasilnya
Berikut beberapa url gambar varian warna chatbox :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJYRXmsoL14wTRQHHoFGwMDHXJJhUy93H4c3zxd3g4Y4vDf8DC0CXx_ga_RThPr-OB9_M0IlIos_dPjmGDdSjgWuXuhKDV-wgVlz9BJlGLr_BPw29sFU-Qn_LlT0J2z1eQbVoq91iQWNgM/s1600/cbblue-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFZEnQUu64yHmDwGG-ThKkxLxPaEb8a9NOrL4I3mQMXU26fLuxLZJyIePBEy587pZWKOuGTSvou9XfTpHr9eBUCl8iM3mGjek_rnsj7qOM0RGxo_WEs4K6c_SCew-KnuN32hxl0nuYRRn/s1600/cbblue.png%20

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg687G9UdGt70CEfpO8vqMn887OZg1updt1rxwkibVxDklCKzN3MZHsj9ap5gyONf_HDsOTbyLDwX4vsRjX4Lw2JiZULKERUB86R8XNdbTE7gN_Avi-10hP01GoftlclcoDXw0DHfRJP7Ym/s1600/cbgreen.png%20

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwXwF0VbKGjZYcfaaLqzwsxyhKcUw2j_bDdq62HkA4YfgotrmmNiE8-Sm5PF4x_9oTYcCRvCyU1oAlc2_R8Bg90oGS826_BQu8ZBOAENZmhEJX0L2GDyfn9-jNahfm1zuquwLPF4DnF2Aa/s1600/cbyellow.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh52U7mjEcuMEjYzdDqvzHpyW2UAkPqw0sJpOp24OTVKCTsOg8dvenpa-DEld4JBZePN3qpzmzHyVyPceoqOwkd09Khsl5iKOgApJfketxzfeqaVn8u5bvgMAMf9cRpEKLtVecP_1AQ5Nrc/s1600/cbred.png%20

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNzKBlNj9KbWYzvn6wOoWMxw4VpZn0XZnnIUBm3UnQbc90yLMC9zDpCbkoUY1DRSH-lel55O92tqFFeGocU9ql_b017JtBZXcJ3nr9QpzdjpJtJXjASaav6R77XlXlKYc8yulREd_-lS9r/

http://i971.photobucket.com/albums/ae193/Zendrymaulana/Wallpaper%20For%20Template%20Blogger/Bukutamu6.gif

https://lh4.googleusercontent.com/-28NQT1tb3KA/T1dub83RP0I/AAAAAAAABVM/nFXGjaGiZrY/s800/Buku%2520Tamu%2520Biru.png

https://lh4.googleusercontent.com/-zBcQkdEpXkM/T1dub8XRthI/AAAAAAAABU8/rvj9VHOO3ig/s800/Buku%2520Tamu.png

https://lh3.googleusercontent.com/-
Z1fxhlvqeOM/T1ducoHlDLI/AAAAAAAABVE/AFtwHTnN9Hk/s800/buku%2520tamu.gif

https://lh6.googleusercontent.com/-6qlXHYzWTMU/T1duc2xbQhI/AAAAAAAABVI/NE_nP1mMakE/s800/bukutamu.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1qyke1LySMNKwkXVFws9ZYQXyfhMHs-jgiljhgBqt21Zsfz2YrtOo7hmQbdXBbPP9mNIzI9KCmirQRqj8ItJt6nhLMOy-1r1J4LDwahiFKIcs-IthwROVaG4zVf3yn52mAILWcSlrpd_J/s1600/cb2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKj0vHx3DOQIcaadgAk8Lx4k7W6crBO_KoweofCG2Xr4TOUx4-NiPI5U39zJr03NGhwYyLbJhPyMNy4l6wVdSIY9PPxrtzFtRnGSvewAmvC0QwxRKf7ggonNEgqkdBBLJqD6Uc8giVzLD/s1600/cb.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWoFZS3l88md7iaA4zRkjdgi2hFZHqoFBHgw_LSau45TCy3rpjh1nNryDU2zMSBFmoBGLlo7PUs1dFCaSQ18IfVTHUAbRj260DNahngBCTTxxMqdlaaGaYBEniprQGqRwGJzf2YpOcZYqw/s1600/buku+tamu.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7iWP8Ufkz9TZy-AXQ9S4bffUPVsQCbaxjywYL-6HvUimPx4UEiNwuqhB2a5pXTzO5NV9SoQer5-Sia9P4nawJnyAebivHXULlzk-Oy1Bhyih1CYl5MhMkeWRV5MOTD7JEnNhIXoAglfg/s1600/Chatbox.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmmn9DFCtRtiP1m5kXk8d4kEK4bhchg2o15DIv-xnrXUub0S4SmtoRXW73DMuVtGcWjrkC4mAx1RBF00m28SP8cV03HfZXnn5sWbZbRjoFEx4DVWQENC6Fou7RWYQq7mg2j0yeuleYF8E/s1600/2131wkl.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyqCa6GvRl3FtjrshkSMTilclHgcaNJMjll5w9fl7fqHUhViBlWrofKj-tCzD2N-Gl_ppyshT6YPcQEqeGPpBWzxAoHD0MGNwL9UKjJrxTco_e24jCKcpaqm7OFVdXc5W3K3JI7u5SOc/s1600/bukutamu4.png

http://i1220.photobucket.com/albums/dd444/septia_mujizat/blog/ButtonChatbox.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFhdJrHZvv1O2gEv1IRrFUA4aJkNPRXrrIH5o8cZeyXW5xNCm7uu4fjt8dWr91vStyqopFfJcXdrk6CM2xULhG5C8BXdVeRuBc3pysChUSWbuUFJz5t9Dh26Rw5j3kKTDeI0qCr7Squg/s128/guest-book.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3V0RGc3BRHyNzbGSzzkxSSBG_KbCPoQNfo9NcAy4pP9Glb_5sqNrvlXNYsXQQylZ6db9jfbJ3a3ixMPFCw27uRCmiwN5pJZtwHx1roYHxGbwbcEYkq4dMcpNuXQYg9Ef-o_Ld8PvePOo/s1600/bukutamu.png

Read More

Cara Memasang Chatbox, GuestBook, Shoutbox chat Widget

Shoutbox, Tagboard chat widget! atau GuestBook ada banyak cara. Ada yang sangat simpel, ada yang sangat ruwet dan berbelit-belit. Jenis Tagboard atau chat widget untuk blog khususnya blogspot.com sangat banyak jenis chat widget contohnya:

Shoutbox (http://shoutbox.widget.me)
Shoutmix (www.shoutmix.com)
Cbox (www.cbox.ws)
Pladeo (http://www.pladeo.com)
User Plane (http://www.userplane.com)
Gabbly (http://www.gabbly.com)
Chatango (http://www.chatango.com)
Zoho Chat (http://chat.zoho.com)
Para Chat (http://www.parachat.com)
JWChat (http://blog.jwchat.org/jwchat)
99 chat (www.99chats.com)
Meebo (www.meebome.com)
Widgetbox (www.widgetbox.com)
Plugo (http://www.plugoo.com)
Mabber (http://www.mabber.com)
Mibew Web Messenger (http://mibew.org)
iJab (http://www.ijab.im)
AjaxChat for Wordpress (http://wordpress.org/extend/plugins/ajaxchat)
AjaxChat (https://blueimp.net/ajax)
Ajax IM (http://ajaxim.com)
php Free Chat (http://www.phpfreechat.net)

Tujuan pemasangan Chatbox, Shoutbox, atau Tagboard chat widget! atau GuestBook yaitu adalah untuk menambah interaksi antara pemilik blog dengan dan antar pengunjung blog. Semua bisa menuliskan pesan singkat di Chatbox, Shoutbox, atau Tagboard chat widget! atau GuestBook tersebut.

Contohnya ada di samping kanan Blog_Nya Gue dengan title "BUKU TAMU".

Tutorial pemasangan GuestBook, Chatbox, Shoutbox, Tagboard chat widget! dengan menggunakan "ShoutBox"

1. Masuklah ke halaman website shoutbox.widget.me
2. Cpy kode html (pada gambar ditandai warna biru)
   
   
   Ini kode html-nya :

   <!-- Start HTML Code --><iframe title="Shoutbox" WIDTH="160" HEIGHT="400" src="http://shoutbox.widget.me/window.html?uid=a7v6a" frameborder="0" scrolling="auto"></iframe><br><a href="http://shoutbox.widget.me">Shoutbox</a> by <a href="http://ngai.cc">Blogger</a><br><!-- End -->

3. Login ke blog
4. Masuk ke Rancangan
5. Add Gadget pada posisi yang diinginkan
6. Terbuka jendela baru. Pilih "HTML/JavaScript Tambah"
7. Pastekan kode html yang telah dicopi dari shoutbox.widget.me tadi
8. Simpan
9. Selesai
10. Selamat.... kamu telah memiliki Chatbox, Shoutbox, atau Tagboard chat widget! atau GuestBook dan telah mengetahui Cara Memasang Chatbox, Shoutbox, Tagboard chat widget! atau GuestBook tersebut.

Read More

Cara Memasang Tag Permalink di Bawah Postingan

Memasang permalink di setiap postingan sangat bermanfaat untuk menambah internal link dalam postingan, yang tentunya dengan adanya permalink ini akan membuat postingan kita lebih Seo Friendly.

Bagaimana cara memasang tag permalink di psotingan : 

1. Masuk ke akun blogger sobat
2. Kemudian langsung saja menuju ke halaman Edit HTML
3. Cari kode ]]></b:skin>
4. Lalu pastekan code di bawah ini tepat di atas kode  ]]></b:skin>

   .permalink
   {border: 1px solid #EFF0F1;
   padding: 5px;
   background: #ffffff;-moz-border-radius:5px;}
   .ayriypermalink a
   {background:none;}
   img.float-right {margin: 5px 0px 0 10px;}
   img.float-left {margin: 5px 10px 0 0px;}

5. Cari lagi kode <data:post.body/> (mungkin sobat akan menemukan 2 kode tersebut, pilih kode yang kedua)
6. Jika sudah di temukan, ganti kode tersebut dengan kode dibawah ini

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

   <p><data:post.body/></p>

   <div class='permalink'>

   <center><small>Anda sedang membaca artikel <strong><u><data:blog.pageName/></u></strong> dan artikel ini url permalinknya adalah <strong><data:post.url/></strong></small></center><center><small>Semoga artikel <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> ini bisa bermanfaat.</small></center></div>

   <b:else/>

   <p><data:post.body/></p>

   </b:if>

7. Save dan lihat hasilnya.
   

Sekarang tag permalink sobat sudah terpasasng dibawah postingan..

Selamat mencoba...!!!

Read More: http://blognya-gue.blogspot.com/2012/05/cara-memasang-tag-permalink-di-bawah.html#ixzz1yX8ZfUBs

Read More

Cara Membuat Link Bergoyang Ketika Disorot Mouse

Sobat pasti pernah melihat diberbagai blog sahabat yang apabila link tersebut tersentuh kursor maka link tersebut akan bergerak.. Nah….!!!sekarang ini, saya akan memandu anda bagaimana cara membuat nya….gampang ko sob,,,,,


1. Cara ini menggunakan jquery, jadi penggunaan nya sangatlah mudah.  kita langsung aja ke TKP


1. Login ke Blog anda
2. Klik Tab Template
3. Kemudian, klik Edit HTML
4. Centang Expand Template Widget
5. Ok, sekarang sobat cari kode ini </head> ,Copy Kode Dibawah dan Letakkan di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
$(document).ready(function() {
$('a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>

6. Save Template

2. Cara ini menggunakan kode HTML 

1. Login ke Blog anda

2. Klik Tata Letak

3. Add Gadget ,Copy kode di bawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function()  { $('a').hover(function() { $(this).animate({ marginLeft:  '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

 4. Save Widget

Read More