RaxterBlog: September 2012

Minggu, 30 September 2012

Cara Membuat Facebook dan Form Komentar Berdampingan

Lo ingin Tampilan Berbeda pada Form Komentar lo bro ? ? ? pasti donk haha . . . oke bro untuk itu gua kasih tau bro cara membuat facebook dan form komentar berdampingan diBawah postingan bro, untuk lebih jelasnya perhatikan gambar bro :

Kalo lo tertarik bro, silahkan simak tatacara berikut ya bro :

1. >>Login ke blogger lo bro
   >> Pilih Rancangan
   >> Klik Edit Html
   >> Jangan Lupa Bro Centang Expand Template Widget
   >> Untuk Mengantisipasi Kesalahan Bro,Lakukanlah BACKUP DATA terlebih dahulu ya bro.

2. Carilah bro kode ]]></b:skin> kemudian bro letakkan kode diBawah ini tepat diAtas kode
]]></b:skin> ya bro.

.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: #b7b0b0;}

.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}

.comments-tab:hover { background-color: #eeeeee;-moz-transform:rotate(7deg);

-o-transform:rotate(7deg);

-webkit-transform:rotate(7deg);

-ms-transform:rotate(15deg);moz-box-shadow: 10px 5px 5px #222;

-webkit-box-shadow: 10px 5px 4px #222;

box-shadow: 10px 5px 5px #222; -moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

-moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;

}

4. Setelah itu bro carilah kode </head> lalu letakkan Kode diBawah tepat diAtas kode
</head>

function commentToggle(selectTab) {

$(".comments-tab").addClass("inactive-select-tab");

$(selectTab).removeClass("inactive-select-tab");

$(".comments-page").hide();

$(selectTab + "-page").show();

}

</script>

Ket :

Silahkan Lo ganti bro tulisan yg berwarna HIJAU dengan ID FB lo bro, dan sesuai dengan gambar yg bawah ya bro :

4. Selanjutnya bro adalah carilah bro kode

<div class='comments' id='comments'>

Ket :

Biasanya bro Kode ini ada 2 bro, untuk itu bro Copy kan saja Kode diBawah Tepat diBawah ke 2 Kode <div class='comments' id='comments'> ya bro.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<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'>

Ket :

Angka 2 menunjukkan komentar facebook yang ingin lo tampilkan bro
Angka 400 adalah lebar dari komentar facebook.
Tulisan yg berwarna HIJAU bro silahkan lo ganti sesuai alamat URL icon yg lo inginkan oke bro . . .

5. Tinggal Save Template dan Lihat Hasilnya bro, Kotak Komentar lo jadi berdampingan deh

hehe . . .

Cara Mempercepat Loading Form Komentar di Blog

Membuat Form Komentar yang Lebih Cepat Loadingnya itu gampang bro, tetapi terdapat banyak permasalahan, Selain mengandung banyak error kode dan tidak valid XTML, sebenarnya form komentar default blogger juga mempunyai permasalahan lainnya bro. Terdapat kejanggalan dalam cara penulisan kode pemanggilan iframe form tersebut. Kenapa gua bilang janggal bro ? ? ?, karna pemanggilan iframenya dibuat terpisah menjadi dua bagian bro.

Kode src yang biasanya digunakan untuk memanggil data external, entah kenapa dibuat terpisah dengan tautan link menuju halaman form komentar yang asli di Blogger. Dan ini membuat loading form komentar menjadi lambat.

Efeknya mungkin ngga akan terlihat ketika pengunjung membaca konten post kita sampai habis terlebih dahulu. Kenapa ? ? ?, karna saat dia selesai membaca artikel bro, form komentar memang udah berhasil di loading dengan sempurna. Tapi, kalo kita bandingkan lama loading form komentar dengan widget-widget lainnya, dijamin pasti akan terlihat seberapa lemotnya iframe tersebut.

Seringkali, elemen sidebar lebih duluan tampil dibanding form komentar. Hal ini tentu saja membingungkan, karna seharusnya, form komentar adalah elemen yang tampil pertama kali setelah konten post, sesuai dengan letak kodenya yang berada persis dibawah kode main post blog lo bro. Baru setelah itu, kode sidebar dan footer-nya bro.

Dan kalo blog lo pada bro mengalami masalah yang persis seperti pembahasan tersebut bro, berikut ini ada cara untuk memperbaiki "kejanggalan" form komentar tersebut bro, silahkan simak aja ya bro untaian berikut :

2. Carilah kode seperti diBawah ini Bro :

Ket :

Biasanya Kode diAtas bro akan ada lebih dari satu, tapi lo harus teliti melihat ya bro yg mana paling mirip dengan Kode diAtas oke bro.

Gantilah Bro sehingga Menjadi seperti Kode diBawah ini bro :

Ket :

Tulisan yang Berwarna MERAH bro adalah Kode yg diPakai

3. Kemudian bro, hapuslah kode :
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Sehingga bro akan menjadi singkat seperti Kode yg diBawah bro :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>

4. Tinggal Save template deh bro, dan Lihat bro kinerja form komentar lo sekarang bro.

Selamat mencoba ya bro ! ! !

Jumat, 28 September 2012

Cara Membuat Efek Kembang Api Terbaru di Blog

Kembang Api adalah suatu bentuk perayaan ya bro, entah itu perayaan apa tapi jelasnya begitu, tapi gimana kalo kembang api itu sendiri di tarok di blog lo bro, pasti keren, silahkan Perhatikan Gambar Demo berikut bro :

Bagi lo yang tertarik bro, silahkan simak tatacara berikut ya bro :

1. Masuk ke Dashboard Blog Lo bro

>> Pilih Rancangan

>> Edit Tata Letak

>> Add Gadget

>> Pilih HTML/Javascripts

>> Pastekan Kode yang Lo copy tadi bro >> Simpan Deh bro kode dikit ini . . .

2. silahkan copy paste kode dibawah ini bro lalu ikuti langkah 1.

3. Tinggal Save Gadget dan Lihat deh Hasilnya bro . . .

Selamat Mencoba ya bro ! ! !

Cara Membuat Efek Telur Ceplok di Blog

Selamat Malam Bro, Bagi lo yg gak sempat makan saat sedang ngeblogging atau lagi pesbuk-an atau twiit-an, ini ada Efek yg keren Habis untuk Menunda Lapar haha (Kiddink), Inilah dia Efek Telur Ceplok di Blog lo pada bro, untuk jelasnya lihat gambar Bro :

Jika Tertarik bro, Silahkan aja simak untaian berikut ya bro :

1. Masuk ke Dashboard Blog Lo bro

>> Pilih Rancangan

>> Edit Tata Letak

>> Add Gadget

>> Pilih HTML/Javascripts

>> Pastekan Kode yang Lo copy tadi bro >> Simpan Deh bro kode dikit ini . . .

2. silahkan copy paste kode dibawah ini bro lalu ikuti langkah 1.

Cara Membuat Efek Animasi pada Link Hidup

Mempercantik blog adalah hal yg mudah untuk lo pada bro jika ada keinginan yg berlebih dan masuk akal bro, jika lo menginginkan Link Hidup lo pada bro mempunyai kesan tersendiri, mungkin Tips satu ini banyak manfaatnya bro, Perhatikan Gambar Demo Berikut bro :

Nah bro, bagi lo yg tertarik ! ! ! silahkan ikuti untaian berikut ya bro :

1. Login ke blogger lo bro
2. Masuk ke Rancangan bro >> Edit HTML >> Centang Expand Widget Content ya bro .
3. Untuk Antisipasi Kesalahan bro, silahkan BACKUP data lo dulu bro oke .
4. Carilah bro kode a:link{ atau a:visited{
5. Lalu letakkan kode diBawah ini BRO Tepat diBawah Kode a:link{ atau a:visited{

a:hover {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMMsY0sioFEi__8YNRT_uTjoQJKExJv81K1TIIBzXDhkCb2PtJU0VOokaquEOQjscO52ca3W9snNQoS44DorD1sGJukoBkgAPFgA1n-dVAyqA68xbvEOjOqZUAN70ySIBXr9UlClSSeJAY/s1600/starchange.gif);}

Ket :

Jika lo Ketemu bro dan udah ada Kode a:hover { Silahkan diganti aja ya bro dengan Kode yg diAtas . . .
Tulisan yg Berwarna MERAH adalah Bentuk URL ANIMASI yg lo ingin Tampilkan nanti pada Link Hidup Lo bro . . . Berikut beberapa URL yg bisa lo pake bro :

Efek Free Star URLnya : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMMsY0sioFEi__8YNRT_uTjoQJKExJv81K1TIIBzXDhkCb2PtJU0VOokaquEOQjscO52ca3W9snNQoS44DorD1sGJukoBkgAPFgA1n-dVAyqA68xbvEOjOqZUAN70ySIBXr9UlClSSeJAY/s1600/starchange.gif
Bintang Berkilauan URLnya : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0nJHzzgMkwpY00y1j8dPglzpquGOIcLzYLpYLHG6rYsRwr4SJWjLDRCvKMZujzIyk2uV-3voE0zSs7l3y6qAbVRZk6pCde4MvnagHvu_DCZPISP7tcxZuu-jq8CWOa1twZmvIefymzLb/s1600/Bintang+Berkilauan.gif
Bintang Flashing URLnya : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMQSEdnhimlkQmNwZ28dzTThv2gpbfpB_Zpp7OeTluVReSroO1_-W4VAHnwpVgdsIpN9BWQNmzOU2NTFsJ-HwFPfHXaY9bgc0mJnWOBSh6vrh2Mw7bQn3e6Kr3Y3xnlxOdqUn3UbQmHgR/s1600/bintangflashing.gif
Bintang Cantik URLnya : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjky-3fkNmikSjFrootT5CJrovw5d-slxJqktqZLsIkS1yosKH8NjqgP-_9d9ZITPAhdx2EDnm6oSsGHdddD1nFoY_jd2nLgOTZl64R_CLfoiwMxEEqvEBe5nmmjr4hvW2wii5AHubyDlBn/s1600/bintangcantik.gif
atau yang diBAWAH bro, Caranya bro : Klik Kanan >> Copy Image URL oke bro

6. Tinggal Save Template dan Lihat Hasilnya Bro hehe . . .

Selamat Mencoba ya Bro