everything here is mine. unless stated.
Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

Tutorial: Fixed and floating header


//Assalamualaikum\\

Biasa kita nampak header macam ni ada dekat blogskin dengan tumblr je kan? So bila dah macam tu, I think I want to do it like that but without changing my template. The only way to do it is like tutorial below.

Note: I'm using Simple Template, so I'm not sure if this tutorial can work with other template.

STRICTLY NO RE-POST OR RE-TUTORIAL
  1. Dashboard > Template > Edit HTML
  2. Open <b:skin>•••</b:skin>
    Tahu kan macam mana nak open supaya boleh nampak anak-anak code untuk blog tu? Hehe
  3. Ctrl + F and find
    /* Header
  4. Dekat bawah tu kau orang boleh nampak ada code .header-outer {
  5. Copy code di bawah
    position:fixed; z-index:200; background-color: #fff;
    margin-top:-40px;
  6. Dan past kan di bawah .header-outer {
  7. Kau orang boleh adjust nombor yang berwarna merah itu mengukut kesesuaian header kau orang. Tak nak la sampai tutup title post pula, kan?
Then you're done. Good luck :)

Tutorial: Header penuh / macam saya


Assalamualaikum.

Lots of people have been asking macam mana saya buat header penuh (macam dalam gambar). Actually, aku pun tak tahu what had I done ._. tapi lepas godek semua code, finally jumpa :)

header penuh
  • dashboard > template
  • ctrl + f dan cari code /* Mobile
  • copy dan paste code yang saya bagi atas /* Mobile
.header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);}

quote tulisan jepun pada header

  • open your photoshop
  • open your photo
  • search any quotes in japanese / chinese (whatever suit you)
  • copy dan paste tulisan jepun tu atas gambar header korang
kalau gambar quote warna putih:
  • image > adjustment > invert
  • tukar blending to lighten
kalau gambar quote warna hitam, terus tukar blending to lighten.

these are several japanese quotes for you :





enjoy! :)


Tutorial: Pop up untuk blogger

Assalamualaikum

So basically orang buat pop up untuk blogskins dan blogger and buatkan some of you wonder how I put it in template designer. so let's begin :)

  • layout > add gadget > html / javascript
1. ini code untuk style pop up (warna, kedudukan) copy code di bawah dan paste dalam kotak tersebut

<body><style type="text/css">
#fade {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none;
background: #FFFFFF;
padding: 20px;
float: left;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
2. ini code javascript
<head><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a # 
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size
    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close Window" alt="Close" /></a>');
    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });
    //Fade in Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 
    return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});
});
</script></head></body>
3. ni code html
<div id="02" class="popup_block">
BLEH BLEH BLEH
</div>
4. copy dan paste code di bawah kat mana-mana korang nak dia muncul
 <a href="#?w=500" rel="02" class="poplight">your title</a>
5.  in case korang nak tambah lagi pop up tu, copy code no. 3 dan 4 lagi sekali tapi tukar nombor yang saya merahkan kepada 03 dan seterusnya.

6. PASTIKAN KORANG COPY DAN PASTE SEMUA CODE DALAM TURUTAN

truth to be told, saya tak reti sangat macam mana nak buat tuto about this. but kalau ada apa-apa yang korang tak faham, feel free to ask me :)

Tutorial: Guna @font-face

//Assalamualaikum\\

Pastikan korang download full template sebelum buat ni sebab korang kena save untuk tengok hasilnya.

Template designer
  • Dashboard > Template > Edit HTML
  • Klik pada kotak code tu and tekan Ctrl + f serentak dan search /* Header
  • Copy code di bawah dan paste atas /* Header
@font-face{
font-family: nama font;
src:url(url font);
}
  • Upload font yang korang pilih dekat >SINI<
  • Tukar perkataan berwarna pink dengan font korang
  • Contoh:
@font-face{
font-family: babydoll;
src:url(http://static.tumblr.com/sxnn4yv/0cZn75ngp/babydoll.ttf);
}
Classic Template

  • Dashboard > Template
  • Tekan Ctrl + f serentak dan cari <html>
  • Copy code di bawah dan paste bawah <html>
    <link href='url font' rel='stylesheet' type='text/css'></link>

Tutorial: Letak button follow Twitter

//Assalamualaikum\\

This tutorial for people who have twitter only, k. Of course.


  1. Dashboard > Template > Add Gadget > HTML / Javascript
  2. Copy code di bawah dan paste dalam ruangan tersebut
    <a href="your twitter url" class="twitter-follow-button">Follow @flwrpunk</a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
biru: url twitter korang
merah: username twitter korang

Tutorial: Disable Ctrl + U

//Assalamualaikum\\

Ctrl + U aka disable open page source is a good thing to prevent people from taking your codes.

Template designer

  1. Dashboard > Template > Edit HTML
  2. Tekan ctrl + f serentak dan cari </style>
  3. Buangkan code <body> dan rukar dengan code di bawah
<body onkeydown='return false;'>
 Classic template
  1. Dashboard > Template
  2. Tekan Ctrl + f serentak dan cari code </style>
  3. Copy code di bawah
<body onkeydown='return false;'>
  1. Paste di bawah code </style>
  2. Preview & save

Tutorial: Image Hover [rotate and gone]


//Assalamualaikum\\


  • dashboard > template > edit html > proceed

  • find /* Header

  • copy this code and paste it above the code

img {
 -moz-transition: 1.5s;
-webkit-transition: 1.5s;
}
 img:hover {
-webkit-transform: rotate(360deg);
 filter: alpha(opacity=1);
opacity: .01;
 -moz-transition: 1.5s;
 -webkit-transition: 1.5;
}

Tumblr Tutorial: Update tab


//Assalamualaikum\\


  • Paste this code with all other meta links;

<meta name="image:titletab" content=""/>


  • Paste this code before </style>

#fag {
text-align: center;
font-size: 10px;
position:fixed;
left:15px;
top:-101px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}

#fag:hover {top:0px;}

#got {
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-width:1px;
border-color:#FFFFFF;
padding: 5px 0 5px 0;
background: #fff;
width:100px;
height:90px;
z-index: 9999;
}

#gottab img {
text-align: center;
color:#454545;
height:25px;
padding: 2px 0 8px 0;
background:#fff;
width: 80px;
height:auto;
}


  • Paste this code after <body>

<div id="fag">
<div id="got"> <center>
<p>/your update goes here/</p>
</center></div>
<div id="gottab"><img src="/image url/"></div>
</div>


Tutorial: Drop down navigate


//Assalamualaikum\\


  • Dashboard > Layout > Add Gadgets > html/JavaScript
  • Copy and paste this code into the html place
<form action="http://www.myspacegens.com/handler.php?gen=redirect" method="post"><select name="url" style="width: 150px; height: 20px; font-size: 12px; background-color: #ffffff; color: #faafbe; border: 1px solid #faafbe;"><option value="Link" />Home<option value="Link" />Stuff<option value="Link" />About<option value="Link" />Friend</select> <input type="submit" style="border-width: 1px; border-color: #ffffff; font-family: Trebuchet MS; color: #ffffff; background-color: #faafbe;" value="Go!" /></form></center></center></center></div></center></center>
  • Colour adjust:
    pink - colour code
    orange - link
    blue - name
  • Save.

Tumblr tutorial: Making blogroll page

*example*

//Assalamualaikum\\

1. Get a blogroll page. You can always wandered around tumblr until you get it.
2. Go to customize > pages > add page. Click custom layout instead of standard layout.

3. In the page URL, type blogroll. Put your blogroll code into the white space.
4. If your theme support page links, select show a link to this page and add the title of your page.
5. Click save page and you're done.

In case you can't fine any blogroll theme, you can click HERE.

Feel free to comment if you don't understand. Arigato.

Tutorial : Strange Cube music player


Assalamualaikum

Ini ialah strange cube music player.

  • Click sini untuk dapatkan lagu
  • Click sini untuk dapatkan music player
  • Generate code.
  • Copy paste dekat mana-mana korang suka.
  • Ok bye.

Tutorial ; Image hover 2 //blogskin


//Assalamualaikum\\

  • Dashboard > Template
  • F3 and search </style>
  • Copy and paste these codes above </style>

img {
border-radius:10px;
opacity:0.6;
-webkit-transition-duration:2.5s;
}
img:hover{
border-radius:30px;
opacity:10.8;
-webkit-transition-duration:2.5s;
}

  • Preview and save.
Adios!

Tutorial ; Image hover 1 //blogskin



//Assalamualaikum\\

  • Dashboard > Template
  • F3 and search </style>
  • Copy and paste these codes above </style>
img, a img {
opacity: .70;
-webkit-transition: 1.4s;
-moz-transition: 1.4s;
border-radius:10px;}
img:hover, a:hover img {
border-radius:30px;
-webkit-transition: 1.4s;
-moz-transition: 1.4s;
opacity: 100.0; }
  • Preview and save.
Adios!

Tutorial ; Snow effect for blogskin


//Assalamualaikum\\

  • Dashboard > Template
  • Press F3 and search <head>
  • Copy and paste these code under <head>

<script type="text/javascript">
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
//Configure below to change URL path to the snow image
var snowsrc="URL SNOW"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "windowheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>

  • Preview and save.
  • Change URL SNOW to your snow. Can take it here;
http://i13.servimg.com/u/f13/11/52/70/02/snowba10.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nHu3OoIp7KT1Jk6p0mN6aj9MHN5UCwwBpawpt-WANeHBtaGUzf2oSK4nXx7lm1pzNPlKorle5t3DBIs_DrGegNYu1U_aYUUaWSIb0iA9bSfTqYM06THjWdEqEEexp-OPrDB0wgs6_g/s1600/th_pink1-1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisTTK1qVhk6wIxSG7jH4oIfqDIuTWxVm15VcrEtWIvt_MK96dDa070Xm2OrL-L3EPjdyshqg_tEph7qcdE-qhM06d0nf6n5FF1aNSV613E1eFfKtZGXIKX6d2HjXTdrEbSIF6h6WiKiw/s1600/th_snowblue.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDZxy_WAv_zhIMkJzoMuuSZEw9cwqXytVruZa0RZwRhqeRmnJRSiwz8rHiB4vfLrsCQ6OPbIA7tXqEMQwGfL31rY4_ojRIKxOJ7yt-dlR8dZ3M99IH-hQBv84DQHclW7RXaDcAK9Tkqg/s1600/th_purplesnow.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkI01PDd0K-DeitdIags43O9sMVW-bpNiREGbT4W77PBE4bdLj6_vnLLhjz-xVZCebfjbKcUtUGj66hggbmX046E5dvpa63-EKCynKTMtSq5PhZgCuP0JrXirmKoXnB5DJMW0-UxKwg/s1600/th_blacksnow.png
Credit ; Anis Diyana

Adios!

Tutorial ; Older post for blogskin


//Assalamualaikum\\

  • Dashboard > Template
  • F3 and search </blogger>
  • Copy and paste these code below </blogger>
<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts$>">gt;">amp;gt;">Older Post</a></OlderPosts> | <NewerPosts><a href="<$NewerPosts$>">Newer Posts</a></NewerPosts>
  • Preview and save.
Adios! x

Tutorial ; Redirect old url to new url


//Assalamualaikum\\

People nowadays love to changing theur url. LOL! Me too :}

  • Make a new blog.
  • Put old url as your new blog's url.
  • Go to dashboard > Design > Edit Html
  • Click F3 and search <head>
  • Copy and paste this under <head>
<META HTTP-EQUIV="Refresh" CONTENT="1; URL=NEWURL">
  • Change NEWURL to your new url.
  • The number 1 in purple is the amount of seconds before the user is redirect. You can change this in your own needs.
  • Save.
Adios! x

Tutorial ; Button LIKE di setiap post. //blogskin


//Assalamualaikum\\

I'm gonna credit this tutor to kak nysa :)

  • Go to dashboard > template
  • Tekan F3 and search </blogger>
  • Copy code di bawah
<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>" scrolling="no" frameborder="0" style="height: 62px; width: 100%" allowTransparency="true"></iframe></br> 

  • Paste code di atas  </blogger>
  • Save.
Adios! x

Tutorial : Delete Subscribe To : Post atom.


//Assalamualaikum\\

1. Dashboard > Design > Edit html > Tick expand widget templates
2. Cari code ni ;
<b:include data='feedLinks' name='feedLinksBody'/>
3, Dah jumpa, delete code tu.

Adios!

Tutorial : Delete Subscribe to: Post Comments (Atom)


//Assalamualaikum\\

1. Dashboard > Design > Edit html > Tick expand widget templates
2. Cari code ni ;
<b:include name='feedLinks'/>
3. Lepas dah jumpa, delete code tu.

Adios!

Tutorial : Delete attribution


//Assalamualaikum\\

1. Dashboard > Design > Edit HTML > Tick expand widget templates

2. cari code ni :
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

3. bila dah jumpa, tukar true tu jadi false

4. save.

5. pergi dekat page elements dan edit Attribution 'powered by blogger' . ada button remove, tekan tu. save.

adios :)