blogger-nesia: sticky widget

Cara Membuat Tombol Back To Top Ala Kang Ismet

Unknown 6 back to top, sticky widget, tutorial blog 19.33

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkLWyJCwZhXz8FoXKtUGgf9WONk4DFaWHuYSOT8WVw2ETc1jwvcXGw1dZK4vBBzBxTyia7sVeMYjfWi8EFu6HM_VptAJP8PDIN-mpQqMcgTvPVgoisq6_w7LREYFaaHo9dlNQlwmNW8Mej/s1600/panah.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img alt="Cara Membuat Tombol Back To Top Ala Kang Ismet" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkLWyJCwZhXz8FoXKtUGgf9WONk4DFaWHuYSOT8WVw2ETc1jwvcXGw1dZK4vBBzBxTyia7sVeMYjfWi8EFu6HM_VptAJP8PDIN-mpQqMcgTvPVgoisq6_w7LREYFaaHo9dlNQlwmNW8Mej/s1600/panah.png" title="Cara Membuat Tombol Back To Top Ala Kang Ismet" /></a>Banyak sekali hal yang keren bisa kita dapatkan dari seorang " master " atau orang yang lebih hebat dari kita. Salah satunya tampilan blognya, sebenarnya awalnya saya ragu untuk memposting tutorial ini namun sekarang saya sudah cukup yakin karena kang ismet sudah menshare template " droidpluss " yang menggunakan tombol back to top ini. ( Demo : <a href="http://droidpluss.blogspot.com/%C2%A0" rel="nofollow" target="_blank">klik disini</a> | Untuk postingan berikutnya akan saya share template tersebut ) 
 
Memang banyak sekali tombol back to top yang anda gunakan, namun menurut saya tombol ini memiliki " kharisma " yang lain karena dengan menggunakan bentuk budar (bukan kotak, yang biasanya digunakan ) maka orang akan tertarik untuk kembali ke bagian atas blog anda dan mencoba menggunakan menu horizontal anda untuk dengan mudah bernavigasi. 
 
 
<div class="BStitle">
cara pemasangan di blog</div>
 
 
<ul>
<li>Step 1  Buka blogger.com lalu pilih blog  anda</li>
<li>Step 2  Pilih template lalu edit html</li>
<li>Step 3  Cari kode ]]></b:skin> dengan mengklik   <key>CTRL</key> +<key>F</key> </li>
<li>Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi</li>
</ul>
<blockquote class="tr_bq">
#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;} #BounceToTop:hover {background:#2a3542;} #BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;} #BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border- 
color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;} #BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}</blockquote>
 
<ul>
<li>Step 5  Cari kode </head> dengan mengklik   <key>CTRL</key> +<key>F</key> </li>
<li>Step 6  Copy kode berikut lalu pastekan pada diatas kode </head>  tadi</li>
</ul>
<blockquote class="tr_bq">
<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } }); $(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script></blockquote>
 
<ul>
<li>Step 7  masih di atas kode </head> tadi pastekan kode berikut</li>
</ul>
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/></blockquote>
<div class="tips">
Jika jquery plugin sudah ada di blog anda ( versi berapapun ) maka lewati langkah ini
</div>
 
<ul>
<li>Step 8  Kembali ke menu samping bloggger, Pilih tata letak</li>
<li>Step 9  Buka pilihan gadget lalu HTML/Javascript</li>
<li>Step 10  Copy kode berikut lalu pastekan pada HTML/Javascript tadi</li>
</ul>
<blockquote class="tr_bq">
<style type='text/css' scoped='scoped'> #BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id="BounceToTop" style="display: block;"></div></blockquote>
 
<ul>
<li>Step 11  Simpan lalu cek bog anda untuk melihat hasilnya</li>
</ul>
Jika anda berpikir widget back to top  ini kurang sesuai dengan tampilan blog anda,jangan khawatir kami sudah menyediakan beragam widget back to top lainnya( <a href="http://blogger-nesia.blogspot.com/search/label/back%20to%20top" rel="nofollow" target="_blank">Klik Disini</a> ) 
 
 
jika ada yang ingin agan tanyakan  silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.

Cara Membuat Tombol Back To Top Ala Kang Ismet

Banyak sekali hal yang keren bisa kita dapatkan dari seorang " master " atau orang yang lebih hebat dari kita. Salah satunya tampi...

Baca selengkapnya »

Notifikasi Komentar Ala Google Plus Di Blogspot

Unknown 0 sticky widget, tutorial blog, widget 17.19

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2cdefRSJyljA7fPXl6ShYc_8pcKaNVxCrG8n3Gw-UjBZE1uK7oUsP5SjgxvLUM5PNQSC3b9U-hyEDyl8acrm_OCUgPDt83H6gJz7ok89E_cmjHYJVXV5964xhRjb2OR0JGj0gCIzsXZeP/s1600/komen.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Notifikasi Komentar Ala Google Plus Di Blogspot" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2cdefRSJyljA7fPXl6ShYc_8pcKaNVxCrG8n3Gw-UjBZE1uK7oUsP5SjgxvLUM5PNQSC3b9U-hyEDyl8acrm_OCUgPDt83H6gJz7ok89E_cmjHYJVXV5964xhRjb2OR0JGj0gCIzsXZeP/s1600/komen.png" title="Notifikasi Komentar Ala Google Plus Di Blogspot" width="204" /></a>jika anda seorang blogger maka anda pasti sudah tidak asing dengan google plus, jika anda masih tidak mengetahuinya anda bisa menyimak penjelasan saya berikut 
 
<div class="info">
 
google plus adalah layanan sosial media yang dibuat oleh google inc. Produk google satu ini dapat menghubungkan seluruh penggunanya untuk saling berinteraksi dengan berbagi pengalaman,link,foto,bahkan video. Google plus saat ini merupakan salah satu jejaring sosial yang cukup digemari karena sangat mudah digunakan seperti facebook dan twitter. 
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
Oke tadi cukup kita membahas tentang google plus itu sendiri, sekarang kita hanya akan berfokus pada notifikasi komentarnya. Jika anda bisa melihat lambang lonceng disekitar tombol logout blogger maka hal itulah yang akan kita bahas saat ini. Teknik/trik ini saya mbil sepenuhnya dari blog kang ismet aitu <a href="http://blog.kangismet.net/">http://blog.kangismet.net/</a>  dan juga saya gunakan saat ini.</div>
<div style="text-align: center;">
 </div>
<h4>
Cara pemasangan</h4>
 
 
<ul>
<li>Step 1  Buka blogger.com lalu pilih blog  anda</li>
<li>Step 2  Pilih template lalu edit html</li>
<li>Step 3  Cari kode ]]></b:skin> dengan mengklik   <key>CTRL</key> +<key>F</key> </li>
<li>Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi</li>
</ul>
<blockquote class="tr_bq">
#cm-total { 
  position:fixed; 
  top:14px; 
  right:0; 
  width:188px; 
  text-align:left; 
  z-index:9999; 
  cursor:pointer; 
} 
.total-counter { 
  background-color:#d11919; 
  color:white; 
  padding:1px 4px; 
  font-family:Arial,Sans-serif; 
  font-size:11px; 
  border-radius:5px; 
  font-weight:bold; 
} 
#notif { 
  position:fixed; 
  top:20px; 
  right:180px; 
  z-index:9999; 
  height:22px; 
  width:19px; 
  opacity:.4; 
  cursor:pointer; 
} 
#notif:hover { 
  opacity:1; 
} 
.close-notif { 
  position:fixed; 
  top:92px; 
  right:20px; 
  z-index:9999; 
  cursor:pointer; 
  display:none; 
} 
#cm-container { 
  width:355px; 
  position:fixed; 
  top:67px; 
  right:0; 
  z-index:9999; 
  background-color:#e5e5e5; 
  padding:60px 20px 10px 20px; 
  color:#666; 
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important; 
  text-align:left; 
  border:1px solid rgba(0,0,0,.2); 
  background-clip:padding-box; 
  display:none; 
} 
#cm-container:before { 
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPF4e7skxq9q7A3AFSM8BufvsNy9y1fIrU5UfFqfBVjqlJ6Ia48XlEVGxbq3NMJKGKGGtPwzpzjiiUl4jkEX7QKMLHLhMY4EhHaCxN2EOd5jP1aj1-u2pNv53LATzY8DxUQx_i5yH3bfE/s1600/arrow-notif.png'); 
  position:absolute; 
  top:-14px; 
  left:196px; 
} 
#cm-container:after { 
  content:"Komentar Terbaru"; 
  position:absolute; 
  top:22px; 
  left:150px; 
  text-align:center; 
  font:normal 14px Arial; 
  color:#333; 
} 
.cm-outer { 
  margin:0 auto; 
  padding:0; 
  font-size:11px; 
  text-align:left; 
  font:normal 12px Arial; 
} 
.cm-outer ul{ 
  margin-bottom:5px; 
} 
.cm-outer li { 
  padding:9px 10px 14px; 
  list-style:none; 
  clear:both; 
  position:relative; 
  border-radius: 3px; 
  box-shadow: 0 1px 2px rgba(0,0,0,.2); 
  background-color: white; 
  margin-bottom:10px; 
} 
.cm-text {color:#797979;} 
.cm-outer {margin:0 0 5px} 
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;} 
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold} 
.cm-header a:hover {color:#74a2c3;text-decoration:none;} 
.cm-outer .cm-content {overflow:hidden} 
.cm-content {margin-left:90px} 
.cm-outer img { 
  display:block; 
  float:left; 
  background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWBdqd3DAaM8L9Yu9nUG9TnxUSZGInc3NxHxnuRHbvgsnTCe7vSyChItbgd3gqC7Yg6326rx5ULK3DiIvGfXvLKDqtkcQf80tDkNdKLZJD3szUUX-N3UWqeNsrtQgdu9l-bPJLJeU1Wm8/s1600/anon80.png') no-repeat 50% 50%; 
  overflow:hidden; 
  border-radius:3px 0 0 3px; 
  position:absolute; 
  top:0; 
  left:0; 
} 
.cm-footer {margin-top:7px;} 
.cm-footer a {color:#5886a7;text-decoration:none;} 
.cm-footer a:hover {color:#74a2c3;text-decoration:none;} 
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] { 
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcw7cQVCyWSG_evEOohFZr9QPIc9NhCf2HCAt_W6gDx8EDdbyraIENmds8KRTtyZR36XkOvoeYz347n_mah3WKwKxL3iuOFvGFsTU2W-rJVF_38QwnyxvawSWxCOmIOgO0pqMLtU2noUo/s80-c/gravatar.png); 
}</blockquote>
 
<ul>
<li>Step 5  Cari Kode </body> lalu pastekan kode berikut diatasnya</li>
</ul>
 
<blockquote class="tr_bq">
<div id='cm-container'/> <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbZr_vIOjBjcamPqG491RoqHuaeNTR9_6Vt3PB5Q21dWR7UbbQ4K5-mFKJMzLidbMIr9OqpPm58zOLnetrPq387cXsHwby1RewEQ2iAm2s-g7U0pN8ad-8_gihjTVmSBhyphenhyphenNqgqUnNRvNc/s1600/lonceng.png'/></div> <div id='cm-total'/> <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipoH5Dz4EwDRVH9LL1UcPblYCnzWS4r1NTVR260p20vAdyxxEjopzQN0cUnlsQzCwmaoR0C0speEIko04k52ToLqtsiqFIScGwnARWZOR1khzy5rBjmvS70rcekTaNXD4aX9CW6L9DhrE/s1600/delete4.png' title='close'/></div> <script> //<![CDATA[ var originalTitle = document.title; var cm_config = {     home_page: "http://blog.kangismet.net",     max_result: 6,     t_w: 80,     t_h: 80,     summary: 40,     new_tab_link: true,     ct_id: "cm-container",     new_cm: " Komentar Baru!",     interval: 30000,     alert: true,     alert: function(total) {         document.getElementById("cm-total").innerHTML = ''+total+'';         document.title = '(' + total + ') ' + originalTitle;     } }; $('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();}; //]]> </script> <script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/></blockquote>
<ul>
<li>Step 6 Pastekan kode berikut diatas </head></li>
</ul>
<blockquote class="tr_bq">
<script src='<a href="http://code.jquery.com/jquery-2.0.2.js'/" rel="nofollow" style="background-color: white; color: #3b5998; cursor: pointer; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13.63636302947998px; line-height: 20px; text-decoration: none;" target="_blank">http://code.jquery.com/jquery-2.0.2.js'/</a>></blockquote>
<ul>
<li>Step 7 Simpan lalu cek bog anda untuk melihat hasilnya</li>
</ul>
Jika anda masih belum bisa memahami postingan ini anda bisa melihat pembahasan yang mungkin bisa lebih jelas <a href="http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html" rel="nofollow" target="_blank">disini </a> 
 
 
 
jika ada yang ingin agan tanyakan  silahkan berkomentar .wassalamualaikum wr.wb.

Notifikasi Komentar Ala Google Plus Di Blogspot

jika anda seorang blogger maka anda pasti sudah tidak asing dengan google plus, jika anda masih tidak mengetahuinya anda bisa menyimak penje...

Baca selengkapnya »

Memasang Tombol Back To Top Diatas Footer Blog

Unknown 16 back to top, sticky widget, widget 16.58

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC3bcBLCAWYrfM8MHfZwr6_0qKpHjzec0k9IsXB9T9mKVYs13QqK-l7VO9RRnY8BebFuSzMku54c8YQKPwQQdnJcypMppvGtHmf81hMueFmmq3WquEZunR7e01WRV85dd0H5IDZ-CZ4fRW/s1600/ddada.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Memasang Tombol Back To Top Diatas Footer Blog" border="0" height="49" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC3bcBLCAWYrfM8MHfZwr6_0qKpHjzec0k9IsXB9T9mKVYs13QqK-l7VO9RRnY8BebFuSzMku54c8YQKPwQQdnJcypMppvGtHmf81hMueFmmq3WquEZunR7e01WRV85dd0H5IDZ-CZ4fRW/s1600/ddada.png" title="Memasang Tombol Back To Top Diatas Footer Blog" width="640" /></a> 
Memiliki tombol back to top  bisa sangat berguna untuk mengubah blog kita lebih user friendly, tips ini sangat simpel tapi cukup efektif untuk para pengunjung. Jika template blog anda memiliki ukuran yang cukup panjang maka pengunjung akan sangat susah untuk kembali ke bagian atas blog anda,biasanya banyak orang yang memasang widget ini di bagian samping namun kali ini saya akan membagikan widget back to top yang berada di atas footer. 
 
Dengan widget ini tidak akan memakan ruang ( space ) bagian samping blog anda yang biasanya diisi iklan atau bahkan sidebar anda. Dengan memakai widget ini maka hal tersebut bisa diatasi karena posisinya akan dipindah diatas footer blog anda. 
 
 
<h4>
Cara pemasangan</h4>
<ul>
<li>Step 1  Buka blogger.com lalu pilih blog  anda</li>
<li>Step 2  Pilih template lalu edit html</li>
<li>Step 3  Cari kode ]]></b:skin> dengan mengklik   <key>CTRL</key> +<key>F</key> </li>
<li>Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi</li>
</ul>
 
<blockquote class="tr_bq">
.BloggerSpiceB2T {text-align:center;margin-top:20px;color: #333}.BloggerSpiceB2T a {font-size: 12px; color:#fff;font-weight: bold;padding: 8px;text-transform: uppercase;background:#444;border-radius:3px}</blockquote>
 
<ul>
<li>Step 5  Selanjutnya cari kode yang mirip dengan <footer id='footer-wrapper'></li>
<li>Step 6  Pastekan kode berikut diatas  <footer id='footer-wrapper'></li>
</ul>
<blockquote class="tr_bq">
<div class='BloggerSpiceB2T'><a href='#'>Back to Top</a></div></blockquote>
 
<ul>
<li>Step 7  Simpan lalu cek bog anda untuk melihat hasilnya</li>
</ul>
 
<div class="warning">
Jika anda berpikir widget back to top  ini kurang sesuai dengan tampilan blog anda,jangan khawatir kami sudah menyediakan beragam widget back to top lainnya( <a href="http://blogger-nesia.blogspot.com/search/label/back%20to%20top" rel="nofollow" target="_blank">Klik Disini</a> ) 
 </div>
jika ada yang ingin agan tanyakan  silahkan berkomentar .wassalamualaikum wr.wb.

Memasang Tombol Back To Top Diatas Footer Blog

Memiliki tombol back to top bisa sangat berguna untuk mengubah blog kita lebih user friendly, tips ini sangat simpel tapi cukup efektif un...

Baca selengkapnya »

Pure Css Tombol Share Elegan Di Blogspot

Unknown 4 css, share, socmed, sticky widget, tutorial blog 18.11

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2D4AAuctyi0g7P3cx60EYsw4BhuloSc95SKntMMnQW4Lgg1xIseb4bU33mIuIOG8GienFQHGRdpgQ_7temszTT2PgZTuTRIulZ-X1vzZTePJzdhi0suHlvIFN9SbLv7p1jTbkCcAXg1rZ/s1600/hover.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2D4AAuctyi0g7P3cx60EYsw4BhuloSc95SKntMMnQW4Lgg1xIseb4bU33mIuIOG8GienFQHGRdpgQ_7temszTT2PgZTuTRIulZ-X1vzZTePJzdhi0suHlvIFN9SbLv7p1jTbkCcAXg1rZ/s1600/hover.png" /></a></div>
Kali ini saya akan share sebuah social share yang memanfaatkan efek hover, dengan efek ini maka tombolnya akan hilang namun ketika anda menaruh cursor diatasnya maka tombol tersebut baru akan muncul. Tombol ini  bisa anda tempatkan dibawah postingan (seperti <a href="http://blogger-nesia.blogspot.com/2014/01/cara-memasang-tombol-di-posting-blog.html" target="_blank">Cara Memasang Tombol Share Di Postingan Blog</a> )  atau bisa juga anda tempatkan di sidebar seperti yang ada di demo. 
 
 
 
 
<div style="text-align: start;">
<a class="demo" href="http://infolerss.blogspot.com/" rel="nofollow" style="text-align: center;" target="_blank">Demo</a></div>
 
 
 
 
 
Kali ini saya akan memberitahukan kedua caranya yang akan saya jabarkan pada dua halaman berikut (pilih sesuai dimana anda ingin memasangnya ) 
<div class="info">
<a href="http://blogger-nesia.blogspot.com/p/tes.html" rel="nofollow" target="_blank">Pasang Di Sidebar</a></div>
 
<div class="info">
<a href="http://blogger-nesia.blogspot.com/p/judul-demo.html" rel="nofollow" target="_blank">pasang di bawah postingan</a></div>
 
 
anda cukup mengklik link diatas dan anda bisa membaca tutorial disana 
 
jika ada yang ingin agan tanyakan  silahkan berkomentar .wassalamualaikum wr.wb.

Pure Css Tombol Share Elegan Di Blogspot

Kali ini saya akan share sebuah social share yang memanfaatkan efek hover, dengan efek ini maka tombolnya akan hilang namun ketika anda ...

Baca selengkapnya »

Cara Pasang Menu Vertikal Di Blog

Unknown 0 menubar, sticky widget, tutorial blog, widget 16.43

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkmvi3n-E_01TPBKeaGAy-LewfW1BsdCtUmY2ltc-rAmLtiXQpaEj6eGQ_H4DcCQWZHmyYgC2LIFsQJHEmFBPPffrCYzpMOuDnyJ5KtPS95QFXnkrsR9cUkSyaIFh99GADw2cGPB-3XdE/s1600/vertikal+menu.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img alt="Cara Pasang Vertikal Menu Keren Di Blog" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkmvi3n-E_01TPBKeaGAy-LewfW1BsdCtUmY2ltc-rAmLtiXQpaEj6eGQ_H4DcCQWZHmyYgC2LIFsQJHEmFBPPffrCYzpMOuDnyJ5KtPS95QFXnkrsR9cUkSyaIFh99GADw2cGPB-3XdE/s1600/vertikal+menu.png" title="Cara Pasang Vertikal Menu Keren Di Blog" width="76" /></a> 
Assalamualaikum.wr.wb. Kali ini saya akan posting tentang Cara Pasang Menu Vertikal Di Blog. Menu ini berbeda dengan menu horizontal yang biasanya kita liat di bagian atas blog saat ini, widget  ini bisa kita tempatkan di bagian samping blog kita dan akan megikuti jika kita scroll blog ke bawah (sticky widget ) . Sebenarnya fungsi utama dari widget ini adalah : 
<ul>
<li>1.Memudahkan agar anda bisa memilih menu tanpa harus kembali naik ke atas</li>
<li>2.Mmemperindah blog anda</li>
</ul>
 
 
Jika anda ingin melihat demo klik dibawah ini 
 
<div style="text-align: justify;">
<a class="a-btn" href="http://demo-infomdb.blogspot.com/">
menu vertikal 
demo

</a>
</div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<h4>
Cara Pemasangan</h4>
 
 
<ul>
<li>1.buka blogger > blog anda</li>
<li>2.tata letak      > tambahkan widget</li>
<li>3.html/javascript</li>
<li>4.pastekan kode dibawah ini</li>
</ul>
<div>
 </div>
<blockquote class="tr_bq">
<style type="text/css"> 
#hor { 
list-style:none; 
padding:0; 
margin:0;} 
#hor li { 
float:left; 
padding:5px;} 
#hor a { 
display:block; 
height: 12px; 
text-indent:-999em;} 
#hor a.home { 
width:46px; 
background:url(vHome.gif) no-repeat 0 0;} 
#hor a.download { 
width:94px; 
background:url(vDownload.gif) no-repeat 0 0;} 
#hor a.contact { 
width:74px; 
background:url(vContact.gif) no-repeat 0 0;} 
/* CSS Style for Vertical Menu */ 
#ver { 
list-style:none; 
padding:0; 
margin:0; 
} 
#ver li { 
padding:2px;} 
#ver li a { 
display:block; 
height:12px; 
text-indent:-999em; 
} 
#ver a.home { 
width:47px; 
background:url(hHome.gif) no-repeat 0 0; 
} 
#ver a.download { 
width:95px; 
background:url(hDownload.gif) no-repeat 0 0; 
} 
#ver a.contact { 
width:74px; 
background:url(hContact.gif) no-repeat 0 0; 
} 
 
.clear { 
clear:both; 
} 
 
*{ 
/* A universal CSS reset */ 
margin:0; 
padding:0; 
} 
 
#navigationMenu body{ 
font-size:14px; 
color:#666; 
background:#111 no-repeat; 
 
/* CSS3 Radial Gradients */ 
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); 
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); 
font-family:Arial, Helvetica, sans-serif; 
} 
#navigationMenu li{ 
list-style:none; 
height:39px; 
padding:2px; 
width:40px; 
} 
#navigationMenu span{ 
/* Container properties */ 
width:0; 
left:38px; 
padding:0; 
position:absolute; 
overflow:hidden; 
/* Text properties */ 
font-family:'Myriad Pro',Arial, Helvetica, sans-serif; 
font-size:18px; 
font-weight:bold; 
letter-spacing:0.6px; 
white-space:nowrap; 
line-height:39px; 
/* CSS3 Transition: */ 
-webkit-transition: 0.25s; 
/* Future proofing (these do not work yet): */ 
-moz-transition: 0.25s; 
transition: 0.25s; 
} 
#navigationMenu a{ 
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFuVrltp93tvIsA9cR041JptzcCQc51_uJ04uyiwRqvI7q2ftsSypN0VLaH8zGkO4Z_qMiKYxrTNqgKVyAhSpyaorENcOrQq2noQTKrQXGUESr8gVYdu5Cj3XwAGKYUc3tz48uAPvqbAo/s1600/navigation.jpg') no-repeat; 
height:39px; 
width:38px; 
display:block; 
position:relative; 
} 
/* General hover styles */ 
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } 
#navigationMenu a:hover{ 
text-decoration:none; 
/* CSS outer glow with the box-shadow property */ 
-moz-box-shadow:0 0 5px #9ddff5; 
-webkit-box-shadow:0 0 5px #9ddff5; 
box-shadow:0 0 5px #9ddff5; 
} 
/* Green Button */ 
#navigationMenu .home { background-position:0 0;} 
#navigationMenu .home:hover { background-position:0 -39px;} 
#navigationMenu .home span{ 
background-color:#7da315; 
color:#3d4f0c; 
text-shadow:1px 1px 0 #99bf31; 
} 
/* Blue Button */ 
#navigationMenu .about { background-position:-38px 0;} 
#navigationMenu .about:hover { background-position:-38px -39px;} 
#navigationMenu .about span{ 
background-color:#1e8bb4; 
color:#223a44; 
text-shadow:1px 1px 0 #44a8d0; 
} 
/* Orange Button */ 
#navigationMenu .services { background-position:-76px 0;} 
#navigationMenu .services:hover { background-position:-76px -39px;} 
#navigationMenu .services span{ 
background-color:#c86c1f; 
color:#5a3517; 
text-shadow:1px 1px 0 #d28344; 
} 
/* Yellow Button */ 
#navigationMenu .portfolio { background-position:-114px 0;} 
#navigationMenu .portfolio:hover{ background-position:-114px -39px;} 
#navigationMenu .portfolio span{ 
background-color:#d0a525; 
color:#604e18; 
text-shadow:1px 1px 0 #d8b54b; 
} 
/* Purple Button */ 
#navigationMenu .contact { background-position:-152px 0;} 
#navigationMenu .contact:hover { background-position:-152px -39px;} 
#navigationMenu .contact span{ 
background-color:#af1e83; 
color:#460f35; 
text-shadow:1px 1px 0 #d244a6; 
} 
</style> 
Vertical Menu by<a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a> 
<div style='position: fixed; top: 40%; left: 0%;'/> 
<ul id="navigationMenu"> 
<li> 
<a class="Home" href="http://URL-BLOG-SOBAT.com"> 
JUDULMENU 
</a> 
</li> 
<li> 
<a class="about" href="http://URL-BLOG-SOBAT.com"> 
JUDULMENU 
</a> 
</li> 
<li> 
<a class="categories" href="http://URL-BLOG-SOBAT.com"> 
JUDULMENU 
</a> 
</li> 
<li> 
<a class="services" href="http://URL-BLOG-SOBAT.com"> 
JUDULMENU 
</a> 
</li> 
<li> 
<a class="contact" href="http://URL-BLOG-SOBAT.com"> 
JUDULMENU 
</a> 
</li> 
</ul> 
</div></blockquote>
<div>
 </div>
<ul>
<li>5.lalu ubah kode http://URL-BLOG-SOBAT.com dengan url tujuan anda</li>
<li>6.ubah juga kode JUDULMENU untuk mengubah dan memberi nama menu anda</li>
</ul>
 
<ul>
<li>7.simpan</li>
</ul>
 Jika ada yang ingin agan tanyakan silahkan ada yang ingin tanyakan silahkan berkomentar di postingan ini

Cara Pasang Menu Vertikal Di Blog

Assalamualaikum.wr.wb. Kali ini saya akan posting tentang Cara Pasang Menu Vertikal Di Blog . Menu ini berbeda dengan menu horizontal yang ...

Baca selengkapnya »

blogger-nesia

Cara Membuat Tombol Back To Top Ala Kang Ismet

Notifikasi Komentar Ala Google Plus Di Blogspot

Memasang Tombol Back To Top Diatas Footer Blog

Pure Css Tombol Share Elegan Di Blogspot

Cara Pasang Menu Vertikal Di Blog

Popular

statistik

Labels