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”

Cara Mudah Memasang Widget Twitter Button Follow dan share

Cara Mudah Memasang Widget Twitter Button Follow dan Share - Satu minggu yang lalu saya pernah membahas mengenai bagaimana cara memasang tombol like fanspage facebook di blog, Untuk meningkatkan optimalisasi blog anda di media sosial sekarang saya akan kembali membahasnya tetapi kali ini mengenai tombol follow "ikuti" dan tombol share "bagikan" pada twitter.

   Media Sosial seperti twitter bisa menjadi pilihan anda sebagai media penarikan followers sebanyak mungkin. Tidak semua hal harus menggunakan uang, metode ini bisa dipakai sebagai cara mengiklankan blog anda sama halnya widget share pada Facebook. Sebelum anda memikirkan bagaimana cara memasang tombol ini ada baiknya untuk lebih memfokuskan isi artikel anda terlebih dahulu karena walau bagaimana pun pembaca akan meng"klik" tombol tersebut jika mereka merasa puas. Tidaklah sulit untuk memasang widget ini hanya saja pemilihan letaknya  yang harus diperhatikan. Letakkanlah widget tersebut di ruang yang strategis namun tidak menganggu isi konten anda.
  • Cara mendapatkan kode button twitter


1. Dapatkan kodenya di Twitter Buttons
2. Login ke akun twitter anda.
3. Setelah login anda akan menemukan tampilan seperti dibawah ini:



4. Lalu pilih tombol sesuai kebutuhan anda.
5. Selanjutnya akan muncul tampilan seperti berikut:




6. Copy kode anda pada kolom sebelah kanan.
7. Login ke Dasbor Blogger anda.
8. Letakkan kode tersebut sesuai selera anda.


Note:
  • Anda bisa meletakkannya di Tata letak dan HTML pada halaman Entri.
  • Jika terjadi kendala bisa anda sampaikan di kolom komentar mudah-mudahan saya bisa membantu.
  • Selamat berkarya ya.!

                                                       "SEMOGA BERMANFAAT"


read more “Cara Mudah Memasang Widget Twitter Button Follow dan share”

Cara Memasang Recent Post Bergerak Otomoatis Pada Blog

Cara Memasang Recent Post Bergerak Otomoatis Pada Blog - Postingan saya kali ini merupakan postingan kedua dengan tema pembahasan Recent Post. Tentu saya tidak akan membahas apa itu recent post atau semacamnya karena sudah pernah saya beberkan jauh sebelum postingan ini dibuat.
  
  Disini kita akan mencoba memberi sedikit sentuhan atraktif dalam blog anda dengan memasang recent post bergerak secara otomatis. Banyak alasan mengapa anda harus memilih widget ini salah satunya karena kebosanan anda melihat tampilan blog diam tanpa pergerakan terlepas dari itu widget ini juga mampu menampung lebih banyak daftar postingan tanpa harus banyak memakan tempat.


Sebelum dan sesudah disorot cursor





  • Recent Post Bergerak Otomatis



1. Login ke akun Dasbor Blogger anda.
2. Jika sudah masuklah ke halaman Tata Letak.
3. Pilih Tambahkan widget "Add Gadget".
4. Klik HTML/Javascript
5. Letakkan kode dibawah ini didalamnya.




6. Langkah terakhir simpan setelan tata letak anda dan lihat hasilnya.



Note:
  • Ganti http://www.margopblog.blogspot.co.id</feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost dengan URL atau alamat blog anda sendiri.
  • Agar tidak membingungkan berikan judul ketika anda menambahkan widget pada halaman tata letak.

Sekian Tutorial singkat kali ini, jika ada yang ingin ditanyakan silahkan poskan di komentar Mudah-mudahan saya siap membantu. Tinggalkan jejak kalau anda berhasil ya sob..



Semoga Bermanfaat
Thank's
read more “Cara Memasang Recent Post Bergerak Otomoatis Pada Blog”

Cara Memasang Animasi Lengkap Keren

  Beberapa orang punya alasan tertentu kenapa ingin memasang sentuhan animasi dalam tampilan blognya. Kita tahu tujuan paling utamanya ialah agar blog yang kita buat terlihat lebih menarik dan atraktif. Dalam hal ini Penempatan letaknya harus diperhatikan agar tidak menggangu pengunjung atau pembaca blog anda. Pemilihan animasi sesuai dengan tema blog anda pun tidak kalah penting untuk menambahkan kesan kepada pembaca.

  Mungkin anda sering dibingungkan dengan pilihan animasi itu-itu saja sedangkan jika untuk membuat animasi sendiri dibutuhkan waktu relatif lebih lama. Nah untuk menjawab kebingungan sobat sekalian, saya akan sedikit berbagi mengenai situs penyedia animasi terlengkap dan tidak lupa cara pemasangannya.
Penasaran langsung saja kita EKSEKUSI!!!

1. Login ke Dasbor Blogger anda
2. Masuk ke Tata Letak
3. Pilih Tambahkan Gadget
4. Dan pilih Html/javascript
5. Lalu Copas sintaks dibawah ini:

<div style="position: fixed; top: 0px; padding: 5; left: 10px;width:130px;height:160px;"><a href="http:/http://menunavigasimargop.blogspot.co.id/" target="_blank"><img border="0" src="http://www.gambaranimasi.org/data/media/346/animasi-bergerak-senapan-dan-pistol-0020.gif" /></a></div>

6. Sintaks berwarna merah ganti dengan alamat animasi yang sobat pilih di situs KUMPULAN RIBUAN ANIMASI LENGKAP berikut.
7. Aturlah posisi animasi sobat dengan mengubah sintaks biru dan orange
8. Langkah terakhir Klik simpan setelan & lihat hasilnya

Bagi sobat penasaran dengan animasinya  bisa dilihat dibawah ini

Hamster
animasi-bergerak-hamster-0009
http://www.gambaranimasi.org/data/media/517/animasi-bergerak-hamster-0009.gif

Naruto Animation
animasi-bergerak-naruto-0273
http://www.gambaranimasi.org/data/media/582/animasi-bergerak-naruto-0273.gif

Terjun Payung

animasi-bergerak-parasut-0002
http://www.gambaranimasi.org/data/media/487/animasi-bergerak-parasut-0002.gif

Police
animasi-bergerak-polisi-0019
http://www.gambaranimasi.org/data/media/114/animasi-bergerak-polisi-0019.gif

Soccer
animasi-bergerak-sepak-bola-0004
http://www.gambaranimasi.org/data/media/165/animasi-bergerak-sepak-bola-0004.gif

Semoga Bermanfaat Sob Salam Blogger Indonesia hehe!

read more “Cara Memasang Animasi Lengkap Keren”

Cara Membuat Tombol Hide Show Pada Blog

Cara Membuat Tombol Hide Show Pada Blog - Mungkin masih ada diantara kita yang belum tahu apa itu tombol hide show. Jika dilihat dari makna katanya kita bisa menerka apa sebenarnya kegunaan tombol ini. Seperti yang kita ketahui Hide merupakan bahasa inggris yang memiliki makna menyembunyikan dan Show bermakna menampilkan.

   Bisa disimpulkan tombol ini berfungsi untuk menyembunyikan sesuatu sebelum kita berniat untuk menampilkannya, yaa begitulah kira-kira. Jangan gunakan istilah tombol hide show apabila anda bergaul dengan teman-teman blogger yang lain sebab tombol ini lebih dikenal dengan sebutan Spoiler.

    Saya menggunakan istilah ini agar mudah dipahami oleh sobat-sobat sekalian saja. Lanjut ke topik, Apa untungnya memasang tombol ini? keuntungannya adalah anda bisa menghemat ruang pada blog anda dan bisa mengoptimalkan ruang tersebut dengan hal yang lebih berguna dan lebih penting menurut anda. Untuk lebih jelasnya anda bisa melihatnya dibawah paragraf ini.

Coba di Klik
Isi hal apapun disini sesuai kebutuhan anda


  • Button Hide Show

1. Login ke akun Dasbor Blogger anda.
2. Masuk ke Laman Entri.
3. Letakkan kode berikut didalamnya.



4. Klik Simpan dan lihat hasilnya.

Note:

  • Tidak ada ketentuan khusus mengenai pemasangannya karena Script di atas bersifat fleksibel, anda bisa meletakkannya dimanapun anda inginkan.
                                                       "SEMOGA BERMANFAAT"


read more “Cara Membuat Tombol Hide Show Pada Blog”

Cara Membuat Tombol Back To Top

Cara Membuat Tombol Back To Top - Sebelum anda mengunjungi blog ini saya yakin anda sudah tahu apa itu tombol back to top beserta fungsinya. Untuk sekedar mengingatkan saja, saya akan tetap menjelaskannya dari awal. Siapa tahu hal tersebut bisa menjadi informasi baru bagi anda yang belum mengetahuinya sama sekali. Baiklah, tombol Back To Top merupakan tombol yang berguna untuk mempercepat scroll blog anda dari bawah menuju ke atas.

   Tombol ini sangat memudahkan pengunjung blog anda yang ingin kembali ke bagian atas blog tanpa harus menggunakan scroll. Anda mencari tombol semacam ini mungkin karena laman blog anda yang terlalu panjang dan hal ini akan menyulitkan petualangan pengunjung anda. Posisi tombol ini terdapat pada samping pojok kanan bawah postingan. Oke saya rasa cukup informasi dan basa-basinya langsung saja kita aplikasikan ke blog anda.

  • Back To Top Button

1. Login ke akun Dasbor Blogger anda.
2. Masuk ke Laman Edit Template.
3. Cari kode </body> lalu letakkan kode dibawah ini tepat diatasnya.



4. Simpan setelan dan lihat hasilnya.

Note:
  •  Pasang kode dibawah ini tepat diatas kode sebelumnya jika di template anda belum menyediakan kode seperti berikut. 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>


Jika anda mengalami "syndrome" ketika mengotak-atik template anda hehe, anda bisa mencoba alternatif yang kedua. Berikut langkah-langkahnya:

1. Saya anggap anda telah masuk ke Dasbor anda.
2. Pilih laman Tata Letak.
3. Tambahkan widget "Add Gadget".
4. Klik HTML/Javascript.
5. Letakkan kode berikut.




Jika terjadi kendala bisa anda sampaikan di kolom komentar mudah-mudahan saya bisa membantu.
Selamat berkarya ya.!

                                                       "SEMOGA BERMANFAAT"


read more “Cara Membuat Tombol Back To Top”

Cara Membuat Widget share Sosmed Bentuk Telur Pada Blog

Cara Membuat Widget Sosmed Bentuk Telur Pada Blog - Pada kesempatan ini, MargopBlog kembali memposting mengenai widget share sosial media pada blog. Widget ini tidak kalah menariknya dengan widget share sosial media yang lain sebab bentuknya yang terbilang unik dan eksklusif yakni berbentuk telur. Dengan bentuknya yang unik akan membuat pengunjung anda tertarik untuk mengklik tombol ini.


    Berbeda dengan telur kebanyakan, telur yang satu ini mudah pecah hanya dengan satu sentuhan kecil melalui cursor anda. Ketika pecah, telur tersebut mengeluarkan seluruh isi didalamnya, Apa saja isi didalamnya? Isinya berupa beberapa icon share lengkap seperti: Twitter, Facebook, Google +, Linkedln, dan Stumble Upon. Anda tertarik? jika iya langsung saja kita pasang sekarang.

  • Egg Bookmarking Gadget

1. Login ke Akun Dasbor Blogger anda.
2. Masuk ke Laman Edit Template.
3. Cari kode </head>
4. Letakkan kode berikut tepat diatas kode tersebut.



5. Langkah selanjutnya cari kode </body>
6. Letakkan kode dibawah ini tepat diatasnya.



7. Simpan dan lihat hasilnya.

Note:

  •  Script diatas direkomendasikan untuk wordpress.

                                                       "SEMOGA BERMANFAAT"


read more “Cara Membuat Widget share Sosmed Bentuk Telur Pada Blog”

Cara Memasang Widget Translator Pada Blog

Cara Memasang Widget Translator - Apakah anda yakin pengunjung blog anda hanya berasal dari Indonesia? Kita sadar pengguna internet tidak hanya dari negara sendiri melainkan seluruh dunia. Untuk itu diperlukan widget translator ini terlebih lagi blog yang anda tulis dibawakan dalam bahasa inggris. Mungkin anda tidak pernah memasang target agar blog anda dibaca juga oleh orang asing tapi dengan dipasangnya widget ini, itu artinya kita telah membuka peluang mereka orang diluar negeri untuk melihat karya kita di Indonesia. Nah, agar peluang tersebut tercapai saya akan membantu anda bagaimana cara memasang widget translator pada blog anda, widget ini memuat banyak bahasa di seluruh dunia. Baiklah langsung saja kita pasang sekarang.

  • Widget Translator
1. Login ke akun Dasbor Blogger anda.
2. Masuk ke Laman Tata Letak.
3. Pilih Tambahkan Widget "Add Gadget".
4. Klik HTML/Javascript.
5. Letakkan kode berikut didalamnya.




6. Simpan setelan Tata Letak anda dan lihat hasilnya.

Itulah beberapa langkah singkat mengenai Cara Memasang Widget Translate pada blog, terima kasih atas kunjungan anda. Jika ada kendala silahkan sampaikan pada kolom komentar mudah-mudahan saya bisa membantu.


                                                       "SEMOGA BERMANFAAT"


read more “Cara Memasang Widget Translator Pada Blog”

Tutorial Widget MargopBlog

read more “Tutorial Widget MargopBlog”
 
Free Website templatesfreethemes4all.comLast NewsFree CMS TemplatesFree CSS TemplatesFree Soccer VideosFree Wordpress ThemesFree Blog templatesFree Web Templates