Widget CSS Hello Bar Blogspot

Widget CSS Hello Bar Blogspot - Sobat semua pasti sudah tahu apa itu Widget Hello Bar. Widget yang biasanya terdapat pada Wordpress ini, posisinya berada diatas sebuah blog ketika kita mengunjungi blog tersebut, dan ketika mouse kita scrool kebawah widget ini akan tetap berada diatas, alias fixed. Widget hello bar ini bisa sobat pergunakan untuk mempromosikan link-link jagoan sobat supaya bisa mendapatkan banyak klik dari pengunjung.

Widget Hello Bar ini bisa sobat pasang di blogspot dengan cara sangat mudah. Sobat tiggal masukan HTML di bagian  layout blogspot. Untuk lebih jelasnya bisa sobat lihat demo nya dibawah ini :

DEMO

Cara menambahkan kedalam widget, silahkan masukkan kode dibawah ini :

<style type="text/css">
/* Hello Bar Clone For Blogger by AllBloggerTricks.com */
#abt-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
#abt-hots{background-color:#EB593C;border-bottom:2px solid #FFF;height:30px;left:0;position:fixed;top:0;width:100%;box-shadow:3px 3px 3px 3px;z-index:10000}
#abt-hotsdata{color:#FFF;font-family:serif;font-size:15px;padding:5px}
#abt-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
#abt-hotsshow{background-color:#EB593C;border-bottom:3px solid #000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-left:3px solid #000;border-right:3px solid #000;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:5px;top:0;width:30px}
.abt-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #CC5200;height:0;width:0}
.abt-hotsblock{background-color:#CC5200;height:10px;width:8px}
.abt-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
</style>
<div id="abt-hotsmain" >
<center id="abt-hotsshow" onmouseup="document.getElementById('abt-hots').style.display='block'"><div class="abt-hotsblock"></div><div class="abt-hotsdownarrow"></div></center>
<div id="abt-hots" >
<center id="abt-hotshide" onmouseup="document.getElementById('abt-hots').style.display='none'"><div class="abt-hotsuparrow"></div><div class="abt-hotsblock"></div></center>
<center id="abt-hotsdata" >
Add your Text/Links here in HTML Format
</center>
</div>
</div>

Cara setting :

Ubah tulisan  Add your Text/Links here in HTML Format dengan kata-kata sobat sendiri.

Okey, cukup sekian Widget CSS Hello Bar Blogspot. Semoga bermanfaat



Source : www.allbloggertricks.com

Calendar Widget Untuk Blogspot

Calendar Widget Untuk Blogspot - Calendar widget atau kalau bahasa indonesianya widget kalender. Ini adalah sebuah widget yang memudahkan sobat blogger untuk membuat kalender dengan tampilan yang sangat menarik dan dengan cara yang sangat mudah pembuatanya.  Sebenarnya widget kalender ini tidak terlalu penting untuk sebuah blog, tapi mungkin jika sobat ingin mempercantik tampilan blog nya bisa juga menggunankan widget ini, atau buat sobat yang punya niche blog yang memang ada hubunganya dengan Waktu. Misal sobat punya toko online blogspot untuk menjual Jam, atau menjual kalender itu sendiri, maka widget kalender ini bisa cocok dipasang di blog sobat. Untuk membuat widget calendar ini, silahkan sobat berkunjung ke situs-situs dibawah ini :

1. www.cuteki.com/widgets/calendars
Situs untuk membuat widget calendar yang pertama ini menyediakan bentuk kalender yang unyu-unyu alias imut-imut, sangat cocok untuk sobat yang punya blog berniche perempuan.

2. www.widgetbox.com/tag/calendar
Kalau situs yang ini menyediakan widget calendar yang sangat banyak jenis tampilanya, dengan tampilan desain yang cukup elegant.

3. www.calendarlabs.com/calendars/web-content/free-blog-website-content.php 
Kalau sobat mau mencari tampilan kalender hewan atau berwajah artis, bisa masuk ke situs ini.

4. www.mycalendar.org/Holiday/Indonesia 
Kalau situs ini, gimana ya ?? ya silahkan sobat cek langsung saja.


Nah, itulah sob beberapa situs untuk memudahkan sobat dalam membuat Calendar Widget atau kalender di blog.

Cukup sekian, semoga bermanfaat 

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 ??

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