How to Upload your Javascript // Thursday, March 22, 2012
Hi guys! Kalau kalian bisa uplaod Javascript kalian, tentu blognya akan lebih ringan, why? biasanya kalau yang pakai Javascript itu udah banyak banget, kayak overload atau apa gitu-,- nanti loading blognya berat plus lama. Jadi, better kalian nge-host javascript sendiri aja :D aman kok, di blogku juga pakai Javascript sendiri.
1. Siapkan file kamu, remember, format javascript ".js" save di notepad/ms word.
2. Click
this link.
3. So kalian bisa centang/check box "Make it Private" kalau kalian cuma ingin Javascript itu dipakai pada blog kalian aja.
4. Masukkan E-Mail. Nanti javascript akan di kirim ke E-mail.
5. Well, kalau udah menerima javascript kalian, it's ready to use :3
Mudah kan?
Perbedaan CSS dan HTML //
Hai all! Aku mau jelaskan/berbagi ilmu
*eaa pada kalian xD tentang ilmu web design tentunya, bukan matematika, jadi nggak perlu kalkulator kok :P
Well, kalian para newbie, aku yakin sebagian besar belum tau soal CSS dan HTML padahal itu adalah 2 unsur penting pembangun sebuah tempelate. Aku juga yakin, para fake blogskiner juga mesti belum tahu. Mereka cuma mendownload tempelate then mereka edit, terus dicredit tempelate by mereka sendiri PADAHAL ITU HASIL EDITAN!
Ini pengertian menurut pelajaran TIK Terapan di sekolahku. Dari sana juga aku bisa sedikit belajar soal bentuk pen-codean sebuah tempelate.
CSS (Cascading Style Sheets).
CSS itu adalah kode-kode yang membangun sebuah web nya, jadi ibarat manusia, CSS itu tulangnya. Paham? Kalau belum paham, aku bisa kasi contoh CSS:
Codes tanpa CSS:
<html><head><title>//Chocolettha//</title>
</head><body>
<h1><font face="arial">Chocolettha's Blog</font></h1>
</body></html>
Codes dengan CSS:
<html><head><title>//Chocolettha//</title>
<style type="text/css">h1 { font-family: verdana; }
</style></head><body>
<h1>Chocolettha's Blog</h1>
</body></html>
Paham? belibet banget ya? aku nggak tau carane jelaskan gimana, itu aku jelasin pakai caraku sendiri >,< intinya, CSS itu yang menopang kode-kode pembangun tempelate. Biasanya diatas kode </style> itu semua adalah CSS.
HTML (HyperText Markup Language)
HTML ini adalah kode yang nggak masuk di dalam rumahnya <style> </style>
*lol banget bahasanya-_-* okay aku tahu kalian sekarang bingung, so mungkin nggak akan bingung lagi, coba lihat
contoh HTML:
<html> <head> <title> INI JUDUL </title> </head>
<body>
INI ISI. Contohnya Sidebar, main, header, etc.
</body> </html>
Well, kalau kalian lupa men-close HTML biasanya nanti tempelate akan rusak. Cara men-close:
Misal:
<div class="lettha"> ISI </div>
<span style="....."> ISI </span>
<head>.............</head>
Kode yang dipake buat nutup itu biasanya ada garis miringnya
</
Kalau kode di depannya
<div maka penutupnya juga
</div> see?
Gampang banget kan? that's all.
Do not copy this!
Add Newer/Older Post on Blogskins //
How to adding newer/older post into your blogskins tempelate? check it out!
1. Find code </blogger>
2. Paste this code below </blogger> code:
<br><center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center><br>
You can change the Red and Blue words. That's all.
Add Comment on Blogskins //
How to add comment on blogskins tempelate?
Here's the answer:
1. Search code <BlogItemTitle><$BlogItemTitle$></BlogItemTitle>
2. Copy this code and paste below those codes:
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> <span style="color: #000; font-size: 10px; font-family: georgia;">comments</span></a></BlogItemCommentsEnabled>
Marked:
Red, the font color for comments word.
Orange, the font size for comments word.
Blue, the font family. You can change with arial, verdana, etc.
Pink, the comments word.
That's all.
Download Adobe Photoshop CS6 //
Hi all! Aku mau share lagi yaitu Adobe Photoshop CS6 tapi masih trial/beta mean, kalau trial udah habis/expired (biasanya dalam 30 hari) nanti kamu mesti beli Lisensi nya.
Lumayan kok, bisa coba-coba fitur Photoshop yang udah disempurnakan dari versi CS5 hehehe. So, kamu mau? download:
How to Upload Font (Cara Mengupload Font) //
Hi guys! Aku mau sharing tutorial tentang cara mengupload font/gambar/etc di hosting kamu sendiri :D sebenernya Tumblr yah, tapi ada kode kamu sendiri, jadi nanti ketahuan deh kalau ada yang pakai kodemu. So, how?
1. Siapkan font yang akan diupload.
2. Aku sarankan, make sure kamu udah ada Tumblr account.
3. Click link
ini.
4. Upload font kamu.
5. Copy direct linknya.
Simple right?
6 Form Provider Website //
Hi ! Well, aku mau share tentang Form Provider Website, apa maksudnya? Itu loh kalau kalian ke blog orang, then disana ada formulir 'Contact Me' nah itu dia yang aku maksudkan. So, how to get it? Kalian bisa pilih website provider form-form dibawah:
1.
Response O Matic *aku berniat pakai ini*
2.
Free Contact Form.
3.
Foxy Form.
4.
123 Contact Form.
5.
My Contact Form.
6.
Email Me Form.
Click aja, terus Sign Up. So easy right? that's all.
How to Find my Blog ID //
This is for newbie actually. How to find your blog ID? see at this picture :) just simple tutorial.
Easy, really easy right?
Tutorial: Twitter Widget //
I wanna share about twitter widget again.
First, copy this codes:
<div style="border: 1px solid #000; padding: 5px; width: 200px; height: 200px; overflow: scroll;">
<div id="twitter_div">
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/chocolettha.json?callback=twitterCallback2&count=6"></script>
</div></center><br />
<center>
<a href="https://twitter.com/chocolettha" class="twitter-follow-button" data-show-count="false" data-lang="en" data-size="medium">Follow @chocolettha</a><br/><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
Marked:
Red, the thickness of the border.
Yellow, change with dashed, dotted, groove, outline, double.
Green, the border color.
Violet, width and height of your twitter widget.
Pink, change with your username.
Blue, twtter count. Show how many tweets that will appear.
Copy and paste these codes where you want. Remember, my English is bad, you just stfu ok.
Tutorial: Cute Twitter Widget (with background) //
For the example:
First you MUST know that I made this widget by myself. Do NOT copy this tutorial, altough you already ask for my permission ~(^_^~) I don't like everyone who reblog my codes. Or if you dare, MAKE SURE don't get caught by me. Or I'll hunt you down.
Let's start.
Copy and edit this codes:
<div style="background-image:url(URL BACKGROUND); background-repeat: no-repeat; text-align: center;width:200px; height:200px; ">
<center><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 6,
interval: 6000,
width: 190,
height: 190,
theme: {
shell: {
background: 'transparent',
color: 'transparent'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#000000'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chocolettha').start();
</script>
<a href="https://twitter.com/chocolettha" class="twitter-follow-button" data-show-count="false" data-lang="en" data-size="tiny" data-width="148px">Follow @chocolettha</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</center>
Marked:
Red, change with your own background URL.
Blue, width and height of the background twitter section.
Violet, width and height of the twitter widget.
Orange, colors of the font and the link.
Green, change with your own Username.
For Tempelate Designer:
1. Dashboard >>Design >>Page Element >>Add Gadget >>HTML/Javascript.
2. Paste these codes.
3. Save.
4. Done.
For BlogSkins Tempelate:
1. Dashboard >>Tempelate.
2. Paste these codes on your sidebar/whatsoever.
3. Remember! every codes on BlogSkins aren't same.
4. Preview, save.
5. Done.
Remember!
DO NOT COPY THIS TUTORIAL. Thank you for the respect^.^
Tutorial: Billy Music Player //
Now I'll make a tutorial how to generate Billy Music Player (Tumblr-ish music player) you can follow these steps :) enjoy!
PART I: Upload Your Song/Music.
1. You
MUST have an account on
dropbox. If you don't have yet, you can sign up :) this is where you can pload your favorite song :)
2. Click the upload button on the top right section on your screen.
3. Click “Choose Files”, find the song file you want to upload, then click “Open”
4. Once the upload finishes, move your song file to the “Public” folder.
5. Inside the “Public” folder, right-click your song file and choose “Copy Public Link”
6. You are done on part I.
PART II: Create Billy Music Player.
1. Once you copied the link from part 1, go to
Billy Music Player Site
2. Delete the address where it says “Track 1″and replace it with the link you copied from Dropbox.
3. Paste Song Link
4. If you want to add more song links, you can add them where it says “Track 2, 3, etc.”
5. Remove the check mark on Autoplay to not annoy your visitors.
6. Click Generate Code.
7. Copy the code and paste it to where you want your Billy Music Player to appear. For example, your blog sidebar.
8. Save your blogger settings and you’re done!
Tutorial: Adding Twitter Follow Button //
Okay, how to adding twitter follow button on your blog? here's simple way.
1. Click
this link.
2. Choose which button that you want.
3. Copy and paste all embed codes:
4. Paste on Dashboard >>Design >>Page Elements >>Add Gadget >>HTML/Javascript
5. Done :)
Tutorial: How to Print Screen //
Hi all, aku mau sharing tutorial, mungkin udah banyak yang tahu. Heheheh cuma sharing aja :D Print Screen itu kita mengambil gambar 1 screen penuh di layar monitor. Tahu kan?
1. Pergi ke halaman yang akan di print screen.
2. Hit tombol Prt Sc di keyboard mu.
3. Open 'Paint' press CTRL+V atau paste.
4. Tada ^_^
Sekian. Simple right?
