Meningkatkan Resolusi layar note botebook 1024x600 menjadi 1024x768

Kebanyakan Netbook pada umumnya memiliki display maximum 1024x600 pixel. Namun bila anda ingin meningkatkan resolusi tersebut, ada sebuah cara memodifikasi sederhana yang diperlukan di registry Windows unutk membolehkan anda meningkatkan resolusi layar sistem apapun. Maka ikutilah langkah-langkah berikut.

Cara ini sudah saya coba di NetBook HP Mini, dan hasilnya bisa untuk menjalankan aplikasi metro di Windows 8, yang memang membutuhkan resolusi minimal 1024x768
.
                                     


Berikut caranya :

Buka regedit (tekan Win+R pada keyboard, lalu ketik regedit [enter])

Cari key Lokasi berikut pada dialog registry,

HKEY_LOCAL_MACHINE / SYSTEM / CurrentControlSet / Control / Class / {4D36E968-E325-11CE-BFC1-08002BE10318} / 0000
HKEY_LOCAL_MACHINE / SYSTEM / CurrentControlSet / Control / Class / {4D36E968-E325-11CE-BFC1-08002BE10318} / 0001

Di kedua lokasi ini, anda akan menemukan <bold>"Display1_DownScalingSupported"<bold> dalam daftar DWORD, klik kanan pada 'DWORD' dan pilih untuk memodifikasi, mengubah value dari 0 ke 1 untuk DWORD lalu tekan OK.
NOTE : jika DWORD tidak ada, buat DWORD sendiri dengan nama tersebut dan value data diganti 1


Tutup regedit lalu restart netbook anda.

Sekarang buka pengaturan resolusi layar (Control Panel -> Appearance and Personalization -> Display -> Screen Resolution) pada Netbook anda dan di sana anda dapat melihat pilihan yang lebih di Resolution. Kini anda dapat memilih resolusi layar 1024x768.

Widget Unik Telur Ceplok Di Blog

Kreatif dan unik, itulah yang terlintas dipikiran saya ketika melihat widget ini. Kalau di post sebelumnya saya share cara membuat widget banjir di blog, kali ini saya akan share Widget Unik Telur Ceplok Di Blog. Blog sobat hampir sama seperti penggorengan kalau menggunakan widget yang satu ini, hee..Telur ceplok ada dimana-mana, bikin laper, bikin risih, tapi unik..Buat sobat blogger yang ingin menambahkan widget telur cepluk ini ke blog nya, silahkan copy kode html dibawah ini dan masukkan ke add Gadget HTML :

<script language="javascript"> nd_mode="eggs"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efektelur.js"></script>

Widget Unik Banjir Di Blog

Banjir...Banjir...Banjir..Musim hujan begini sudah pasti banyak daerah-daerah yang terkena banjir, terutama kota jakarta tercinta ini. Sobat rumah nya tidak terkena banjir kan ? kalau sudah terkena banjir, siap-siap saja semua aktifitas sobat bakal terganggu. Postingan kali ini, masih berkaitan dengan widget-widget unik yang bisa sobat tambahkan di blog sobat, kalau sebelumnya saya post cara membuat widget merangkak di blog. kali ini saya akan share cara membuat widget banjir di blog. Widget ini sangat unik, bahkan karena terlalu unik, sepertiya jarang ada yang memakai widget ini, tapi kalau sobat ingin blognya terlihat berbeda dengan yang lain, tidak ada salahnya sobat pakai yang satu ini. Untuk menggunakanya sobat tinggal masukkan kode berikut ini ke add Gadget HTML :

<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/efek_banjir.js"></script>

Widget Lucu Bayi Merangkak Di Blog

Ada-ada saja ulah bayi yang satu ini, tanpa kita undang tiba-tiba datang dan mecoret-coret blog kita. Ini adalah beberapa widget unik yang akan saya bagikan buat sobat bloggr. Widget bayi merangkak ini cukup mengganggu kalau sobat pakai di blog,tapi sangat unik. Kalau sobat ingin memakai widget ini di blog caranya sangatlah mudah, tinggal masukkan kode berikut ini ke add gadget HTML. Berikut kode nya :

<script language="javascript"> nd_mode="baby"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efekbayiberjalan.js"></script>

Bagaimana sob,,unik kan widget bayi merangkak ini ??

PPC Chitika Support All Country

PPC Chitika adalah salah satu PPC favorite saya, karena sudah beberapa kali saya mendapatkan Pembayaran dari Chitika. Dan sesuai judul diatas, ada kabar gembira nih sob untuk para publisher Indonesia, bahwa Chitika sekarang telah men-support semua negara. Hal tersebut disampaikan melalui E-Mail oleh Chitika pada pukul 13:16 waktu Indonesia Barat, dan berikut potongan isi E-Mail dari Chitika :

Seperti yang telah sobat ketahui sebelumnya, chitika hanya support blog atau website yang mendapat klik dari negara seperti US,Canada saja. Selain itu Chitika menawarkan lebih, bagi member yang telah terdaftar sebelum tanggal 5 Agustus maka Chitika akan membayar Double, misalkan saldo anda $80 maka chitika akan membayar sebesart $160, batas waktu sampai dengan 30 September.

Dengan adanya kabar gembira ini, tentunya menjadi peluang buat sobat blogger untuk memonetize blognya dengan PPC Chitika walaupun blognya berbahasa indonesia, seperti punya saya ini.

Demikian kabar gembira dari PPC Chitika Support All Country. Sukses selalu sob.

Semoga Bermanfaat.

Cara Membuat Widget Artikel Terbaru Dengan Tooltip

Cara Membuat Widget Artikel Terbaru Dengan Tooltip - Buat sobat blogger pengguna blogspot pasti sudah tidak asing lagi dengan widget artikel terbaru ini, pada postingan saya sebelumnya saya posting cara membuat widget artikel terbaru. Widget ini biasanya diletakkan di sidebar blog untuk menampilkan artikel terbaru blog sobat. Tips blog kali ini yang akan saya share adalah memodifikasi tampilan widget artikel terbaru ini dengan memiliki efek tooltip. Seperti apa penampilanya, silahkan lihat live demo nya : DEMO

Cara Membuat Widget Artikel Terbaru Dengan Tooltip :
Untuk membuat nya sangat mudah sob, tinggal masukkan kode dibawah ini ke add gadget HTML blog sobat :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#mini-gallery {
  width:380px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
  margin:0px auto;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#7E7E7E;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:normal 14px Impact,Arial,Sans-Serif;
  color:#1CAA01;
  text-shadow:0px 1px 0px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#292929;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #00C200;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#09AC0F;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>
<script type="text/javascript">
var rpTitle     = "Artikel Terbaru", // Tentukan judul widget
    numposts    = 20,                // Tentukan jumlah thumbnail/posting
    numchar     = 300,               // Tentukan jumlah karakter pada deskripsi tooltip
    rcFadeSpeed = 600,               // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pBlank      = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogURL     = "http://mkr-site.blogspot.com"; // Alamat blogmu
</script>
<script src="https://ivyth.googlecode.com/svn/js/rp-m-gallery-dte.js" type="text/javascript"></script>

Note :

• Ganti URL http://mkr-site.blogspot.com dengan alamat blog sobat.

• rpTitle untuk judul dari widget

• Tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numposts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numchar.

• Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, buang kode itu dari widget.

• Klik Simpan dan lihat hasilnya. 

Cukup sekian sob artikel Cara Membuat Widget Artikel Terbaru Dengan Tooltip.

Semoga bermanfaat.

Script : www.mkr-site.blogspot.com

Cara Membuat Social Icon Dengan CSS3

Tips blog kali ini bisa meningkatkan jumlah pelanggan social media sobat. Bukan tidak mungkin, karena tombol social icon ini penampilan nya sangat menarik yang membuat kita gatal untuk mengkliknya..hehee..Sesuai dengan judulnya Cara Membuat Social Icon Dengan CSS3, widget social ini memang menggunakan CSS3 yang membuat penampilanya menjadi sangat menarik. Untuk Live demo nya coba lihat dibawah ini :

Bagaimana sob ? keren gak ?..Kalau sobat tertarik ingin membuat nya, cara nya sangat mudah. Silahkan copy paste kode dibawah ini ke add gadget HTML blog sobat :

<style>p#OW_socialicons img {
 /* Spinning Social Icons Widget By Oto Website */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

p#OW_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget By Oto Website */
</style> 



<center><p id="OW_socialicons">
    <a href="http://www.facebook.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjooYaApEjiyTYC1p7jv5RMls4FDvsVzdHBzZ_3V2teY8_YnxqHTAk6dLqwWNyKw5WtQX3_9l5Qva8TnSGIpXMi0ntlJpKqeAnX2YaVFXC_Hov33zSu-acoQ8ob7wgPTaaMdqBsTmJNiA/s1600/otowebsite.blogspot.com-facebook.png" /></a>
    <a href="http://www.twitter.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhklwPPyJBGXmUQv9-yuNqmO4KXwyERXURiwf5dQvvGZg_Gfdi8oxBb6cyA4cpfwmnb-B6N1MhnfpZrju4bX8wM2lvG8jH8UXu7J4r-VCkd0YF4Tb9k63xVXhqN2nAlm2SlUQdYBCko9Q/s1600/otowebsite.blogspot.com-twitter.png" /></a>
    <a href="https://plus.google.com/115780777398536909642">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVtjFQ30yEWjG2Vbg2D6ggPozcIbN2dnly_wrqrHFCfFo5X60ym1gZ14M_WdHduYePK5hlzDaB5Xq1Axey9bpwoeLb_635upTVkZc6lmR83-X2hkGxof4-ANYGDfwETRV1EdzeCWf-bQ/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijon7-np0Hc4szWZeP9sJ1Wnvqm18MqndURk9YQ-vZRfY3eVcFck1F7B_dKDFpMR5hPedfZfy_qGzpzYvyfptgcE6CsisXHzJ7ED76tGBgh4XEX0mcR8X8CQMoTieZlB3HYh0FopfjOw/s1600/otowebsite.blogspot.com-rss.png" /></a>
    <a href="https://www.youtube.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkTbHCAosdm1POcF3oaZA_ZkrChvD2ZjBxBaLB964HRzsVi3As7CoW_w3X7yeGunLzM3rScbHqLIhmlx-xmxNzb1CaJN617UYa9PwXhkFR2KKAX9RdisNlOjs7KKYK2w1Huth9om6TkQ/s1600/otowebsite.blogspot.com-youtube.png" /></a>
</p></center>

Note : Silahkan di ganti URL social media yang saya beri warna diatas, dengan milik sobat sendiri.

Cukup sekian sob. Terima kasih telah membaca artikel Cara Membuat Social Icon Dengan CSS3.

Semoga bermanfaat.




Script : www.otowebsite.blogspot.com

Radio Site..

Klik Aja Play Untuk Mendengarkan Lagunya..!!

▼ Kalau Kami Tidak Online,, Silahkan Anda Request Lagunya Ke Nomor Hp Kami ▼

 Dj - Van - 085278226505 

 Dj - Dzhull - 085211540664 

 Dj - Dharma - 087792595540

Cara Membuat Menu Di Blog - Ribbon CSS3

Selamat pagi sobat blogger tepat pukul 02:38, pada pagi kali ini sambil begadang karena belum bisa tidur, saya akan berbagi tips blog Cara Membuat Menu Di Blog - Ribbon CSS3. Pada postingan saya sebelumnya adalah Cara Membuat Menu Di blog Seperti Google. Ribbon Menu adalah Sebuah Menu navigasi yang berbentuk atau menyerupai sebuah Pita dan pembentukannya tidak menggunakan gambar  dan hanya menggunakan Kode CSS3 sehingga membuat Ribbon Menu ini sangatlah Efisien dan ringan untuk digunakan. Lebih jelasnya silahkan sobat lihat live demo nya : DEMO. 

Silahkan Simak Dibawah ini untuk Cara Membuatnya.

•     Pertama Silahkan Sobat Masuk atau Login Ke Akun Blogger.
•     Cari Kode ]]></b:skin> pada Kode HTML Tempalte Sobat.
•     Bila Sudah ketemu silahkan taruh semua kode berikut tepat diatasnya.

.ribbon {
display:inline-block;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #01978C;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#01978C;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}

Selanjutnya Cari Kode <body> dan letakkan Kode Berikut Dibawahnya.

<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>Software</span></a>
<a href='#'><span>Game</span></a>
<a href='#'><span>Tutorial</span></a>
<a href='#' ><span>About</span></a>
<a href='#'><span>Contact</span></a>
</div>

Note : Kode ini bisa juga sobat letakkan di add gadget HTML.


Sekarang Simpan Template Sobat dan Lihat Hasilnya.

Cukup Sekian sob Tutorial Cara Membuat Menu Di Blog - Ribbon CSS3.

Semoga bermanfaat.

Script by : www.filiex.com

Cara Membuat Menu Di blog Seperti Google

Satu lagi nih sob koleksi cara membuat menu di blogspot. Kalau sebelumnya saya posting Cara Membuat Menu D tree Seperti Folder Windows, kali ini saya akan share Cara Membuat Menu Di blog Seperti Google. Menu yang satu ini tampilanya 90% mirip seperti menu mbah google, dan yang kerenya lagi sudah dilengkapi dengan efek fixed scroll.

Untuk membuat menu navigasi ala google ini, ada tiga script yang harus sobat masukan kedalam template blogger, diantaranya adalah kode Java script, kode CSS Dan kode html sebagai kontentnya. Untuk lebih jelasnya, silahkan sobat lihat live demonya : DEMO

Langsung saja, berikut langkah-langkah cara membuatnya :

Pertama : Sobat masukkan kode dibawah ini, tepat diatas </head>
 

<script src='http://cing-ss.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>

<script src='http://cing-ss.googlecode.com/files/jquery.google_menu.js' type='text/javascript'/>

<script>

$('document').ready(function(){

$('.menu').fixedMenu();

});

</script>

Kedua : Masukkan kode berikut tepat diatas  ]]></b:skin>
 

.menu{

position:fixed;

top:0;

left:0;

width:100%;

font:13px/27px Arial,sans-serif;

color:#3366cc;

height:30px;

background:#2D2D2D;

}

.menu a:hover{

background-color:#676767;

color:#CCCCCC;

}

.menu a{

text-decoration:none;

padding:6px 8px 7px;

color:#CCCCCC;

outline:none;

}

.menu ul{

list-style:none;

margin:0;

padding:0 0 0 10px;

}

.menu ul li{

padding:0;

float:left;

}

.menu ul li ul li{

padding:0;

float:none;

margin:0 0 0 0px;

width:100%;

}

.menu ul li ul{

position:absolute;

border:1px solid #C3D1EC;

-webkit-box-shadow:0 1px 5px #CCCCCC;

-moz-box-shadow:0 1px 5px #CCCCCC;

box-shadow:0 1px 5px #CCCCCC;

margin-top:-1px;

display:none;

padding:0px 16px 0px 0;

}

.active ul{

display:block !important;

}

.single ul{

display:block !important;

}

.active a{

background-color:white;

border:1px solid #C3D1EC;

border-bottom:0;

-webkit-box-shadow:0 -1px 5px #CCCCCC;

-moz-box-shadow:0 -1px 5px #CCCCCC;

box-shadow:0 -1px 5px #CCCCCC;

display:block;

height:29px;

padding:0 8px 0 8px;

position:relative;

z-index:1;

color:#3366CC;

}

.current a{

background-color:#2D2D2D;

border-top:2px solid #DD4B39;/*garis warna merah diatas*/

border-bottom:0;

display:block;

height:25px;

padding:0 8px 0 8px;

position:relative;

z-index:1;

color:#FFFFFF;

font-weight:bold;

}

.active a:hover{

background-color:white;

color:#3366CC;

}

.active ul a:hover{

background-color:#e4ebf8;

}

.active ul a{

border:0 !important;

-webkit-box-shadow:0 0 0 #CCCCCC;

-moz-box-shadow:0 0 0 #CCCCCC;

box-shadow:0 0 0 #CCCCCC;

border:0;

width:100%;

}

.arrow{

border-color:#C0C0C0 transparent white;

border-style:solid dashed dashed;

margin-left:5px;

position:relative;

top:10px;

}

.mid-line{

background-color:#FFF;

border-top:1px solid #e5e5e5;

font-size:0;

}

Ketiga : Masukkan kode berikut dibawah  Tag pembukaan kode outer-wrapper 
 

<div class='menu'>

 <ul>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://plus.google.com' target='_blank'>+You</a>

  </li>

        <!-- Using class="current" for the link of the current page -->

      <li class='current'>

  <a href='http://www.google.co.in/' target='_blank'>Web</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://orkut.com' target='_blank'>Orkut</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://gmail.com' target='_blank'>Gmail</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='https://www.google.com/calendar' target='_blank'>Calendar</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='https://docs.google.com' target='_blank'>Documents</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://picasaweb.google.co.in/home' target='_blank'>Photos</a>

  </li>

   <li>

  <a href='#'>More<span class='arrow'/></a>

        <!-- Drop Down menu Items -->

<ul>

   <li><a href='#'>Reader</a></li>

   <li><a href='#'>Sites</a></li>

   <li><a href='#'>Groups</a></li>

   <li><a href='http://www.youtube.com'>YouTube</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

   <li><a href='#'>Images</a></li>

   <li><a href='#'>Maps</a></li>

   <li><a href='http://translate.google.co.in/'>Translate</a></li>

   <li><a href='http://books.google.co.in'>Books</a></li>

   <li><a href='http://scholar.google.co.in/'>Scholar</a></li>

   <li><a href='http://blogsearch.google.co.in'>Blogs</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

   <li><a href='http://www.google.co.in/intl/en/options/'>even more &gt;&gt;</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

  </ul>

  </li>

 </ul>

</div>

Note : Silahkan sobat ganti setiap link yang ada dengan link pada blog sobat sendiri.

Cukup sekian artikel Cara Membuat Menu Di blog Seperti Google.

Semoga bermanfaat.

Source code : loefa-cebook.blogspot.com

Cara Membuat Scrolling Fixed

Tips blog kali ini saya akan share Cara Membuat Scrolling Fixed. Scrolling fixed ini salah satu efek konten yang banyak digunakan pada website dengan desain  modern, fungsinya adalah memberi efek terbawa, saat halaman ditarik kebawah.

Contoh situs yang menggunakan scrolling fixed adalah facebook dan blogger, jika sobat sering masuk ke facebook, saat sobat menarik halaman profile  kebawah, ada sebuah konten yang seolah tertarik kebawah, mengikuti layar. Begitu juga dengan blogger, blogger menggunakan efek scrolling fixed di dashboard pada bagian header, saat sobat menarik halaman dashboar blogger kebawah, maka bagian headernya seolah terangkat dan terseret kebawah. Untuk Live demonya silahkan sobat lihat disi : DEMO.

Lalu bagaimana cara membuatnya ? jika sobat tertarik untuk membuat nya silahkan ikuti langkah berikut : Untuk membuat efek scrolling fixed ini, sobat tinggal masuk ke halaman edit html blogger, dan memasukan kode javascript berikut tepat diatas penutup tag head </head>.

<script>

$(document).ready(function(){

/* loefa-cebook.blogspot.com scrolling fixed div start */

 var div = $('#header-wrapper');

    var lc = $(div).offset().top;

  

    $.event.add(window, "scroll", function() {

        var p = $(window).scrollTop();

        $(div).css('position',((p)>lc) ? 'fixed' : '');

        $(div).css('top',((p)>lc) ? '0px' : '');

  $(div).css('box-shadow',((p)>lc) ?'0px 0px 3px #222':'');

   

   

    });

  

});

</script>

Note :
Jika sobat ingin yang diberi efek ini pada menu navigasi blog bukan pada header, sobat tinggal mengganti “#header-wrapper” yang ada di kode javascript, dengan tag css menu navigasi, contoh “#menu”, jika sudah berhasil silahkan di save.

Cukup sekian tips blog kali ini, terima kasih telah membaca artikel Cara Membuat Scrolling Fixed.

Semoga bermanfaat

Source

Cara Membuat Popup Iklan dengan Tombol Close

Cara Membuat Popup Iklan dengan Tombol Close ini terinspirasi seperti youtube. Kalau sobat berkujung ke www.youtube.com, pas pertama kali masuk sobat akan disuguhi iklan popup dibawah header berukuran besar dengan tombol close, dan pastinya iklan tersebut membuat gatel jari kita untuk mengkliknya..hee..
Kalau sobat tertarik ingin membuat iklan popup seperti youtube itu, ikuti saja langkah-langkah dibawah ini, tapi hasilnya mungkin tidak 100% mirip, tergantung bagaimana sobat memodifikasinya.

Cara Membuat Popup Iklan dengan Tombol Close :

1. Sobat masukkan kode dibawah ini ke add gadget HTML, prosesnya saya balik untuk lebih meminimalisir kesalahan :

<div id="pb-box" class="mrpujiajadeh-popup">
<br /><span style="color: rgb(204, 0, 0);"></span><p align="right"><a href="#" class="close">
<br/><small><u>[x] Tutup Iklan</u></small></a></p>
<iframe vspace="0" frameborder="2" marginheight="100" marginwidth="100" readonly="true" height="400" src="http://beritamuslimsahih-ahlussunnah.blogspot.com/" hspace="10" scrolling="yes" width="100%" allowtransparency="true"></iframe>
</div>

<script type='text/javascript'>
$(document).ready(function() {
$('a.pb-window').click(function() {

//Getting the variable's value from a link
var pbBox = $(this).attr('href');

//Fade in the Popup
$(pbBox).fadeIn(300);

//Set the center alignment padding + border see css style
var popMargTop = ($(pbBox).height() + 24) / 2;
var popMargLeft = ($(pbBox).width() + 24) / 2;

$(pbBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);

return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .mrpujiajadeh-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>

Kode yang berwarna merah diatas, silahkan sobat ganti dengan kode script iklanya, bisa video,gambar dl.

2. Kemudian cari kode berikut:

    ]]></b:skin>

Jika sudah sobat temukan, tepat dibawahnya letakkan script jquery berikut:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/> 

3. Setelah itu tepat diatas kode ]]></b:skin>,letakkan barisan css berikut:

#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
.pb-popup{
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
fieldset {
border:none;
}

4. Sebelum di save, sobat preview terlebih dahulu, kalau terlihat berhasil tinggal di save saja.

Bagaimana sob, keren kan iklan pop up melayang ini ?.
Sampai disini tutorial Cara Membuat Popup Iklan dengan Tombol Close.

Semoga bermanfaat.

Script by : www.pelajaran-blog.blogspot.com

Cara Membuat Menu D tree Seperti Folder Windows

Selamat pagi sobat blogger, pada postingan kali ini saya akan berbagi Cara Membuat Menu D tree Seperti Folder Windows. Menu yang satu ini adalah salah satu koleksi menu yang saya share melalui blog ini. Pada postingan sbelumnya saya share Cara Membuat Menu Blog Diatas Header. 
Menu D tree ini termasuk menu yang unik, karena tampilanya menyerupai folder pada windows explore, dan menu d tree ini cukup sulit lhoo untuk mencari panduanya di mbah google. Untuk live demonya saya tidak sediakan, tapi sobat bisa lihat tampilanya seperti gambar diatas.

Langsung saja, Cara Membuat Menu D tree :

1. Cari kode <head> 
2. Kemudian masukkan kode dibawah ini tepat dibawah kode diatas.

<link href='http://membuatgempar.net23.net/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://membuatgempar.net23.net/dtree.js' type='text/javascript'/>

3. Save template
4. Sobat masuk ke bagian add gadget HTML, dan tambahkan kode dibawah ini pada add gadget HTML :

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://1.bp.blogspot.com/-RbQWnGW5bd8/UKJGKQD3f2I/AAAAAAAACmA/oLAHt0hhYUc/s200/pelajaran%2Bblog%2Bplus.gif" /><b>Buka</b></a> | <a href="javascript: d.closeAll();"><img src="http://2.bp.blogspot.com/-F6ylYYXiatg/UKJKASk86eI/AAAAAAAACnQ/XB9Ka_qHyO4/s200/pelajaran%2Bblog%2Bminus.gif" /><b>Tutup</b></a></p>
<script type="text/javascript">

<!--

d = new dTree('d');

d.add(0,-1,'Home','#');

d.add(1,0,'Menu 1')

d.add(3,1,'sub menu 1','');

d.add(10,3,'edit','#');

d.add(20,3,'edit','#');

d.add(30,3,'edit','#');

d.add(40,3,'edit','#');

d.add(50,3,'edit','#');

d.add(60,3,'edit','#');

d.add(70,3,'edit','#');

d.add(80,3,'edit','#');

d.add(90,3,'edit','#');

d.add(100,3,'edit');

d.add(110,3,'edit','#');

d.add(120,3,'edit','#');

d.add(5,1,'sub menu 2');

d.add(10,5,'edit','#');

d.add(20,5,'edit','#');

d.add(30,5,'edit','#');

d.add(40,5,'edit','#');

d.add(50,5,'edit','#');

d.add(60,5,'edit','#');

d.add(70,5,'edit','#');

d.add(80,5,'edit','#');

d.add(90,5,'edit','#');

d.add(2,0,'menu 2','','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(10,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(30,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(40,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(50,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(60,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(4,0,'menu 3','#','menu 3','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(6,0,'menu 4','#','menu 4','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(7,0,'menu 5','#','menu 5','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(8,0,'menu 6','#','menu 6','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

document.write(d);

//-->
</script>
</div>

**Keterangan:
Untuk tanda '#',sobat ganti dengan url tujuan misal http://.....
Sedang untuk kode yang saya beri nama 'edit',sobat rubah sesuai dengan keinginan,yang nantinya akan terbaca dalam menu dTree ini.

Okey, cukup sekian sob, terima kasih telah membaca artikel  Cara Membuat Menu D tree Seperti Folder Windows.

Semoga bermanfaat.

Cara Membuat Widget Artikel Terbaru

Cara Membuat Widget Artikel Terbaru ini saya dapat dari blog nya kang salman ( kucoba.com ). Menurut kang salman sih widget ini memakai JQuery dengan memiliki kelebihan-kelebihan sebagai berikut :

1.  Memiliki tampilan yang dinamis dan rapih.
2.  Memiliki Load yang cukup cepat
3.  Bisa di gunakan di Tab Menu atau New Window.
4.  Terdapat Informasi Jumlah komentar di masing-masing artikel yang di munculkan.
5.  Gambar/thumbails apik dan padat.
6.  dan masih banyak lagi deh yang jelas kang salman jamin sobat informasi maya bakal puas.

Nah buat sobat blogger yang tertarik memakai widget ini, silahkan ikuti caranya berikut ini :

Cara Membutnya :
1.  Login Ke Blogger
2.  Pilih Tata Letak / Rancangan
3.  Klik Tambah Widget/Gedget
4.  Pilih HTML/Javascript
5.  Paste-kan Kode di Bawah ini ke HTML/Javascript tadi.

<script language="JavaScript">imgr = new Array();imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";showRandomImg = true;boxwidth = 298;cellspacing = 8;borderColor = "#ffffff";bgTD = "#000000";thumbwidth = 40;thumbheight = 40;fntsize = 12;acolor = "#666";aBold = true;icon = " ";text = "comments";showPostDate = false;summaryPost = 40;summarFontsize = 10;summaryColor = "#666";icon2 = " ";numposts = 5;home_page = "http://asksalman19.blogspot.com/";</script><script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

6. Simpan. dan lihat hasilnya.

NB : Didalam kotak kode tersebut, terdapat satu kode seperti di bawah ini :

    numposts = 5;

Yang di beri tanda merah adalah jumlah post yang akan di tampilkan. Jika sobat mengisi 5 maka widget ini akan menampilkan 5 artikel baru dst.

Okey cukup sekian tips blog kali ini  Cara Membuat Widget Artikel Terbaru.


Semoga Bermanfaat



Scrip by : www.kucoba.com

Cara Membuat Menu Blog Diatas Header

Sobat blogger, tips blog kali ini yang akan saya share adalah Cara Membuat Menu Blog Diatas Header. Pada postingan saya sebelumnya, saya share cara membuat floating menu vertikal.
Tips blog ini sengaja saya koleksi untuk keperluan saya sendiri, saya ingin membuat menu diatas header yang kemudian memiliki fixed scroll, tapi pada menu yang satu ini belum memiliki efek fixed scroll, dipostingan saya berikutnya akan saya share cara membuat efek fixed scroll nya. Siapa tahu sobat blogger tertarik untuk membuat menu diatas header, tinggal ikuti saja langkah-langkah dibawah ini.

1. Langkah pertama, Login ke blogger.com dengan akun anda
2. Pilih Edit HTML pada elemen Template anda
3. Cari kode ]]></b:skin>
4. Setelah ketemu, letakkan kode berikut ini di atasnya

#catmenucontainer{
height:33px;
width:962px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijZcGvqlmi7MHI8J1WA0btNOnWox-gFdTsxiVlQPttswoI1YyMH6yQDEu1IXtpe7iOVgA1jnM8hFarznWBhStnNCZTJ38FR7zN7mW5nczfXHBqnI6s5iQYEB9lspzbK27trzCSo8ZuUJu0/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}


#catmenu{
margin: 0px;
padding: 0px;
width:962px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijZcGvqlmi7MHI8J1WA0btNOnWox-gFdTsxiVlQPttswoI1YyMH6yQDEu1IXtpe7iOVgA1jnM8hFarznWBhStnNCZTJ38FR7zN7mW5nczfXHBqnI6s5iQYEB9lspzbK27trzCSo8ZuUJu0/) repeat-x;
height:33px;
}


#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}


#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbsnHHXZ5Ngt0d7uu_6t6K3-FqyKTHZ5ZErJ1asyl52r3naLx1jsywFawGvkUDUYWwIj1SG3d0EuT2hYT9qc7AkoDQlKPdNr08A9SbYaOX5zbT-EPkq9kJDiLqltGM-FX94rWKpeVeViB8/) repeat-x;
color: #b0c4de;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}


#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;


}


#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbsnHHXZ5Ngt0d7uu_6t6K3-FqyKTHZ5ZErJ1asyl52r3naLx1jsywFawGvkUDUYWwIj1SG3d0EuT2hYT9qc7AkoDQlKPdNr08A9SbYaOX5zbT-EPkq9kJDiLqltGM-FX94rWKpeVeViB8/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}


#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}


#catmenu li li {
}


#catmenu li ul a {
width: 140px;
}


#catmenu li ul a:hover, #catmenu li ul a:active {
}


#catmenu li ul ul {
margin: -34px 0 0 170px;
}


#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}


#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}


#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

Untuk kode yang berwarna merah, silahkan ganti sesuai dengan lebar header blog sobat.

4. Setelah itu cari kode  <div id='header-wrapper'>
5. Letakkan kode berikut ini di atasnya.

<div id='catmenucontainer'>
<div id='catmenu'> <ul>
<li><a href='http://tips-untuk-blogger.blogspot.com/'>Home</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com' title='Link-Title'>Tips Blog</a>
<ul class='children'>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Tips%20Blogspot' title='Tips Blogger'>Blogspot</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Tips%20WordPress' title='Tips WordPress'>WordPress</a></li>
<li><a href='Your-Link-Here' title='Tips Jomla'>Jomla</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Tips%20Google' title='Tips Google'>Google</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Tips%20Facebook' title='Tips Facebook'>Facebook</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='http://tips-untuk-blogger.blogspot.com/2012/01/tukaran-link.html' title='Link-Title'>Link Exchange</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Informasi' title='Berisi tentang info-info'>Informasi</a></li>
</ul>

</div>
</div>

Silahkan sobat ganti kode yang berwarna Hijau (dengan Link sobat sendiri) dan kode berwarna Biru dengan judul menunya.

6. Jika sudah selesai, klik preview terlebih dahulu, kalau sudah berhasil, baru di simpan.

Sampai disini sobat sudah mempunyai menu diatas header, terkadang tidak semua template bisa cocok dengan  kode-kode seperti ini, jadi sebelum disimpan, sobat harus selalu preview terlebh dahulu, kalau sudah terlihat berhasil baru disimpan.

Terima kasih telah membaca artikel Cara Membuat Menu Blog Diatas Header. Semoga bermanfaat.


Script by : tips-untuk-blogger.blogspot.com