Cerita Yang Jarang Jarang Terkini :

Kenapa Masih Keluar Tanda 'Warning' ?

EmpayarUtama - Thursday, July 11, 2013 : 13 comments

(Nota: Entah kenapa belog ini telah diblok oleh fesbuk. Aku dah merayu masih tunggu respon. Jadi buat masa ini semua link yang berhubung kait dengan fesbuk - aku keluarkan dulu. Maaf ya)

Apa yang best hingga nak letak fesbuk komen? Pertama - Sebab kotak komen nampak kemas hanya tunjuk 2 tab komen (fesbuk dan blogger). Kedua - Sebab tutorial dah ada dan orang len dah letak, takkan tak nak letak.

Jawapan "nanti pengguna fesbuk yang bukan blogger senang komen" tu cuma alasan je hahahah jangan mare - bulan posa nih.

Dah tu apa masalahnya bila dah banyak 'tutorial pasang kotak komen fesbuk di blog'; aku menyibuk nak tumpang juga? Haaa... cuba tengok apa beza dua gambar di bawah (tekan segala gambar yang ada untuk lebih jelas) :


GAMBAR 1


GAMBAR 2


Sebenarnya tutorial yang ada macam tak cukup satu step/langkah awal iaitu 'integrate' link fesbuk dengan link blog. Itu yang keluar tanda 'warning' tak hilang-hilang. Ini boleh dilakukan melalui fesbuk developers. Meh aku kongsi cara nak hilangkan tanda amaran berlatar kuning tu (ada di step/langkah kedua, baca dulu yea). Tapi cam biasa saya budak baru belajar kalau salah tolong betulkan tau :

Untuk integrate blog dengan fesbuk tanpa keluar tanda amaran, perlu masukkan nombor fesbuk developer id (fb:app_id) korang. Kat mana nak dapat? Pergi ke developers facebook setup

Akan keluar pop-up dan isi dua kotak pertama. Pastikan statusnya 'available' baru tekan 'Continue'

Nanti akan keluar page ni pula:

Pilih 'Website with Facebook Login' dan isi link blog korang. Dahtu 'Save Changes'. Page penuh akan tunjuk benda alah ni kat belah atas:

Haaa ini aku punya fb:app_id dan ada remark 'This App is is live (Visible to all users)' maknanya dah siap le. Itu untuk dapatkan fb:app_id.

Biasanya fesbuk korang akan tunjuk nama cenggini : https://www.facebook.com/EmpayarUtama. Jadi kalau nak tau atau dapat fb user id (fb:admins_id) korang, kena pergi ke https://graph.facebook.com/username (tukar username dengan nama fesbuk korang)

Nanti keluarlah info camni:

Ok sekarang kita dah ada kedua-dua id (fb:app_id dan juga fb:admins atau fb user id)

Sekarang kita susun betul-betul segala kod yang diperlukan dalam template blog.

Semua ni kena buat dalam blog template korang (takkan lom tau camana nak pergi ke blog template ^_^. Ok, Nama blog -> Sebelum Butang 'View Blog' ada butang 'arrow' ke bawah [view more]; tekan dan pilih 'Template' -> Edit HTML -> klik kiri mouse dalam kotak kod html)

Pertama : Tekan [Ctrl F] dan cari <head>
Tujuannya - supaya blog boleh baca FESBUK SAHAJA. Kita kan nak orang komen melalui fesbuk. Maknanya kita dah skip satu langkah 'Comment using... Facebook / Yahoo / AOL / Hotmail'. Segala kod mungkin dah ada cuma perlu tambah kod yang dibirukan sahaja tau. Ini kodnya letak sebelum <head> macam contoh bawah ni:
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>

Kedua: Cari <b:skin>
Tujuannya - untuk hilangkan tanda 'Warning' yang berlatar warna kuning. Ia berfungsi untuk integrate kedua-dua link blog dan fesbuk. Kod <b:if supaya paparan komen hanya keluar di page entri bukan di homepage blog. Script tu pula agar link tabber komen berfungsi - kan ada dua tab fesbuk dan blogger.

Satu lagi lihat script jQuery yang berwarna merah. Jika blog kamu sudah ada jQuery script, buang baris yang merah tu ya. Ini kerana font blog kamu yang dah cantik akan bertukar (contohnya font Cherry Cream Soda cam kat blog aku akan jadi font Arial)

Ini kodnya letak sebelum <b:skin> macam contoh bawah ni:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='NAMA BLOG KORANG' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='article' property='og:type'/>
<meta content='fb:app_id KORANG' property='fb:app_id'/>
<meta content='fb:admins (fb user id KORANG)' property='fb:admins'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<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>

<b:skin>

Ketiga: Cari kod ini ]]></b:skin>
Tujuannya - Setting untuk ejas cantik-cantik kedudukan kotak komen fesbuk. Warna latar/background yang bertanda biru tu ikut suka - nak letak transparent pun boleh)

Ini kodnya letak sebelum ]]></b:skin> macam contoh bawah ni:
.comments-page { background-color: #fff;}
#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;}

]]></b:skin>

Keempat: Cari <b:includable id='comments' var='post'> dan di bawahnya ada kod <div class='comments' id='comments'>

Tujuannya - Agar kotak komen dan tab yang dah dibina tadi terpamer dalam ruang komen blog korang. Lebar/width warna biru tu ikut kesesuaian lebar entri belog.

Ini kodnya letak selepas / di bawah kod <div class='comments' id='comments'> macam contoh bawah ni (ingat ya dua kod teratas dah sedia ada tau. Errr, tak pe aku tandakan warna merah, copy yang warna merah je) :
<b:includable id='comments' var='post'>
<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'/>
<script> window.fbAsyncInit = function() { FB.init({
appId : 'fb:app_id KORANG',
status : true, cookie : true, xfbml : true }); };
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
<fb:comments/>
</script>
<fb:comments expr:href='data:post.url' num_posts='2' width='450'/>
</b:if>
</div>

<div class='comments comments-page' id='blogger-comments-page'>


Setelah susun kod-kod tadi, korang pastikan semula - nombor fb:app_id KORANG telah dimasukkan dua kali (di step Kedua dan Keempat) manakala nombor fb:admins (fb user id KORANG) telah dimasukkan sekali (di step Kedua sahaja)

Selamat berjaya, perghhh cam soalan bocor nak amek peksa... Jangan buang posa aaa ^_~

Alamak camana Cik Tedi Bear ni buleh termasuk dalam belog satu lagi? Hahahahahah

Okeh. Kepada yang berusaha tapi masih tak berjaya; ada satu lagi tempat sebagai pilihan untuk diletak kod keempat tu. Ikut je gambar-gambar bawah ni (tekan gambar untuk lebih jelas):
Tekan 'arrow' kecik sebelah nombor tu, nanti akan keluar banyak senarai cam kat bawah:
No. 1 tu seperti dalam tutorial. Kalau tak menjadi, hangkut kod keempat tu ke dalam no.2 seperti gambar ya.
Mula-mula akan keluar amaran. Refresh/Reload belog dan amaran akan hilang.

Selamat menjadi (Harap Terbelog punya akan oke ^_^)

Lapar...


Jimat Ruang Entri Menggunakan Picasa

EmpayarUtama - Monday, July 8, 2013 : 13 comments

Kemaskini: Bermula 1 Mei 2016; Picasa Web Album telah tiada dan semua gambar berpindah ke Google Photos. Kepada sesiapa yang SUDAH berjaya membuat slideshow menggunakan Picasa, sori kerana ianya dah tak befungsi seperti biasa. Oleh itu saya meminta maaf kerana selepas 1 Mei 2016, tutorial ini hanya menjadi sebahagian dari rujukan dan bahan sejarah hahahahahahahah - EmpayarUtama.

Mungkin ini cerita menyambut Ramadhan jadi selamat menyambut bulan Ramadhan buat semua. Sempena bulan puasa aku fikir nak kongsi cerita yang elok-elok jelah. Apa cerita yang elok-elok yea? Mungkin aku akan kongsi tutorial 'camana nak buat slider dalam entri pos' yang tak banyak orang len kongsi pasal benda alah ni.

Buat permulaan kita tengok picasa dulu. Akaun picasa biasanya dah tersedia untuk pengguna blogspot. Picasa simpan segala imej yang ada dalam 'My Pictures'. Ada dua cara untuk paparkan gambar-gambar yang banyak dalam bentuk slide menggunakan picasa. Selain jimatkan ruang entri, ianya nampak kemas sikit (kemas ke?). Toksah cakap banyak, meh tengok camana nak letak gambar yang banyak menjadi satu slideshow/album dalam entri:

Cara 1: Menerusi akaun googleplus:
Jika korang dah ada akaun googleplus, terus saja ke 'album' di googleplus. Langkah-langkah berikut lebih mudah sebelum dapatan kod link slideshow dari picasa.

Semua gambar dalam blog akan berada di sini dan dikumpul dalam folder album. Kalau nak tambah gambar baru, klik butang "Upload Photos". Fungsi ini juga akan bina satu lagi album baru dalam folder/page album tu

namakan fail Album yang baru tu. Sedikit penerangan boleh ditulis di ruang 'Write a caption' untuk ia berada di bawah setiap gambar. Dah siap, tekan Butang 'Add' yang warna biru

Skip le 'tagging' ni sebab tujuan kita cuma nak buat slider dalam entri

Pastu, tekan link nih: https://picasaweb.google.com/lh/getEmbed dan satu paparan seperti di atas akan keluar. Pada "Select an album" pilih album yang baru dibuat tadi, kemudian pilih saiz slideshow. Jika mahu 'caption' dipaparkan dalam slideshow, tick pada "Show captions" dan copy kod HTML berlatar belakang kuning tu. Tempek kod dalam entri pos.

Cara 2: Terus melalui akaun picasa:
Kena login dulu akaun gmail korang, pastu baru klik http://picasaweb.google.com/

(Dulu dalam akaun gmail ada ditunjuk link picasa ni tapi sekarang macam dah tak de. Jadi teruskan dengan menekan link yang diberi ya)

Bila korang tekan je http://picasaweb.google.com/; ia tetap akan pergi ke laman googleplus. Tapi akan ada satu highlight kuning untuk ke 'Picasa web Album'. Haaa tekan link tu. Jadi, imej-imej seterusnya adalah dari laman picasa bukan googleplus lagi tau:

Tekan butang 'Upload' dan akan keluar page nih:

Imej atas ni gabungan dua pilihan - sama ada nak buat album baru (taip nama album baru yang korang nak bina kalau tidak - tarikh yang tersedia tu akan jadi tajuk album korang); atau menambah imej dalam album sedia ada (kena tekan le ayat "add to an existing album").

Bawah ni contoh 4 imej untuk album baru:
Dah siap tekan butang 'ok'. Dan ia akan jadi camni:

Pergi ke butang 'Action' dan di situ ada pilihan untuk letak 'Captions' atau sedikit penerangan untuk gambar/imej. Tekan butang tu dan akan keluar begini:

Tulis le apa-apa yang berkenaan dengan gambar yang nak dikongsi nanti. Bila dah settle yang tu, tekan butang 'Done'. Korang boleh nengok perbandingan imej kedua (Cara 1 : Menerusi akaun googleplus) dengan imej bawah ni - Albums bertambah dari 16 kepada 17:

Selalunya kita mengunci (locked) imej-imej dari dikongsi sebab ada yang personal. Oleh itu link 'embedded slideshow' di sebelah kanan (lihat imej atas) tidak berfungsi untuk slide yang akan kita paparkan. Jadi kenalah klik http://picasaweb.google.com/lh/getEmbed untuk dapatkan link kod html slideshow yang kita nak. Ha, apa lagi, tekan je lah.

Nanti keluarlah page baru cam atas nih. Sama macam Cara 1 tadi, Pada "Select an album" pilih album yang nak dipilih, kemudian sesuaikan saiz slideshow. Jika mahu 'caption' dipaparkan dalam slideshow, tick pada "Show captions" dan copy kod HTML berlatar belakang kuning tu. Tempek kod dalam entri pos. Siap dah.

Yang ini memang penting kepada sesapa yang begitu berani buat tuto. Kita kena tunjuk 'demo' apa yang dikongsi mana tau sendiri buat pun tak jadik, lagi cam bagooosh nak ajor onglen kuangkuangkuang kuanghajo tul aku nih. Ok, k, kita teruskan.

Dekat 'My Photos' tengok album yang kita nak 'display'. Lihat ikon bawah album tu sama ada 'private', 'limited' atau 'public'. Kalau masih tak pasti, tekan 'Edit visibility'

Akan keluar pop-up cam bawah ni untuk semua album dalam picasa. Pilih 'Public' dan tekan iklan nuffnang aku butang 'Done'

Satu lagi cara; tekan gambar kat album yang nak dikongsi dan akan keluar camni:

Pilih salah satu 'edit' (1) atau 'Click here to enter an album description' (2). Akan keluar juga pop-up cam kat bawah:

Di kotak 'Visibility' pilih 'Public on the web' dan tekan butang 'Save changes'. Sama ada dari imej kedua 'Done' atau dari imej keempat 'Save changes'; kedua-duanya akan kembali ke laman asal 'My Photos' beserta remark 'Your album has been updated.' begitu juga dengan ikon dan maklumat telah menjadi 'Public on the web'

Barule pembaca bley nengok album tu.

Ni nak bagitau sikit. Guna picasa (Cara 2) nih lambat sikit sebab imej diupload satu persatu (link 'upload more' keluar lepas setiap satu imej siap didownload) tak macam Cara 1 di mana butang 'Upload more photos' membenarkan kita mengupload seberapa banyak gambar dalam satu masa. Cuma link html kod slideshow yang nak ditempek dalam entri memang kena ambik dari link http://picasaweb.google.com/lh/getEmbed.

Contoh slideshow dari picasa yang aku tutorkan tadi hahahah (keluar gambar tak?):


Takat ni cuma ada satu je tutorial pasal picasa slideshow untuk letak dalam entri; yang dikongsi oleh firdaus kasim tapi dah lama sangat (bulan nam 2011) sebelum ada googleplus. Kemudian pos tu jugalah dipos semula pada hari yang sama oleh Demo LaNie.

Bagusnya picasa ni kita tak payah nak setting lebar dan tinggi tiap imej. Tak bagusnya pulak kelajuan tiap imej tak boleh dikawal. Nak tengok lama sikit satu-satu gambar tu kena tekan butang 'pause' yang disediakan.

Oh iya. Sebelum lupa. Butang bukak tutup kat atas tu adalah 'spoiler' tapi camana nak buatnya gi jengah blog abang Hanif Idrus ya. Cerita hari ni cuma pasal buat slider sebab nak jimat ruang jika banyak gambar untuk bina album :)

Nantilah aku kongsikan cara buat album lagu guna slideshow yang lain. Tungguuuuuuu.....