Membuat Gambar Membesar Saat disentuh Cursor
Diposting oleh Unknown on Rabu, 17 Juli 2013
Mungkin sebagian Blogger sering
melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia
blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects
atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di
senangi para blogger walaupun sebenarnya dengan memasang Image Zoom
Effects ini di blog dapat menggangu pengunjung yang sedang membaca
postingan kita.
Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.
Cara Membuat Gambar Membesar Saat disentuh Cursor :
- Masuk ke akun blogger sobat.
- Pilih Template > Edit HTML.
- Ceklis / Centang Expand Widget Template.
- Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
- Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); } - Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.
Label:
Panduan Blog
Membuat Multi Slide Widget Tanpa Edit HTML
Diposting oleh Unknown on Minggu, 14 Juli 2013
Pada kesempatan kali ini saya akan membahas artikel tentang Cara Membuat Multi Slide Widgate di Blog tanpa edit HTML.
Sahabat blogger mungkin pernah atau sering melihat tutorial ini di blog
yang lain dan bahkan dari sobat mungkin ada yang sudah menggunakan
tutorial ini, namun bagi yang belum pernah memasang widgate ini dan
ingin memasang nya di blog, silahkan ikuti langkah - langkah berikut:
untuk DEMO sobat bisa lihat di sidebar blog ini. atau screen shootnya
seperti gambar dibawah.
Cara Membuat Multi Slide Widgate Tanpa Edit HTML
1. Login ke akun blog2. Menuju dasbor/rancangan pilih Tata Letak
3. Kemudian Add Gadget dan Pilih HTML/Javascript
Selanjutnya silahkan sobat copy kode dibawah ini pada HTML/Javascript
❞ Berikut Kodenya:
<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbCAwIGHaOhctXGV-DF17ZzLL69Ob_4Z_RKRXmtBptWYMs7OKuxM5CyLnkriQxUOsvsn7DJ0_hRv4rCva3AazU5G1z679t-MyFjsVDKfc7EyHbABl7i-XzVIX4wpWspw0sylTs1XH8ayk/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2aEv1Km-Qtq3ekO5PRUyyCW8jEIzJ7a3Y9RnVh3wO7eeR9V8vllhjwYKyNQjVMwgi0vFBDWsnfIt1BSgu_007MeVq4AHrdlhEZjmWHgExxNQv9xn4aEYpaEb5Krqu0-JKCrIXsJZYKE8/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbCAwIGHaOhctXGV-DF17ZzLL69Ob_4Z_RKRXmtBptWYMs7OKuxM5CyLnkriQxUOsvsn7DJ0_hRv4rCva3AazU5G1z679t-MyFjsVDKfc7EyHbABl7i-XzVIX4wpWspw0sylTs1XH8ayk/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2aEv1Km-Qtq3ekO5PRUyyCW8jEIzJ7a3Y9RnVh3wO7eeR9V8vllhjwYKyNQjVMwgi0vFBDWsnfIt1BSgu_007MeVq4AHrdlhEZjmWHgExxNQv9xn4aEYpaEb5Krqu0-JKCrIXsJZYKE8/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>
Keterangan:
❞ Tulisan yang berwarna Orange adalah Judul Widgate
❞ Tulisan yang berwarna merah adalah kode widgate
Silahkan ganti sesuai keinginan anda.
4. Klik simpan, dan lihat hasilnya.
Kode HTML diatas adalah tampilan multi slide widgate berwarna Light, kalau sobat ingin berwarna Dark, silahkan copy kode yang dibawah ini:
❞ Berikut kodenya:
<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiScVNgHARrkCORiJSN37eoHKBjBUJGYH6zZB8c4zZN0dObKDgcKqE6bJeeyXoYFiIGRi0VNqfZsc9hsev506A-WRIs-OtBBKy_YeqsGMwn1MDQnY93UCGtt_ipCFk03R-F58ZXjW1g1qE/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeV83_SUwcyQcUdgSIUcKht2XkmCOForE75l6XQASynfsS1n9HdlOo8NaAE9h2TriYFpoxhlc2JntbDlBx7it6Dqpp8XnkoT7tUVrbHw-Q8kHRKaSiG4Ko_X3htFHTLyygguWouQn_ymY/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiScVNgHARrkCORiJSN37eoHKBjBUJGYH6zZB8c4zZN0dObKDgcKqE6bJeeyXoYFiIGRi0VNqfZsc9hsev506A-WRIs-OtBBKy_YeqsGMwn1MDQnY93UCGtt_ipCFk03R-F58ZXjW1g1qE/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeV83_SUwcyQcUdgSIUcKht2XkmCOForE75l6XQASynfsS1n9HdlOo8NaAE9h2TriYFpoxhlc2JntbDlBx7it6Dqpp8XnkoT7tUVrbHw-Q8kHRKaSiG4Ko_X3htFHTLyygguWouQn_ymY/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>
Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Multi Slide Widgate diblog Tanpa Edit HTML.
referensi ini bang dadan kutif dari
http://www.maskolis.com/2012/12/membuat-menu-accordion-tanpa-edit-html.html.
silahkan kunjungi link tersebut jika ingin melihat langsung kepada
sumbernya. Dan bang dadan ucapkan Selamat mencoba dan Semoga
bermanfaat..!!!
Label:
Panduan Blog
Cara Membuat Tag H1 H2 H3 Agar SEO Friendly
Diposting oleh Unknown
Cara Membuat Tag H1 H2 H3 Agar SEO Friendly. Sahabat blog yang berbahagia, pada kesempatan kali ini bang dadan akan mencoba membahas bagaimana Cara Membuat Tag H1 H2 H3 Agar SEO Friendly .Bagi para master blog yang sudah mahir dalam dunia blogger, mohon
koreksiannya apabila terdapat kesalahan dalam tutorial ini. Agar para
sahabat blogger yang belum tahu bisa memahami dan menerapkannya dengan
baik. dan apalah artinya jika kita mempunyai ilmu tapi kalau ilmu itu
kita tidak amalkan.? otomatis ilmu itu menjadi tidak bermanfaat ya
sob..!!
Baiklah langsung saja pada pembahasan Cara Membuat Tag H1 H2 H3 Agar SEO Friendly, tutorial ini bang dadan kutip dari blognya mas Rudy Hartono, bila soba ingin mengunjungi blognya silahkan klik disini.
Dan bang dadan juga mengucapkan terimakasih kepada beliau yang telah
memberikan ilmu yang bermanfaat khususnya untuk blogger ini.
Cara Membuat Tag H1 H2 H3 Agar SEO Friendly
Tag Heading H1, H2 dan H3? berikut penjelasannya bila sobat belum tahu :
1. Tag Heading H1 = yaitu judul blog/title blog
2. Tag Heading H2 = yaitu judul postingan/artikel
3. Tag Heading H3 = yaitu widget/sidebar
Berikut cara Membuat Heading Tag H1, H2, H3 agar Seo Friendly :
1. Login ke Blogger
2. Klik Rancangan
3. Edit HTML dan *centang Expand Widget Template
A. Cara di bawah ini yaitu menjadikan tag h2 sebagai judul postingan/artikel
1. Cari kode seperti dibawah ini :
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
2. Silahkan sobat ganti tag h3 menjadi h2
3. Selanjutnya cari kode seperti di bawah ini :
<h3 class='mobile-index-title entry-title'> <data:post.title/> </h3>
4. Lalu ubah tag h3 menjadi h2
B. Lanjut dengan merubah Tag Heading pada widget
1. Carilah kode seperti dibawah ini pada template anda :
<!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if>
2 Silahkan anda ganti tag h2 menjadi h3
Tergantung pada banyaknya widget yang ada di homepage sobat, apabila widget anda ada 9 buah, silahkan rubah semuanya untuk menjadikan tag h2 menjadi h3
4. Selesai dan simpan template
2. Tag Heading H2 = yaitu judul postingan/artikel
3. Tag Heading H3 = yaitu widget/sidebar
Berikut cara Membuat Heading Tag H1, H2, H3 agar Seo Friendly :
1. Login ke Blogger
2. Klik Rancangan
3. Edit HTML dan *centang Expand Widget Template
A. Cara di bawah ini yaitu menjadikan tag h2 sebagai judul postingan/artikel
1. Cari kode seperti dibawah ini :
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
2. Silahkan sobat ganti tag h3 menjadi h2
3. Selanjutnya cari kode seperti di bawah ini :
<h3 class='mobile-index-title entry-title'> <data:post.title/> </h3>
4. Lalu ubah tag h3 menjadi h2
B. Lanjut dengan merubah Tag Heading pada widget
1. Carilah kode seperti dibawah ini pada template anda :
<!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if>
2 Silahkan anda ganti tag h2 menjadi h3
Tergantung pada banyaknya widget yang ada di homepage sobat, apabila widget anda ada 9 buah, silahkan rubah semuanya untuk menjadikan tag h2 menjadi h3
4. Selesai dan simpan template
Mungkin sampai disini dulu pembahasan kita kali ini tentang Cara Membuat Tag H1 H2 H3 Agar SEO Friendly. Mudah - mudahan bermanfaat buat sobat semua. sampai jumpa dilain waktu..!!
Label:
Panduan Blog
Cara Membuat Psting Blog Menjadi 2 Kolom
Diposting oleh Unknown on Sabtu, 13 Juli 2013
Cara Membuat Psting Blog Menjadi 2 (Dua) Kolom - sahabat
blogger, sudah sekian lama bang dadan tidak posting artikel tentang
tutorial blogger, nah kali ini bang dadan akan coba membuat artikel
tentang Cara Membuat Psting Blog Menjadi 2 Kolom,
Postingan ini mungkin sudah banyak yang membuat terutama para master
blogger, namun tidak ada salahnya juga bila bang dadan coba membuatnya
kembali, karena ada sebagian sahabat blogger juga yang menanyakan hal
tersebut, maka dari itu pada postingan kali ini akan coba bang dadan
bahas. simak baik - baik ya??
Cara Membuat Psting Blog Menjadi 2 Kolom
- Buka Akun Blogger Anda.
- Masuk ke Dashboard.
- Pilih Menu Template ~> Edit HTML
- Cari Kode ]]></b:skin>
- Copy dan Paste kode dibawah ini dibawah kode ]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper {width:620px;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;}
h2.date-header, .jump-link, .feed-links, .post-footer {display:none;}
#blog-pager {width:98%; clear:both;}
.post {margin:.01em 10px 10px 0;background:none;width:250px;height:200px;float:left; border-bottom:3px double #ddd; positon:relative;overflow:hidden;}
.post-body {margin:0.2em 0 .75em;line-height:1.4em;font-size:13px;color:#111;overflow:hidden;}
.post h3 {height:32px;font-size:15px;font-weight:bold;line-height:1.3em;color:#102D57;text-transform:none;font-family:Arial;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#102D57;}
.post h3 strong, .post h3 a:hover {color:#000;text-decoration:underline;}
</b:if>
</style>
Silahkan sobat Klik Preview untuk melihat tampilan sementara dan apabila
kelihatan sudah sempurna silahkan sobat klik Simpan Template.
Catatan:
- Kode yang Berwarna Biru adalah untuk mengatur Tinggi dari postingan.
- Kode yang Berwarna Merah adalah untuk mengatur Lebar dari postingan.
Mungkin sekian dulu postingan kali ini tentang Cara Membuat Psting Blog Menjadi 2 Kolom.Semoga artikel ini bermanfaat buat anda semua..
Salam blogger.
Salam blogger.
Label:
Panduan Blog
Cara Membuat Daftar Isi Blog Accordion Keren
Diposting oleh Unknown on Rabu, 10 Juli 2013
Cara Membuat Daftar Isi Blog | Accordion Keren - Sahabat blogger pada pembahasan artikel yang lalu bang dadan sudah membuat artikel tentang Cara Membuat Daftar Isi Blog Berdasarkan Label Tertentu, nah pada artikel kali ini bang dadan akan membuat tutorial tentang Cara Membuat Daftar Isi Blog | Accordion Keren.
Sahabat blogger mungkin tidak asing lagi dengan widgate daftar isi
seperti ini, namun jikalau ada sahabat Blog yang baru dan belum tahu
tentang tata cara pembuatan nya, silahkan simak tutorial berikut ini:
Berikut tata cara membuat daftar isi tersebut:
Cara Membuat Daftar Isi Blog | Accordion Keren
- Login ke akun Blog
- Masuk ke dasbor ⇉ Tata letak ⇉ Tambah Gadget ⇉ Pilih HTML/Javascript
- Kemudian Copy dan paste kan kode dibawah ini pada HTML/Javasript
Berikut kodenya:
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQNWd-uZwMIKEb9cKZ4zAndyxkT5IHDxNMl9OcdjgtnbcfSrn-Dyvu4pS8_kv1NW75PyCD47BkoLymeKnOzaoVq6OO5SWAD64BeCj-KcQevuRWkKa3B9sYRepOFEi4_COEVsgnU0URvDg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUc0YK7nAaFSyRyb1tkMxhjborrqI3ASVehSLZAN5R53UoO7AM7WFNoHXea0Q3MhBq-qvJlvfJojfHygH9IENzxvFUzIqONkkWQSFSk7yjZv3zGjK7ewDy1ErrAqEiSBO7qyloRVehKM/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJl60RirOKgkxflPn1pp9kdmPSTFVVUFvdO8mvHWxWSc-JPjRiuHuUFAOSxLiPHpT6uRqvNIGtFoN9_rPuSEdGIfV6dTknBS1u_SFdiLkYaTgEeGlWBmik8oiZJnwVO1paahBBQHspak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://bangdadan.googlecode.com/files/daftar.isi.js" type="text/javascript"></script>
<script src="http://tipstrikomputering.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQNWd-uZwMIKEb9cKZ4zAndyxkT5IHDxNMl9OcdjgtnbcfSrn-Dyvu4pS8_kv1NW75PyCD47BkoLymeKnOzaoVq6OO5SWAD64BeCj-KcQevuRWkKa3B9sYRepOFEi4_COEVsgnU0URvDg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUc0YK7nAaFSyRyb1tkMxhjborrqI3ASVehSLZAN5R53UoO7AM7WFNoHXea0Q3MhBq-qvJlvfJojfHygH9IENzxvFUzIqONkkWQSFSk7yjZv3zGjK7ewDy1ErrAqEiSBO7qyloRVehKM/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJl60RirOKgkxflPn1pp9kdmPSTFVVUFvdO8mvHWxWSc-JPjRiuHuUFAOSxLiPHpT6uRqvNIGtFoN9_rPuSEdGIfV6dTknBS1u_SFdiLkYaTgEeGlWBmik8oiZJnwVO1paahBBQHspak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://bangdadan.googlecode.com/files/daftar.isi.js" type="text/javascript"></script>
<script src="http://tipstrikomputering.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
Keterangan:
◉ Silahkan sobat ganti http://tipstrikompuering.blogspot.com dengan URL blog sobat.
◉ results=1000 adalah jumlah daftar isi yang ingin di tampilkan
◉ tips%20trick adalah label anda, silahkan sobat ganti tiga point tersebut sesuai data blog sobat.
- Kemudian klik simpan
Sobat juga bisa membuatnya di postingan, caranya sebagai berikut:
- Entri Baru ⇉ Klik HTML/disamping Compose
- Taruh Script Kodenya pada Mode HTML tersebut
- Terus Publikasikan deh. selesai..!!!
Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Daftar Isi Blog | Accordion Keren.
dan semoga artikel ini bermanfaat buat sahabat blogger semua..
terimakasih sampai berjumpa lagi dilain waktu. Salam ◉ Damai Kami
Sepanjang Hari ◉.
Label:
Panduan Blog
Backup dan Restore konfigurasi Mikrotik
Diposting oleh Unknown
Hai kawan , Bayangkan jika tiba-tiba konfigurasi mikrotik kita
ada yang merubah baik disengaja maupun tidak, atau bahkan router
mikrotik nya jebol/mati. berapa lama waktu yang dibutuhkan ketika harus
melakukan konfigurasi ulang lagi dari awal. Jika kita punya backup konfigurasi mikrotik, maka hal tersebut bisa dihindari, tinggal drag and drop kemudian klik restore, maka router mikrotik akan berjalan lagi seperti biasa.
Langkah-langkah backup konfigurasi mikrotik.
Konfigurasi dalam router mikrotik dapat di backup dan disimpan untuk digunakan dikemudian hari jika terjadi hal-hal seperti yang disebutkan diatas. Ada 2 jenis backup di dalam mikrotik :
1. Binary file – file backup berekstensi .backup
- Tidak dapat dibaca
- menciptakan return-point, seperti system restore nya windows yang akan mengembalikan setting ke titik tertentu.
2. Script file – file backup berekstensi .rsc
- berupa scrip yang dapat dibaca dan diedit
- Tidak mengembalikan konfigurasi seperti semula, akan tetapi menambahkan konfigurasi sesuai yang ada di dalam script.
Klik Menu Files di winbox, selanjutnya keluar tampilan seperti dibawah ini.
Tombol Backup digunakan untuk membuat backup dari kondisi kondisi router yang saat ini sedang berjalan. Setelah anda menekan tombol backup, secara otomatis akan terbentuk suatu file dengan format : IDENTITAS_ROUTERS-TANGGAL-JAM yang berekstensi .backup

Langkah-langkah backup konfigurasi mikrotik.
Konfigurasi dalam router mikrotik dapat di backup dan disimpan untuk digunakan dikemudian hari jika terjadi hal-hal seperti yang disebutkan diatas. Ada 2 jenis backup di dalam mikrotik :
1. Binary file – file backup berekstensi .backup
- Tidak dapat dibaca
- menciptakan return-point, seperti system restore nya windows yang akan mengembalikan setting ke titik tertentu.
2. Script file – file backup berekstensi .rsc
- berupa scrip yang dapat dibaca dan diedit
- Tidak mengembalikan konfigurasi seperti semula, akan tetapi menambahkan konfigurasi sesuai yang ada di dalam script.
Klik Menu Files di winbox, selanjutnya keluar tampilan seperti dibawah ini.
Tombol Backup digunakan untuk membuat backup dari kondisi kondisi router yang saat ini sedang berjalan. Setelah anda menekan tombol backup, secara otomatis akan terbentuk suatu file dengan format : IDENTITAS_ROUTERS-TANGGAL-JAM yang berekstensi .backup

File backup tersebut bisa disimpan di dalam komputer agar bisa digunakan sewaktu-waktu dengan cara drag and drop.
Untuk melakukan restore konfigurasi mikrotik yang pernah disimpan, bisa menggunakan tombol Restore yang ada disebelah tombol backup. Tombol ini akan aktif jika kita sudah memilih salah satu file backup yang akan di restore.
Kemudian langkah yang kedua yaitu dengan menggunakan export/import berupa script yang berekstensi .rsc,
- Import akan menyimpan konfiurasi dalam bentuk script yang dapat dibaca dan diedit.
- Export akan menjalankan perintah yang terdapat dalam script.
- Import/export dapat digunakan untuk membackup sebagian konfigurasi
- Import/export hanya dapat dilakukan melalui terminal konsole atau putty.
Misal kita akan membackup konfigurasi IP address dan file backupnya diberi nama daftar-ip.src. Langkah yang perlu kita lakukan adalah masuk ke menu IP address melalui konsol kemudian ketik perintah berikut.
Hasil dari perintah diatas adalah akan terbentuk satu script di dalam file list winbox yaitu daftar-ip.rsc

Untuk melakukan restore konfigurasi mikrotik yang pernah disimpan, bisa menggunakan tombol Restore yang ada disebelah tombol backup. Tombol ini akan aktif jika kita sudah memilih salah satu file backup yang akan di restore.
Kemudian langkah yang kedua yaitu dengan menggunakan export/import berupa script yang berekstensi .rsc,
- Import akan menyimpan konfiurasi dalam bentuk script yang dapat dibaca dan diedit.
- Export akan menjalankan perintah yang terdapat dalam script.
- Import/export dapat digunakan untuk membackup sebagian konfigurasi
- Import/export hanya dapat dilakukan melalui terminal konsole atau putty.
Misal kita akan membackup konfigurasi IP address dan file backupnya diberi nama daftar-ip.src. Langkah yang perlu kita lakukan adalah masuk ke menu IP address melalui konsol kemudian ketik perintah berikut.
[admin@LAB-Mikrotik-1] /ip address> export file=daftar-ip.rscHasil dari perintah diatas adalah akan terbentuk satu script di dalam file list winbox yaitu daftar-ip.rsc

contoh kedua, misalnya kita ingin membackup semua konfigurasi di dalam mikrotik, caranya :
Untuk menggunakan atau me restore konfigurasi yang berupa script dengan extensi .rsc, kita bisa menggunakan perintah import. Misal kita ingin merestore ip address yang telah kita backup diatas dengan nama file daftar-ip.rsc. caranya :
Jadi mulai sekarang jangan sampe lupa lagi backup ya biar ga pusing klo ada masalah atau salah setting, tinggal restore sajah setingan mikrotik sebelumnya
[admin@LAB-Mikrotik-1] > export file=backup-semua.rscUntuk menggunakan atau me restore konfigurasi yang berupa script dengan extensi .rsc, kita bisa menggunakan perintah import. Misal kita ingin merestore ip address yang telah kita backup diatas dengan nama file daftar-ip.rsc. caranya :
[admin@LAB-Mikrotik-1] > import daftar-ip.rsc
Opening script file daftar-ip.rsc
Script file loaded successfullyfailure: already have such addressJadi mulai sekarang jangan sampe lupa lagi backup ya biar ga pusing klo ada masalah atau salah setting, tinggal restore sajah setingan mikrotik sebelumnya
Label:
Komputer,
Networking
Definisi dan Manfaat Google Webmaster Tools
Diposting oleh Unknown
Definisi dan Manfaat Google Webmaster Tools - Sahabat blogger, kali ini bang dadan akan coba membuat artikel tentang Definisi dan Manfaat Google Webmaster Tools,
artikel ini mungkin sudah banyak yang posting oleh sahabat blogger yang
lain, biasanya yang telah lama dalam bergelut dalam dunia blogger.
Namun mungkin ada juga sebagian dari sahabat yang belum tahu khususnya
blogger pemula, oleh karena itu kita coba bahas saja apa sih pengertian dan manfaat google webmaster tools untuk blog?
Dan sebelum kita melangkah lebih jauh tentang penggunaan daripada menu - menu yang ada pada google webmaster tools, alangkah baiknya sahabat mengenal dasarnya dulu dana webmaster tools ini seperti Definisi dan Manfaat Google Webmaster tools.
Dan sebelum kita melangkah lebih jauh tentang penggunaan daripada menu - menu yang ada pada google webmaster tools, alangkah baiknya sahabat mengenal dasarnya dulu dana webmaster tools ini seperti Definisi dan Manfaat Google Webmaster tools.
Definisi / Pengertian Webmaster Tools
Webmaster Tool merupakan alat yang disediakan oleh google untuk para
webmaster, dengan tools ini anda bisa menikmati berbagai fitur yang akan
meningkatkan performa website/blog anda, dari segi link, backlink
ataupun keywordnya pada seacrh engine google.
Dalam webmaster tools anda bisa mengecek query keyword pada website
anda, populer atau keyword apa yang sering muncul pada website anda,
hingga internal linking dari website anda maupun link dari website lain
ke website anda (backlink).
Selain itu google webmaster tools juga bisa membuat website anda
memiliki halaman yang terstruktur, sehingga googlebot lebih mengerti
halaman mana yang lebih diprioritaskan untuk di index.
Anda juga bisa menentukan halaman mana yang anda izinkan untuk di index
dan mana halaman yang tidak anda izinkan untuk di index, dengan
menggunakan metode robots.txt anda bisa dengan mudah membuat peraturan
untuk mesin pencari google.
Selain itu anda juga bisa menentukan target website anda, jika berbahasa
indonesia ya target uatamanya merupakan warga indonesia atau malaysia
yang masih mengerti bahasa indonesia tentunya. [idgoweb]
Manfaat / Fungsi Google Webmaster Tools
Google Wemaster Tool dapat anda akses melalui web resmi google dibawah ini :
Ok Sobat, mungkin berikut Manfaat pentingdaripada Google Webmaster tools tersebut, bang dadan kutif dari blog [dapur tutorial] dan berikut penjelasan nya:
1. Search queries
Untuk mengetahui Informasi pencarian terhadap blog Anda melalui Google
2. links to your site/inbound links
Untuk mengetahui tautan yang menuju blog Anda
3. Sitemap
Untuk Mengetahui dan membuat Informasi adanya peta situs
4. Crawl errors
Untuk mengetahui informasi kesalahan-kesalahan pada blog Anda dan anda juga dapat menghapus URL Eror yang terindex google
5. Keywords
Untuk mengetahui informasi mengenai kata kunci teraktif terhadap blog Anda
Nah mungkin sekilas pembahasan daripada Definisi dan Manfaat Google Webmaster Tools yang bang dadan kutip dari sahabat - sahabt blogger yang lain. Dan semoga artikel ini bermanfaat untuk anda semua.
Terimakasih..!!!
Label:
Panduan Blog
Definisi dan Manfaat Robot TXT untuk Blog
Diposting oleh Unknown
Untuk penggunaan fitur ini google sendiri memberi peringatan agar
berhati - hati dalam menggunakan fitur robot.txt / Peryapan dan
pengindeksan ini. sebagaimana peringatan yang ada dalam menu robot.txt
ini adalah :
"Peringatan! Gunakan dengan hati-hati. Penggunaan yang tidak tepat dari fitur tersebut dapat mengakibatkan blog Anda diabaikan oleh mesin telusur".
Jadi google sendiri menjelaskan bahwa ada pengaruh terhadap mesin telusur, search engine google.
Nah, untuk dalam postingan ini bang dadan akan coba menjelaskan terlebih dahulu Definisi dan Manfaat Robot.txt untuk Blog, sebelum nanti kita menggunakan robot.txt yang benar. Berikut penjelasan tentang :
Definisi dan Manfaat Robot Txt untuk Blog
A. Definisi Robot.Txt untuk Blog
Robots.txt adalah Sebuah file dengan sebuah fungsi yang di
gunakan untuk membatasi akses robot mesin pencari (Search engine misal :
Google,Bing,Yahoo) yang sedang menjelajahi atau membuka situs web yang
anda miliki . Sebelum mereka mejelajahi halaman web, mereka memeriksa
terlebih dahulu untuk melihat apakah sebuah file robots.txt ada ataukah
tidak , dan di dalam robots.txt ada perintah (command) yang mencegah
mereka mengakses untuk halaman tertentu.
Kita memerlukan robots.txt agar robot-robot itu tidak mengindex halaman
di search engine (Google,yahoo,Bing) yang tidak kita inginkan , karena
mungkin ada beberapa halaman web yang tidak ingin di index oleh search
engine. Dan jika kita ingin semua content di web kita di index oleh
mesin pencari kita tidak membutuhkan robots.txt . [Afeef go Blogs]
B. Manfaat Robot.TXT untuk Blog
Dalam hal optimasi SEO,
kemampuan Robots.txt yang dapat mengarahkan spider bot mengcrawling
halaman yang ditargetkan bisa kita manfaatkan untuk mengarahkan spider
bot pada halaman penting seperti halaman konten agar konten tersebut
cepat terindex oleh search engine.
Saat spider bot memutuskan untuk mengcrawl situs, situs akan kehilangan
bandwidth dalam jumlah yang tidak sedikit. Bila beberapa directory
tertentu misal pada directory search kita batasi aksesnya maka ini akan
menghemat bandwidth dan kegagalan spider bot dalam mengcrawl blog kita
karena akses situs yang kurang baik akan teratasi sehingga spider bot
bisa dengan leluasa merayapi seluruh isi konten sampai tuntas.
Di lain sisi bila halaman index yang di dapat search engine pada sebuah
situs dinilai sangat berkualitas maka situs tersebut akan memiliki
peluang besar untuk masuk halaman pertama. Hal ini akan berbeda jauh
hasilnya dibandingkan dengan situs yang memiliki banyak halaman index
namun dengan konten yang kurang berkualitas dan cenderung hanya
menampilkan banyak link didalamnya contonya situs AGC. [Nurulcall].
Nah setelah membaca artikel diatas, mudah - mudahan sobat sudah tau sedikitnya tentang Definisi dan Manfaat Robot TXT untuk Blog, jadi silahkan sobat gunakan baik - baik pitur Perayapan dan Pengindeksan google itu melalui robot.txt.
Semoga artikel ini bermanfaat buat para blogger semua, bang dadan
ucapkan terimakasih kepada sahabat blogger yang sudah share baik definisi atau manfaat dari robot.txt tersebut. dan apabila diantara sobat ada yang mau memasang Kode Robot.txt ini silahkan kunjungi artikel tentang Cara Memasang Kode Robot.txt yang baik. Terimakasih dan sampai jumpa..!!!
Label:
Panduan Blog
Cara Memasang Kode Robot.txt yang Baik
Diposting oleh Unknown
Cara Memasang Kode Robot.txt yang Baik - Sahabat blogger, pada postingan yang lalu bang dadan telah membahas artikel tentang Definisi dan Manfaat Robot.txt untuk Blog, bagi sobat yang belum mengetahui informasi seputar robot.txt bisa sobat lihat disini. Nah menyambung artikel terdahulu kali ini bang dadan akan coba membahas Cara Memasang Kode Robot.txt yang Baik,
pemasangan Robot.txt mungkin setiap blogger berbeda - beda tergantung
kepercayaan nya masing-masing, namun dalam artikel ini bang dadan akan
berikan kode Robot.txt yang selama ini bang dadan gunakan di blog ini.
Baiklah kawan tidak usah panjang lebar lagi kita langsung pada tahap pemasangan kode Robot.txt di blog:
KODE ROBOT.TXT
CARA PEMASANGAN PADA BLOGSPOT
1. Silahkan login ke blog
User-agent: *Keterangan: "Ganti URL yang berwarna merah itu dengan URL blog anda".
Disallow:
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow:
Sitemap: http://www.tipstrikomputering.blogspot.com/feeds/posts/default?orderby=updated
CARA PEMASANGAN PADA BLOGSPOT
1. Silahkan login ke blog
2. Masuk ke rancangan/dasbor
3. Pilih menu Setelan
4. Klik submenu Preferensi Penelusuran
maka sobat akan menemui gambar seperti dibawah ini:
![]() |
| Sumber gambar: blogger.com klik gambar untuk memperbesar |
5. Lihat gambar yang dilingkari merah, dan silahkan sobat klik Edit
6. Masukan Kode Robot.txt yang di atas kesana
7. Selanjutnya klik simpan
8. Selesai
Tambahan:
Agar Robot.txt dapat merayapi blog anda dengan baik selaras, serasi dan seimbang dengan Webmaster Tools, silahkan tambahkan kode dibawah ini, dan tempatkan di bawah tag <head> pada tempalte edit html.
Tambahan:
Agar Robot.txt dapat merayapi blog anda dengan baik selaras, serasi dan seimbang dengan Webmaster Tools, silahkan tambahkan kode dibawah ini, dan tempatkan di bawah tag <head> pada tempalte edit html.
<meta content='INDEX, FOLLOW' name='GOOGLEBOT'/>
<meta content='index, follow, all' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='all' name='msnbot'/>
<meta content='all' name='Googlebot-Image'/>
Sekian dulu pembahasan kita kali ini tentang Cara Memasang Kode Robot.txt yang Baik, semoga artikel ini dapat bermanfaat buat para blogger semua. terimakasih dan tetap semangat..!!
Label:
Panduan Blog
Setting Modem 3G dengan berbagai Kartu
Diposting oleh Unknown
Cara Setting MODEM 3G dengan Kartu Telkomsel, XL, 3, AXIS, IM3. Pokoknya apapun yang modem yang memakai software Mobile Partner, bisa di setting disini.
Oke langsung saja berikut prosedur Tips Cara Setting 3G Modem Vodafone dengan Kartu Telkomsel, XL, 3, AXIS, IM3 :
- Pertama pasang kartu yang sudah anda tukarkan paket unlimitednya pada modem Vodafone yang telah anda beli.
- Masukkan/colokkan modem Vodafone pada port USB laptop / PC anda. Setelah itu akan muncul perintah install mobile partner, Oke kan saja, next >> next saja hingga install modem Vodafone finish.
- Setelah itu jalankan program Mobile Partner yang sudah ter install tadi, berikut tampilannya :
Gambar Mobile Partner
- Pada jendela menu, pilih Tools >> Option >> Profile Management dan masukkan data settingan seperti gambar berikut ini :
Gambar Settingan Modem Vodafone pada kartu Telkomsel Unlimited
- Setelah itu klik Save. Contoh settingan diatas adalah untuk Kartu Telomsel (AS / Simpati) Flash Unlimited dan untuk settingan kartu – kartu operator yang lain anda tinggal merubah data di atas dengan dibawah ini :
- Setting Modem Vodafone Untuk Kartu XL Unlimited :
Profile Name : XL (Bisa Yang lain karena hanya nama profile)
APN : Pilih Static dan isikan : xlunlimited
Access Number : *99#
User Name : (Kosongkan Saja)
Password : (Kosongkan Saja)
- Setting Modem Vodafone Untuk Kartu 3 (three) :
Profile Name : 3data (Terserah anda)
APN : Pilih Dynamic
Access Number : *99#
User Name : 3data
Password : 3data
- Setting Modem Vodafone Untuk Kartu AXIS :
Profile Name : Axis
APN : Pilih Static dan isikan : axis
Access Number : *99#
User Name : (Kosongkan Saja)
Password : (Kosongkan Saja)
- Setting Modem Vodafone Untuk Kartu IM3 :
Profile Name : IM3
APN : Pilih Static dan isikan : www.indosat-m3.net
Access Number : *99#
User Name : (Kosongkan Saja)
Password : (Kosongkan Saja)
- Kemudian kita setting 3G pada modem Vodafone / mobile partner tapi dengan sedikit catatan sinyal 3G sudah ada ditempat anda dan kartu yang anda gunakan sudah support 3G.
Baik
dengan cara klik Network kemudian ubah Network Tipe menjadi WCDMA only
lalu Apply seperti gambar di bawah ini : (tapi jika sinyal 3G tidak
stabil ditempat anda sebaiknya pilih WCDMA Preferred)
Gambar Setting 3G pada Modem Vodafone Mobile Partner
Setelah
itu pilih Registration Mode >> Manual Search and Register
>> Refresh lalu pilih kartu yang anda pakai dan klik Register
berikut tampilannya :
Gambar Setting Register 3G pada Modem Vodafone Mobile Partner
- Setelah sukses Ok. Dan sekarang anda bisa mengkoneksikan modem anda dengan klik Connect pada jendela Connection
- Good Luck !!! semoga tips Cara Setting 3G Modem Vodafone dengan Kartu Telkomsel, XL, 3, AXIS, IM3 diatas bisa sedikit membantu anda.
Label:
Networking













