Showing posts with label belajar blog. Show all posts

Belajar HTML dan CSS part III - The CSS

halo teman-teman semuanya, pada kali ini saya akan mencoba menjelaskan tentang basic- basic dari css. Sebelumnya, saya sudah menge-post tentang part I dan part II. Bagi teman-teman yang belum baca monggo dibaca nggih, sukur-sukur kalau pengetahuannya bertambah setelah bacanya, hehehe..

1. Belajar HTML dan CSS part I
2. Belajar HTML dan CSS part II

Pada kesempatan ini, saya ingin menjelaskan sedikit mengenai CSS, apa itu CSS, apakah fungsinya, apa struktur dasarnya, dan bagaimana cara kerjanya.

Jadi, apa itu CSS? CSS adalah salah satu dari rangkaian code yang digunakan oleh seorang web desainer dalam membuat sebuah halaman web. Fungsi dari CSS itu sendiri adalah sebiah code yang dikhususkan untuk memberi style terhadap halaman web yang sedang dibuat, seperti memberi background warna, style, ukuran, dan kondisi font, hingga memberi animasi terhadap halaman web (ini untuk CSS 3 dan HTML 5 ya, masih belum dibahas di sini :3 ). Dari fungsi tersebut, dapat disimpulkan bahwa CSS itu adalah code yang digunakan untuk menghias tampilan halaman web yang sedang kita buat agar dapat terlihat menarik dan interaktif sehingga pengunjung web kita tidak merasa bosan dengan tampilan yang monoton dan tidak kapok untuk mengunjunginya lain kali. Hal ini menjadi point tambahan sebuah halaman web untuk menjadi terkenal di samping sebuah halaman web harus memiliki content yang jelas dan berguna bagi pembacanya. Code CSS dapat ditempelkan pada setiap tag HTML secara langsung, dideklarasikan dalam satu bagian pada file HTML, maupun dibuat pada file berbeda berekstensi CSS dan kemudian dipanggil dari file HTML.

Okeh, sejauh ini itulah yang saya dapat jelaskan tentang CSS, mungkin teman-teman bisa mencari sumber lain sebagai tambahan penjelasan saya yang masih nubie ini, hehe...

Selanjutnya, CSS memiliki struktur dasar, layaknya sebuah tag HTML. Dalam sebuah tag CSS, ada beberapa komponen, yaitu selector, property, dan value. Struktur komponen dalam sebuah code CSS adalah sebagai berikut:


selector { property: value; }

Dapat dilihat syntax css di atas adalah struktur syntax dasar CSS itu sendiri. Jangan ngerasa sulit dulu yah, karena kalo teman-teman sudah mengusasai apa arti struktur tersebut saya yakin pasti akan mudah ke depannya...
Jadi, sebuah instruksi pada CSS memiliki tiga komponen dasar, yaitu selector, property, dan value dari property itu sendiri. Untuk penjelasan lebih lengkapnya bisa dilihat dari uraian saya di bawah ini:

1. Selector
Pada kode CSS, selector digunakan sebagai objek tempat style CSS akan kita implementasikan. Misalnya kita ingin memberi warna font berwarna merah pada semua content yang ada pada tag body, maka selector yang dituliskan adalah body. Pada selector, ada tiga bentuk object yang dapat kita tuju, yaitu pada object tag, identifier, dan class.
Untuk objek berbentuk tag html, maka kita dapat langsung menyebutkan tag tersebut sebagai selector, misalkan untuk semua <h1> size font akan dibuat 15px maka penulisan selector akan seperti di bawah ini:
h1 { font-size: 15px; }
Ingat bahwa untuk selector yang mengarah ke tag html langsung, maka semua tag yang dipilih akan mengalami efek style tersebut. Jadi pada contoh di atas semua tag h1 akan memiliki ukuran font sebesar 15 pixel.

Untuk objek yang memiliki identifier, maka disisipkan tanda '#' sebelum nama identifier diketikkan. Misalkan untuk h1 yang memiliki identifier bernama headline akan memiliki font size sebesar 15px, maka penulisannya adalah:
#headline { font-size: 15px; }
Keunggulan penggunaan selector berupa identifier adalah objek yang dituju hanya yang memiliki nama/identifier tersebut.

Untuk objek yang memiliki class, maka disisipkan tanda '.' sebelum nama identifier diketikkan. Misalkan untuk h1 yang memiliki class bernama anggota-judul akan memiliki font size sebesar 15px, maka penulisannya adalah:
.anggota-judul { font-size: 15px; }
Berbeda dengan identifier, class dapat berupa kumpulan tag sehingga style yang kita buat dapat ditujukan untuk beberapa tag yang memiliki class yang sama.

2. Property
Property merupakan tipe instruksi yang kita berikan pada selektor. Misalkan kita ingin memberi warna font merah pada tag body, maka property yang digunakan adalah color.

3. Value
Value merupakan nilai dari property yang kita gunakan. Meneruskan contoh dari property, misalkan kita ingin memberi warna font merah pada tag body, maka value yang diberikan adalah Red sehingga gabungan dari selector, property, dan value akan seperti di bawah ini:
body { color:Red; }

Oke, sekian penjelasan saya kali ini, saya berharap teman-teman terbantu dengan penjelasan ala kadarnya ini. Apabila ada kesalahan pada penulisan kali ini mohon koreksinya karena di sini kita belajar bersama-sama, bahasa gaulnya CMIIW gitu :3
terima kasih atas kunjungannya dan ikuti terus blog saya untuk postingan yang berikutnya :D
Read More

Membuat baca selengkapnya pada blog

Halo teman-teman, setelah agak lama tidak menulis blog, akhirnya selesailah juga tulisan saya yang ke-8 (kirain banyak --"). Saat ini kita akan belajar membuat baca selengkapnya pada posting kita di blog, ini sangat penting menurut saya karena dengan adanya fitur ini pada blog kita, kita dapat menghemat tempat di blog kita.

Langsung saja teman-teman, berikut ini tutorialnya:

1. Pastilah teman-teman harus masuk ke akun blog teman teman, setelah itu, seperti biasa, klik rancangan --> edit HTML, jangan lupa centang Expand Template Widget!!!
2. Masukkan kode berikut ini sebelum tag </head> (teman-teman bisa mencarinya dengan menggunakan ctrl+f)
<style><b:if cond='data:blog.pagetype == "item"'> span.fullpost {display:inline;}<b:else/> span.fullpost {display:none;}
</b:if> 
</style>
3. Selanjutnya,  carilah <p><data:post.body/></p> atau kalau tidak ada <data:post.body/>  dan tambahkan kode berikut tepat di bawah salah satu tag di atas
<b:if cond='data:blog.pagetype != "item"'>
<a expr:href='data:post.url'> read more..</a>
</b:if>
 teman-teman bisa mengubat huruf yang berwarna merah menjadi kata-kata teman-teman sendiri.

4. Setelah itu, tinggal masukkan tag <span class="fullpost">  dan </span> agar sisa bacaan teman-teman "menghilang" :D
Caranya???
Letakkan tulisan yang ingin ditampilkan di atas <span class="fullpost"> dan sisanya di antara <span class="fullpost">  dan </span> agar sisa bacaan teman-teman menghilang.

Cukup jelas kan? Kalau ada yang belum jelas silahkan berkomentar di bawah. Cukup sekian Posting dari saya, apabila ada yang kurang berkenan saya mohon maaf, itu bukanlah merupakan suatu kesengajaan, hehehe...
Terima kasih, SEMANGAT!!! :D
Read More

Cara meningkatkan pagerank blog

Apa kabar sobat pembaca, kali ini saya akan memberikan tips tips kepada sobat semuanya untuk meningkatkan pagerank sekaligus memperbanyak traffic di blog kita. Langsung aja ya ke tips-tipsnya.

1. Membuat artikel yang bermanfaat dan original
    Mungkin hal ini terlihat sepele bagi teman-teman, tetapi inilah hal yang terpenting dalam mengolah blog kita. Google akan sangat tidak menyukai blog yang banyak tulisan copy paste dari blog lain sehingga Google akan lebih suka mengindex blog penulis asli tulisan tersebut. Kalau udah gini kan rugi sendiri kita.

2. Submit blog kita ke directory
    Ini juga nggak kalah penting lagi nih teman-teman, sangatlah penting untuk men-submit blog kita ke berbagai macam search engine. Percuma juga kan kalau kita sudah capek-capek mengetik post yang sebegitu banyaknya dan tidak ada yang membaca, CAPEK DEEH!!! Nah bagi yang belum, di bagian tulisan paling bawah ini disediakan free web submission yang akan mendaftarkan blog kita ke berbagai macam search engine, enak nggak tuh, hehehe...

3. Rutin mengupdate blog dan memposting artikel
    Google akan lebih menyukai blog yang memposting artikel secara rutin daripada blog yang memposting 3000 artikel dalam 1 bulan tetapi tidak pernah diupdate lagi. Paling tidak setiap 1 minggu sekali buatlah posting baru yang panjang setiap postingnya lebih dari 400 kata.

4. Blogwalking
    Ini adalah cara aneh yang terbukti mujarab nih teman. setiap kali kita membaca artikel di blog lain, hendaknya kita berkomentar dan memberi alamat blog kita di bawah komentar kita. Aneh kan? Tapi jangan remehkan....

5. Pelajari SEO untuk memperbanyak traffic
    Nah ini  belum saya jamah nih, belum mudeng sih, hahaha. Bagi temen-teman yang sudah mengerti, pelajarilah SEO untuk memperbanyak traffic blog kalian. Kalau blog kalian terkenal, kalian juga kan yang diuntungkan.

6. Berdoa kepada Allah S.W.T
    Karena tanpa kehendak-Nya blog kita tidak akan menjadi apa-apa, hahaha...

Itulah teman-teman tips untuk meningkatkan traffic di blog kita, oh iya, isi form di bawah ya bagi yang belum submision ke directory, tanpa penipuan deh...


cukup sekian, terima kasih :D
Read More

Membuat slide show post di blog

Halooo teman-teman, kali ini saya akan membahas (walau kenyataanya sama-sama belajar) tentang cara membuat slideshow tentang post kita di blog. Dengan adanya slideshow, pengunjung akan dimudahkan untuk melihat "keseluruhan" dari isi blog kita sekaligus mempercantik tampilan dari blog kita sendiri, tetapi di tutorial ini saya menggunakan interface lama, jadi bagi pemula yang menggunakan interface baru diharap menyesuaikan, kalau perlu diubah ke interface lama.


Pertama-tama, masuk ke dasbor blog kita, dan klik "rancangan". Setelah masuk tab rancangan, klik "edit html" dan masukkan kode berikut ini di bawah persis kode <head> (kalau teman-teman kesulitan mencari kode <head> gunakan find [ctrl+F]). Jangan lupa di centang Expand template widget yaa. Berikut ini kodenya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type='text/css'>
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>







Nb: yang berwarna merah dapat diganti sesuai keinginan teman teman untuk menyesuaikan ukuran.

 Apakah dengan ini gambar sudah tampil? Sabar ya teman-teman, BELUM, hahaha. Masih ada 1 langkah lagi nih, masih di menu rancangan, klik "elemen laman" dan klik lagi "tambah gadget". nah, di sana ada banyak pilihan gadget kan? pilih yang HTML/Java Script dan masukkan kode berikut ini:
<ul class="slideshow">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjELR2zckybw69_4l4t9H2AScGJjfo5TcqokWhb6alk2sjCSp7udRmpZZDSTHoNGzQ_vZGKRz8U-mlLVlDOt8b_bbfeP1yWGACGoZektA5YEbo54lB2WbgpAtphKBJM-eoQc2qDDcPWKw/s1600/1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjELR2zckybw69_4l4t9H2AScGJjfo5TcqokWhb6alk2sjCSp7udRmpZZDSTHoNGzQ_vZGKRz8U-mlLVlDOt8b_bbfeP1yWGACGoZektA5YEbo54lB2WbgpAtphKBJM-eoQc2qDDcPWKw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN2RtqK9HyVDqTTarit-5D2p7c9dlMXaZ2ewfe73DRji69_2ZPYTGhGSWv7cLx7eW-BU-Stm7dFvuHeJ_QVWb7qaWBhbXv9-AkrGEGlbIyQILcwSxwxX1Y5ggXLho-9sBm5Lnyg0OlQYA/s1600/2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN2RtqK9HyVDqTTarit-5D2p7c9dlMXaZ2ewfe73DRji69_2ZPYTGhGSWv7cLx7eW-BU-Stm7dFvuHeJ_QVWb7qaWBhbXv9-AkrGEGlbIyQILcwSxwxX1Y5ggXLho-9sBm5Lnyg0OlQYA/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3kO8SdMctHLxnHHN9krAA-FXRWkAWccKD2df4UGpbA7JrcOQhb-ZyAqOUCsdnJa1_Jajdjaf-f9Wp9wDl3y3NxyxJCRg1tdjGb0WUAtoTgvu49KGYWxJkFiPRPL42IL-fJB225yHS5NM/s1600/3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3kO8SdMctHLxnHHN9krAA-FXRWkAWccKD2df4UGpbA7JrcOQhb-ZyAqOUCsdnJa1_Jajdjaf-f9Wp9wDl3y3NxyxJCRg1tdjGb0WUAtoTgvu49KGYWxJkFiPRPL42IL-fJB225yHS5NM/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidUX4_aXGVNs-ErqRJTrfqNYIDBAuptnp3VOToRZT5vOhIW3l_ZHSFP5Vp9wFHBGMJp6em5VxMTahaQXxE1c1HbvNFIpmePE8_7GA1wLUuzPPMQX-NR1mm6D24u8ccWgInA1160nFrSk/s1600/4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidUX4_aXGVNs-ErqRJTrfqNYIDBAuptnp3VOToRZT5vOhIW3l_ZHSFP5Vp9wFHBGMJp6em5VxMTahaQXxE1c1HbvNFIpmePE8_7GA1wLUuzPPMQX-NR1mm6D24u8ccWgInA1160nFrSk/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>

Nb: yang saya beri warna bisa teman-teman ganti sesuai keinginan teman teman, cari tau sendiri ya, kalo nggak comment di bawah :D

oke, kalau berhasil akan tampak slide show di Home blog teman-teman. Yang masih gagal, jangan menyerah!!! Coba terus sampai bisa, Semangat!!! hahaha....
cukup sekian post dari saya, takut kepanjangan, hehehe
terima kasih

sumber code:  http://pelajaran-blog.blogspot.com/2012/01/membuat-slideshow-photo-foto-berubah.html
Read More
Subscribe to: Posts (Atom)