Pages

Sunday 10 January 2016

Tutorial Navigation Style #4

TUTORIAL NAVIGATION STYLE #4
  1. BLOGSKIN : paste atas code < / style >
  2. DENIM / SIMPLE : Add a gadget > HTML/Javascript
  CP by : Adam Faiz

Tutorial Navigation Style #3

TUTORIAL NAVIGATION STYLE #3
  1. BLOGSKIN : paste atas code < / style >
  2. DENIM / SIMPLE : Add a gadget > HTML/Javascript
 
 
 CP by : Adam Faiz

Tutorial Navigation Style #2

TUTORIAL NAVIGATION STYLE #2
  1. BLOGSKIN : paste atas code < / style >
  2. DENIM / SIMPLE : Add a gadget > HTML/Javascript
CP by : Adam Faiz

Tutorial Circle Navigation With Hover

This is how it looks like <3

Tutorial Circle Navigation With Hover
Assalamualaikum,lepas penat beraya,terus mengadap laptop,ingat nak bagi freebies header tadi,tapi 'ter' buat navigation pulak -.-,nampak tak kemurah hatian aku ? Lololol.Untuk pengetahuan,ni tutorial navigation yang kedua aku buat selepas yang ini {click}.STP,kalau ada yang berminat boleh terus follow step by step tuto kat bawah <3.
LIVE PREVIEW:

Home

About

Tutorial

Freebies
  1. TEMPLATE DESIGNER: Blogger > Layout > Add a gadget > HTML/Javascript
  2. BLOGSKIN :  Paste atas </style>
a.circle{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:2px;
display:inline-block;
text-align:center;
background: #eee;
color:#000;
font-family:calibri;
text-transform:uppercase;
font-size:11px;
width:60px;height:35px;
border:5px solid pink;
padding:5px;
border-radius:50%;
}
a.circle:hover{
text-align:center;
color: #fff;
font-size:11px;
border:5px solid white;
background: pink;
-moz-box-shadow: 0 0 5px 5px #eee;
-webkit-box-shadow: 0 0 5px 5px #eee;
box-shadow: 0 0 5px 5px #eee;
-webkit-transform: scale( -1.0) rotate( 540deg);
-moz-transform: scale( -1.0) rotate( 540deg);}
</style>
<a class="circle" href="lINK/URL"><br />Home</a>
<a class="circle" href="lINK/URL"><br />About</a>
<a class="circle" href="lINK/URL"><br />Tutorial</a>
<a class="circle" href="lINK/URL"><br />Freebies</a></div>
P/s: Kalau ada yang RE-TUTO,tolong letak credit!
 CP by : Adam Faiz

Tutorial Button Navigation

ASSALAMUALAIKUM
Hari  khamis ni dah raya kan? lol.Bulan puasa ni memang bosan kan? tak tahu nak buat apa.tadi try main campak-campak koding kat HTML editor,and tak sangka pulak jadi button navi ni,kahkah -.-.For your information,this is my own codes,kalau ada yang guna,tolong creditkan bole? kalau taknak pun takpe,but better cedit :'3
LIVE PREVIEW:
about tutorial freebies
  1. TEMPLATE DESIGNER:  Blogger > layout > Add a gadget > HTML Javascript
  2. BLOGSKIN: Template > </style>
.graybutton {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f5f5f5), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #f5f5f5 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ededed');
background-color:#f5f5f5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:calibri;
text-transform: uppercase;
font-size:12px;
font-weight:bold;
padding:6px 50px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
width:50px;
display:inline-block;
margin:2px;
text-align:center;
}
.graybutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #f5f5f5) );
background:-moz-linear-gradient( center top, #ededed 5%, #f5f5f5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#f5f5f5');
background-color:#ededed;
}
.graybutton:active {
position:relative;
top:1px;
}
</style>
<a class="graybutton" href="LINK URL">about</a>
<a class="graybutton" href="LINK URL">tutorial</a>
<a class="graybutton" href="LINK URL">freebies</a>
</div> 
 
 CP by : Adam Faiz

Tutorial Simple Navigation With Hover #1


TUTORIAL SIMPLE NAVIGATION WITH HOVER #1

  1. BLOGSKIN : paste atas code < / style >
  2. DENIM / SIMPLE : Add a gadget > HTML/Javascript


NOTAPENTING
  • MERAH -  Tukar warna ikut suka hati

CP by : Adam Faiz

Tutorial Highlight text colour

ASSALAMUALAIKUM
Tutorial ni direquest daripada someone ^^v kalau nak tahu,highlight text colour tu macam mana,cuba highlight text ni : SAYA BLOGGER text tu automatik jadi kaler merah kan? nak buat ke? meh sini:
Tutorial Highlight text colour 

1st STEP:
1.Sign in blogger > Template > Edit HTML > tekan simbol hitam kat tepi tu
2nd STEP:
1. CTRL+F cari kod ni : /* Header

3rd STEP:
1.Kalau dah jumpa,copy code ni:

::selection {
background:transparent;
color: red;
}

4th STEP:
1.Paste kod yang adam beri tu kat atas /* Header
5th STEP:
1.Preview dan save :)
P/S: yang adam merahkan tu warna highlight text.letak warna yang korang berkenan kay? ^^V
 
 CP by : Adam Faiz

Tutorial Letak Border Keliling Body Blog

Assalamualaikum dan Selamat petang
Next tutorial.Banyak yang request hari ni,adam buat satu-satu ya? Nak request tuto/freebies? click sini {sini} Tutorial ni boleh diguna pakai untuk template simple dan denim,kalau yang blogskin tu tak sure.So,here we go !
Tutorial Letak Border Keliling Body Blog

  • Denim Template : CTRL+F search = #content-wrapper {
  • Simple template : CTRL+F search =  .content-inner {
Copy Code:
border: 1px dashed #E7D8BF;


  • Denim : Paste bawah  #content-wrapper {
  • Simple: Paste bawah  .content-inner {
  • Nota: Simple template.Buang anak code di bawah code  .content-inner { sebelum paste code yang diberi.Contoh ;
Ubahsuai:
-Purple text : ketebalan border
-Orange text: jenis border [dashed,solid,dotted]
-Green text: color;
#Selamat mencuba ! Harap membantu.Kalau tak faham komen kay? nak suh buat pun boley ;)
 CP by : Adam Faiz

Tutorial letak cursor dalam blog

tutorial letak cursor dalam blog
Gambar hiasan*
Tutorial letak cursor dalam blog
I thought ramai yang dah tahu pasal tuto ni,tapi adam sesaje je nak update,sebab i think,masih ada lagi sebahagian orang yang belum tahu pasal ni,so,let's go!
  1. First,macam biasa from dashboard,blogger, > Layout > Add a gadget > HTML/Javascript
  2. Copy code di bawah ni dan paste di bahagian HTML tadi:
<style type="text/css">body, a, a:hover {cursor: url(URL CURSOR), progress;}</style>
p/s: gantikan text yang adam merahkan tu dengan URL cursor yang korang nak,kat bawah ada freebies,boleh pilih mana berkenan:

SELAMAT MENCUBA! ^^
CP by : Adam Faiz

Tutorial Letak Border Keliling Post Body

Assalamualaikum dan Selamat Petang
Tutorial Letak Border Keliling Post Body
  • Simple and Denim : CTRL+F Search = .post {
  • Delete anak code bawah code .post { tadi
Copy Code

background-color: #fff;
border: 1px dashed #E7D8BF;
margin: 0 0 1.5em;
padding-bottom: 1.5em;
padding: 6px;

  • Paste bawah code yang dicari tadi. :)
  • Ubahsuai ikut citaras sendiri.k.bye ! 
CP by : Adam Faiz