TEST BLOG ONLY - FAIZ-TUTORIAL.BLOGSPOT.COM

Sunday, 16 February 2014

Cara Untuk "Block Spammer" Pada Cbox

1. Login ke akaun Cbox anda [ http://www.cbox.ws ]

2. Klik pada Messages >> Messages .

3. Tick pada mesej spam dan klik Ban .

4. Untuk lihat user yang sudah di block. Klik pada Users & Access dan klik pada Blocked users .

5. Untuk ubah tempoh sekatan (blocked) :

Klik pada Users & Access >> Blocked Users.
Tick pada User .
Klik pada Expiry .
Setkan tempoh block. Contohnya: 1weeks , 1month dan jika untuk selamanya, taip " forever " .

Friday, 14 February 2014

Tutorial Membuat Forum Untuk Blogger

Screenshot Forum Untuk Blogger

LIVE DEMO

1. Pergi ke Google Groups .

2. Klik "CREATE GROUP" .

3. Isikan maklumat yang diperlukan seperti Group name, Group email address (auto fill), Group description, Group's primary language.

Screenshot : Langkah 3

4. Pada bahagian Group type , pilih Web Forum.

5. Pada bahagian Basic permission , setkan ikut kesesuain anda. Misalnya untuk paparkan topic dan post forum pada umum (public) , pergi pada View topics dan Post dan klik pada Public .

6. Selanjutnya, klik "CREATE".

Screenshot : Langkah 4-6

7. Untuk paparkan forum pada pages blogger anda,gunakan kod Embed yang disediakan. Cara untuk mendapatkan kod Embed, klik pada butang Setting dan pilih Group settings .

Screenshot : Langkah 7

8. Copy(CTRL+C) kod tersebut, dan Paste(CTRL+V) pada Pages blogger anda.

Tuesday, 11 February 2014

Tutorial Membuat "Newsticker" Dengan "Simply-scroll Effect"

Screenshot "Newsticker" Dengan "Simply-scroll Effect"

Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

]]></b:skin>

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod ]]></b:skin>

/* News Ticker Simply Scroll
----------------------------------------------- */
.ticknews,
.simply-scroll {
float:left;
}
.ticknews {
padding:0 10px;
background-color:#01B8C0;
color:#FFFFFF;
margin-right:6px;
}
.simply-scroll {
width:90%;
}
.simply-scroll-container {
position:relative;
}
.news-item a {
text-decoration:none;
font-weight:bold;
}
.news-item span {
background-color:#01B8C0;
display:inline-block;
color:#FFFFFF;
padding:0 5px;
line-height:14px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font-size:8px;
position:relative;
top:-1px;
}
.simply-scroll .simply-scroll-clip {
width:100%;
}
.simply-scroll-clip {
position:relative;
overflow:hidden;
}
.simply-scroll-list,
.simply-scroll-list li {
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.simply-scroll-list li {
width:auto;
display:block;
float:left;
margin:0 10px;
}
#newsticker {
margin:10px;
border:1px solid #FFFFFF;
background-color:#FFFFFF;
line-height:23px;
height:23px;
overflow:hidden;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.index .post-footer, .archive .post-footer {position:absolute;left:-9999px;}

7. Seterusnya, cari kod dibawah:

</head>

8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod </head>

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

Keterangan:
- Jika template anda sudah sedia ada script JQuery , padam kod yang di highlight berwarna hijau.

9. Klik Save Template

10. Untuk paparkan widget , Copy (CTRL+C) kod dibawah , letakkan pada " Layout >> Add a Gadget >> HTML/Javascript " .

<div id='newsticker'/>
<script class='jshilang' type='text/javascript'>
//<![CDATA[
NewsTicker({MaxPost:8});
//]]>
</script>

#Selesai. Selamat Mencuba :)

Sunday, 9 February 2014

Facebook Popup (Like Box Widget) + Cookie

Screenshot Facebook Popup (Like Box Widget) + Cookie

Tutorial:

1. Login ke Dashboard blogger.

2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5. Copy (CTRL+C) kod javascript dibawah:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ4szzANVjYkDGutkVLWYpVOqbkGHb87zeHR7ot9YWF0bR1ky93AXPSXOfpciXEqgCkUXub3k-0xfI63q6JX7_Aj-EEZohGyp1E6Lr0aqfU-cK5LPL5UxNX0NLRoM6hvpzc2sNNqbibIUx/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/FACEBOOK_ID&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div>
</div>

Keterangan:

Jika template anda sudah sedia ada script jquery , hapus kod yg di 'highlight' berwarna hijau.
FACEBOOK_ID - Gantikan dengan Facebook ID anda.
.delay(20000) - Untuk ubah "Delay Time" paparan popup, anda boleh ubah nilai 20000 dengan masa yang anda mahu . [1saat = 1000 , 10saat = 10000 , 60saat = 60000] .

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya

Pop Up Facebook Like Box With Lightbox Effect

Tutorial:

1. Login ke Dashboard blogger.

2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5. Copy (CTRL+C) kod javascript dibawah:

<style type='text/css'>
#PopFace { position:absolute; display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-color:rgba(0, 0, 0,.8); margin:0; overflow-y:auto;z-index:999999;}
#PopBook { background-color: #ecf0f1; overflow:none; z-index:999999;}
.PopBook { width:290px; height:300px; position:fixed; top:45%; left:50%; margin-top:-200px; margin-left:-200px; border: 10px solid #3b5998; padding: 20px;z-index:999999;border-radius:4px;}
#PopTitle {background:#3b5998;color:#fff;font-size:20px !important trebucet ms;font-weight:bold;width:324px;margin: 0 -27px 10px -27px;padding:10px;line-height:25px;text-align: center; float:left;}
.anarchyta { width: 280px; height: 200px; border-radius: 3px; position: relative; background: #3b5998; padding: 0px 10px 15px 0; margin-top:60px; }
.anarchyta,.anarchyta:before,.anarchyta:after { background: transparent; border: 1px solid #3b5998; }
.anarchyta:before,.anarchyta:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; }
.anarchyta:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #3b5998; }
.close {background: #3b5998; padding:5px 5px 10px 5px; font-size:12px; color:#ecf0f1; text-decoration:none;border-radius:4px 4px 0 0;}
</style>

<div id='PopFace'>
<div class='PopBook' id='PopBook'>
<h3 id='PopTitle'>Get Update Articel Via Facebook</h3>
<div class='anarchyta' style='border-radius:4px;'>
<div style='height:200px;overflow:hidden;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFACEBOOK_ID&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false' style='border:none; overflow:hidden; width:292px; height:258px;'></iframe>
</div>
</div>
<br />
<span style='float:left;font-size:14px;cursor:pointer;'><a class='close' onmouseup='document.getElementById('PopFace').style.display='none''>CLOSE</a></span>
</div>
</div>

Keterangan:

FACEBOOK_ID - Gantikan dengan Facebook ID anda.

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya

Saturday, 8 February 2014

Tutorial Membuat "JQuery Search Box" Pada Blogger

Screenshot JQuery Search Box

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

]]></b:skin>

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod ]]></b:skin>

/* Search Box and Result */
#ft_search_box {
float:right;
}
#ft_search_box input {
padding:7px 10px;
width:120px;
margin:6px 0 0;
background-color:#0F0F0F;
color:#D1CDCD;
}
#ft_search_box input,
#ft_search_box button {
border:0;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
display:inline-block;
outline:0;
font-size:10px;
}
#ft_search_box input:focus {
background-color:#FCFCFC;
color:#2C2C2C;
border: 1px solid #0F0F0F;
}
#ft_search_box button {
background-color:#01B1D3;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgISaauL2SeFCSFLiMTKQktm0kJKZ1vp9mGuBV4pupHoGz85RBudb_R5DWkRaWe3Nr3_pJ5C62OJp56fmvSGLAAKdI8DZFroqLuDVBzWFNuCoFqoidPgTVTFdHY1aRDjv9LEYMjZMpfnLQ/s22/button-search.png);
background-position:50% 4px;
background-repeat:no-repeat;
padding:0;
text-indent:-9999px;
width:27px;
height:27px;
margin-right:5px;
cursor:pointer;
}
#ft_search_result {
border:1px solid #DFDFDF;
background-color:#FFFFFF;
padding:8px 10px;
margin:10px 0;
width:280px;
height:auto;
position:absolute;
top:27px;
right:10px;
z-index:99;
-webkit-box-shadow:0 1px 3px #999;
-moz-box-shadow:0 1px 3px #999;
box-shadow:0 1px 3px #999;
display:none;
}
#ft_search_result * {
margin:0 0 0 0;
padding:0 0 0 0;
}
#ft_search_result h4,
#ft_search_result strong {
display:block;
margin:0 30px 10px 0;
font-size:12px;
}
#ft_search_result ol {
list-style:none;
overflow:hidden;
max-height:450px;
}
#ft_search_result ol:hover {
overflow:auto;
}
#ft_search_result ol a:hover {
text-decoration:underline;
}
#ft_search_result .close {
text-decoration:none;
display:block;
position:absolute;
top:4px;
font-size:18px;
right:10px;
line-height:normal;
color:black;
}
#ft_search_result li {
padding:5px 0;
}
#ft_search_result strong {
margin:0 0 3px 0;
display:block;
}
#ft_search_result img {
float:left;
display:block;
margin:0 5px 0 0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
#ft_search_result p {
font-size:90%;
}

#ft_search_result{
background-color:#FFFFFF;
border:1px solid #E6E4E4;
}
#ft_sbox {
height:40px;
position:relative;
}

7. Seterusnya, cari kod dibawah:

</head>

8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod </head>

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

Keterangan:
- Jika template anda sudah sedia ada script JQuery , padam kod yang di highlight berwarna hijau.

9. Klik Save Template

10. Untuk paparkan widget , Copy (CTRL+C) kod dibawah , letakkan pada " Layout >> Add a Gadget >> HTML/Javascript " .

<div class='s_box' id='ft_sbox'>
<div id='ft_search_box'>
<form action='/search' id='ft_searchform'>
<input name='q' onblur='if (this.value == "") {this.value = "Text to search...";}' onfocus='if (this.value == "Text to search...") {this.value = "";}' type='text' value='Text to search...'/>
<button title='Search' type='submit'>Search</button>
</form>
</div>
<script type='text/javascript'>
//<![CDATA[
ft_ajaxsearchbox({
summaryLength:100,
scrthumbSize:50
});
//]]>
</script>
</div>

#Selesai. Selamat Mencuba :)

Tutorial Membuat "Newsticker" Dengan "Typing Effect" Dan Ringkasan (hover)

Screenshot "Newsticker" Dengan "Typing Effect" Dan Ringkasan (hover)

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

]]></b:skin>

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod ]]></b:skin>

/* News Ticker */
#topmenu {
background-color:#292929;
overflow:hidden;
}
#latst {
float:left;
width:760px;
}
#newsticker {
color:#FAFAFA;
}
#newsticker a {
color:#FAFAFA;
text-decoration:none;
}
.left .ticker-controls,
.left .ticker-content,
.left .ticker-title,
.left .ticker {
float:left;
}
.ticker-wrapper.has-js {
height:34px;
overflow:hidden;
margin:0;
line-height:34px;
}
.ticker {
width:680px;
position:relative;
overflow:hidden;
}
.ticker-title {
background-color:#01B1D3;
padding:0 10px;
color:#FAFAFA;
font-weight:bold;
}
.ticker-content {
margin:0;
position:absolute;
font-weight:bold;
overflow:hidden;
white-space:nowrap;
line-height:34px;
padding:0 10px;
font-size:10px;
}
.ticker-content .date {
padding:0 5px 0 0;
border-right:1px solid #272727;
}
.ticker-swipe {
position:absolute;
top:0;
background-color:#292929;
display:block;
width:800px;
height:30px;
}
.ticker-swipe span {
margin-left:1px;
background-color:#292929;
border-bottom:1px solid #FAFAFA;
height:23px;
width:7px;
display:block;
}
.ticker-controls {
padding:8px 0 0;
margin:0;
list-style-type:none;
float:left;
display:none;
}
.ticker-wrapper.has-js:hover .ticker-controls {
display:block;
}
.ticker-controls li {
padding:0;
margin-left:5px;
float:left;
cursor:pointer;
height:16px;
width:16px;
display:block;
}
.ticker-controls li {
color:#FAFAFA;
position:relative;
}
.ticker-controls li.over {
color:#01B1D3;
}
.ticker-controls li.down {
color:#01B1D3;
}
.ticker-controls li:before {
top:0;
left:0;
line-height:18px;
}
.ticker-controls li.jnt-play-pause:before {
content:"\f04b";
}
.ticker-controls li.jnt-play-pause.paused:before {
content:"\f04c";
}
.ticker-controls li.jnt-prev:before {
content:"\f04a";
}
.ticker-controls li.jnt-next:before {
content:"\f04e";
}
.right .ticker-swipe {
/*right: 80px;*/
}
.right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
float: right;direction: rtl;
}
.right .ticker-controls {
padding-right: 6px;
}
.right .ticker-content .date {
float: right;
margin: 0 0 0 5px;
direction: ltr;
padding: 0;
}
.js-hidden {
display:none;
}

7. Seterusnya, cari kod dibawah:

</head>

8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod </head>

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

Keterangan:
- Jika template anda sudah sedia ada script JQuery , padam kod yang di highlight berwarna hijau.

9. Klik Save Template

10. Untuk paparkan widget , Copy (CTRL+C) kod dibawah , letakkan pada " Layout >> Add a Gadget >> HTML/Javascript " .

<div id='topmenu'>
<div id='latst'><div id='newsticker'/>
</div>
<script type='text/javascript'>
NewsTicker();
</script>
</div>

#Selesai. Selamat Mencuba :)