Recent Post

Popular

Mengenal HTML Dasar

Mengenal HTML Dasar - Hyper Text Markup Language atau yang lebih dikenal HTML ini merupakan bahasa standar yang digunakan untuk membuat halaman web dan menampilkan beragam informasi di dalam suatu browser. Dokumen html dibentuk dari elemen-elemen yang menginstruksikan browser untuk mengeluarkan tampilan sesuai yang diinginkan.

Sejarah Singkat HTML - Pada tahun 1980 IBM memperkenalkan pertama kali html ketika itu muncul ide untuk menempatkan elemen elemen yang berguna untuk menandai bagian suatu dokumen seperti judul, alamat, dan isi dokumen. sampai akhirnya elemen-elemen tersebut dibentuk menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Tugas bahasa pemrograman tersebut biasa disebut dengan markup. Program ini pun dinamai Generalized Markup Language oleh IBM.

   ISO (Internasional Standard Organization)  menyetujui konsep ini pada tahun 1986 sebagai standar untuk membuat dokumen. Pada tahun ini GML mengalami sedikit perubahan nama yakni menjadi Standard Generalized Markup Language (SGML). Nama tersebut diberikan langsung oleh ISO. Html merupakan bagian dari SGML namun sejak saat itu HTML lebih populer dibanding SGML karena bahasa dari html mampu diakses oleh seluruh komputer tanpa membedakan jenis platformnya.

Terdapat dua metode membuat sebuah halaman web dengan html yakni bisa dengan menggunakan web designer atau dengan teks editor biasa. Dalam penyimpanan berkasnya html berisfat case sensitive  sehingga berkas "dok.html" berbeda dengan "DOK.html".

Kegunaan HTML:
 1. Mempublikasikan dokumen secara online agar dapat diakses dari seluruh dunia;
 2. Mengatur tampilan halaman web dan isinya;
 3. Membuat form, yang berguna untuk menangani pendaftaran atau transaksi secara online;
 4. Menambahkan obyek-obyek seperti image, audio, dan video.

Struktur Dasar Penulisan HTML :

<HTML>
  <HEAD>
    <TITLE> ......................</TITLE>
  </HEAD>
  <BODY>
.......................................................
.....................................................
.........................................................
</BODY>
</HTML>

Struktur Penyusun HTML :

1. Elemen dan Tag HTML

Elemen merupakan komponen penyusun terkecil dari sebuah dokumen HTML. Elemen ini ditandai dengan tag dalam sebuah dokumen. Biasanya elemen diapit dengan tag yang berpasangan namun tidak jarang pula hanya ditandai dengan satu tag tanpa pasangan.

Contohya:
  •  Image <img/>
  • Input Field <input/>
  • baris <br/>
  • dll.
2. Tag dan Atribut HTML

Atribut merupakan informasi tambahan yang disematkan didalam tag. Informasi ini berupa instruksi untuk warna dari teks, besar kecilnya huruf, dll. Struk penulisan elemen-elemennya sebagai berikut:





                                                       "SEMOGA BERMANFAAT"


read more “Mengenal HTML Dasar”
  Belajar Mudah Css Dasar - CSS memiliki kepanjangan Cascading Style Sheet adalah merupakan bahasa pemrograman yang tersturktur dan seragam untuk mendukung file HTML. Dalam membuat website ataupun Blog pasti terdapat peran css didalamnya karena seluruh elemen dalam html diatur langsung oleh bahasa pemrograman yang satu ini baik itu tata letak, warna, background, dll.


    Peran css terhadap html tidak ubahnya seperti anatomi tubuh manusia, jika diibaratkan css adalah tulang bagi tubuh manusia yang mengatur dan mendesain setiap organ manusia tersebut hingga bisa berdiri dengan baik dan terlihat sempurna. Suatu halaman web terbagi atas dua pengaturan yakni isi yang di atur oleh html dan tampilan yang diatur melalui css. Apabila anda ingin membangun sebuah web disarankan untuk terlebih dahulu membuat isinya dengan bahasa pemrograman melalui html dan barulah atur tampilan web anda dengan css. Agar lebih mudah dipahami bisa anda lihat skenario pengaturan tampilan di bawah ini



Fungsi Kompleks Css.

  • Mengatur lebar dan tinggi
  • Membuat Bingkai
  • Menentukan gambar
  • Mengatur Halaman kolom
  • Memberikan warna latar belakang
  • Mengatur Tata letak
  • Mengatur tombol pada halaman web
  • Mengatur widget
  • dll.
Demikian halnya bahasa pemrogaraman yang lain Css juga memiliki aturan penulisan terseragam.


  Sesuai gambar diatas selektor merupakan bagian Html yang akan anda atur stylenya, lalu dibuka dengan deklarasi properti "{". Masukkan nama properti sesuai ketentuan bahasa css dan berikan nilai propertinya.

Hal yang harus anda ketahui mengenai penulisan Css
  • Css bersifat case-sensitive (penulisan Aku berbeda dengan AKU atau aku)
  • Agar mudah dimengerti oleh bahasa pemrograman usahakan pemberian nama pada selektor memiliki makna (tidak disingkat)
  • Dalam penulisan nama diperbolehkan menggunakan tanda (-) maupun ( _ )
  • Menggunakan angka untuk penulisan nama selektor diperbolehkan namun tidak diperkenankan untuk spasi atau tanda yang lain.
Berikut jenis-jenis selektor yang bisa anda kenali.
  1. Tag/elemen HTML
contoh: h1 {
                   color : blue;
             }

     2. KELAS
  • Diawali dengan tanda ( . )
  • Tag HTML ditambah class = (namakelas)
contoh: .body {
                    font-family:verdana;
                    font-size:30px;
               }
     3. ID
  • Diawali dengan tanda #
  • Mendefiniskan tag secara individual
  • Tag ID hanya boleh digunakan dalam sebuah elemen
contoh: #bagian1 {
                 text-align: left;
                 color: white;
             }
             #bagian2 {
                 text-align: left;
                 color: white;
             }

Bagaimana agar Css yang selesai kita buat dapat berfungsi pada Html kita? Terdapat 3 cara untuk menjalankan perintah Css kedalam Html berikut diantaranya:

  • Embedded Style Sheet
<style type = "text/css">
      <!-- atribut -->
</style>

  • Inline Style Sheet
<tag HTML style= "Properti: value/nilai">...</tag HTML>

  • Linked Style Sheet
<link rel="stylesheet" href="namafile.css" type="text/css">





Sekian Pengetahuan Dasar Mengenai Css Kali ini Semoga Bermanfaat.


read more “ ”

Cara Membuat Search Engine Pada Blog

 Search Engine - Mungkin masih ada diantara kita yang tidak tahu apa itu search engine, Sebenarnya kita sangat familliar dan bahkan sering menggunakannya untuk membantu kita melakukan pencarian. Jika diartikan kedalam bahasa indonesia search engine berarti mesin pencari, Secara umum search engine merupakan semacam portal penyedia informasi pencarian data yang diperlukan pengguna internet. Cara kinerjanya adalah dengan meng-copas seluruh halaman website yang tersedia di dunia, ketika data telah dimasukkan selanjutnya barulah diolah dengan bahasa algoritma. Tujuan peng-codingan menggunakan bahasa algoritma ini agar pengunjung bisa mencari data yang diinginkan sesuai dengan setelan algoritmanya.

   Website search engine milik Google dan Yahoo adalah penyedia kata kunci yang paling kita kenal. Pada umumnya kedua perusahaan internet ini akan menampilkan hasil pencarian secara berurutan sesuai tingkat rasio pengunjung atau akurasi dari suatu data "hits".

  Saya rasa cukup penjelasan singkat mengenai search engine ini. Untuk sekedar menambah kemampuan kita dalam membuat blog tidak ada salahnya kita mencoba tutorialnya dibawah ini meskipun kita tahu blogspot sudah menyediakan widget ini. Apakah anda percaya bahwa semua ilmu pengetahuan itu tidak ada yang sia-sia?  jika iya mari kita coba membuat sekaligus memasangnya di blog anda.


  • Membuat Search Engine
1. 




2. 



Note: Kedua jenis search engine di atas bisa anda pilih untuk diletakkan sesuai intruksi di bawah.


  • Cara Memasang Search Engine
1. Login ke akun Dasbor Blogger anda.
2. Masuk ke halaman Edit Template.
3. Cari kode ]]></b:skin>  lalu Letakkan Kode CSS dibawah ini.



4. Selanjutnya masuklah ke Tata Letak dan Masukkan sintaks dibawah ini ke HTML/Javascript.



5. Simpan setelan dan lihat hasilnya.

Sekian tutorial kali ini semoga bermanfaat bagi anda dan terus berkarya, Kalau ada kesempatan mungkin saya akan meng "Upgrade" tampilan search enginenya di tunggu ya. Jika ada Kendala bisa anda tanyakan di kolom komentar dan kasih suatu tanda apabila anda berhasil Oke.

read more “Cara Membuat Search Engine Pada Blog”

Cara memasang widget kolom 3 in 1 pada blog

Cara memasang widget kolom 3 in 1 pada blog - Bagi yang masih bingung widget kolom ini merupakan sebuah widget kolom yang memiliki multi tab, artinya dalam satu kolom terdapat lebih dari satu halaman entah itu dua atau lebih. Widget ini sangat diformulasikan bagi anda yang tidak ingin terlalu banyak memakan tempat hanya untuk menampilkan postingan anda yang lain sedangkan masih banyak informasi penting untuk diketahui pengunjung anda.

   Saya kira akan terasa aneh jika kita melihat widget lebih panjang dari artikel, yaa bisa kita ibaratkan seperti "rumput lebih panjang dari lalang" sangat janggal dipandang. Padahal artikel dalam sebuah postingan blog merupakan yang palig utama diperhatikan. Setiap blogger tentu tidak mau membingungkan viewersnya jika anda setuju dengan hal tersebut, widget ini cocok untuk anda yang memperioritaskan kenyamanan dan kepuasan pengunjung anda. Hal ini dikarenakan widget tersebut dilengkapi judul tab dan otomatis memudahkan kita mengklasifikasikan topik postingan. Agar anda tahu apa yang akan anda pasang pada blog anda silahkan lihat pada sisi kanan blog saya. Anda tertarik dengan widget yang satu ini? mari kita ikuti langkah demi langkahnya.


  • Cara Memasang Widget Kolom 3 in 1 Pada Blog
1. Login ke Dasbor Blogger anda.
2. Masuk ke Tata Letak.
3. Pilih HTML/Javascript.
4. Letakkan kode dibawah ini:



5. Simpan setelan dan masuk ke Edit Template.
6. Cari kode ]]></b:skin> 
7. Letakkan Kode dibawah ini tepat diatasnya.



8. Selanjutnya cari kode <body>
9. Letakkan Kode di bawah ini tepat diatasnya.



10. Simpan Template dan lihat hasilnya.


  • Selamat berkarya semoga hari anda menyenangkan
  • Tanyakan diKolom komentar jika ada pertanyaan mudah-mudahan saya bisa membantu.
read more “Cara memasang widget kolom 3 in 1 pada blog”

Cara Mudah Memasang Headline News Keren di Blog

   Cara Mudah Memasang Headline News Keren di Blog - Pada dasarnya kegunaan Headline news sama halnya dengan Recent post yang kita bahas minggu lalu, kedua widget ini sama-sama berfungsi untuk mempromosikan postingan yang kita buat namun perbedaanya hanyalah pada tata letaknya saja. Jika minggu lalu kita tahu bahwa Recent Post terletak disamping postingan nah berbeda dengan Headline News yang terletak di bagian atas postingan atau lebih tepatnya artikel kita.

  Dimanapun anda meletakkan kedua widget tersebut diperbolehkan asalkan tidak menutupi artikel karena walau bagaimana pun tampilan blog anda nomor dua. Untuk pemasangannya Headline news ini tidak jauh berbeda dengan Recent pos kita hanya perlu menambahkan kode sintaksnya kedalam widget dan sedikit memberikan sentuhan pada CSS nya. Baiklah tidak perlu panjang lebar lagi langsung saja kita Ekseskusi gan!
Cara Mudah Memasang Headline News Keren Pada Blog

1. Seperti biasa Login ke Dasbor Blogger dulu sob.
2. Masuk ke Template.
3. Klik Edit HTML
4  Cari kode ]]></b:skin> 
5. Copas deh Sintaks berikut diatas kode tersebut

   


6. Langkah selanjutnya Copas sintaks dibawah ini tepat diatas </head>




7. Nah langkah terakhir peletakkan kode dibawah ini tepat di  bawah <div id='header-wrapper'>




8. Jika langkah demi langkah diatas sudah anda lewati simpan setelan template dan lihat hasilnya.


  • Supaya anda tidak kesulitan mencari kodenya silahkan tekan Ctrl + F




Sekian Tutor untuk kali ini lebih dan kurangnya saya minta maaf sob.

Kasih suatu tanda jika berhasil ya sob, gampang kan? mudah-mudahan bermanfaat ya. Selamat berkarya dan semoga sukses ngBlognya.


read more “ Cara Mudah Memasang Headline News Keren di Blog”

Cara membuat Fanspage Facebook Untuk Blog

   Hai Margopers, memiliki penggemar blog yang banyak tentu menjadi keinginan setiap blogger iya nggak tidak terkecuali anda dan saya sendiri. Salah satu cara untuk mengumpulkan penggemar blog anda bisa lewat fanspage facebook. Persyaratan utamanya tentu anda harus memiliki Fanspage terlebih dahulu untuk di pasang pada widget blog.

    Kenapa harus membuat fanspage? hal ini penting terhadap pengoptimalan blog anda di media sosial apalagi zaman sekarang media sosial sangat mendominasi terutama FACEBOOK. Maka dari itu pada kesempatan kali ini saya akan sedikit berbagi bagaimana cara memasang Like Box Facebook Fanspage dalam Blog anda.

OKE Langsung saja kita eksekusi!


  1. Seperti yang saya katakan persyaratan utama untuk memasang widget ini anda harus memiliki akun Fanspage Facebook anda sendiri. Jika anda belum memiliki Fanspage tersebut bisa langsung anda buat disini.

  2. Setelah masuk anda akan menemukan halaman seperti berikut


3. Apabila Fanspage telah dibuat maka langkah selanjutnya masuk ke Plugin dan tampilan yang akan anda temui seperti berikut



4.  Anda bisa merubah list berwarna kuning tersebut dengan alamat Fanspage yang telah anda buat

5. Selanjutnya Klik tombol Get Code  dalam lingkaran merah maka akan muncul tampilan berikut.




6.  Langkah terakhir silahkan anda Copas code tersebut kedalam widget Blog anda.


Sekian Tutor MargopBlog kali ini lebih dan kurangnya saya minta maaf jika ada yang kurang jelas bisa langsung ditanyakan dalam kolom komentar dibawah. Thanks Sob!!


read more “Cara membuat Fanspage Facebook Untuk Blog”

Cara Membuat Menu Navigasi Responsive Pada Blog

  Sebelum nya saya akan menjelaskan sedikit mengenai apa itu Menu Bar, bagi yang belum mengetahuinya, Menu Bar merupakan navigasi link dengan kegunaan sebagai penyimpan link-link penting pada suatu blog. Tujuannya adalah memudahkan viewers atau pengunjung anda untuk mengetahui halaman-halaman utama di blog anda. Tidak hanya memudahkan pengunjung tentu anda juga akan terbantu dengan adanya Menu navigasi ini.


   Dari sekian banyak pembahasan dalam artikel anda diperlukan pengklasifikasian dan inilah peran lain dari Menu Navigasi tersebut. Pemilihan jenis navigasi juga diperlukan agar tujuan utamanya bisa tercapai dan bukan malah membuat bingung pengunjung anda yang berakibat trauma sehingga pengunjung enggan mengunjungi kembali blog anda. Nah untuk mengantisipasi hal semacam itu saya akan berbagi dengan anda tentang bagaimana cara memasang Menu Navigasi ini yang tentunya menunjang tampilan blog anda lebih modis. Are You Ready oke kita mulai.



1. Langkah awal login ke Blogger anda
2. Lalu masuk ke halaman Template
3. Selanjutnya pilih Sesuaikan
4. Nah sekarang anda pilih tambah CSS
5. Copas sintaks/kode dibawah ini di halaman tambah CSS tersebut.

#menubar{ width:900px; height:32px; background:#de360f; margin: 0 auto; } #menubar ul{ float:left; margin:0; padding:0; } #menubar li{ float:left; list-style:none; margin:0; padding:0; } #menubar li a, #menubar li a:link{ border-right:1px solid #F0512D; float:left; padding:8px 12px; color:#fff; text-decoration:none; font-size:13px; font-weight:bold; } #menubar li a:hover, #menubar li a:active, #menubar .current_page_item a { color:#ffa500; text-decoration:underline; } #menubar li li a, #menubar li li a:link, #menubar li li a:visited{ font-size: 12px; background: #de360f; color: #fff; text-decoration:none; width: 150px; padding: 0px 10px; line-height:30px; } #menubar li li a:hover, #menubar li li a:active { background: #F0512D; color: #ffa500; } #menubar li ul{ z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin-top:32px; border:1px solid ##F0512D; } #menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{ left:auto } #menubar li:hover, #menubar li.sfhover{ position:static }

6. Jika sudah di paste anda tekan tombol terapkan ke blog
7. kembalilah ke blogger
8. pilih tata letak dan pilih cross 2 tambah widget html/javascript
9. Copas kode di bawah ini

"<div id="menubar">
<ul>
<li><a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null">Home</a></li>
<li><a href="http://blognya-margopblog.blogspot.com/">Edit Saya</a></li>
<li><a href="http://blognya-margopblog.blogspot.com/">Edit Saya</a></li>
<li><a href="http://blognya-margopblog.blogspot.com/">Edit Saya</a></li>
<li><a href="http://blognya-margopblog.blogspot.com/">Edit Saya</a></li>
</ul>
</div>"

10. Simpan dan Lihat hasilnya sekarang

Jika ada yang kurang jelas bisa anda tanyakan di kolom komentar saya siap membantu. Terima Kasih.


read more “Cara Membuat Menu Navigasi Responsive Pada Blog”

Cara Mudah Memasang Widget Share Pada Blog

   Setelah selesai dibuatnya sebuah blog tentu biasanya kita akan berfikir bagaimana agar blog kita tersebut dikenal luas. Banyak cara yang bisa kita pilih mengenai hal ini yakni diantaranya dengan memasang widget share di blog. Sebenarnya untuk memasang widget ini sudah ada di wordpress atau www.blogger.com akan tetapi terkadang widget yang tersedia tidak sesuai dengan keinginan kita. Nah Tutorial kali ini saya akan berbagi mengenai bagaimana cara memasang widget sosial media. Agar widget ini mudah terlihat oleh viewers blog anda, anda harus meletakkannya di posisi yang tepat. Sebaiknya letakkan widget share tersebut ditempat yang tidak menghalangi artikel anda karena akan sangat menggangu pembaca. Tujuan lain dari pemasangan widget ini adalah agar blog anda terlihat lebih cantik dan atraktif.

   Widget sharenya bisa anda lihat berada di sebelah kiri blog saya, kelebihan widget ini adalah walaupun anda scroll ke bawah maupun ke atas dia akan mengikuti layar bisa dikatakan tetap berada di tempatnya. Anda penasaran untuk mencobanya sendiri di blog anda? Langsung saja berikut langkah-langkah pemasagannya Cekidot!!!


1. Login atau bukalah akun blog anda.
2. Masuk ke rancangan template tepatnya di Tata Letak
3. Setelah masuk pilih Add Widget
4. Berikutnya klik atau pilih pada tambah Html Javascript
5. Lalu Copas sintaks di bawah ini:

<!--SideBar Floating Share Buttons Code Start-->
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://tutormargopblog.blogspot.co.id/2016/01/cara-mudah-memasang-widget-share-sosial.html" target="blank"><font color="black">Get This<font></font></font></a></div></div>

6. Langkah terakhir simpan setelan dan lihat hasilnya.
Note: Tulisan berwarna Merah bisa anda hapus dari code

GOOD LUCK BRO n SIS!!!
read more “Cara Mudah Memasang Widget Share Pada Blog”
 
Free Website templatesfreethemes4all.comLast NewsFree CMS TemplatesFree CSS TemplatesFree Soccer VideosFree Wordpress ThemesFree Blog templatesFree Web Templates