19.56
latihan_blogger
This is featured post 1 title
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.
This is featured post 2 title
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.
This is featured post 3 title
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.
Minggu, 09 Oktober 2016
Cara Mudah Membuat Slide Show Foto di Blog
Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.
Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.
Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 100%;
height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 100%;
height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>
5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.
Senin, 03 Oktober 2016
cara membuat menu dropdown
copykan program ini di atas <body>
<style type='text/css'>
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>
copykan kode program ini dibawah </header>
<!-- Mulai Area Menu -->
<nav id='menu'>
<input type='checkbox'/>
<label>=Navigation</label>
<ul>
<li><a class='home' href='/'>Home</a></li>
<li><a href='#'>Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class='sub' href='#'>Kamar AC</a>
<ul class='menus'>
<li><a href='#' title='Menus'>Kamar 1</a></li>
<li><a href='#'>Kamar 2</a></li>
<li><a href='#'>Kamar 3</a></li>
<li><a href='#'>Kamar 4</a></li>
<li><a href='#'>Kamar 5</a></li>
<li><a href='#'>Kamar 6</a></li>
</ul>
</li>
<li><a class='sub' href='#'>Kamar Non AC</a>
<ul class='menus'>
<li><a href='#' title='Menus2'>Kamar 7</a></li>
<li><a href='#'>kamar 8</a></li>
<li><a href='#'>Kamar 9</a></li>
<li><a href='#'>Kamar 10</a></li>
<li><a href='#'>Kamar 11</a></li>
<li><a href='#'>Menus 12</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->
</ul>
</nav>
<!-- Area Menu Selesai-->
<style type='text/css'>
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>
copykan kode program ini dibawah </header>
<!-- Mulai Area Menu -->
<nav id='menu'>
<input type='checkbox'/>
<label>=Navigation</label>
<ul>
<li><a class='home' href='/'>Home</a></li>
<li><a href='#'>Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class='sub' href='#'>Kamar AC</a>
<ul class='menus'>
<li><a href='#' title='Menus'>Kamar 1</a></li>
<li><a href='#'>Kamar 2</a></li>
<li><a href='#'>Kamar 3</a></li>
<li><a href='#'>Kamar 4</a></li>
<li><a href='#'>Kamar 5</a></li>
<li><a href='#'>Kamar 6</a></li>
</ul>
</li>
<li><a class='sub' href='#'>Kamar Non AC</a>
<ul class='menus'>
<li><a href='#' title='Menus2'>Kamar 7</a></li>
<li><a href='#'>kamar 8</a></li>
<li><a href='#'>Kamar 9</a></li>
<li><a href='#'>Kamar 10</a></li>
<li><a href='#'>Kamar 11</a></li>
<li><a href='#'>Menus 12</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->
</ul>
</nav>
<!-- Area Menu Selesai-->
Senin, 19 September 2016
Cara Menyembunyikan postingan
Cara Menyembunyikan Posting Blog di Halaman Depan
MUNGKIN ada blogger yang ingin postingnya hanya muncul di halaman dalam (Single Page/Single Post). Di halaman daftar tulisan itu tidak muncul, diganti dengan widget lain, misalnya full gambar atau Ghost Button.
Cara Menyembunyikan Posting Blog di Halaman Depan Blog.
1. Template > Edit HTML
2. Copas atau Simpan kode berikut ini di bawah kode ]]>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
.post, #blog-pager {display:none;}
</style>
</b:if>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
body#layout .sidebar {display:inline;margin-top:200px;}
</style>
</b:if>
Jika ingin mengilangkan sidebar widgetnya juga, ini kodenya:
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
.post, .sidebar, #blog-pager {display:none;}
</style>
</b:if>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
body#layout .sidebar {display:inline;margin-top:200px;}
</style>
</b:if>
MUNGKIN ada blogger yang ingin postingnya hanya muncul di halaman dalam (Single Page/Single Post). Di halaman daftar tulisan itu tidak muncul, diganti dengan widget lain, misalnya full gambar atau Ghost Button.
Cara Menyembunyikan Posting Blog di Halaman Depan Blog.
1. Template > Edit HTML
2. Copas atau Simpan kode berikut ini di bawah kode ]]>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
.post, #blog-pager {display:none;}
</style>
</b:if>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
body#layout .sidebar {display:inline;margin-top:200px;}
</style>
</b:if>
Jika ingin mengilangkan sidebar widgetnya juga, ini kodenya:
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
.post, .sidebar, #blog-pager {display:none;}
</style>
</b:if>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
body#layout .sidebar {display:inline;margin-top:200px;}
</style>
</b:if>
Minggu, 18 Oktober 2015
Lagu Pop Indonesia
ALBUM NICKY ASTRIA
Download Free
- Jarum Neraka
- Misteri Cinta
- Bias Sinar
- Lentera Cinta
- Panggung Sandiwara
ALBUM WALI
Download Free
- DIK
- Cari Jodoh
- Jomblo
- Yank
- Aku Bukan Bang Toyib