Membuat Link Bentuk Gambar

Banyak manfaat dari gambar, selain untuk menarik pada upload tulisan kita, juga untuk menandakan dengan menjadikan link. Seperti contoh dibawah ini.

Untuk membuatnya sangat mudah, langkah-langkahnya dibawah ini:
1. Jika di postingan, tinggal copy kode html dibawah ini di setelah new entry, syaratnya posisi dalam keadaan html

Kode html link gambar:

<a href="http://sarastiana.blogspot.com/p/kumpulan-video-tutorial.html"a><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9RUlKgUfPb6pPU-rGiHvohjSjiOr6oBYxzKbCONNH7s0xUXS7yezZbIpWmrj5wXosyVaUf4pMAK8ZHq4fK0mFSq3I64m1-KC3bw2Zy5kLyp1s9vIg19i7hSQK3uUJTTXX9sFnCxDQJo/s1600/VIDEO+TUT.png"/></a>

Keterangan :
a. Ganti https://sarastiana.blogspot/p/kumpulan-video-tutorial.html dengan link bp/Ibu
b. Ganti : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9RUlKgUfPb6pPU-rGiHvohjSjiOr6oBYxzKbCONNH7s0xUXS7yezZbIpWmrj5wXosyVaUf4pMAK8ZHq4fK0mFSq3I64m1-KC3bw2Zy5kLyp1s9vIg19i7hSQK3uUJTTXX9sFnCxDQJo/s1600/VIDEO+TUT.png (Link untuk memunculkan gambar,Bapak/Ibu harus sudah memiliki gambar yang telah diupload)

2. Jika diletakan di sidebar

Pilih di Sidebar kiri misalnya: pilih tata letak (1) tambahkan Gadget (2) Klik HTML/Java Script
Pastekan kode diatas di dalamnya.

Semoga bermanfaat.

Read More »

24 January | 0komentar

Membuat Menu Horizontal Paling Simpel

Salah satu navigasi/penunjuk arah diblog adalah menubar, sebagai navigasi pasti menu ini sangat berguna. Menu ini berguna untuk mempermudah pengunjung mengenali isi blog kita.

Gambar diatas menunjukan menubar bentuk horizontal, menunjukan profil,daftar isi,kontak dan lain-lain. Berikut ini cara membuat menu horizontal seperti diatas dengan simpel dan sangat mudah.
Langkah-langkahnya:
1. Login dan masuk ke dashboard blogger.
2. Pilih template < edit html

3. Letakan kode dibawah ini tepat diatas kode ]]></b:skin> :

/* Menu Horisontal
---------------------------------------------*/
.menupic{width:100%;margin:0 auto;padding:0 auto;}
.menuhorisontal{background:#e9e9e9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx0vUIo7GFwKkwQWM3seJD4moG3wtDaXCNBR6u5MXGSOwa-q2SBip-cN5c4TDrpbBeV_xq95AOjsC08A8ulxsGj3Q4HJBbwyvDyo0hRgVg8IcQMhFiUY6OENOZJvamqsY8HZlBB3xO9tA/s1600/bg_menu.gif) repeat-x bottom left;width:980px;height:30px;margin:0 auto; padding:0 auto;border-left:1px solid $bordercolor;border-right:1px solid $bordercolor;border-top:solid 1px $bordercolor;}
.menuhorisontal ul{margin: 0; padding-left: 0px;color:#357798;text-transform: capitalize;list-style-type: none;font:bold 12px Arial, Helvetica,Arial,Verdana,sans-serif;}
.menuhorisontal li{display: inline; margin: 0;}
.menuhorisontal li a{float: left;display: block;text-decoration:none;
padding:7px 7px 7px 7px;border-right:1px solid #dadcde;border-bottom:solid 1px #d2d4d6;color:#357798;}
.menuhorisontal li a:visited{color:#357798;}
.menuhorisontal li a:hover {background:#fff;color:#333;text-decoration:none;border-bottom:solid 1px #fff; /*Background Setelah Pointer Diarahkan */}
.menuhorisontal li.selected a {background:#fff;color:#333;border-bottom:solid 1px #fff;padding:7px 10px 7px 10px;}

4. Cari kode <!-- /header-wrapper -->  (dengan cara klik tombol ctrl+F bersama) Cari letakan kode dibawah ini tepat dibawahnya.

<div class='menupic'>

<div class='menuhorisontal'>

 <ul>

<li class='selected'><a expr:href='data:blog.homepageUrl'>HomePage</a></li>

<li><a href='https://sarastiana.blogspot.co.id '>Profil</a></li>

<li><a href='http://sarastiana.blogspot.com'>Daftar Isi</a></li>

<li><a href='https://sarastiana.blogspot.co.id/2015/09/perangkat-mengajar.html'>Perangkat KBM</a> </li>

<li><a href='http://sarastiana.blogspot.com '>Kontak</a></li>

<li><a href='http://sarastiana.blogspot.com'>Foto Kegiatan</a></li>

<li><a href='http://sarastiana.blogspot.co.id/2015/09/ulangan-online-mtbg.html'>Ulangan Online</a></li>

<li><a href='http://sarastiana.blogspot.co.id/p/artikel-pendidikan.html'>Artikel Pendidikan</a></li>

</ul>

</div>

 </div>

Keterangan: Ganti http://sarastiana.blogspot.co.id dengan URL yang dituju
Semoga bermanfaat

Read More »

23 January | 0komentar