Jimat Ruang Entri Menggunakan z-index

Selamat berhujung minggu. Raya dah habis tapi 'open house' belum. Santai-santai ni meh tengok satu lagi slide kali ni guna z-index.

Slide menggunakan z-index jenis 'active' nampak lebih lembut. Ia mudahkan kita papar gambar beserta penerangan. Di sini imej pertama akan jadi paparan pertama kerana kita telah

tetapkan imej tersebut sebagai paparan pertama.

Mungkin ada antara penerangan gambar yang agak panjang (hingga 4 atau 5 baris); jadi sebaiknya saiz ketinggian slideshow biarlah lebih besar (Untuk contoh di bawah aku letak 'height:455px' untuk ruang slide berbanding imej sebenar yang berketinggian hanya 346px )

Mari tengok camana kodnya:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
}); }
$(function() {setInterval( "slideSwitch()", 5000 );
});
</script>

<style type="text/css">
#slideshow { position:relative; height:455px; width:464px; margin-left: 10px;}
#slideshow DIV {position:absolute; top:0;left:0; z-index:8;opacity:0.0;height: 455px; background-color: #FFF;}
#slideshow DIV.active { z-index:10; opacity:1.0;}
#slideshow DIV.last-active { z-index:9;}
#slideshow DIV IMG { height: 346px; display: block; border:1px solid #ddd; padding: 2px 2px 2px 2px; }
<style>

<div id="slideshow">
<div class="active">
<a href="link atau biar kosong pun takpe"><img alt=" " src="imej yang sama atau lebih besar dan lebar dari saiz dalam ‘style’ " /></a>
Penerangan gambar pertama</div>
<div>
<a href="link atau biar kosong pun takpe"><img alt=" " src="imej yang sama atau lebih besar dan lebar dari saiz dalam ‘style’ " /></a>
Penerangan gambar kedua</div>
<div>
<a href="link atau biar kosong pun takpe"><img alt=" " src="imej yang sama atau lebih besar dan lebar dari saiz dalam ‘style’ " /></a>
Penerangan gambar ketiga</div>
</div>

Cam biasa, skrip jQuery warna merah tak perlu jika blog korang dah ada (tak kisah apa version pun, kalau boleh versi terkini. Mungkin sudah sedia ada dalam template blog; dalam posting sebelum ini; atau di widget kat sidebar)

Kod kat atas cuma ada 3 set gambar, di mana set untuk imej ketiga aku tandakan dengan warna oren. Jika ada lebih gambar/imej, tambah saja di bawahnya. Salln dan tempek je kod warna oren tu bergantung kepada berapa banyak imej yang korang nak letak.

Sebelum ni aku kongsi 2 jenis slider album yang boleh dipapar dalam entri pos bertujuan jimat ruang entri untuk mereka yang suka dengan gambar-gambar yang banyak. Sebagai perbandingan boleh lihat kembali tutorial-tutorial tu di sini:

1. Slider Album Menerusi Picasa Sori Picasa dah tutup kedai...
2. Slider Album Menerusi JjQuery Easing Dan Banner Rotator

Ini slidenya, aku letak 15 gambar. Nampak cam lebih ok berbanding picasa:

Asyraaf Dan Adriana

Asyraaf Dan Airina (Saja bagi panjang ayat nih takut tak menjadi pulak slide aku nanti. Malu jek buat tutorial bila sendiri punya tak jadi. Kalau ayat-ayat cinta ayat ni tak nampak lepas keluar gambar lain, kira jadilah)

Asyraaf Dan Alya

Asyraaf Dan Afrina

Asyraaf Dan Alya lagi

Mengintai...

Membeli belah...

Bersama Aiman yang merajuk

Asyraaf dan Aiman

Asyraaf dan Azalea

Asyraaf macam tu jugak

Eh cam sama je ngan gambar tadi

Asyraaf dan Mama

Haaa tengok...

Asyraaf dan abah. Alamak gelap la pulokkk gambar nih hehe

Jika berminat, cubalah :)

Cerita seterusnya »

Salam Lebaran Bersama jQuery Easing Dan Banner Rotator

Diam tak diam sembilan belas hari kita telah berpuasa. Sana sini dah mula nampak bloggers bagi ucapan Selamat Hari Raya siap decorate kad ucapan sendiri. Best gitu.

Aku tak pandai le bab-bab melukis ke, buat dekor ke. Jadi kat sini aku tempek gambar-gambar dari gugel. Hambek ko 15 keping sekali aku pos.

Kali ni slider album menggunakan jQuery Easing bersama Banner Rotator. Nah kad ucapan raya dari Empayarutama :

Salam Aidilfitri 1

Salam Aidilfitri 2

Salam Aidilfitri 3

Salam Aidilfitri 4

Salam Aidilfitri 5

Salam Aidilfitri 6

Salam Aidilfitri 7

Salam Aidilfitri 8

Salam Aidilfitri 9

Salam Aidilfitri 10

Salam Aidilfitri 11

Salam Aidilfitri 12

Salam Aidilfitri 13

Salam Aidilfitri 14

Salam Aidilfitri 15

Ambik kod kat sini:

Aku dah upgrade versi jQuery kepada jQuery 1.8.3 tetapi jika belog korang dah ada mana-mana versi; buang kod kaler merah tu. Kalau belog tak pernah ada jQuery; aku rekomen guna versi terkini agar ikut perkembangan semasa.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script src="http://yourjavascript.com/43361812024/empayarutamajqueryeasing.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/13267823130/empayarutamajquerybannerrotator.js" type="text/javascript"></script>

<style>
.TB_Wrapper {width: 470px;height: 290px; margin-left: 5px; border: 2px solid #ddd; }
.TB_Wrapper {position: relative;overflow: hidden;}
.TB_Wrapper .Slide {visibility:hidden;background: #eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJItCFrwwzudkLJ5s40xhpuzQr_uzhyphenhyphenRMqzy2r3cxoFgY-6UycpPD90K0J56k08mvo5m5kbGxQ5ZLa0RB6IXIOd8ffgWIocGFce5SefV-WVI60fwsiW-ZCram6sSuyJulXaiRJ1DNB3dg/s1600/preloader.gif) center center no-repeat;}
.TB_Wrapper .icon {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXbc9s62lZfmpMxFBjjREm41U2Xj43IvO_Lqpw7wOAecdbSEVgKurygsMvI_vUAMFdwk59x3hAmU2Chp7xWcURkDX9YQnjARQqygvJJ4HI9fSfniPJTXdwAhjfksnfLu9peXpCAYC12U/s1600/icons.png);}
.TB_Wrapper .timer_sprite {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgruR5Pxxrl7_6sjXLijN6RtedIDyrWC3BK3WGWxcU8vIZU_USMT8tOEdeKu1BBvmrwMo3umhbQ1acxG-ai8fiz0PUykqTKCiNz8b3CfBo_1ZJ2YbRnP7CT1zGT1Uf26u5epj8x7EsIAxE/s1600/timer-sprite.png);}
.TB_Wrapper .Slide div {font-family: Cherry Cream Soda;font-weight:100;color:#fff;font-size:16px;}
.TB_Wrapper a:link{color:#fff;text-decoration:none;}
.TB_Wrapper a:visited{color:#fff;text-decoration:none;}
.TB_Wrapper a:hover{color:#fffcc;text-decoration:none;}
.TB_Wrapper a:active{color:#fff;text-decoration:none;}
.TB_Wrapper .noSelect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;}
.TB_Wrapper .buttonText {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold; color: #000;}
#slide_caption a{font-size:15px;color: red;text-decoration:none;}
#slide_caption a:hover{font-size:14px;color:#fffcc;text-decoration:none;}
</style>

<div class="TB_Wrapper" id="SlideView">
<div class="Slide" data-position="20,20" data-width="250">
<img src="link imej/gambar pertama" />
<div align="left" id="slide_caption">
<a href="link blog ke, kalau ada" target="_blank">caption/penerangan 1</a></div>
</div>
<div class="Slide" data-position="20,20" data-width="250">
<img src="link imej/gambar kedua" />
<div align="left" id="slide_caption">
<a href="link blog ke, kalau ada" target="_blank">caption/penerangan 2</a></div>
</div>
<div class="Slide" data-position="20,20" data-width="250">
<img src="link imej/gambar ketiga" />
<div align="left" id="slide_caption">
<a href="link blog ke, kalau ada" target="_blank">caption/penerangan 3</a></div>
</div>

<script type="text/javascript">
$('#SlideView').TransBanner({
button_show_back: true,
button_numbers_autohide: false,
button_numbers_horizontal: true,
caption_padding_x : 18,
caption_padding_y : 18,
caption_float_mode: true
});
</script>

Yang kaler oren tu, boleh tukar ikut kesesuaian belog. Dan aku cuma letak 3 set imej di mana set ketiga aku kalerkan pink gitu. Kalau nak tambah gambar/imej - kopipes je yang kaler pink dan tambah di bawahnya.

Sebelum masak megi buat sahur pagi nih, aku ucapkan Selamat Hari Raya Aidilfitri Maaf Zahir & Batin kepada semua yang tersinggah dan baca bahan-bahan rojak aku :)

Cerita seterusnya »

Google Friend Connect Tu Apa?

Kemaskini: Widget 'follower friends connect' pun sudah tidak dapat digunapakai lagi kerana Google secara otomatis ubah kod 'javascript friendconnect' dari http kepada https. Oleh itu kod yang ada di bahagian bawah posting ini hanyalah sebagai rujukan yang ianya pernah boleh digunapakai; dan kini menjadi bahan sejarah hahahahahah - EmpayarUtama.

'Google friendconnect' tu apa? Ia adalah satu 'Open Social' platform yang disediakan oleh blogger.com tapi dikuasai sepenuhnya oleh Google.

Widget 'follower friends connect' tu apa? Ianya satu ringkasan, berfungsi untuk beritahu berapa ramai pembaca yang ikut blog kita dan mereka akan di'update' melalui 'Google Reader' jika terdapat kemaskini dari mana-mana blog yang diikut/follow.

Adusss, abis tu 'Google Reader' tu apa? Ianya lebih kurangla macam korang follow blog melalui RSS feed dan semua feed ini akan disiar dalam 'Google Reader' selain nama-nama blog yang difollow pula - disusun dalam 'blogger profile'. Kita gelar dia 'Blogger Reading List' (tak sama tau dengan Bloglist). Dulu 'Google Reader' boleh diakses terus melalui akaun Google; tempatnya dekat-dekat dengan picasa yang aku pernah cerita. Jadi bila 'Google Reader' secara rasminya ditamatkan perkhidmatan pada 1 Julai 2013 (baru tiga minggu nih) maka fungsi widget 'follower friends connect' tersebut hanyalah hiasan atau gadget untuk cantikkan blog aja.

Senang cakap - bloggers yang ikut mana-mana blog masih boleh baca jika ada update dari blog yang di'follow' hanya melalui 'Google Reader' tanpa perlu jengah atau blogwalking ke blog tersebut.  Blogwalking tu, er, er, ala macam 'u folo ai folo' hahahahah boleh? 'U jengah ai jengah balik nanti yea lalinggggg...'

Google ni kan, sejak ada G+; fungsi-fungsi berkaitan dengan blog semakin dikurangkan. RSS feed korang boleh baca? Aku 'redirect'kan ke 'feedburner' dan agaknya tak lama lagi 'feedburner' pun akan bungkus kot.

Bukan apa, Nor Hanis bertanya (macam minat je) untuk letak widget, eh gadget 'follower friends connect' dalam belog. Aku ada reply tapi kat sini boleh le nengok lebih detail:

• 
• 
• 
• 
• 
• 
• 
• 
• 

Sambung sini pulak :

Kod ini boleh diguna setelah korang masukkan id dan site id berdasar kod yang korang jumpa dalam 'view page source' tadi. Sekadar langkah berjaga-jaga takut setting dalam 'layout' kembali kepada 'default'. Jadi korang boleh simpan kod ini untuk paste ke 'sidebar' kiri ke, kanan ke, bawah ke; dan yang penting boleh tukar kod-kod warnanya sesuka hati dan sesuaikan dengan warna belog. Kodnya panjang juga kannn. Ambik yang kat bawah ni ajalah:

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>
<div id="masukkan id di sini" style="width: 100%;">
</div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#666666";
skin['ENDCAP_LINK_COLOR'] = "#2288bb";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#2288bb";
skin['CONTENT_TEXT_COLOR'] = "#666666";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#2288bb";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#999999";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "normal normal 12px Trebuchet, sans-serif";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "masukkan id di sini", height: 260,
site: "masukkan site id di sini", locale: 'en' }, skin);
</script>

Dah ada widget nih, bolehla sambung buat GA kan? Kalau bosan dengan cerita aku, layan yang ini ajalah:

K baiiiii

Cerita seterusnya »

Kenapa Masih Keluar Tanda 'Warning' ?

(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...

Cerita seterusnya »