Minecraft Is My Mine: Tutorial Blog

Showing posts with label Tutorial Blog. Show all posts

Tuesday, January 17, 2012

Cara Membuat Text dan Link Otomatis Saat Artikel Di Copy Paste Di Blogger

Salam Blogger,saat ini saya sekarang akan share tentang membuat link otomatis saat di copas. Manfaat dari membuat link otomatis ini adalah jika saat ada orang lain yang ingin mengcopy paste artikel kita tanpa ada izin dari admin, link tersebut akan muncul di bawah postingan yang di copy dengan sendirinya. Cara ini sedikit membutuhkan bantuan kepada sebuah website yang bernama tynt yang bisa Anda kunjungi disini. Nah, sekarang dari pada berlama-lama disini dan tidak ada gunannya langsung saja kita belajar membuat link otomatis saat artikel di copy paste di blogger, ikuti langkah-langkah di bawah ini.

shared by: http://x-bloodrune.blogspot.com

Cara membuat link otomatis saat artikel di copy paste di blogger

Part 1

1. Kunjungi websitenya disini

2. Klik " Start Here. It's Free "

3. Masukkan E-mail, Domain, dan Password Anda

4. Jangan lupa untuk mencentang " I agree to the Usage and Privacy Agreements "

5. Kemudian klik Next, sampai menemukan sebuah kode HTML

6. Simpan kode HTML tersebut sementara

Part 2

1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Taruh kode HTML tadi dibawah kode <head>

6. Simpan jika sudah selesai

shared by: http://x-bloodrune.blogspot.com

Catatan :

● Anda bisa mengatur link data yang ingin di tampilkan jika sudah selesai

● Kode HTML dibawah ini adalah milik http://x-bloodrune.blogspot.com

<script type="text/javascript">
if(document.location.protocol=='http:'){
var Tynt=Tynt||[];Tynt.push('aq4v42qoCr4zS3acwqm_6r');Tynt.i={"ap":"<--Sumber:","as":"-->","st":true,"t":true};
(function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>

Wednesday, December 21, 2011

Membuat Tampilan Dynamic Blogger

Sebenarnya sudah agak lama blogger/blogspot meluncurkan feature terbarunya yaitu Blogger Dynamic View atau tampilan dinamis blogger ini. Kalau tidak salah diluncurkan sekitar bulan September yang lalu, namun masih banyak juga blogger yang belum tau dengan feature dynamic view dari Blogger ini. Kelebihan feature dynamic view ini adalah halaman blog ditampilkan dalam 7 modus pilihan tampilan dengan navigasi serta appearance yang sangat baik. Sehingga akan memberikan nuansa lain buat pengunjung dan anda sendiri tentunya bisa melihat tampilan blog dalam format yang berbeda dan lebih fresh. Untuk melihat demo tampilan dynamic view sobat dapat mengklik button yang saya buat di pojok kiri atas halaman blog ini atau dengan mengklik link dibawah gambar.

Cara Mengaktifkan Feature Dynamic View di Blogspot :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Edit HTML, centang Expand template widget.

3. Copy script dibawah ini dan letakkan tepat diatas kode </body> pada template.

<a href='/view' style='display:scroll;position:fixed;top:30px;left:10px;' title='Show dynamic views..!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMA4uwJooJFcjqBrxqqNNp1WfmbcgA6tLkpSYBBX-H4ijpQ5cwxQgIuxj-ILySdIxQz_mtvjDMij-nxIZ9hf9YddYio5Kuj3kM0X4JasKcMA-nyttldbWHscTG5hmwyCElCfCzLx_DPCM/s1600/Blogger%252Bicon%252Bdynamic%252Bview.jpg'/></a>

4. Untuk posisi kiri, kanan, atas dan bawah dapat anda rubah sesuai keinginan, begitu juga dengan jarak margin serta URL button. Sobat dapat mengupload button sendiri yang lebih keren dan mengganti URL yang ada pada script diatas.

5. Save / Simpan template anda dan lihatlah hasilnya.

Cara Mengubah Homepage Menjadi Tampilan Dynamic View : (NB: Kalo mau lho ya….!! )

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Edit HTML, centang Expand template widget.

3. Copy script dibawah ini dan letakkan tepat dibawah kode <head> pada template.

<meta content='1; url=http://url-blog-anda.blogspot.com/view' http-equiv='refresh'/>

4. Save / Simpan template anda dan lihatlah hasilnya.

5. Anda juga dapat langsung menentukan pilihan tampilan Homepage blog anda dengan memasukkan salah satu dari 7 modus tampilan dynamic view. Misalnya http://url-blog-anda.blogspot.com/view/Mosaic. Jadi saat ada orang lain yang mengklik link homepage blog sobat maka secara otomatis akan di-redirect ke URL tampilan dynamic view blog anda. Yang perlu dipahami adalah dalam tampilan dynamic view maka semua widget dan pernak pernik blog sobat tidak akan bisa terlihat. Jadi dynamic view sebenarnya hanyalah alternative tampilan saja.

Bagaimana sobat, tertarik untuk membuat tampilan dynamic view di blog anda ? Silahkan Dicoba..

Tuesday, December 20, 2011

Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box

Inilah persembahan 3 in 1 floating widget yang menurut saya merupakan salah satu widget blogger terbaik di penghujung tahun 2011 ini. Demo penerapan widget melayang (floating widget) ini bisa sobat lihat di blognya Irfan(Share With Irfan) ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like ini akan kita bedah bersama dalam tips blogging kali ini.

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :

1. Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

2. Copy script master widget dibawah ini dan paste pada gadget.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1v4l9Xfajw-uwTV3wtMxvtpirczOtm4lkz174XhoR1o2-cBZ1gNWxJ62uN2wyJTeetnpnVwwIB_4LwJRe79S8dWQaBFbQtZFB0CZNZitipGMOz96xMDuJnhJHSZgjyx1ixOF4iYXUoLP/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH3lQSKnma322g6CiEHKoiS6jRZgByPnVr5CV-PHF0oc2Ww0ELixXIWI62nCIcHJRKGZRDFISQTawXvq3O5jBAuFEBC8BIh9bO1gfxIWRxmlk8qV-muuquSNralTxRXJXf8wxchszJ0pW/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlHJyeEKYJQORWFgRSRtInIuhJVskpV1bovHbJfgR5xh8oU4Z1YhZ3DCmoPdMrMhropfW_JaJiDFe-jsmihRCiwYCRKgxF650fTYCMTAw2wQ9tv636AAZdKDsw4R5WpqVV8v28E2_ACbO0/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQlSfjAU8NKGuq5EMH0Bi3gXWL4q1sQ-juPYeaTyGtYQ4eKKemdF8EQmbUXO3w48uePIvSfbPAdi2NTcJh7kWp0qR4vlcWThey4-iFa_GzAa01nxw72uzKsj7fXj0yZIeB02VE0_EO2L8/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqusQmXdCNRz-GI4PpdoRLYX0StTAgndvIEMjqB5nyPJCoqAeCWM_lKrl3dq6fcK40zHe6MB20MH-fWrgghwOSZm29toEYvbiQ0eB7FN_p82Gpz7ZDJ_iKUukD-bhyf8a6CDLwman4AXc/');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/AVvXsEifx_4jnWY1YLhgcmV0wAJSwucCYGPxLk78tqDgXG9HEduSA8Vixjn3GpQGgz2YDkDhzxH6wuU5zPoiZjm0S_fFBqzuyFaEobLAq-TA9C4RslKkNFNw9oqJQLrcHaOHufn7LwrL13g6F8ot/');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="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">

CONTENT BLOGGER HERE

</div>
</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">

CONTENT TWITTER HERE

</div>
</div>

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

CONTENT FACEBOOK HERE

</div>
</div>

3. Kustomisasi widget :

Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.

Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.

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

4. Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :

<style type="text/css">
.barrightblogger{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1v4l9Xfajw-uwTV3wtMxvtpirczOtm4lkz174XhoR1o2-cBZ1gNWxJ62uN2wyJTeetnpnVwwIB_4LwJRe79S8dWQaBFbQtZFB0CZNZitipGMOz96xMDuJnhJHSZgjyx1ixOF4iYXUoLP/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH3lQSKnma322g6CiEHKoiS6jRZgByPnVr5CV-PHF0oc2Ww0ELixXIWI62nCIcHJRKGZRDFISQTawXvq3O5jBAuFEBC8BIh9bO1gfxIWRxmlk8qV-muuquSNralTxRXJXf8wxchszJ0pW/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlHJyeEKYJQORWFgRSRtInIuhJVskpV1bovHbJfgR5xh8oU4Z1YhZ3DCmoPdMrMhropfW_JaJiDFe-jsmihRCiwYCRKgxF650fTYCMTAw2wQ9tv636AAZdKDsw4R5WpqVV8v28E2_ACbO0/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQlSfjAU8NKGuq5EMH0Bi3gXWL4q1sQ-juPYeaTyGtYQ4eKKemdF8EQmbUXO3w48uePIvSfbPAdi2NTcJh7kWp0qR4vlcWThey4-iFa_GzAa01nxw72uzKsj7fXj0yZIeB02VE0_EO2L8/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqusQmXdCNRz-GI4PpdoRLYX0StTAgndvIEMjqB5nyPJCoqAeCWM_lKrl3dq6fcK40zHe6MB20MH-fWrgghwOSZm29toEYvbiQ0eB7FN_p82Gpz7ZDJ_iKUukD-bhyf8a6CDLwman4AXc/');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/AVvXsEifx_4jnWY1YLhgcmV0wAJSwucCYGPxLk78tqDgXG9HEduSA8Vixjn3GpQGgz2YDkDhzxH6wuU5zPoiZjm0S_fFBqzuyFaEobLAq-TA9C4RslKkNFNw9oqJQLrcHaOHufn7LwrL13g6F8ot/');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="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">


<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id="div-5280101236238054965" style="width:225px;border:1px solid #cccccc;"></div>

<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#ff9900';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-5280101236238054965',
   site: '13497557564014853740&#039; },
skin);
</script>

</div>
</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 2,
interval: 30000,
width: 220,
height: 220,
theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#333333',
      color: '#f3f5f0',
      links: '#eb9f07'
    }
},
features: {
    scrollbar: true,
    loop: false,
    live: false,
    behavior: 'all'
}
}).render().setUser('@yogabloodrune').start();
</script>

</div>
</div>

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

<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/XBloodRune&width=24
0&colorscheme=light&connections=15&stream=false&header=false&height=320" style="border: none; height: 320px;
overflow: hidden; width: 240px;background: #fff;"></iframe>

</div>
</div>

5. Kalau mau gampang sobat tinggal mengganti ID akun Google Friend Connect, Twitter dan Facebook Like milik saya yang sudah saya tandai dengan tulisan warna merah dengan ID atau kode akun milik anda.

6. Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.

Buat yang masih kesulitan untuk mengetahui kode ID Google Friend Connect (GFC) berikut ini tutorialnya :

1. Login ke Google Friend Connect menggunakan akun blogger/gmail anda.

2. Klik nama blog anda pada sidebar kiri dan pilih Add the member gadget.

3. Anda akan dibawa ke halaman kustomisasi gadget seperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris follower yang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalaman ini.

4. Jika kustomisasi sudah selesai, klik tulisan Generate code pada langkah ke-3Create the HTML code, maka kode HTML gadget follower / Google Friend Connect milik anda sudah selesai dan siap dicopy atau disimpan di notepad.

Untuk pengaturan widget update status Twitter silahkan meluncur ke halaman http://twitter.com/about/resources/widgets,sedangkan untuk Facebook Like Boxdapat sobat membuatnya dihalaman ini http://www.facebook.com/pages/create.php.Mohon maaf kalau saya tidak bisa menuliskan secara lengkap tutorial ketiganya berhubung tangan ane sudah pegel-pegel ngetiknya he he. Selamat mencoba sendiri Membuat widget melayang Google Friend Connect, Twitter dan Facebook Like Box ini, jangan cepat menyerah kalau ternyata sobat gagal memasang dan melakukan pengaturan pada widget
ini.. Selamat menyongsong Tahun Baru 2012 sahabat..

SUMBER

Sunday, December 11, 2011

Membuat/memasang Kotak Admin Dibawah Postingan

Banyak cara untuk membuat tampilan blog menjadi lebih baik dan komunikatif. Salah satunya adalah dengan membuat/memasang kotak admin dibawah postingan yang berisikan keterangan dari Penulis/Author blog tersebut tentang artikel yang ditulisnya. Ulasan yang dibuat di kotak keterangan dari admin (penulis/author) ini terserah pada kreasi masing-masing. Sobat blogger bisa juga menuliskan kata-kata lucu didalamnya. Yang jelas untuk link nama penulis/author, judul posting dan tanggal publish postingan sudah saya sertakan dalam script widget kotak admin ini, sehingga sobat tidak perlu lagi mengisikan linknya secara manual. Sobat dapat melihat langsung contoh kotak admin (about author box) yang saya pasang dibawah postingan blog ini sebagai demo-nya.

Cara Membuat Kotak Admin Di Blogspot :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan >> Edit HTML, centang Expand template widget.

3. Cari kode <div class='post-footer'> pada template.

4. Copy script kotak admin dibawah ini dan paste tepat di atas kode <div class='post-footer'>.

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN86A5_gdd0R01h082uymmLCRKeFbxBPK4HW1RsJAfj649GPIEXh1QoR5LuimFfReg4gl_tt4KFjS2hlT1DMRh_yfSDOmXqhm_1i95yVujCSg8EiD3i3ja7HaFtIk33lzV7idfg4uJ_74/s220/AVATAR+KU-128.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

5. Kemudian cari lagi kode ]]></b:skin> pada template sobat.

6. Copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode<data:post.body/>.

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

7. Silahkan ganti link URL gambar profil yang berwarna merah dengan link gambar profil sobat. Jika sobat ingin menuliskan dengan kata-kata ulasan yang lain, ganti/edit dulu kata-kata ulasannya di notepad.

8. Untuk jenis font, warna background dan border juga dapat sobat ganti/edit sesuai keinginan.

9. Preview dulu hasil kotak admin yang dibuat. Jika editing sudah dirasa cukup, Save/Simpan template anda.

Nah sekarang kotak admin yang keren sudah nampang dibawah postingan sobat. Ayo tuangkan ide kreasi kamu untuk membuat kotak admin dibawah postingan blog sobat jadi tuambah keren lagi.

Saturday, December 10, 2011

Membuat Widget facebook,tweet dan google + Melayang Di blog

Untuk tutorial kali ini saya akan membagikan widget Facebook Like, Twitter Tweet, Google +1 (plus one) button, and LinkedIn Share Yang muncul di kiri blog anda seperti di blog saya ini.

Langkah langkah membuat floating Facebook Like, Twitter Tweet, Google +1 (plus one) dan tombol LinkedIn Share Di kiri blog anda adalah:

1. Log in Akun blogger kamu.

2. Klik Design.

3. Klik Edit HTML.

4. Cari kode <head>

5. Copy Kode ini:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

6. Pastekan dibawah <head>

7. Klik tombol Save/simpan Template.

8.Klik Rancangan, Dan pilih Edit tata letak.

9. Klik Add a Gadget Di sidebar atau apapun yang ada di halaman Rancangan .

10. Windows baru akan muncul.Pilih HTML/JavaScript.

11. Klik Tombol tambah (+) Di sebelah HTML/JavaScript.

Pilih tombol warna Floating Share yang kamu ingin pakai di blog.Ada 8 Warna yg tersedia.

12. Klik Warna yang kamu suka:

13. Copy kode Warna yang kamu suka.

14. Pergi Ke HTML/JavaScript window.

15. Paste Kode Ke kotak.

16. Tinggalkan Kotak Dengan Title/Judul Kosong.

17. Klik Tombol Save/Simpan.

Sekarang Lihat Blog Anda.Puas?? Jika ada pertanyaan,silahkan Komentar di bawah posting ini.

Code Tema Silver:

<!-- Floating social media buttons by www.howbler.com --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid #808080;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->

Code Tema Merah:

<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#C12424;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);border:1px solid #B31919;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.htmll" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->

Code Tema Biru:

<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#295698;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);border:1px solid #1E4A8A;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->

Code Tema Hitam:

<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#333;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #656565), color-stop(1, #333));background:-moz-linear-gradient(top, #656565, #333);border:1px solid #222;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->

Code Tema Hijau:

<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#80A81C;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #A1D423), color-stop(1, #80A81C));background:-moz-linear-gradient(top, #A1D423, #80A81C);border:1px solid #739619;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->

Code Tema Orange :

<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#C15F24;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24));background:-moz-linear-gradient(top, #F58D4F, #C15F24);border:1px solid #B35319;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->

Code Tema Kuning

<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#FFF19D;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF8CA), color-stop(1, #FFF19D));background:-moz-linear-gradient(top, #FFF8CA, #FFF19D);border:1px solid #F1E7AC;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->

Code untuk Tema Putih :

<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#000;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://x-bloodrune.blogspot.com/2011/12/membuat-widget-facebooktweet-dan-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->