TEST BLOG ONLY - FAIZ-TUTORIAL.BLOGSPOT.COM: Blogger Tips n Tricks

Showing posts with label Blogger Tips n Tricks. Show all posts

Wednesday, 29 July 2015

Tutorial Membuat 'Recent Post Style #1' Pada Blogger

Tutorial:

1. Login ke Dashboard blogger.

2. Klik butang " More Options " dan klik " Layout ".

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

4. Cari HTML/Javascript dan klik butang tambah.

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

<script style="text/javascript" src="https://faiztutorial91.github.io/javasscriptblogger/recentpost1.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

6. Paste (CTRL+V) pada ruang 'Content'.

7. Seterusnya klik " Save " dan lihat la hasilnya

Tuesday, 21 April 2015

Tutorial Membuat 'Simple Random Post' dan 'Recent Post'

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:

>> Kod Javascript untuk membuat 'Simple Random Post' :

<ul id="random-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://faiz-tutorial.blogspot.com/",
numPosts = 5;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>

>> Kod Javascript untuk membuat 'Simple Recent Post' :

<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://faiz-tutorial.blogspot.com/",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></li>'}ct.innerHTML=content}}var you_script=document.createElement('script');you_script.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(you_script);
//]]>
</script>

Keterangan:

http://faiz-tutorial.blogspot.com/ - Gantikan dengan link/URL blog 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

Monday, 9 February 2015

Tutorial Memaparkan 'Post Views Count' Pada Blogger

Untuk membuat 'Post Views Count' ini, kita memerlukan satu pangkalan data (database) untuk menyimpan data bilangan pengunjung yang melihat pada setiap entri. Jadi disini saya menggunakan servis dari Firebase untuk menyimpan data-data tersebut.

Tutorial:

1. Buat akaun Firebase anda.
Klik pada pautan ini => FIREBASE dan klik "Sign Up".

2. Buat Database baru.
i). Pada Dashbord Firebase anda, pergi pada bahagian ruang "Create New App".
ii). Isikan App Name anda. (Terserah anda nak letak nama apa pun. Disini sebagai contoh saya letak "PostViewCount")
iii). Isikan App Url anda. (Terserah anda, tetapi pastikan nama URL anda unik dan tidak sama dengan pengguna lain.)
iv). Klik "Create New App".

3. Cara pemasangan plugin pada template Blogger.

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

i). Login ke akaun blogger anda.

ii). Klik pada Template

iii). Klik Edit HTML

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

v). Cari (CTRL + F) kod dibawah:

]]></b:skin>

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

/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_JVOJOLkDZIk9Hi_SKOdIJRngEn3CNxCuer_NEY3AmWrpKA2ChfFvfESZU7IsF3sN-7QZe2r-7BecOrcAQgaL8CTR_P8kMuN7mUdqTWDX5Mchm7IL6NBNZ40PywL_sOY3hy6m4FkWujk/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidGptXTYs9Oh1DWdsb8KEfw7lTraOyyl1ngCS3oo3IaAbKm4oPhs3xRaagESyULCOlbZQW45Pf6E9cF2hyphenhyphenhCY34eLU3-iIzxHTR7FHb4TLBg13kmQIueBHlrHBbwGybSH_xJNQI39EdiTO/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

KETERANGAN:

- right => Untuk mengubah posisi plugin kekiri hanya tukar dari "right" ke "left" .

- #EE5D06 => Mengubah warna nombor bilangan 'post views'.

vii). Cari (CTRL + F) kod dibawah:

</body>

viii). Copy (CTRL + C) kod dibawah dan Paste (CTRL + V) sebelum kod </body> :

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews').addClass('mbtloading');
var blogStats = new Firebase("https://faiz-tutorial.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr('name');
isnew = true;
}
elem.removeClass('mbtloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>

KETERANGAN:

- Gantikan faiz-tutorial.firebaseio.com dengan URL database Firebase anda. Pastikan jangan tertinggal simbol slash ( / ) selepas URL .

ix). Cari (CTRL + F) kod dibawah:

<data:post.body/>

x). Copy (CTRL + C) kod dibawah dan Paste (CTRL + V) sebelum kod <data:post.body/> :

<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>

KETERANGAN:

- Jika kod <data:post.body/> lebih dari satu pada template, anda boleh cuba satu persatu untuk menentukan posisi yang sesuai.

xi). Pada langkah ini kita akan memasang script JQuery pada template. Jika template anda sudah terpasang script JQuery, abaikan langkah ini dan teruskan ke langkah xi.

- Cari (CTRL + F) kod dibawah:

<head>

- Copy (CTRL + C) kod dibawah dan Paste (CTRL + V) selepas kod <head> :

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

xi). Klik Preview template dan jika ok, klik Save Template

Code & Script Credit to MBT Team

Friday, 2 January 2015

TUTORIAL BLOGGER : Cara Membuat Sitemap Dengan Paparan Yang Lebih Cantik

Cara Membuat Sitemap Dengan Paparan Yang Lebih Cantik

LIVE DEMO

http://faiz-tutorial.blogspot.com/2013/12/tutorial-membuat-sitemap-pada-blogger.html

TUTORIAL BLOGGER : Cara Membuat Sitemap Dengan Paparan Yang Lebih Cantik

1. Login ke Dashboard Blogger anda.

2. Klik butang " More Options " dan klik " Pages ".

3. Untuk membuat halaman baru, klik pada "New page".

4. Masukkan Tajuk halaman baru anda.

5. Klik pada "HTML".

6. Masukkan kod dibawah pada ruang yang disediakan.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://sites.google.com/site/faizlivestream/blog_js/sitemap_style.js" type="text/javascript"></script>
<script src="http://faiz-tutorial.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

KETERANGAN:

- Gantikan " http://faiz-tutorial.blogspot.com " dengan URL/LINK blog anda.

7. "Preview" dan "Publish".

Thursday, 12 June 2014

Tutorial Membuat Widget 'Social Follow Us' v1

Tutorial:

1. Login ke Dashboard blogger.

2. Klik butang " More Options " dan klik " Layout ".

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

4. Cari HTML/Javascript dan klik butang tambah.

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

<style>
.sidebarRight{float:right;display:block;width:330px;background:#fff;margin:7px 0;padding:0 1% 7px 1%}
h2.box-title{width:100%;padding:10px 3px;margin-bottom:10px;border-bottom:1px solid #e5e5e5}
h2.box-title a{font-size:17px;line-height:1em;font-weight:700;color:#007197;margin-right: 12px}
#social-buttons{width:100%;overflow: hidden;margin:10px 0}
.a-social{float:left;width: 46%;margin: 1%;padding: 1%;
background: none repeat scroll 0 0 #EEEEEE;
-moz-box-shadow: 0 1px 0 #FDFDFD inset;
-webkit-box-shadow: 0 1px 0 #FDFDFD inset;
box-shadow: 0 1px 0 #FDFDFD inset}
.a-social.facebook, .a-social:hover.facebook .social-slide{background: #3873ad}
.a-social.google, .a-social:hover.google .social-slide{background: #f73c28}
.a-social.twitter, .a-social:hover.twitter .social-slide{background: #62c6f8}
.a-social.rss, .a-social:hover.rss .social-slide {background: #f18421}
.a-social i {
display: block;
font-size: 20px;
font-family: FontAwesome;
color: #FFFFFF;
font-style: normal;
width: 40px;
height: 40px;
line-height: 40px;
margin: 15px auto 2px;
text-align: center;
border: 2px solid #fff;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%}
.social-container{
position: relative;
color: #FFFFFF;
font-size: 15px;
font-weight: 600;
height: 45px;
line-height: 45px;
overflow: hidden;
text-align: center;
width: 100%}
.social-slide, .a-social i {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out}
.social-slide{height: 45px;position: absolute;top: -35px;width: 100%}
.icon-facebook:before{content:"\f09a"}
.icon-twitter:before{content:"\f099"}
.icon-google-plus:before{content:"\f0d5"}
.icon-rss:before{content:"\f09e"}
.social-slide:after{
position: absolute;
display: block;
width: 100%;
height: 10px;
border-left: 2px solid #EEEEEE;
bottom: 0;
content: ""}
.a-social:hover .social-slide{top: 0}
.facebook_c{position: relative;top:5px;}
.twitter_c {position: relative;top:5px}
.google_c{position: relative;top:5px}
.rss_c{position:relative;top:-10px}
.rss .IN-widget, .button1 iframe {position: relative;top: -5px}
.twitter iframe{width: 134px !important}
.google #___plusone_0{width: 60px !important}
.a-social.rss{margin-right: 0}
</style>
<div class='sidebarRight'>
<h2 class='box-title'><a>FOLLOW US</a></h2>
<div id="social-buttons">
<div class="facebook a-social">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="social-slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/faiz.tutorial&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe>
</div>
</div>
Facebook
</div>
</div>

<div class="twitter a-social">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="social-slide">
<div class="twitter_c">
<a href="https://twitter.com/faizal_ahmad91" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></a>
<script>
! function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if(!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
</div>
</div>
Twitter
</div>
</div>

<div class="google a-social">
<i class="icon-google-plus"></i>
<div class="social-container tw">
<div class="social-slide">
<div class='google_c'>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/102149587857352560756" data-rel="publisher"></div>
</div>
</div>
Google+
</div>
</div>

<div class="rss a-social">
<i class="icon-rss"></i>
<div class="social-container tw">
<div class="social-slide">
<div class="rss_c">
<p><a href="http://feeds.feedburner.com/Faiz-tutorial"><img src="http://feeds.feedburner.com/~fc/Faiz-tutorial?bg=99CCFF&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
</div>
</div>
Rss Feed
</div>
</div>

</div>
<div class='clear'></div>
</div>

KETERANGAN:

+ https://www.facebook.com/faiz.tutorial - Gantikan dengan link/url fan pages Facebook anda.
+ https://twitter.com/faizal_ahmad91 - Gantikan dengan link/url Twitter anda.
+ https://plus.google.com/102149587857352560756 - Gantikan dengan link/url Google+ anda.
+ http://feeds.feedburner.com/Faiz-tutorial - Gantikan dengan link/url Feedburner anda.
+ Faiz-tutorial - Gantikan dengan link/url ID Feedburner anda.
+ [PERHATIAN] Sekiranya button counter Feedburner tidak terpapar dengan betul, sila login ke akaun Feedburner anda [KLIK SINI] ---> Klik Nama blog anda (Jika tiada, daftarkan blog anda pada feedburner terlebih dahulu) ---> Klik tab Publicize ---> Klik FeedCount ---> Klik Activate (Sekiranya belum diaktifkan) ---> Copy kod HTML yang diberi ---> Gantikan dengan kod diatas yang di 'highlight dengan warna OREN.

6. Paste (CTRL+V) pada ruang Content.

7. Seterusnya klik " Save " dan lihat la hasilnya

Thursday, 15 May 2014

Tutorial Membuat 'Social Content Locker' Pada Entri Blogger

LIVE PREVIEW

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 (CTRL + F) kod dibawah:

</head>

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

<link href='https://dl.dropboxusercontent.com/s/mr4fqupuncvljjc/sociallocker.css' rel='stylesheet' type='text/css'/>

7. Klik Save Template.

8. Untuk paparkan 'Social Content Locker' pada entri :

(a) . Pergi ke "Dashboard" >> Klik "New Post" .

(b). Klik pada tab "HTML" .

(c). Copy(CTRL + C) kod dibawah dan Paste(CTRL +V) pada ruang tab HTML:

<article id="default-usage">
<div class="to-lock" style="display: none;">


<div style="text-align: center; margin-bottom: 20px;"><img src="URL GAMBAR DISINI" alt="" style="margin: auto;" /></div> <div style="text-align: justify">TAMBAH TEKS TERSEMBUNYI ANDA DISINI</div>

</article>
</div><div id="socialunlocker"> </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/x9sycmrs4zh29ry/sociallocker.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "http://faiz-tutorial.blogspot.com",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "https://www.facebook.com/faiz.tutorial",
appId: "130907070422114"
},
google: {
url: "http://faiz-tutorial.blogspot.com"
}
});
});;;;

</script>

KETERANGAN:

http://faiz-tutorial.blogspot.com - Gantikan dengan URL/Link Blog atau Entri anda.
https://www.facebook.com/faiz.tutorial - Gantikan dengan URL/Link Fan Page Facebook anda.
http://faiz-tutorial.blogspot.com - Gantikan dengan URL/Link Blog atau Entri anda.
Jika 'button like' tidak berfungsi dengan sempurna, gantikan id 130907070422114 dengan APP ID facebook anda.
Kandungan entri yang anda ingin sembunyikan@lock , anda boleh letakkan diantara  dengan . Memerlukan sedikit kemahiran dalam kod HTML.
Anda juga boleh menggunakan kod yang disediakan (yang di 'highlight' warna hijau ), hanya gantikan:

# URL GAMBAR DISINI - Gantikan dengan url gambar yang anda ingin sembunyikan.

# TAMBAH TEKS TERSEMBUNYI ANDA DISINI - Gantikan dengan teks yang anda ingin

sembunyikan.

# Untuk tambah link boleh guna kod HTML ini ,

(d). Publish .. selesai . Kalau tak paham jangan segan-segan bertanya k.... :)

Sumber:
http://codecanyon.net/item/social-locker-for-wordpress/3667715
http://codecanyon.net/item/social-locker-for-jquery/3408941

Tuesday, 6 May 2014

Tutorial Mengubah Tampilan Pada Widget Follower (Google Friend Connect)

Tutorial:

1. Login ke Dashboard blogger.

2. Jika anda tiada widget Follower (Google Friend Connect), untuk meletakkan widget tersebut ikut langkah dibawah:

i) Klik "Layout" .

ii) Klik "Add a Gadget" .

iii) Klik "More Gadget" .

iv) Pilih "Followers"

Pada yang sudah sedia ada widget tersebut boleh teruskan ke langkah seterusnya.

3. Buka Halaman blog anda. Pada halaman blog anda, klik kanan pada tetikus dan pilih "View page source".

4. Tekan Ctrl + F dan cari kata kunci " renderMembersGadget " . Tujuan pada langkah ini adalah untuk mendapatkan "ID dan Site Google Friend Connect" bagi widget 'Follower' anda.

5. Buka dashboard blog anda , klik butang " More Options " dan klik " Layout".

6. Pada halaman Layout, klik " Add a Gadget" pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

7. Cari HTML/Javascript dan klik butang tambah.

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

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-60ejmqsiuuh5" style="width:300px;border:1px solid #008E00;"></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '42';
skin['BORDER_COLOR'] = '#008E00';
skin['ENDCAP_BG_COLOR'] = '#00CC00';
skin['ENDCAP_TEXT_COLOR'] = '#BFFEBF';
skin['ENDCAP_LINK_COLOR'] = '#80FE80';
skin['CONTENT_BG_COLOR'] = '#99FE80';
skin['CONTENT_LINK_COLOR'] = '#0027cf';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#007b03';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-60ejmqsiuuh5',
site: '08321349149898184694'},
skin);
</script>

Keterangan:

div-60ejmqsiuuh5 - Gantikan dengan 'ID Google Friend Connect' Anda.
08321349149898184694 - Gantikan dengan 'Site Google Friend Connect' Anda.

Untuk mengubah tampilan warna , sila ikut petunjuk dibawah . (Dapatkan kod warna disini):

1 - ENDCAP_LINK_COLOR (warna butang link pada header)

2 - ENDCAP_BG_COLOR (warna latarbelakang bagi header)

3 - BORDER_COLOR (warna border pada bahagian header)

4 - CONTENT_LINK_COLOR (warna tulisan link "More>>" dan "Sign in")

5 - FACE_SIZE (Saiz Avatar)

6 - CONTENT_BG_COLOR (warna latarbelakang content)

7- CONTENT_TEXT_COLOR (warna tulisan "Already a member? )

8 - #008E00 (warna border pada keseluruhan widget)

9 - CONTENT_HEADLINE_COLOR (Warna tulisan "Member(598)" )

10 - ENDCAP_TEXT_COLOR (warna tulisan "With Google Friend Connect")

9. Paste (CTRL+V) pada ruang Content.

10. Seterusnya klik " Save " dan lihat la hasilnya

Monday, 21 April 2014

Cara Meletakkan Jumlah Entri Dan Jumlah Komen

Screenshot Jumlah Entri Dan Jumlah Komen

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 style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<ul><li><script src="http://NAMABLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="http://NAMABLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

Keterangan:

NAMABLOG - Gantikan dengan nama blog 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

Tuesday, 8 April 2014

Cara Membuat 'Recent Rotating Post' Dengan Petikan Pada Blogger

Screenshot 'Recent Rotating Post' Dengan Petikan

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>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="https://dl.dropboxusercontent.com/s/rm1ed74yxtfgzn4/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://faiz-tutorial.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Keterangan:

http://faiz-tutorial.blogspot.com - Gantikan dengan URL blog anda.
Latest Posts - Tajuk yang dipaparkan pada bahagian atas.
10 - Bilangan entri yang akan dipaparkan dalam senarai.
5000 - Masa kelewatan antara entri dalam pusingan. (dalam milisaat)
500 - Masa minimum bagi satu perkara di dalam senarai yang akan dipaparkan di bahagian atas

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