Pengertian Padding,Margin dan Border pada CSS
Bagi rekan blogger yang suka otak-atik template blognya (tidak hanya di template blog seeh), pasti sering kali melihat kata-kata dan istilah Padding, Margin Dan Border pada CSS yang digunakan sebagai pengukuran dasar pada CSS.. Nah pada pertemuan ini saya akan memberikan sedikit pengertian dari ketiga Hal tersebut dan juga gunanya..
Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar dibawah ini dulu :
Nah dari keterangan diatas kita dapat menyimpulkan seperti dibawah
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Cara Penggunaan
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai
Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas
Satuan Dalam CSS
1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Apa itu CSS & Konsep Dasar CSS
Apa itu CSS?
CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.
Dulu, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table
Desain dengan tabel :
1. Buat desainnya. menggunakan .psd ( photoshop ) atau .cdr ( coreldraw )
2. buat tabelnya. menggunakana tag <table>,
3. potong – potong desain sesuai dengan kolom pada tabel, lalu “selipkan” desain pada kolom tabel menggunakan sebagai elemen image tabel atau background.
Dengan CSS, cara kerja ini dirubah. Anda membuat halaman HTML, lalu anda berikan identitas pada bagian2 tertentu dengan tag <div> baik itu menggunakan atribut id <div id=”"> atau class <div class=”">. Lalu anda buat satu file css, bisa di selipkan pada bagian <head> atau dalam file berbeda dan di hubungkan dengan tag <link rel=”stylesheet” type=”text/css” href=”">. File CSS tadi memberikan nilai dan definisi pada bagian tertentu dari halaman html tadi yang diberikan identitas melalu tag <div>.
Panduan istilah dalam teknologi internet
Panduan istilah dalam teknologi kabel internet
ABR Available Bit Rate
ADSL Asymmetric Digital Subscriber Line
ATM Asynchronous Transfer Mode
BPSK Bi-Phase Shift Keying
BRI Basic Rate Interface ISDN
CAP Carrierless Amplitude Phase Modulation
CATV Cable TV
CBR Constant Bit Rate
CO Central Office
COLS Commercial Online Service
CSMA/CD Carrier Sense Multiple Access/Collision Detection
CSR Customer Service Representative
DAVIC Digital Audio Video Council
dB Decibel
DBS Direct Broadcast Satellite
DES Data Encryption Standard
DHCP Dynamic Host Configuration Protocol
DMT Discrete Multitone
DOSCIS Data Over Cable Service Interface Specification
DSL Digital Subscriber Line
DVB Digital Video Broadcast
FAQ Frequently Asked Question
FDDI Fiber Data Distribution Interface
FEC Forward Error Correction
FSK Frequency Shift Key
FTTC Fiber-to-the-Curb
HDSL High bit-rate Digital Subscriber Line
HFC Hybrid Fiber/Coaxial
HSCDS High-Speed Cable Data Service
HTML Hypertext Markup Language
HTTP Hypertext Transmission Protocol
IDSL ISDN Digital Subscriber Line
IEEE The Institute of Electronic and Electrical Engineering
IETF Internet Engineering Task Force
IGMP Internet Group Management Protocol
INMS Integrated Network Management System
IP Internet Protocol
IPCDN IP Over Cable Data Network working group of the IETF
IRC Inter Relay Chat
ISDN Integrated Services Digital Network
ISO International Organization for Standardization
ISP Internet Service Provider
ITFS Instructional Television Fixed Service
ITU International Telecommunications Union
KB Kilobyte
LAN Local Area Network
LEC Local Exchange Carrier
LMDS Local Multipoint Distribution Service
MAC Media Access Control (layer of OSI Reference Model)
MB Megabyte
Mbps Megabits per second
MCNS Multimedia Cable Network System Partners Ltd.
MDS Multichannel Multipoint Distribution Service
MHz Megahertz
MMDS Multichannel Multipoint Distribution Service
MSO Multiple System Operator
NAP Network Access Point
NOC Network Operations Center
NTSC National Television Standards Committee
OFDM Orthogonal Frequency Division Multiplexing
OSI Open System Interconnect (Reference Model for networking protocols)
OSS Operations Support Systems
PC Personal Computer
PHY Physical (layer of OSI Reference Model)
POTS Plain Old Telephone Service
PPP Point-to-Point Protocol
PRI Primary Rate Interface ISDN
PSTN Public Switched Telephone Network
QAM Quadrature Amplitude Modulation
QOS Quality of Service
QPSK Quaternary Phase Shift Keying
RAM Random Access Memory
RDC Regional Data Center
RF Radio Frequency
RFP Request for Proposals
RSVP Resource Reservation Protocol
RTP Real-Time Transport Protocol
S-CDMA Synchronous Code Division Multiple Access
S-HDSL Single-pair High bit-rate Digital Subscriber Line
SDSL Symmetric Digital Subscriber Line
SMTP Simple Mail Transfer Protocol
SNMP Simple Network Management Protocol
SONET Synchronous Optical Network
TCP/IP Transmission Control Protocol/Internet Protocol
TDMA Time Division Multiple Access
TVRO TV Receive Only
VC/MTM Variable Constellation/Multi-Tone Modulation
VDSL Very high bit-rate Digital Subscriber Line
WAN Wide Area Network
WCS Wireless Communications Service
Cara Membuat CSS3 Animated Image Enlarge
1. Login : Login to BloGGeR (login ke BloGGeR)
2. Dasboard : Setelah masuk di halaman ini, cari dan KLIK link "Design".
3. Beberapa saat kemudian kita akan melihat halaman baru iaitu "Page Element (Element Laman)". KLIK "Edit HTML".
4. Kita akan melihat kode HTML penyusun blog. Disinilah kode CSS baru akan kita tambahkan. Cari kode ]]></b:skin>
5. Copy dan pastekan kode CSS Box Posting Kode HTML dg Animasi-1 tepat di atas kode tersebut seperti yang terlihat di bawah ini:
.GRenlarge{list-style-type: none;margin: 0;padding: 0;}
.GRenlarge li, .GRenlarge li.anim1, .GRenlarge li.anim2, .GRenlarge li.anim3 {display: inline;
width: 110px;}
.GRenlarge li img, .GRenlarge li.anim1 img, .GRenlarge li.anim2 img, .GRenlarge li.anim3 img {
width: 100px; float: left;
border: 4px solid #996600;
margin: 5px;
opacity: 0.6;
background: #888;
padding: 2px;
z-index: 100;
cursor: pointer;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
-moz-box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
-webkit-box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
}
.GRenlarge li img:hover {
-moz-transform: scale(2.8);
-webkit-transform: scale(2.8);
-o-transform: scale(2.8);
opacity: 1.0;
background: #999;
border-color: #fff;
}
.GRenlarge li.anim1 img:hover {
-moz-transform: scale(2.8) rotate(720deg);
-webkit-transform: scale(2.8) rotate(720deg);
-o-transform: scale(2.8) rotate(720deg);
}
.GRenlarge li.anim2 img:hover {
-moz-transform: scale(2.8) rotate(0deg) translate(50px);
-webkit-transform: scale(2.8) rotate(0deg) translate(50px);
-o-transform: scale(2.8) rotate(0deg) translate(50px);
}
.GRenlarge li.anim3 img:hover {
-moz-transform: scale(2.5) rotate(30deg) translate(50px);
-webkit-transform: scale(2.5) rotate(30deg) translate(50px);
-o-transform: scale(2.5) rotate(30deg) translate(50px);
}
6. KLIK Simpan (SAVE) Template.
Untuk posting kode HTML caranya sangat sederhana sekali. Tuliskan seperti yang terlihat di bawah ini ketika posting kode HTML dilakukan.
<ul class="GRenlarge">
<li><img src="http://www.tipsexam.com/myimages/merdeka_greet3.gif" /></li>
</ul>
7. Tukarkan url imej (yg berwarna merah) dengan url anda.
8. Macam mana? Tahniah menjadi juga akhirnya
Hidden Shoutmix Di Blog Tutorial
Dari sekian banyak tutorial tentang cara menaruh letak Shoutmix di halaman Template Blog yang saya sukai adalah yg tersembunyi, yaitu ketika tombol Buku Tamu di Klik maka akan keluar widget shoutmix dari sisi kiri maupun dari sisi kanan halaman blog.
Adapun contoh Codenya bisa tinggal di copy paste di halaman Page Element - Add Gadget dengan sedikit mengubah dan menambahkan Code shoutmix caranya yaitu :
1. Klik add Gadget di halaman account Blogger anda, kemudian pilih add "HTML/JavaScript"e
2. Copy Code berikut
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlA9c3HjFoJ2AQOqMH01luwn0xW12tYpIf_rfHQ7H_4MzB_J6HiPn6yY_NqQXaQo-Dxk921_YSvUtkdvG37Fm0U06kpB7Ryphz1zscFDxxWCT5bMo4CKFk4fMps9MMorSw3N3A_qXTIl_/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
<br/>
<a href="http://skjs2u.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
GAMBAR DALAM FRAME DAN ZOOM
----------------------- cubaaaaaaaaaaaa jaya---------------------------
<table border="10" cellpadding="3" height="120" width="145" bgcolor="#b1c3d9" />
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="180" height="130" align="center">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="
http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">
/***********************************************
* Kod telah di'edit' oleh kamja
* Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh kamja
* -- Sharing Is Caring -- http://skjsict.blogspot.com --
***********************************************/
</script>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZx07YYdW9sosPUZlHYuh6KZT8kHEwYE-zdegfI0goilpcLrB7iWeRs5zm9K6SB_r3LH-A-5uyssaaI1BGw21EXundOlgxYTUvYgYJUVteWAE6VsGFdQRb9l4afTfioZcfAl41tPuuQ94/" class="magnify" data-magnifyby="3" style="width:180px; height:30px cursor: url(magnify.cur), -moz-zoom-in; " />
</marquee>
</td>
</tr>
</table>
CARA BUAT DROPDOWN MENU
Langkah2
1. Copy kod di bawah
2. Design
3. Add gadget
4. HTML / JAVASCRIPT
5. Paste
6. Tukarkan url kod dibawah ( yang berwarna putih) dgn kod anda sendiri
6. Save
7. Selamat mencuba.... ijok,,,,,,,
--------------------------- buat habis baik--------------------------
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option selected />Pautan Sekolah
<option value="http://skparitmahang.blogspot.com/" />SK Parit Mahang
<option value="http://skpuncakalam.blogspot.com/" />SK Puncak Alam
<option value="SK Bukit Badong" />SK Bukit Badong
<option value="http://sktambakjawa.blogspot.com/" />SK Tambak Jawa
<option value="http://www.pa2ps.com/v2/index.php" />SK Puncak Alam 2
<option value="http://skkualaselangor.blogspot.com/" />SK Kuala Selangor
<option value="http://psssksgsireh.blogspot.com/" />SK Sg Sireh
<option value="http://skbbksel.blogspot.com/" />SK Bandar Baru, K.Sel
</select>
</left>
Buat scroll table
-------------------------------- kongsi ilmu----------------------------------
<left><div style="border: 1px solid rgb(238, 238, 238); padding: 10px; overflow: auto; width:190px; height: 200px;">
<ul>
<b>TUTORIAL BUAT BLOG<br />
<br /><a href="http://skjs2u.blogspot.com/2010/07/ikuti-langkah-langkah-tersebut.html" target="_blank">1.Bagaimana daftar akaun blogspot</a><br />
<br /><a href="http://skjs2u.blogspot.com/2010/08/buat-recent-comment-widget-untuk-blog.html" target="_blank">24.Buat recent coment widget pada blog </a><br />
<br /><a href="http://skjs2u.blogspot.com/2010/08/cara-menghilangkan-navbar-blogger.html" target="_blank">25.Cara menghilangkan navbar blogger </a><br />
</b></ul>
</div></left>
1. Tukarkan url ( tulisan yang berwarna biru ) dengan url anda
2. Tukarkan tajuk scroll dengan tajuk pilihan anda
web PPD dlm post
<iframe src="http://www.moe.gov.my/ppdkualaselangor/" border="1" height="300" width="98%"></iframe> <alt="" width="100" height="40">
<span class="fullpost"></span></alt="">
MEMASANG GEOGLE TRANSLATOR
Pemasangan widget Translator atau "Penterjemahan" pada blog sangat perlu.Dengan adanya translator ini dapat memberi manfaat kepada pengunjung blog kita yang tidak memahami Bahasa Malaysia.Berikut adalah cara untuk memasukkan translator di halaman blog
1. Login ke Blogger kemudian pilih menu Layout
2. Kemudian klik pada Add Gadget
3. pilih HTML / Javascript
4. Kemudian masukkan script berikut ini kedalamnya.
<div id="google_translate_element"> </ div> <script>
function googleTranslateElementInit () (
new google.translate.TranslateElement ((
pageLanguage: 'id',
includedLanguages: 'ar, zh-CN, zh-TW, nl, en , tl, fr, de, hi, id, it, id, ru, es, th, vi '
), 'google_translate_element');
)
</ script> <script src = "http://translate.google.com/ translate_a / element.js? cb = googleTranslateElementInit "> </ script>
5.Kemudian save. Senang je.... Selamat mencuba
CARA MENGHILANGKAN NAVBAR BLOGGER
Apa itu NAVBAR ?Navbar adalah (navigation bar) yang ada diatas header Blog .kalau kurang jelas silakan lihat gambar dibawah,gambar yang dilingkari itulah yang disebut Navbar .
Mudah sahaja untuk menghilangkan Navbar.Apa sebabnya kamu ingin menghilangkan Navbar ? Mungkin kamu kurang berminat atau juga kerana tidak berminat tampilan blog kamu dengan adanya Navbar tersebut .
Cara Menghilangkan Navbar Blogger :
1.Login Ke blogger
2.Klik "Design" kemudian Klik Lagi "Edit HTML" Kemudian cari kode <style> biasanya ada diatas .
3.Copy dan paste kode berikut di bawah kode <style>
<style type=”text/css”>
#b-navbar {
height:0px;
visibility:hidden;
display:none}
</style>
4.Jangan Lupa Klik Save Template.
BUAT RECENT COMMENT WIDGET UNTUK BLOG
1. Login to the blogger dashboard.
2. Klik Layout dan klik ‘Page Elements’ tab
3.Click on Add a Gadget. Select HTML/Javascript widget type.
4. Now this is the most important step. Select the whole code given below and paste it in the widget box you have just opened above.
<script style="text/javascript">
function showrecentcomments(json) {
var numcomments = 5;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<br/>');
if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented');
if (showposttitle == true) document.write(' on ' + posttitle);
document.write('<br/>');
if (comment.length < numchars) {
document.write('<i>');
document.write(comment);
document.write('</i>');}
else
{
document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(more)</a>');
document.write('</i>');}
document.write('<br/>');
}
document.write('<br/>');
}
</script>
<script src="http://skjs2u.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script><a href="http://reviewofweb.com/blogging/recent-comments-blogspot-widget/">Widget </a>by <a href="http://reviewofweb.com/">ReviewOfWeb</a>
5. Scroll down to src=http://skjs2u.blogspot.com and replace skjs2u with your blog’s name. For example if your blog’s URL is http://abc.blogspot.com then the code should become src=http://abc.blogspot.com DO NOT TOUCH any other part of the code or else it might create problems.
6. You are done! Lastly please do not remove the footer credits*.
Cara buat kod tukar link pada blog
Bertukar link atau link exchange boleh menaikkan ranking blog kita.
Terlebih dahulu kita sediakan banner, boleh dibuat dengan photoshop atau di upload dari internet..
Perhatian: Untuk mendapatkan url banner, banner atau gambar tersebut hendaklah di upload ke perisian http://picasaweb.google.com/
1. Login ke Blogger
2. Pilih Tata Letak.
3. Klik Add page element
4. Klik Add Gadget --> pilih HTML/Java Script.
Setelah upload banner, dapatkan url tersebut:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-KvWmwaXubO1CUdfqEj_IjceNOQUaWuGg50Ey0CXb7pqLmDftp2k-OtSSrVhDS9oVmKg_KevB4mgggpSvF66i5AzVWL24lvNTiboU2ICCxVfB3wfdd8F38iBATVut_jMTO3Kl0M3ZdY/s128/skjs2uuuu.jpg%20alt=
Kemudian masukkan kod yang berwarna biru ini..
<a href="http://skjs2u.blogspot.com" target="_blank"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-KvWmwaXubO1CUdfqEj_IjceNOQUaWuGg50Ey0CXb7pqLmDftp2k-OtSSrVhDS9oVmKg_KevB4mgggpSvF66i5AzVWL24lvNTiboU2ICCxVfB3wfdd8F38iBATVut_jMTO3Kl0M3ZdY/s128/skjs2uuuu.jpg%20alt= " border="0" alt=" skjs2u "></a>
5. Kemudian masukkan kode ( berwarna hijau ) tukaran link di bawah ini :
<textarea name="code" rows="4" cols="30
<a href="http://skjs2u.blogspot.com" target="_blank"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-KvWmwaXubO1CUdfqEj_IjceNOQUaWuGg50Ey0CXb7pqLmDftp2k-OtSSrVhDS9oVmKg_KevB4mgggpSvF66i5AzVWL24lvNTiboU2ICCxVfB3wfdd8F38iBATVut_jMTO3Kl0M3ZdY/s128/skjs2uuuu.jpg%20alt= " border="0" alt=" skjs2u "></a>
Sepatutnya kod anda menjadi seperti di bawah
<p style="text-align: center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-KvWmwaXubO1CUdfqEj_IjceNOQUaWuGg50Ey0CXb7pqLmDftp2k-OtSSrVhDS9oVmKg_KevB4mgggpSvF66i5AzVWL24lvNTiboU2ICCxVfB3wfdd8F38iBATVut_jMTO3Kl0M3ZdY/s128/skjs2uuuu.jpg alt=" " width="180" height="60" " border="0" /><br />Copy code below, insert into your blog <br /><textarea name="code" rows="5" cols="20"> <a href="http://skjs2u.blogspot.com/" title="
skjs2u" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-KvWmwaXubO1CUdfqEj_IjceNOQUaWuGg50Ey0CXb7pqLmDftp2k-OtSSrVhDS9oVmKg_KevB4mgggpSvF66i5AzVWL24lvNTiboU2ICCxVfB3wfdd8F38iBATVut_jMTO3Kl0M3ZdY/s128/skjs2uuuu.jpg alt=" " width="180" height="60" " border="0" alt="skjs2u" /> </a> </textarea></p>
Hasilnya:
Copy code below, insert into your blog
Tahniah percubaan anda menjadi
6. Klik save....
MELETAK WIDGET DI BAWAH HEADER
Pada umumnya pada template blogger tidak terdapat widget atau elemen langsung di bawah header, dan jika ada, ianya adalah dari editan dari owner template tersebut. Biasanya template hanya menyimpan di atas elemen post tapi tentu saja lebar dari elemen tersebut hanya selebar elemen post. Lalu timbul pertanyaan, apakah boleh kita meletakkan widget tepat di bawah header dan ukurannya sama dengan header tersebut? Jawapan dari pertanyaan itu ada di tip kali ini. Mau tau?
Berikut Cara Meletakkan Widget Di Bawah Header:
1. Login ke akaun Blogger anda
2. Pilih Layout > Edit HTML
3. Untuk jaga2, backup dulu template anda
3. Sudahkan? Sekarang cari kode berikut:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
4. Ganti kode tersebut dengan kode berikut:
<b:section class='header' id='header' preferred='yes'>
5. Klik Save Template
6. Sekarang pindah ke tab Page Elements
7. Lihat pada bagian Header nya, sudah ada tulisan add gadget kan? Nha, kalau mau menambahkan elemen tinggal klik aja tulisan itu.
Gimana? Mudahkan?
Selamat mencoba…
MELETAK WEBSITE LAIN DALAM BLOG
Pernahkah anda terpikir untuk meletakkan satu ruangan website lain dalam blog anda.?
Seperti anda meletakkan website google, yahoo dan pelbagai lagi dalam blog anda.
Ini membolehkan pengunjung blog anda melayari web lain tanpa meninggalkan blog anda.:)
Meletakkan website dalam blog masih boleh dilakukan dengan hanya menggunakan kod html/javascript
Klik disini untuk lihat demo website yang diletakkan dalam blog.
Berikut adalah langkah-langkah untuk tutorial ini.
1. Login akaun blogger, kemudian dari dashboard > layout > add a gadget
2. selepas klik pada add a gadget, pilih HTML/javascript
3. Copy code di bawah kemudian pastekan dalam ruangan html/javascript
<!--CHANGE LINKS BELOW TO YOUR OWN-->
<a href="javascript:jumpto('http://www.skjs2u.blogspot.com')">skjs2u</a>
<script language="javascript">
<!--
//Specify display mode (0 or 1)
//0 causes document to be displayed in an inline frame, while 1 in a new browser window
var displaymode=0
//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
var iframecode='<iframe id="external" style="width:99%;height:400px" src="http://www.google.com"></iframe>'
/////NO NEED TO EDIT BELOW HERE////////////
if (displaymode==0)
document.write(iframecode)
function jumpto(inputurl){
if (document.getElementById&&displaymode==0)
document.getElementById("external").src=inputurl
else if (document.all&&displaymode==0)
document.all.external.src=inputurl
else{
if (!window.win2||win2.closed)
win2=window.open(inputurl)
//else if win2 already exists
else{
win2.location=inputurl
win2.focus()
}
}
}
//-->
</script>
Penerangan :
-skjs2u: Gantikan dengan nama yang anda mahu
-http://skjs2u.blogspot.com: Gantikan dengan website yang anda mahu
MEMBAHAGI FOOTER KEPADA 3 BAHAGIAN
Nota:sebelum anda mengedit template adalah disarankan supaya membuat salinan template terlebih dahulu dengan mengklik Download Full Template pada halaman Layout--- Edit HTML
Pindahkan widget yang ada pada footer pada mana mana side bar atau bahagian yang lain.
1.Pada tetingkap Layout pilih edit HTML
2.cari kod berikut
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
(Nota:pada sesetengah template selain dari footer-wrapper anda mungkin jumpa footer atau footer-section)
1.Tukarkan kesemua bermula dari <div> ke </div> dengan kod berikut:
<div id='footer'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
2.Kemudian save template anda.
MENU BAR TANPA HACK TEMPLATE
Ini adalah cara yang ringkas untuk meletak menu bar melintang pada blog.Kebanyakkan menu bar diletakkan dengan kita perlu mengubahsuai pada template dengan meletakkan kod padanya.Tapi untuk menu bar ini cukup meletakkannya pada add gadget.
Daripada paparan blog anda klik pada customize - Page Elements - Add a gadget - HTML/JAVASCRIPT
| <a href= "http://namabloganda.blogspot.com/pagename">label </a> | 
kod ini adalah sebagai mana cara anda masuk masukkan link pada blog.Tanda garis menegak yang ada
pada link tu terletak sekali dengan butang pada butang backslash(\) pada keyboard.
Tujuan nya adalah untuk meletak pembahagi antara ruang seperti: HOME | CONTACT |
setelah meletak kod tadi,jangan lupa save terlebih dahulu.selepas itu seret dan letakkan dibawah header
Cara diatas cuma teks sahaja dan tidak nampak macam butang navigasi.untuk lebih menarik sedikit kita boleh gunakan dalam bentuk table.Cara membuat table ini ada saya terangkan dalam entri sebelum ini.
contohnya seperti dibawah ini.Home Blog Tutorial Pautan Kawan-kawan
(boleh ditambah dibawah ini jika ada lagi link hendak dimasukkan)
Masukkan kod ini
<table border="1" style="width: 300px;"><tbody>
<tr bgcolor="#e0f8e0">
<td align="center" ><a href="URL 1">tab 1</a></td>
<td align="center"><a href="URL 2">tab 2</a></td>
<td align="center"><a href="URL 3">tab 3</a></td>
(boleh ditambah dibawah ini jika ada lagi link hendak dimasukkan)
</tr></tbody></table>
bg color #e0f8e0 adalah kod warna boleh tukar mengikut kehendak anda dan kod boleh disemak disini.
width:300px adalah lebar column--tukarkan mengikut kesesuaian anda.
URL 1 hingga URL 3--masukkan url anda
tab1 hingga tab 3 teks yang akan dipaparkan pada jadual.
Selamat mencuba.
CARA LETAK LINKWITHIN DALAM BLOG
Linkwithin antara blog yang berguna untuk memaparkan post yang berkaitan dalam sesebuah blog. Link within ini berbeza dengan 'related post' biasa kerana linkwithin memaparkan thumbnail bagi entri yang berkaitan.
Contoh:
Antara kelebihan menggunakan linkwithin adalah:
1.Paparan dengan thumbnail yang lebih menarik perhatian pengunjung
2.Cara yang mudah untuk letak dalam blog tanpa memerlukan ubahan yang kompleks.
Berikut adalah cara ringkas untuk meletakkan linkwithin dalam blog.
1. Buka web http://www.linkwithin.com/learn
2. Pada paparan yang muncul, masukkan maklumat yang berkaitan.
Jika background anda gelap,tick pada kotak kosong kecil tu, dan pastikan anda masukkan bilangan yang sesuai dengan lebar blog anda.
3. Klik pada install widget
4. Pilih blog anda ingin masukkan linkwithin(pilih jika anda ada lebih dari 1 blog, kemudian klik add widget
5. Apabila sudah selesai, klik save pada page element anda. Dan boleh lihat hasilnya.:)
MEMBUAT KOD HTML YANG MUDAH
Untuk mengingati kod2 HTML bukannya mudah...Jika kita ingin membina blog kita sendiri, kita mesti berusaha untuk mengenal dan mengingatinya... Cara yang mudah kita 'copy' dan 'paste' sahaja kod2 yang kita perlukan..
Sedikit sebanyak tutorial ini dapat membantu anda..
1. Membuat kutipan teks
<blockquote>Masukkan teks anda di sini</blockquote>
Hasil:
Masukkan teks anda di sini
2. Membuat teks teletype (untuk membezakan tulisan biasa dengan kode html)
<tt>Masukkan teks anda di sini</tt>
Hasil:
Masukkan teks anda di sini
3. Membuat teks serong
<i>Masukkan teks anda di sini</i>
Hasil:
Masukkan teks anda di sini
4. Membuat teks tebal
<b>Masukkan teks anda di sini</b>
Hasil:
Masukkan teks anda di sini
5. Membuat garisan di tengah tulisan
<strike>Masukkan teks anda di sini</strike>
Hasil:
6. Membuat garisan di bawah tulisan
<u>Masukkan teks anda di sini</u>
Hasil:
Masukkan teks anda di sini
7. Membuat teks ke kiri
<left>Masukkan teks anda disini</left>
Hasil:
Left
8.Membuat teks ke tengah
<center>Masukkan teks anda disini</center>
Hasil:
Center
9. Membuat teks ke kanan
<right>Masukkan teks anda disini</right>
Hasil:
Right
10. Membuat Bullet Numberring
<li>Masukkan teks anda di sini</li>
Hasil:
Supaya permulaan tulisan ke tengah sikit
<ul><li>Bullet</li></ul>
Hasil:
- Bullet
11. Membuat teks lebih besar
<big>Masukkan teks anda di sini</big>
Hasil:
Masukkan teks anda di sini
12. Membuat teks lebih ke kecil
<small>Masukkan teks anda di sini</small>
Hasil:
Masukkan teks anda di sini
13. Membuat teks agak ke bawah
<sub>Masukkan teks anda di sini</sub>
Hasil:
Masukkan teks anda di sini
UBAH WARNA TULISAN
Gunakan kode di bawah ini untuk merubah warna tulisan posting.
<font color="#00FFFF">Merubah Warna Tulisan Pada Blogger</font>
Jika ingin mengganti dengan kode warna yang lain, KAU tinggal ganti kode warnanya (tulisan yang saya cetak tebal). Hasil dari contoh di atas adalah seperti ini...
Merubah Warna Tulisan Pada Blogger
READ MORE VERSI TERKINI
Perkataan Read more atau baca seterusnya adalah biasa terdapat pada mana blog dan web.Read more ,tapi kali ini agak berbeza dengan yang terdahulu kerana sistem auto Read more kali ini,kita tidak perlu lagi menulis kod sebelum posting seperti <div class="fullpost"> dan sebahagian lagi setelah <div class="fullpost"> kerana dengan sistem auto read more ini semua posting kita akan terpotong dengan sendirinya. Selain itu juga sekiranya terdapat gambar dalam posting,ia terpapar dalam bentuk thumbnail pada halaman hadapan secara Automatik,tanpa perlu menukar apa apa setting lagi.Dibawah ini adalah contoh paparan Auto read more ini:
Nota : Jika anda pernah memasang read more sebelum ini ,anda perlu kembalikan ia seperti asal.Caranya ialah dengan Klik menu Layout dan pilih Edit HTML.Tandakan pada Expand Template Widget.Setelah itu delete kod read more lama anda yang berwarna merah seperti dibawah ini :
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Seterusnya ikuti langkah berikut:
1. Setelah anda login ke blogger, seterusnya masuk kemenu Layout dan pilih Edit HTML. Klik pada kotak"expand widget template" dan cari kod </head>.
2. Copy dan paste kod dibawah ini tepat di atas kod </head> yang anda cari tadi.
<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
3. kemudian anda cari kod <data:post.body/>. bila anda jumpa kod tersebut. gantikan, kod <data:post.body/> dengan kod dibawah ini.
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE- <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
4.Kemudian klik save
5. Selesai.
Nota: : Kod yang mempuyai cetak tebal(bold) dan berwarna hijau, pada kod diatas mempunyai maksud seperti berikut.
var thumbnail_mode = "float"; (menunujukkan posisi gambar thumbnail pada kedudukan di sebelah kiri.
summary_noimg = 250; (menunjukkan berapa banyak huruf yang akan dipaparkan dalam posting anda tanpa gambar)gantikan mengikut keinginan anda)
summary_img = 250; (menunjukkan berapa banyak huruf yang akan dipaparkan dalam posting anda yangtanpa terdapat gambar) gantikan mengikut keinginan anda)
img_thumb_height = 120; (ukuran tinggi gambar yang akan dipaparkan)
img_thumb_width = 120; (ukuran lebar gambar yang akan dipaparkan)
READ MORE = gantikan dengan perkataan seperti baca seterus nya,baca lagi,seterunya dll.
MEMBUAT 'READ MORE' PADA POSTING
Membuat "read more" atau baca seterusnya pada blogger baru
Caranya:
* klik link Layout kemudian masuk ke Edit HTML
* Untuk mengedit template secara keseluruhan, anda harus aktifkan Expand Widget Templates
* Masukkan kod berikut sebelum tag </head> atau tepat sesudah kod
} ]]>seperti ini:
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Seterusnya supaya posting terpotong, cari kod <p><data:post.body/></p> dalam template anda dan tambahkan kod berikut tepat dibawahnya:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
upaya terpotong, setiap kali anda posting, klik pada bahagian teks pada posting dimana anda ingin tulisan Read More.. muncul, dan taipbaki posting sampai penghujung dan taip .
Untuk menambahkan kod ini, ketika posting anda mestilah dalam mod Edit HTML bukan Compose
MEMBUAT TEKS BERJALAN : MARQUEE
Sebelum ini saya ada memuatkan artikel bagaimana membuat teks berkelip.Kali ini saya akan tunjukkan pula cara bagaimana hendak membuat teks berjalan atau pun marquee text pada blog.
Berikut adalah kod yang kita gunakan:
<marquee>Teks bergerak</marquee>
Marquee yang biasa(standard) bergerak dari kanan ke kiri,kita boleh mengubahnya kepada beberapa bentuk gerakan dan keadaan dengan tambahan kod seperti dibawah
bgcolor=warna latar belakang
direction=arah gerakan (left,right,up.down)
behavior=karekter pergerakan (scroll,slide,alternate)
scroll(teks berputar)
slide(teks bergerak sekali dan berhenti)
alternate(teks bergerak dari kiri ke kanan dan berpatah balik)
Title=perkataan muncul semasa mouse berada di atas teks
Scrollamount=meletak kecepatan gerakan
Scrolldelay=mengatur tempoh masa
Loop=mengatur jumlah
Dari arah kiri ke kanan
<marquee behavior="alternate" >Arah kiri dan kekanan kemudian berpatah balik</marquee>
Dari kiri ke kanan dengan tempoh masa "11"
<marquee direction="right" scrollamount="11" >dari kiri ke kanan dengan tempoh masa 11</marquee>
Halakan pointer mouse pada teks dan ia berhenti
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">arahkankan mouse pada teks,berhenti</marquee>
Jika ingin buat turun atau naik gantikan direction="down" atau "up"
<marquee bgcolor="#0000FF" direction="down" height="80" width="70%">dari atas ke bawah</marquee>
<marquee width="70%" bgcolor="#DF01D7">dari kanan ke kiri</marquee>
TULISAN BERKELIP-KELIP
Tulisan yang berkelip pada blog banyak digunakan bagi menarik minat pengunjung untuk melihat dan klik link pada tulisan tersebut.
cara nya amat mudah cuma letakkan kod blink pada depan dan belakang teks yang hendak
contohnya:
<blink> Selamat Datang ke SK Ijok</blink>;
HASILNYA:
Untuk meletakkan link pada teks:
<blink><a href="http://skjs2u.blogspot.com/2010/04/membuat-teks-berkelipblink.html"target="_blank">Selamat Datang ke SK Ijok</a></blink>
HASILNYA:
Nota:Hanya sesuai untuk browser tertentu sahaja:Netscape(sesetengah version sahaja)dan Mozilla Firefox .Internet Explorer tidak support tags ini.
CARA PASANG KOTAK SCROLL PADA BLOG
Memasang scroll bar pada blog tujuannya yang utama adalah bagi menjimat kan ruangan.Cara membuat nya amat mudah dengan hanya mengikut langkah dibawah ini.
1.Masuk ke dashboard,kemudian pilih design-->>Page elements
2.Kemudian pilih add gadget--->>HTML/JAVASCRIPT
Masukkan kod berikut:
<div style="overflow:auto; padding:5px; width:170px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">masukkan teks atau kod yang dikehendakki disini</div>
Saiz kotak scroll boleh ditukar pada width(lebar)dan height)tinggi.
Untuk membuat menu scroll seperti pada blog ini:
kod nya adalah seperti dibawah ini :
<div class="widget-content">
<ul style="width: 145px; height: 180px; background-color: 000080; color: ffa000; font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; border: 0px; overflow: auto;">
<li><a href="http://teknikbuatblog.blogspot.com/2010/03/cara-membuat-blog.html" target="_blank">Cara membuat blog</a></li>
masukkan link seterusnya....
</li></ul></div>
Jika hendak letakkan nombor dihadapan senarai gantikan ul kepada ol
ul akan memaparkan bullet dihadapan
Kod warna oren untuk kod scroll
Kod warna hijau adalah link dan senarai kandungan yang hendak paparkan
3.kemudian save untuk melihat hasilnya.
MELETAK GAMBAR SEBAGAI HEADER BLOG
Template yang standard kebiasaanya tidak meletakkan add widget pada bahagian header yang mana menyebabkan kita tidak boleh memasang gambar sebagai header.Untuk membolehkan gambar dipasang sebagai header kita perlu membuat perubahan pada kod template.
Untuk membuatnya:
Cari kod ini pada template anda
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>
gantikan kod diatas menjadi seperti dibawah ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>
Nota: maxwidgets boleh anda gantikan bilangan yang diperlukan.kemudian klik save template.
Untuk meletakkan gambar upload dulu ke photobucket.com dan salin kod HTML nya.
Kemudian masuk pada dashboard=>design=>page elements.pilih add a HTML/javascript dan masukkan kod dari photobucket tadi atau pada add a gadget pilih picture=>image=> from your computer.klik pada browse=>pilih lokasi imej disimpan.
Sesudah dimasukkan klik butang save.
BACKUP TEMPLATE BLOG
Template bagi sesebuah blog boleh diibaratkan sebagai tulang belakang blog kerana template yang menyimpan semua maklumat berkaitan rupa bentuk blog anda, fungsi blog dan juga kebanyakan trick untuk sesebuah blog akan dilakukan di template (edit html).
Anda letak background ke, ubah colour ke, letak fungsi 'read more' atau pape, kebanyakkannya adalah di template.
Oleh itu adalah perlu untuk seseorang blogger akan backup dahulu template blog sebelum melakukan sebarang pengubahsuaian ataupun sebelum menukar template baru.
Tujuan backup template adalah untuk backup jika sebarang perubahan kod yang diaplikasikan tidak menjadi.
Tutorial untuk backup template bagi blog adalah seperti berikut.
1)Login seperti biasa. Kemudian dari dashboard klik layout
2) Dari layout, klik edit html dan dibawah sedikit anda akan jumpa 'download full template'
3)Keluar paparan, klik save..Siap.:)
Tips: anda boleh rename template yang anda download dengan tarikh anda download. seperti 29julai2009.xml. Ini untuk memudahkan anda kenalpasti tarikh anda buat backup untuk template blog anda.:)
SETTING ASAS BUAT BLOG
Bagi sesebuah blog, setting merupakan antara perkara penting untuk menentukan bagaimana paparan, dan perlakuan-perlakuan lain yang berkaitan dengan blog.
Antara perkara yang berkaitan dengan setting bagi sesebuah blog adalah tajuk blog, berapa bilangan entri, siapa yang boleh komen, dan lain² yang akan diterangkan di bawah.
Paparan untuk setting bagi sesebuah blog adalah seperti berikut.
Untuk entri ini, setting merangkumi basic, formatting dan publishing. Ini kerana 3 perkara ini boleh dianggap bahagian setting yang paling utama bagi sesebuah blog. Beberapa setting asas yang perlu diketahui oleh seorang blogger adalah seperti berikut.
Title : Title akan ditunjukkan pada bahagian atas browser apabila sesebuah blog dibuka.
Description : Berkaitan dengan apa kandungan sesebuah blog. Boleh dimasukkan sehingga 500 huruf. Contoh tutorial blog, tutorial blog dalam bahasa melayu, tutorial untuk semua dan lain² yang berkaitan. Kalau blog peribadi hampir boleh diabaikan ataupun letak sahaja seperti perjalanan hidupku, inilah kisah aku dan lain².
FORMATTING
Show : bilangan entri untuk paparan muka depan. jangan terlalu banyak. Biasanya antara 5 hingga 10 untuk mempercepatkan loading keseluruhan blog.
Date header format : Kurang penting, boleh pilih mana yang dirasakan sesuai.
Archive index date format : Format yang akan ditunjukkan untuk apa yang ditaip dalam sesebuah blog dalam jangka sebulan
Timestamp format : Kurang penting, boleh pilih mana yang dirasakan sesuai.
Time zone : Penting untuk pastikan kedudukan untuk masa adalah betul. Jika yang berada dalam negara Malaysia, sila pilih (GMT +8.00) Kuala Lumpur. Jika berada ditempat lain boleh pilih yang yang sepatutnya.
Language : English (Boleh juga pilih malay, tetapi dicadangkan english untuk memudahkan memandangkan kebanyakan sudah biasa dengan perkataan² english dalam dunia blogging)
BAGAIMANA LETAK KOD HTML/JAVASCRIPT
Apabila memasuki dunia blogging, antara perkara yang tidak dapat dielakkan adalah untuk menghias blog sendiri. Terdapat beberapa cara untuk menghias blog samada menukar template, memasang widget yang telah disediakan oleh blogger.com ataupun meletakkan sumber² lain dari luar yang biasanya melibatkan kod html/javascript.
Selain untuk menghias blog, kod html/javascript juga mempunyai fungsi² lain bergantung kepada tujuan apa kod itu dihasilkan.
Penambahan yang ingin dilakukan biasanya akan melalui perkara yang sama iaitu kod yang diperolehi perlu di 'paste'kan di ruangan html/javascrip.
Tutorial ini akan menunjukkan bagaimana hendak meletakkan kod html/javascript bagi sesebuah blog.
1) Login ke dalam blog anda seperti biasa. Kemudian dari 'dashboard', klik 'layout'
2)Setelah anda klik 'layout', dia akan auto masuk bahagian 'page element'. Kemudian pada 'page element' anda itu, klik pada 'add a gadget'
3)Selepas itu anda akan lihat banyak senarai yang ada, cari "HTML/javascript", kemudian klik pada "+"
4)Satu paparan kosong akan dibuka, kemudian paste code yang anda mahu letak dalam blog ke dalam ruangan kosong. kemudian tekan "save"
5)Siap. Anda boleh lihat hasilnya dengan klik preview. Anda juga boleh mengubah kedudukan code itu dengan hanya drag pada mana² kawasan page element itu.Apabila anda sudah puas hati, klik 'save' untuk kekalkan kedudukan.:).
LETAK VIDEO YOU TUBE DALAM BLOG
Youtube menjadi platform bagi seseorang blogger untuk berkongsi sesebuah video kepada pengunjung blog mereka.
Tutorial ini akan menerangkan bagaimana untuk meletakkan video yang terdapat dalam youtube ke dalam blog.
1.Login akaun blogger anda, kemudian klik pada new post.
2.Buka video dari youtube yang anda hendak post, kemudian lihat sebelah kanan untuk ruangan embed.
3. Klik customize untuk melakukan sedikit ubahan pada video anda. Anda boleh pilih option yang ada seperti border dan juga saiz video yang hendak dipaparkan.
4.Setelah selesai,copy code dari bahagian embed dan paste dalam ruangan blog anda.(klik preview untuk tengok keadaan video anda)
5. selesai.
-
Copy code below, insert into your blogAds
