Kebutuhan form dalam sebuah web terkadang tidak hanya sebatasa inputan data data saja. Beberapa website terlihat ada inputan berupa “file upload”. Bagaimana cara membuat tombol dan fungsi file upload pada sebuah website? Berikut catatannya.
Membuat input Radio pada form HTML
Input radio pada sebuah isian form HTML adalah isian data yang memiliki beberapa opsi dan pengunjung harus memilih salah satu opsi. Bedakan dengan checkbox, dimana pengunjung boleh memilih satu atau lebih pilihan. Contoh penggunaanya adalah dalam membuat form dengan isian jenis kelamin.
Cara Membuat Kotak Input Teks dan Password pada HTML
Bagian yang akan ditemukan padasebuah website yang memiliki keanggotaan adalah form pengisian atau form untuk log in. Seperti sehari hari, pastinya anda menggunakan sosmed. Untuk mengakses tersebut anda harus log in dengan memasukkan username/email beserta password. Sebagai salah satu unsur dalam tampilan website, maka berikut catatan dari saya tentang membuat form isian username (tipe teks) dan password.
Cara Membuat Tombol Submit pada Halaman HTML
Ketika menemukan sebuah form dalam halaman website. Setelah melengkapi pengisian form maka form akan dieksekusi. Perintah tersebut biasanya akan ditampilkan dalam bentuk tombol/button submit. Pada catatan kali ini akan dipaparkan bagaimana cara membuat tombol button atau tombol submit pada website.
Sejarah Perkembangan Javascript
Penggunaan istilah javascript agak mendatangkan keraguan. Sangat mirip dengan bahasa pemograman java. Sebelum lebih lanjut mendalami javascript perlu diketahui bahwasanya javascript ini berbeda dengan java. Jadi jika nanti mencari sumber tutorial lain, tulis lengkap dengan kata javascript bukan dengan java saja.
Pembuatan Kelompok Tertentu dalam Form HTML
Dalam pengisian formulir pada sebuah website pasti anda melihat ada beberapa kelompok tertentu. Kelompok tersebut misalnya Informas Pribadi, terus ada kelompok Riwayat Pendidikan, atau Riwayat pekerjaan. Lalu bagaimana cara membuat kelompok tersebut dalam sebuah halaman HTML. Berikut catatannya.
Pengertian tentang Javascript
Javascript merupakan bahasa pemograman web dengan istilah Client Side Programming Languange. Tipe bahasa pemograman ini maksudnya proses dilakukan oleh client. Client yang dimaksud adalah browser yang digunakan seperti Chrome, Mozilla, Opera dan lainnya.
Cara Membuat Checkbox pada Form HTML
Kotak checkbox merupakan sebuah tampilan pada form html dimana pengunjung akan memilih beberapa opsi dengan tanda centang ketika opsi tersebut dipilih.Sederhananya untuk contoh bisa anda copas dan jalankan kode di bawah ini sebagai sampelnya.
Cara Mengatur Lebar dan Tinggi pada tabel HTML
Pada HTML tanpa di aturpun tinggi dan lebar table akan diseting secara default oleh browser. Namun pada keadaan tertentu dibutuhkan lebar dan tinggi tabel sesuai keinginan. Adakalanya bagian kolom/baris tertentu membutuhkan ukuran yang berbeda sendiri. Untuk itu berikut catatan tentang cara mengatur lebar dan tinggi tabel HTML.
Pengelompokkan Baris dan Kolom dalam HTML
Dalam HTML tabel disusun secara perbaris dengan menggunakan tag <td> dan <tr>. Pola susunan sepert ini akan susah jika ingin menambahkan atribut tertentu, apalagi jika menggunakan CSS nantinya. Bila telah bisa memakai CSS untuk memanipulasi sebuah baris maka tinggal menambahkan atriut class, style atau tr sesuai selera. Baris akan berubah tampilannya sesuai yang diinginkan.
Cara Membuat Judul Tabel HTML
Bagian yang sangat harus diberikan pada tabel adalah judul. Ini akan membantu mengunjung untuk mengerti maksud dan tujuan tabel yang dibuat. Dalam HTML mungkin anda bisa memberi sebuah tulisan di atas tabel dan kemudian diberi rata tengah. Tetapi sebaiknya digunakan tag yang benar benar menyatu dengan tabel yang difungsikan sebagai judul tabel.
Membuat Judul Kolom pada Tabel HTML
Bagian dari sebuah tabel tentu ada judul pada bagian kolom. Sebenarnya bisa dibuat tabel biasa dan menggunakan style huruf yang berbeda pada bagian judul. Misalnya ditebalkan, diberi gaya huruf miring. Namun dalam HTML ini bisa dilakukan tanpa harus melakukan perubahan penulisan huruf. Cukup dengan memberikan perintah tabel header atau dengan menggunakn tag <th>.
Pengaturan Cellpadding, Cellspacing dan Border dalam Tabel HTML
Lebih lanjut dalam membuat tabel pada halaman HTML akan ada pengaturan yang melibatkan atribut border, cellpadding dan cellspacing. Atribut tersebut digunakan untuk membuat tampilan tabel agar lebih tertatur dan lebih rapi. Berikut masing masing penjelasannya.
Cara Menjalankan/Run Kode Javascript
Sebagai bahasa pemograman berbasis browser, maka javascript ini sangat sederhana jika ingin dijalankan. Cukup dengan bermodalkan browser Google Chrome atau Mozilla Firefox saja. Sementara itu untuk melakukan untuk melakukan penulisan kode bisa digunakan notepad bawaan dari windows. Atau bisa juga dengan menggunakan notepad ++ agar lebih baik.
Pengertian Padding dan Fungsi Padding dalam CSS
Pengertian Padding adalah jarak antara konten dengan border. Pemberian jarak ini akan mempertegas antara konten sebuah konten. Karena dengan posisi konten dengan border yang terlalu mepet tidak akan terlalu indah dilihat. Nanti kita akan lihat contohnya.
Penggunaan Tag HTML yang Memperindah Halaman
Dalam HTML ada tag khusus yang digunakan untuk memperindah tampilan. Tag ini sebenarnya berada di dalam HTML versi lama. Namun dalam penggunaanya sekarang telah digantikan oleh CSS. Tak ada salahnya juga untuk anda mengetahui beberapa tag jadul ini dan menggunakan dalam desain halaman html anda.
Menampilkan dan Mengetahui Kesalahan Kode Javascript
Menampilkan javascript ini telah dijelaskan pada tutorial sebelumnya. Bisa menggunakan browser seperti Google Chrome atau Mozilla Firefox. Tetapi dalam penulisan kode javascript tentu tak akan luput dari khilaf dan kesalahan yang membuat program tidak berjalan. Bisa saj kesalahan tersebut dari penulisan fungsi dan kekurangan kode 'wajib' seperti tanda ;, }.
Membuat Border (Bingkai) pada Halaman HTML dengan CSS
Border atau bingkai adalah garis pada tepi sebuah objek. Fungsi border akan mempertegas objek yang ditampilkan dan tentunya akan memperindah tampilan objek tersebut. Berikut ini sebuah ringkasan tutorial CSS dan HTML tentang membuat border pada objek halaman.
Cara Menyisipkan Kode Javascript ke HTML
Javascript merupakan sebuah bahasa pemograman untuk membuat tampilan website interaktif. Sekali lagi fungsi javascript hanya sebagai fungsi. Sementara untuk menmpilkannya dibutuhkan html. Berikut ini ada 4 cara menyisipkan javascript ke html.
Mengatur Lebar dan Tinggi CSS Box Model
Property penting yang ada pada CSS Box Model yaitu setting lebar dan tinggi pada object yang dibuat. Untuk itu rasanya cukup penting berbagi catatan ini agar anda bisa mndapatkan tampilan yang sesuai dengan yang anda inginkan pada halaman website. Berikut tentang pengaturan width- dan height pada object CSS (CSS Box Model).
Tempat Paling Baik untuk Javascript dalam HTML
Pada topik sebelumnya telah dibahas tentang posisi bagaimana menyisipkan kode javascript ke html. Pada bahasan kali ini kita akan samasama mempelajari dimana posisi javascript tersebut sebaiknya diletakkan. Pada dasarnya peletakan javascript tergantung selera dan sesuai kebutuhan website. Karena posisi tersebut sedikitnya memiliki pengaruh pada eksekusi nantinya. Mari kita lihat posisi javascript dan pengaruhnya terhadap tampilan website.
Pengertian CSS Box Model
CSS box model adalah prinsip pada elemen halaman website yang diproses dan ditampilkan dalam bentuk kotak. Ini berguna dalam 'peng-kotak-an' bagian bagian halaman pada website. Sebut saja paragraf, header, gambar dll.
Menampilkan Hasil Javascript pada Halaman
Javascript sebagaimana telah dijelaskan digunakan untuk membuat interaksi antara user dan web dengan keunggulan semua proses data dilakukan oleh browser, tidak server hostingan web. Merujuk interaksi tersebut tentu misalkan ada yang akan ditampilkan jika user melakukan aksi seperti hasil dari input data. Sebagai contoh, misalkan sebuah kalkulator yang ditulis dengan javascript. Setelah input nilai mak user akan mengharapkan hasil. Bagaimana cara menampilkan hasil dalam javascript? Itulah yang akan dibahas pada sesi ini.
Mengatur Jarak Antara Kata dan Antar Huruf dalam CSS
Salah satu tampilan teks yang harus diketahui dalam merancang sebuah halaman website adalaah mengatur jarak antara huruf dan jarak antara kata. Bila jarak teks terlalu rapat untuk kepentingan tertentu maka akan menyulitkan untuk dibaca. Berikut catatan kecil bagaimana cara mengatur jarak antara huruf dan jarak antara kata pada halaman website dengan menggunakan CSS.
Penulisan Karakter Khusus dalam HTML
Ketika anda menulis sebuah halaman dengan format html maka adakalanya dibutuhkan karakter khusus. Misalnya saja untuk menulis karakter ">" atau "<" dalam HTML karakter tersebut tidak akan muncul ketika kode dijalankan. Karena dalam HTML beberapa karakter menjadi sebuah syarat khusus atau perintah.
Kegunaan Tag "pre" dan tag "code" pada HTML
Dalam sebuah halaman HTML adakalanya dibutuhkan bentuk penulisan khusus. Seperti pada penulisan dengan spasi yang agak menjorok antar kata. Atau apabila halaman membahas tentang koding maka perlu ditampilkan tulisan dengan jenis monospace.
Memahami Core JavaScript dan Document Object Model
Core javascript, jika diterjemahkan memiliki arti javascript inti adalah kata yang digunakan untuk bahasa pemograman javascript. Javascript ini akan membahas tentang aturan penulisan, bagaimana cara mendefenisikan variabel, jenis tipe data pada javascript, cara membuat array, penulisan IF dan membuat objek tertentu dengan javascript.
Penulisan Rata Teks pada CSS
Dalam sebuah teks dikenal rata teks atau text-align. Misalkan pada pengolahan data microsoft words. Dikenal ada rata kanan, rata kiri dan rata tengah. Tak terkecuali pada CSS. Pada tampilan sebuah website, akan ada pada halaman teks bentuk rataan.
Cara Menulis Teks Menjadi Terbalik dalam HTML
Kegunaan ini sebenarnya saya tidak paham untuk apa pada website. Namun fungsi tag berikut ini cukup unik. Teks akan ditulis secara terbalik dalam html. Misalkan sebuah kata HARI maka dengan menggunakan tag ini akan tampil menjadi IRAH. Tidak hanya berupa kata, sebuah paragraf bisa terbalik dibuatnya.
Cara Membuat Huruf Tebal, Miring, Garis Bawah dan Tercoret pada HTML
Dalam sebuah web nanti akan diperlukan beberapa tampilan kata dengan bentuk spesial. Kata atau kalimat ditampilkan dalam bentuk huruf tebal, miring, menggunakan garis bawah atau tercoret. Nah ketika anda menulis dalam bahasa html, apa kode untuk huruf besar, huruf miring, garis bawah dan tercoret dalam html? Berikut penjelasannya.
Dasar Penulisan Javascript
Agar bisa dibaca tentu dalam penulisan sebuah kalimat harus mengikuti ketentuan umum. Sama dalam javascript agar bisa terbaca oleh browser maka dalam javascript ini ada beberapa aturan penulisan yang harus diketahui. Aturan penuliasan umum yang akan dijelaskan disini adalah tentang penulisan huruf besar dan huruf kecil, spasi;enter;tab , penulisan komentar penjelas dalam penulisan, penulisan identifier, reserves keyword dan semi colon.
Contoh Penulisan Text-Decoration pada CSS
Text-decoration yang dimaksud adalah efek yang digunakan untuk menghias sebuah selector dalam CSS. Contoh text-decoration adalah tulisan yang memiliki garis-vawah, teks yang di coret dan teks yang memiliki agris bawah. Adapun properties yang digunakan adlah underline, overline, line-thorugh.
Cara Membuat Internal Link / Tautan Internal pada Satu Halaman HTML
Internal link atau tautan internal yang dimaksud disini adalah link yang bekerja hanya dalam halaman itu. Berbeda dengan eksternal link, dimana ketika link diklik akan diallihkan ke halaman baru. Ini berguna jika dalam suatu halaman isi dokumen sangat panjang, kemudian pada halaman bawah ada yang harus direferensikan atau mengharuskan pembaca nantinya menuju bagian tertentu pada bagian atas. Pembaca bisa saja scrolling, tetapi agar memudahka pembaca lebih baik diberikan tautan internal. Ketika di klik maka pembaca langsung diarahkan ke bagian yang diperlukan tersebut. Sebagai contoh coba anda kelik kata ini : KE PARAGRAF AKHIR.
Contoh dan Cara Penulisan Variabel dalam Javascript
Pada semua bahasa pemograman, variabel merupakan sebuah peubah atau 'perwakilan' dari nilai. Variabel bisa saja bertipe angka, string booelan. Istimewanya pada javascript tidak perlu pernyataan tipe data. Berbeda tentunya dengan program C++ atau visual basic. Variable pada javascript ini lebih fleksibel dalam artian bisa diubah memjadi tipe lain. Dalam dunia pemograman ini disebut dengan typeless programming language.
Tipe Tipe Data pada Javascript
Pada bahasa pemograman javascript ini dikenal dengan istilah basis objek. Data dalam javascript ini berbeda dengan bahasa yang ada dalam PHP (dikenal dengan istilah prosedural). Dalam javascript angka, string dibaca sebagai objek.
Penulisan Singkat Property Font dalam CSS
Untuk mengubah tampilan font pada website biasanya digunakan property font-size, font-style, font family, font-weight font-variant dll. Masing masing property ditulis dan diberi value. Namun ternyata penulisan tersebut bisa disingkat dalam bentuk umum. Format penulisan font dalam satu property saja contohnya adalah :
dengan penulisan seperti di atas akan diartikan bahwa untuk selector p akan tampil huruf miring tebal dan bentuk smal-caps dengan ukuran font 17px dan jenis huruf san-serif. Dengan demikian beberapa propertybisa dibuat dalam satu baris dan lebih singkat.
Penulisan bentuk seperti ini tidak harus lengkap. Yang harus ada adalah font-size dan font-family. Yang lain seperti fon-style boleh ada dan boleh tidak. Pada contoh di atas maka yang harus ada adalah nilai 17px dan san-serif.
Untuk antara font value cukup di batasi spasi. Sementara untuk antara dua font-family dibatasi dengan koma.
Dalam penggunaan line-height dengan cara ini, line-height ditambahkan dengan menggunakan garis miring dan value sesudah font-size. Contohnya : font : bold italic small-caps 12px/120% monospace, cursive, sans-serif.5em/120%.
Urutan penulisan tidak harus berurutan. hanya saja untuk font-size dan font-family harus berada pada dua urutan paling akhir. Sebagai contoh bisa digunakan diperhatikan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.upper { font: italic bold small-caps 16px/80% serif;}
.lower { font: italic 16px/120% Arial, Helvetica, sans-serif; }
.cap { font: 16px/1.2em Georgia, Times, serif; }
.small { font: small-caps 18px/24px "Comic Sans MS", serif; }
</style>
</head>
<body>
<h3>Menulis Properties Font pada CSS</h3>
<p class="upper"> Puji dan syukur penulis ucapkan kehadiran Allah SWT yang telah melimpahkan rahmat, hidayah dan karunia-Nya sehingga penulis dapat menyelesaikan laporan observasi Praktek Lapangan Kependidikan ini. </p>
<p class="lower"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="cap"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="small">Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
</body>
</html>
Bisa difokuskan memperhatikan bagian yang berwarna merah. Dalam penulisan tersebut semua gay huruf diitulis dalam bentuk satu baris pada masing masing paragraf yang di defenisikan.
p { font: italic bold small-caps 17px san-serif; }
dengan penulisan seperti di atas akan diartikan bahwa untuk selector p akan tampil huruf miring tebal dan bentuk smal-caps dengan ukuran font 17px dan jenis huruf san-serif. Dengan demikian beberapa propertybisa dibuat dalam satu baris dan lebih singkat.
Penulisan bentuk seperti ini tidak harus lengkap. Yang harus ada adalah font-size dan font-family. Yang lain seperti fon-style boleh ada dan boleh tidak. Pada contoh di atas maka yang harus ada adalah nilai 17px dan san-serif.
Untuk antara font value cukup di batasi spasi. Sementara untuk antara dua font-family dibatasi dengan koma.
Dalam penggunaan line-height dengan cara ini, line-height ditambahkan dengan menggunakan garis miring dan value sesudah font-size. Contohnya : font : bold italic small-caps 12px/120% monospace, cursive, sans-serif.5em/120%.
Urutan penulisan tidak harus berurutan. hanya saja untuk font-size dan font-family harus berada pada dua urutan paling akhir. Sebagai contoh bisa digunakan diperhatikan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.upper { font: italic bold small-caps 16px/80% serif;}
.lower { font: italic 16px/120% Arial, Helvetica, sans-serif; }
.cap { font: 16px/1.2em Georgia, Times, serif; }
.small { font: small-caps 18px/24px "Comic Sans MS", serif; }
</style>
</head>
<body>
<h3>Menulis Properties Font pada CSS</h3>
<p class="upper"> Puji dan syukur penulis ucapkan kehadiran Allah SWT yang telah melimpahkan rahmat, hidayah dan karunia-Nya sehingga penulis dapat menyelesaikan laporan observasi Praktek Lapangan Kependidikan ini. </p>
<p class="lower"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="cap"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="small">Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
</body>
</html>
Bisa difokuskan memperhatikan bagian yang berwarna merah. Dalam penulisan tersebut semua gay huruf diitulis dalam bentuk satu baris pada masing masing paragraf yang di defenisikan.
Cara Membuat Description List pada HTML
Selain dengan penggunaan numbered and bullet. Dalam tampilan web ada cara lain untuk menyatakan data yang memilik poin poin tertentu. Terutama untuk poin dengan sedikit penjelasan. Jenis penulisan ini disebut description list.
Arti NaN dan Infinity pada Javascript
Pada operasi hitung dalam bahasa pemograman javascript adakalanya ditemukan hasil perhitungan berupa kata NaN dan Infinity. Dua bentuk hasil tersebut merupakan hasil yang menjelaskan hasil perhtungan yang tak terdefenisi dan tak terhingga. Lebih lengkap, munculnya NaN dan Infinity disebabkan oleh beberapa faktor yang akan kita bahas di bawah ini.
Tipe Data Angka dan Operasi Hitung dalam Javascript
Dalam bahasa pemograman javascript tidak sama dengan beberapa bahasa pemograman lain. Javascript tidak mengenal jenis bilangan. Seperti di Pascal dikenal bilangan intege (bilangan bulat), bilangan desimal. Pada javascript semua bilangan dianggap sama dan dieksekusi sebagai bilangan desimal.
Mengubah Huruf Kapital teks dengan CSS
Terkadang pada suat kondisi diinginkan untuk merubah kalimat menjadi huruf besar semua atau huruf kecil semua atau setiap awal kata menjadi di awali huruf besar. Seperti contoh jika di program miscrosoft word, coba anda ketik sebuah kalimat. Kemudian pilih/block kalimat tersebut tekan Shift+F3 berulang kali, coba perhatikan apa yang terjadi? Ya, huruf akan berubah, ajdi kecil semua, besar semua atau awal kata dengan huruf besar.
Penggunaan Span dan Div pada HTML
Bahasa HTML dipergunakan dalam membuat konten. Perintah pembuatan konten tersebut berupa tag khusus. Misalkan telah dibahas tag <b> untuk menampilkan huruf dengan bentuk bold. Kemudian dalam html juga dikenal tag <span> dan tag <div>. Apa itu span dan div dalam html? Dan untuk apa gunanya tag tersebut? Mari kita lihat
Membuat Keterangan dalam Penulisan Kode HTML
Dalam semua bahasa pemograman ada kode kode tertentu yang berisi keterangan di dalam kode. Keterangan yang dimaksud adalahberupa catatan untuk si penulis kode. Keterangan tersebut atau catatan itu tidak akan ditampilkan ketika script di compile. Karena fungsi catatan itu semata mata untuk di penulis kode saja.
Konstanta dan Fungsi Matematika dalam Javascript
Ini merupakan lanjutan dari penggunaan fungsi matematika dari penulisan variabel dan operasi dasar tambah, kali, bagi, kurang dan modulus. Sekarang akan dilihat pula penulisan konstanta matematika dalam javascript dan cara penulisan fungsi matematika dalam javascript.
Mengatur Tampilan Angka pada Javascript
Tampilan angka pada javascript dikenal dengan istilah Method Object Number. Pengaturan ini dimaksukan agar nanti tampilan angka terlihat lebih rapi. Misalkan untuk angka 5.319.849. Angka tersebut bisa dibuat dalam bentuk baku menjadi 5,319 x10 (pangkat) 6. Selain itu kegunaan lainnya untuk menyesuaikan dengan browser pengguna. Misal di Indonesia angka desimal dipisahkan koma, sementara di Amerika misalnya menggunakan titik. Dengan implementasi ini nanti otomatis borwser akan menampilkan format penulisan tersebut sesuai daerah si pengunjung. Misal Mr. Morrison akan melihat [ nol koma dua lima ] 0.25, dan Pak Joko akan melihat dengan 0,25.
Cara Menambahkan Random Post dengan Thumbnail di Blog
Sebuah blog tentu akan terlihat sepi tanpa adanya fitur dan widget tambahan lain di bagian pinggir blog. Bukan hal yang aneh lagi, biasanya pada pinggiran (side bar) atau footer akan ditambahkan beberapa hal yang membantu pengunjung mengeksplorasi blog tersebut.
Beberapa widget tambahan yang sering ditemui pada blog adalah Popular Post, Archive/ Arsip, Label, Subscribe/Langganan dan lain-lain.Entah anda yang memang meinginkan atau belum tahu mau diisi apa ruang yang tersisa ; saya menyarankan untuk mengisi tempat tersebut dengan random post atau post acak. Kenapa? Karena ini secara tidak lansung akan kembali mengedepankan post post anda yang terdahulu contohnya seperti gambar berikut.
Buat anda yang belum tahu Apa itu random post? Random post adalah widget dimana akan ditampilkan secara acak beberapa postingan anda terdahulu. Untuk memasangnya cukup mudah, masuk ke Layout/Tata Letak Blog Anda. Lalu Add Widget / Tambahkan Gadget pada bagian sidebar kanan atau footer blog anda. Selanjutnya pilih HTML/Javascript pada tab baru yang muncul lalu letakkan kode di bawah ini di dalamnya.
numposts=3 , Bisa anda ubah angkanya sesuai banyak random post yang akan tampil. Pada script di atas akan ditampilkan 3. Anda bisa mengganti menjadi 5,7 atau berapa saja.
https://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG, diubah untuk menampilkan gambar thumbail. Maksudnya jika gambar pada postingan tidak terbaca, maka akan ditampilkan gambar tersebut. Cukup anda ganti dengan URL gambar anda sendiri. Jika tidak diubah juga tidak apa-apa.
*UBAHDISINI*, Hapus saja jika anda ingin menampilkan random post pada blog tersebut. Jika anda ingin menampilkan random post dari blog lain, maka isikan dengan URL blog lain tersebut.
Bila anda ingin menampilkan random post untuk kategori (label ) tertentu saja anda bisa menambahkan /-/(namalabel) pada akhiran *UBAHDISINI*/feeds/posts/default pada 2 buah bagan URLyan berwarna merah. Sebagai contoh, Anda ingin menampilkan random post dari blog ini untuk kategori HTML saja. Jadi anda haru s ganti bagian yang warna merah dengan :
...src=\"http://ibahasapemograman.blogspot.com/feeds/posts/default/-/html?alt=json-....
Hal ini juga bisa dilakukan untuk menampilkan random post pada blog sendiri dengan label tertentu. Jangan lupa, nama label sangan sensitif, harus sesuai huruf besar dan huruf kecilnya. Oh iya jika label terdiri dari dua suku kata, misalkan ' aku ganteng' untuk spasi diganti dengan %20. Menjadi ...default/-/aku%20ganteng?.
Beberapa widget tambahan yang sering ditemui pada blog adalah Popular Post, Archive/ Arsip, Label, Subscribe/Langganan dan lain-lain.Entah anda yang memang meinginkan atau belum tahu mau diisi apa ruang yang tersisa ; saya menyarankan untuk mengisi tempat tersebut dengan random post atau post acak. Kenapa? Karena ini secara tidak lansung akan kembali mengedepankan post post anda yang terdahulu contohnya seperti gambar berikut.
Tampilan Random Post |
<style><!--#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:4px}--></style><ul id='random-posts'><script type="text/javascript">var rdp_numposts=3;var rdp_snippet_length=100;var rdp_info='no';var rdp_comment='Comment';var rdp_disable='';var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"*UBAHDISINI*/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};</script><script type="text/javascript">function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" title="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" alt="'+rdp_posttitle+'" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"*UBAHDISINI*/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};</script></ul>Sekarang jika diperhatikan ada beberapa bagian yang saya warnai merah hijau dan biru. Fungsinya untuk anda atur sendiri sesuai selera anda.
numposts=3 , Bisa anda ubah angkanya sesuai banyak random post yang akan tampil. Pada script di atas akan ditampilkan 3. Anda bisa mengganti menjadi 5,7 atau berapa saja.
https://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG, diubah untuk menampilkan gambar thumbail. Maksudnya jika gambar pada postingan tidak terbaca, maka akan ditampilkan gambar tersebut. Cukup anda ganti dengan URL gambar anda sendiri. Jika tidak diubah juga tidak apa-apa.
*UBAHDISINI*, Hapus saja jika anda ingin menampilkan random post pada blog tersebut. Jika anda ingin menampilkan random post dari blog lain, maka isikan dengan URL blog lain tersebut.
Bila anda ingin menampilkan random post untuk kategori (label ) tertentu saja anda bisa menambahkan /-/(namalabel) pada akhiran *UBAHDISINI*/feeds/posts/default pada 2 buah bagan URLyan berwarna merah. Sebagai contoh, Anda ingin menampilkan random post dari blog ini untuk kategori HTML saja. Jadi anda haru s ganti bagian yang warna merah dengan :
...src=\"http://ibahasapemograman.blogspot.com/feeds/posts/default/-/html?alt=json-....
Hal ini juga bisa dilakukan untuk menampilkan random post pada blog sendiri dengan label tertentu. Jangan lupa, nama label sangan sensitif, harus sesuai huruf besar dan huruf kecilnya. Oh iya jika label terdiri dari dua suku kata, misalkan ' aku ganteng' untuk spasi diganti dengan %20. Menjadi ...default/-/aku%20ganteng?.
Aplikasi untuk Membuat Kartu Animasi dengan Mudah
Salah satu konten yang paling banyak dan populer di sosial media adalah kartun animasi. Misalkan saja kita ambil contoh dari channel Youtube Animasinopal. Animasi yang sederhana tersebut bisa meraih jutaan pengunjung ke channel Youtubenya.
Bagi content creator pemula dan bingung dengan aplikasi apa membuat animasi gambar bergerak tersebut, beriku BPO memiliki sebuah aplikasi yang cukup direkomendasikan. Penggunaan aplikasi ini sebaiknya pada gadget yang memiliki pen seperti Samsung Galaxy Tab with Pen.
Pertama silakan buka Playstore Anda. Kemudian cari aplikasi Flipo Clip. Atau anda bisa download pada tautan berikut. [Download Flipo Clip].
Setelah memasang aplikasi tersebut. Silakan buka aplikasi itu. Kemudian klik tanda Tambah pada pojok kanan bawah,
Silakan berikutnya di isi detail. Maksudnya adalah memberi nama animasi yang akan anda buat. Lalu memilih ukuran kanvas atau layar. Di sana juga telah ada pilihan, animasi anda tersebut akan dibuat untuk konten Youtube, Instagram, Facebook dll.
Jika sudah cocok, kemudian pilih BUAT PROYEK.
Akan muncul kanvas untuk editor gambar, seperti berikut,
Ada beberapa pilihan seperti Tools (pen, penghapus dll) untuk menggambar, dan pilihan (copy, undo dll) layar pada Menu.
Silakan dibuat sebuah gambar. Kemudian dilanjutkan dengan tambah layar baru untuk layar ke-2. Jika anda seorang yang biasa membuat komik ini tentu tak akan asing lagi. Seperti contoh berikut,
Lalu perhatikan pada bagian semua gambar. Telah terbuat misalkan beberapa gambar. Kemudian bisa anda preview dengan klik tanda panah di kanan layar. Lebih mendalamnya, anda bisa tentu mengenal fungsi dari aplikasi ini setelah mencobanya sendiri. Hasilnya bisa dilihat pada bagian akhir video di bawah ini.
Bagi content creator pemula dan bingung dengan aplikasi apa membuat animasi gambar bergerak tersebut, beriku BPO memiliki sebuah aplikasi yang cukup direkomendasikan. Penggunaan aplikasi ini sebaiknya pada gadget yang memiliki pen seperti Samsung Galaxy Tab with Pen.
Pertama silakan buka Playstore Anda. Kemudian cari aplikasi Flipo Clip. Atau anda bisa download pada tautan berikut. [Download Flipo Clip].
Setelah memasang aplikasi tersebut. Silakan buka aplikasi itu. Kemudian klik tanda Tambah pada pojok kanan bawah,
Silakan berikutnya di isi detail. Maksudnya adalah memberi nama animasi yang akan anda buat. Lalu memilih ukuran kanvas atau layar. Di sana juga telah ada pilihan, animasi anda tersebut akan dibuat untuk konten Youtube, Instagram, Facebook dll.
Jika sudah cocok, kemudian pilih BUAT PROYEK.
Akan muncul kanvas untuk editor gambar, seperti berikut,
Ada beberapa pilihan seperti Tools (pen, penghapus dll) untuk menggambar, dan pilihan (copy, undo dll) layar pada Menu.
Silakan dibuat sebuah gambar. Kemudian dilanjutkan dengan tambah layar baru untuk layar ke-2. Jika anda seorang yang biasa membuat komik ini tentu tak akan asing lagi. Seperti contoh berikut,
Lalu perhatikan pada bagian semua gambar. Telah terbuat misalkan beberapa gambar. Kemudian bisa anda preview dengan klik tanda panah di kanan layar. Lebih mendalamnya, anda bisa tentu mengenal fungsi dari aplikasi ini setelah mencobanya sendiri. Hasilnya bisa dilihat pada bagian akhir video di bawah ini.
Mengatur Spasi (line-height) pada Website dengan CSS
Tingi baris dalam sebuah paragraf adalah jarak antara satu baris dengan baris berikutnya. Lebih sederhananya bisa anda lihat baris paragraf ini dengan paragraf berikutnya. Dalam program microsoft word misalnya dikenal dengan istilah spasi, ada spasi 1,5 , ada spasi 1. Ini juga yang diterapkan dalam website. Sebagai media yang dibaca online, harus perhitungkan jarak antar baris, agar pembaca website tidak terlalu pusing dengan spasi yang terlalu rapat.
Cara Membuat Tabel pada Halaman HTML
Salah satu tampilan yang akn digunakan dalam halaman HTML adalah tabel. Tabel akan digunakan untuk halaman yang berisi informasi tertentu. Untuk itu sekiranya ini adalah salah satu basic dalam pembelajaran HTML.
Read Only Property dalam Javascript
Pada pembelajaran ini akan dilihat Read Only Property dalam javascript. Selain fungsi operasi hitung dalam matematika, ada beberapa Read Only Property dalam javascript yang membantu dalam bahasa program javascript pada matematika nantinya.
Cara Menggunakan Google Font pada Website/Blog
Sebelumnya telah dijelaskan bagaimana cara merubah font atau jenis huruf dalam sebuah website yang di desain. Sedikit mengingatkan, cara pertama adalah dengan menggunakan font family CSS. Kemudian cara kedua adalah dengan mengundang jenis font dari luar atau dikenal dengan external font. Sekarang akan dijelaskan cara yang paling sering digunakan oleh para web designer yaitu dengan memanfaatkan Google Font.
Cara Menyisipkan Gambar pada Halaman HTML
Apa jadi sebuah web hanya berisi keseluruhan hanya teks? Sama sekali tidak menarik dan membosankan. Untuk itu perlu sekiranya disisipkan gambar. Untuk menyisipkan gambar dalam html caranya cukup mudah. Yaitu dengan menggunaka format:
<img src="alamatgambar"/>Alamat gambar disini merujuk pada sumber hostingan gambar. Jika, untuk melihat alamat gambar ini bisa pada bagian mana disimpan gambar tersebut dalam hostingan. Sementara jika gambar diambil dari sumber web lain, alamat gambar bsa diambil dengan cara : KLik kanan gambar - Copy Image Address.
Penggunaan Meta Tag dalam Blog dan Website
Bagian dari blog atau website yang beberapa saat lalu pernah menjadi trending dikalangan blogger dan pemilik website adalah meta tag. Namun akhir akhir ini sesuai algoritma pembaruan dari blogger, peran meta tag sudah tidak terlalu signifikan. Tapi ada baiknya juga dibahas mengenai fungsi meta tag dalam blog/website serta penulisannya meta tag.
Cara Mengubah Font Website dengan CSS dengan @font-face
Perintah @font-face dalam CSS
Bentuk lain sebagai cara merubah font pada tampilan website adalah dengan menggunakan peritnah @font-face. Jika sebelumnya telah dijelaskan bagaimana cara mengubah font website dengan font-family bawaan CSS, sekarang akan dijelaskan bagaimana mengubah font dengan menggunakan @font-face.Penggunaan ini hanya semaat mata untuk membuat website lebih berbeda dengan website lainnya. Tampilan font yang digunakan adalah font yang berasal dari 'luar' dan diundang ke halaman CSS. Sebelumnya, alangkah baiknya anda jika mengetahui jenis jenis font yang disukung oleh browser agar website yang dibbuat benar benar bisa dibaca oleh banyak orang. Ingat jika salah menggunakan font, bisa bisa tampilan website akan berantakan karena jenis font tidak didukung browser.
- EOT (Embedded Open Type) : format font yang compatible hanya dengan browser Internet Explorer. dan relatif jarang digunakan. Untuk merubah format font menjadi EOT, dibutuhkan aplikasi khusus. aplikasi tersebut bisa diliaht di website www.fontsquirrel.com
- TTF (True Type) and OTF (Open Type) : dua format font ini adalah format font yang paling banyak dipergunakan. TTF dan OTF compatible dengan banyak browser seperti: Internet Explorer 9 ke atas, Mozilla Firefox, Google Chrome, Safari, Opera dan iOS Safari v.42, Android browser, dan Blackberry.
- WOFF (Web Open Font Format) : Format WOFF adalah jenis format terbaru dan sengaja didesain khusus untuk kepentingan web. WOFF sebenarnya adalah versi kompresi dari TTF and OTF. Namun WOFF memiliki keunggulan yaitu ukuran lebih kecil dan akan lebih cepat jika di download. WOFF bisa beroperasi pada browser seperti: Internet Explorer 9 ke atas, mozilla Firefox, Google Chrome, Safari, Opera, Blackberry ,dan iOS Safari v.5 ke atas.
- SVG (Scalable Vector Graphic). Format SVG sebenarnya bukan merupakan format untuk font, tapi format untuk menyimpan gambar vector [*gambar yang bila di zoom tak merubah kualitasnya). Format font SVG tidak didukung oleh Internet Explorer dan jmozilla Firefox.
Cara Menggunakan Font External dalam CSS
Untuk cara merubah font pada tampilan website dengan external font ini maka harus dipersiapkan font yang digunakan. Sekarang kita akan gunakan font yang ada dalam sistem Wndows. Caranya adalah Control Panel - Appereance and Personalization - Font.Pilih Salah satu huruf dan copy file tersebut. Paste-kan di folder dimana anda menyimpan HTML. Untuk percobaan ini saya mengambil jenis huruf BlackAdder ITC Reguler. dengan nama file hasil copy-an ITCBLKAD.ttf Anda bisa memilih jenis font lain sesuai selera Anda. Selanjutnya anda copy code dibawah ini di notepad yang nanti disimpan dengan extension html.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
@font-face {
font-family: "huruf gue";
src: url('ITCBLKAD.TTF');
}
.ini {
font-family: "huruf gue";
font-size: 29px;
}
</style>
</head>
<body>
<h2>Menggunakan Font External CSS</h2>
<h3>Font default:</h3>
<p> Dari hasil pengujian hipotesis dengan mengunakan software MINITAB 14 didapat P-value 0,041. P-value yang didapat kecil dari 0,05 artinya hipotesis penelitian diterima. Dengan demikian, hasil belajar matematika siswa dengan pembelajaran model reciprocal teaching lebih baik daripada pembelajaran konvensional. </p>
<h3>Font input external:</h3>
<p class="ini">Dari data aktivitas terlihat adanya peningkatan aktivitas positif siswa. Ini berarti model pembelajaran reciprocal teaching mampu meningkatkan aktivitas siswa. </p>
</body>
</html>
Sekarang Perhatikan kode yang saya beri warna biru.
<style type="text/css">
@font-face {
font-family: "huruf gue";
src: url('ITCBLKAD.TTF');
}
.ini {
font-family: "huruf gue";
font-size: 29px;
}
</style>
Perintah @font-face di atas merupakan peritnah untuk mengundang jenis huruf dari file lain. Untuk font-family: "huruf gue"; bisa anda ubah " huruf gue dengan nama jenis font sesuka anda. Kemudian src: url('ITCBLKAD.TTF'); merupakan value alamat dimana file jenis font berada. Selanjutnya baru digunakan dalam sebuah penulisan CSS untuk merubah huruf seperti biasa. Misalkan pada contoh di atas, saya menggunakan huruf tersebut pada selector "ini". Kemudian pada selector ini saya memberikan propertu font-family dengan value sesuai nama font yang telah saya berikan pada fungsi @font-face tadi. ("huruf gue").
Cara Membuat Link pada Halaman HTML
Link atau tautan merupakan rujukan daru hypertext dalam pengertian HTML. Pembuatan link digunakan untuk menghubunkan ke halaman lain. Secara aplikasi-nya tentu anda telah mengenal apa itu link dalam sebuah website. Jika di klik link tersebut akan menuju ke halaman tujuan tertentu.
Cara Mengubah Huruf pada Halaman HTML dengan CSS Font Family
Huruf atau font pada aplikasi sejenis Microsoft Office menyediakan banyak opsi jenis font. Font tersebut berasal dari sistem yang disediakan Windows. Beberapa aplikasi lain seperti Adobe Photoshop jika diinstall di PC maka ada beberapa font khusus tersendiri juga.
Membuat Numbered List dan Bullet List dengan HTML
Salah satu penulisan yang sering digunakan dalam sebuah web adalah penulisan daftar atau list. Sepertin menulis daftar klasemen pemuncak motogp terbaru misalnya.
- Marc Marquez
- Valentino Rossi
- Dani Pedrossa
Pembuatan penomoran tersebut yang akan dibahas pada catatan ini. Sebelumnya perlu diketahui bahwa tipe list tersebut ada yang menggunakan penomoran /abjad disebut ordered list (daftar terurut). satu lagi dikenal dengan istilah unordered list (daftar penomoran tak terurut) contohnya dengan menggunakan bullet dan simbol lainnya.
Kenali Beda Website dan Blog Ini!
Jika dilihat dalam fungsi secara umum mungkin blog dan website sama saja. Untuk orang awam (contohnya saya) berpikiran blog dan website tersebut sama. Sama sama menampilkan sesuatu baik itu artikel, foto dan lain sebagainya. Setelah mencari dan mengikuti terjun langsung ke dunia blogging dan mencoba masuk ke dalam dunia blog. Ternyata ada perbedaan antara blog dan website. Apa saja beda blog dan website? Dari berbagai sumber berikut catatan yang saya rangkum.
Font-Size dalam CSS
Font-size adalah property yang digunakan untuk mengubah besar-kecilnya huruf dalam CSS. Format penulisannya sebagai berikut :
selector {
font-size: ukuran-huruf;
}
selector {
font-size: ukuran-huruf;
}
Cara Menampilkan Semua Judul Postingan Blog dan URL (Link)
Adakalanya anda ketika memeriksa blog Anda butuh mengetahui semua judul postingan blog Anda. Atau ini juga bisa dijadikan sebagai bentuk sitemap sebuah blog. Atau dalam kondisi lain anda ingin melihat semua judul postingan blog anda atau blog orang lain beserta alamat url setiap postingan tersebut.
Untuk melakukan hal tersebut cukup mudah. Anda bisa menggunakan kode script di bawah ini.
<script type="text/javascript">
var postTitle=new Array();
var postUrl=new Array();
var postMp3=new Array();
var postDate=new Array();
var postYear=new Array();
var postMonth=new Array();
var postYearMonth=new Array();
var postYearMonth2=new Array();
var postTanggal=new Array();
var postLabels=new Array();var postBaru=new Array();
var sortBy="titleasc";var tocLoaded=false;
var numChars=250;var postFilter="";
var numberfeed=0;var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];
function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/><a href="http://feeds2.feedburner.com/YourFeed" style="font-size: 11px; text-decoration:none; color: #616469;">Subscribe to Our RSS Feed and Get all the updates On the Fly</a></br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><a href="'+postYearMonth2[b]+'">'+temp1+"</a></p><ul>");firsti=a;do{document.write("<li>");
document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+ " baca di "+postUrl[a]+ "</a>" );
document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
</script>
<script src="http://www.petunjukonlene.blogspot.com/feeds/posts/default?start-index=1&max-results=500&alt=json-in-script&callback=loadtoc"></script>
Hasilnya seperti di bawah ini:
Ada beberapa hal yang bisa anda kustomisasi di script di atas.
Untuk judul blog (warna merah) anda harus ganti dengan url blog yang akan anda tampilkan judul postingannya. Sementara untuk bagian yang berwarna biru, anda bisa ganti angkanya dengan mulai postingan ke berapa akan ditampilkan. Rata-rata untuk blogger biasanya akan tampil 150 postingan terbaru. Jika anda butuhmenampilkan 200 judul postingan beserta urlnya, anda bisa melakukannya dua kali. Pertama jalankan dengan menggunakan start-index=1, ambil semua judul postingan dan url –nya. Berikutnya mulai lagi dengan start-index=151.
Sementara jika Anda ingin memasang sitemap untuk blog Anda, scrip ini bisa dipasang pada page blog Anda. Tetapi sebelumnya silahkan hapus bagian yang berwarna kuning.
Untuk memasangnya di blog Anda, cukup buat disebuah Laman Baru, dan pastikan kode tersebut diposting dalam bentuk mode post HTML.
Untuk melakukan hal tersebut cukup mudah. Anda bisa menggunakan kode script di bawah ini.
<script type="text/javascript">
var postTitle=new Array();
var postUrl=new Array();
var postMp3=new Array();
var postDate=new Array();
var postYear=new Array();
var postMonth=new Array();
var postYearMonth=new Array();
var postYearMonth2=new Array();
var postTanggal=new Array();
var postLabels=new Array();var postBaru=new Array();
var sortBy="titleasc";var tocLoaded=false;
var numChars=250;var postFilter="";
var numberfeed=0;var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];
function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/><a href="http://feeds2.feedburner.com/YourFeed" style="font-size: 11px; text-decoration:none; color: #616469;">Subscribe to Our RSS Feed and Get all the updates On the Fly</a></br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><a href="'+postYearMonth2[b]+'">'+temp1+"</a></p><ul>");firsti=a;do{document.write("<li>");
document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+ " baca di "+postUrl[a]+ "</a>" );
document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
</script>
<script src="http://www.petunjukonlene.blogspot.com/feeds/posts/default?start-index=1&max-results=500&alt=json-in-script&callback=loadtoc"></script>
Hasilnya seperti di bawah ini:
Ada beberapa hal yang bisa anda kustomisasi di script di atas.
Untuk judul blog (warna merah) anda harus ganti dengan url blog yang akan anda tampilkan judul postingannya. Sementara untuk bagian yang berwarna biru, anda bisa ganti angkanya dengan mulai postingan ke berapa akan ditampilkan. Rata-rata untuk blogger biasanya akan tampil 150 postingan terbaru. Jika anda butuhmenampilkan 200 judul postingan beserta urlnya, anda bisa melakukannya dua kali. Pertama jalankan dengan menggunakan start-index=1, ambil semua judul postingan dan url –nya. Berikutnya mulai lagi dengan start-index=151.
Sementara jika Anda ingin memasang sitemap untuk blog Anda, scrip ini bisa dipasang pada page blog Anda. Tetapi sebelumnya silahkan hapus bagian yang berwarna kuning.
Untuk memasangnya di blog Anda, cukup buat disebuah Laman Baru, dan pastikan kode tersebut diposting dalam bentuk mode post HTML.
Specificity dalam CSS
Arti Specificity dalam selector CSS
Sederhananya ini merupakan salah satu jenis prioritas dalam CSS. Maksudnya adalah urutan terkuat dalam sebuah kode CSS apabila kode CSS berada dalam file yang sama. Pembahasan ini menentukan apa yang akan terjadi bila ada beberapa kode CSS yang saling berbenturan/menimpa. Jenis lain dari prioritas ini dikenal dengan Cascading, bisa dibaca pada artikel terkait : Prioritas Cascading dalam CSS.Sekilas saja tentang Cascading, jika Cascading dibahas prioritas berdasarkan letak sumber kode CSS. Maka pada Specificity ini bagaimana jika berada dalam sumber yang sama. Untuk memudahkan bisa dilakukan praktikum berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
p {
color:red;
}
div p {
color:green;
}
#bocet{
color:orange;
}
body div p {
color:yellow;
}
div p.kalimat {
color:silver;
}
</style>
</head>
<body>
<div>
<p id="bocet">
CSS Mana Yang Lebih Kuat
</p>
</div>
</body>
</html>
Perhatikan kode yang diwarnai biru. Pada kode tersebut diberikan CSS 5 macam selector. Selector tersebut bertingkat. Dimulai dari paragraf (p) dan dilanjutkan pendefenisian untuk bagian paragraf lebih rinci. Sekarang silahka dijalankan. Apa yang di peroleh?
Penjelasan
Dari hasil di atas ternyata yang menang adalah selector id bocet. Bisa dilihat sendiri yang berwarna orange. Ini dikarenakan selector 'bocet' lebih khusus dibanding selector lain.Untuk menghitung sifat khusus selector pada CSS maka digunakan rumus. Perhitungan dimulai dari ketetapan nilai masing masing selector. Nilai ketetapan tersebut adalah :
Dalam nilai tersebut diusahan menulis dalam 4 digit, agar lebih mudah dalam perhitungan. Sekaran mari dihitung spesifikasi CSS di atas :
- Setiap element/tag selector bernilai 0001
- Setiap class selector, attribut selector bernilai 0010
- Setiap ID selector bernilai 0100
- Setiap inline style bernilai 1000
- Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0001
- Selector div p, terdiri dari 2 tag selector (div dan p) , maka nilainya: 0002
- Selector #bocet, terdiri dari 1 ID selector, maka nilainya: 0100
- Selector body div p, terdiri dari 3 tag selector (body, div, p), maka nilainya: 0003
- Selector div p.kalimat, terdiri dari 1 class selector (kalimat) dan 2 tag selector (div, p) , maka nilainya: 0012
Dari perhitungan terlihat #bocet yang memiliki nilai paling tinggi. Maka dia pemenang dan diprioritaskan.
Terkadang dalam membuat sebuah desain website, meskipun telah di tulis selector CSS tetapi tampilan yang diinginkan tidak keluar. Ini bisa saja disebabkan karena selector lain lebih diprioritaskan. untuk itu bisa diakali dengan perintah !important.
Perintah !important dalam CSS
Untuk 'memaksa' kode yang tereliminasi oleh selector lain maka digunakan perintah !important. perintah ini ditulis pada bagian belakang property CSS. Dengan perintah ini maka bagian yang diberi !important akan menjadi prioritas utama. Sebagai contoh perhatikan dan jalankan kode di atas, tetapi ditambahkan !important pda selector p. Sehinga menjadi<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
p {
color:red !important ;font-size: 28px;
}
div p {
color:green;font-size: 25px;
}
#bocet{
color:orange;font-size: 20px;
}
body div p {
color:yellow;font-size: 15px;
}
div p.kalimat {
color:silver;font-size: 8px;
}
</style>
</head>
<body>
<div>
<p id="bocet">
CSS Mana Yang Lebih Kuat
</p>
</div>
</body>
</html>
Bagaimana hasil yang anda peroleh? Dengan penambahan !important di selector p maka tampilan akan berubah menjadi merah, sesuai value p. Nilai #bocet yang seharusnya lebih besar akhirnya dikalahkan oleh !important ini.
Kesimpulan : Jadi yang akan diprioritaskan CSS dalam sebuah selector bertingkat adalah !important - tag/class/id sesuai perhitungan di atas. Bisa dibilang jika memang mentok, tampilan yang diinginkan ditimpal selector lain dan anda bingung. Maka gunakan !important sebagai obat paling mujarab.
Penulisan Judul Header h1,h2,h3,h4,h5,h6 dalam HTML
Pada catatan ini akan diberikan jenis judul pada HTML besertan kegunaanya. Kembali diingatkan penulisan HTML dalam notepa/notepad++ tidak mengenal font size atau ukuran huruf. Semua ditulis dalam bentuk teks yang flat. Pemberian tanda (mark up) yang nantinya menentukan tampilan teks. Salah satu teks yang wajib ditampilkan adalah judul. Dari keseluruhan konten web tentu judul harus memiliki ukuran huruf yang lebih besar.
Cara Membuat Recent Post Berwarna pada Blogspot
Bila Anda sering berwisata pada blog blog orang lain, adakalanya akan menukan widget recent post dengan warna-warna. Hal ini sebenarnya saya alami sendiri. Kemudian, saya browsing deh bagaimana cara membuat recent post berwarna. Apa script yang harus saya pasang untuk mendapatkan widget recent post dengan aneka warna.
Ternyata cara-nya cukup mudah. Dari, Anda masuk pada editor template HTML dan menyisipkan beberapa kode saja. Sebelum kode scriptnya saya berikan, alangkah baiknya Anda lihat tampilannya seperti di bawah ini.
Di sana ada dua macam bentuk yang bisa Anda pilih. Setelah memutuskan mana yang anda suka, sekarang kita lanjutkan pada bagaimana cara memasang script tersebut di blogspot. Langsung saja pada Editor HTML template Anda. Lalu carilah kode: </style> atau lebih baik ]]></b:skin>. Lalu pastekan kode CSS di bawah ini,
Ternyata cara-nya cukup mudah. Dari, Anda masuk pada editor template HTML dan menyisipkan beberapa kode saja. Sebelum kode scriptnya saya berikan, alangkah baiknya Anda lihat tampilannya seperti di bawah ini.
Di sana ada dua macam bentuk yang bisa Anda pilih. Setelah memutuskan mana yang anda suka, sekarang kita lanjutkan pada bagaimana cara memasang script tersebut di blogspot. Langsung saja pada Editor HTML template Anda. Lalu carilah kode: </style> atau lebih baik ]]></b:skin>. Lalu pastekan kode CSS di bawah ini,
CSS Model I
/* Model Versi 1 */.gravityfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}.gravfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%}.gravfeatureditem .gracontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,60px);opacity:0;visibility:hidden;transition:all .3s}.gravfeatureditem:hover .gracontent{opacity:1;visibility:visible;transform:translate(0,0)}.gravfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center}.gravfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}.gravfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}.gravfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0.9;transition:background 0.3s linear,opacity 0.3s linear}.gravfeatureditem.first a:before,.gravfeatureditem.first .gracontent{background:#56a8df}.gravfeatureditem.second a:before,.gravfeatureditem.second .gracontent{background:#e49148}.gravfeatureditem.third a:before,.gravfeatureditem.third .gracontent{background:#5bccb6}.gravfeatureditem.fourth a:before,.gravfeatureditem.fourth .gracontent{background:#f5b44c}.gravfeatureditem a:hover:before{opacity:0.1;}.gravfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellygrav .6s linear;opacity:1;visibility:visible;transition:all .3s}.gravfeatureditem:hover a:after{opacity:0;visibility:hidden;transform:translate(0,-60px)}@media screen and (max-width:826px){.gravfeatureditem{width:50%}.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}@media screen and (max-width:641px){.gravfeatureditem{width:100%}.gravfeatureditem.second,.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}Catatan: Bagian yang saya tebalkan bisa Anda ubah dengan kode warna sesuka Anda.
CSS Model II
.gravityfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}.gravfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%}.gravfeatureditem .gracontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,0);opacity:1;visibility:visible;transition:all .3s}.gravfeatureditem:hover .gracontent{opacity:0;visibility:hidden;transform:translate(0,60px)}.gravfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gravfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}.gravfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}.gravfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0;transition:background 0.3s linear,opacity 0.3s linear}.gravfeatureditem.first a:before,.gravfeatureditem.first .gracontent{background:#56a8df}.gravfeatureditem.second a:before,.gravfeatureditem.second .gracontent{background:#e49148}.gravfeatureditem.third a:before,.gravfeatureditem.third .gracontent{background:#5bccb6}.gravfeatureditem.fourth a:before,.gravfeatureditem.fourth .gracontent{background:#f5b44c}.gravfeatureditem a:hover:before{opacity:0.9;}.gravfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,-60px);animation:jellygrav .6s linear;opacity:0;visibility:hidden;transition:all .3s}.gravfeatureditem:hover a:after{opacity:1;visibility:visible;transform:translate(0,0)}@media screen and (max-width:826px){.gravfeatureditem{width:50%}.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}@media screen and (max-width:641px){.gravfeatureditem{width:100%}.gravfeatureditem.second,.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}
1) Setelah kode script tersebut diletakkan di atas ]]></b:skin> , sekarang temukan tag </head> kamu letakkan tepat di atas tag tersebut script di bawah ini.
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
2) Berikutnya temukan kode </body> dan letakkan script ini di atasnya.
<script type='text/javascript'>//<![CDATA[// Recent Postfunction getPostUrl(a){for(var b=0;b<a.link.length;b++)if("alternate"==a.link[b].rel){var c=a.link[b].href;return c}}function getPostPublishDate(a){var b=a.published.$t,c=b.split("-")[2].substring(0,2),d=b.split("-")[1],e=b.split("-")[0],f=["January","February","March","April","May","June","July","August","September","Octobor","November","December"],g=f[d-1],h=g+" "+c+", "+e;return b?h:""}function getPostCategory(a){var b=a.category;b&&(b=a.category[0].term);var c='<div class="category-wrapper"><a class="category" href="/search/label/'+b+'?max-results=10">'+b+"</a></div>";return b?c:""}function Slider(a){for(var c=(new Array,""),d=a.feed.entry.length,e=0;e<d;e++){var f=a.feed.entry[e],g=f.title.$t,h=getPostUrl(f),l=(f.author[0].name.$t,getPostPublishDate(f),getPostCategory(f),f.category[0].term),m=a.feed.entry[e].content.$t,n=$("<div>").html(m);if(m.indexOf("//www.youtube.com/embed/")>-1)var o=a.feed.entry[e].media$thumbnail.url,p=o;else if(m.indexOf("<img")>-1)var q=n.find("img:first").attr("src"),p=q;else var p=no_image;0==e&&(c=c+'<div class="gravfeatureditem first"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),1==e&&(c=c+'<div class="gravfeatureditem second"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),2==e&&(c=c+'<div class="gravfeatureditem third"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),3==e&&(c=c+'<div class="gravfeatureditem fourth"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>')}slider.html('<div class="gravityfeatured">'+c+"</div>"),$(".gravityfeatured").find(".feat-img").each(function(){$(this).attr("style",function(a,b){return b.replace("/default.jpg","/mqdefault.jpg")}).attr("style",function(a,b){return b.replace("s72-c","s1600")}).attr("style",function(a,b){return b.replace("s320","s1600")}).attr("style",function(a,b){return b.replace("s400","s1600")}).attr("style",function(a,b){return b.replace("s640","s1600")})})}var slider=$("#gravityfeatured .widget-content"),sliderContent=slider.text().trim();"no"!==sliderContent.toLowerCase().trim()&&'"no"'!==sliderContent.toLowerCase()&&""!==sliderContent?"[recent]"!==sliderContent?$.ajax({url:"/feeds/posts/default/-/"+sliderContent+"?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$("#slider").remove();//]]></script><b:section class='gravityfeaturedz' id='gravityfeatured' showaddelement='yes'> <b:widget id='HTML94' locked='false' title='' type='HTML' version='1'> <b:includable id='main'> <div class='widget-content'> <data:content/> </div><div class='clear'/></b:includable> </b:widget></b:section>
3) Lalu simpan template Anda. Langkah berikutnya masuklah pada tata letak / Lay out. Lihat widget HTML, kemudian isikan [recent] pada widget HTML tersebut. Simpan dan sekarang lihat hasilnya di blog Anda. Tips: Untukmemudahkan mencari tag </body>, </head> Anda bisa gunakan CTRL+F dan ketikkan tag tersebutpada kolom yang tersedia.
Cascading pada CSS
Arti Cascading dalam CSS
Kembali kepada singkatan CSS yaitu Cascading Style Sheet. Cascading memiliki induk kata cascade dalam bahasa Inggris. Jika diterjemahkan hasilnya adalah ' air terjun'. Dalam CSS Cascading dipahami sebagai 'terjun' atau penimpalan aktivasi kode CSS. Dalam artian sederhana jika ada dua mana yang lebih diutamakan. Dalam koding CSS ini sering disebut prioritas CSS.Cara Menggunakan Selector dalam CSS
Dalam CSS web designer bisa menggabungkan beberapa jenis selector. Contoh ketika menghubungkan tag<em> ( untuk huruf miring) yang hanya berada di tag <h1>. Artinya tampilan akan berubah ketika ada huruf miring pada judul saja. Selain itu property dan value selector tersebut tidak terpakai.
Macam Macam Selector pada CSS
Dalam CSS selector merupakan sebuh pola yang berfungsi untuk mencari tag dalam HTML. Dengan lain kata semua tag atau atribut yang didefenisikan akan disebut sebagai selector dalam CSS. Ada beberapa selector dalam CSS ini.
Penulisan Paragraf, Huruf Miring, Huruf Tebal dalam HTML
Catatan belajar HTML kali ini akan menyajikan bagaimana penulisan paragraf dalam HTML. Selain itu juga akan diperkenalkan bagaimana penulisan huruf miring, huruf tebal dalam html. Untuk memulai nya coba perhatikan kode di bawah ini, jalankan di komputer anda.
Cara Pasang Slider Recent Post pada Sidebar Blog
Dibeberapa blog dengan tampilan modis dan elegan ada terlihat pada bagian sidebar kanan sebuah recent post dengan model slider. Tampilan tersebut menurut saya cukup mengesankan. Bagi Anda yang penasaran dan ingin memasang slider recent post pada sidebar blog Anda berikut akan Saya berikan script dan cara memasang recent-post cantik di pinggir blog Anda.
1) Anda menuju ke halaman Tata Letak. Tambahkan Widget dan pilih HTML/Javascript. Kosongkan pada bagian isinya Anda masukkan kode di bawah ini,
2)Ada beberapa pengaturan yang bisa Anda ubah. Perhatikan kode di atas, bagian berikut ini,
Perhatikan bagian Kanan- atau Anda bisa lihat blog: inotesweb.blogspot.com |
<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHEsa5E2jBiLMmRvhYT2klQz0Xh30OXsQ1vdBA_VIjnOqbpCvO63o5zyQ9Bxlv7sfQmSsMMKoL-E4gy9NGLBYHsZ5XMh_V_hLrsFN891j_ae0DggpogmJ0HIez9L7ZnbnlReKsaCRO-tc/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
blogURL: "http://petunjukonlene.blogspot.com",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>
2)Ada beberapa pengaturan yang bisa Anda ubah. Perhatikan kode di atas, bagian berikut ini,
- blogURL: "http://petunjukonlene.blogspot.com", ganti dengan alamat blog Anda
- MaxPost: 8, angka 8 bisa diganti dengan jumlah recent post yang ingin ditampilkan
- ImageSize: 300,
- interval: 5000, 5000 bisa diganti dengan lama waktu peralihan slider.
- autoplay: true, jika digunakan true, maka slider otomatis bergerak sendiri , pilihan lain bisa digunakan false, slider akan bergerak jika kursor di taruh di widget tersebut.
- tagName: false , false digunakan jika ingin menampilkan semua artikel terbaru. false bisa diganti dengan nama label postingan. Misalnya, untuk label Healthy, maka yang akan tampil artikel dengan label healthy saja.
Demikian cara mudah menambahkan recent post dengan gaya slider pada blogspot. Semoga bisa membuat blog Anda semakin menarik.
Subscribe to:
Posts (Atom)