Monday, 20 January 2014

"Recent Posts Widget" Dengan "Thumbnails" Untuk Blogger

"Recent Posts Widget" Dengan "Thumbnails" Untuk Blogger
Screenshot "Recent Posts Widget" Dengan "Thumbnails" Untuk Blogger
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='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BtDyaUiCwNDLCOsxYVUL64HvQtjq0X4BLr19iyBwecR5Z3lspXckZOdqSTyyz_APiKer-EUG6nxzCv0fgVQNwYnGLrc3UGF1xzOdKYYqT-SQgXYoVDwgN-SBXmG738WdvDO44olz9e_z/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
    var rpTitle     = "Recent Posts",       // Widget Title
    numposts    = 14,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
    blogURL     = "http://faiz-tutorial.blogspot.com";       // Your Blog URL
</script>
<script src="https://dl.dropboxusercontent.com/s/k7ymwkm2fhkts6d/new-recent-posts.js" type="text/javascript"></script>
 Keterangan:
  • http://faiz-tutorial.blogspot.com  -  Gantikan dengan URL blog anda.
  • Jika template anda sudah sedia ada script Jquery, buang kod yang di 'highlight' berwarna oren.
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




DEMO
Baca Selengkapnya »
Posted by at 1 comment:
Labels:

Sunday, 19 January 2014

"Metro Style Social Icons" Untuk Blogger

Metro Style Social Icons Untuk Blogger
Screenshot "Metro Style Social Icons" Untuk Blogger
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:
<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6VvQlGojXWetvQqaClCLa67CiNEKIPOMhMamEGpDPDRrGTiX0BUV7_gkrq-WdL7eocfq3iEELgq2xUYvH5uyRy7wviZprosaUZmNXt4SftSYTqm5pUQngTwPR4qnZ8IkhfGiDSfw2kb8/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/TWITTER_USERNAME" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI22OgqXtflsE-k0Wn0U9Ks_ESzfmgI2elJaisLUwZIo9oj-x3CFqjwoaorzLFkEAF9Ptn0UgbqVBhQx6OoZgn0A7Pb8IhYIHX-CfAM4zAIj4u-kzwWRUiFGXDwF-inT0Y2Lj4yzr8ggY/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/PAGEID@USERNAME" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFF355c6v2ZvR1ppTkpXJZ0RttX0HsaLbQA9OIv_oOKUJYpAKmBTZs0IInOg-6q9Hm6uMogOLWkWFOHr8wACjGvhKThUA3Mpf_LSCg34mGLWPsxNRbhQdatJJHTm-bHp3VhToRay7GtXk/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/GOOGLE+ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUmx_BpYZDCQnDldwvnxTsv3hVc6W9mSvmBwrcP95WjKlZ-kmp0XUOy9Czfw7MTVIDvx_fBGoNebKFF7ETF1V3_HHK-rLwABH3zbKND9CSBh3lLwCsYS3TTsDcSyK0Aaf1zD49BYFGr8/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
 float: left;
 width: 147px;
 height: 147px;
 margin: 0 6px 6px 0;
 padding: 0 0 0 0;
 border-bottom: none;
        list-style: none;
}
#abt-social-icons li a {
 line-height: 1px;
 display: block;
}
#abt-social-icons li a:hover img {
 -webkit-opacity: 0.8;
 -moz-opacity: 0.8;
 opacity: 0.8;
}
#abt-social-icons li a span {
 display: none !important;
}
</style>
 Keterangan:
  • FEEDID  -  Gantikan dengan ID Feedburner anda.
  • TWITTER_USERNAME  -  Gantikan dengan Username Twitter anda.
  • PAGEID@USERNAME -  Gantikan dengan PageID atau Username Facebook anda.
  • GOOGLE+ID  -  Gantikan dengan ID Google+ 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
Baca Selengkapnya »
Posted by at No comments:
Labels:

Thursday, 16 January 2014

Efek CSS3 - Cool Badge Untuk Blogger

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>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="circle">
  <<h1><a href="http://faiz-tutorial.blogspot.com">Nama Blog Anda</a></h1>
</div>
Keterangan:
  • http://faiz-tutorial.blogspot.com - Gantikan dengan URL blog anda.
  • Nama Blog Anda - 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 hasilnya :)


DEMO

FAIZ-TUTORIAL

Baca Selengkapnya »
Posted by at 1 comment:
Labels:

Friday, 10 January 2014

Tutorial Membuat Auto Slideshow (CoinSlider) Pada Blogger

Auto Slideshow (CoinSlider)
Screenshot Auto Slideshow (CoinSlider)
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 scoped="" type="text/css">
#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
.coin-slider{overflow:hidden;zoom:1;position:relative}
.coin-slider a{text-decoration:none;outline:none;border:none}
.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type='text/javascript'>var AutoCoinConfig = {
 url_blog: "http://faiz-tutorial.blogspot.com",
 MaxPost: 7,
 cmtext: "Komen",
 MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
 pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
 NoCmtext : "Tiada Komen",
 imageSize :500,
 SumChars : 100,
 tagName:false,
 width: 500,
 height: 250,
 spw: 7,
 sph: 5,
 delay: 3000,
 sDelay: 30,
 opacity: 0.7,
 titleSpeed: 500,
 effect: '',
 navigation: true,
 links : true,
 hoverPause: true,
 prevText: 'prev',
 nextText: 'next'
};
</script>
<script src="https://dl.dropboxusercontent.com/s/933tfrp45tfry9o/autocoin.min_faiztutorial.js" type="text/javascript"></script>

Keterangan:

  • http://faiz-tutorial.blogspot.com - Gantikan dengan URL blog anda.
  • Jika tempate anda sudah sedia ada kod JQUERY , padam kod yang di highlight dengan warna oren .


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 ) "


Untuk Paparkan Auto Slideshow Pada Laman Utama Sahaja

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

1. Pergi ke Dashbord >> Template , kemudian klik tombol Edit HTML
2. Cari kod dibawah:
<b:widget id='HTMLxx' locked='false' title='' type='HTML'> 
Keterangan: Gantikan xx dengan dengan  nombor ID widget anda. Contohnya HTML13 .
Untuk dapatkan Widget ID , lihat cara-caranya dibawah:
i) Pada Layout , klik Edit pada HTML/Javascript dimana kod Featured Post anda disimpan.
ii) Pada halaman Configure HTML/JavaScript , lihat pada URL bar . ID widget anda berada dihujung URL .


3. Tambah kod <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> pada kod widget anda.

Contoh (sebagai contoh, misalnya ID widget saya adalah HTML13 ) : 
- Kod yang belum di edit seperti dibawah:
<b:widget id='HTML13' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
- Setelah diedit akan seperti dibawah:
<b:widget id='HTML13' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if></b:includable>
  </b:widget>
4. Klik Save Template
Baca Selengkapnya »
Posted by at 1 comment:
Labels:

Thursday, 9 January 2014

Featured Post Menarik dengan CSS dan jQuery

Featured Post Menarik dengan CSS dan jQuery
Screenshot Featured Post Menarik dengan CSS dan jQuery
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 scoped="" type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCLGLHVf5UBq9HliT5GRwkqSu-oykEeWEbbMZJtYiKrxI3RiMkXxLonrfsbe-mBQaNWOL8qurZc3fQgsAgLxYPE30nsKPVuC8hFNIE6HYx-k_4zLBztpa2lRr3Pp0Oim5asyRIpnVuL5Q/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:5px 0 0}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/s/b7oy9rm0f7xzvsf/features_post_faiztutorial.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://faiz-tutorial.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
Keterangan:

  • http://faiz-tutorial.blogspot.com - Gantikan dengan URL blog anda.
  • Jika tempate anda sudah sedia ada kod JQUERY , padam kod yang di highlight dengan warna oren .


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 ) "


Untuk Paparkan Featured Post Pada Laman Utama Sahaja

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

1. Pergi ke Dashbord >> Template , kemudian klik tombol Edit HTML
2. Cari kod dibawah:
<b:widget id='HTMLxx' locked='false' title='' type='HTML'> 
Keterangan: Gantikan xx dengan dengan  nombor ID widget anda. Contohnya HTML13 .
Untuk dapatkan Widget ID , lihat cara-caranya dibawah:
i) Pada Layout , klik Edit pada HTML/Javascript dimana kod Featured Post anda disimpan.
ii) Pada halaman Configure HTML/JavaScript , lihat pada URL bar . ID widget anda berada dihujung URL .


3. Tambah kod <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> pada kod widget anda.

Contoh (sebagai contoh, misalnya ID widget saya adalah HTML13 ) : 
- Kod yang belum di edit seperti dibawah:
<b:widget id='HTML13' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
- Setelah diedit akan seperti dibawah:
<b:widget id='HTML13' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if></b:includable>
  </b:widget>
4. Klik Save Template
Baca Selengkapnya »
Posted by at 2 comments:
Labels:

Thursday, 2 January 2014

Tutorial Membuat " Random Post "

Screenshot Random 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:
<style>
#random-posts img{font-size:10px; float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqIWwjH9gYKezehYiehJjhoFAltP8nyCjmfdM8wVcdd-blsp9PdbXh4QZwef6BSMZGDjSqSqI-jzRtkKwdcRTVHfQtgKRO20xd9hUQobevjGLqTHWquhZk4h75ZqivUPh-Vo7HkdrvRak/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
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..
Baca Selengkapnya »
Posted by at 2 comments:
Labels:

Tuesday, 31 December 2013

Tutorial Membuat Sitemap Pada Blogger


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>
 p.labels a{color: #242424;
 text-transform: uppercase;
font-size: 15px;}
a.post-titles {
color: #0000FF;}
ol li{list-style-type:decimal;
line-height:25px;}
</style>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/qa2ym7msa66b6v9/sitemap_faiz_tutorial.js"></script>
<script src="http://faiz-tutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>
Keterangan:
  • http://faiz-tutorial.blogspot.com - Gantikan dengan LINK/URL blogger 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..
Baca Selengkapnya »
Posted by at 2 comments:
Labels:

Friday, 27 December 2013

Tutorial Membuat " Numbered Page Navigation " Pada Blog

Numbered Page Navigation
Screenshot Numbered Page Navigation

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">
.blog-pager,#blog-pager{
font-family:arial, serif;
font-weight:bold;
font-size:12px;
width:98%;}

.showpageNum a,.showpage a {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4PqEf-jN3X-K7Yw9NZeqAXkvAv3ISRlzvGBFRPLl29i750BbqMXI3WozlGHZdxNdjznwkkAmRjbA4sZCT64pZZw-aQWIGcqfhyphenhyphenAPau41GIIBt9T1-ibUsap7hOLOyPajh0WBsrXNHBE/s1600/lite.png) repeat-x;
background-position:0px -0px;
border:2px solid #555;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:0px 1px 0 1px;
padding:3px 10px;
color:#222;
line-height:30px;
cursor:pointer;}

.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4PqEf-jN3X-K7Yw9NZeqAXkvAv3ISRlzvGBFRPLl29i750BbqMXI3WozlGHZdxNdjznwkkAmRjbA4sZCT64pZZw-aQWIGcqfhyphenhyphenAPau41GIIBt9T1-ibUsap7hOLOyPajh0WBsrXNHBE/s1600/lite.png) repeat-x;
background-position:0px -30px;
border:2px solid #555;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#111;
-text-decoration:underline;}

.showpageOf{
margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4PqEf-jN3X-K7Yw9NZeqAXkvAv3ISRlzvGBFRPLl29i750BbqMXI3WozlGHZdxNdjznwkkAmRjbA4sZCT64pZZw-aQWIGcqfhyphenhyphenAPau41GIIBt9T1-ibUsap7hOLOyPajh0WBsrXNHBE/s1600/lite.png) repeat-x;
background-position:0px -0px;
border:2px solid #555;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
line-height:30px;
padding:3px 10px;
color:#222;}

.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4PqEf-jN3X-K7Yw9NZeqAXkvAv3ISRlzvGBFRPLl29i750BbqMXI3WozlGHZdxNdjznwkkAmRjbA4sZCT64pZZw-aQWIGcqfhyphenhyphenAPau41GIIBt9T1-ibUsap7hOLOyPajh0WBsrXNHBE/s1600/lite.png) repeat-x;
background-position:0px -30px;
margin:0 3px 0 3px;
padding:3px 10px;
line-height:30px;
cursor:pointer;
white-space:nowrap;
border:2px solid #111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#777;
text-decoration:underline;
font-weight:bold;
 </style>

<script type='text/javascript'>
//<![CDATA[
    var postperpage=6;
    var numshowpage=4;
    var upPageWord ='« Prev ';
    var downPageWord ='Next »';
    var urlactivepage=location.href;
    var home_page="/";

//]]>
</script>

<script type='text/javascript'src='https://dl.dropboxusercontent.com/s/msf4tmk4gr7gzs9/navipage-faiz-tutorial.js'></script>
 Keterangan:
  • var postperpage=6;  -  Gantikan nilai 6 dengan bilangan entri pada setiap halaman.
  • var numshowpage=4;  -  Gantikan nilai 4 dengan bilangan number navigation yang akan dipaparkan.
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
Baca Selengkapnya »
Posted by at 1 comment:
Labels:

Wednesday, 25 December 2013

BIOS Hot Keys


The following is a list of BIOS start up key list by manufacturer.

BIOS Computer Key Command(s)
Acer® F1, F2, CTRL+ALT+ESC
AST® CTRL+ALT+ESC or CTRL+ALT+DEL
Cannon F1
Castex DEL
Compaq® (Red Compaq Logo Screen) F10
CompUSA® DEL
Cybermax® ESC
Dell® Delete key
 Dell Dimensions 4100 - 8100 tap the F2 key at blue Dell screen
  • Dell 400 F1
  • Dell Dimension® F2 or DEL
  • Dell Inspiron® F2
  • Dell Latitude Fn+F1 (while booted)
  • Dell Latitude F2 (on boot)
  • Dell Optiplex DEL
  • Dell Optiplex F2
  • Dell Precision™ F2
Digital F2
eMachine™ DEL
Enpower (laptop) Ctrl+alt+s
Gateway® (F1 or F2)  2000 1440 F1 Gateway 2000 Solo™ F2
HP® (Hewlett-Packard) F1, F2, Del or F1 (at blue screen) Esc or F10
Hewlett Packard (Pavillion Notebook) F2 (Insyde BIOS) or F10
IBM (Aptiva) F1
IBM® F1 IBM E-pro Laptop F2 IBM PS/2® CTRL+ALT+INS after
 CTRL+ALT+DEL
IBM Thinkpad® (newer) Windows: Programs-Thinkpad CFG.
Intel® Tangent DEL
Leading Edge Ctrl+alt+s
Micron™ F1, F2, or DEL
NEC F1 or F2
Packard Bell® F1, F2, Del  (After Packard Bell start up screen) F1 or F2
Quantex Del key
Sony® VIAO (After Sony start up screen) F2 then hit F1
Sharp F2
Tiger DEL
Toshiba XP Laptops: From the desktop, click Start>>All
 Programs/Programs>>TOSHIBA Console>>TOSHIBA
 Console
Toshiba Portable PC(Phoenix) Press the [F2] key while the system processes its Power
 On Self Test (POST).
Toshiba Rebooting press ESC and F1 to enter the BIOS setup
Toshiba®  335 CDS ESC
  • Toshiba Protege ESC
  • Toshiba Satellite 205 CDS F1
  • Toshiba Tecra F1 or ESC
 If all else fails, hold down the space bar during startup. This should halt the machine and allow the customer to enter the startup key. The computer will display the BIOS key option.
IBM Thinkpad
300 
350 
500,510		Enter setup by pressing CTRL+Alt+F3 from a DOS prompt (you must be in DOS mode, not a DOS session under Windows).
310,315 
310E/ED 
315ED		BIOS Utility is entered by holding F2 while the ThinkPad logo is displayed after power on.
365C/CS 
365CD/CSD 
365E/ED		Enter setup by pressing CTRL+Alt+F11 from a DOS prompt (you must be in DOS mode, not a DOS session under Windows).
365X/XDWith the unit powered off, hold the F1 key and power the unit on. Keep F1 held down until Easy setup appears
360,355 series 
380,385 series 
560 series 
600 series 
701C/CS 
75x series 
76x series 
770 series		With the unit powered off, hold the F1 key and power the unit on. Keep F1 held down until Easy setup appears.

Note: On the TP 701, you can also access the Configuration area on BIOS by pressing the FN+F1 keys.
240 
390 
570
i Series 1200
i Series 1300
i Series 1400 
i Series 1500 
i Series 172x
A20
T20		Pressing F1 during startup when the ThinkPad logo is displayed.
700/C 
720/C		Pressing CTRL+ALT+INS when the cursor moves over to the upper right hand side of the screen right after the memory count.
710T 
730T		Hold the suspend/resume switch while powering on the computer.




Baca Selengkapnya »
Posted by at 1 comment:
Labels:
Subscribe to: Posts (Atom)