Tampilan Eksklusif & Animatif Widget Kalender BlogDETIK

12 Sep 2011

Widget kalender blogdetik mempunyai fungsi yang sama dengan widget kalender di blog yang lain. Widget ini sebenarnya tak hanya sekedar sebuah kalender biasa yang hanya sekedar berfungsi untuk mengingat dan memastikan hari dan tanggal semata, melainkan merupakan sebuah kalender yang didesain secara khusus sebagai sebuah widget blog ataupun web dengan kegunaan yang berkaitan dengan posting blog. Kekhususan ini membuat widget kalender ini lebih tepat jika kita sebut sebagai widget kalender posting. Jika sampeyan cermati secara lebih seksama, maka dalam kalender tersebut akan terlihat link posting yang ditampilkan dalam “tanggal/hari” sesuai dengan waktu ketika posting dilakukan. Kemudian di “penanda bulan” didalamnya telah disertakan juga link posting yang telah diterbitkan selama sebulan sebelumnya.

Merubah penampilan Widget Kalender Posting BlogDETIK

Jika selama ini kita selalu memandang sebelah mata terhadap widget yang sebenarnya amat bermanfaat ini, semoga melalui posting ini muncul antusiasme lebih untuk menggunakannya. Bukan hanya karena memandang manfaatnya sebagai data posting saja, namun dengan perubahan penampilan yang coba kita lakukan ini, widget kalender tak lagi hanya jadi pajangan yang sama sekali tak memberikan sentuhan keindahan. Penampilan baru widget kalender akan terlihat sangat jauh berbeda dari biasanya karena beberapa kode CSS, CSS3 transition, CSS3 background rgba dan sebuah background animasi gif membuatnya terlihat lebih eksklusif sekaligus animatif. Dari penambahan kode CSS baru ini juga terbuka sebuah peluang bagi para d’blogger yang suka profil wajahnya “nongkrong di halaman blogdetik”, sampeyan bisa mengganti background-image-nya dengan photo sampeyan sehingga gambar wajah sampeyan yang “sangar” akan terlihat sebagai latar belakang widget kalender posting blogdetik. He … gimana? Menarik, toh?!

DEMO Tampilan Baru Widget Kalender BlogDETIK

Karena tampilan widget kalender posting blogdetik didesain menggunakan kode CSS3, maka widget ini akan terlihat sempurna apabila dibuka melalui browser yang telah support terhadap CSS3 (seperti Opera 11.51, Safari 5.1, Mozilla 6.1 dan Google Chrome serta SeaMonkey 2.3). Tetapi sekalipun demikian jika sampeyan blom install browser terbaru tersebut maka tak perlu terlalu kuwatir karena widget kalender tak akan terlihat amburadul. Widget ini bahkan telah dicoba dibuka menggunakan Internet Explorer 8 tetapi tetap saja terlihat luar biasa. Tampilan Widget Kalender dalam bentuk screenshot bisa dilihat di bawah ini, sedang bagi sampeyan yang ingin melihat bentuk jadinya yang terpasang di blog, silahkan KLIK link demo.

widget-kalender_gubhugreyot

D E M O Widget Kalender Eksklusif Animatif

Kode CSS Widget Kalender Posting BlogDETIK
<style type="text/css">
#calendar{
	position:relative;
	border:2px solid #333;
	border-radius:6px;
	background:#555;
	padding:5px;
	font-weight:bold;
	color:#00FFFF;
	text-shadow:1px 1px 1px #000;
}
#calendar h2.widgettitle{
	text-shadow:1px 1px 1px #000;
	color:#66FFFF;
}
#calendar_wrap{
	border-radius:8px;
	border:2px solid #333;
	background:#993300 url(http://gubhugreyot.blogdetik.com/files/2011/09/bola-anima_gubhugreyot.gif) center center no-repeat;
	background:rgba(201,13,4,0.98) url(http://gubhugreyot.blogdetik.com/files/2011/09/bola-anima_gubhugreyot.gif) center center no-repeat;
	box-shadow:0 0 6px #000;
}
#calendar #calendar_wrap, #wp-calendar, #wp-calendar td a{ 
	transition:4s;  /* code by: gubhugreyot.blogspot.com */
	-o-transition:4s;
	-moz-transition:4s;
	-webkit-transition:4s;
}
#wp-calendar{
	border:1px solid #888;
	border-radius:0 0 8px 8px;
}
#calendar:hover #calendar_wrap:hover{
	background-position:center -30px; 
	background-size:150px auto;
	background-color:#003366;
}
#wp-calendar{
	width:100%;
	background:rgba(0,0,0,0.3);
	background:-ms-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 100%);/*IE10*/
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#4d000000', endColorstr='#4d000000'); /*IE6-9*/	
}
#wp-calendar caption{ border:1px solid #888;border-radius:4px 4px 0 0;
	padding:8px 10px;
	letter-spacing:1px;
	color:#CCCCFF;
	font-size:16px;
	background:rgba(0,0,0,0.2);
	background:-ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%);/*IE10*/
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#33000000', endColorstr='#33000000');/*IE6-9*/


}
#wp-calendar:hover{
	width:100%;   /* code by: gubhugreyot.blogdetik.com */
	background:rgba(0,0,0,0.1);
	background:-ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.1) 100%);/*IE10*/
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#1a000000', endColorstr='#1a000000'); /*IE6-9*/
	color:#FFFFFF;
}
#wp-calendar td a{
	color:#FFCCCC;
	text-decoration:blink;
}
#wp-calendar td a:hover{
	color:#FF0000;
}
#wp-calendar td, #wp-calendar th{
	padding:2px !important;
    text-align:center;
	border:1px solid #555;
	border-radius:3px;
	background:rgba(0,0,0,0.2);
	background:-ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%);/*IE10*/
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#33000000', endColorstr='#33000000');/*IE6-9*/
}
#wp-calendar:hover td, #wp-calendar:hover th{
	background:rgba(0,0,0,0.1);
	background:-ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.1) 100%);/* IE10*/
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#1a000000', endColorstr='#1a000000'); /*IE6-9*/
}
#wp-calendar th{
	color:red;
	border-color:#999999;
	background:#444;
	border-radius:0;
}
#wp-calendar td.pad{display:none;}
</style>

Kode CSS tersebut di atas telah dicoba digunakan di template wordpress-blogdetik dengan hasil yang sempurna. Anda bisa ganti background image untuk menampilkan background yang berbeda! Silahkan copy dan simpan kode CSS-nya di template.

Cara Menyimpan Kode CSS Widget Kalender “Eksklusif Animatif” BlogDETIK
  1. Login ke BlogDETIK. Silahkan KLIK di sini .
  2. Tuliskan User Name dan Password .
  3. KLIK Halaman Dasbor Anda .
  4. Lihat sisi sebelah kiri halaman dasbor. Arahkan cursor pada link Appearance . Pilih dan KLIK Widget.
  5. Jika Widgetize Any HTML telah ditambahkan diblog, segera copy dan pastekan kode CSS ke dalamnya. Jika belum melakukan penambahan widget Widgetize Any HTML, silahkan tambahkan dulu baru kemudian kode CSS-nya disimpan. Jika menginginkan panduan cara untuk menambahkan Widgetize Any HTML hingga cara menyimpan kode CSS, javascript dan xHTML, silahkan KLIK link di bawah ini:

    <a href=”http://gubhugreyot.blogspot.com/2011/01/panduan-blogdetik-cara-memasang.html” target=”_blank” title=”Panduan lengkap cara menyimpan kode HTML, kode CSS dan Javascript di template blogdetik.”Panduan Cara Menyimpan Kode HTML, CSS dan Javascript.

  6. Jangan lupa KLIK SAVE Changes.
  7. Buka blog dan lihat hasilnya di halaman utama atau halaman posting!
Keterangan/Catatan:

  1. Untuk menampilkan background-image berbeda ganti URL background-image:

    http://gubhugreyot.blogdetik.com/files/2011/09/bola-anima_gubhugreyot.gif

  2. Kode CSS telah dilengkapi dengan kode CSS yang khusus diperuntukkan di IE 8 dan IE 10.
  3. Efek akan terlihat sangat sempurna di Mozilla Firefox terbaru!

Tutorial Lain

Berbagai tutorial dan panduan blogger dan blogDETIK dapat sampeyan buka dengan :

Happy Blogging


TAGS Tutorial Blogger Tutorial BlogDETIK Panduan Blogger Panduan BlogDETIK Kode CSS


-

Author

Follow Me