Home » Semua Post Berkategori CSS
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Teknik Seo Untuk Blogger

Teknik Seo Untuk Blogger

Teknik Seo Untuk Blogger | SEO

Demikianlah tadi Teknik Seo Untuk Blogger
Tulis Komentar Selengkapnya »
Cara Membuat Website

Cara Membuat Website

Cara Membuat Website | Website

Demikianlah tadi postingan saya tentang Cara Membuat Website
Tulis Komentar Selengkapnya »
Cara Membuat Website Gratis

Cara Membuat Website Gratis

Cara Membuat Website Gratis | Website

Demikianlah Cara Membuat Website Gratis
Tulis Komentar Selengkapnya »

Cara Penempatan Kode Css Dalam Html

Cara Penempatan Kode Css Dalam Html | Pada kesempatan ini saya akan melanjutkan tutorial yang kemari yang telah saya postingkan yang berjudul Panduan Css Untuk Pemula. Melanjutkan postiang saya yang lalu kali ini kita akan mencoba mempelajari bagaimana sih cara penempatan Kode Css dalam Html yang benar.

Perlu agan-agan ketahui bahwa untuk penempatan kode css dalam html caranya ada tiga, untuk selengkapnya bisa kita bahas di bawah ini :

Internal CSS adalah menuliskan secara langsung script CSS kedalam file HTML. berikut ini adalah Contoh :
<html>
<head>
<title>CSS Pertamaku</title>
<style type=”text/css”>
p {color: white;}
body {background-color: black;}
</style>
</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>
Keterangan : yang berwarna biru adalah script CSS
External CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css sebagai contoh semisal saya membuat file CSS dengan nama file dan saya simpan dengan format file.css. File CSS ini terpisah dari file Html dan didtempatkan di folder lain atau di folder yang sama dengan file html tersebut. Maka hasilnya browser akan menbaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dalam file CSS yang telah kita buat. Berikut ini adalah contohnya :

<html>
<head>
<title>CSS Pertamaku</title>
<link rel=”stylesheet” type=”text/css” href=”file.css”/>
</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>

Keterangan : yang berwarna biru adalah lokasi dari file CSS
dan penempatan kode Css yang ke tiga adalah Inline. Inline adalah kita menuliskan secara langsung script CSS kedalam tag HTML. Sebagai contohnya silahkan agan-agan lihat di bawah ini :
<html>
<head>
<title>CSS Pertamaku</title>
</head>
<p style=”background: blue; color: white;”>CODING NGEBLOG</p>
</body>
</html>
Keterangan : yang berwarna biru adalah script CSS

Nah dari ke tiga Penempatan Kode CSS pada Html saya sarankan agan-agan untuk menggunakan cara penempatan External Css. Nah kiranya ini dulu dech yang kita pelajari pada kesempatan ini. Semoga membantu agan-agan semua dalam belajar Css.
1 Komentar Selengkapnya »

Panduan CSS Untuk Pemula

Panduan CSS Untuk Pemula | Pada kesempatan siang kali ini saya akan mencoba memberikan tutorial tentang Panduan CSS Untuk Pemula, Banyak teman-teman saya yang merasa kesulitan dalam belajar CSS.

Sebetulnya untuk belajar CSS itu mudah kog, intinya perlu ketekunan dan pemahaman,hehehe. Nah dari pada kelamaan Improve mending langsung saja yuck kita belajar bersama disini :
CSS (Cascading Style Sheet) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman (Source : Wikipedia). Selain itu CSS juga bisa berfungsi untuk mempermudah dan memperindah dalam pembuatan design halaman web. Untuk mempelajari CSS ini paling tidak agan-agan semuanya harus menguasai HTML terlebih dahulu.

Saat agan-agan masuk pada bagian CSS, sering kita dijumpai Kode sebagai berikut ini :
h1 {
    color: #0789de;
   }
Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value (Untung Julianto, Modifikator Blogger + CD, halaman 22. Elex Media Komputindo). Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.

Nah agar penulisan Css kita biar terlihat rapi dan bagus kita bisa memisahkan selector dan property pada baris yang berbeda. Sebagai contoh agan-agan bisa menirunya dibawah ini :
h1, h2
{
color:blue;
font-family:verdana;
}

Nah kiranya cukup sekian dulu belajar CSS nya lain kali disambung lagi dengan tutorial lainnya.
Tulis Komentar Selengkapnya »

CSS3 Buttons For Blogger

CSS3 Buttons For Blogger | Pada kesempatan siang yang cerah ini rasanya kurang pas jika tidak update postingan, pada kesempatan ini saya akan Share Code Css pada agan-agan semuanya tentang CSS3 Buttons For Blogger. Code Css3 ini bisa digunakan untuk bermacam-macam keperluan, salah satunya untuk Tombol Download, Play, Like dan lain-lainya.

Demo CSS3 Buttons For Blogger

Jika agan-agan merasa tertarik silahkan ikuti tutorialnya dibawah ini :
  • Login Blogger
  • Klik Template
  • Edit HTML
  • Ceklist/Centang Expand Template Widget
  • Cari Kode Ini  ]]></b:skin>
  • Copy Kode Dibawah, Lalu Paste Diatas  ]]></b:skin>

.button { display: inline-block; white-space: nowrap; background-color: #ccc; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -ms-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); border: 1px solid #777; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .button:hover { background-color: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); background-image: -webkit-linear-gradient(top, #fafafa, #ddd); background-image: -moz-linear-gradient(top, #fafafa, #ddd); background-image: -ms-linear-gradient(top, #fafafa, #ddd); background-image: -o-linear-gradient(top, #fafafa, #ddd); background-image: linear-gradient(top, #fafafa, #ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); } .button:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; } .button:focus { outline: 0; background: #fafafa; } .button:before { background: #ccc; background: rgba(0,0,0,.1); float: left; width: 1em; text-align: center; font-size: 1.5em; margin: 0 1em 0 -1em; padding: 0 .2em; -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -moz-border-radius: .15em 0 0 .15em; -webkit-border-radius: .15em 0 0 .15em; border-radius: .15em 0 0 .15em; pointer-events: none; } /* Hexadecimal entities for the icons */ .add:before { content: "\271A"; } .edit:before { content: "\270E"; } .delete:before { content: "\2718"; } .save:before { content: "\2714"; } .email:before { content: "\2709"; } .like:before { content: "\2764"; } .next:before { content: "\279C"; } .star:before { content: "\2605"; } .spark:before { content: "\2737"; } .play:before { content: "\25B6"; }

  • Simpan Template
  • Sekarang Kode HTML Pemanggilnya (Pilih Salah Satu)
<a class="button add"   href="#">Add</a>
<a class="button delete"href="#">Delete</a>
<a class="button edit"  href="#">Edit</a>
<a class="button save"  href="#">Save</a>
<a class="button email" href="#">Email</a>
<a class="button like"  href="#">Like</a>
<a class="button next"  href="#">Next</a>
<a class="button spark" href="#">Spark</a>
<a class="button play"  href="#">Play</a>

  • Kode Itu Silahkan Ditaruh Di HTML, Baik Itu Postingan / Gadget
  • Keterangan HTML Pemanggil :
<a class="button add"   href="#">Add</a> : Tombol Add
<a class="button delete"href="#">Delete</a> : Tombol Delete
<a class="button edit"  href="#">Edit</a> : Tombol Edit
<a class="button save"  href="#">Save</a> : Tombol Save
<a class="button email" href="#">Email</a> : Tombol Email
<a class="button like"  href="#">Like</a> : Tombol Like
<a class="button next"  href="#">Next</a> : Tombol Next
<a class="button spark" href="#">Spark</a> : Tombol Spark
<a class="button play"  href="#">Play</a> : Tombol Play

Tulis Komentar Selengkapnya »

Cara Membuat Scroll Pada Widget Label

Cara Membuat Scroll Pada Widget Label | Sroll kelihatannya tidak begitu penting digunakan pada blog, namun menurut saya scroll adalah penting digunakan pada blog kita agar tata letak blog kita terlihat rapid an bagus. Nah pada kesempatan ini saya akan memberikan bagaimana Cara Membuat Scroll Pada Widget Label di blog, dan ini bekerja/valid 100%.

Langsung saja berikut langkah-langkah Cara Membuat Scroll Pada Widget Label :
  • Pastikan agan-agan login ke akun blogger masing-masing
  • Jika sudah login, dari bagian dashbord blog pilih Template untuk mengakses halaman edit HTML. ( Baca : Cara Mengakses Halaman Edit HTML Blogspot)
  • Jika sudah jangan lupa back-up template blog sebelum melakukan edit HTML ( Baca : Cara Upload dan Back-Up Template Blogger)
  • Jika sudah cari kode ]]></b:skin> (Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
  • Sudah ketemu Copas kode dibawah dan letakan diatas kode ]]></b:skin>
        #Label1 .widget-content{
        height:200px;
        width:auto;
        overflow:auto;
        }
  • Kode warna biru adalah tinggi kotak Scroll silahkan kamu sesuaikan.
  • Jika sudah Klik Simpan
  • Selesai dan lihat hasilnya.

Tulis Komentar Selengkapnya »

Cara Membuat Menu Horizontal Navigasi

Cara Membuat Menu Horizontal Navigasi | Banyak dari teman-teman saya yang menannyakan bagaimana sih cara membuat NAVBAR / NAVIGASIBAR / MENU HOME dan lainnya diblogger. Sebetulnya jika kita mau googling sudah ada banyak yang menyediakan tutorial cara membuatnya. Namun tidak sedikit pula yang saya temukan bahwa tutorialnya/codenya tidak Valid.

Nah kali ini akan kita bahas bersama bagaimana sih Cara Membuat Menu Horizontal Navigasi yang Valid? Pada kesempatan ini saya ambilkan peng-Codingan dari Miliknya Mas Riyanto yang sudah saya tes dan hasilnya 100% Valid.

Nah dbagi agan-agan yang sudah tidak sabar lagi silahkan simak tutorialnya dibawah ini :
  • Login Blogger
  • Klik Template
  • Edit HTML
  • Ceklist/Centang Expand Template Widget
  • Cari Kode:  ]]></b:skin> (Gunakan Ctrl + F untuk mempermudah pencarian Code)
  • Copy Kode Dibawah ini, Kemudian Paste Diatas Kode ]]></b:skin>

/* Menu Navigasi By Art Preview */
#menus {
border-bottom:1px solid #ddd;
border-top:1px solid #ddd;
border-right:1px solid #ddd;
border-left:1px solid #ddd;
height:31px;
}
#menus li {
display:inline;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#menus li a {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8I2IDr6XBYVs3SknR_RyWrf875iVMgVjkWDnF6VlSxg5n6RGnFCDwHfMqk1lbraG6HsZ_oheGEx0QBGHwIJ8pjASoHOVO_8FwrCvpiAWDHesbuNMpXkszQjP3a75QgYPjCoG6rTb_i4iV/s1600/menu.gif) no-repeat scroll 0 0;
color:#382E1F;
display:block;
float:left;
font-size:12px;font-weight:normal;font-family:comic sans ms;
height:31px;
line-height:31px;
margin-left:-10px;
padding:0 20px;
text-decoration:none;
z-index:1;
}
#menus li a:hover, #menus li a.current {
background-position:0 -31px;color:#cccccc;font-weight:normal;
}
#menus li.current_page_item a, #menus li.current-cat a {
background-position:0 -62px;
}
#menus li a.home {
background-position:0 -93px;
margin-left:0;
padding:0;
text-indent:-999em;
width:45px;
}
#menus li a.home:hover {
background-position:0 -124px;
}
#menus li.current_page_item a.home {
background-position:0 -155px;
margin-left:-40px;
}
#menus li a.lastmenu:hover {
background-position:0 0;
cursor:default;
}

Langkah selanjutnya adalah :
  • Lalu Cari Kode <div id='header-inner'>
  • Kalau agan-agan Tidak menemukannya, agan-agan bisa Cari Code Yang Sejenis, Karena Setiap Template Berbeda-Beda
  • Copy Kode Dibawah kemudian Paste Dibawah Code <div id='header-inner'>



<!-- Menu Navigasi Start -->
<ul id='menus'>
<li class='current_page_item'><a class='home' href='#' title='Home'></a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a href='#' title='Menu 3'>Menu 3</a></li>
<li><a href='#' title='Menu 4'>Menu 4</a></li>
<li><a href='#' title='Menu 5'>Menu 5</a></li>
<li><a href='#' title='Menu 6'>Menu 6</a></li>
</ul>
<!-- Menu Navigasi End -->


Keterangan : Code Diatas Juga Bisa Diletakkan Di HTML/JavaScript
  • Klik Pratinjau dulu untuk meminimalisir apakah ada kesalahan atau tidak, Jika Berhasil Maka Klik Save Template

Tulis Komentar Selengkapnya »
Cara Membuat Gambar Header Menjadi Berputar

Cara Membuat Gambar Header Menjadi Berputar

Cara Membuat Gambar Header Menjadi Berputar  | Pada kesempatan kali ini saya akan mencoba berbagi tips coding lagi pada agan-agan semuanya yang sering mengunjungi Coding Ngeblog ini, mungkin saat agan-agan lagi iseng-iseng surfing pernah menemukan blog ataupun website yang menggunakan efek Gambar Header menjadi Berputar.

Nah pada kesempatan kali ini akan saya berikan tutorialnya bagi agan-agan semuanya, namun satu hal yang harus agan-agan ingat, Code CSS yang akan saya berikan ini akan bekerja dengan maksimal jika header agan-agan menggunakan gambar, jika tidak maka Code CSS ini tidak akan bisa berjalan.

Nah berikut in adalah cara ataupun tutorialnya :
1. Login Blogger
2. Klik Template
3. Edit HTML
4. Ceklist/Centang Expand Template Widget
5. Cari Kode :  ]]></b:skin> (Gunakan Tombol Ctrl + F pada keyboard agar memudahkan agan-agan dalam mencari kode tersebut)
Coppy Code dibawah ini lalu kemudian  Paste Diatas Code ]]></b:skin>

#header a img:hover {
 -moz-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 -webkit-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 -o-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 -ms-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 -webkit-transition: all 600ms ease-in-out;
 -moz-transition: all 600ms ease-in-out;
 -ms-transition: all 600ms ease-in-out;-o-transition: all 600ms ease-in-out;
 transition: all 600ms ease-in-out;
}

6. Nah yang terakhir adalah langkkah yang paling mendebar-debarkan yaitu Klik Save Template agan-agan.hehehehe

Keterangan :
  • Code Yang Berwarna Merah Adalah Besar Rotasi, agan-agan Bisa Mengeditnya  Sendiri 
  • Code - (Minus) Menunjukkan Rotasi Berlawanan Terhadap Arah Jarum Jam, agan-agan Bisa Menghilangkan Code Itu (Minus) Kalau agan-agan Mau Gambarnya Berputar Searah Jarum Jam, Contoh (180deg)

Tulis Komentar Selengkapnya »