[ LIVE PREVIEW ]
TUTORIAL NAVIGATION STYLE #4
- BLOGSKIN : paste atas code < / style >
- DENIM / SIMPLE : Add a gadget > HTML/Javascript
Sunday, 10 January 2016
Tutorial Navigation Style #3
[ LIVE PREVIEW ]
TUTORIAL NAVIGATION STYLE #3
- BLOGSKIN : paste atas code < / style >
- DENIM / SIMPLE : Add a gadget > HTML/Javascript
Tutorial Navigation Style #2
[ LIVE PREVIEW ]
TUTORIAL NAVIGATION STYLE #2
- BLOGSKIN : paste atas code < / style >
- DENIM / SIMPLE : Add a gadget > HTML/Javascript
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>
-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:
- 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>
-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 : /* Header3rd 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 !
Subscribe to:
Posts (Atom)
