SHARE YOUR TUTORIAL : January 2016

Sunday, 10 January 2016

Tutorial Navigation Style #4

TUTORIAL NAVIGATION STYLE #4

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

</style>
<center>
<a href="URL/LINK" class="snavi">about</a>
<a href="URL/LINK" class="snavi">tutors</a>
<a href="URL/LINK" class="snavi">freeby</a>
<a href="URL/LINK" class="snavi">names</a>
</center>

CP by : Adam Faiz

Tutorial Navigation Style #3

[ LIVE PREVIEW ]

TUTORIAL NAVIGATION STYLE #3

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

CP by : Adam Faiz

Tutorial Navigation Style #2

[ LIVE PREVIEW ]

TUTORIAL NAVIGATION STYLE #2

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

<center>
<a class="snavi" href="https://www.blogger.com/URL/LINK">aboutme</a>
<a class="snavi" href="https://www.blogger.com/URL/LINK">tutorial</a>
<a class="snavi" href="https://www.blogger.com/URL/LINK">freebies</a>
<a class="snavi" href="https://www.blogger.com/URL/LINK">whatever</a>
</center>

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

TEMPLATE DESIGNER: Blogger > Layout > Add a gadget > HTML/Javascript
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

TEMPLATE DESIGNER: Blogger > layout > Add a gadget > HTML Javascript
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

[ LIVE PREVIEW ]

TUTORIAL SIMPLE NAVIGATION WITH HOVER #1

BLOGSKIN : paste atas code < / style >
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

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!

First,macam biasa from dashboard,blogger, > Layout > Add a gadget > HTML/Javascript
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

Tutorial : cara letak Ribbon Pada body Blog(bawh headr)

بسم الله الرحمن الرحيم|Asssalamualaikum Hehe 1st time seumur hidup buat tuto hahaha... saja saja je muahehehe..sesaje je nak share ngan korang ilmu ilmu yang ada padaku nie hehe..dengan tuto nie bolehla jugak korang cantikkan blog korang tue hehe.. untung korang pun dapat !! ok jom kita ke tuto tue hhee Ribbon on the body blog??? benda nie jarang sekali dengar kan?? tapi ada jew blogger blogger yang buat benda nie kat blog diorang? nie contoh image ribbon on the body blog:

hah! nak buat?? jom jom!!

step 1:

Korang cari kod nie #content-wrapper {
Copy kod yang aku bagi kat bawah nie:-

background:url('URL IMAGE') repeat-x;
line-height:10px;

-preview dulu oke kalau takde error or rintangan kira okla tue ;)-

step 2:

Cari kod nie #main-wrapper {
Gantikan code> colour Background untuk main wrapper nie kepada transparent contoh: -

#main-wrapper {
margin-left: 14px;
padding-top:38px;
width: 550px;
float: left;
border-radius: 0px;
background: transparent;display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

step 3:

Cari kod #sidebar-wrapper {
gantikan colour background tue kepada transparent macam di step 2

Siap hehe!!

Nota kaki : -

Url image : boleh digantikan dengan image image yang korang suka.

nie ada contoh image yang bole korang guna..

silakan ambil muahehehe

http://sl.glitter-graphics.net/pub/989/989187lp6iabbqwf.gif

http://sl.glitter-graphics.net/pub/729/729336dsmt00qvjp.gif

http://sl.glitter-graphics.net/pub/1122/1122876oldon71q31.gif

http://sl.glitter-graphics.net/pub/989/989180um8j5de50v.gif

http://sl.glitter-graphics.net/pub/989/989200szzhrc8s9l.gif

Selamat mencuba!!!

cp by :

Tutorial Stylish Fanpage box

Tutorial Stylish Fanpage box

Nak cantikkan fanpage box korang macam kat atas tu? nak letak background cantik-cantik kat fanpage box korang? nak hias fanpage box korang supaya nampak lebih ummphh? meh sini adam tolong ajarkan,tolong perhatikan betul-betul,step by step: