Cara Membuat Slide Show Menu Horizontal Slider Keren Di Blog
By
Dalam Posting ini kita akan membahas tentang Cara Membuat Slide Show Menu Horizontal Slider Keren Di Blog yaitu membuat tampilan Slide image yang bergerak secara horizontal dan apabila maus di arahkan ke gambarnya maka gambar akan bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag Html dan Css.
Sebelum kita masuk kedalam pembahasan, pasti kita pernah timbul pertanyaan di benak kita dan bertanya-tanya, apasih itu HTML... ?
HTML adalah singkatan dari Hypertext Markup Language.
Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.
HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Menurut Beberapa sumber Seperti Wikipedia. HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.
HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Dan untuk lebih Mudah pengertian dari HTML adalah sebuah bahasa tertentu yang digunakan untuk membuat sebuah halaman web, agar dapat menghasilkan tampilan wujud yang terintegerasi.
Tentu Cara Membuat Slide Show Menu Horizontal Slider Keren Di Blog tersebut mempunyai daya tarik tersendiri karena Gambar bergerak dan berjalan di dalam area situs atau blog kita, selain itu juga menggunakan tag HTML tersebut dapat menambah tampilan dsain blog dan website kita semakin keren dan menarik.
Tentu tag HTMl juga mempunyai sebuah kekurangan. kekurangan Html tersebut adalah mempunyai kode-kode tertentu yang kemungkinan sulit untuk menggunakannya bagi orang yang awam.
<style type=text/css>
#tbi_slider {
overflow: hidden;
margin: 20px auto;
padding: 0;
width: 805px;
height: 320px;
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
#tbi_slider ul {
margin: 0;
padding: 0;
width: 2000px;
}
#tbi_slider li {
position: relative;
display: block;
float: left;
width: 160px;
border-left: 1px solid #888;
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#tbi_slider ul:hover li {
width: 40px;
}
#tbi_slider ul li:hover {
width: 640px;
}
#tbi_slider li img {
display: block;
}
#tbi_title {
position: absolute;
top: 0;
left: 0;
padding: 20px;
width: 640px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: bold 16px 'trebuchet MS', sans-serif;
}
#tbi_title a {
display: block;
color: #fff;
text-decoration: none;
}
</style>
#tbi_slider {
overflow: hidden;
margin: 20px auto;
padding: 0;
width: 805px;
height: 320px;
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
#tbi_slider ul {
margin: 0;
padding: 0;
width: 2000px;
}
#tbi_slider li {
position: relative;
display: block;
float: left;
width: 160px;
border-left: 1px solid #888;
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#tbi_slider ul:hover li {
width: 40px;
}
#tbi_slider ul li:hover {
width: 640px;
}
#tbi_slider li img {
display: block;
}
#tbi_title {
position: absolute;
top: 0;
left: 0;
padding: 20px;
width: 640px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: bold 16px 'trebuchet MS', sans-serif;
}
#tbi_title a {
display: block;
color: #fff;
text-decoration: none;
}
</style>
Baiklah berikut ini tag html yang dapat membangun Slide Image nya :
Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK
Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste. lihat hasilnya..
<div id="tbi_slider">
<ul>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img src=""https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheJ-zrRHB1tLSr5BLqJTBlnIWRtvixcsaU56NQDtjd2hDOs9Jjp_pv5jnBNO9Zs_qlwGwt0ob8LF3OGPAJnRuh8UYlA9jAPfYeyRjvfjV56efpPpxJZAVttH6-WxpQ-W7kbz3zuMBQajk5/s1600/jquery-modern-logo.jpg" width=180px height=350px alt="Menu Horizontal Slider"/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBVkiMLdO3SPNuJ6evbWCXbXCpr7ODAjO5e8TGVQQLigtvZnVv8YKE-lmK7I4paEX938Cr3GY4akWKg3scBT8ECiJkywsXso2N-EzOB2S3bzwOvFpMBrn3pUKBDnMXt6IwkYl4sHZxoxVT/s1600/logo_css3.png" alt="Menu Horizontal Slider" width=180px height=350px/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEherwVo9anR58d8TMFWAkgRNIJElt-lqcrjNncLnsrpVNtoh9IynNsTzmyeex_ruQTfZgLYh5sK6_Q8wN41O7mP6-fK9BDJgNacgcdgovsRCzGgsmzH6g7SUQTsJFdP0ipGY5oNVgs-lNE-/s1600/Html5LogoIcon.jpg" alt="Menu Horizontal Slider" width=180px height=350px/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img alt="Menu Horizontal Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpJWdB396cxBdpecCNSfpiPRzZsmX6D9keScuHRX9LsakTseSWgOCBVN7xr3JHJfW7LsCphfQFQ5FdC9rnuj4TJb2Xu9cP_g486yE0owEbPk2YSfkhb9B2USEHVzTCkRvF9ffg8Zp8ynh/s1600/w3school.jpg"width=180px height=350px/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img alt="Menu Horizontal Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQ1GKkI-GPCjFkPzSa5gfCGGaniW2GJrDX0prKtREp5sCSDY_TURGygwnDghuupc2FdeeZbojdeWiGu___9xeaFmMBT9IoJGjZNA5_HleN_3WxwwaoxqB8Vwy0W3ve90UwBFGHPoABUrQ/s1600/web_design.jpg"width=180px height=350px/>
</a>
</li>
</ul>
</div>
<ul>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img src=""https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheJ-zrRHB1tLSr5BLqJTBlnIWRtvixcsaU56NQDtjd2hDOs9Jjp_pv5jnBNO9Zs_qlwGwt0ob8LF3OGPAJnRuh8UYlA9jAPfYeyRjvfjV56efpPpxJZAVttH6-WxpQ-W7kbz3zuMBQajk5/s1600/jquery-modern-logo.jpg" width=180px height=350px alt="Menu Horizontal Slider"/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBVkiMLdO3SPNuJ6evbWCXbXCpr7ODAjO5e8TGVQQLigtvZnVv8YKE-lmK7I4paEX938Cr3GY4akWKg3scBT8ECiJkywsXso2N-EzOB2S3bzwOvFpMBrn3pUKBDnMXt6IwkYl4sHZxoxVT/s1600/logo_css3.png" alt="Menu Horizontal Slider" width=180px height=350px/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEherwVo9anR58d8TMFWAkgRNIJElt-lqcrjNncLnsrpVNtoh9IynNsTzmyeex_ruQTfZgLYh5sK6_Q8wN41O7mP6-fK9BDJgNacgcdgovsRCzGgsmzH6g7SUQTsJFdP0ipGY5oNVgs-lNE-/s1600/Html5LogoIcon.jpg" alt="Menu Horizontal Slider" width=180px height=350px/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img alt="Menu Horizontal Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpJWdB396cxBdpecCNSfpiPRzZsmX6D9keScuHRX9LsakTseSWgOCBVN7xr3JHJfW7LsCphfQFQ5FdC9rnuj4TJb2Xu9cP_g486yE0owEbPk2YSfkhb9B2USEHVzTCkRvF9ffg8Zp8ynh/s1600/w3school.jpg"width=180px height=350px/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">JUDUL POST</a>
</div>
<a href="POST LINK">
<img alt="Menu Horizontal Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQ1GKkI-GPCjFkPzSa5gfCGGaniW2GJrDX0prKtREp5sCSDY_TURGygwnDghuupc2FdeeZbojdeWiGu___9xeaFmMBT9IoJGjZNA5_HleN_3WxwwaoxqB8Vwy0W3ve90UwBFGHPoABUrQ/s1600/web_design.jpg"width=180px height=350px/>
</a>
</li>
</ul>
</div>
Adapun File nya dapat dilihat hasilnya dan dapat juga diunduh berikut di bawah ini :
