Memahami Properti CSS Background

Halo blogger, kesempatan kali ini Saya kembali mencoba membagikan pengalaman Saya, yaitu dengan pembahasan Memahami Properti CSS Background.

Background merupakan properti / perintah CSS yang paling lumrah, atau paling sering kita temukan didalam suatu halaman website / blog, tentu saja karena script inilah yang mengatur warna dari suatu halaman HTLM / web. Dalam satu perintah background terdiri dari beberapa pembagian kode berikut ini diantaranya.

Background

Dengan satu properti ini kita bisa mengatur warna dari seluruh elemen yang ada pada web, mulai dari warna warni dan juga gambar. Contoh penggunaan :

Dengan satu warna saja:

• Standart Color, background: red;
• Hexa Color, background: #6cf; atau background: #66CCFF;
• RGB Color, background: RGB(0,256,0);
• Agar lebih mendetail kepada background warna gunakan, background-color. Contoh : background-color: red;
• Selengkapnya tentang pewarnaan CSS pada artikel Memahami Warna pada CSS (Hexa Color dan RGB)

Dengan gambar:

• Background : url(alamatgambar.jpg); atau background-image : url(alamatgambar.png);. Background-image digunakan khususnya untuk background gambar.

Background-repeat

Yaitu properti dari background yang mengatur pengulangan dari background gambar.

• Agar background gambar tidak diulang, contoh : div{background-image: url(images.jpg; background-repeat: no-repeat} atau div{background-image: url(images.jpg) no-repeat;}.
• Agar background berulang secara horizontal, contoh : div{background-image: url(images.jpg; background-repeat-x: initial; background-repeat-y: no-repeat;}.
• Agar background berulang secara vertikal, contoh : div{background-image: url(images.jpg; background-repeat-y: initial; background-repeat-x: no-repeat;}.

Background-size

Yaitu properti background yang mengatur ukuran dari background itu sendiri, yang berbeda dari ukuran elemen yang membungkusnya.

• Mengatur width (Lebar) dan height (Tinggi) sekaligus, background-size: 50%; atau background-size: 200px;.
• Mengatur width dan height secara terpisah, background-size: 200px 100px;. 200px disini sebagai width sedangkan 100px sebagai height.
• Mengatur lebar dan tinggi secara default(Bawaan ukuran gambarnya), background-size: initial; hal ini tidak perlu di implementasikan atau dideskripsikan karena sudah menjadi settingan dasar CSS umumnya.
• Mengatur ukuran background gambar sesuai dengan ukuran elemen pembungkusnya, background-size: cover;.

Background-position

Yaitu properti background yang mengatur posisi dari background, secara melintang (Horizontal) maupun membujur (Vertikal).

• Mengatur horizontal dan vertikal sekaligus, background-position: 150px 300px;. 150px disini mengatur position horizontal, sedangkan 300px mengatur positon vertikal.
• Mengatur secara horizontal saja, background-position-x: 150px;.
• Mengatur secara vertikal saja, background-position-y: 300px;.

Background linear gradient

Properti background ini digunakan untuk membuat warna yang ada pada background banyak atau lebih dari satu secara garis lurus.

• Background: linear-gradient(red, blue);. Hasil dari kode berikut ini akan menampilkan background seperti dibawah ini. Yaitu warna akan mengarah kebawah, dari merah ke biru. Secara defaultnya warna linear-gradient akan kebawah (To bottom), atau jika dalam penulisan kodenya, background: linear-gradient(to bottom, red, blue);

Background radial gradient

Properti background ini digunakan untuk membentuk warna background lebih dari satu secara melingkar.

• Background:radial-gradient(red,blue);. Hasil dari kode berikut ini akan menampilkan warna background dimulai dari tengah merah kemudian melebar ke warna biru. 

Untuk linear gradient dan radial gradient, gunakan "," koma  untuk memisahkan antar warna atau menambahkan warna lebih banyak, untuk berapa banyak warna yang dapat dimuat sepertinya tidak memiliki batasan. Lebih lengkapnya baca artikel Tutorial Membuat Background Bermotif Dengan Repeating Gradient.

Sekian dulu dari Saya pada artikel ini, semoga ini dapat bermanfaat bagi Sobat sekalian, Terima Kasih.

Belajar Membuat Menu Website / Blog (Menyamping / Melintang dengan Submenu Drop Down Bercabang) - Part 2

Halo Sobat blogger!. Pada artikel ini Saya membahas tentang pembuatan menu menyamping atau melintang (Horizontal) dengan submenu drop down bercabang.

Setelah sebelumnya membahas tentang Membuat Menu Sederhana Menyamping pada Part 1 Belajar membuat menu, artikel ini akan mengupas lebih dalam tentang pembuatan menu.

Drop down disini berarti submenu / cabang dari menu akan terlihat jatuh dari menu utamanya, dan disini kita akan membuat percabangan kedua atau lebih dari submenunya.

Langsung saja berikut ini beberapa kegiatan kita dalam belajar membuat menu tersebut.

• Pertama-tama sediakan peralatan / tool yang diperlukan, seperti text editor untuk memodifikasi kode nya dan web browser (Contoh : Firefox, Chrome, Opera) untuk melihat hasil dari menu yang kita buat.
• Untuk text editor bisa menggunakan Notepad++, bisa di download secara gratis disini 
• Setelah tool yang diperlukan sudah terinstal sekarang kita akan membuat file HTML dan CSS nya, buka Notepad++ > klik file > new, lebih lengkapnya baca Pengenalan HTML & CSS.
• Jika ingin mudah gunakan tool HTML & CSS Editor blog ini.
• Kemudian copy kode dibawah ini kedalam file html atau kolom html pada editor.

 


<ul class='menudropdown'>

<li><a href='http://alamatyangdituju.com/'>Home</a></li>



<li><a href='#'>Artikel</a><!-- "#" ganti dengan alamat yang dituju -->

<ul class='sbmenu'>

<li><a href='#'>Sub Artikel 1</a></li>

<li><a href='#'>Sub Artikel 2</a></li>

<li><a href='#'>Sub Artikel 3</a></li>

</ul>

</li>



<li>

<a href='#'>Tutorial</a>

<ul class='sbmenu'>

<li><a href='#'>Komputer</a>

<ul class='sbmenu2'>

<li><a href='#'>Internet</a></li>

<li><a href='#'>Windows</a></li>

</ul>

</li>



<li><a href='#'>Web Design</a>

<ul class='sbmenu2'>

<li><a href='#'>HTML&CSS</a>



<ul class='sbmenu3'>

<li><a href='#'>HTML</a></li>

<li><a href='#'>CSS</a></li>

</ul>



</li>

<li><a href='#'>JQUERY</a></li>

</ul>

</li>

</ul>

</li>

</ul>

• Selanjutnya Salin CSS dibawah ini ke file CSS atau kolom CSS kode editor.

 


.menudropdown{

font-family: calibri;/*Jenis font Calibri*/

width: 100%;/* Agar lebar menu penuh mengikuti elemen pembungkusnya */

margin:0;padding:0; /* Mengatur margin dan padding ke 0, karena UL memiliki margin dan padding bawaan(Default) */ 

background:#259;

float: left;

}



.menudropdown li{

display: inline-block;/* Mengatur daftar list / li melintang atau menyamping horizontal */

position:relative;

float: left;

}

.menudropdown a{

display: block;

float: left;

color: #fff;

background: #47b;

text-decoration: none;/* Menghilangkan garis bawah(Underline) <a> */

padding: 5px; /* Mengatur padding semua sisi 5px */

border:1px solid #000;

font-size:18px;

transition: 0.2s ease;/* Membuat efek perubahan hover dan kembali selama 0.2 detik */

}

.menudropdown a:hover{ /* Efek hover atau perubahan <a> atau alamat yang dituju apabila kursor mouse diarahkan ke <a> */

background: #fff;/* Perubahan warna background */

color: #000;/* Perubahan warna tulisan <a> */

}



.sbmenu{

margin: 0px;

padding:0px;

top: 0;/* Meletakkan posisi Submenu ke paling atas dari elemen induknya (Li sebelumnya) */

position:absolute;

visibility:hidden;/* Submenu1 tidak ditampilkan atau di hidden pada awalnya */

opacity: 0; /* Opacity mengatur transparency / tingkat ketransparanan suatu elemen, disini submenu di atur pada nilai 0 */

transition: 0.2s ease;/* Memberikan efek transisi/ efek perubahan pada saat kursor diarahkan(Hover) ataupun kembali selama 0.2 detik */

}

.menudropdown li:hover .sbmenu{ /* Hover disini memberikan pengaruh terhadap Submenu1 pada saat kursor mengarah ke <li> yang memiliki Submenu1 */

visibility: visible;/* Menampilkan Submenu1 mengubah display:none menjadi display: block */

opacity: 1;/* Opacity bernilai 1 atau penuh (Tidak transparan)*/

top: 100%;/* Meletakkan posisi Submenu ke paling bawah dari elemen induknya (Li sebelumnya) */

}

.sbmenu li{display: block;/* Membuat list submenu membujur kebawah */ 

background: blue;



}

.sbmenu a{

width: 100px;/* Mengatur lebar <a> submenu sebesar 100 pixel */

}



.sbmenu2,.sbmenu3{/* CSS properti dari Submenu2 dan Submenu3 */

margin: 0px;

padding:0px;

position:absolute;

left:100%;/* Memindahkan posisi dari Submenu 2 atau 3 ke posisi paling kanan dari submenu sebelumnya */

display: none;/* Tidak menampilkan Submenu 2 atau 3*/

}



.sbmenu li:hover .sbmenu2, .sbmenu2 li:hover .sbmenu3{/* Hover disini memberikan pengaruh terhadap Submenu2 dan Submenu3 pada saat kursor mengarah ke <li> yang memiliki Submenu 2 dan 3 */

display: block;/* Menampilkan Submenu 2 atau 3*/

}

• Save file HTML dan CSS, atau lihat pada tampilan editor maka tampilannya akan seperti dibawah ini.

• Home
• Artikel
  • Sub Artikel 1
  • Sub Artikel 2
  • Sub Artikel 3
• Tutorial
  • Komputer
    • Internet
    • Windows
  • Web Design
    • HTML&CSS
      • HTML
      • CSS
    • JQUERY

Nah, Demikianlah tutorial atau belajar membuat menu menyamping dengan Submenu Drop Down bercabang ini Saya buat, semoga ini dapat bermanfaat. Jika ada kesalahan atau kekurangan pada artikel ini Saya mohon maaf, Terima Kasih telah berkunjung.

Belajar Membuat Menu Website / Blog (Sederhana Menyamping / Melintang) - Part 1

Pada kesempatan kali ini Saya membagikan tutorial atau belajar membuat menu Website / Blog dari menu yang standar / biasa-biasa saja terlebih dahulu, hingga menu responsive. Pada artikel ini lebih tepatnya akan membahas tentang pembuatan menu sederhana menyamping atau melintang (Horizontal).

Memodifikasi menu atau navigasi ini tentunya merupakan minat pertama kebanyakan orang yang ingin mendesain web atau blognya, termasuk Saya sendiri pada awalnya mempelajari web design.

Baiklah langsung saja kita coba mempraktikkannya.

• Pertama-tama sediakan peralatan / tool yang diperlukan, seperti text editor untuk memodifikasi kode nya dan web browser (Contoh : Firefox, Chrome, Opera) untuk melihat hasil dari menu yang kita buat.
• Untuk text editor bisa menggunakan Notepad++, bisa di download secara gratis disini 
• Setelah tool yang diperlukan sudah terinstal sekarang kita akan membuat file HTML dan CSS nya, buka Notepad++ > klik file > new, lebih lengkapnya baca Pengenalan HTML & CSS.
• Jika ingin mudah gunakan tool HTML & CSS Editor blog ini.
• Kemudian copy kode dibawah ini kedalam file html atau kolom html editor.

 




<ul class='menusederhana'>


 <li>


  <a href='http://alamatyangdituju/'>


  Home


  </a>


 </li>


 <li>


  <a href='http://alamatyangdituju/'>


  Artikel


  </a>


 </li>


 <li>


  <a href='http://alamatyangdituju/'>


  Hubungi Kami


  </a>


 </li>


</ul>

• Save, kemudian coba buka file html tersebut, maka tampilannya akan seperti dibawah ini

• Selanjutnya kita tambahkan CSS untuk memperindah tampilan menu dan membuat daftarnya menyamping/ memanjang. Salin CSS dibawah ini ke file CSS atau kolom CSS kode editor.

 


.menusederhana{




width: 100%;/* Agar lebar menu penuh mengikuti elemen pembungkusnya */


margin:0;padding:0; /* Mengatur margin dan padding ke 0, karena UL memiliki margin dan padding bawaan(Default) */ 


background:#2af;


padding: 5px 0;/* Mengatur padding atas dan bawah 5px, padding kiri dan kanan 0 */


}




.menusederhana li{


display: inline;/* Mengatur daftar / li dari menu melintang atau menyamping */


}




.menusederhana a{


color: #fff;


padding: 5px; /* Mengatur padding semua sisi 5px */


border:1px solid #000;


transition: 0.2s ease;/* Membuat efek perubahan hover dan kembali selama 0.2 detik */


}




.menusederhana a:hover{ /* Efek hover atau perubahan <a> atau alamat yang dituju apabila kursor mouse diarahkan ke <a> */


background: #000;/* Perubahan warna background */


color: red;/* Perubahan warna tulisan <a> */


}

• Save CSS maka tampilannya akan seperti dibawah ini

• Home
• Artikel
• Hubungi Kami

Nah, Saya pikir sekian dulu pada artikel ini, untuk tutorial membuat menu selanjutnya klik disini, semoga tutorial ini dapat bermanfaat, lebih dan kurangnya Saya mohon maaf, Terima Kasih.

Memahami Warna pada CSS (Hexa Color dan RGB) Untuk Memudahkan Mengatur Warna Tanpa Generator

Halo Sobat!, pada artikel ini kita membahas warna pada CSS, yang akan saya jabarkan disini adalah Hexa Color dan RGB, tujuan dari artikel tersebut adalah, agar sobat yang suka mengutak atik tampilan website/ blog, atau hobi pada desain web dapat lebih mudah mengatur warna pada CSS tanpa bantuan color generator.

Hexa Color 

• Adalah warna dengan basis nilai hexa (16), sebenarnya formatnya sama saja dengan RGB, misal nya, #FF0000, 2 digit dikiri merah (Red), 2 digit ditengah hijau (Green), dan 2 digit dikanan biru (Blue). 
• Pada contoh #FF0000, berarti nilai warna merah dari susunan warna tersebut adalah 256, nilai hijau dan biru 0, susunan warna ini akan menampilkan warna merah pekat.
• Nilai merah 256 ini didapat dari, F Hexadesimal = 16 Desimal, dua kali F berarti 16x16 = 256.

Beberapa warna dasar untuk Hexacolor

• #FFFFFF = Putih. Didapat dari nilai dari Red, Green, Blue maximal sebesar 256.
• #000000 = Hitam. Didapat dari nilai RGB yang 0, menjadikan tidak berwarna.
• #FF0000 = Merah. Didapat 2 digit diawal yang bernilai 256.
• #00FF00 = Hijau.
• #0000FF = Biru.

Silahkan sobat mengkombinasi sendiri nilai dari warna tersebut, yang pasti range atau jangkauan warna maksimal adalah 0-9 lalu A-F. 

Untuk penulisan yang lebih singkat bisa hanya menggunakan 3 digit, bila masing-masing 2 digitnya memiliki nilai yang sama, contoh :

• #FFFFFF = bisa disingkat menjadi #FFF
• #0000FF = #00F
• #66CCFF = #6CF

RGB Color

• RGB Color menggunakan basis nilai desimal dari 0 - 256, per setiap bagian Red, Green, Blue nya.
• Cara menyusun atau penulisannya sedikit lebih rumit dan panjang, seperti ini RGB(256,0,0)
• Pada contoh RGB(256,0,0) berarti nilai dari warna merah sebesar 256, RGB berarti susunan warnanya dimulai dari Merah, Hijau, Biru sama saja sebenarnya dengan Hexa Color

• Silahkan Sobat mengkombinasikan sendiri juga untuk nilai warna lainnya.
• RGB dapat kita beri nilai transparan dengan menggunakan properti RGBA, contoh penulisannya RGBA(256,0,0,1), angka 1 paling belakang tersebut berarti opacity, atau nilai transparency dari warna tersebut, hal ini dapat kita gunakan juga untuk memperindah tampilan suatu elemen dengan warna yang sedikit tembus pandang. Nilai transparency mulai dari 0-1, jadi jika sobat ingin menghilangkan warna sekaligus, gunakanlah nilai 0. Jika ingin membuat transparan gunakanlah nilai 0.1 - 0.9.

Nah, Saya kira cukup sekian saja, semoga ini dapat membantu dan berguna bagi Sobat sekalian. Lebih dan kurangnya Saya mohon maaf, Terima Kasih telah berkunjung.

Membuat Tautan Ke Artikel Selanjutnya atau Sebelumnya Dengan Judul Postingan (Next Previous)

Pada kesempatan ini, Saya menuliskan sebuah tutorial untuk membuat navigasi tautan atau alamat di bawah postingan menuju ke konten/ artikel selanjutnya (Posting baru) maupun sebelumnya (Posting lama) dengan judul artikel. Tampilan next prev posting blog tersebut seperti gambar dibawah ini.

Langsung saja, berikut kode/ script yang perlu Sobat tambahkan.

• Masuk ke akun blogger Sobat > Pilih Blog > Template > lalu Edit HTML.
• Jika belum ada source kode Jquery, copy kode berikut diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> 

• Lalu copy kode CSS tersebut diatas ]]></b:skin> atau </style> , gunakan CTRL+F untuk mempercepat pencarian.

.blog-posts{display: block;overflow: hidden;}
.blog-pager{background: #def;float:left;margin-top: 10px;width: 100%;font-family: 'roboto condensed',calibri;}
.blog-pager a{background: #25a;transition: all 0.6s ease;color: #fff;display: block;max-width: 200px;padding: 5px 20px;box-shadow: 0px 0px 1px 1px #fff;}
.blog-pager a:hover{color: #000;background: #fff;box-shadow: 0px 0px 0px 1px #000;}
#blog-pager-newer-link a:hover{margin-right: 20px!important;}
#blog-pager-newer-link a:hover:after{margin-right: 20px!important;font-size: 25px;animation: moveright 1s linear infinite;-webkit-animation: moveright 1s linear infinite;}
#blog-pager-older-link a:hover{margin-left: 20px!important;}
#blog-pager-older-link a:hover:after{margin-left: 20px!important;font-size: 25px;animation: moveleft 1s linear infinite;-webkit-animation: moveleft 1s linear infinite;}
@-webkit-keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}
@-moz-keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}
@keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}
@-webkit-keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}
@-moz-keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}
@keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}
#blog-pager-older-link, #blog-pager-newer-link{margin:30px 25px 10px 25px;position: relative;height: auto; }
#blog-pager-older-link{float: left; }#blog-pager-newer-link{float: right;}
#blog-pager-older-link:before{content:'Previous Post';position: absolute;top:-25px;}
#blog-pager-newer-link:before{content:'Next Post';right: 0;position: absolute;top:-25px;}
#blog-pager-newer-link a:after,#blog-pager-older-link a:after{transition: all 0.5s ease;color: #000;top: 0;font-size: 20px;position: absolute;font-family: fontawesome;} 
#blog-pager-older-link a:after{content:"\f100";left: -17px;position: absolute;font-family: fontawesome;} 
#blog-pager-newer-link a:after{content:"\f101";right: -17px;position: absolute;font-family: fontawesome;} 

• Selanjutnya copy kode HTML tersebut dibawah <data:post.body/> atau kode widget related post Sobat, kemungkinan ada beberapa kode <data:post.body/> , bila belum berhasil letakkan juga di bawah <data:post.body/> lainnya, karena kemungkinan ada beberapa kode tersebut pada template sobat.

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Prev Post</a>
      </span>
    </b:if>
 <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Next Post</a>
      </span>
    </b:if>
</div>

• Kemudian copy kode Jquery ini diatas </head> atau diatas </body>.

 <script type='text/javascript'>
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; h3:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; h1:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script> 

• Setelah itu buka salah satu postingan Sobat, lihat pada bawah postingan, jika sudah ada navigasi next prev maka sudah berhasil, jika belum ada, coba Inspect Element / Periksa Elemen pada title / judul postingan, Contoh :

• Pada contoh diatas, template Saya menggunakan h3 untuk judul/ title postingan. Maka perlu sobat ganti h1:first pada kode Jquery sebelumnya menjadi h3:first.

Begitu saja cara membuat navigasi tautan next prev dengan judul postingan pada blogger. Sekian informasi yang dapat Saya sampaikan, semoga dapat bermanfaat. Terima Kasih.

Menonaktifkan atau Mengganti Pengaturan Template Seluler (Mobile)

Pada artikel ini, Saya menuliskan bagaimana cara menonaktifkan atau mengganti template blog versi seluler (Mobile) atau smartphone sesuai dengan kebutuhan dan fitur yang ada pada template.

• Pertama, login terlebih dahulu ke akun blogger, klik blog yang bersangkutan, pada tab/ menu sebelah kiri pilih Template. 
• Jika Anda menggunakan template Responsive, namun tidak support template khusus untuk versi mobile nya, maka template versi mobile seharusnya dinonaktifkan saja, contoh template yang Saya gunakan ini. Klik icon setting pada template seluler, kemudian pilih Tidak, kemudian simpan untuk menonaktifkan template mobile.

• Jika template yang Anda pakai adalah template Responsive yang support template Mobile maka lebih baik pilih Ya pada pilihan template seluler, lalu pilih opsi Khusus, kemudian simpan.
• Untuk Anda pengguna template tidak Responsive dan tidak support versi seluler, disarankan untuk memilih opsi template seluler yang lain, seperti Default, Sederhana, dan lain sebagainya. Agar tampilan blog dapat lebih baik pada seluler.

Sedikit tips, jika Anda baru saja mengubah template tidak responsive menjadi responsive, dan template tersebut tidak support versi seluler, maka pilih Tidak pada pengaturan template seluler, dan tambahkan kode dibawah ini, diatas </head>.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Ini bertujuan agar blog tidak terlihat dengan tampilan seperti pada komputer/ desktop, yang memungkinkan pengunjung untuk membesar kecilkan layar gadget nya. Dengan ini template akan menyesuaikan ke responsive an dengan seluler.

Sekian artikel ini Saya buat, semoga dapat bermanfaat, Terima Kasih.

Mengatur Gambar Postingan Blog Agar Lebih Seo dan Valid HTML5

Halo blogger, Pada kesempatan ini, Saya menuliskan sedikit informasi mengenai bagaimana mengatur / memasang gambar postingan yang benar, agar lebih SEO dan merupakan salah satu syarat agar artikel valid HTML5. Hal kecil demikian mungkin saja sering terlewatkan oleh para blogger dalam membuat artikel termasuk Saya sendiri.

Langsung saja, berikut ini hal yang harus dilakukan :

• Jangan lupa selalu sertakan Title (Judul) dan Alt(Deskripsi) pada gambar yang Anda posting didalam artikel. Klik gambar yang akan diberi title dan deskripsi, lalu klik Properties. title text isi dengan judul gambar , dan alt text isi dengan deskripsi atau penjelasan gambar. Contoh klik Tampilan ini.

• Hal sederhana ini tentunya dapat meningkatkan kualitas SEO artikel kita, karena beberapa orang mungkin melakukan pencarian konten melalui gambar.

• Selanjutnya, klik tab HTML pada menu diatas, lalu temukan gambar yang kita upload/ masukkan ke dalam artikel, pada tag <a > gambar, temukan kode imageanchor="1" , hapus kode tersebut atau gunakan CTRL+F untuk mencari.
• Lalu temukan pula dalam tag <img kode border="0", kemudian hapus juga kode tersebut. Contoh lihat GAMBAR berikut.

Demikianlah sedikit tips mengatur atau memasang gambar pada artikel blogger, semoga dapat bermanfaat, Terima Kasih.

Spifirst V2 Responsive Blogger Template Free

Halo Sobat blogger, pada kesempatan kali ini Saya membagikan template buatan Saya dengan nama Spifirst V2, yaitu lanjutan atau masih bersaudara dengan Spifirst sebelumnya, template ini juga Responsive Design dan valid HTML5 & CSS3, untuk benar-benar mem-validkan CSS3 cukup menghapus kode CSS animation keyframes pada Template.

Berikut ini Fitur dari Spifist V2: 

• SEO Home Page dan Post Page chkme - Cek
• Valid HTML5 Home Page - Cek
• Valid HTML5 Post Page - Cek
• Valid CSS3 Home Page - Cek
• Valid CSS3 Post Page - Cek
• Responsive Design - Cek
• Custom Error Page - Cek
• Breadcrumbs
• Threaded Comments
• Related Posts
• Back To Top
• Ads Place 728x90 & 970x90

DOWNLOAD  DEMO

Sekian dari Saya, semoga dapat bermanfaat bagi Sobat sekalian, Terima Kasih.

Spifirst Responsive Blogger Templates Free

Halo Sobat blogger, pada kesempatan kali ini Saya membagikan template pertama buatan Saya yang Responsive dan juga support HTML5 & CSS3.

Berikut ini Fitur dari Spifist 1100 : 

• SEO Home Page dan Post Page chkme - Cek
• Valid HTML5 Home Page - Cek
• Valid HTML5 Post Page - Cek
• Valid CSS3 Home Page - Cek
• Valid CSS3 Post Page - Cek
• Responsive Design - Cek
• Custom Error Page - Cek
• Breadcrumbs
• Threaded Comments
• Related Posts
• Ads Place 728x90 & 970x90

DOWNLOAD  DEMO