Showing posts with label Tutorial HTML. Show all posts
Showing posts with label Tutorial HTML. Show all posts

7/26/2013

Cara membuat readmore otomatis di blogspot

0 comments
Saya lihat halaman saya terlalu panjang kebawah seperti ular naga panjang bukan kepalang. Saya berfikir pada diri saya pribadi ” ternyata blog saya ini menjenuhkan ketika saya mencari catatan yang telah lama saya buat. Saya harus menggulir ke atas hingga ke bawah untuk menemukan catatan saya dari tobeinfo.blogspot.com. Ternyata pembahasan yang begitu mendetail memuat dari masing-masing halaman tobeinfo.blogspot.com menjadi panjang-panjang ”. Wah kalau kayak gini saja saya jengkel apa lagi yang bukan pemilik blog ini pasti tambah jengkel. Akhirnya saya coba-coba untuk mencari-cari bagaiman cara membuat read more otomatis di blogspot waktu itu. Seperti biasa saya tuliskan pada form pencarian google, dan akhirnya ketemu apa yang saya cari.

Pertama-tama waktu saya edid blog saya untuk saya kasih read more otomatis eh malah kocar kacir. Akhirnya dengan sedikit mengidentifikasi masalah yang saya hadapi ternyata terdapat pada saat saya melakukan postingan. Alangkah baiknya jika anda melakukan posting atau membuat postingan jangan langsung kompas dari artikel yang telah anda buat sebelumnya dengan menggunakan Ms. Word. Saya memakai Ms. Word 2007 waktu itu.

Langkah yang saya ambil untuk membenahinya yaitu dengan meng copy artikel saya tadi dari word ke notepad lalu saya baru copy lagi dari notepad ke ruang kerja pembuatan postingan. Atau dengan langkah singkat. Buatlah artikel dengan menggunakan notepad ketika sedang ofline. Ketika menggunakan notepad artikel bisa di kompas langsukeng ke area kerja postingan. Kembali pada read more. Menurut apa yang saya lihat dan yang saya pahami adalah read more merupakan langkah untuk membuat tampilan artikel pada home atau pada halaman utama dari keseluruhan tampilan blog untuk di pangkas sebagian dari artikelnya dari masing-masing halaman dengan menggunakan code yang telah disisipkan kedalam html dari blog tersebut. Malah bingung ya dengan apa yang saya definisikan. Menurut pengetian yang anda tahu apa? Kita diskusi aja. Kalau cara membuat read more sih kayak begini;

Langkah awal untuk membuat read more adalah kita harus masuk ke bagian edit template yang bisa kita lakukan dengan cara;
  1. masuk ke http://blogger.com
  2. klik nama blog yang mau di edit,
  3. klik template,
  4. klik edit html
  5. cari kode </head> .
Untuk memudahkan mencari kode </head> tekan Ctrl + F lalu ketik </head>. Setelah kode </head> ketemu masukkan kode dibawah ini di bawah kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ;summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

Selanjutnya temukan kode <data:post.body/> mungkin berbeda dengan itu coba cari yang seperti ini <p><data:post.body/></p>

Seperti bisa ganti kode tadi dengan menggunakan code-code yang ada di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Kata-kata READMORE... bisa anda ganti dengan kalimat atau kata apapun yang anda nginkan sesuai dengan keinginan yang mengartikan pada user ketika meng-klik kalimat read more atau yang lainnya mereka akan dapat membaca artikel secara lengkap. Angka-angka berwarna hijau diatas bisa anda rubah sesuai dengan kebutuhan. Saya anggap anda sudah sedikit mengerti mengenai code-code diatas. Intinya height untuk tinggi, width untuk lebar, noimg = 430; jika read more tidak menggunakan gambar pada halaman yang akan dibaca selenkapnya, img = 340; menunjukan jika ada gambar pada halaman tersebut. Sebaiknya anda membackup template yang anda punya agar jika ada kesalahan bisa anda pulihkan menggunakan template yeng telah anda backup tadi.
Baca Selengkapnya - Cara membuat readmore otomatis di blogspot

7/13/2013

Mengenal Css Pertama Kali

0 comments
Anda mungkin seorang pembuat template website. Kadang kala pembuatan template hanya menggunakan HTML saja tanpa adanya CSS yang menjadi pelengkap dari pembuatan template website itu sendiri. CSS dapat membantu anda untuk meringkas code-code HTML yang begitu panjang menjadi begitu ringan dan singkas. Penulisan CSS pun mudah dan ringkas. Cukup menggunakan tag pertama dari tang HTML yaitu tang yang ada di dalam < dan > tanpa adanya / didalamnya.

Lihatlah kode berikut
<html>
<head>
<title>TOBEINFO
</title>
</head>
<body>
<h1><font face="arial" clolor="red">Hello World!</font></h1>
<h1><font face="arial" clolor="red">Hello World!</font></h1>
<h1><font face="arial" clolor="red">Hello World!</font></h1>
</body>
</html>

Diatas hanya menggunakan tag-tag HTML biasa tanpa menggunakan CSS. Seperti itu adalah contoh sederhana pembuatan HTML tapi dalam penempatan yang lebih bagus lagi adalah menggunakan tag-tag HTML ini dan itu yang begitu banyak. Tag-tag HTML ini dapat diringkas lagi menggunakan CSS

lihat kode dibawah ini;
<html>
<head>
<title>TOBEINFO
</title>
<style type="text/css">
h1 {
       color: red;
       font-family: "arial";
}
<style>
</head>
<body>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
<h1>Hello World!</h1>
</body>
</html>

Anda dapa telihat perbedaan tag yang ada di susunan kode awal dan susunan kode yang kedua. Pada susunan kode yang pertama begitu panjang dengan menggunakan banyak tag pada masing-masing perkataan yang mau dikasih format yang sama. Pada kode yang kedua anda cukup sekali memberikan format tag yang anda letakkan pada kode CSS. Code CSS yang ada akan merubah seluruh isi yang di jadikan indikasi dalam contoh ini tag yang ada di dalam <h1>dan </h1>. Ketika anda simpan dengan ekstensi .html anda akan melihat dengan tampil dan yang sama. 
Baca Selengkapnya - Mengenal Css Pertama Kali

7/06/2013

Cara Menggunakan CSS dalam HTML

0 comments
Apa anda tahu cara menggunkan CSS dalam HTML? Jika anda seorang yang suka membuat template website atau blog cara menggunakan CSS dalam HTML ini pantas kamu pelajari. Untuk apa? Supaya file yang dibentuk dengan HTML tidak terlalu besar karena setiap kita mau membuat suatu format dalam tampilan HTML saja kita harus meletakkan di setiap kode HTML pada setiap Format yang kita lakukan. Ini akan membuat file yang dibentuk dengan HTML menjadi besar dan begitu banyak code HTML. Tapi jika anda membuat tamilan atau template website atau blog dengan menggunakan HTML disertai CSS maka anda tidak perlu untuk membuat code HTML pada setiap kata yang akan anda kasih format tertentu.

Dengan menggunakan CSS dalam HTML anda cukup menuliskan <div id="indikator"> atau <div class="indikator"> dan indikator adalah sebagai objek dari selector yang digunakan dalam CSS. Selain menggunakan <div id/class=""> apapun yang diletakkan di dalam <body>sampai</body> ataupun <body> sendiri bisa sebagai indikator dalam CSS. Misalkan ketika dalam file HTML ada suatu code <body> maka dalam CSS utuk memberi format <body> tertentu dengan "body {propertis_CSS : Volue_dari_Propertis;}".

Cara Menggunakan CSS dalam HTML seperti dalam penggunaan bahasa program, CSS juga menggunkan titik koma (;) untuk mengakhiri dalam setiap formatnya. Misal kita mempunyai propertis_CSS sebanyak tiga atau lebih maka dalam penggunaan CSS adalah sebagai berikut
body {
           propertis_CSS_Pertama : Volue_dari_Propertis_CSS ;
           propertis_CSS_Kedua : Volue_dari_propertis_CSS_kedua ;
           propertis_CSS_Ketiga : Volue_dari_propertis_CSS_Ketiga ;
}

Cara menggunakan CSS dalam HTML diletakkan setalah </title> dan sebelum </head> sedangkan didalam <body>sampai</body>adalah tempat dimana dokumen diatur oleh code CSS yang kita buat. Maka dari itu kita perlu membuat indikator pada bagian <body>samapi</body>. Kenapa dilakukan? itulah cara menggunakan CSS dalam HTML dan begitulah penerapannya.

Cara menggunakan CSS dalam HTML adalah dengan menuiskan
<style type="text/css">
selector {propertis_CSS : Volue_CSS:}
</style>
 
Menulis <style type="text/css">sampai dengan </style> merupakan penggunaan CSS dalam lingkup internal dalam HTML. Maksudnya apa? internal CSS merupakan pembuatan CSS langsung didalam code HTML. Memang ada CSS yang dibuat diluar code HTML? CSS yang dibuat diluat code HTML dinamakan Eksternal CSS. Terus bagaimana penggunaanya? Sebelum kita menggunakan eksternal CSS kita harus membuat file CSS dulu dengan ekstensi atau akhiran "nama_file.css".

Berikut cara menggunakan eksternal CSS dalam HTML. Setelah kita membuat file CSS dalam satu folder HTML yang kita buat maka kita menuliskan kode;
<link rel="stylesheet" type="text/css" href="nama_file.css"/>

Oke kawan. Begitulah cara menggunakan CSS dalam HTML yang bisa membantu anda dalam membuat tampilan website atau template website. Semoga cara menggunakan CSS dalam HTML ini bermanfaat Dalam rangka belajar silahkan berkomentar jika ada kesalahan atau berdiskusi dalam penyampaian cara menggunakan CSS dalam HTML ini.
Baca Selengkapnya - Cara Menggunakan CSS dalam HTML

2/20/2013

Cara Mengganti Judul Blogger dengan Gambar atau Logo

0 comments
Pembahasan malam ini infokus mau berbagi  Cara Mengganti Judul Blogger dengan Gambar atau Logo yang kita inginkan. Cara Mengganti Judul Blogger dengan Gambar atau Logo didalam tutorial ini infokus memberikan langkah-demi langkah bagaimana Cara Mengganti Judul Blogger dengan Gambar atau Logo yang kita inginkan.

Dibawah ini adalah langkah-langkah yang kita lakukan untuk Cara Mengganti Judul Blogger dengan Gambar atau Logo;

1. Cara Mengganti Judul Blogger dengan Gambar atau Logo, langkah pertama adalah masuk ke blogger.com.
2. langkah keduan, Cara Mengganti Judul Blogger dengan Gambar atau Logo klik sesuai yang tertera pada gambar dibawah ini;

3. Langkah Ketiga, akan tampil seperti gambar berikut lalu tekah Edit seperti yang ditunjuk;

4. Langkah Keempa, Klik Pilih File

5. Langkah kelima, anda akan dibawa ke halaman dimana gambar yang mau anda upload. pilih dimana gamabar tersebut berada. Lalu klik Open

6. Langkah Keenam, Klik Save pada gambar nomor 4 lalu klik seperti gambar berikut "Lihat blog" untuk melihat blog anda yang telah anda rubah.

7. Sampai gambar dibawah ini adalah hasil akhir yang Infokus contohkan pada pembahsan Cara Mengganti Judul Blogger dengan Gambar atau Logo. Silahkan klik pada gambar berikut untuk melihat finisinnya.
Selamat mencoba tutorial dari Infokus mengenai Cara Mengganti Judul Blogger dengan Gambar atau Logo sesuai yang kita inginkan. Bookmark halaman ini dengan menekan Ctrl+D lalu Enter.
Baca Selengkapnya - Cara Mengganti Judul Blogger dengan Gambar atau Logo

11/02/2012

Mengetahui Dasar HTML

0 comments
BERDOALAH SEBELUM BELAJAR DAN TANAMKANLAH KEYAKINAN PADA DIRI ANDA BAHWA ANDA BISA TUTORIAL HTML INI


Mari Belajar Bersama

Teman-teman Troopati semua pada Tutorial HTML ini kita akan membahas code yang paling utama untuk membangun HTML. Apa kegunaan HTML? Itulah pertanyaan saya sebelum kita membahas lebih lanjut mengenai HTML. HTML berguna sebagai wadah untuk membuat tampilan dalam sebuah website. HTML merupakan ruang yang tidak terbatas untuk ditempati code-code baik itu code HTML sendiri atau pun code yang lain.

Di dalam HTML sendiri kita dapat meletakkan berbagai code baik itu code CSS, java, php atau javascript. Mungkin dari sekian banyak pembaca Tutorial HTML oleh Troopati sudah banyak yang tahu code-code HTML yang akan kita pelajari.  Tidak sulit untuk membuat code-code HTML ini menjadi sebuah tampilan web yang menarik dan friendly. Cukup gunakan tiga metode yaitu membaca tutorial HTML dan mempraktekan lalu mengamati.

Membaca, Kita perlu membaca berbagai sumber yang ada pada tutorial HTML yang kita maksudkan untuk bisa kita gunakan. Mempraktekan, Kita perlu berusaha menjalankan apa yang sudah kita dapat dalam kita membaca tutorial HTML tadi. Setelah membaca dan mempraktekan, kita juga perlu mengamati mengapa bisa jadi begini dan begitu. Itulah kunci dimana kamu akan bernar-benar bisa untuk membuat tampilan HTML yang menarik yang kamu punya.

Kamu bisa menulis code HTML dibawah ini dengan menggunakan notepad yang kamu punya untuk kamu simpan dengan akhiran titik HTML (.html). Cara menyimpan bukan sekedar disimpan. Karena ketika kamu sekedar menyimpannya maka yang akan terjadi adalah menjadi text biasa. Dan jika itu kamu lakukan kamu hanya mendapati sederet text yang ada di notepad ketika kamu doble click.

<html>
   <head>
       <title>Mengetahui Dasar HTML</title>
    </head>
  //Letak kode CSS yg akan kita bahas pada bab selanjutnya Troopati
    <body>
    </body>
</html>

Petunjuk Penyimpanan

Gunakakan Ctrl + S untuk menyimpan code HTML tersebut dari notepad. Isi File name dengan nama yang anda inginkan dan jangan lupa untuk memberi titik HTML (.html) sebagai akhiran nama file kamu. Aturlah Save as type menjadi All Type. Hal ini akan menjadika file yang anda simpan tidak menjadi text biasa melainkan taxt dengan format HTML. Jika sudah melakukan semua ini klik Save dan kamu bisa melihat file yang ada simpan berubah icon sebagaimana file yang disimpan dari browser application yang anda punya.

Petunjuk menjalankan file HTML

Setelah semua langkah penyimpanan selesai kamu lakukan maka saatnya anda untuk menjalankan file yang telah kamu buat tadi dengan menggunakan code HTML. Untuk menjalakan program atau file HTML anda tadi cukup klik dua kali file yang berformat HTML tadi.

Keterangan;
  • Menyusun Code HTML  diawali menulis  "<html>" mengapit Code - code HTML yang lain di akhiri "</html>",
  • Posisi Kode "<head></head> dan <body></body>" harus diletakkan secara berurutan. posisi paling atas setelah <html> adalah <head> dilanjutkan dengan "<body>".
  • Posisi Kode <title></title> terletak diantara <head> dan </head>, maka code title diterapkan seperti "<head><titel></title></head>"
  •  Untuk meletakkan Judul blog atau suatu wabsite diletakkan diantara kode "<title>" dan "</title>", contohnya adalah "<title>Mengetahui Dasar HTML</tilte>" 
  • Sedangkan untuk menuliskan code-code pembangun suatu kerangka HTML  yang lain terletak di dalam kode "<body>" dan "</body>"
 Catatan ;
  • Code HTML di awali dengan "<nama tag>" dan diakhiri dengan "</nama tag>".
Nah... Silahkan Dilanjutnkan belajarnya di halaman cara membuat warna di tampilan html yang kita buat.
Baca Selengkapnya - Mengetahui Dasar HTML

Blog Archive

Translate

 

infokus. Copyright 2013 All Rights Reserved |Template by Panduan Belajar Seo dan tutorial blog