FYEAHSUSAN

Posts

Showing posts with the label tutorials

How to make falling petals effect on your blog

Last years' christmas i showed you a tutorial about how to add snow storm effect on your blog . Two years' ago i showed you a basic tutorial of basic snow effect + some cute christmas cursor as a bonus. How about some different effects now? In this tutorial i will show you a few simple steps to add falling flower petals to your blog. This effect is so pretty, and it's very suitable for vintage lovers or pink lovers. Any will do. Demo is on my tumblr. The only thing you have to do is paste this script code right below on <head> code : then, click Save. For modern blogger template, you only have to : Go to dashboard > design > add a gadget > HTML/javascript Copy dan paste the code on the HTML/Javascript windown you opened Click save to blogger. That's it. I hope you enjoy this simple tutorial about adding falling petals to your blog. I will try to keep posting tutorials for you guys. May you have a joyful and wonderful christmas this...

How to add snow storm christmas effect

Wow, years after years passed by, and here's another christmas on the way. I personally adore christmas, cause it's full of warm and togetherness, mistletoes, presents, and sweet meals. Of course you wouldn't want your blog to look all flat and normal while everybody's blogs looks christmas-ey right? I'm not asking you to redecorate the whole layout of your blog with christmas colour and all; it's too tiring. Simple little things can make a big difference, like my blog right now. Do you see the christmas snow falling from above? Not just that, try moving your cursor; the snow will follow your cursor wherever it goes. Cool right? In this tutorial i will teach you how to add that effect. It takes no effort, at all. One simple copy-paste and voila. You just need the magic code right below on your template below the <head> code.: click save, and there'll you have it. Simple yet pretty, right? :D Of course you have to change your blog background ...

How to make a popup

Example : Follow me? So, if you want a popup like that whether it's for cbox or follow button or whatever, here is how. First, you choose the link that you wanna make popup. Then at the href section you put javascript:void(0); so it became like this : href="javascript:void(0);" then after putting that, insert onClick=window.open(" http://YOUR LINK ","Ratting", "width= YOURDESIREDWIDTH ,height= YOURDESIREDHEIGHT ,0,status=0,"); followed by text you wanna show. Overall it became like this: <a class="navi" href="javascript:void(0);" onClick=window.open(" http://YOURLINK ","Ratting","width= YOURDESIREDWIDTH ,height= YOURDESIREDHEIGHT ,0,status=0,");>YOURDESIREDTEXT</a> Simple as that. But if you got a problem, comment on this post :)

How to add christmas snow effect + free cute cursors!

Christmas is coming! Who doesn't like christmas anyway? Turkeys, christmas tree, santa claus, smiles, the moment of togetherness.. :D Of course you would want your blog to have that sense of christmasy, right? Well you've came to the right place. I have the script for making your blog have this falling snow effect. Just paste this script between <head> and </head> code. You might wanna add some cute christmas cursors too! Check out these : Sweet Candy Cane Cursor Rainbow Candy Cane Cursor Christmas Santa Stocking Cute Gingerbread Man Cute Christmas Reindeer Small Blue Candy Cane Cute Santa Claus Decorated Christmas Tree Snowy Christmas Tree Pink Heart Snowman Blinking Gingerbread Red Hat Snowman More? Click here . P.S : All cursors belong to cursors4u . If there's a problem you can comment on this post. Have a jolly christmas!

Text symbols

Not really a tutorial, but i'll label it as one so you guys can find it easier :D Smileys ☹ ☺ ☻ ت ヅツッシ Ü ϡ ﭢ Copyright, registered trademark ™ ℠ © ® ℗ Money, Currency symbols $ ₣ ¢ £ ¤ ¥ ฿ ₠ ₡ ₢ ₣ ₤ ₥ ₦ ₧ ₨ ₩ ₫ ₪ € ＄￠ ﹩ ￡￥￦ Blackboard bold (Double-struck) letters ℂ ℍ ℕ ℙ ℚ ℝ ℤ Antique letter characters ℬ ℰ ℯ ℱ ℊ ℋ ℎ ℐ ℒ ℓ ℳ ℴ ℘ ℛ ℭ ℮ ℌ ℑ ℜ ℨ ℵ Triangles ▲◣◢ ◥▼△▽ ⊿◤◥ △ ▴ ▵ ▶ ▷ ▸ ▹ ► ▻ ▼ ▽ ▾ ▿ ◀ ◁ ◂ ◃ ◄ ◅ Maths, Numbers, Half, third, parts ⅟½⅓¾⅔⅕⅖⅗⅘⅙⅚⅛⅜⅝⅞ Comparison signs ≂ ≃ ≄ ≅ ≆ ≇ ≈ ≉ ≊ ≋ ≌ ≍ ≎ ≏ ≐ ≑ ≒ ≓ ≔ ≕ ≖ ≗ ≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟ ≠ ≡ ≢ ≣ ≤ ≥ ≦ ≧ ≨ ≩ ⊰ ⊱ ⋛ ⋚ Integrals ∫ ∬ ∭ ∮ ∯ ∰ ∱ ∲ ∳ Index / power numbers and letters ⁰ ² ⁱ ⁲ ⁳ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌ ₍ ₎ ₏ Roman numerals Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ Ⅼ Ⅽ Ⅾ Ⅿ ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ ⅼ ⅽ ⅾ ⅿ Circled (bubble) Numbers ➀➁➂➃➄➅➆➇➈ ➉ ➊➋➌➍➎➏➐➑➒➓ Alphabet letters ⒶⒷⒸⒹⒺⒻ ⒼⒽ ⒾⒿⓀ ⓁⓂⓃ ⓄⓅⓆ ⓇⓈⓉ ⓊⓋⓌⓍⓎⓏ ⓐⓑⓒⓓⓔⓕⓖⓗ ⓘⓙⓚⓛⓜⓝ ⓞⓟⓠⓡⓢⓣ ⓤⓥⓦⓧⓨⓩ Foreig...

How to add calendar to your blog

I'm in the mood for making tutorials today :3 So well you are a blogger. Night and day. And one day you're thinking "hey maybe i should get a calendar on my blog just to remind me but i don't know where should i get the code", well fear not, this tutorial is going to give you one! 8D Just past this code to your desired place (ex. sidebar, on top of the page, or wherever) To change the font : find the word FONT face='arial' above and change arial into your desired font To change color, add border, and other styles : find style='font-size : 12px; color : #000000;' cellpadding=0 cellspacing=1 above and add any CSS code you want after the word style=' To change the width and height : find the word table width=170px height=170px border=0 above and change 170px into your desired width and height. If you have any problems, comment on this post :D

Blogger reaction button

NOTE : I do not own this blogger reaction buttons. I only modify the code a little bit so that classic template users can use it. All credits is still to blogger.com, our best host for blogging. Have you ever felt like wanting to have a reaction button like facebook's like button on your classic template, only it's a plain one and you can change the word LIKE into something else? 2 years ago blogger created this reaction buttons that can get you one click feedback from your readers . But unfortunately, blogger only created it for upgraded template ones, while classic template users can't have that kind of advantage. Since most of the bloggers i know is a classic template users, i decided to find that piece of code and modify it a little so that classic template users can use it as well as upgraded template users. Here is what the code looks like on upgraded template : <span class='reaction-buttons'> <b:if cond='data:top.showReactions'> ...

How to redirect your relink URL

Have you guys checked out my previous URL susandwiasmorojati.blogspot.com and cat-ass-trophe.blogspot.com ? No,they didn't have any pretty relink designs, but have you guys realized that my relink page redirect you to my current blog? ;D i found this very useful for relink pages, especially when our readers are too lazy to even click to our new blog and just close away our blog ;O so to prevent that, why not we just redirect them? :D how to redirect our relink page then? good question. here is the magical code. <meta content='2;url=http://YOUR-URL.blogspot.com' http-equiv='refresh'/> By adding the above code to your relink page, your page will redirect itself to your new blog URL. :D just replace http://YOUR-URL.blogspot.com to your own URL. Note the number 2 in the meta content. The number 2 sets how much seconds before the website redirects it to a new page. You can change that into 10 seconds or less/more if you have a message to show befor...

How to style your scrollbar

P.S : This will only work in Google Chrome, Safari and RockMelt. Sorry Mozilla Firefox users. :( There are lots of people asking me how to make scrollbar like mine. Well because today i'm feeling awesome (LOL RANDOM MUCH) i will tell you how to do it. GIMME SUM DRUMROLLZZZ. For my scrollbar, i used this code : ::-webkit-scrollbar { width: 10px; height: 10px; background: #ffffff; } ::-webkit-scrollbar-track-piece { } ::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: #54777B; -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,1); } ::-webkit-scrollbar-thumb:horizontal { height: 0px; } ::-webkit-scrollbar controls the entire unit of your entire scrollbar. background, width, height, you can control it through here. ::-webkit-scrollbar-track-piece styles the thin background where the scrollbar moves. i leave it empty there cause i want my background to be transparent. ::-webkit-scrollbar-thumb:vertical is th...

How to add favicon to your blog

Before knowing how to have a favicon, one must know the definition and the use of it. Favicon is a shortcut icon, an URL icon someone have on their own website, and usually it shows right besides your address bar. People are using favicon on their website so that visitors and traffic acknowledge your website. It's like a logo on a company. Once they see your favicon, they know right away it's your website (unless people is copying your favicon which is not cool at all =="). It's not a javascript, it's not an iframe. It's just an ordinary HTML code that will give you a beautiful favicon right away! :D If you search 'how to make favicon' on Google, there's probably a lot of sites that'll teach you how to make a .ico format picture, and upload it to your host and blah blah blah. I've been there before, and it's stressful, it's complicated, there's like thousands of steps that you must do and others. But actually, you just have to...

How to change the style of your list type menu

People like variations in their own blog. They like difference. The more unique your blog is, the more special your blog. Let's start being different from the most tiniest things like this list type menu. Example : One Two Three Four Above is the example of a list type. If you set it as default, you would see a list of numbers only. Here i used squares for the markers because i set it to squares. Now if you want it to set it into different type of markers or even numbers of different languanges here is the steps. Go to your Dashboard ► Template, Click CTRL + F and find this code : #labelList {} ul#label-list {margin-left:-40px; margin-top: -5px;} ul#label-list li {display:inline;} ul, ol { list-style-type: square ; margin-left:-15px;} if you don't have one in your classic template, you can add it down. You can see the bold text there, i set the list-style-type into square. If you don't want it to be square, you can choose from the list below: none : No ...

How to add a searchbox into your blogger

I know that most of my cybermates are using classic template and since we have to write HTMLs from scratch we might forgot some important things that may be useful to our readers like archives and such, but since our readers refer simple browsing and exploring how about making a search box so that our readers can type and read away with no sweat? ;) So if you're wondering how to make a searchbox here is the code : ><br /> <form action="/search" id="searchThis" method="get" style="display: inline;"><input id="searchBox" name="q" type="text" /> <input id="searchButton" type="submit" value="Go" /></form> Change the "Go" word to any text like "Search" or "Hit" you want to display in button to hit the search. Your search box will appear like this below. If you want to add some styling like this example below : U...

Old Post Editor & Updated Post Editor

Maybe some of you guys know already what is the difference, but still imma post it cause' i think it's gonna be useful :"> The following are the complete explanation about Old Post Editor : Explanation: ( 1 ) Title : This field is to type the title of article you are going to write. ( 2 ) Edit HTML : This tab is to switch Editor from Compose to HTML mode. If you are not familiar with HTML codes and coding, do not use this editor mode. ( 3 ) Compose : Type your articles in this mode because this editor mode has supported WYSIWYG (What You See Is What You Get), so you do not have to understand HTML language codes. Just type your articles there because the results displayed on your blog will be the same as you have typed. If you do not know much about HTML codes, you had better choose this editor mode. ( 4 ) Font : This is to choose the fonts you would like the most. The available fonts are: - Arial - Courier - Georgia - Lucida Grande - Times - Tr...

How to add scrolling back to top button

Try scrolling my page down and see my back to top button at the right-bottom side of the page. You want some of that? Now you got it. I'm going to teach you how to do a smooth scrolling back to top without jumping up straight to the top of the page :D Consider yourself lucky cause i find that piece of script really long time. :S So, if you want just a ordinary back to top link without an image here's the steps. First, place this script between your <head> and </head> code : NOTE : remove all the <br /> or it won't work ==" Then put this link between your back to top text. <a href="javascript:dd_scrolltotop()">Back to top?</a> Done. It should be working properly and will scroll smoothly to the top now. If you want the back to top link to appear after a few times you scroll the page down like mine, use this code : replace http://YOURIMAGEURL.png to your own image. Note that you don't have to add a...

How to make spoiler button

I REALLY IN THE MOOD FOR GIVING TUTORIALS LAH, I TELL YOU. LOLz. gonna spam a lot of tuts today. so now i'm going to teach you how to make a spoiler button 8D there are 3 kinds of spoiler button, just so you know. First, a button that dissapear when you click them. Second, a button that don't dissapear when you click. Third, a button that will change the text of the button by clicking it. :S (do you guys get it?) So which one do you prefer? Still, i'm going to show you how to make all of them though. The first one, a button that dissapear when you click them. Here's the awesome code : <div style="border: 1px solid white; padding: 0px;"><div><button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Wrote something you wanna show when your mouse hovers over"><span style="...

How to add Recent Comments on Blogger.

Yo, peeps. Today imma reveal the secret of my Recent comments code like the one at my sidebar. i find this very useful cause sometimes if people comment on your previous posts you can't see it and it's kinda sad if you don't reply their comments so, i'm going to give you the codes. NOTICE : change yourURL.blogspot.com to your own URL and voila :D you can post it wherever you like. if you wanna change how much comments you're going to show just simply change the number of var a_rc=5 to how much you like. That's it, hope it helps.

How to make a private post on Blogger.

the password for below is = iloveyou . Enter password here are steps on how to make a private post like above. Step 1 : Go to dashboard, click template, and paste this code into your HTMLs. make sure it's between <head> and </head>. <script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script> Step 2 : Go to this website [ link ] Step 3 : As you can see, there are Key, Plain Text, Cipher Text, HTML Code, and HTML Test form. the Key form is for the password you want to open your encrypted post, like the iloveyou password above. enter any password you want in that form. Step 4 : Write whatever you want to make private in the Plain Text form. anything you write in that form is going to be encrypted later. You can put anything in there, it supports HTML languange too. Step 5 : After you write down what you want in the Plain Text form, click the button Encrypt under the Plain T...

blogging tips?

more pic @ SPV . i miss blogging. i really do. blogging is the place where i can puke up all my sadness and happiness. blogging is like my precious friend. i am surely not exaggerate! yuh! i mean like, you can groom your blog whatever you like, you can share and blabber all you can, what's better than that? right? i guess you're all agree too. lately i've been wanted to change my URL into .co.nr. I AM SOOO DYING TO CHANGE IT!!!! i don't know why, i've been feeling like there's a lot of people are stealing my codes. Q__Q i know i'm the one who thinks too much, but yeah, everyone feels angry too right if you know somebody had stole your codes? i mean you work like 4128461247 hours just to get this swagging blog, then you saw somebody absolutely copy your blog style just by clicking ctrl+C and ctrl+V, how is it feel? so better be cautious than get stolen. so this .co.nr thing provides some kind of features that hides all of your codes. i am...