Cara Mengedit Tampilan (Template) di Blogger Baru

Sudah tahukan, kalau tampilan blogger.com sudah berubah. Hampir 100% tampilannya berubah dari yang semula. Tapi fungsinya masih sama. Inilah susahnya blog yang membahas tutorial blog seperti blog ini. Tulisan-tulisan terdahulu yang sudah sesuai dengan tampilan blogger yang lama menjadi sedikit kurang relevan dengan tampilan yang baru.

Mungkin suatu saat tutorial yang sifatnya mengubah tampilan tidak begitu lagi. Blogger.com sebagai salah satu produk dari google mendapatkan jatah perombakan atau make over dari google. Sudah banyak fitur yang disediakan oleh blogger.com sehingga tidak perlu mengubah terlalu banyak. Tapi blogger.com sebagai salah satu layanan yang mudah diedit tampilan dan fungsinya. Sehingga perlu ada inovasi dan variatif menghadirkan konten tetapi tetap malasah ngeblog 
Cara Mengedit Tampilan (Template) di Blogger Baru
1. Pilih blog yang akan diedit.

2. Klik Layout untuk mengatur tampilan, menambah dan memindahkan widget.

3. Klik Template untuk mengupload template baru klik Manage, untuk mengedit template klik Edit HTML. Dan klik button di bawah preview tampilan mobile untuk memilih mobile template.

Masih ada banyak yang harus dipelajari dari tampilan baru dasbor blogspot atau blogger.com ini. Fungsi atau fiturnya tidak terlalu banyak berubah, tapi tempatnya banyak berubah. Ibaratnya jika biasanya kunci motor itu sering ditaruh di atas tv, sekarang sudah ganti ditaruh di dalam lemari. hehe..

Semoga tulisan singkat ini dapat membantu dalam mempraktekan tulisan atau tutorial di Belajar Ngeblog di BLOG, mengubah, mempercantik dan mengoptimalkan blog. Bagaimana menurutmu tampilan baru dasbor blogger.com ini? Tulis saja komentarnya di kolom komentar  

NAMA ANDA - 05.51

Read More

Tips Membuat Floating Facebook Like Box Di Blogspot

Tips Membuat Floating Facebook Like Box  - Widget melayang Facebook Like Box kali ini lebih simple dan ringan daripadawidget-widget melayang lain yang pernah saya coba. Menempatkan widget dengan cara disembunyikan atau widgetfloating/melayang selain menghemat tempat pada sidebar juga dimaksudkan supaya tidak menghambat kecepatan loading awal blog pada saat dibuka. Floating Facebook Like Box ini saya dapatkan saat melancong ke blog tetangga dari Uruguay (jauh sekalee..!) yang full stylish banget. So mumpung masih fresh mendingan langsung bagi-bagi aja buat sobat blogger yang mungkin kepingin memasang widget melayang Facebook Like Box di blognya.

Cara Membuat Widget Melayang Facebook Like Box

1.     Sebelumnya anda harus sudah mendaftar dan mendapatkan kode Facebook Like Box untuk nanti dipasang pada widget.

2.       Login ke dashboard blogger anda.

3.       Pilih Rancangan > Elemen Laman > Add Gadget (HTML/Javascript).

4.       Copy script widget dibawah ini dan paste pada gadget.

<style type="text/css">

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE2spBL3TRyZs79eIINiQ211bj_NK2NmDqKUZri97mccsmW-j_Rq9qVaZGB1Rpo7p9JopWOm88lORMdwuIo_YbjHFF3Re4tCoGoc-E2wno_vj-lVLrIMMIAb58ikqWhQdKkGzP7-tFpKg5/');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/AVvXsEhtRBTB-7kthAuQCHuXevmRfM43Sr-TJJk30ED_wul4VTJkrzRvb2nA7hZeH9uYH0o-Coni32uV_G-tzFXZ7-SUc08hcxctlGKM8j-731yCFqzhKW8f1Y2R5fDY_SxMsY4jBdCoPI4BNCTv/');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="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">

<!-- Begin Facebook -->

CONTENT FACEBOOK HERE

<!-- End Facebook -->

</div>

</div>

NAMA ANDA - 05.44

Read More

Cara Membuat Widget Follow Me Twitter

Cara Membuat Widget Follow Me Twitter –Follow Me On Twitter Widget itu dia istilah kerennya untuk widget ini. Ada berbagaimacam jenis widget Follow Me yang sering kita lihat tentunya, mulai dari widget Follow Me animasi sampai yang statis (diam). Dan penempatan widget ini pun bisa dimana saja, bisa di sidebar dan ada juga widget Follow Me yang melayang (floating) bebas ditempatkan di area mana saja. Kali ini saya mau share cara pasang widget follow me twitter melayang aja deh seperti yang ada di blog ini. Sekalian saya kasih 2 tipe sekaligus, yang dengan animasi sama yang statis (diam) alias non animasi biar ngga ada yang minta-minta lagi ya he he.

Widget Follow Me Twitter Melayang dengan Animasi :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/Azka_habbabt" target="_blank"><object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="159" height="159"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=http://twitter.com/Azka_habbab" /></object></a>

 4.      Ganti username Twitter http://twitter.com/Azka_habbab dengan akun twitter anda.

5.       Save / Simpan.

Widget Follow Me Twitter Non Animasi (statis) :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget

<a style="display:scroll;position:fixed;bottom:1px;left:1px;" href="http://twitter.com/Azka_habbab" target="_blank"><img src="http://www.twitterbuttons.org/images/twitter-9a.png" width="150" height="124" border="0" /></a

4.      Ganti username Twitter http://twitter.com/rayhanzhampiet dengan akun twitter anda.

5.       Save / Simpan.

Nah untuk widget follow me twitter yang kedua, sobat dapat menggonta-ganti gambar buttonnya dengan koleksi gambar button follow me yang ada disinihttp://www.twitterbuttons.org/index.html. Caranya tinggal ganti URL button yang saya tandai dengan warna biru dengan URL button twitter pilihan. Ada puluhan button twitter follow me yang bisa sobat pilih. Contoh gambar-gambarnya yang ada dibawah ini nih :

       

Oke sobat, sekian dulu sharing kali ini tentang cara memasang widget follow me twitter melayang. Semoga bisa memenuhi keinginan sobat blogger yang pernah menanyakan cara membuat widget follow me ini pada saya beberapa waktu yang lalu. Don’t forget to follow me OK ! 

NAMA ANDA - 05.38

Read More

Cara Membuat Efek Daun Berjatuhan Di Blog

Cara Membuat Efek Daun Berjatuhan Di Blog – Efek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.

Cara Membuat Efek Daun Berjatuhan :

1.       Seperti biasa login dulu ke dashboard blogger anda.

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

3.       Cari kode </head>  pada template dengan menggunakan Ctrl+F.
4.       Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

5.       Save / simpan template anda dan lihat hasilnya muantaaap bro !!

Nah itu tadi langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Jangan lupa daun-daunnya kalo sudah kebanyakan yang jatuh sambil di sapu ya he he…

NAMA ANDA - 05.24

Read More

Cara Memasang Google Translate di Blog

Dengan Memasang widget ini membantu dan mempermudah pengunjung dari berbagai negara bisa membaca dan mengerti atau memahami postingan yang kita tulis pada blog kita setelah di terjemahkan dengan widget google translate ini.

Ada bebarapa hal perlu diperhatikan dalam penulisan pada blog bahasa Indonesia yaitu penulisanya di usahakan menggunakan bahasa Indonesia yang baku, baik dan benar ejaanya, sehingga tidak salah dalam terjemahanya.

Memang menterjemahkan menggunakan google translate ini tidak lah sempurna, namun setidaknya jika ada pengunjung dari luar negara lain mengerti dan memahami isi postingan pada blog kita dengan bantuan widget ini.

Nah bagi yang ingin memasang google translate pada blog silahkan ikuti tutorial azka dibawah ini!Copy kode dibawah ini!

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Silahkan paste di sidebar yang kamu inginkan dengan cara tambah gadget,terus pilih HTML/JavaScript paste disitu simpan selesai.Cukup Mudah kan memasang google translate pada blog, Nah kamu juga bisa memasang google translate dengan bendera,untuk tutorialnya silahkan baca artikel yang terdahulu di cara memasang google translate berbendera pada blog. semoga bermanfaat. 

NAMA ANDA - 05.08

Read More

Cara Membuat Artikel Terkait Pada Sidebar

Cara Membuat Artikel Terkait Pada Sidebar.Pastinya sobat sudah pada tahu kan kegunaan artikel terkait itu. Yups sebelumnya saya memang sudah share mengenai Cara Membuat Artikel Terkait tapi mungkin ada beberapa dari sobat yang bosen dengan artikel terkait yang biasanya penempatannya selalu di bawah postingan melulu.
Nih sekarang Blogging Is My Life mau share mengenai  Cara Membuat Artikel Terkait Pada Sidebar.

OK langsung meluncur ya gan.... wuusss wuuusss 

Cara Membuat Artikel Terkait Pada Sidebar
1. login blog
2. rancagan >> edit HTML (centang "Expand Template Widget")
3. taruh kode dibawah ini tepat dibawah kode ]]></b:skin>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

 4. lalu cari kode yang mirip seperti dibawah ini 

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

 5. lalu ganti kode tersebut menjadi seperti ini

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

NB : kode yang berwarna merah menyatakan banyak artikel terkait yang akan ditampilkan.

6. simpan
7. buka menu tata letak >> tambah gadget (HTML/JavaScript) lalu masukkan kode dibawah ini.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

8. Beri judul dan simpan.

Nah karena artikel terkait ini masih muncul di postingan dan homepage jadi kita akan mensettingnya agar muncul hanya pada postingan saja.
Caranya...
1. buka menu edit HTML (centang "Expand Template Widget")
2. cari kode yang seperti ini 

<b:widget id='HTML10' locked='false' title='Artikel Terkait Sidebar' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

 NB : kode yang berwarna biru adalah judul widget artikel terkait tadi yang sobat buat. kode HTML10 abaikan saja sob, karena tergantung pada banyak widget kita. kode yang berwarna merah adalah kode yang harus sobat sisipkan.
3. simpan dan lihat hasilnya.

good LUCK ^_^

NAMA ANDA - 01.22

Read More

Cara Membuat Efek Taburan Love Di blog

hehehe mungkin sobat pada ketawa nih ma judulnya ... Cara Membuat Efek Taburan Love Di blog. yups tu mang tips blogging tentang efek" pada blog yang akan saya share sekarang.

Efek ini tidak berbeda dengan efek daun berguguran dan efek turun salju. karena saya hanya merubah imagenya saja dengan cara seperti pada artikel saya yang cara membuat efek sesuatu berjatuhan diblog.

Hahahaha.. efek ini mungkin berguna bagi sobat" yang pengen buat blog/web yang romantis hehehehe

tp klo saya sih.... malu ah.... hehehehe tp disini saya hanya share saja, jadi klo berguna alhamdulillah tp klo nggk juga gak apa".. hehehehe ^_^

Langkah-langkah Cara Membuat Efek Taburan Love Di blog
1. login blog
2. klik rancangan - edit HTML - cari kode ]]></b:skin>
3. taruh kode dibawah ini tepat dibawah kode ]]></b:skin>

<script src='http://vikrymadz.googlecode.com/files/taburan love.js' type='text/javascript'/>

gimana??? mudah kan.... ok deh selamat mencoba ^_^

NAMA ANDA - 04.31

Read More

Cara Membuat Widget Timer/Penghitung Mundur

widget ini secara tidak sengaja saya ketahui dari webnya si om master hashemian hahaha.. (padahal saya lagi nyasar ceritanya... wkwkwkwkwkwkw) eh ternyata tips ini cukup keren yaaa jadi saya share disini deh...  



Lagian beberapa hari yang lalu juga ada beberapa sobat vikrymadz yang request artikel ini via komentar ataupun via situs jejaring sosial facebook.

OK lah yuk mari kita simak cara membuat widget seperti ini.


Cara Membuat Widget Timer/Penghitung Mundur
1. login blog
2. rancangan >> elemen halaman >> tambah gadget (HTML/JavaScript)
3. lalu masukkan kode dibawah ini

<script language="JavaScript">
TargetDate = "12/31/2011 00:00 AM";
BackColor = "white";
ForeColor = "Red";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Hari, %%H%% Jam, %%M%% Menit, %%S%% Detik.";
FinishMessage = "Kami Segenap Admin Mengucapkan Selamat Tahun Baru 2012";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"> </script>

 NB :
12/31/2011  tanggal widget penghitung waktu ini berhenti/selesei
00:00 AM jam widget penghitung waktu ini berhenti/selesei 
white  warna background widget

Red warna font widget 
Kami Segenap Admin Mengucapkan Selamat Tahun Baru 2012 tulisan yang akan tampil setelah waktu widget habis

4. simpan dan lihat hasilnya.

Sekian tips Cara Membuat Widget Timer/Penghitung Mundur dari saya semoga bisa berguna bagi sobat ^_^ 

NAMA ANDA - 04.19

Read More

Widget Melayang/Floating Follower Google Friend Connect Twitter dan Facebook Like Box ( 3in1 Widget)

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 Boxsekaligus !! 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/AVvXsEhJnsX5H6xwWExGZCkWlB-N_2n5wjBRy4geK05JYqa5cN4-SdfXPRvsj4qK1PsNRLGSbm9uxkuEdhl11H0CHVkynfJjOpiF8FSsJypR49unWRCEc0WypVFxCyTHdgutWBIB5DRelLv6-eNS/');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/AVvXsEhoRW-hLMYNyN57TCV4HSrlCphmA9pHNu8gOXICCV4pHYMpZWLQyi68juAPNzq09AnPEMycVcwKYl791My-cPpqIu8H7aYfp4zELwdsu1uNPeT4fPMRirTq1aHQ4wloaOBsk3g0s-mrU9tj/');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/AVvXsEhL6D_n3cpdzcv-aygKUacinhgZo5QIBFZUS1xmwtahunQb1M0MreevGbIvalmdntQqYgFVw3grWsh4ZB4WByFXMGrviT7f_qdKDcqu-oLbyLShCcTRCd0WZ2PJJDEtLd5mKEKGbm-GLBuU/');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/AVvXsEitqdfUncyI7NM0FQ_dnenFArx-ihHWOogkMhcbI6fxfBZhObMZSvIX4xqPwxAJDVtAYMWS71TIhnyBia5vQBtezJGg62v2qRw6gLB9rb8zxrLOdXIktcHNvwblWWV8DqypTflc4weOObvW/');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/AVvXsEgE2spBL3TRyZs79eIINiQ211bj_NK2NmDqKUZri97mccsmW-j_Rq9qVaZGB1Rpo7p9JopWOm88lORMdwuIo_YbjHFF3Re4tCoGoc-E2wno_vj-lVLrIMMIAb58ikqWhQdKkGzP7-tFpKg5/');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/AVvXsEhtRBTB-7kthAuQCHuXevmRfM43Sr-TJJk30ED_wul4VTJkrzRvb2nA7hZeH9uYH0o-Coni32uV_G-tzFXZ7-SUc08hcxctlGKM8j-731yCFqzhKW8f1Y2R5fDY_SxMsY4jBdCoPI4BNCTv/');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/AVvXsEhJnsX5H6xwWExGZCkWlB-N_2n5wjBRy4geK05JYqa5cN4-SdfXPRvsj4qK1PsNRLGSbm9uxkuEdhl11H0CHVkynfJjOpiF8FSsJypR49unWRCEc0WypVFxCyTHdgutWBIB5DRelLv6-eNS/');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/AVvXsEhoRW-hLMYNyN57TCV4HSrlCphmA9pHNu8gOXICCV4pHYMpZWLQyi68juAPNzq09AnPEMycVcwKYl791My-cPpqIu8H7aYfp4zELwdsu1uNPeT4fPMRirTq1aHQ4wloaOBsk3g0s-mrU9tj/');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/AVvXsEhL6D_n3cpdzcv-aygKUacinhgZo5QIBFZUS1xmwtahunQb1M0MreevGbIvalmdntQqYgFVw3grWsh4ZB4WByFXMGrviT7f_qdKDcqu-oLbyLShCcTRCd0WZ2PJJDEtLd5mKEKGbm-GLBuU/');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/AVvXsEitqdfUncyI7NM0FQ_dnenFArx-ihHWOogkMhcbI6fxfBZhObMZSvIX4xqPwxAJDVtAYMWS71TIhnyBia5vQBtezJGg62v2qRw6gLB9rb8zxrLOdXIktcHNvwblWWV8DqypTflc4weOObvW/');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/AVvXsEgE2spBL3TRyZs79eIINiQ211bj_NK2NmDqKUZri97mccsmW-j_Rq9qVaZGB1Rpo7p9JopWOm88lORMdwuIo_YbjHFF3Re4tCoGoc-E2wno_vj-lVLrIMMIAb58ikqWhQdKkGzP7-tFpKg5/');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/AVvXsEhtRBTB-7kthAuQCHuXevmRfM43Sr-TJJk30ED_wul4VTJkrzRvb2nA7hZeH9uYH0o-Coni32uV_G-tzFXZ7-SUc08hcxctlGKM8j-731yCFqzhKW8f1Y2R5fDY_SxMsY4jBdCoPI4BNCTv/');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">
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-5280101236238054965" style="width:225px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a 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&amp;width=24
0&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;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 halamanhttp://twitter.com/about/resources/widgets, sedangkan untuk Facebook Like Boxdapat sobat membuatnya dihalaman inihttp://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 2012 sahabat..!

NAMA ANDA - 04.50

Read More