Tutorial Blogger: Juli 2011

Minggu, 31 Juli 2011

Cara buat menu dengan efek image sliding down

Minggu, 31 Juli 2011 | 22.57

Noercholis

9 comments

Menu ini sangat cocok digunakan pada web dan blog untuk berbisnis. Sebab dari segi tampilan memang menu ini tampak sangat elegan, sehingga dengan menu ini web atau blog kita akan lebih bagus dan lebih mantab untuk menawarkan sebuah produk.
Tapi tentunya bukan hanya untuk berbisnis saja, blog yang bergerak dibidang yang lain juga tetap lebih menarik jika menggunakan menu ini. Yang jelas intinya menu dengan efek image sliding down ini bisa kita manfaatkan sebagai penunjang yang menggambarkan tentang web ataupun blog kita.

Cara bekerja menu dengan efek image sliding down ini sangat ringan, sebab tidak menggunakan jQuery, melainkan hanya menggunakan fitur CSS, dan beberapa kode HTML.

LIHAT DEMO

Bila anda berminat dengan menu ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

.menu-slide-cbwg{
position:relative;
width:900px;
height:350px;
margin:auto;
overflow:hidden;
background:#000;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_mg_jiZUk5HHFnAwUquRxUpU9QTLGnOheuBCknoXhswwFoGLNTk9Ak8s0MzOh-G68cn255Mnmv0SuhHDiRbLGaZv1axGX1q7OttyTzqpiTaK6ICC85f5kAue696KW7NjFurCqsqbLIGM/s900/background-image.jpg) no-repeat bottom right;
background-repeat:no-repeat;
background-position:50% 50%;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px 4px 4px 4px;
}

.titel-menu-slide-cbwg{
display: block;
position:absolute;
width:100%;
float: left;
margin:30px 360px 10px ;
font-size:70px;
cursor:pointer;
text-shadow:1px 1px 1px #000;
text-decoration:none;
font-weight:bold;
color:#339025;
z-index:999999;
}

.titel-menu-slide-cbwg a:link {
color:#339025;
text-decoration:none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}

.titel-menu-slide-cbwg a:visited {
color:#339025;
text-decoration:none;
}

.titel-menu-slide-cbwg a:hover {
color:#C3E9A4;
text-decoration:none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}

ul#menu-slide-cbwg {
display:inline;
list-style: none;
z-index:999999;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}

ul#menu-slide-cbwg li {
width:180px;
float:left;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}

ul#menu-slide-cbwg li a:hover{
position:relative;
height:350px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
border:1px solid #bbb;
}

ul#menu-slide-cbwg a {
display: block;
position:relative;
width:100%;
height:40px;
background-repeat:no-repeat;
background-position:50% 50%;
text-decoration:none;
text-align:center;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}

ul#menu-slide-cbwg a span{
text-align:center;
font-size:20px;
line-height:40px;
margin-top:0px;
margin-top:310px;
cursor:pointer;
text-shadow:0px 0px 1px #000;
text-decoration:none;
color:#fff;
background-color:#488040;
border-top:1px solid #fff;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
display: block;
width: 180px;
font-size:14px;
font-weight:bold;
color:#fff;
}

ul#menu-slide-cbwg li a span:hover{
font-size:14px;
color:#4152A7;
background-color:#eee;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
</style>

8. Copy kode dibawah ini dan paste setelah kode diatas :

Catatan :

Teks merah adalah ULR Gambar atau foto yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Gambar atau foto sesuai dengan menu yang anda buat.

9. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal menaruh Slide Menu vertikal pada sidebar. Ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="menu-slide-cbwg" class="menu-slide-cbwg">
<div class="titel-menu-slide-cbwg"><a href="ULR BLOG">NAMA BLOG</a></div>
<ul id="menu-slide-cbwg">
<li class="item-1">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a>
</li>

<li class="item-2">
<a href="ULR HALAMAN"><span>JUDUL MENU 2</span></a>
</li>

<li class="item-3">
<a href="ULR HALAMAN"><span>JUDUL MENU 3</span></a>
</li>

<li class="item-4">
<a href="ULR HALAMAN"><span>JUDUL MENU 4</span></a>
</li>

<li class="item-5">
<a href="ULR HALAMAN"><span>JUDUL MENU 5</span></a>
</li>
</ul>
</div>

Catatam :

Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas.
Teks warna MERAH ganti dengan ULR HALAMAN anda.
Teks warna PINK ganti dengan JUDUL MENU milik anda.

11.SIMPAN TEMPLATE.
Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Ping your blog, website, or RSS feed for Free

Jumat, 29 Juli 2011

Cara buat web lebih interaktif

Jumat, 29 Juli 2011 | 06.51

Noercholis

No comments

Cara buat web gratis untuk mengembangkan usaha menggunakan blogspot blogger, lebih interaktif dengan pengunjung. Selain pengunjung bisa langsung berkomentar atau bertanya tentang produk yang kita tawarkan, kita juga bisa langsung bisa menjawab komentar ataupun pertanyaan yang diajukan oleh pengunjung tentang produk yang kita tawarkan tadi. Dan pengunjung juga bisa berlangganan update produk terbaru dari setiap produk terbaru yang kita posting.

Lebih dari pada itu tampilan template juga bisa kita sesuaikan dengan kebutuhan usaha kita. Sangat banyak sekali situs yang menyediakan beragam template, baik template yang berbasis profesional bisnis ataupun template yang bisa kita gunakan sekedar untuk blogging. Tapi yang jelas secara fungsi, template - template tersebut memang dirancang untuk sebuah blog. Bedanya template untuk website bisnis tampil lebih profesional. Dan kesemuanya kita tinggal pilih template sesuka kita serta menggunakannya secara gratis.

Anda bisa lihat web gratis dengan menggunakan blogspot dari blogger yang saya gunakan untuk pengembangan usaha saya yaitu www.rambakjogja.com. Dan tampilan template yang saya gunakan juga tampak lebih profesional. Apalagi saya sudah mengganti domainnya, dari www.rambakjogja.blogspot.com menjadi www.rambakjogja.com.
Bagaimana menurut anda? dari tampilan dan namanya, website saya ini lebih mantab kan?.

Untuk mengganti subdomain blogspot menjadi "dot com", tentu harus berbayar dengan membeli domain "dot com". Dan waktu itu saya beli domain, sudah satu paket kostum domain sekalian dengan harga Rp.95.000,- per tahun. Jadi saya tinggal seting ubah sesuaikan pada blogspot, tanpa harus repot seting DNS.

Tapi bila anda memang menginginkan website yang anda buat betul - betul gratis, anda bisa gunakan domain co.cc. Dan seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis.

Intinya untuk membuat sebuah website, kita tidak harus keluar uang. Yang terpenting interaksi kita dengan pengunjung lebih dekat, sehingga secara tidak langsung pengunjung akan lebih percaya dengan produk yang kita tawarkan. OK....!!.

Nah sekarang mari kita mulai langkah - langkahnya, dan cara ini sudah berulang kali saya tulis dan saya posting. Silahkan anda ikuti tahap demi tahap urutan poin dibawah ini :
1. Cara dapat domain gratis
2. Cara dapat hosting gratis
3. Cara seting domain gratis dihosting gratis
4. Cara dapat template gratis
5. Cara Upload Template gratis

Apabila langkah - langkah diatas ada yang masih belum anda pahami, anda bisa gunakan fasilitas chat box yang ada disamping untuk bertanya. Saya akan bantu anda semampu yang saya bisa.... OK !!.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Jumat, 22 Juli 2011

Cara buat Slide Menu vertikal

Jumat, 22 Juli 2011 | 08.30

Noercholis

11 comments

Dilihat dari tampilan dan efek slidding yang muncul, Slide Menu vertikal ini tidak beda dengan tampilan menu accordion. Efek slidding pada menu vertikal ini menampilkan sebuah ikon sesuai dengan menu yang dituju. Sehingga akan tampak lebih indah bila anda menggunakan Slide Menu vertikal ini pada web ataupun blog anda. Cara pembuatannya sangat mudah, yaitu menggunakan fitur CSS dan beberapa kode HTML. Dan anda tinggal menyisipkan sedikit kode CSS tersebut pada template blog anda, dan sedikit kode HTML pada sidebar blog anda.

LIHAT DEMO

OK..., bila anda berminat memasang Slide Menu vertikal ini pada blog anda, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

ul#Slide-Menu-vertikal-cbwg li {
    width: 200px;
    display:inline;
    margin:0;
    padding:0;
}

ul#Slide-Menu-vertikal-cbwg li a {
    display: block;
    position:relative;
    width: 200px;
    height: 25px;
    background-color:#aaa;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #aaa;
    text-decoration:none;
    text-align:center;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin:0;
    padding:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}

ul#Slide-Menu-vertikal-cbwg li a:hover{
    background-color:#fff;
    border:1px solid #bbb;
    padding-top: 80px;
}

ul#Slide-Menu-vertikal-cbwg li a span{
    background: -moz-linear-gradient(center top, #fff 0%,#bbb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb),color-stop(1, #fff));
    border-top:2px solid #bbb;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    display: block;
    width: 200px;
    height: 25px;
    font-size:14px;
    font-weight:bold;
    color:#000;
    margin:0;
    padding:0;
}

ul#Slide-Menu-vertikal-cbwg li a span:hover{
    text-decoration:none;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    color:#40954E;
    background-color:#eee;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>

8. Copy kode dibawah ini dan paste setelah kode diatas :

Catatan :

Teks merah adalah ULR Icon yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda buat.
Sebagai refrensi, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons/
Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.

9. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal menaruh Slide Menu vertikal pada sidebar. Ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<ul id="Slide-Menu-vertikal-cbwg">
<li class="ITEM 1">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a>
</li>

<li class="ITEM 2">
<a href="ULR HALAMAN"><span>JUDUL MENU 2</span></a>
</li>

<li class="ITEM 3">
<a href="ULR HALAMAN"><span>JUDUL MENU 3</span></a>
</li>

<li class="ITEM 4">
<a href="ULR HALAMAN"><span>JUDUL MENU 4</span></a>
</li>

<li class="ITEM 5">
<a href="ULR HALAMAN"><span>JUDUL MENU 5</span></a>
</li>

<li class="ITEM 6">
<a href="ULR HALAMAN"><span>JUDUL MENU 6</span></a>
</li>

<li class="ITEM 7">
<a href="ULR HALAMAN"><span>JUDUL MENU 7</span></a>
</li>

<li class="ITEM 8">
<a href="ULR HALAMAN"><span>JUDUL MENU 8</span></a>
</li>
</ul>

Catatam :

Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas.
Teks warna MERAH ganti dengan ULR HALAMAN anda.
Teks warna PINK ganti dengan JUDUL MENU milik anda.

11.SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Minggu, 17 Juli 2011

Cara buat slide show Carousel

Minggu, 17 Juli 2011 | 22.56

Noercholis

32 comments

Menambah lagi koleksi slide show, dan slide ini menggunakan efek Carousel atau berputar seperti komedi putar. selain berfungsi untuk menampilkan gambar, slide show Carousel ini juga dilengkapi description atau cuplikan informasi singkat yang menerangkan tentang gambar yang ditampilkan. Tidak hanya itu, slide show Carousel ini sangat bagus bila dipasang di web atau blog kita untuk menampilkan artikel atau berita terbaru, dengan kata lain slide show Carousel ini kita buat sebagai sarana update web atau blog kita.

LIHAT DEMO

Nah bila anda berminat memasang slide show Carousel ini, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

$("#but_prev").click(function () {
          carousel.prev();
        });
        $("#but_pause").click(function () {
          carousel.pause();
        });
        $("#but_start").click(function () {
          carousel.start();
        });
        $("#but_next").click(function () {
          carousel.next();
        });
      });
    </script>

padding:7px;
  background-color:#CCC;

}
#carousel {
  border:2px solid #fff;
  height:300px;
  background-color:#CCC;
  position:relative;
  font-size:12px;
  font-family: Arial;
}
#carousel .carousel-image {
  height:230px;
  width:400px;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
  border:0;
  display:block;
}
#carousel .carousel-feature {
  position:absolute;
  top:-1000px;
  left:-1000px;
  border:2px solid #5d5d5d;
  cursor:pointer;
}
#carousel .carousel-feature .carousel-caption {
  position:absolute;
  bottom:0;
  width:100%;
  background-color:#000;
}
#carousel .carousel-feature .carousel-caption p {
  margin:0;
  padding:5px;
  font-weight:bold;
  font-size:12px;
  color:white;
}
#carousel .tracker-summation-container {
  position:absolute;
  color:white;
  right:50px;
  top:212px;
  padding:3px;
  margin:3px;
  background-color:#000;
}
#carousel .tracker-individual-container {
  position:absolute;
  color:white;
  right:95px;
  top:218px;
  padding:0;
  margin:0;
}
#carousel .tracker-individual-container li {
  list-style:none;
}
#carousel .tracker-individual-container .tracker-individual-blip {
  margin:0 3px;
  padding:0 3px;
  color:#000;
  text-align:center;
  border:1px solid #5d5d5d;
  background-color:#DDD;
}
#carousel .tracker-individual-container .tracker-individual-blip-selected {
  color:#FFC600;
  font-weight:bold;
  border:1px solid #fff;
  background-color:#000;
}
#carousel-left {
  position:absolute;
  bottom:33px;
  left:200px;
  cursor:pointer;
}
#carousel-right {
  position:absolute;
  bottom:33px;
  right:200px;
  cursor:pointer;
}
</style>

8. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menampilkan slide show ini pada halaman depan. Silahkan anda ikuti langkah - langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="carousel-container">

<div id="carousel">

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>
</div>

<div id="carousel-left"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png" /></div>
</div>

Catatam :

Silahkan anda ganti tulisan yang berwarna MERAH, BIRU, dan PINK dengan milik anda.

5. SIMPAN.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Jumat, 15 Juli 2011

Cara pasang tombol share Social Bookmark

Jumat, 15 Juli 2011 | 08.54

Noercholis

No comments

Seperti yang sudah kita ketahui bahwa Tombol share Social Bookmarking sangat bermanfaat untuk menarik pengunjung sebanyak - banyaknya ke web atau blog kita. Setiap artikel yang kita publikasikan, bisa langsung di sharing kesetiap Social Bookmarking dengan menggunakan Tombol share yang kita pasang. Dengan demikian tidak menutup kemungkinan ada visitor yang tertarik dengan artikel kita, dan langsung menuju web atau blog kita untuk membaca artikel yang kita sharing.

Bila anda berminat, Berikut ada tiga contoh tombol share Social Bookmark yang bisa anda pilih sesuai selera anda. Silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Selanjutnya copy dan sisipkan kode :

Sexy Social Bookmark :

Copy kode dibawah ini dan paste sebelum kode </head>

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupc0KeeIue3yWCZ745dGGw9FvlI8G9v0WUJnK3jl6wGLoWpC3B3TcNZQGmP7ZmLptDRxs5ehodMcQ-YdAndKhVfP2MOS6ZdmZbJWAUulDyiN3CYMKVDcUsfqnzNVOoGfOKfZfpV_kzYp9/') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnIwwdxWiafpYhvEAWJ7uGc_QwLuazbW9_ZikHxNgr0XQ5Sn3Ip2yoCcbEGI14CL5vxR595C_C4lmfY3SOv3-pOzq4mLqsVglM83dfcAIu-V_TA0JhbI_9Ffz6FB6uIh3irbIbwh9jjye1/') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

Copy kode dibawah ini dan paste setelah kode <data:post.body/>

Catatan : Ganti Tulisan "ID-FEEDBURNER-ANDA" , dengan milik anda.

Social Bookmark Hati :

Copy kode dibawah ini dan paste setelah kode <data:post.body/>

Social Bookmark Daun :

Copy kode dibawah ini dan paste setelah kode <data:post.body/>

7. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Kamis, 14 Juli 2011

Cara membuat tombol Follow me dibawah posting

Kamis, 14 Juli 2011 | 08.16

Noercholis

9 comments

Widget "followe me" atau "follow this blog" memang sudah disediakan oleh blogger, kita tinggal add gadget dan meletakkannya pada sidebar blog kita. Tapi tidak ada salahnya kita menambahkan link "followe me" atau "follow this blog" ini dibawah posting artikel kita. Sebab link yang berbentuk tombol ini lebih mudah terlihat oleh pengunjung setelah selesai membaca artikel. Apa lagi pengunjung tertarik dengan artikel yang dibaca, tidak menutup kemungkinan pengunjung akan langsung join dan follow blog kita melalui tombol "followe me" atau "follow this blog" yang kita pasang dibawah posting. Jadi tombol rekomendasi ini lebih berfungsi dan bermanfaat.

OK... bila anda berminat memasang tombol ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

<data:post.body/>

7. Copy kode dibawah ini dan paste dibawah kode <data:post.body/>:

<form><input onclick='followblog()' type='button' value='Follow this Blog'/></form><script type='text/javascript'>function followblog(){window.open("http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=550, height=520");}</script>

Perhatikan seperti contoh berikut :

<form><input onclick='followblog()' type='button' value='Follow this Blog'/></form><script type='text/javascript'>function followblog(){window.open("http://www.blogger.com/follow-blog.g?blogID=4238251463278702654","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=550, height=520");}</script>

8. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Rabu, 13 Juli 2011

Cara menghilangkan profil dan ULR situs komentator

Rabu, 13 Juli 2011 | 19.19

Noercholis

4 comments

Ketika pengunjung memberikan atau meninggalkan komentar pada posting artikel kita dengan menggunakan Id, maka web atau blog kita secara otomatis akan terhubung dengan web, blog atau profil milik pengunjung yang memberikan atau meninggalkan komentar tadi. Proses ini biasanya orang menyebutnya Backlink. Sangat banyak para blogger yang masih membiarkan hal ini terjadi, termasuk blog tercinta ini. Tapi banyak juga para blogger yang sudah tidak menginginkan blognya terhubung dengan web atau blog milik pengunjung yang memberikan atau meninggalkan komentarnya. Walaupun demikian kita harus selalu positive thinking, karena mereka juga memiliki alasan tersendiri sehingga tidak menginginkan proses backlink ini terjadi.

Nah... bila sobat juga ingin menghilangkan profil dan ULR situs komentator atau tidak menginginkan proses backlink terjadi, anda bisa ikuti cara dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

7. Ganti kode diatas dengan kode dibawah ini :

<data:comment.author/>

Selasa, 12 Juli 2011

Cara membuat fitur slide show

Selasa, 12 Juli 2011 | 23.07

Noercholis

21 comments

Banyak kegunaan fitur slide show ini, antara lain bisa kita manfaatkan untuk menampilkan produk terbaru yang kita tawarkan. Terutama untuk web atau blog yang banyak menampilkan banyak gambar, desain ataupun foto. Dilihat dari tampilanya, slide show ini sangat menarik. Jadi selain kegunaan diatas slide show ini dapat menjadikan web atau blog kita tambah lebih menarik.

LIHAT DEMO

Bila anda berminat memasang widget ini, silahkan anda ikuti langkah-langkah berikut ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
 //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
 //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
 //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
 //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
 //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px">
<img src="loading.gif" /> Fetching slider Contents. Please wait...</div>
',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
 try{
 page_request = new ActiveXObject("Microsoft.XMLHTTP")
 }
 catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},

buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
 setting.contentdivs.push(alldivs[i])
  alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
},

buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
 phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
 if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
  pdivlinks[i].style.display="none" //hide this toc link
  continue
 }
 pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
 pdivlinks[i][setting.revealtype]=function(){
  featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
  return false
 }
 setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
 pdivlinks[i].onclick=function(){
  featuredcontentslider.turnpage(setting, this.className)
  return false
 }
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
 featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},

urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
 targetobject.filters[0].opacity=value*100
else //IE 5.5
 targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},

fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
 setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
 setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},

autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"="+value

init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}

}

//]]>
</script>

8. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menampilkan slide show ini pada halaman depan. Silahkan anda ikuti langkah - langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div style="float:left;">

<div id="slider4" class="sliderwrapper">
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
</div>

<div id="paginate-slider4">
<a href="ULR POST" class="toc"><img alt="IMAGE-1" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-2" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-3" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-4" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-5" src="ULR GAMBAR KECIL"/></a>
</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Catatam :

Silahkan anda ganti tulisan yang berwarna MERAH, BIRU, dan PINK dengan milik anda.

5. SIMPAN.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

JAVASCRIPT

TUTORIAL CSS

TUTORIAL HTML