Sabtu, 21 April 2012

Memasang Tombol Share Melayang - Floating Share Button



Memasang Tombol Share Melayang - Floating Share Button. Tombol share melayang sebenarnya tidak beda dengan tombol share lainnya, yaitu berfungsi  untuk membagi/share konten blog ke berbagai jejaring sosial yang ada di internet. Bedanya, tombol yang satu ini posisinya melayang di blog kita, jadi walau pengunjung melakukan scrolling, tombol share tersebut akan tetap kelihatan di samping blog kita, sebagai contohnya, silahkan lihat di sebelah kiri. Tentu dengan posisinya yang melayang itu, kesempatan untuk diklik oleh para pengunjung dengan tujuan sharing akan semakin besar. Dalam Tombol share tersebut mencakup tiga layanan, yaitu: Google plus, facebook, sama twitter/retwit.

Bagi sobat Blogger yang tertarik untuk menampilkannya ke dalam blog sobat silahkan gunakan kode berikut, caranya:
1. login ke blogger
2. Pilih Rancangan
3. Lalu "add gadget"
4. Pilih HTML/Javascript
5. isikan dengan kode berikut di dalamnya
<!-- floating page sharers Start-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

<div id='pageshare' title="Share to Your Friends">
<div style="clear: both;font-size: 16px;text-align:center;">
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<!-- floating page sharers End --></div>
6. Klik simpan

Facebook Chat's Pics New Codes.

Here is the Facebook Chat's Pics New Codes.Just Type The Below Codes Into Your Facebook Chat Box And See The Magic.
It easy to show reaction to your friend while chatting easily, Just use Chat Pic instead of typing your reaction in detail and save your precious time.The Thumbnail is given in the below screen shoot and codes is given below separately.




                              [[164413893600463]] Or [[MeGustaMeme]]
                         [[218595638164996]] Or [[149333368464171]]
                                           [[189637151067601]]
                                           [[129627277060203]]
                                           [[227644903931785]]
                                           [[100002752520227]]
                                           [[105387672833401]]
                                           [[100002727365206]]
                                           [[224812970902314]]
                                          [[ForeverAloneComics]]
                                           [[116616581692281]]
                                           [[145768898802324]]
                                           [[168456309878025]]
                                           [[106043532814443]]
                                           [[214457085240151]]
                                           [[160723207280093]]

Emotion Chat Facebook

Tentu kebanyakan orang sudah mengenal facebook. Dan sering juga chat di facebook. Tetapi terasa kurang jika chat tidak menggunakan Emotion. Berikut Emotion dalam facebook :

Rabu, 18 April 2012

Menampilkan Efek Bintang Pada Link menggunakan CSS


Tampilan blog yang menarik bakal jadi daya tarik tersendiri buat pengujung blog kita. Apa lagi kalau blog kita penuh dengan sesuatu yang unik. Salah satu yang unik adalah membuat link pada blog kita menampilkan efek bintang berkedip ketika pointer mouse melewati atau berada di atas link tersebut. Kita hanya perlu memodifikasi CSS blog kita untuk menerapkannya. Berikut caranya:
1. Log in ke akun blogger jagoan
2. Masuk ke Racangan dan kemudian klik edit HTML

 3. Cari kode a:hover {
4. Sisipkan kode berikut
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq02RooCg6A_eD8hmn0G9t-srcGqh0GmO5P2xAckEOeThKnPv_n9kG4eKj8jInu1kjerHQjdVKkFax2EBpPd40Jc-sjkTQRum36Jzt305uIctot5c9BTlaCcWX8zZVdBVoAEiqz7QSZgM/s1600/stars.gif);
5. Sehingga susunan kode CSSnya menjadi seperti berikut:
a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq02RooCg6A_eD8hmn0G9t-srcGqh0GmO5P2xAckEOeThKnPv_n9kG4eKj8jInu1kjerHQjdVKkFax2EBpPd40Jc-sjkTQRum36Jzt305uIctot5c9BTlaCcWX8zZVdBVoAEiqz7QSZgM/s1600/stars.gif);}
 6. Save template, dan lihatlah hasilnya…
Menarik bukan? tampillah blog kita unik dari pada yang lain. Live for sharing. . .

Sumber: Menampilkan Efek Bintang Pada Link menggunakan CSS | jagoBlog.com

Cursor Dengan Efek Bintang Berjatuhan

Kali ini saya akan memberikan kurson dengan efek bintang berjatuhan setiap cursor yang anda gerakkan. Ini akan menambah cantik blog anda.

Nach .. anda pingin seperti itu ..? cursor dengan efek bintang berjatuhan,..?Ikuti saja toturial dibawah ini....
berikut caranya :

1. Login ke Blogger dan masuk ke Dasbor
2. Klik Rancangan/Tata Letak
3. Klik Elemen Laman
4. Klik Tambah Gadget dan pilih HTML/JavaScrit
5. Kemudian Copy Paste Script berikut kedalamnya :

     <script src="http://h1.ripway.com/imtikhan/red_star.js" type="text/javascript"></script>
    <script src="http://h1.ripway.com/imtikhan/yellow_star.js" type="text/javascript"></script>
    <script src="http://h1.ripway.com/imtikhan/green_star.js" type="text/javascript"></script>
    <script src="http://h1.ripway.com/imtikhan/blue_star.js" type="text/javascript"></script>
    <script src="http://h1.ripway.com/imtikhan/black_star.js" type="text/javascript"></script>
    <script src="http://h1.ripway.com/imtikhan/white_star.js" type="text/javascript"></script>



Apabila mengalamai kegagalan silahkan anda ganti dengan kode dibawah ini :


    <script src="http://imtikhan.googlecode.com/files/red_star.js" type="text/javascript"></script>
   <script src="http://imtikhan.googlecode.com/files/yellow_star.js" type="text/javascript"></script>
    <script src="http://imtikhan.googlecode.com/files/green_star.js" type="text/javascript"></script>
    <script src="http://imtikhan.googlecode.com/files/blue_star.js" type="text/javascript"></script>
    <script src="http://imtikhan.googlecode.com/files/black_star.js" type="text/javascript"></script>
    <script src="http://imtikhan.googlecode.com/files/white_star.js" type="text/javascript"></script>



Smoga berhasil... salam blogger.

Minggu, 15 April 2012

Cara memasang Music Player dari Reverbnation

Langsung aja yaa........

1. Masuk ke alamat http://www.reverbnation.com lalu klik JOIN NOW yg ada di pojok kanan atas.
2. Kemudian isi semua kolom, kecuali Zip/post code tidak diisipun tak masalah. setelah semua diisi tinggal klik SIGN UP. (Untuk password usahakan jgn sama dgn password email)
3. Setelah proses yg tadi, sekarang tinggal proses proses ferivikasi akun, Klik RESEND OR CHAGE EMAIL
4. Kemudia klik “RESND EMAIL”
5. Setelah proses selesai, beralihlah terlebih dahulu ke Email anda. masuk ke alamat email anda. lihat kotak masuk, dan pastikan ada pesan dari Reverbnation. lalu klik pesannya.
6. Kemudian klik Link yg seperti di bawah ini, link itu adalah Verifikasi akun reverbnation.
7. Setelah anda mengklik Linknya, anda akan kembali masuk ke halaman Reverbnation, silahkan upload Foto untuk foto profil AkunREVERBNATION anda.
8.Bisa diberi judul misalnya "My Favorite Band", atau "My Music Player", atau terserah apa aja. tapi bisa juga dikosongkan.
9.Pastekan CODE tadi dibawah kotak judul/di kotak Konten.
10.Klik Simpan. Selesai

SELAMAT MENCOBA, SEMOGA BERMANFAAT…

Replace Page List Menu Gadget with a Link List

Template Hacks


The Default Blogger Templates(which can be customized using the Designer) are all made to use the “Blog Pages” as your Blog’s Top Navigation Menu. This is done using a Page List Gadget. But , you might want to setup your own menu with Custom Links. In that  case, you can replace the Page List Gadget with a  Link List. This tutorial guides you on how you can replace the Page List with a Link List without loosing the Menu Styling(and the highlighted active links)..

How do i add non-page links to my Menu


This is a frequently asked question on the Blogger Help Forum. The solution is simple, if you want to display anything other than page links on your Menu, then you will have to use a Link List Gadget instead of using a Page List. If you are using one of the Default Blogger Templates, and if you have added a Page List Gadget below the header, you will be using "Page" links as the Navigation Menu. To change this to a Link list, follow these simple steps.
1. Login to your Blogger Account and navigate to the Design > Edit HTML tab. Do NOTcheck the “Expand Widget Templates” Option.
2. Now look for(Ctrl + F)

<b:widget id='PageList

and you will find some line  like

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>

3. Replace this line by the following Code

<b:widget id='LinkList123' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content PageList'>
   <ul>
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <li class='selected'>
     <a expr:href='data:blog.homepageUrl'>Home</a>
     </li>
     <b:else/>
     <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
     </b:if>
     <b:loop values='data:links' var='link'>
       <b:if cond='data:blog.url == data:link.target'>
       <li class='selected'>
       <a expr:href='data:link.target'><data:link.name/></a>
       </li>
       <b:else/>
       <li><a expr:href='data:link.target'><data:link.name/></a>
       </li>
       </b:if>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Save the Template.
5. Now you can manually add links to the Menu by using the Quick Edit Wrench Button .

The Styling of the Gadget will be preserved and the Active links will be highlighted.