Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan

Senin, 13 Januari 2014

Cara mudah Buat Blog Tumblr

Tumblr adalah salah satu penyedia jasa blogging gratis yang sudah lama berdiri. Meskipun di Indonesia kalah populer dibandingkan WordPress atau Blogspot, namun fasilitas-fasilitas yang disediakan Tumblr akan sangat memudahkan teman-teman melakukan blogging.
Kemudahan paling nyaman dari Tumblr adalah dalam melakukan posting, yang bisa dilakukan dari Smart Phone.
Pada Tumblr teman-teman bisa posting artikel, gambar, video, musik dan banyak lainnya.
Cara membuat blog pada Tumblr juga sangat mudah.
A. Pendaftaran
  1. Kunjungi www.tumblr.com, lalu silahkan isi formulir pendaftaran yang ada, lalu klik “Sign up“.Daftar Pada Tumblr
  2. Kemudian isi umur serta pernyataan sudah membaca dan setuju dengan persyaratan Tumblr, lalu klik “Done!“.Isi Umur Dan Setuju Persyaratan Tumblr
  3. Ikuti (follow) 3 blogs favorit pada Tumblr.
    Silahkan memilih dari blog populer pada menu samping atau menggunakan fasilitas “Find & Follow Blogs“.
    Klik tanda “Plus” di samping nama blog untuk mem-follow.
    Pilih 3 Blog Favorit
  4. Kemudian klik “Next step“.Setelah Follow 3 Maka Klik Next Step
B. Pengaturan Awal
  1. Setelah itu, pilih “Avatar” dengan klik “+ Avatar“.Pilih Avatar
  2. Lalu pilih “Choose a photo” untuk memilih gambar yang tersimpan pada media penyimpanan lokal sebagai “Avatar“, atau bisa juga pilih “Take a photo…“.Pilih Choose a photo
  3. Kemudian itu klik “Save“.Klik Save
  4. Silahkan isi “Title” dan “Description” pada isian yang tersedia.Isi Title Dan Description Blog Tumblr
  5. Selanjutnya klik “Make it“.Klik Make It
  6. Pilih Smart Phone untuk dipergunakan pada Tumblr atau pilih “I’ll get it later“.
    Pada tutorial ini dipilih “I’ll get it later“.
    Pilih Smart Phone Atau Pilih I'll Get It Later
  7. Selamat datang di Tumblr!
    Tetapi harus melakukan konfirmasi pendaftaran. :)
    Daftar Blog Tumblr Telah Sukses
C. Verifikasi
  1. Periksa Inbox email untuk melakukan verifikasi pendaftaran. Akan ada email kurang lebih seperti dibawah ini:
    From: Tumblr Support
    Subject: Confirm your email
    Confirm your email
    Hey, welcome to Tumblr! Before you get started, please verify your email address below:
    Verify email address
    http://mx.tumblr.com/wf/click?upn=AfCf6tLD5wqlQMKTc41NASQqprt
    Tumblr
    35 East 21st St, 6th Floor. New York, NY 10010.
    Silahkan klik pada link yang ada untuk melakukan verifikasi.
    NB: Isi email diatas ditampilkan dengan mode Text, apabila menggunakan mode HTML akan berbeda. Namun itu hanya perbedaan tampilan saja. :)
  2. Setelah itu akan muncul halaman ucapan terima kasih, silahkan klik “Continue to Tumblr…“.Terima Kasih Sudah Konfirmasi
  3. Selamat datang di Dashboard Tumblr. Pada Dashboard ini teman-teman bisa melakukan posting berupa text, gambar, kutipan, link, video, musik dan chatting.Selamat Datang Di Tumblr
Sangat mudah bukan ?

Sabtu, 14 Desember 2013

7 Apps Android Untuk Pengguna Blogger

sebagai seorang pengguna blogger tidak ada salahnya mencoba aplikasi dibawah ini namun fungsi  dari aplikasi ini beberapa masih sangat terbatas.  Tapi dengan memanfaatkan aplikasi dibawah ini pada smartphone Anda cukup membantu dalam proses blogging pada saat Anda tidak berada didepan komputer  dari mulai menulis, edit gambar,  uploud file dan juga memantau lalu lintas blog Anda.


Blogger
Aplikasi ini adalah resmi buatan Google dan jika Anda memiliki blog di blogger cobalah menggunakan aplikasi ini namun fungsinya masih terbatas dibangdingkan dengan aplikasi WordPress.
Writer
Aplikasi writer adalah layanan yang akan menyediakan ruang menulis yang bebas dari gangguan sehingga Anda dapat fokus pada konten teks Anda.
Google Drive
Google Dirve memungkinkan Anda untuk menyimpan semua jenis dokumen seperti word, spreadsheet, excel, gambar, audio, video dan lainnya. Selain itu juga aplikasi ini akan melakukan sinkronisasi pada akun Google Anda selanjutnya Anda dapat mengakses file ini dimana saja. Download DISINI.


SwiftKey Keyboard
Nah aplikasi ini akan sangat membantu Anda pada saat mengetik konten teks dengan fitur seperti prediksi kata berdasarkan kegiatan mengetik Anda di waktu-waktu sebelumnya, Anda juga dapat mengetik dengan menggunakan suara ataupun dengan hanya menslide dari huruf ke huruf hingga membentuk suatu kata.

Photo Editor
Dengan aplikasi ini memungkinkan Anda untuk memotong , mengedit, mengubah ukuran foto serta menambahkan efek pada foto dan hasil akhir foto bisa Anda lampirkan pada posting blog Anda.

GAnalytics
Layanan mobile ini akan memantau lalu lintas di blog Anda dan menampilknya dalam bentuk statistik sehingga akan sangat membantu apalagi saat Anda sedang tidak berada didepan komputer.
Google Analystic
Aplikasi ini resmi buatan Google dan cara kerjanya hapir sama seperti Ganalytics aplikasi ini akan memantau lalu lintas di blog Anda dan melaporkan data seperti visitor, page view, visitor yang aktif dalam bentuk statistik.
Download DISINI. 



Rabu, 19 Juni 2013

cara membuat kotak komentar facebook berdampingan dengan blog

Hay semua? hari ini saya akan posting tentang Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan/Berdekatan/Bersampingan di bawah Posting Blog. Dengan cara seperti ini, Tampilan kotak komentar kalian akan lebih menarik dan pengunjung blog juga bisa memilih mau komentar di facebook / di Komentar blogger. Sahabat  ingin tahu caranya bukan??.,,
Yang hasilnya nanti seperti ini :


Berikut flackrplex akan memberikan tutorialnya :
  • Login ke account blogger kalian.
  • Klik rancangan lalu klik: Edit HTML.
  • Download template Sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan.
  • Beri centang kotak kecil yang bertuliskan: Expand Template Widget.
  • Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian).
  • Kalau sudah ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>

.comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

 Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

 Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode/* Comment atau #comments. (pakai cara ini jika cara yang diatas gagal, tapi kebanyakan dengan cara diatas berhasil. tenang saja!)
  • Kemudian Sobat cari kode </head>
  • Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FB kalian disini' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>

Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook kalian, misalkan https://www.facebook.com/nama kalian maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika belum merubah ID Kalian maka yang tertera adalah berupa angka. Contohnya seperti ini: https://www.facebook.com/1234567890  
  • Kemudian cari kode  <div class='comments' id='comments'>
Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>. 

    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

Perhatikan: Pada penempatan kode yang ke dua, silahkan hapus kode yang berwarna biru! yang <div class='comments comments-page' id='blogger-comments-page'> apabila kode di bawahnya sama.

Perhatikan angka yang berwarna merah dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Kalian dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template agar kelihatan rapi. Tapi mazinu tidak memasang Widget ini karena kekurangannya tidak ada pemberitahuan pada mazinu pasa saat ada yang berkomentar di Kotak Komentar Facebook,, tapi pada Komentar Blogger tetep ada pemberiatuannya kok! Nyantai saja,, Kalau ingin tampilan Blog kalian bagus kenapa harus takut memasang. Oke?

Kemudian klik save template, dan lihat hasilnya.
Apabila masih ragu, silahkan tuliskan dikotak komentar dibawah ini! semogaCara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog bermanfaat buat kalian.

Minggu, 16 Juni 2013

cara membuat widget rekomendasi slide


Widget ini juga bisa meningkatkan PageView selain menu Related Pos. Letaknya sediri berada di Footer Artikel/Pos pada Blog Sobat. Dan cara pembuatanya juga mudah tinggal masukan kode-kode HTML/Java Script berikut :

<div class='widget-content'>
<a href="http://esbepe-sbp.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div><div class="close">X</div> <p>di Rekomendasikan Untuk Sobat</p> <div id="bpslidein_image"></div> <div id="bpslidein_title">Memuat..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://satrio-widget-recomended.googlecode.com/files/Rekomendasi-Widget-esbepe.js",function(){},"bp-out-slide")},"jQueryjs")} </script></div>

Ganti kode yang berwarna Merah dengan alamat blog kalian.
setelah kode diatas di Copas, seperti biasa masukan ke Blogger sobat.
(Tata Letak>> Tambah Gadget>> HTML/Java Script>> Masukan Kode >> Simpan.)

Sekian Tutorial kali ini, dan semoga bermanfaat.
Terima Kasih,. :D

cara membuat akun chitaka terbaru

Cara Membuat Akun Chitika, Terbaru ! langsung Approve-Sobat sudah tahu belum apa itu Chitika?


Chitika merupakan Online Advertising network atau bahasa mudahnya jaringan iklan secara online (baik secagai advertiser/publisher), berbasis PPC (pay per click) hampir seperti google adsensenamun banyak juga perbedaanya salah satunya konten website/ blog berbahasa non-inggris pun sangat mudah diapprove oleh chitika tentunya dengan syarat yang diajukan oleh chitika sehingga bisa dikatakan salah satu alternative google adesense yang kebanyakan ditolak. 

Cara daftar chitika dengan mudah dan cepat di approve 

bisa dilihat tampilan diatas, bahwa kita akan daftar sebagai publisher yang tentunya juga pasti pilihan sobat karena dengan modal gratis untuk penayangan iklan-iklan berproduk chitika di blog kita, dengan cara:

a. Silahkan pilih publiseher untuk pendaftaranya disini PUBLISHER CHITIKA

b. isikan formulir yang jelas khususnya sesuai dengan konten blog sobat, dan alamat lengkap sesuai ktp sobat.
c. Kemudian konfirmasi email yang telah sobat daftarkan untuk publisher chitika, yang selanjutnya dari server chitika akan meninjau ulang blog yang telah sobat daftarkan untuk diapprove atau ditolak.
d. Jika blog sudah mempunyai konten tepat sehingga SEO friendly dan terindek google maka dengan mudah chitika akan meng-approve blog sobat, intinya sesuaikan dengan prosedur permintaan chitika. (lama approve/ditolak sekitar 2 jam setelah pendaftaran sampai 2 hari agar mengecek ulang email pemberitahuan yang kedua apakah diapprove atau ditolak)
e. Setelah di approve kemudian masuk ke account chitika, kemudian pilih DOMAINS AND APPS-centang  ketiga default setting agar iklan muncul otomatis di samping bawah kiri blog.
f. Jika ingin mengambil widget iklanya bisa dipilih AD SETUP (baik iklan tex link, referrer maupun banner)
Bisa dilihat gambarnya seperti ini. (yang saya tandai lingkaran merah)
 
Cara daftar chitika dengan mudah dan cepat di approve, semoga bermanfaat dan bagi sobat yang mengalami kesulitan pada pendaftaranya silahkan berbagi keluhan maupun pendapat kalian disini, penulis akan berusaha membantu seoptimal mungkin. Terima kasih

cara membuat facebok likebox melayang terbaru

 

langsung aja disini 

Cara Membuatnya

  • Login Akun Blogger Sobat.
  • Lalu Pilih menu Template >> Edit Template
  • Cari Tag </head> dan agar lebih mudah gunakan CTRL + F
  • Paste kan kode dibawah ini, tepat dibawah Tag </head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
  • Lalu Klik Simpan Template.
  • Setelah Template Tersimpan, beralih ke menu Tata Letak.
  • Lalu pilih tambah Gadget.
  • Pilih HTML/Java Script.
  • Masukan Kode dibawah ini :

    <script type="text/javascript">
    //<!--
    $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
    //-->
    </script>
    <style type="text/css">
    .w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
    .w2bslikebox div{border:none;position:relative;display:block;}
    .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
    .w2bslikebox span a{color: #808080;text-decoration:none;}
    .w2bslikebox span a:hover{text-decoration:underline;}
    </style><div class="w2bslikebox" style=""><div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Tutorials-And-Software/487286721337467&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Get This<a href="http://esbepe-sbp.blogspot.com/2013/06/Cara-Membuat-Facebook-LikeBox-Melayang-Slide-di-Blog-Terbaru.html">Widget</a></span></div></div>

    Perhatian :
    • Merah : URL Fanspage Facebook Sobat
    • Biru     : Adalah Lebar dan Tinggi Fans Page Fb, silahkan sobat sesuaikan sendiri sesuka hati.
  • Lalu klik Save/Simpan.
  • Silahkan, sobat lihat hasilnya,.
Sekian Tutorials kali ini semoga bermanfaat.

cara lengkap membuat tulisan berjalan

Apa itu Marquee??, marquee adalah tulisan atau angka yang dibuat agar bisa berjalan contoh :

Selamat Datang di Tutorials And Software

atau bisa di lihat di atas di atas header di bawah Navigasi Blog ini ^_^
Udah taukan, apa itu marquee, Cara membuatnya mudah kok tinggal ikuti langkah/tutorial berikut:
  1. Login ke akun Blogger Sobat.
  2. Masuk ke Tata Letak.
  3. Klik Tambah Gadget.
  4. Pilih tambah HTML/Java Script
  5. Lalu Masukin nih kode-kode Html berikut :

    Tulisan DisiniBentuk Kodenya :
    <marquee>Tulisan Disini</marquee>
  6. Klik Save/Simpan.
  7. Lalu jika Ingin di Edit posisinya tinggal di Drag di posisi yang diinginkan. 
Namun jika sobat, bosan dengan marquee yang hanya itu-itu saja dapat juga lihat dbawah ini:

 Selain bentuk dasar di atas, ada juga kode-kode lainnya yang bisa diselipkan ke kode dasar diatas :

  • bgcolor="Kode HTML Warna" 
    untuk mengganti warna dari text marquee, adapun Kode HTML Warna diganti dengan kode HTML warna sesuka sobat, bisa diisi dengan dengan melihat dulu Kode HTMLnya  atau  bisa klik DISINI
    <marquee bgcolor="red">Tulisan Disini</marquee>

    Tulisan Disini
  • direction="left/right/up/down"
    untuk mengatur arah gerakan text/marquee
    <marquee direction="up">Tulisan Disini</marquee>

    Tulisan Disini
  • behavior="scroll/slide/alternate"
    Untuk mengatur  perilaku gerakan.
    • behavior="scroll"
      Kode untuk membuat text bergerak berputar.
      <marquee behavior="scroll">Tulisan Disini</marquee>

      Tulisan Disini
    • behavior="slide"
      Kode untuk membuat text bergerak sekali lalu berhenti.
      <marquee behavior="slide">Tulisan Disini</marquee>

      Tulisan Disini
    • behavior="alternate" 
      Kode untuk membuat text bergerak bolak-balik kekanan-kekiri.
      <marquee behavior="alternate">Tulisan Disini</marquee>

      Tulisan Disini
  • title="pesan"
    Untuk memberi teks saat mouse berada di atas text.

    <marquee title="Pesan">Tulisan Disini</marquee>

    Tulisan Disini
  • scrollamount="kecepatan"
    untuk mengatur kecepatan text/marquee
    contoh       :
        scrollamount="3"
    <marquee scrollamount="3">Tulisan Disini</marquee>

    Tulisan Disini
  • scrolldelay="jumlah waktu tunda"
    untuk mengatur waktu tunda gerakan dalam mili detik
    contoh  : scrolldellay="2"


    <marquee scrolldellay="2">Tulisan Disini</marquee>



    Tulisan Disini
  • loop="angka|-1|infinite" 
    Mengatur jumlah loop
    <marquee loop="infinite">Tulisan Disini</marquee>

    Tulisan Disini
  • width="jumlah angka lebar"Mengatur lebar blok teks dalam pixel atau persen
    <marquee width="3" >Tulisan Disini</marquee>
    Tulisan Disini
Dan juga bisa diketahui, bahwa kode-kode diatas adalah kode dasar dari efek-efek dari marquee itu sendiri. Dan, bisa dikombinasikan.
Dengan Susunan :

<marquee(spasi)kode efek1(spasi)kode efek2>Tulisan Disini</marquee>

Kode efek bisa banyak sekali.

1. Jika sobat mau  kalau marquee tsb. jika di sorot mouse akan berhenti maka tinggal menambahkan
    kode dibawah ini : 
onmouseover="this.stop()" onmouseout="this.start()"
 Dengan susunan

<marquee onmouseover="this.stop()" onmouseout="this.start()">Tulisan</marquee>

Jadinya :
Tulisan
2. Jika sobat mau Marquee dengan Link simak sob :
kode Dasar :

<marquee><a href="alamat Web">judul</a>
Dan jika ingin Link nya Banyak
bisa kok : 
Kode Dasar  :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center"> 
<a href="http://esbepe-sbp.blogspot.com/">cara membuat blog</a><br/>
<a href="http://esbepe-sbp.blogspot.com/2007/04/bikin-blog.html">Membuat blog </a><br/>
<a href="http://esbepe-sbp.blogspot.com/2007/08/membuka-program-periklanan.html">Pasang Iklan</a><br/>
</marquee>

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center">
<a href="http://esbepe-sbp.blogspot.com/2007/08/membuka-program-periklanan.html">Pasang Iklan </a>
<a href="http://esbepe-sbp.blogspot.com/2007/04/bikin-blog.html">Membuat blog </a><br/>
<a href="http://esbepe-sbp.blogspot.com/">cara membuat blog</a><br/>
</marquee>

Jadinya  :

cara membuat blog
Membuat blog 
Pasang Iklan
Pasang Iklan Membuat blog 
cara membuat blog

cara membuat widget social medial melayang di blog

Cara Membuat Widget Social Media Melayang di Blog - Kali Ini artikelbebas akan membagikan sebuah tutorial 
Cara Membuat Widget Social Media Melayang di Blog 
Ini adalah widget yang memiliki delapan platform Jejaring Sosial paling populer yang muncul dalam bentuk sebuah Bar. melayang di sepanjang screen blog. Setiap kali pengunjung akan memilih ke atas atau bawah halaman blog anda, widget ini melayang dengan sendirinya, Contohnya di sisi kiri blog artikelbebas ini !

Cara Membuat Widget Social Media Melayang di Blog 

Langkah :

  1. Buka akun Blogger Anda
  2. Masuk ke menu edit HTML
  3. Cari kode </body>
Kemudian pastekan kode berikut di atas</body> :<!-- import Scripts -->
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src="http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>

<!-- MBL Social Media Bar For Blogger --> 
<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: '#', text: 'Follow me on twitter' },
facebook: { url: '#', text: 'Profile on facebook' },
rss: { url: '#', text: 'RSS Feed' },
google: { url: '#', text: 'Profile on google+' },
youtube: { url: '#', text: 'Profile on youtube' },
orkut: { url: '#', text: 'Profile on orkut' },
myspace: { url: '#', text: 'Profile on myspace' },
digg: { url: '#', text: 'Profile on digg' },

},
show: 8,
position: "left",
skin: "clear"
});

});
</script>


Keterangan :

  • Menambahkan URL : Ganti # dengan URL yang Anda inginkan.
  • Perubahan posisi : Dalam rangka untuk mengubah posisi widget ganti position: "left" dengan posisi yang Anda inginkan. Bisa "right (kanan), top (atas), bottom (bawah)"
  • Mengurangi tampilan media social : Anda bisa mengubah show: 8 dengan jumlah social media yang Anda inginkan.
  • Perubahan background : Anda bisa mengubah backgound social media ini dengan warna gelap dengan mengubah skin: "clear" dengan "dark".
Kemudian save template dan lihat hasilnya....