Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Cara Memasang Sticky Widget Sidebar Melayang Saat Discroll

Mungkin sobat Blogger sudah sering melihat widget sticky ini atau mungkin ada sobat yang belum tahu tentang widget ini ? jika ada akan coba saya jelaskan sedikit. Seperti apa sih Sticky Widget itu ?

Pengertian simple-nya Sticky Widget itu widget yang menempel. Namun didalam Blogspot Sticky Widget adalah widget pada posisi tertentu yang akan selalu mengikuti tampilan monitor walaupun tampilan halaman terus digulung namun akan berhenti pada posisi awal yang telah ditentukan.(betul gak sih,,, hehehehe)

Bagaimana, sobat tertarik untuk memasang Sticky Widget ini pada Blog sobat? Untuk sobat yang ingin memasangnya, silakan simak langkah-langkah yang akan saya jelaskan .OK, kita mulai.

1. Login blogger >> template >> edit html
copy javascript berikut ini kemudian paste diatas kode </body> pada template sobat

<script type='text/javascript'>
      $(document).ready(function(){
    $("#on-top").sticky({topSpacing:0});
      });
    </script>
<script src='https://googledrive.com/host/0B0Dd8XYrtgdDQS03RzFLSmx6RVE/sticky.js' type='text/javascript'></script>

2. Kemudian simpan template.

Cara menggunakan pada widget

Untuk mengaplikasikanya pada widget yang dipilih untuk di buat sticky hanya tinggal menggunakan id dibawah ini tepat sebelum kode widget

     <div id="on-top"> code widget yang ingin di beri posisi sticky </div>

Jika kurang mengerti akan coba saya jelaskan lagi. disini saya akan membuat widget facebook likebox menjadi sticky

    <div id="on-top"><div class="fb-like-box" data-href="http://www.facebook.com/wahyu.onlyy" data-width="290" data-height="182" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div></div>

Sekian tutorial Cara Membuat Sticky Widget Sidebar di Blogspot, semoga bermanfaat. Jika ada saran dan kritikan atau ada yang kurang dipahami silahkan tinggalkan komentar sobat pada kolom dibawah. Terima Kasih.


Cara Mengoptimalkan Custom Permalink Blog

Cara Mengoptimalkan Costom Permalink Blog - wahyu only

Mengoptimalkan Custom Permalink Blog - Sebelum anda menulis sebuah artikel terbaru, Ada yang harus Anda perhatikan adalah ketika Anda hendak membuat artikel agar mesin pencari google dapat menempatkan Artikel kalian dihalaman depan hal yang harus kalian terapakan adalah mengoptimalkan URL Custom Permalink dalam pembuatan Artikel Blog kalian.salah satunya adalah dengan custom permalink, permalink adalah sejumlah karakter (judul artikel) pada URL postingan yang terletak di belakang tahun dan bulan pada saat dimana artikel tersebut di publikasikan, contohnya anda bisa lihat di bawah ini.

Contoh url costum Permalink - wahyu only

Lalu bagaimana saya mengoptimalkan URL blog saya ?

Saya akan memberikan beberapa cara mengoptimalkan URL dalam pebuatan artikel blog yang anda harus lakukan adalah dengan cara Pengaturan Permalink. Hal yang perlu kalian lakukan sebelum menerbitkan artikel baru. Men-setting pengaturan permalink.berikut Langkah - langkahnya :

1. Login ke Blogger.

2. Pilih Buat Entri Baru.

3. Pada halaman pada saat akan kita membuat entri baru, biasanya di kolom sebelah kanan akan menampilkan beberapa opsi (setelan entri) yang bisa kita gunakan untuk men-setting artikel, misalnya label, jadwal, tautan permanen, lokasi, dan pilihan.
Langkah langkah costum Permalink - wahyu only

4. untuk meng-kustomisasi permalink di blog, caranya anda cukup klik pada opsi 'Link', lalu anda pilih 'Tautan Permanen Khusus' yang artinya tautan atau alamat URL artikel tersebut bisa disesuaikan dengan yang kita mau.

Mengatur costum Permalink - wahyu only

5. Setelah memilih opsi "custom URL", ketikkan nama permalink posting sesuai keinginan. Ada satu hal penting yang perlu diperhatikan: Jangan ada spasi. Beri hypen/strip (-) diantara setiap kata, sesuai jenis permalink Blogger.

6. Klik Done. Anda dapat melanjutkan membuat posting atau langsung "publish" dan selesai.

Review dan Catatan Fitur Blogger Custom Permalink
Ada beberapa hal yang saya lihat dari fitur ini, baik kelebihan maupun kekurangannya:

- Jumlah karakter dalam permalink, setelah saya cek, bisa mencapai sekitar 45-80an karakter (mungkin lebih dikit), disesuaikan dengan panjang karakter url secara keseluruhan. Artinya, batasan jumlah karakternya tergantung panjang nama blog. Semakin panjang nama blog, semakin sedikit jumlah karakter yang bisa dibuat dalam custom permalink.

- Ada satu kelemahan yang cukup signifikan sehingga menurut saya tidak ada perubahan besar dengan adanya fitur ini. Custom permalink hanya dapat dibuat sebelum sebuah posting diterbitkan. Artinya, setelah sebuah posting diterbitkan maka permalink tidak dapat diedit lagi.

- Custom permalink ini hanya berlaku pada nama file. Untuk  mengubah struktur permalink, maka fitur itu tidak (atau setidaknya belum) ada. Maksudnya adalah, Contohnya saya ingin membuat url permalink clean, tanpa embel-embel folder sesuai bulan tahun (Contoh: 2013/07).

Yup, Meskipun ada banyak kekurangan, karena didunia ini tidak ada yang sempurna karena kesempurnaan hanyalah milik Tuhan semata,serta saya rasa fitur ini cukup banyak membantu dalam upaya penyusunan keyword(White hat SEO) di permalink tanpa harus edit judul posting.

Membuat Persentase Pada Scrollbar

haloo sahabat blogger, sudah lama nih saya gak ngeblog karena kesibukan sehari hari,hhehe. sebenarnya sih tutorial kali ini tidak terlalu penting namun dari pada blog ini gak ada postingan baru mending berbagi tutorial tentang Membuat Persentase pada Scrollbar

Dengan menambahkan persentase, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%.

Persentase Pada Scrollbar

Catatan : sebelum melakukan editing pada template blog, Biasakan untuk membackup template.

Untuk membuatnya silahkan ikuti langkah-langkahnya :

1. Masuk ke Template dan Edit HTML. dan Simpan kode ini di atas ]]></b:skin>
#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

2. Simpan kode ini di bawah </head>
<div id='scroll'></div>

3. Simpan JavaScript ini di atas </body>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>
 Dan yang Terakhir Simpan Template

Mungkin hanya itu yang bisa saya bagikan kepada sobat, silahlan tanyakan bila ada yang kurang jelas di komentar,,,

Membuat Persentase pada Scrollbar by Bloggertut

Cara Membuat Widget Popular Post Blogger Round Corners

Popular Post Round Corners - wahyu only
Tentu anda sudah tahukan mengenai widget popular post? yaitu widget yang berfungsi untuk menampilkan artikel-artikel popular di blog kita, tidak seperti widget-widget HTML/Javascript lainya, popular post ini bersifat resmi atau official dari blogger, jadi widget ini terkesan lebih baik dan tidak memberikan efek yang signifikan terhadap berat loading blog. Selain itu, terkadang seringkali kita juga mengalami kebosanan dengan tampilan popular post yang itu-itu saja,

Kali ini saya akan memberikan tutorial tentang modifikasi Widget Popular Post , Tampilan dari modifikasi popular post yang akan saya bahas ini sebenarnya cukup sederhana,widget ini akan mempunyai tampilan melingkar Panjang pada keseluruhan atau bisa disebut Round Corners.

Popular Post Blogger Round Corners
Cara mengaplikasikanya juga tergolong cukup mudah, kita hanya perlu memasang widget popular post seperti biasa terlebih dahulu, baru kemudian ditambahkan dengan beberapa kode css yang sudah di customisasi. Jika anda tertarik untuk menerapkanya, maka silahkan disimak yang berikut ini.

Cara Modifikasi wideget Popular Post
1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih "Entri Populer" atau "Popular Post" (tergantung bahasa yang digunakan).

5. Lalu, centang box thumbnail gambar. (jangan centang "snippet" atau cuplikan

pilih popular post
6. Klik "Save/Simpan" gadget.

7. Sekarang beralih ke halaman Template > Edit HTML.

8. Klik tanda panah hitam disebelah kode yang mirip seperti kode ini: <b:skin>...</b:skin> (untuk membuka kode css).

9. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini tepat diatasnya.

/* The CSS Code for the menu starts here */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}
  10. Klik "Save/Simpan" template, dan selesai.

Bagaimana? mudah bukan cara memodifikasi popular post agar terlihat lebih stylish. Demikian informasi terbaru tentang Cara Modifikasi Widget Popular Post Blogger.
via blogertix

Membuat Recent Post Grid With Thumbnail

Wahyu only - Postingan Terbaru atau biasa disebut Recent Post merupakan informasi singkat dari judul posting terbaru yang ditampilkan secara berurutan agar memudahkan pengunjung melihat urutan posting yang telah kita buat. Untuk membuat recent post kita bisa menggunakan source code dibawah.

Mengenai cara penggunaan code telah saya jelaskan pada posting Full source code Random Post, jadi tidak ada perbedaan dalam cara menggunakannya caranya hampir sama, yang membedakan hanyalah source code nya dan tampilanya saja. Jadi, yang ingin saya bagikan disini adalah Recent Post Grid With Thumbnail.

recent post table with thumbnail - wahyu only


Widget recent post model grid thumbnail ini sangat cocok untuk blog yang berupa photoblog. Walau blog dengan tema apapun juga bisa digunakan. Efek visual foto, memberikan pengalaman baru pada pengunjung blog dalam melihat post dari foto atau gambar ilustrasinya.

Cara Membuat Recent Post Grid Thumbnail
1. Login ke blogger.com
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<style type="text/css">
#post-gallery {
  width:283px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#ffffff;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOzxtul2tiOMzYSwX3dfpXVlwcM2dOquPS2fntZe_klWoqhqnryAk4hUTOtpxrCjtj2Np_6PoWAZw6dcDDC1TP1zlJSgQTZChuZbGyWCBwAxIIaQQNH_uaoMhQP4ZIL5Iv6zXTgdH5xF9y/s16/GsNJNwuI-UM.gif') no-repeat 50% 50%;
  width:90px;
  height:90px;
}
#post-gallery .rp-item img {
  width:90px;
  height:90px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:300px;
  background-color:white;
  border-top:5px solid #FA7C19;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Recent post",       // Widget Title
    numposts    = 9,      // The number of thumbnail / posts to display
    numchar     = 100,      // Number of characters in the description tooltip
    rcFadeSpeed = 110,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi20mbl869VIoXQUBchFzM2k_vL5dJohyxXXN7NXGQtZ5dBH4hMeUnmrkXssQs4oGVWjGcKeTqeJh4dMmAhEzJQc9grMGNPqXPioRh2nQolcanVkhoClXl1h5kUvOTGf6k6nN1cGlQVWTRo/s175/Blank.jpg",      // Image that show up if the post doesn't have a image
    blogURL     = "http://wahyu-only.blogspot.com/";       // Your Blog Address
</script>
<script src="https://googledrive.com/host/0B5wHPYwL6DjVYl9TMkpxanJOZjQ" type="text/javascript"></script>
<br />
<a href="http://goo.gl/YkfsY" onmouseover="window.location=this.href"></a>
<style type="text/css"> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 2px!important; padding-bottom: 2px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:2px;padding-top:2px;display:block;} </style>
Code Source : http://se-cara.blogspot.com/2013/06/widget-recent-post-terbaru-tahun-2013.html

Tambahan :
  • Ganti wahyu-only.blogspot.com dengan URL blogmu sendiri. 
  • numposts    = 9 adalah banyaknya thumbnail post terbaru yang ditampilkan. 
  • numchar     = 100 adalah banyaknya tootip text yang ditampilkan saat mouse di arahkan ke gambar.
5. Simpan jika sudah selesai.

Cukup sekian untuk tutorial kali ini, Bagaimana mudah bukan? ok selamat mencoba! Mungkin hanya ini yang dapat saya sampaikan kali ini,silahkan kreasikan recent post grid ini dengan template anda supaya terlihat lebih menarik. untuk kurang dan lebihnya mohon dimaafkan. Terimakasih

Memberi Efek Loading Pada Blog with jQuery

efek loading - wahyu only
Berbeda dengan efek loading yang pernah saya posting dahulu yaitu  Animasi Loading, dengan yang sekarang ini yang akan saya bagikan kepada Anda semua,khususnya para blogger indonesia (kok jadi nglantur ya ngomongnya...hehehe) yaitu Efek Simple Loading Pada Blog dengan jQuery yang menurut saya cukup simple.

Sebenarnya tidak jauh berbeda pada animasi loading, kalau animasi loading ada animasinya yaitu berbentuk bola yang berputar, tapi efek loading kali ini cukup sederhana yaitu membuat layar menjadi blank ketika loading (bukan lagi hank ya pc nya), lebih tepatnya efek yang menyembunyikan atau menunjukkan suatu elemen dengan memudar.

untuk bagian demonya bisa klik link dibawah ini

Untuk cara pemasangan bisa anda lihat di bawah ini

1. Masuk ke blog anda
2. Kemudian pilih Template
3. Untuk berjaga-jaga jangan sampai terjadi kesalahan, Download Full Template anda terlebih dahulu
4. Selanjutnya pilih EDIT HTML

5. Klik di manapun dalam kode area lalu tekan CTRL + F dan cari kode </head>

6.Copy kode dibawah ini tepat diatas </head> kemudian letakkan kode di bawah ini :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #000000; /* Color fading */
}
</style>

7) Simpan perubahan .

Tambahan :
  •  Jika kode yang berwarna merah di blog Anda sudah ada maka, kode diatas tidak usah ditambahkan.
  • Untuk anda yang ingin menyesuaikan warna loading nya dengan warna lain, ganti tulisan #000000;  diatas dengan kode warna yang diinginkan untuk warna memudar dari loading ini.

Itulah sedikit tutorial tentang cara membuat efek loading pada blog, semoga Blog anda akan lebih cantik dengan menggunakan efek seperti di atas.

Mempercantik Tampilan Contact Form Pada Halaman Statis

form contact - wahyu only
Sebenarnya Cara memasang formulir kontak ini sudah banyak di google, Tapi gak apa-apa kan kalau saya membagikan tutorial Cara Mempercantik Tampilan Contact Form Pada Halaman Statis. Formulir kontak bisa saja anda Letakkan di kolom widget/di sidebar blog. Namun, salah satu kelemahan widget formulir kontak adalah desainnya cukup simpel, bisa dibilang widget formulir kontak ini cukup "memakan tempat" blog Anda.

Maka dari itulah, saya akan membagikan tutorial bagaimana cara menempatkan widget Formulir Kontak Blogger di halaman statis. Sehingga, selain tidak memakan tempat, juga akan memudahkan Anda dalam membuat halaman Kontak Kami.

Screenshoot Contact Form Light Theme
Contact Form Light Theme - wahyu only
Gambar diatas adalah contoh jika Formulir Kontak telah berhasil dibuat pada halaman statis.Bagaimana, keren bukan, Setidaknya dapat memberikan sentuhan yang lebih menarik untuk widget Formulir Kontak bawaan dari Blogger. jika berminat silahkan ikuti tutorial dibawah ini

1. Seperti biasa caranya, klik dulu Gadget Lainnya, baru Tambahkan Widget Formulir Kontak.

menambahkan widget formulir kontak - wahyu only
Note: Setelah terpasang,Widget ini jangan dihapus, nanti kita sembunyikan dengan CSS. jika widget di hapus, maka form contact tidak akan berfungsi.

2. Simpan kode di bawah ini pada mode HTML jangan Compose.
<div id="contact_wrap">
<h3>
Hubungi Kami</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

3. Tambahkan CSS dibawah ini di atas ]]></b:skin> Untuk mempercantik tampilan, dan sekaligus menyembunyikan Contact form pada Widget di sidebar.
/* CSS Contact Form Light Theme*/
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7obS7UehhdiZnqqFGuR7yD4KxnAYweb8wre42_ChxcfPzMn8mNQNeq_2vBn6ni3BWLCGlT2D10wywDMbex1NrPjxJQqhRQps-8XS1V2n56hgA2RhULHv_4Ten1f3W03hDGiJHLFwtMuo/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipraO_cTvcq4ZgYU5TFNpe6QKpzYrIRaGzc1dkCjJa8z0NuQPALZ_no6ixB1f5rO4_DHN9Qg-WAiL1W_tiyv_bKMrgGMAaz4fxsn_VVr9Q6MeHpl2hXOhxbr24NAKuLHhlyUok2cxNsgM/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxl8Vv9WbQ-sh9GTSfUyXkoZLh2WEYW9b1DDDn4UV6pmb3X-txw1qbVelLj7KACxNRN5Peeh-dfEYkMhjYlxpzQGj2dDfQBy83LeeZZhcuYsy_TS5cDG2b4FyDBWJ04hX9lNt1w__HA5E/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

4. Gunakan pratinjau untuk melihat hasilnya, jika berhasil dan tidak bermasalah silahkan di publikasikan

Mungkin itu saja share ku hari ini, jika masih ada yang belum mengerti ??? silakan tanyakan pertannyaan sobat di kotak komentar di bawah ini.semoga bermanfaat dan selamat beraktivitas :)

Source code : bloggertut

Cara Upload File, HTML, CSS, Javascript Di Google Drive

Cara Mudah Hosting Javascript Ke Google Drive - Wahyu only

Sebelumnya saya mau Upload File Javascript Ke Google Code. namun kemarin download yang merupakan bagian dari tahap upload file ke Google Code sudah tidak ada. setelah saya lihat pemberitahuanya ternyata Google memang telah menutup layanan download pada Google Code, baik untuk proyek-proyek yang baru dibuat maupun proyek-proyek yang sebelumnya sudah dibuat. Perbedaannya, untuk proyek-proyek yang baru dibuat, seperti yang terjadi, tidak akan ada lagi layanan download mulai akhir Mei kemarin, sedangkan untuk proyek-proyek yang sebelumnya sudah ada, masih tetap tersedia layanan download sampai tanggal 14 Januari 2014.hal ini sendiri terjadi, karena Google merasa telah terjadi peningkatan yang signifikan pada kekerasan akibat penyalahgunaan pelayanan, dan oleh karenanya, baik yang sebelumnya telah memiliki proyek pada Google Code maupun yang belum untuk segera berpindah ke Google Drive.

Dan sekarang saya akan memberikan tutorial yaitu Cara Mudah Hosting/Upload Javascript Ke Google Drive. Kenapa harus Google drive? Karena Di dalam Google Drive kita akan dimanjakan dengan banyaknya Aplikasi yang disediakan oleh Google , mulai dari Pengolah kata , Pengolah angka , Formulir , Presentasi , Pemutar Lagu , Video , Pembuatan Contact Form + Upload File (Integrasi dengan JOTFORM) , terus Alat konversi File , dan masih banyak lagi yang ngga mungkin disebutin satu2...!

Nah karena pada siang kali ini saya ingin membagikan Tulisan sederhana untuk memaksimalkan Kode Script yang sudah kita hosting ke Google Drive agar bisa berfungsi di Blog atau Website kita , kalau kalian mau coba silahkan ikuti langkah2nya dibawah ini :

1. Masuk ke Drive kalian masing2 atau bisa Klik Disini.

2. lalu buat sebuah Folder untuk mengumpulkan File Proyek kita dalam satu tempat , tujuannya untuk memudahkan sobat dalam mengatur File2 tersebut diwaktu mendatang ketika File yang sobat miliki bertambah banyak.

3. kalau sudah silahkan lihat di bagian Kiri atas terdapat tombol berwarna merah dengan panah putih menunjuk ke arah atas , kalau sudah kelihatan silahkan di Klik untuk mengupload File kode Script yang ingin digunakan , nanti akan muncul 2 buah pilihan yaitu File dan aktifkan unggahan Folder , khusus untuk unggahan Folder hanya bisa dilakukan jika Browser milik sobat memang mendukung Upload satu Folder atau sobat sebelumnya sudah mendownload Drive untuk PC , nah kalau ngga ada dua2nya terpaksa sobat pilih yang File saja , tapi tenang disitu kita masih bisa melakukan Drag untuk File2 yang ingin di Upload.

4. Tunggu Unggahannya selesai.

5. Kalau sudah selesai di Upload coba Klik kanan pada File yang ingin digunakan ke Website atau blog kalian , kemudian Pilih Bagikan atau Share , nanti akan muncul tampilan seperti di bawah ini :
Cara Mudah Hosting Javascript Ke Google Drive
6. Yang harus kalian lakukan pertama-tama adalah mengubah Privasi file tersebut , coba lihat digambar atas itu bertuliskan Pribadi , jadi klik Tulisan ubah yang berwarna biru  nanti akan muncul lagi tampilan Pop-up seperti di bawah ini , kemudian Pilih Opsi Publik di Web :

Cara Mudah Hosting Javascript Ke Google Drive

7. Pilih Simpan , kemudian lihat kembali di bagian bawah tulisan tautan berbagi disitu ada sekumpulan URL , lalu Copy URL yang ada disana !!!

Cara Mudah Hosting Javascript Ke Google Drive

8. Berikut ini adalah contoh File yang sudah saya Upload , File ini adalah JavaScript Emoticon di blog ini :

https://docs.google.com/file/d/0B5s9AXHK0hFhLXFjeVptY1dnZzA/edit?usp=sharing

Silahkan kalian buka File itu , nanti kalian akan di bawa ke halaman yang tampilannya mirip dengan Syntax Highlighter , Tapi jika kalian menggunakan Struktur URL seperti itu maka kodenya sama sekali tidak akan berfungsi, jadi yang harus kalian lakukan adalah mengubah Struktur URL diatas menjadi seperti dibawah ini :

https://googledrive.com/host/Kodefile

Ganti Tulisan "Kodefile" yang berwarna Merah diatas. dan untuk mendapatkan kodenya coba lihat lagi URL yang saya kasih di bagian pertama tadi :

 https://docs.google.com/file/d/0B5s9AXHK0hFhLXFjeVptY1dnZzA/edit?usp=sharing

Yang saya kasih warna Orange itulah kode Filenya, dan setelah diterapkan akan menjadi seperti dibawah ini :

https://googledrive.com/host/0B5s9AXHK0hFhLXFjeVptY1dnZzA


dan coba buka URL diatas lalu lihat hasilnya , sama seperti ketika kalian menghosting File ke Yourjavascript atau googlecode kan ? nah Struktur URL itulah yang bisa berfungsi untuk diterapkan ke Blog kita , lalu dibagian ini kalian juga bisa meletakkan ekstensi .js .css .html .php atau yang lainnya tapi harus sesuai dengan Bahasa Pemrograman yang kalian Host.

9. Kemudian untuk penerapannya ke Blog atau website kita ngga ada perbedaan kok dengan saat menghosting File ke GoogleCode , yah kurang lebih kayak gini :

Untuk File Javascript strukturnya seperti ini :

<script type="text/javascript" src="https://googledrive.com/host/0B5s9AXHK0hFhLXFjeVptY1dnZzA/"></script>

10. Yah silahkan pasang di Blog masing2 sesuai Fungsi dari File itu , hehehe

Oke gimana menurut kalian semua apakah ribet atau gimana , ?? kalo menurut saya pribadi sihh sama sekali ngga ada ribetnya, Jadi ayo kita Migrasi Sob ,daripada di Google Code kan Sudah di tutup,lagian di GoogleCode terus kan bosen.. tampilannya cuma gitu-gitu aja , mending di Google Drive kita bisa puas ngedengerin musik , main game terus ngedit Foto sambil ngedit Kode CSS , atau javascript sesuka hati, keren kan , karena itulah yang membuat Google menjadi besar , mereka sama sekali ngga memberatkan para penggunanya , justru sebaliknya mereka begitu memberikan Pelayanan maksimal untuk kita hanya saja sebagian dari kita belum ada yang tahu cara memaksimalkannya.

Wassalammualaikum dan semoga bermanfaat yah dan maaf kalau ada salah kata atau penulisan dan mohon koreksinya okey !! siip :)

Membuat Efek Hover Blockquote Blinking Bulb di Blog

Sebelumnya Saya Mem-posting Artikel Tentang Salah satu Kontes Humor,dan Sialnya Artikel tersebut  ternyata tidak Ada Di Pencarian Google Alias Terkena Google Sanbox, Mungkin Karena saya Terlalu berlebihan optimasi seo sampai 100% di chkme.com. Tapi Alhamdulillah sekarang sudah Muncul Lagi..hahaha

Tapi yang Kita bahas kali ini bukan mengenai google sanbox, melainkan tentang Cara Membuat/Memasang Efek Hover Blockquote Blinking Bulb di Postingan Blog yang Pada setiap Blog ber-Niche Tutorial, pasti sangat diperlukan karena Memuat Kode-kode yang banyak.

Wahyu only

Sebenarnya sih,Blockquote di blogger sendiri sudah ada pada blog yang masih menggunakan template standar atau template asli bawaan blogger. Namun blockquote pada template yang masih default blogger tersebut hanya mamberikan fasilitas blockquote yang masih murni atau bisa dikatakan blockquote sederhana, karena masih standar dan belum memiliki efek apapun pada blockquote tersebut.dan kali ini saya  Untuk lebih jelasnya, berikut adalah bagaimana Cara Membuat Efek Hover Blockquote Blinking Bulb Pada Blog :

1. Login ke blogger.
2. Kemudian klik Template >> Edit HTML
3. Selanjutnya cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Setelah ketemu, copy kode dibawah ini kemudian letakkan tepat di atas atau sebelum kode ]]></b:skin>

blockquote {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXGgKATpemcpJkpcjDdmDB_hIJVxKtE6-Z3kEIl3wO7Wl4Ficd8ZBgoiNSJlKs69FpPFjaqetct11kh_iVH7r7fpp3YIEQ9SRIN24jbOamYs58pMpm8lpmK19P32EtHmwLLFqfkLHC3Lc/s1600/Blockquote-wahyu-only-gelap.jpg) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font:Courier new;
border:1px solid #DDD;
}
blockquote:hover {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66FezknLffeWGpZWqMIeVSYFZFUUzaZWut8m9gx-8_0yHlHHwJirbjqQa1jM0DVt1z0b0uh9VIN5DC3EeTQmWhBmFjPifvYi2_eeepXo6oM31-t2s_eER4L7CpgCBVogzxWukAlS5OoA/s1600/Blockquote-wahyu-only-terang.jpg) no-repeat right bottom ;
color:#00ff00;
}

blockquote p {
margin: 0;
padding-top:10px;
}

5. Simpan Template.

Tutorial diatas Adalah untuk membuat efek pada blockquote akan menyala saat di sorot mouse layaknya seperti lampu didalam ruangan dan akan terlihat gelap jika mouse diarahkan menjauh dari blockquote.
dan untuk memunculkan pada teks yang ingin di jadikan kedalam blockquote tinggal di block saja teks tersebut kemudian klik tombol Quote pada bagian toolbar kolom posting.

Wahyu only

Apabila warna blockquot tersebut kurang sesuai dengan warna blog yang anda gunakan, maka silahkan custom sendiri. Anda dapat menggunakan efek yang sama dengan mengubah background, warna font atau warna border, dll.

Jadi Anda dapat dengan mudah menyesuaikan jenis font dan warna border serta warna background untuk menciptakan mouse efek hover. Anda dapat merubah menggunakan background lain jika anda inginkan dengan cara mengganti kedua link background, Background di link berwarna merah muncul pada mouse hover dan background kedua di link biru muncul ketika mouse menjauh dari blockquote tersebut.

Nah, Mudah bukan sobat,, Demikian ulasan saya tentang Cara Membuat Efek Hover Blockquote Blinking Bulb di Blog, silahkan dicoba di Blog sobat,Tapi sebelum itu Tinggalkan Jejak dulu ya...

Membuat Daftar Isi Dengan Desain Keren

Sebelumnya saya memposting Artikel tentang Daftar Isi dengan effect Accordion.dan kali ini saya Membagikan lagi kepada sobat - sobat semua yaitu Daftar isi dengan desain keren,daftar isi ini menurut saya cukup bagus dan elegan,yang membuat sobat semua tertarik untuk memasangya

Screenshot :
Wahyu only



Daripada penasaran,mending langsung saja coba di blog sobat dengan mengikuti cara-cara pemasanganya.sebagai berikut :

- Login ke akun Blog
- Entri Baru -> Klik HTML ( bukan Compose )
- Taruh Script Kode di bawah ini pada Mode HTML
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#8A94F0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#C4C9F8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#181D67;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>

<br />
<div id="tabbed-toc">
<span class="loading">Loading Sitemap .. Please Wait.. :)</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://wahyu-only.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script> 

Keterangan :
.Silahkan sobat Tulisan yang berwarna merah dengan kata-kata sobat :)
.Silahkan sobat Tulisan yang berwarna hijau dengan URL sobat.

- Kemudian klik simpan

Jadi kesimpulannya, Memasang daftar isi diharuskan ada disetiap blog ataupun website, Karena fungsi dari daftar isi ini sangatlah penting yaitu sebagai peta blog yang memudahkan pengunjung dalam menjelajahi blog anda.

Sekian post tentang Cara Membuat Daftar Isi otomatis dengan desain Keren. terima kasih sudah berkunjung dan semoga bermanfaat :D

.