Penerang Jalan

Tampilkan postingan dengan label membuat. Tampilkan semua postingan

Minggu, 01 Desember 2013

Membuat Cover

Saya akan share di blog teknik komputer ini mengenai bagaimana membuat cover ebook secara online, sebelumnya saya telah sedikit mengulas mengenai Tutorial Mail Merge. Setelah saya blogwalking kesana kemari, ehk ga taunya saya mendapatkan ilmu dari blog sebelah yang membahas mengenai membuat cover dengan mudah.

Ternyata membuat cover itu ga usah dibuat pakai photshop dan sejenisnya, kita hanya punya modal gambar (ya atau gambarnya di edit dikit2 di photoshop atau corel draw boleh lah), lalu kita manfaat kan software pembuat ebook di "ezinefire.com/ecover" (silahkan ketik di web browser sobat tanpa tanda petik lalu enter).

Langkah pertama yang sobat lakukan adalah menentukan bentuk cover nya....

Setelah Sobat menentukan bentuk cover nya, sekarang tentukan kalimat atau judul apa yang akan ditampilkan di depan cover dan di samping cover.

Setelah mengetikkan kalimat di kedua kotak yang disediakan, sekarang tentukan gambar pada cover, nah gambarnya bisa di edit dulu di corel draw atau photoshop, kalau saya edit pakai paint aja...

Klik "Browse" ya, biar bisa memilih gambar di direktori laptop atau komputer sobat. Gambar pertama untuk front page atau sampul depan, gambar kedua untuk samping cover. Setelah itu klik "Generate E-Cover".

Nah jadi deh hasilnya bisa dilihat di kotak "Get Your E-Cover", kalau mau dapetin gambarnya, sobat tinggal klik kanan lalu klik "Save Picture As", kalau web browser sobat mozilla dan lainnya bisa klik kanan dan pilih "Save Image As", oke selamat mencoba.

Sekian dulu yang bisa saya berikan, nantikan terus tutorial dari blog ini yang membahas tidak hanya teknik komputer secara offline saja tetapi juga secara online, terima kasih sudah menyimak tutorial saya, dan sobat juga bisa follow blog ini atau bagi sobat yang ingin mendapatkan update artikel tutorial dari blog ini, bisa sobat dapatkan dengan men-subscribe blog ini, klik tombol "Submit".

Lalu akan muncul pop up atau halaman baru, lalu masukkan email sobat, lalu masukkan rangkaian kata untuk verifikasi, setelah itu klik "Complete Subscription Request" dan selesai. So setiap update artikel akan terkirim ke email nya sobat.

semoga bermanfaat.

ReadFull Article ..

Selasa, 05 November 2013

Cara Membuat Kotak Parse Kode HTML

Kotak Parse bagi para blogger merupakan suatu hal yang sangat penting dan bagi anda yang ingin membuat kotak parse kode html di blog seperti ini silahkan mengcopy kode berikut di sidebar ataupun di postingan.

ReadFull Article ..

Cara Membuat Meta Tag Seo Friendly Valid HTML 5

Cara Membuat Meta Tag SEO Friendly Valid HTML 5 -, kali ini Mbah SERP akan menulis postingan tentang optimasi SEO on Page, yaitu dengan mengoptimalkan settingan meta tag yang ada di blog kita. Satu lagi yang unik dalam postingan ini yaitu saya akan berbagi info seputar meta tag SEO Friendly dan Valid Html 5. Sebelumnya Mbah SERP sudah Posting Tentang Cara Pasang Sitemaps Di Webmaster Dengan Baik Dan Benar

Sebelumnya Saya Jelaskan Terlebih Dahulu Tentang Meta Tag Ini bagi yang Belum tau aja :
Apa itu Meta Tag?
Meta tag merupakan elemen atau kode tag dalam bahasa pemrograman html dan xhtml yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web. Meta tag harus diletakan dibagian "Head". Meta tag berfungsi untuk menjelaskan attribut dari blog/website kita misalnya seperti, judul dan deskripsi website serta keyword yang kita pakai kepada mesin pencari, sehingga mesin pencari dapat mengenali halaman blog/website kita.

Cara Memasang Meta Tag SEO Friendly :
1. Login ke akun blogger
2. Klik "template"
3. Klik "Edit Html"
4. Cari kode berikut :

<b:include data=blog name=all-head-content/>

tekan CTRL + F untuk mempermudah pencarian

5.Kemudian hapus semua kode yang ada diantara kode :

<b:include data=blog name=all-head-content/>
SAMPE...
<b:skin><![CDATA[

6. Kemudian ganti dengan meta tag berikut ini :

<meta charset=UTF-8/>
    <meta content=width=device-width, initial-scale=1, maximum-scale=1 name=viewport/>
    <meta content=blogger name=generator/>
    <link href=GANT DENGAN URL FAVICON ANDA rel=icon type=image/x-icon/>
    <link expr:href=data:blog.url rel=canonical/>
    <link href=GANTI DENGA URL FEED ANDA rel=alternate title=Limit Post - Atom type=application/atom+xml/>
    <link href=GANTI DENGAN URL BLOG ANDA/feeds/posts/default?alt=rss rel=alternate title=GANTI DENGAN JUDUL BLOG ANDA - RSS type=application/rss+xml/>
    <link href=http://www.blogger.com/rsd.g?blogID=GANTI DENGAN ID BLOG ANDA rel=EditURI title=RSD type=application/rsd+xml/>
    <link href=data:blog.postImageThumbnailUrl rel=image_src/>
    <link href=GANTI DENGAN URL PROFIL BLOG ANDA rel=me/>
    <link href=GANTI DENGAN URL PROFIL GOOGLE+ ANDA rel=author/>
    <link href=GANTI DENGAN URL GOOGLE+ PAGE ANDA rel=publisher/>
    
    <meta content=ISI DENGAN DESKRIPSI BLOG ANDA name=description/>
    <meta content=ISI DENGAN KEYWORD YANG ANDA INGINKAN name=Keywords/>
    <b:if cond=data:blog.pageType == "index">
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/></title>
    </b:if>
    <b:if cond=data:blog.url == data:blog.homepageUrl>
    <title><data:blog.pageTitle/></title>
    <meta content=index, follow name=robots/>
    <meta content= ISI DENGAN NAMA ANDA name=author/></b:if>
    <b:if cond=data:blog.pageType == "item">
    <title><data:blog.pageName/></title>
    <meta expr:content=data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName name=Description/>
    <meta expr:content=data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName name=Keywords/></b:if>
    <meta content=index, follow name=robots/>
    <meta content=article property=og:type/>
    <meta content=1 days name=revisit-after/>
    <meta content=id name=geo.country/>
    <meta content=Indonesia name=geo.placename/>
    <meta content=all-language http-equiv=Content-Language/>
    <meta content=Indonesia name=geo.country/>
    <meta content=all name=robots/>
    <meta content=all name=googlebot/>
    <meta content=all name=Slurp/>
    <meta content=ISI DENGAN URL BLOG ANDA property=og:url/>
    <meta content=text/html; charset=UTF-8 http-equiv=Content-Type/>
    <meta content=ISI DENGAN KODE VERIFIKASI GOOGLE ANDA name=google-site-verification/>
    <meta content=ISI DENGAN KODE VERIFIKASI ALEXA ANDA name=alexaVerifyID/>
    <meta content=ISI DENGAN KODE VERIFIKASI BING ANDA name=msvalidate.01/>
    <meta content=blogger name=generator/>
    <meta content=general name=rating/>

Keterangan :
Ganti semua kode yang berwarna Merah sesuai data blog anda

7. Kemudian simpan Template

Bagaimana, mudah bukan? pemasangan meta tag dalam suatu blog merupakan salah satu dari optimasi SEO on page yang wajib untuk dilakukan, karena dapat memperngaruhi jumlah visitor suatu blog. Demikian postingan mengenai Cara Membuat Meta Tag SEO Friendly Valid HTM 5 . Semoga bermanfaat bagi Zobat yang membutuhkan. Terimakasih.

ReadFull Article ..

Minggu, 03 November 2013

Membuat Graffiti dengan CorelDRAW

Graffiti bisa dibuat dengan aplikasi desain apa saja, salah satunya adalah CorelDRAW, bahkan dengan CorelDRAW anda bisa membuat gaffiti secara detail, OK. disini aku beri gambaran cara membuat graffiti dengan CorelDRAW secara sederhana. dengan langkah yang singkat anda akan bisa membuat graffiti.

Lahkah-langkahnya sebagai berikut;

Buat tulisan dengan Text tool, misalkan CORELDRAW

Ganti dengan font graffiti, anda bisa cari di internet dengan mudah macam-macam font graffiti;

Seperti dibawah ini kira-kira, anda juga bisa pilih yang lain, dan juga bisa memodifikasinya dengan di konversi ke kurva dulu (Ctrl+Q), selanjutnya dengan Interactive Fiil tool buat gradient pada object tersebut;

Selanjutnya pada Toolbox pilih Extrude tool

Pada Property Bar pilih Extrusion Color --> Pilih Use Color Shading;

Hasilnya seperti gambar dibawah ini;

Dan beri background untuk mempercantik tampilan;

Selamat mencoba, tutorial diatas itu adalah contoh sederhana membuat Graffiti, anda bisa membuat yang lebih detail dengan langkah seperti diatas itu;

ReadFull Article ..

Membuat Efek Salju

CorelDRAW X5

Yang dimaksud efek salju disini kita buat efek seakan-akan cewek yang matanya juling ini rambutnya tertimpa salju yang mungkin sudah lama jadinya ya meleleh, pada foto Mas Bro sekalian atau Enon juga bisa, biar keren seakan-akan lagi foto di kutub utara atau lagi di Australia lagi pelesir melihat domba dolly... hehehe.

Cara buatnya sederhana, ikuti langka dibawah ini;

Misal sebagai object adalah cewek dibawah ini.. (amit-amit jabang bayi lanang wedok..!);

Buat turunan wajah dengan menggunakan Freehan tool, caranya klik pada object yang akan kita beri alur/garis dengan tidak melepas mouse drag secara bebas pada bagian object yang kita inginkan;

Selanjutnya buat Layer baru, secara default muncul dengan nama Layer 2, pada Property Bar klik Intersect;

Hasil intersect seperti gambar dibawah ini;

Selanjutnya, kita bekerja pada Layer 1 klik Show or hide pada Layer 2 biar icon matanya merem... selanjutnya pada Menu Bar --> Bitmaps --> Distort --> pilih Wet Paint...

Atur parameter seperti gambar dibawah;

Maka hasilnya seperti ini;

Selanjutnya kita aktifkan kembali Show or hide pada Layer 2 hasilnya akan seperti gambar dibawah ini;

Dengan Crop tool di Toolbox kita croping pada pinggiran object foto, tekan doubel klik untuk proses croping;

Hasil Akhir seperti gambar dibawah;

Sekian;

ReadFull Article ..

Jumat, 01 November 2013

Membuat Desain Kaos Dengan Coreldraw

Cara membuat desain baju dengan corel draw. Membuat desain kaos dengan corel draw bisa dikatakan sangat mudah bagi yang terbiasa, tapi bagi kita yang baru, pastinya akan sedikit kesulitan, apalagi ditambah dengan kita tidak mengetahui tentang coraldraw, pasti bingung abiz dah..hehe.. nah..jangat takut untuk memulai, sesuatu yang besar dimulai dengan yang kecil. Ini sedikit tutorial cara membuat desain kaos sederhana yang terlihat menarik.

Langsung saja kita simak Cara Membuat Kaos Di Coreldraw berikut :

1. Buka aplikasi CorelDraw X4. Pada tampilan awal, pilih menu New blank document
2. Klik bezier tool, dan buat objek kurva seperti gambar di bawah. Pertama buatlah garis yang saling berhubungan berbentuk kaos (bentuk dasar, mirip kaos saja dulu) menggunakan bezier tool. Buat melangkung seperti kurva bagian-bagian kaos dengan Shape tool. Klik shape tool pada toolbox, lalu klik di bagian yang akan dilengkungkan misalnya bagian lengan kaos, klik kanan dan pilih convert line to curve. Klik dan geser tanda panah (handle curve) yang muncul sehingga mendapatkan lengkungan yang diinginkan.

3. Sekarang bagian kerah dan lengan bawah kaos yang kita lengkungkan dengan tool dan cara yang sama. Gunakan make node smooth untuk menghaluskan sambungan di lengan baju.

4. Buat lekukan bagian bawah kaos, samping kanan dan kiri. Sebelumnya tambahkan dulu 2 node sebelah kiri dan 1 node sebelah kanan kaos. Lalu lekukan dengan cara yang sama menggunakan convert line to curve. Beri warna sesuai keinginan kamu.

5. Selanjutnya kita buat kurva untuk dijadikan sebagai lipatan kaos agar lebih menarik dan hidup. buat sembarang kurva seperti gambar di bawah, lalu lekukan bagian-bagian kurva dengan cara yang sama pula dengan langkah sebelumnya.

6. Jika seluruh kurva sudah membentuk lengkungan yang diinginkan, beri warna kurva dengan warna yang lebih tua dari warna kaos dan hilangkan garis pada kurva, klik line tool pada toolbox>klik tanda silang.

7. Letakan kurva tersebut di lengan kanan sebagai lipatan kaos. Agar objek bayangan ini yang berada diluar garis kaos hilang atau sesuai dengan bentuk kaos, gunakan instersect dan hapus aslinya.

8. Buat lagi lipatan kaos, tangan sebelah kiri dengan cara seperti tadi pada no.3 dan no.6.

9. Buat 5 buah kurva berbentuk seperti daun bambu, letakkan kurva-kurva tersebut seperti ini:

10. Buat dua persegi panjang yang saling menimpa menggunakan bezier tool kemudian lengkungkan dengan convert line to curve. Sesuaikan dengan lengkungan kaos bagian leher seperti gambar di bawah, sekali lagi jika ada objek ini ada yang berada di luar garis kaos gunakan intersect dan hapus aslinya. Beri warna yang lebih muda dari warna kaos seperti ini:

11. Langkah terakhir adalah kita tempelkan template desain kaos yang kamu inginkan. Sumber referensi http://www.ahlidesain.com/membuat-desain-kaos-dengan-coreldraw.html

Untuk kamu yang ingin mencoba desain kaos sendiri dirumah, kamu dapat mencarinya di Internet, kita tinggal search aja, ketik “Download desain kaos CoralDraw” atau lebih mudahnya, silahkan lihat page berikut Kumpulan desain kaos distro vector atau di page ini Koleksi template desain kaos coreldraw Disana terdapat koleksi 7000 lebih template desain kaos coreldraw karya terbaik yang didesain oleh pendesain profesional. Ribuan koleksi template desain kaos vektor coreldraw tersebut sangat cocok bagi kamu yang ingin membuka usaha sablon kaos atau ingin belajar lebih dalam lagi tentang desain kaos.

Tulisan lainnya:
Frame foto undangan terlengkap
Koleksi contoh undangan pernikahan
Koleksi template undangan coreldraw
Kumpulan template desain spanduk

ReadFull Article ..

Minggu, 27 Oktober 2013

Resep dan Cara Membuat Bika Ambon

Resep Bika Ambon - kita kali ini coba berbagi resep dan cara membuat Bika Ambon. Walaupun namanya Bika Ambon tetapi sebebnarnya kue ini berasal dari Medan. Rasanya gurih dan legit dan jika di belah kue ini bentuknya seperti sarang semut.

Bagaimana resep dan cara membuat Bika Ambon?, simak resep dibawah ini

Bahan A:

100 gram tepung terigu protein sedang.
125 ml air.
1 bungkus ragi instan.

Bahan B :

225 gram tepung sagu tani.
25 gram tepung ketan.
1/2 sendok teh kunyit bubuk.
300 ml santan dari 1 butir kelapa.
15 lembar daun jeruk.
1 sendok teh garam.
2 batang Serai, memarkan.
2 lembar daun pandan.
300 gram gula pasir.
7 butir telur.

Cara Membuat Resep Cara Membuat Kue Bika Ambon :

Aduk rata bahan A, Diamkan 15 menit.
Rebus santan, kunyit bubuk, daun jeruk, Serai, daun pandan, garam, dan gula pasir sambil diaduk sampai mendidih. Saring. Ukur 450 ml.
Campur tepung sagu tani, tepung ketan, dan biang. Uleni dengan mixer baling – baling spiral sampai rata.
Tambahkan telur satu persatu sambil diuleni rata menggunakan baling – baling mixer spiral.
Masukkan rebusan santan hangat sedikit-sedikit sambil dikocok perlahan dengan baling - baling mixer telur selama 15 menit. Diamkan 2 jam.
Panaskan cetakan kue lumpur dengan ditambah kelapa parut sampai berminyak. Buang kelapanya dan bersihkan dengan lap bersih.
Panaskan kembali cetakan dengan api besar. Tuang adonan sampai setinggi 3/4 cetakan. Kecilkan api. Biarkan sampai berlubang-lubang. Tutup dan biarkan sampai matang.

Selamat Mencoba...!

ReadFull Article ..

Sabtu, 26 Oktober 2013

Austria Sukses Membuat Tangan Bionik

Apakah Anda masih ingat dengan film The Six Million Dollar Man atau Bionic Woman yang cukup berkesan beberapa tahun yang lalu menghiasi televisi. Dimana manusia dapat dibantu dengan adanya jaringan bionic (bio electronic dalam tubuhnya). Nah, kali ini negara Austria mencoba memamerkan keberhasilannya membuat jaringan bionic. Ilmuwan Austria memelopori tangan bionik yang didukung sinyal saraf.

Orang pertama yang mendapatkan satu tangan itu telah melakukan hal yang mustahil sejak setahun lalu, seperti naik sepeda serta makan dengan garpu dan pisau. Selama beberapa dekade, manusia telah berspekulasi tentang meningkatkan atau mengganti bagian tubuh mereka dengan implan bionik. Implan koklea dan alat pacu jantung telah menjadi biasa.

Perusahaan Austria bernama Bionic Reconstructions menjadi perintis teknik amputasi selektif untuk menggantikan tangan yang rusak parah dengan sambungan seperti cyborg yang dikendalikan langsung oleh otak.

Patrick Mayrhofer adalah orang yang memiliki tangan robot itu.

Dokter berhasil menyelamatkan lengan kirinya setelah ia tersengat listrik tiga tahun lalu saat kecelakaan kerja. Padahal, sembilan operasi tidak memungkinkan bagi Dr Oskar Aszmann dan tim ahli bedahnya menyelamatkan tangan kiri Mayrhofer.

Tangan itu memiliki rangka dari logam dengan sendi krom dan jari-jari dari plastik putih. Alat itu memiliki elektroda yang dapat menerima sinyal dari sistem saraf otak melalui kulit yang tersambung dengan tangan bionik.

Bahkan jika tangan yang nyata tidak ada lagi, otak masih bisa mengirimkan sinyal untuk memerintahkan elektroda tangan bionik untuk bergerak.

"Menggunakan elektroda, kita dapat memunculkan aktivasi otot, tegangan kecil pada kulit. Dengan dua hal itu, kita dapat membuka dan menutup tangan," ujar Janos Kalmar, salah satu peneliti.

ReadFull Article ..

Jumat, 25 Oktober 2013

Cara Membuat Kotak Scroll di Blog

Untuk menghemat ruang pada blog anda, terutama pada sidebar atau pun halaman postingan sekalipun, anda dapat menempatkan suatu script atau tulisan yang panjang kedalam kotak scroll agar terlihat ringkas dan simple. kotak scroll juga dapat digunakan untuk bertukar link. oke langsung aja kita liat langkah - langkahnya dibawah ini :

1. Login ke Blogger

2. setelah masuk ke dashboard blogger sobat tinggal copy kode dibawah ini mau di postingan, laman baru, maupun html/javascript

<center><div style="font: 16px/26px Arial,Helvetica,sans-serif; height: 120px; overflow: scroll; width: 300px;">
Isi Kotak scroll anda dengan tulisan atau HTML</div>
</div></center>

Keterangan : ganti 120 dengan ukuran tingginya, ganti 300 dengan ukuran lebar, ganti warna hijau dengan tulisan atau html .

Hasil :

Isi Kotak scroll anda dengan tulisan atau HTML

ReadFull Article ..

Sabtu, 19 Oktober 2013

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

Cara 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. 3 buah widget melayang
yang digabung dalam 1 gadget ini merupakan sequel jilid 2 dari posting saya sebelumnya Cara Membuat Floating Facebook Like Box dimana dalam gadget ini memuat widget follower blogger (Google Friend Connect), widget update status Twitter dan widget Facebook Like Box sekaligus !! Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like ini akan kita bedah bersama (hiks..!) 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/AVvXsEh3CpNO2LTZ5Q5m7Jn0GwG5fsA1jLmmWnqdRNlxvY4U32opwsnp6UrVUHouOrti0jDW82jnyukFGYgRnEjn8AxGcPTzEsJh6VssWA4q4PYE68F2eZxmaTrvsruPsKe5OBNjbrojrWlOft-W/);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/AVvXsEjGlHthIkA72QUO3ZXqH5x-v_7BddyZZPm1weASxK7MDTFfRroSDYiKyz0DMmUYsuiI4br1ZfzvB3sNUz-8DQ10rlmb7QPApr9ftmlK_Yi5TQyxwdYth4gZWcD2o6uo5XIRt1_UzJ4s8E_Z/);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/AVvXsEgKUbwNC21yMmBOS8PdFig88pfKujocPQ0p1bBHUZf4ZLs2Lry80k-9zyCB4s1gK3sY0EW1NnO2UzrKuWI99Z4lHOLMsxOaImrrBYHOgPNZpJfu5hY8wEHLbYU7mwQEVvOv_flLdd2lgWIE/);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/AVvXsEikGDbOTND1B-60JvS0ajPfvhVeSZT3DD4aqXjnvXLRrjno0EJWSAabEYPQkK9T844uFmBf_epYhFfB2I8iQGp9yRQyzXaS_vlCWE9UANor1OAxvkmXFoTI_iGC2ZpXUpU0FTApa4yKv1CK/);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/AVvXsEjbBbl27Z6vSCXv-269fQ_h7I4fi8gRVyTOhi31xCVL-uHILVzHWu1OVW4HIr7BfKyrmSj0Z1goa5ALPbKUHy5rMfiAJDlTOk-x8eAws0eTClx5sOSklwdUGgUnouP9YxAtnI0s9QyACmxQ/);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/AVvXsEh9SJnm_Gygs5xGDiZfTtG3FBUvj7XUMEV4ai6xE2gpa6Bd9ZSCX65HLcPQ0Zktt8A5ow89Hxzr6gfkRv9X5MQNRLCRspZxkeb3xixNuTbRD0iV8n1HiwC154hbufkNtk0SCQd7cee2GUxH/);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/AVvXsEh3CpNO2LTZ5Q5m7Jn0GwG5fsA1jLmmWnqdRNlxvY4U32opwsnp6UrVUHouOrti0jDW82jnyukFGYgRnEjn8AxGcPTzEsJh6VssWA4q4PYE68F2eZxmaTrvsruPsKe5OBNjbrojrWlOft-W/);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/AVvXsEjGlHthIkA72QUO3ZXqH5x-v_7BddyZZPm1weASxK7MDTFfRroSDYiKyz0DMmUYsuiI4br1ZfzvB3sNUz-8DQ10rlmb7QPApr9ftmlK_Yi5TQyxwdYth4gZWcD2o6uo5XIRt1_UzJ4s8E_Z/);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/AVvXsEgKUbwNC21yMmBOS8PdFig88pfKujocPQ0p1bBHUZf4ZLs2Lry80k-9zyCB4s1gK3sY0EW1NnO2UzrKuWI99Z4lHOLMsxOaImrrBYHOgPNZpJfu5hY8wEHLbYU7mwQEVvOv_flLdd2lgWIE/);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/AVvXsEikGDbOTND1B-60JvS0ajPfvhVeSZT3DD4aqXjnvXLRrjno0EJWSAabEYPQkK9T844uFmBf_epYhFfB2I8iQGp9yRQyzXaS_vlCWE9UANor1OAxvkmXFoTI_iGC2ZpXUpU0FTApa4yKv1CK/);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/AVvXsEjbBbl27Z6vSCXv-269fQ_h7I4fi8gRVyTOhi31xCVL-uHILVzHWu1OVW4HIr7BfKyrmSj0Z1goa5ALPbKUHy5rMfiAJDlTOk-x8eAws0eTClx5sOSklwdUGgUnouP9YxAtnI0s9QyACmxQ/);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/AVvXsEh9SJnm_Gygs5xGDiZfTtG3FBUvj7XUMEV4ai6xE2gpa6Bd9ZSCX65HLcPQ0Zktt8A5ow89Hxzr6gfkRv9X5MQNRLCRspZxkeb3xixNuTbRD0iV8n1HiwC154hbufkNtk0SCQd7cee2GUxH/);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(@rayhanzhampiet).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/pages/Share-With-Irfan-Blogs/322414587773378&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-3 Create 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 Box dapat 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. Blogger sejati tidak mengenal kata MENYERAH kecuali anda ingin menyandang gelar NEWBIE FOREVER selamanya. Selamat menyongsong Tahun Baru 2013 kawan.!

ReadFull Article ..