MEMBUAT TOMBOL SHARE MELAYANG

Membuat Tombol Share Melayang di Blog

Membuat Tombol Share Melayang di Blog >> Membuat Tombol Share Melayang di Blog, tombol share sosial media sangat penting untuk blog kita, disamping untuk meningkatkan pengunjung tombol share akan membantu kepada pembaca untuk membagi artikel kita ke media yang lain, seperti share di facebook, share di twitter dll.

Membuat tombol sosial media dalam blog saya rasa jadi sebuah kewajiban bagi para blogger, nah kali ini INFONETMU akan memberikan tentang cara membuat tombol share melayang di blog, lihat gambar dibawah ini!


Gambar diatas menampilkan banyak kombinasi tombol share di blog, like facebook, share facebook,twitter juga digg. sudah cukup lengkap kantombol share melayang diatas?
Lalu bagaimana cara membuatnya atau memasangnya pada blog kita? ikuti tutorial dibawah ini:

Cara membuat tombol share melayang di blog :

1. Masuk ke blogger kamu.
2. Klik Rancangan.
3. Tambah gadget dan pilih HTML/Javascript.
4. Lalu copy dan paste kode dibawah ini.
   
   

<!--SideBar Floating Share Buttons Code Start-->
<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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;-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 This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></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='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></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><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://infonetmu.blogspot.com/2012/02/membuat-tombol-share-melayang-di-blog.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

5. Langkah terakhir klik simpan.

Demikian sedikit informasi tentang cara membuat tombol share melayang di blog, semoga berguna buat blog kamu. thanks..
Baca juga!

MENGUNCI WIDGET

OK berikut pengalaman pribadi yang akan saya share : 
Suatu waktu  saya sedang asyik-asyiknya utak-atik layout blog, tiba-tiba  Teman ngajak ngobrol sesuatu yang cukup penting menurutnya. Ya saya layani, tapi mata ke monitor, tangan tetap di mouse dan keyboard, mulut melayani ocehan teman,  tapi otak pontang panting melayani teman dan melayani blog,,, huahahahaha  :D

Dua jam dari kejadian itu, baru saya menyadari ada sesuatu yang salah dalam BLOG SAYA, yaitu menu di bawah header menghilang,,,, Oooo pasti dech terhapus saat tadi otak tidak focus pada satu hal,,, Setelah diperiksa ditampilan (layout) emang bener widget pages nggak ada atau sudah terhapus.

Waduuuh mateng dech gue, pikirku !!! gimana caranya bikin widget pages?  Sedangkan statusnya "Telah Ditambahkan"  nggak bisa ditambah lagi.

Jalan satu-satunya ya bongkar template alias membandingkan current template dengan default template, walaupun susah tetap saya lakoni karena  itu satu-satunya solusi.

OK agar ini tak terjadi pada sobat semua, akan saya uraikan bagaimana Cara Mengunci Widget di Blogspot.  Coba perhatikan pada layout blog masing-masing.

Click Edit pada widget Posting Blog  yaitu area tempat  artikel dimuat..  Pasti sobat tak menemukan tombol HAPUS.

Sekarang Edit Widget Pages atau widget HTML/Javascript yang blog anda miliki. Nah perhatikan pada widget ini ada tombol HAPUS.  

Kenapa berbeda? Jawabannya karena menurut si pembuat template bahwa widget "Posting Blog"  adalah widget yang SANGAT PENTING sehingga dia men-setting widget ini tidak boleh dihapus ditandai  dengan tidak tampilnya tombol HAPUS.  Sedangkan widget "Pages" menurut dia ini widget yang kurang penting, walaupun dihapus oleh user,  blog akan tetap berjalan baik.

Saya berpendapat lain, widget "Pages" sangat penting yaitu tidak boleh saya hapus. Agar tidak terulang kejadian pahit seperti diuraikan di atas, maka saya harus menghilangkan tombol HAPUS, atau mengunci widget tersebut. Caranya sebagai berikut :

1.     Login ke dasbor.

2.     Pilih Template ==> Edit HTML => Lanjutkan  dengan mencentang Expand Template Widget

3.     Cari dengan search term title widget yaitu "Pages"

<div id='menu-wrapper'>
<b:section class='menu' id='menu'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>

4.     Bila sudah ketemu, lihat yang background kuning, ada title="Pages" ini adalah judul widget yang kita cari. Sebelum title ada code locked='false'  (warna merah) ini menunjukkan bahwa widget "Pages"  TIDAK TERKUNCI. 

5.     Agar widget terkunci maka false kita ganti menjadi true

<div id='menu-wrapper'>
<b:section class='menu' id='menu'>
<b:widget id='PageList1' locked='true' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>

6.     Simpan template dan tutup editor template

7.     Untuk mengecheck apakah widget sudah terkunci, kini kita beralih ke Tata Letak (Layout)

8.     Click Edit pada widget yang telah di ubah securitynya tadi, dalam contoh tadi adalah widget Pages

9.     Hasilnya adalah widget berhasil kita kunci dimana tombol HAPUS telah lenyap.

Bila suatu saat dirasa widget ini tidak penting lagi dan akan kita hapus, maka terlebih dahulu locked='true' kita ubah dahulu menjadi locked='false'  lalu lanjutkan hapus melalui tata letak.

Demikian Blog Tutorial  singkat ini ,,,, semoga bermanfaat bagi kita semua ,,,

MONETIZE BLOG

Monetize Blog

monetize blog - Apa itu monetize blog ? gampangnya adalahblog / website yang arah tujuannya untuk meraup keuntungan berupa uang. Biasanya kemudian blognya banyak terpasang banner-banner iklan. Seolah-olah banyak pengunjung blognya yang mau klik iklannya. Monetize blog itu tidak segampang yang dibayangkan. Untuk yang baru belajar ngeblog memang sebaiknya fokus mempelajari dasar-dasar blogging dulu seperti bagaimana menulis artikel yang berkualitas, bagus dan menarik. Kemudian pelajari bagaimana meningkatkan jumlah visitor / pengunjung dan belajar SEO atau Search Engine Optimized baik itu on page maupun off page. Setelah paham dasar-dasarnya barulah boleh kita melangkah untuk monetize blog. Kalau baru belajar sudah to the point ke arah monetize blog biasanya banyak gagalnya. Realita yang terjadi adalah blogger dengan semangat membara membuat monetize blog, ketika gagal akhirnya bagaikan daun kering berguguran, gagal. Sebaiknya blog digunakan untuk sarana berbagi pengetahuan. Blog menjadi salah satu media promosi ketika perusahaan mulai go-online dan mempromosikan produk dan jasanya. Ketika blog dikejar untuk menjadi monetize blog maka pemiliknya harus dituntut untuk membuat blog yang sempurna dengan konten yang berkualitas agar para pengunjungnya banyak. Ketika blog berkualitas maka uang akan datang dengan sendirinya. Namun kita tidak pernah melarang, semua itu adalah pilihan hidup, mau jadi blogger matre, idealis. Semua terserah pemiliknya. Sedikit Nasihat dari AA Gym "Orang disebut sukses jika mampu menjadikan kesuksesan orang lain. Itulah kualitas sesungguhnya". Happy Blogging!!!

HOW TO DESIGN TEMPLATE FOR NEWBIE

Cara menggunakan template baru Blogger

Baik untuk blog baru atau pun yang lama

• 1Pada saat membuat blog baru, dan nama serta domainnya sudah disetujui oleh Blogger, maka anda akan diberikan 4 macam rancangan template baru ketika sudah sampai di tempat akan memasang template. Anda bisa memilih salah satu template baru yang disediakan tersebut. Pilih saja salah satunya, nanti bisa anda ganti kalau tidak suka.
  
  
  Kalau anda ingin menggantinya saat itu, klik Rancangan seperti dijelaskan di bawah ini:
• 2Kalau untuk mengganti template lama dengan template baru Blogger, anda masuk ke dasbor Blogger dan klik Rancangan (Design) pada blog yang ingin anda ubah templatenya
  
• 3Pada tampilan yang kemudian muncul, klik Perancang Templat Baru
  
• 4Akan muncul tampilan seperti di bawah ini. Di situ diberikan 6 macam template baru dan masing-masing template dilengkapi dengan beberapa desain alternatif di bawahnya.
  
• 5Lalu di sudut kanan atas, ada beberapa tombol yang bisa anda klik. Yang penting adalah Back to Blogger untuk kembali ke dasbor dan Apply this to blog yang anda klik ketika akan memakai salah satu template yang disediakan di blog anda.
  

Layout

Di bawah Background

Di bawah Background terdapat tombol Layout yang isinya ada 3: Body Layout, Footer Layout dan Adjust Width.

• 1Body Layout | Isinya adalah layout body dari blog, yaitu mengatur letak dan jumlah sidebar. Sidebar bisa berjumlah 2 atau 3. Bisa juga tidak ada. Letaknya bisa di kiri atau kanan dari post area. Tergantung anda, sukanya yang mana.
  
• 2Footer Layout | Adalah jumlah footer yang anda pakai, bisa 1, 2 atau 3.
  
• 3Adjust Width | Ini adalah untuk mengatur lebar blog dan sidebarnya. Anda bisa menggeser alat yang ada di situ.
  

Background atau Latar

Lebih tepatnya warna latar

Di sebelah kiri ada 4 tombol yang bisa anda klik. Pertama adalah Background (latar) Silakan pilih salah satu warna yang anda sukai. Blogger juga memberikan saran untuk kombinasi warna yang lain.


Jangan lupa menekan APPLY TO BLOG kalau sudah menentukan salah satu kombinasi warna latar yang mau anda pakai.

Buku Problogger yang terkenal itu

ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income

by: Darren Rowse, Chris Garrett

Amazon Price: $4.84 (as of 05/23/2012)

Darren Rowse adalah Blogger Professional yang terkenal. Menjadi seorang problogger handal memang bukan hal mudah. Tetapi Darren Rowse membaginya di buku yang terkenal ini!

Advanced

Sebenarnya tidak juga Advanced kalau sudah biasa

Ini adalah menu yang terakhir, adanya di bawah Layout. Di sini anda bisa mengatur banyak, misalnya jenis huruf, warna huruf, format huruf, dan sebagainya, dan sebagainya. Pokoknya banyak. Silakan anda coba-coba sendiri. Gampang kok!

Jangan sampai anda lupa menekan APPLY TO BLOG setiap kali anda ingin melakukan PERUBAHAN
WANTS ANOTHER TUTOR?? CONTACT AT:bengetpng@gmail.com or send 3LR to My liberty reserve at U6413435

HOW TO MAKE SCROLL IN WIDGET BLOG

Membuat Scroll pada Widget Blog

Share	│ by woodybudi │

Mengupas tips & trick blog seakan tidak ada habisnya, semua anda lakukan tentunya untuk mendapatkan template blog keren, widget blog keren yang berakhir pada tampilan blog paling keren versi anda yang mudah-mudahan juga membuat pembaca blog anda merasa betah dan terpesonadengan tampilan blog anda. Salah satunya adalah dengan Cara Membuat Scroll pada widget blog anda. Membuat tampilan blog keren memang susah susah mudah, juga perlu di ingat sejauh mana hal ini akan berefek pada kepentingan template user friendly. User friendly template blog yang saya maksud ini adalah template yang memenuhi beberapa kriteria, misalnya seberapa ringan loading halaman template anda, template blog simple/sederhana, template blog yang indah enak dilihat, template blog dengan widget yang proporsional dan yang tak kalah penting template blog yang SEO friendlydsb. Hmm..susah juga ya, menggabungkan itu semua ke dalam template blog kita, toh hingga saat ini saya akui saya juga belum bisa menggabungkan semua itu ke dalam blog culun saya ini, yang paling terasa adalah kenapa blog saya begitu berat ngeloadnya...pening..hehehe..

Oke deh sob, langsung saja ya biar tidak OOT, sesuai dengan judul diatas saya akan share bagaimana cara Membuat scroll pada widget blog (untuk gambaran sebuah scroll kira-kira seperti gambar disamping), fungsi scroll pada widget ini adalah untuk membuat tampilan widget anda menjadi lebih pendek, karena widget blog anda pendek maka halaman blog anda menjadi hemat tempat, rapi dan tidak membutuhkan space yang luas. Ada 3 cara dalam membuat scroll pada widget blog ini, yang intinya adalah menggunakan perintah kode overflow. Jika anda menambahkan kode overflow ini ke dalam widget anda, maka ini akan membentuk sebuah scroll. Oke sobat anda bisa coba dengan menggunakan notepad. Berikut langkah-langkah cara membuat scroll widget pada blog yang saya maksudkan.

Cara Pertama
1. Silahkan login ke dalam akun Blogger anda, masuk ke Design, Page Element. Kemudian tambahkan widget baru dengan klik add a gadget, lalu pilih add html/javascript

2. Silahkan beri judul (tidak diberi judul juga tidak masalah) dan pada pada bagian content letakkan kode seperti ini

<div style="overflow:auto; width:100%px; height:230px; padding:10px; border:1px solid #999999;">

..................................

</div>

3. Kemudian silahkan anda letakkan kode widget diantara kode div diatas (tanda titik titik panjang)

Cara Kedua
1. Silahkan login ke dalam akun Blogger anda, masuk ke Design, kemudia masuk ke Edit Html. Lalu cari nama widget atau nomor HTML yang hendak anda jadikan scroll. Dalam hal ini paling mudah anda memberikan Judul widget anda, tujuannya agar mudah dicari pada halaman Edit HTML di template anda. Saya contohkan di sini adalah widget default Archive blog.

2. Tambakahan kode CSS berikut ini diatas ]]></b:skin>

#BlogArchive .widget-content{

height:230px;

width:auto;

overflow:auto;

}

3. Kode yang berwarna merah harus sama dengan nama/judul widget yang hendak anda jadikan scroll.

Cara Ketiga
1. Silahkan masuk pada Edit html template seperti cara kedua, silahkan anda cari widget yang hendak anda berikan scroll. Lalu pada bagian bawah dari kode widget tersebut cari kode div class='widget-content'

2. Tambahkan kode style='overflow:auto; height:230px' disamping kode div class='widget-content' Sehingga menjadi
<div class='widget-content' style='overflow:auto; height:230px'>

Nah itulah 3 cara paling mudah dan sederhana bagaimana cara membuat scroll pada widget blog anda, silahkan anda pilih menurut anda cara yang paling mudah dan biasa anda lakukan. Selamat mencoba...keep blogging.

Anda sedang membaca artikel Membuat Scroll pada Widget Blog dan artikel ini url permalinknya adalah http://www.frewaremini.com/2012/02/membuat-scroll-pada-widget-blog.htmlSemoga artikel Membuat Scroll pada Widget Blog ini bisa bermanfaat.