Welcome to <CodeIsLove>: Geek Is Chic, owned by Kitty. The site houses loads of random ramblings, articles, tutorials and tips as well as Classic Blogger-related things.Tutorial: Cara membuat Classic Blogger Layout - Bahagian 1 [versi Bahasa Melayu]
Blogged by: Kitty onLabels: Classic Blogger layout, tutorial
Okay, tutorial ini akan ditunjukkan langkah demi langkah bagaimana untuk men-kod atau membuat Classic Template yang mempunyai dua kolum atau column. Tutorial ini akan menggunakan penggayaan minimum kerana fokus utama bukan pada reka bentuk tetapi adalah pada struktur template itu sendiri.
Penting: Saya menganggap anda sudah mempunyai pengetahuan tentang struktur asas dokumen HTML, tetapi jika anda tidak berbuat demikian, saya mencadangkan anda untuk melakukan beberapa bacaan sebelum cuba untuk mengikuti tutorial ini kerana saya tidak mempunyai masa untuk mengajar asas kepada setiap dan semua orang yang bertanya. Juga, pengetahuan asas CSS akan memberi manfaat. Untuk rujukan, anda boleh menyemak tutorial CSS di sini.
Apa yang anda perlukan:
Editor atau penyunting teks (Notepad untuk pengguna Windows, TextEdit untuk pengguna Mac)
Sambungan internet
Langkah 1
Buka penyunting teks anda dan tulis dokumen HTML yang asas.
<html>
<head>
</head>
<body>
</body>
</html>
Dalam apa-apa dokumen HTML, anda mesti mempunyai semua tag, jika tidak ia tidak akan lengkap.
Langkah 2
Seterusnya kita harus menambah dalam DOCTYPE HTML. Ini adalah penting kerana arahan kepada pelayar web tentang versi bahasa markup halaman bertulis. Ada terdapat beberapa jenis doctypes tetapi untuk tutorial ini kita akan memilih XHTML 1.0 Transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
DOCTYPE itu harus diletakkan di atas <head> supaya ia akan kelihatan seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
</head>
<body>
</body>
</html>
Langkah 3
Mari kita dimasukkan ke dalam beberapa tag meta atau meta tags. Ini perlu diletakkan di antara tag <head> </head>.
Kebanyakan orang, terutamanya mereka yang menggunakan Classic Template seolah-olah lupa untuk menambah kod ini, atas sebab-sebab yang tidak diketahui. Tag meta, terutamanya kata kunci meta tag dan meta tag description adalah sangat penting kerana digunakan untuk memberi maklumat mengenai laman web. Mereka dua tag membantu laman web anda akan mudah dijumpai dalam enjin carian.
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Provide brief description of your blog here" />
<meta name="keywords" content="add, keywords, here" />
<meta name="author" content="http://www.yourblogsitehere.com" />
Langkah 4
Menyediakan tag tajuk/nama. Sekali lagi ini perlu diletakkan di antara <head> </head>. Biasanya, tag tajuk/nama akan kelihatan seperti ini:
<title>TUKAR TEKS INI KEPADA TAJUK/NAMA BLOG ANDA</title>
Walau bagaimanapun, untuk Classic Template, adalah lebih baik untuk menggantikan teks di antara tag <title> </title> dengan tag Classic Template yang telah ditetapkan: <$BlogPageTitle$>. Ini membolehkan Blogger untuk membaca nama blog anda yang anda telah takrifkan dalam Papan Pemuka (Dashboard) anda.
Langkah 5
Menambah stylesheet. Cascading Style Sheet (CSS) membolehkan anda mengawal gaya dan susun atur laman web anda. Secara ringkas, CSS menambah "UMPH" untuk laman web anda. Oleh itu, mari belajar bagaimana untuk menambah ia ke dalam kod HTML kita.
Kod CSS hendaklah diletakkan sebelum </head> tag. Seperti yang disebutkan sebelum ini, penjelasan terperinci mengenai cara gaya elemen tidak akan disediakan di sini kerana ia akan mengambil masa yang lama untuk menjelaskan satu per satu. Penjelasan yang muncul di bawah adalah yang sangat penting sahaja.
(Talian yang muncul selepas "slashes" (//) hanyalah komen atau penjelasan. Anda boleh mengeluarkan mereka.)
<style type="text/css">
Letakkan kod CSS di sini
</style>
Ok, seterusnya kita akan bermula dengan mentakrifkan gaya am susun atur dengan menggunakan CSS.
body {
font-family: "Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 0,8 em;
background-color: white; // atau anda boleh menggunakan kod #fffff (#ffffff ialah kod untuk warna putih)
}
/* Tujuan id yang diberi nama container ini adalah untuk membuat kandungan dan susun atur di tengah-tengah halaman. Anda boleh menukar nama container ini kepada apa saja nama yang anda suka */
#container {
width: 700px; // ini mentakrifkan lebar container itu.
margin: 0 auto; // ini memastikan ia akan berada di tengah-tengah halaman
}
/* Id ini adalah di mana terletaknya kandungan blog anda (entri blog, dll). Sekali lagi anda boleh menukar perkataan content kepada apa saja nama yang anda sukai */
#content {
width: 450px;
padding: 5px;
float: left; // ini akan membuat kandungan yang tersusun di sebelah kiri
}
/ * Ini adalah bahagian sidebar * /
#sidebar {
width: 200px; // lebar kandungan # + # sidebar tidak boleh melebihi lebar bekas #
padding: 5px;
float: right; // ini kedudukan sidebar di sebelah kanan bekas
}
Ingat, semua stylings mesti diletakkan di antara tag <style type="text/css"> </style>, jika tidak, penggayaan tidak akan berfungsi. Yang bagus tentang implementasi CSS cara ini iaitu embedded styling adalah bahawa, anda boleh mengelakkan inline styling.
Langkah 6
Kita sudah selesai dengan gaya struktur asas template. Sekarang saatnya untuk membentuk halaman web. Kod berikut perlu diletakkan di antara tag <body> </body>.
<div id="container">
<div id="content">
</div>
<div id="sidebar>
</div>
</div>
Langkah 7
Kita seterusnya akan memasukkan tag Blogger supaya entri blog akan dapat ditayangkan/ditunjukkan di dalam template. Saya hanya akan membuang kod di sini tanpa memberi penjelasan terperinci tentang bagaimana setiap tag itu berfungsi. Jika anda ingin tahu tentang fungsi tag-tag itu, anda boleh membacanya di sini.
Di dalam <div id="content"> </div>, kita letakkan kod berikut:
<Blogger>
<h1><BlogItemTitle><$BlogItemTitle$></h1>
<h2><BlogItemDateTime><$BlogItemDateTime$></BlogItemDateTime></h2>
<p><BlogItemBody><$BlogItemBody$></BlogItemBody></p>
<h2><BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></h2>
<ItemPage>
<BlogItemCommentsEnabled>
<h3><$BlogItemCommentCount$> Comments:</h3>
<BlogItemComments>
<p class="comment-body">
<p class="comment-data">
<$BlogCommentAuthor$> said on <a href="#<$BlogCommentNumber$>">
<$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
<p id="commbg"><$BlogCommentBody$></p><hr />
</BlogItemComments>
<p></p>
</BlogItemCommentsEnabled>
<$BlogItemCreate$>
</ItemPage>
</Blogger>
Anda boleh gayakan h1, h2, h3 mengikut citarasa anda.
Langkah 8
Menambah isi/content ke dalam ruang sisi atau sidebar. Anda boleh meletakkan apa sahaja yang anda suka dalam sidebar. Jadi, sebagai contoh, anda mahu masukkan ke dalam pengenalan anda, pautan blog kawan anda dan seksyen kredit.
<h2>Introduction</h2>
Introduction text here. Blah blah blah.
<h2>My buddies</h2>
<ul>
<li>Friend 1</li>
<li>Friend 2</li>
<li>Friend 3</li>
</ul>
<h2>Credits</h2>
This layout was created by me, kthxbai.
Sekali lagi, anda yang membuat keputusan tentang bagaimana anda ingin menggayakan h2, ul, li. Saya tidak akan mengajar anda bagaimana untuk berbuat demikian.
Sebaik sahaja anda telah mendandan dan menggilap reka bentuk anda, anda boleh copy kod keseluruhan dan paste ke bahagian 'Edit HTML' Blogger anda.
Baiklah. Inilah caranya untuk membuat Classic Template yang ringkas. Jika anda hanya berniat untuk mencipta blog (iaitu hanya ada entri blog), maka anda hanya perlu membaca Bahagian 1 ini. Tetapi bagi mereka yang ingin menambah ciri-ciri tambahan, seperti pautan navigasi dan mewujudkan pseudo-halaman, terus saja ke Bahagian 2.
Saya berharap anda semua akan dapat mempelajari sesuatu dari tutorial ini. Saya telah menulisnya semudah dan sebaik mungkin. Jika anda mempunyai sebarang pertanyaan, sila hantar soalan-soalan anda di ruangan komen di bawah. Cheers!
Untuk versi bahasa Inggeris, sila klik link ini: http://www.codeislove.net/2011/04/tutorial-how-to-code-classic-blogger.html
// Sila tinggalkan link kembali ke Codeislove jika anda telah mengikuti tutorial ini supaya saya boleh melihat apa yang anda telah capai dari tutorial ini. Terima kasih. //
Tutorial: How to code Classic Blogger layout - Part 3
Blogged by: Kitty on
Chazz, 
Raindra, Kitty, 小玛丽 , Kitty, The Lollapalooza Shoppe, Kitty, Nadya Nyobi, Kitty, ♥, Nadya Nyobi, , , Unknown, , , Kitty, , Kitty, , , Kitty, , Unknown, Kitty, Unknown, Kitty, Veeyah, Kitty, Labels: Classic Blogger layout, tutorial
In this Part 3, I will be showing you how to add 'pages' to Classic Blogger layout using the overlay div technique. This technique is basically having multiple divs layered on top of
one another and setting them to remain hidden until a function is triggered.
Step 1
Let's say we want to create two more div layers to make About and Visitor pages. So below the <div id="content"> </div> (you could also put them before the </body> tag), we add these lines:
<div id="about">
CONTENT FOR ABOUT ME
</div>
<div id="visitor">
CONTENT FOR VISITORS
</div>
You can add more layers if you want, but for the sake of this tutorial we just create two layers here.
Step 2
We now have two divs for the About and Visitors pages but if we simply leave them like that, they will be visible to the visitors so we need to hide them until they're needed.
Go to the CSS section and add these:
#about, #visitor {display:none;}
Display: none will keep those layers hidden by default. And again, if you have more layers, remember to include them here as well.
Step 3
In the Part 2 of this series, we looked at how to add in the navigation links. So now we are going to modify those links a little bit.
This is what we have in Part 2
<ul id="navigation">
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
</ul>
Now, in order for the links to work with the div layers we just created, we need to change the modify the codes above to:
<ul id="navigation">
<li><span onClick="changeNavigation('name of div here')">Link 1</span></li>
<li><span onclick="changeNavigation('about')">About</span></li>
<li><span onclick="changeNavigation('visitor')">Visitor</span></li>
<li><span onclick="changeNavigation('link3')">Link 3</span></li>
</ul>
We cannot use the href attribute because that doesn't work with div layers so that's why we need to use the onclick function instead. Remember that the "name of div" here be changed to the name of the corresponding div layers that you want the link to open when you click on them.
Step 4
Next, in order for the onclick function to work, we need to add Javascript to the template. This piece of script should be placed within the <head></head> section, preferably just before the closing </head> tag.
<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('div of main content here').innerHTML=document.getElementById(id).innerHTML}
</script>
Look at the script above and see the text in bold. The text in bold must be changed to the name of the div that you want to be displayed the moment the website is opened. In this example, that would be the #content div layer (refer to Part 1 of this series). So we replace the text in bold with content.
Save your file and it's done.
So this is the end of the How to code Classic Blogger template series. I hope you enjoyed following the tutorials as much as I enjoyed writing them. If you have any questions, feel free to post them below.
// Please leave a link back to Codeislove if you have followed this tutorial so that I can see what you have achieved from this tutorial. Thank you. //
Buy a domain for your website!
Freebies: Blogger layout (Vintage Memories)
Blogged by: Kitty on Fai Haneul, Vintage Memories Labels: Classic Blogger layout, freebies
How to use the layout:
- Replace the twitter username with your own.
- Replace the Blogger Follower gadget with your own.
- Find the codes below and replace YOURBLOGNAME with your blog name.
<link rel="alternate" type="application/atom+xml" title="Your Blog's Title" href="http://YOURBLOGNAME.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=rss" />
- Find these codes and replace the USERID and BLOGID with your own user ID and your blog's ID:
<script type="text/javascript" src="http://www.blogger.com/feeds/USERID/blogs/BLOGID?alt=json-in-script&callback=listLabels"></script>
The layout is available for download on Blogskins but I also provide a download link here:
Tutorial: How to code a Classic Blogger layout - Part 2
Blogged by: Kitty onLabels: Classic Blogger layout, tutorial
Step 1
Okay, first we are going to create a list. Open up the HTML document that we created in Part 1. Go to the sidebar section (where it says <div id="sidebar"> </div>) The navigation links in this example will be vertically positioned.
The reason why we create a list is that, this is the easiest way to create navigation links. Paste the following code right after the <div id="sidebar">:
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
</ul>
For now, the navigation will look like the example above. But of course we wouldn't leave it like that, as it doesn't look presentable. So we will have to polish it up.
Step 2
Go to the CSS section as we are going to write up the styling for the navigation menu. The first step is to assign an id to the <ul>. This is to remove the elements that give the appearance of a list (like the bullets).
#navigation {
margin: 0 auto;
padding: 0;
list-style: none;
}
Then apply the id to the <ul>:
<ul id="navigation">
The list now looks like this:
Link 1
Link 2
Link 3
Technically we're done with the navigation. But it looks rather too simple. So we'll spice it up a bit.
Step 3
Paste this codes into your stylesheet.
#navigation a {
display: block;
width: 150px;
background-color: #ffccff;
border-left: 5px solid orange;
padding-left: 5px;
color: red;
}
This will make the background of each of the links to have background colour #ffccff and red for the links. Display:block makes the links to be rendered as a block element which means only one link for each line. The width of the links will be 150px and we assign an orange colour for the left border. The links will be shifted/padded 5px from the left.
Step 4
If you want to add some excitement to the links, we will throw in the :hover selector.
#navigation a:hover {
background-color: #ff99ff;
color: #ffffff;
}
Step 5
Lastly, we also need to space out the links from each other so that they don't look to crowded.
#navigation li {
margin-bottom: 5px;
}
Now we're done styling the navigation links! Play around with the codes and see if you can come up with different styling.
The next tutorial will show you how to create pseudo-pages.
// Please leave a link back to Codeislove if you have followed this tutorial so that I can see what you have achieved from this tutorial. Thank you. //
Buy a domain for your website!
Tutorial: How to code a Classic Blogger layout - Part 1
Blogged by: Kitty on Juwita Afifah, , Kitty, , Kitty, , Kitty, Nimsrules, , , Perth web design, Vibe, Kitty, Katy, Kitty, Unknown, , Kitty, , Kitty, Insatiable Donut, Kitty, Insatiable Donut, Anil Anvesh, , , Kitty, , Kitty, sodawhan, Kitty, sodawhan, Kitty, Unknown, Nataly Carbonell, pankajsharma.separate, Kitty, Unknown, Unknown, Unknown, k, Miya and the Moon, Unknown, Kitty, Unknown, Unknown, Kitty, rose tyler, Kitty, Unknown, alina, Labels: Classic Blogger layout, tutorial
Important: I am assuming you already have the knowledge of the basic structure of HTML document, but if you don't, I suggest you to do some reading before attempting to follow this tutorial as I do not have the time to teach the basic to each and everyone who asked. Also, a basic knowledge of CSS would be beneficial. For reference, you can check out the CSS tutorial here. Read more »
