Modifikasi Tampilan Followers

Anda bosan dengan tampilan followers yang hanya seperti itu ajah, atau anda sudah memodifikasinya. Nah kali ini saya ingin sedikit memberikan triks bagai mana memodifikasi tampilan followers. Untuk demonya lihat dibawah ini. [[ Follow This Blog ! ]] 72 Followers has join

>> Click To View

Untuk membuat tampilan followers seperti diatas tinggal ikuti langkah-langkah berikut ini :

• Masuk ke Layout - Tambah Laman - HTML/Javascript, lalu masukan kode dibawah ini.
<center><a href="http://www.blogger.com/follow-blog.g?blogID=ID Blog anda" target="_blank">[[ Follow This Blog ! ]]</a><br /><br />72 Followers has join <br /><p> <a href="http://www.blogger.com/manage-followers.g?blogID=ID Blog anda" target="_blank">>> <b><u>Click To View</u></b></a><br /></p></center>

Untuk tulisan yang berwarna hijau bisa anda ganti, sedangkan yang berwarna merah atau blog-ID bisa anda lihat di address bar browser anda. [Sumber] nah semoga bermanfaat ya.. selamat mencoba..

Script Anti Klik Kanan.

Untuk sekedar jaga-jaga, bagi anda yang artikelnya sering di copy paste namun tidak mencantumkan sumbernya pasti merasa kesal juga ya. Nah postingan kali ini saya ingin memberikan sedikit tips bagaimana artikel atau postingan kita tidak bisa di copy alias klik kanan, trik kali ini bener-bener sama sekali ga bisa klik kanan dan juga ga bisa mem-blok artikel atau postingan anda.

Keuntungan dari script kali ini adalah :

1. Anti Right Click
2. Anti Return Key
3. Anti Enter Key
4. Anti Block Text
5. Anti Numeric Key
6. Anti Alpanumeric Key
7. Anti Key Combination
8. Anti Function Key
9. Anti Ctrl + Alt Key
10. Anti Power Key
11. Anti Sleep Key
12. Anti WakeUp Key
13. Anti Home Key
14. Anti Insert Key
15. Anti Tab Key
16. Anti Capslock Key
17. Anti Shift Key

Untuk memulainya anda tinggal ikuti saja langkah-langkah berikut ini :

• Seperti biasa backup terlebih dahulu template anda.
• Setelah itu Layout - Edit HTML.
• Cari kode </head>, lalu masukan kode berikut ini diatasnya.
<script type="text/javascript"> var message="Maaf, Klik Kanan Saat Ini Saya Disable"; /////////////////////////////////// function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedo wn=clickNS4;} else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false") if (typeof document.onselectstart!="undefined") { document.onselectstart=new Function ("return false"); } else{ document.onmousedown=new Function ("return false"); document.onmouseup=new Function ("return true"); } var isnn,isie if(navigator.appName=='Microsoft Internet Explorer') //check the browser { isie=true } if(navigator.appName=='Netscape') { isnn=true } function right(e) //to trap right click button { if (isnn && (e.which == 3 || e.which == 2 )) return false; else if (isie && (event.button == 2 || event.button == 3)) { alert("Maaf, klik kanan tidak di izinkan! Gunakan klik tengah"); return false; } return true; } function key(k) { if(isie) { if(event.keyCode==17 || event.keyCode==18 || event.keyCode==93) { alert("Maaf, kami mendeteksi anda sedang membajak") return false; } } if(isnn){ alert("MAAF!!, DISINI PEMBAJAK DILARANG MEMENCET TOMBOL KEYBOARD") return false; } } if (document.layers) window.captureEvents(Event.KEYPRESS); document.onkeydown=key; </script>

Selain kelebihanna itu script ini juga terdapat kelemahan yaitu, blog kita bakalan sepi pengunjungnya akibat tidak bisa mengcopy script yang terdapat dipostingan dengan maksud ingin mempraktekkannya.[sumber] nah semoga bermanfaat ya.. selamat mencoba..

jQuery: Coda-Slider 1.1.1

Untuk demonya silakan klik disini

1. coda-slider.1.1.1.js
2. jquery-easing-compatibility.1.2.pack.js
3. jquery-easing.1.2.pack.js
4. jquery-1.2.1.pack.js
5. body-bg.png
6. arrow-right.gif
7. arrow-left.gif
8. ajax-loader.gif

Download file diatas, lalu upload ketempat hosting anda. Selanjutnya kita akan bermain dengan htmlnya, ikuti langkah-langkah berikut ini :

1. Seperti biasa backup terlebih dahulu template anda.
2. Setelah itu cari kode </head>, lalu letakkan script berikut ini di atasnya.
<script src="alamat jquery-1.2.1.pack.js" type="text/javascript"></script> <script src="alamat jquery-easing.1.2.pack.js" type="text/javascript"></script> <script src="alamat jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script> <script src="alamat coda-slider.1.1.1.js" type="text/javascript"></script>
3. Lalu tambahkan juga kode yang ini.
<style type="text/css"> * { margin: 0; padding: 0 } /* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ p { text-align: left; margin: 15px 0 } p, ul { font-size: 13px; line-height: 1.4em } p a, li a { color: #39c; text-decoration: none } p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% } p#cross-links { text-align: center } p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px } noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left } noscript a { color: #a00; text-decoration: underline } noscript ol { margin-left: 25px; } a:focus { outline:none } img { border: 0 } h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left } body { font-family: Verdana, Arial; background: #ebebeb url("alamat body-bg.png") repeat-y center; color: #000; width: 800px; margin: auto; text-align: center; padding-bottom: 20px; } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin: 20px 0; position: relative; width: 100%; } /* These 2 lines specify style applied while slider is loading */ .csw {width: 100%; height: 460px; background: #fff; overflow: scroll} .csw .loading {margin: 200px 0 300px 0; text-align: center} .stripViewer { /* This is the viewing window */ position: relative; overflow: hidden; border: 5px solid #000; /* this is the border. should have the same value for the links */ margin: auto; width: 700px; /* Also specified in .stripViewer .panelContainer .panel below */ height: 460px; clear: both; background: #fff; } .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */ position: relative; left: 0; top: 0; width: 100%; list-style-type: none; /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ } .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */ float:left; height: 100%; position: relative; width: 700px; /* Also specified in .stripViewer above */ } .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px; } .stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin: auto; } .stripNav ul { /* The auto-generated set of links */ list-style: none; } .stripNav ul li { float: left; margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */ } .stripNav a { /* The nav links */ font-size: 10px; font-weight: bold; text-align: center; line-height: 32px; background: #c6e3ff; color: #fff; text-decoration: none; display: block; padding: 0 15px; } .stripNav li.tab1 a { background: #60f } .stripNav li.tab2 a { background: #60c } .stripNav li.tab3 a { background: #63f } .stripNav li.tab4 a { background: #63c } .stripNav li.tab5 a { background: #00e } .stripNav li a:hover { background: #333; } .stripNav li a.current { background: #000; color: #fff; } .stripNavL, .stripNavR { /* The left and right arrows */ position: absolute; top: 230px; text-indent: -9000em; } .stripNavL a, .stripNavR a { display: block; height: 40px; width: 40px; } .stripNavL { left: 0; } .stripNavR { right: 0; } .stripNavL { background: url("alamat arrow-left.gif") no-repeat center; } .stripNavR { background: url("alamat arrow-right.gif") no-repeat center; } </style> <!-- Initialize each slider on the page. Each slider must have a unique id --> <script type="text/javascript"> jQuery(window).bind("load", function() { jQuery("div#slider1").codaSlider() // jQuery("div#slider2").codaSlider() // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page. }); </script>
Ganti tulisan yang berwarna merah dengan alamat hostingan anda.
4. Save Template anda terlebih dahulu.
5. Masuk ke Layout, dan Tambah Laman, setelah itu masukan kode dibawah ini
<h2>Coda-Slider 1.1.1</h2> <div class="slider-wrap"> <div id="slider1" class="csw"> <div class="panelContainer"> <div class="panel" title="Panel 1"> <div class="wrapper"> <h3>Panel 1</h3> <p>Coda-Slider v1.1.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#5" class="cross-link" title="Go to Panel 5">&#171; Previous</a> | <a href="#2" class="cross-link" title="Go to Panel 2">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 2"> <div class="wrapper"> <h3>Panel 2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#1" class="cross-link" title="Go to Panel 1">&#171; Previous</a> | <a href="#3" class="cross-link" title="Go to Panel 3">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 3"> <div class="wrapper"> <h3>Panel 3</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#2" class="cross-link" title="Go to Panel 2">&#171; Previous</a> | <a href="#4" class="cross-link" title="Go to Panel 4">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 4"> <div class="wrapper"> <h3>Panel 4</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#3" class="cross-link" title="Go to Panel 3">&#171; Previous</a> | <a href="#5" class="cross-link" title="Go to Panel 5">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 5"> <div class="wrapper"> <h3>Panel 5</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#4" class="cross-link" title="Go to Panel 4">&#171; Previous</a> | <a href="#1" class="cross-link" title="Go to Panel 1">Next &#187;</a></p> </div> </div> </div> </div> </div> <p id="cross-links"> Same-page cross-link controls:<br /> <a href="#1" class="cross-link">Panel 1</a> | <a href="#2" class="cross-link">Panel 2</a> | <a href="#3" class="cross-link">Panel 3</a> | <a href="#4" class="cross-link">Panel 4</a> | <a href="#5" class="cross-link">Panel 5</a> </p>
Untuk tulisan yang berwarna hijau bisa anda ganti sesuai keinginan anda, sedangkan yang berwarna biru bisa dipasang atau dihapus.

nah semoga bermanfaat ya.. selamat mencoba..

jQuery: Sliding Top Menu

Untuk demo klik disini

Bingung ni masu ngasih judulnya apaan!!! kita langsung ajah lah ya..

1. Seperti biasa backup dulu template anda.
2. Cari kode ]]></b:skin> lalu masukan kode dibawah ini tepat diatasnya.
#sliderWrap { margin: 0 auto; width: 300px; } #slider { position: absolute; background-image:url(http://s2.sigmirror.com/files/58956_xcuvk/slider.png); background-repeat:no-repeat; background-position: bottom; width: 300px; height: 159px; margin-top: -141px; } #slider img { border: 0; } #sliderContent { margin: 50px 0 0 50px; position: absolute; text-align:center; background-color:#FFFFCC; color:#333333; font-weight:bold; padding: 10px; } #header { margin: 0 auto; width: 600px; background-color: #F0F0F0; height: 200px; padding: 10px; } #openCloseWrap { position:absolute; margin: 143px 0 0 120px; font-size:12px; font-weight:bold; }
3. Setelah itu cari kode </head> lalu masukan kode dibawah ini diatasnya.
<script type="text/javascript" src="http://s2.sigmirror.com/files/58960_sspjf/jquery-1.2.6.min.js"></script>
4. Lalu cari lagi kode <body>, setelah itu tambahkan kode berikut ini dibawahnya
.
<script type="text/javascript"> $(document).ready(function() { $(".topMenuAction").click( function() { if ($("#openCloseIdentifier").is(":hidden")) { $("#slider").animate({ marginTop: "-141px" }, 500 ); $("#topMenuImage").html('<img src="http://s2.sigmirror.com/files/58955_t6ugo/open.png"/>'); $("#openCloseIdentifier").show(); } else { $("#slider").animate({ marginTop: "0px" }, 500 ); $("#topMenuImage").html('<img src="http://s2.sigmirror.com/files/58954_fdrhd/close.png"/>'); $("#openCloseIdentifier").hide(); } }); }); </script> <div id="sliderWrap"> <div id="openCloseIdentifier"></div> <div id="slider"> <div id="sliderContent"> Isn't this nice? </div> <div id="openCloseWrap"> <a href="#" class="topMenuAction" id="topMenuImage"> <img src="http://s2.sigmirror.com/files/58955_t6ugo/open.png" alt="open" /> </a> </div> </div> </div>
5. Save Template anda, dan lihat hasilnya.

nah semoga bermanfaat ya.. selamat mencoba..

JQuery: Slide Elements in Different Directions

Untuk melihat demonya silakan klik disini

Kali ini saya ingin memberikan beberapa trik sliding yang tentu saja menggunakan JQuery juga, langsung ajah ya.. :

• JQuery.js
• sliding.js

Klik Kanan lalu "Save As", setelah itu upload ketempat hosting anda.

1. Cari kode berikut ini ]]></b:skin> lalu masukan kode berikut ini diatasnya.
.slide { position: relative; overflow: hidden; height: 120px; width: 350px; margin: 1em 0; background-color: #ffc; border: 1px solid #999; } .slide .inner { position: absolute; left: 0; bottom: 0; width: 338px; height: 36px; padding: 6px; background-color: #4c5; color: #333; } .slide button { margin: .7em 0 0 .7em; } .js #slidebottom .inner { display: none; }
2. Setelah itu cari kode </head> dan masukan kode berikut ini diatasnya.
<script src='masukan alamat jquery.js' type='text/javascript'/> <script src='masukan alamat sliding.js' type='text/javascript'/>
3. Save Template anda.

Setelah itu anda tinggal Tambah Laman lalu HTML/Javascript, dan masukan kode dibawah ini.

<div id="slidemarginleft" class="slide"> <button>slide it</button> <div class="inner">Slide from bottom</div> </div>

Tulisan yang berwarna merah bisa anda ganti sesuai kebutuhan anda. (sesuaikan dengan demo) sedangkan untuk tulisan yang berwarna hijau bisa disesuaikan dengan keinginan anda. nah semoga bermanfaat ya.. selamat mencoba..

Manual Post/Picture Slideshow.

Untuk demo klik disini

Kali ini saya ingin memberikan tips dalam membuat post/picture sildeshow tetapi kali ini slideshownya tidak otomatis seperti postingan saya terdahulu (Random Post With Slideshow), untuk membuatnya tinggal ikuti langkah-langkah berikut ini..:

1. loading.gif
2. contentslider.js
3. contentslider.css

"Klik Kanan" lalu "Save As", lalu upload ke hosting anda.

1. Lalu cari kode </head>, masukan kode berikut diatasnya
<link rel="stylesheet" type="text/css" href="masukan alamat contentslider.css" /> <script type="text/javascript" src="masukan alamat contentslider.js"></script>
2. Sekarang tinggal Tambah Elemen lalu masukan kode dibawah ini.
<h2>Example 1</h2> <!--Inner content DIVs should always carry "contentdiv" CSS class--> <!--Pagination DIV should always carry "paginate-SLIDERID" CSS class--> <div id="slider1" class="sliderwrapper"> <div class="contentdiv"> Content 1 Here. <br /> <p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p> </div> <div class="contentdiv"> Content 2 Here. </div> <div class="contentdiv"> Content 3 Here. </div> </div> <div id="paginate-slider1" class="pagination"> </div> <script type="text/javascript"> featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [true, 3000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script> <br /> <h2>Example 2, Pagination links from markup</h2> <!--Inner content DIVs should always carry "contentdiv" CSS class--> <!--Pagination DIV should always carry "paginate-SLIDERID" CSS class--> <div id="slider2" class="sliderwrapper"> <div class="contentdiv"> Content 1 Here. </div> <div class="contentdiv"> Content 2 Here. <br /> <p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p> </div> <div class="contentdiv"> Content 3 Here. </div> </div> <div id="paginate-slider2" class="pagination"> <a href="#" class="toc">First Page</a> <a href="#" class="toc anotherclass">Second Page</a> <a href="#" class="toc">Third Page</a> <a href="#" class="prev" style="margin-left: 10px"><</a> <a href="#" class="next">></a> </div> <script type="text/javascript"> featuredcontentslider.init({ id: "slider2", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [false, 3000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script>
3. Save dan lihat hasilnya.

untuk kata yang tercetak merah bisa anda ganti sesuai keinginan. nah semoga bermanfaat ya.. selamat mencoba..

jQuery: Tab Navigasi Sliding Horizontal Smooth

Untuk demo silakan klik disini

Bingung ni mau ngasih judulnya apaan..?? ya udah deh "Tab Navigasi Sliding Horizontal Smooth jQuery" ajah, ya sesuai judulnya trik ini menggunakan JQuery. Langsung menuju TKP (ga usah basa-basi), kita langsung ajah praktekin ni triknya :

1. Seperti biasa backup terlebih dahulu template anda.
2. Cari kode ]]></b:skin>.
3. Masukan kode dibwah ini diatasnya.
.container { width: 610px; margin: 40px auto; text-align: left; } .tab-nav { width: 610px; overflow: hidden; background: #ddd url(http://s2.sigmirror.com/files/58348_nuylg/tab-slide.png) no-repeat 0 0; } .tab-nav ul { position: relative; float: left; width: 1600px; margin-left: 535px; padding-left: 0; list-style-type: none; background-color: #fff; } .tab-nav li { float: left; clear: left; } .tab-nav a { display: block; width: 74px; border-right: 1px solid #ddd; height: 25px; line-height: 24px; float: left; text-align: center; text-decoration: none; color: #000; background: url(tab-slide.png) no-repeat 2px -194px; } .tab-nav a.expanded { background-position: 2px -244px; } /* second level */ .tab-nav ul ul { float: left; background-color: #333; width: auto; margin-left: 0;} .tab-nav li li {clear: none;} .tab-nav li li a { color: #fff; width: 100px; background-image: none;}
4. Setelah itu cari juga kode berikut ini </head> dan taru diatasnya.
<script src="http://s2.sigmirror.com/files/58346_oasbi/jquery.js" type="text/javascript"></script> <script src="http://s2.sigmirror.com/files/58347_dsepy/tab-nav.js" type="text/javascript"></script>
5. Lalu cari kode <body> dan taruh kode ini dibawahnya.
<div class="container"> <h2>Demo 1: basic</h2> <div id="tab-nav-1" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 2: one at a time</h2> <div id="tab-nav-2" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 3: auto-close</h2> <div id="tab-nav-3" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> </div>
6. Save template anda, dan lihat hasilnya.

Jika anda ingin menggunakannya sebagai widget, untuk bagian <body> ga usah dimasukan. Memasangnya sebagai Widget.

• Tambah Laman - HTML/Javascript, tinggal tambahkan kode dibawah ini.
<div id="container"> <h2>Demo 1: basic</h2> <div id="tab-nav-1" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 2: one at a time</h2> <div id="tab-nav-2" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 3: auto-close</h2> <div id="tab-nav-3" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> </div>
• Simpan, dan lihat hasilnya.

nah semoga bermanfaat ya.. selamat mencoba..

Horizontal Accordion script

demo Horizontal Accordion script klik disini

Lagi males basa-basi, langsung ajah praktekin nie triks.. OK.

• Cari kode </head>
• Lalu masukan kode dibawah ini diatasnya
<link rel="stylesheet" type="text/css" href="http://s2.sigmirror.com/files/57493_yt4sj/haccordion.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://s2.sigmirror.com/files/57494_mygqi/haccordion.js"> </script> <style type="text/css"> /*CSS for example Accordion #hc1*/ #hc1 li{ margin:0 3px 0 0; /*Spacing between each LI container*/ } #hc1 li .hpanel{ padding: 5px; /*Padding inside each content*/ background: lightblue; } /*CSS for example Accordion #hc2*/ #hc2 li{ margin:0 0 0 0; /*Spacing between each LI container*/ border: 12px solid black; } #hc2 li .hpanel{ padding: 5px; /*Padding inside each content*/ background: #E2E9FF; cursor: hand; cursor: pointer; } </style> <script type="text/javascript"> haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'}, selectedli: [0, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //<- No comma following very last setting! }) haccordion.setup({ accordionid: 'hc2', //main accordion div id paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'}, selectedli: [-1, true], //[selectedli_index, persiststate_bool] collapsecurrent: true //<- No comma following very last setting! }) </script>
• Save Template anda.
• Masuk ke tata letak - tambah laman lalu pilih html/javascript, tambahkan kode dibawah ini.
<h2>Demo 1:</h2> <div id="hc1" class="haccordion"> <ul> <li> <div class="hpanel"> <img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia. </div> </li> <li> <div class="hpanel"> <img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited. </div> </li> <li> <div class="hpanel"> <img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals. </div> </li> <li> <div class="hpanel"> <img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy. </div> </li> <li> <div class="hpanel"> <img src="http://img408.imageshack.us/img408/5751/langkawi.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia. </div> </li> </ul> </div> <p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Expand 3rd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Expand 4th Panel</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Expand 5th Panel</a></p> <br /> <h2>Demo 2:</h2> <div id="hc2" class="haccordion"> <ul> <li style="border-right-width:0"> <div class="hpanel" style="padding:10px; width:250px"> This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup. </div> </li> <li style="border-right-width:0"> <div class="hpanel" style="padding:10px; width:180px"> This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup. </div> </li> <li style="border-right-width:0"> <div class="hpanel" style="padding:10px; width:350px"> This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup. </div> </li> <li> <div class="hpanel" style="padding:10px; width:550px"> This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup. </div> </li> </ul> </div>
• Script diatas adalah script dasar, jadi ubahlah sesuai dengan keperluan anda.

nah semoga bermanfaat ya.. selamat mencoba..

Menambah status YM di facebook

Ketemu lagi dengan update terbaru tentunya. masih dengan facebook. kali ini kita membahas bagaimana cara menambah status YM di facebook. yah meskipun di facebook sudah terdapat fasilitas chat tapi nggak ada salah nya menambah fasilitas ini ke dalam facebook biar keliatan unik dan menambah wawasan. Untuk menambah fasilitas ini ke dalam facebook ikuti langkah-langkah di bawah ini:

1. Login dulu ke facebook.
2. Kemudian pada kotak penelusuran ketikan "Yahoo! Messenger Button".
3. Di halaman berikutnya klik tombol ke aplikas atau go to aplikasi.
4. kemudian pilih menu add to profil atau Cantumkan ke dalam profil.
5. Berikutnya pilih ADD atau Tambahkan.
6. Agar kelihatan rapi di profil anda klik tombol KEEP.
7. Kemudian pilih configure untuk memasukan email anda
8. Setelah itu pilih Update
9. Selesai

nah semoga bermanfaat ya.. selamat mencoba..

Random Post With Slideshow

Untuk contoh click disini

Lagi males nie basa basinya, To the point ajah ya.. : Tinggal masuk ke Layout - Add Page Element - HTML/Javascript.

<br /> <style type="text/css"> .gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #fff;} .gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;} .gfg-subtitle {font-size: 14px;font-weight: bold;color: #000;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;} .gfg-subtitle a {color : #fff;display:none !important;} .gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;} /* To allow correct behavior for overlay */ .gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;} .gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;} .gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#fff;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;} .gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #fff;margin-top : 3px;font-size: 12px;} .clearFloat {clear : both;} #feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #fff;} </style> <script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script> <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> <script type="text/javascript"> function showGadget() { var feeds = [ {title:'title', url:'http://alamatbloganda.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'}, ]; new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: " "}); } google.load("feeds", "1"); google.setOnLoadCallback(showGadget); </script> <div id="feedGadget"><center><img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" /></center></div>

Save. Ganti tulisan yang berwarna merah dengan alamat blog anda. nah semoga bermanfaat ya.. selamat mencoba..

Bikin Blog Lebih Dinamis III

Klik disini untuk demo.

Ga usah basa-basi kita langsung praktekin ajah nie triksnya :

1. Seperti biasa Backup terlebih dahulu template anda.
2. Edit HTML, centang "Expand Template Widget", lalu cari widget yang akan disembunyikan isinya,misal "Labels" kodenya seperti ini :
<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <span dir='ltr'>(<data:label.count/>)</span> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
3. Hapus kode <h2><data:title/></h2> lalu ganti dengan kode berikut :
* <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Open]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
4. Setelah itu sisipkan kode dibawah ini, persis diatas </b:includable>
* <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
5. Nah kalau dah digabung hasilnya kaya gini nie :
<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Open]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <span dir='ltr'>(<data:label.count/>)</span> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> </b:includable> </b:widget>
6. Simpan Template anda.

Anda bisa ubah [Open] sesuai keinginan, misal Buka, Lihat dll. nah semoga bermanfaat ya.. selamat mencoba..

Dock Footer JQuery

Demo

Geser mouse anda pada bagian bawah blog tersebut maka anda akan melihat bagian yg terangkat. Bagian tersebut bisa diisikan macam2, Contoh Categori, Label, Link, Archives dan lain2, Apabila isi bagian tersebut berupa Widget jangan lupa mengkopinya mulai dari bagian.. <b:section class='docksectclass' id='docksect' preferred='yes'> dengan memberi nama class dan id yg berbeda (class bisa diberikan sama dg contoh tapi ID wajib berbeda karena Id hanya satu dalam satu xml). Footer tersebut akan tetap di bawah walaupun kita scroll mouse kita, baiklah kita mulai cara membuat footer tersebut!!!

1. Pertama masuk kebagian Edit HTML (Tata Letak - Edit HTML).
2. Paste bagian Style berikut ini tepat sebelum tulisan ]]></b:skin>.
/*untuk dock bottom */ #fake-body { overflow:auto; z-index:1; } #dock { background:#ccc; height:200px; z-index:100; width:100%; }
3. Kemudian paste script berikut ini sebelum tulisan </head>.
<script src="http://www.sigmirror.com/files/23924_ndaws/jquery.js" type="text/javascript" /> <script src='http://www.sigmirror.com/files/23965_5kf1u/jqueryeasing.js' type='text/javascript'/> <script> //http://webtips.dan.info/graceful.html $(document).ready(function() { //Transition you want var easing_type = 'easeOutBounce'; //The default height for the dock (on mouse out) var default_dock_height = '20'; //Expanded height, the height of the dock on mouse over, you have to set it in CSS var expanded_dock_height = $('#dock').height(); //Fake body height var body_height = $(window).height() - default_dock_height; //Set the size of #fake_body $('#fake-body').height(body_height); //Set the CSS attribute for #dock $('#dock').css({'height': default_dock_height, 'position':'fixed', 'top': body_height}); //In case the user resize the browser, we will need to recalculate the height and top for #fake_body and #dock $(window).resize(function () { //Grab the updated height/top updated_height = $(window).height() - default_dock_height; //Set the updated height for #fake_body and top for #dock $('#fake-body').height(updated_height); $('#dock').css({'top': updated_height}); }); //The main event for the dock bottom menu $('#dock').mouseover(function () { //Recalculate expanded height (always get the latest height), in case user has resized the window expanded_height = $(window).height() - expanded_dock_height; //Animate the height change, set the height to expanded_dock_height and set the top value as well $(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type}); }).mouseout(function () { //Recalculate default body height (always get the latest height), in case user has resized the window body_height = $(window).height() - default_dock_height; //Animate the height change, set the height to default_dock-height and set the top value as well $(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type}); }); }); </script>
4. Kemudian paste html berikut ini kesebelum </body>
<div id='dock'> <!-- Put your dock in this section --> <p><a href="http://www.abu-farhan.com">Abu Farhan</a></p> <p><a href="http://www.radiorodja.com">Radio Rodja</a></p> <p><a href="http://www.hang106.or.id.com">Radio Hang</a></p> </div>
Link di atas anda ganti sesuai keinginan anda, bisa juga diisi Widget yg bisa di ganti2 isinya kapan2 atau diisikan footer yg sudah ada CSS nya karena ada error pada IE posisi dari footernya berubah maka div di atas di pindah ke div Outer wraper (tepat sebelum </DIV>pada outer-wraper) , berikut posisinya
<div id='dock'> <!-- Put your dock in this section --> <p><a href="http://www.abu-farhan.com">Abu Farhan</a></p> <p><a href="http://www.radiorodja.com">Radio Rodja</a></p> <p><a href="http://www.hang106.or.id.com">Radio Hang</a></p></div></div><!--end of outer-wrapper-->
Dengan mengganti width dari style Dock disesuaikan dg width dari outer wraper 660px untuk contoh yg ada sebelumnya bernilai 100%
/*untuk dock bottom */ #fake-body { overflow:auto; z-index:1; } #dock { background:#ccc; height:200px; z-index:100; width:660px; }

nah semoga bermanfaat ya.. selamat mencoba..

Clock Widget : Menampilkan Tanggal Terakhir Kita Update Blog.

Blog anda lama ga di update-update, terus ingin tahu tanggal berapa kita terakhir mengupdatenya..? Langsung aja ikuti langkah-langkah berikut ini.

demo here

Tambahkan element baru lalu masukan kode html/javascript berikut ini.

<script language="JavaScript" type="text/javascript"> function getLongDateString() { //method defined on class Date. //Returns a date string of the form: Day DD Month,YYYY //(e.g. Sunday 27 September, 1998) monthNames = new Array("January","February","March","April","May","June","July","August","September","October","November","December"); dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); dayOfWeek = this.getDay(); day = dayNames[dayOfWeek]; dateOfMonth = this.getDate(); monthNo = this.getMonth(); month = monthNames[monthNo]; year = this.getYear(); if (year < 2000) year = year + 1900; dateStr = day+" "+dateOfMonth+" "+month+", "+year; return dateStr; } //register the method in the class Date Date.prototype.getLongDateString=getLongDateString; function DocDate() { //return the document modification date (excl.time) //as a string DateTimeStr = document.lastModified; secOffset = Date.parse(DateTimeStr); if (secOffset == 0 || secOffset == null) //Opera3.2 dateStr = "Unknown"; else { aDate = new Date(); aDate.setTime(secOffset); //use method defined above datestr = aDate.getLongDateString(); } return dateStr; } document.write("<center> Last Update: "); document.writeln(DocDate(),"</center>"); </script>

nah semoga bermanfaat ya.. selamat mencoba..

Clock Widget : Berapa Lama Kita Berada disuatu Halaman.

Trik kali ini yang ingin saya bagikan adalah bagaimana kita bisa mengetahui waktu yang telah kita habiskan dalam membaca/melihat sebuah halaman web. Kita langsung ajah ya..? Kita hanya tinggal menambahkan kode html/javascript dibawah ini kedalam blog/webpage kita. demo "How Long" here

<script language="JavaScript"> <!-- Begin day = new Date(); miVisit = day.getTime(); function clock() { dayTwo = new Date(); hrNow = dayTwo.getHours(); mnNow = dayTwo.getMinutes(); scNow = dayTwo.getSeconds(); miNow = dayTwo.getTime(); if (hrNow == 0) { hour = 12; ap = " AM"; } else if(hrNow <= 11) { ap = " AM"; hour = hrNow; } else if(hrNow == 12) { ap = " PM"; hour = 12; } else if (hrNow >= 13) { hour = (hrNow - 12); ap = " PM"; } if (hrNow >= 13) { hour = hrNow - 12; } if (mnNow <= 9) { min = "0" + mnNow; } else (min = mnNow) if (scNow <= 9) { secs = "0" + scNow; } else { secs = scNow; } time = hour + ":" + min + ":" + secs + ap; document.form.button.value = time; self.status = time; setTimeout('clock()', 1000); } function timeInfo() { milliSince = miNow; milliNow = miNow - miVisit; secsVisit = Math.round(milliNow / 1000); minsVisit = Math.round((milliNow / 1000) / 60); alert("anda telah menghabiskan " + milliSince + " millidetik sejak Maret 2009. " + milliNow + " milidetik anda telah berada dihalaman ini. " + ".... sekitar " + minsVisit + " menit, dan " + secsVisit + " detik."); } document.write("<form name=\"form\">" + "<input type=button value=\"Click for info!\"" + " name=button onClick=\"timeInfo()\"></form>"); onError = null; clock(); // End --> </script>

Mudah bukan. nah semoga bermanfaat ya.. selamat mencoba..

Clock Widget : Jam Mengikuti Kursor

Sesuai dengan judulnya kita langsung ajah prakteknya.. : Tinggal tambahkan kode html/javascrip berikut ini kedalam blog anda.

<style type="text/css"> <!-- /*Do not Alter these. Set for alignment*/ .css1{ position:absolute;top:0px;left:0px; width:16px;height:16px; font-family:Arial,sans-serif; font-size:16px; text-align:center; font-weight:bold; } .css2{ position:absolute;top:0px;left:0px; width:10px;height:10px; font-family:Arial,sans-serif; font-size:10px; text-align:center; } //--> </style> <script language="JavaScript"> //Hide from older browsers if (document.getElementById&&!document.layers){ // *** Clock colours dCol='#00ff00'; //date colour. fCol='#ffffff'; //face colour. sCol='#ffffff'; //seconds colour. mCol='#00ff00'; //minutes colour. hCol='#00ff00'; //hours colour. // *** Controls del=0.6; //Follow mouse speed. ref=40; //Run speed (timeout). // Alter nothing below! Alignments will be lost! var ieType=(typeof window.innerWidth != 'number'); var docComp=(document.compatMode); var docMod=(docComp && docComp.indexOf("CSS") != -1); var ieRef=(ieType && docMod) ?document.documentElement:document.body; theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"); theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"); date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year; D=tmpdate.split(""); N='3 4 5 6 7 8 9 10 11 12 1 2'; N=N.split(" "); F=N.length; H='...'; H=H.split(""); M='....'; M=M.split(""); S='.....'; S=S.split(""); siz=40; eqf=360/F; eqd=360/D.length; han=siz/5.5; ofy=-7; ofx=-3; ofst=70; tmr=null; vis=true; mouseY=0; mouseX=0; dy=new Array(); dx=new Array(); zy=new Array(); zx=new Array(); tmps=new Array(); tmpm=new Array(); tmph=new Array(); tmpf=new Array(); tmpd=new Array(); var sum=parseInt(D.length+F+H.length+M.length+S.length)+1; for (i=0; i < sum; i++){ dy[i]=0; dx[i]=0; zy[i]=0; zx[i]=0; } algn=new Array(); for (i=0; i < D.length; i++){ algn[i]=(parseInt(D[i]) || D[i]==0)?10:9; document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>'); tmpd[i]=document.getElementById("_date"+i).style; } for (i=0; i < F; i++){ document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>'); tmpf[i]=document.getElementById("_face"+i).style; } for (i=0; i < H.length; i++){ document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>'); tmph[i]=document.getElementById("_hours"+i).style; } for (i=0; i < M.length; i++){ document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>'); tmpm[i]=document.getElementById("_minutes"+i).style; } for (i=0; i < S.length; i++){ document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>'); tmps[i]=document.getElementById("_seconds"+i).style; } function onoff(){ if (vis){ vis=false; document.getElementById("control").value="Clock On"; } else{ vis=true; document.getElementById("control").value="Clock Off"; Delay(); } kill(); } function kill(){ if (vis) document.onmousemove=mouse; else document.onmousemove=null; } function mouse(e){ var msy = (!ieType)?window.pageYOffset:0; if (!e) e = window.event; if (typeof e.pageY == 'number'){ mouseY = e.pageY + ofst - msy; mouseX = e.pageX + ofst; } else{ mouseY = e.clientY + ofst - msy; mouseX = e.clientX + ofst; } if (!vis) kill(); } document.onmousemove=mouse; function winDims(){ winH=(ieType)?ieRef.clientHeight:window.innerHeight; winW=(ieType)?ieRef.clientWidth:window.innerWidth; } winDims(); window.onresize=new Function("winDims()"); function ClockAndAssign(){ time = new Date(); secs = time.getSeconds(); sec = Math.PI * (secs-15) / 30; mins = time.getMinutes(); min = Math.PI * (mins-15) / 30; hrs = time.getHours(); hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360; for (i=0; i < S.length; i++){ tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px"; tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px"; } for (i=0; i < M.length; i++){ tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px"; tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px"; } for (i=0; i < H.length; i++){ tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px"; tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px"; } for (i=0; i < F; i++){ tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px"; tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px"; } for (i=0; i < D.length; i++){ tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px"; tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px"; } if (!vis)clearTimeout(tmr); } buffW=(ieType)?80:90; function Delay(){ scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset; if (!vis){ dy[0]=-100; dx[0]=-100; } else{ zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del); zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del); } for (i=1; i < sum; i++){ if (!vis){ dy[i]=-100; dx[i]=-100; } else{ zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del); zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del); } if (dy[i-1] >= winH-80) dy[i-1]=winH-80; if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW; } tmr=setTimeout('Delay()',ref); ClockAndAssign(); } window.onload=Delay; } </script>

nah semoga bermanfaat ya.. selamat mencoba..

Membuat Tukeran Link Lebih Bervariasi

Kali ini saya ingin memodif sedikit mengenai tukeran link, mau tahu caranya?? ikuti langkahnya berikut ini..:

• Tambah Gadget lalu Html/Javascript lalu masukan kode di bawah ini.
<p>If you like this blog,then link back to me.<br/> This is what you will see.</p> <div style="text-align: center;"> <a style="border:0px;text-decoration:none;" href="alamat blog anda" title="Judul blog anda"> <img alt="Judul blog anda" style="border: 0px;" src="gambar logo blog anda"/> </a> </div> <textarea rows="3" cols="30"> &lt;a href="alamat blog anda" title="Judul blog anda" style="text-decoration:none;border:0;"&gt; &lt;img src="gambar logo blog anda" alt="Judul blog anda" style="border:0" /&gt; &lt;/a&gt; </textarea><br/> <br/> <!--Widget Auto Installer--> <form action="http://beta.blogger.com/add-widget" method="post"> <input style="display: none;" value="My Favourite Site" name="widget.title"/> <textarea style="display: none;" name="widget.content"> &lt;a href="alamat blog anda" title="Judul blog anda" style="text-decoration:none;border:0;"&gt; &lt;img src="gambar logo blog anda" alt="Judul blog anda" style="border:0" /&gt; &lt;/a&gt; </textarea> <br/> <input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/> </form>
• Ganti alamat blog anda, judul blog anda, dan gambar logo blog anda.

nah semoga bermanfaat ya.. selamat mencoba..

Tips Cerdas Belanja Kosmetik

VIVAnews - Belanja kosmetik bagi sebagian wanita bukan hal yang mudah. Warna yang tepat, bahan yang cocok bagi kulit, dan harga akan selalu menjadi pertimbangan. Nah, agar aktivitas belanja kosmetik Anda menjadi lebih nyaman dan tidak salah, lakukanlah hal berikut. - Rencanakan. Ketahui kebutuhan kosmetik dan buatlah daftar belanja jika memang Anda akan membeli banyak kosmetik. Rencanakan dengan matang dan sediakan waktu untuk membeli kosmetik. Catat kosmetik yang biasa Anda pakai, kalau perlu bawa kemasannya. Jika memang Anda ingin mencoba jenis lain, pramuniaga bisa memilihkan bahan atau warna yang mirip dengan kosmetik lama. - Hindari membeli kosmetik saat jam sibuk. Saat akhir pekan, gerai kosmetik cenderung ramai dan akan sulit mendapatkan pelayanan maksimal dari para pramuniaga. Jika memang Anda sudah tahu kosmetik yang akan dibeli dan tidak ingin mencoba tidak masalah. Tetapi, jika ingin mencoba kosmetik lain yang cocok dengan Anda sebaiknya pilih waktu saat gerai tidak terlalu ramai. Sehingga, Anda bisa leluasa memilih dan bertanya pada pramuniaga. - Wajah tanpa riasan. Kosmetik yang tepat adalah kosmetik yang melengkapi warna alami kulit, mata, pipi, dan bibir Anda. Jika untuk mendapatkan warna yang sesuai dengan kulit perlu ditambahkan dengan warna lain, sebaiknya jangan beli kosmetik tersebut. Saat membeli kosmetik cukup gunakan pelembab wajah dan bedak secukupnya saja. - Bertanya. Jangan segan untuk bertanya warna dan bahan kosmetik yang cocok bagi Anda pada pramuniaga. Akan lebih baik jika Anda juga mengajak teman untuk dimintai pendapat. Terutama jika Anda mencoba warna-warna baru. - Keamanan. Ketahui jenis kulit Anda, jika cenderung sensitif sebaiknya pilih kosmetik yang berbahan lembut dan tidak keras. nah semoga bermanfaat ya.. selamat mencoba..

Agar Tak Salah Pilih Pewarna Rambut

VIVAnews - Ketika mewarnai rambut, terkadang setelah pewarnaan, warna yang muncul tidak sesuai dengan keinginan atau tidak cocok dengan warna kulit. Hal ini ditandai dengan Anda cenderung menggunakan riasan nude dan bronzer tebal agar wajah terlihat lebih pucat. Kunci utama memilih warna rambut yang tepat adalah pilih warna dasar yang dua warna lebih terang atau lebih gelap daripada alis. Hal itu karena warna alis melengkapi warna kulit Anda dengan sempurna. Jika menyimpang terlalu jauh dari alis, warna akan tidak sesuai dengan kulit Anda. Anda juga dapat menggunakan warna foundation dasar sebagai barometer. Tetapi, jika Anda benar-benar yakin jika warna foundation cocok untuk kulit Anda. Apabila Anda ingin mewarnai rambut dengan warna kontras dengan kulit, seperti warna pirang dan kulit Anda gelap memang sedikit sulit untuk menemukan warna yang pas. Sebaiknya berkonsultasi dulu dengan penata rambut profesional untuk mendapatkan warna cat yang tepat. Warna cat rambut yang kontras dengan kulit tidak selalu terlihat buruk, jika mendapatkan warna yang tepat justru menjadi kombinasi warna yang mengagumkan. Hal ini dibuktikan oleh warna rambut terang yang kontras dengan warna kulit Beyonce Knowles dan Mary J. Blige. Untuk merawat rambut yang diwarnai lakukan perawatan dengan conditioner secara teratur. Gunakan juga vitamin rambut untuk mencegah rambut kering karena kerasnya bahan kimia yang terkandung dalam pewarna rambut. nah semoga bermanfaat ya.. selamat mencoba..

Istilah Kosmetik yang Perlu Anda Tahu

VIVAnews - Kaum wanita sering tergiur untuk menambah perlengkapan make up. Selain lipstik, eyeliner, eye shadow, bedak, perona pipi, ada alat kecantikan lain yang ditawarkan untuk menyempurnakan penampilan Anda. Namun, jangan sembarang membeli. Karena jika Anda tidak tahu fungsinya, hanya akan membuang uang dan waktu. Sebab, akhirnya beberapa peralatan make up hanya sesekali digunakan. Berikut beberapa istilah peralatan make up yang perlu Anda tahu: # Facial Mist Memulas kembali lipstik beberapa kali sehari adalah hal biasa. Tapi menyemprot wajah dengan mist mungkin akan menimbulkan pandangan aneh bagi orang lain. Ditambah lagi, produk ini berguna saat-saat tertentu ketika kulit sangat kering. # Highlight Produk kecantikan ini sangat populer saat pesta tahun baru yang memberi efek "kemilau" pada penampilan. Tapi, Anda tak mungkin ke kantor tiap hari dengan wajah penuh serbuk berkilau bukan? # Palette Rias Tren kecantikan berbentuk palette dengan berbagai produk kecantikan didalamnya cepat berganti dengan tren warna lainnya. Lagipula, jika berada pada palette, Anda bisa salah mencampur pemulas mata dengan lipstik. # Masker Kecantikan Memakai masker memang baik, tapi Anda butuh banyak waktu untuk menggunakannnya. Apalagi, jika terpaksa menyimpan di lemari pendingin baunya bisa berubah. Sebaiknya simpan seperlunya. # Dasar Rias Memakai pelembab, lalu memakai make up primer baru memakai alas bedak tampaknya bukan hal rutin yang akan Anda lakukan tiap hari. # Kuas bibir Sebagian besar kuas yang Anda miliki saat ini mungkin investasi terbaik bagi kecantikan, tapi tidak termasuk kuas bibir. Sebaiknya sebelum membeli, pertimbangkan berapa kali Anda menggunakan kuas bibir saat memakai lipstik? nah semoga bermanfaat ya.. selamat mencoba..

Kenali Bahan-bahan dalam Kosmetik Anda

VIVAnews - Kulit cantik dan sehat adalah dambaan setiap wanita. Untuk itu, banyak kaum hawa yang menggunakan produk kecantikan untuk menjaga kesehatan dan kecantikan kulit tubuhnya. Tapi bagaimana jika penggunaannya tidak sesuai kebutuhan. Saat menggunakan produk kecantikan kulit, Anda juga harus memperhatikan kandungan yang ada di dalamnya, sebab jika asal memakai kosmetik, justru bisa merusak kulit Anda. Untuk itu, ketahuilah kandungan dan manfaat dari produk kecantikan sebelum Anda menggunakannya. Ini penting agar kulit tetap terjaga kecantikannya. Berikut isi kandungan dan manfaat dari produk kosmetik yang perlu Anda kenali.

1. Vitamin C Dikenal sebagai asam askorbat, L-asam askorbat, askorbat, magnesium ascorbyl phosphate, ascorbyl palmitate. Baik untuk semua jenis kulit, kecuali untuk kulit yang sensitif. Kandungan dari vitamin C ini bisa melindungi kulit dari paparan sinar matahari dan mencegah penuaaan dini. Cara kerjanya: vitamin C bisa menetralkan radikal bebas yang terbentuk ketika kulit terkena sinar matahari, polusi, asap rokok, dan unsur-unsur berbahaya lainnya. Kerusakan kolagen akibat radikal bebas bisa menyebabkan keriput, bercak-bercak dan peradangan.
2. Asam salisilat Juga dikenal sebagai Beta hydroxy acid (BHA), kandungannya bagus untuk kulit normal dan kulit berminyak. Asam salisilat bisa membantu Anda mengatasi masalah jerawat dan iritasi. Cara kerjanya: asam salisilat dapat menembus sebum yang menyumbat pori-pori, membersihkan komedo. "Bila digunakan secara teratur, dapat mengurangi frekuensi dan keparahan letusan jerawat," kata Leslie Baumann, profesor dermatologi di University Miami, di Florida. Hindari kandungan ini jika Anda memiliki kulit kering, sensitif atau alergi terhadap aspirin. Terkadang asam salisilat juga digunakan sebagai obat penghilang rasa sakit.
3. Ferulic acid Biasa disebut sebagai 4-hydroxy-3-methoxycinnamic asam. Bagus untuk kulit kering dan kulit normal. Manfaat dari kandungan ini sangat baik untuk melindungi kulit dari sinar matahari dan penuaan dini. Cara kerjanya: Biasanya dikombinasikan dengan vitamin C dan E. "Asam ferulic membantu menstabilkan kulit," ujar Barbara R. Reed, seorang profesor klinis dermatologi di University Colorado Health Science Center, di Denver. Ferulic Acid memiliki kekuatan dua kali lipat sebagai agen pelindung matahari dan meningkatkan kemampuan kulit untuk menetralisir radikal bebas.
4. Retinol Biasa dikenal sebagai retinoic acid atau retinyl palmitate. Bagus untuk kulit normal dan kulit berminyak. Sangat bermanfaat untuk menghindari kerusakan kulit akibat paparan sinar matahari, menyembuhkan jerawat dan melindungi kulit dari proses penuaan dini. Cara kerjanya: retinol yang ringan berubah bentuk menjadi retinoid yang terdapat dalam Retin-A dan Renova, telah terbukti merangsang produksi kolagen dan pembentukan jaringan elastis serat. Hindari penggunaan retinol jika jenis kulit Anda termasuk jenis sensitif dan memiliki masalah kulit seperti peradangan pada kulit dan eksim.
5. Idebenone Juga dikenal sebagai Ubiquinone, koenzim Q-10. Baik untuk semua jenis kulit. Bisa melindungi kulit dari sinar matahari dan mencegah iritasi serta penuaan dini. Cara kerjanya: Idebenone adalah salah satu antioksidan kuat yang terkandung dalam kosmetik. "Kandungan antioksidannya bisa membantu melindungi kolagen dan elastin, yang memberikan dukungan dan ketahanan kulit," ujar Lisa Donofrio, associate profesor dermatologi klinis di Yale University School of Medicine.
6. Hyaluronic Acid Juga dikenal sebagai Natrium hyaluronate. Baik untuk semua jenis kulit, terutama kulit kering. Bermanfaat untuk melindungi kulit dari proses penuaan dini. Cara kerjanya: Hyaluronic asam dan stempel menarik air ke dalam kulit. "Ketika kulit berkeringat, kandungan ini bisa menyamarkan garis-garis halus yang terlihat,” ujar Susan Weinkle, asisten profesor dermatologi klinis di University of South Florida, di Tampa. Hindari hyaluronic acid jika Anda tinggal di iklim dengan kelembaban rendah. Sebab kandungan ini tidak akan bekerja dengan baik karena tidak bisa menyerap air yang ada di permukaan kulit Anda, sehingga bisa menyebabkan dehidrasi pada kulit.
7. Green Tea Dikenal sebagai Epigallocatechin gallate (EGCG). Baik untuk semua jenis kulit. Khasiat Green Tea bisa melindungi kulit dari paparan sinar matahari, menyembuhkan iritasi dan mengatasi masalah kerut dan penuaan. Cara kerjanya: "Teh hijau adalah salah satu yang paling ampuh sebagai bentuk perlindungan," kata Patricia Farris, asisten klinis profesor dermatologi di Tulane University, di New Orleans. Khasiatnya, bisa melindungi kerusakan kulit akibat sinar matahari, dan penelitian telah menunjukkan bahwa produk yang mengandung setidaknya 5 % ekstrak teh hijau dapat membantu mencegah kanker kulit bila diterapkan sebelum paparan sinar matahari bersama dengan tabir surya.
8. Niacinamide Juga dikenal sebagai Nikotinamid, baik digunakan untuk kulit kering. Khasiatnya bisa melindungi dari berbagai problema seperti kerusakan, iritasi dan penuaan kulit. Cara kerjanya: "Niacinamide menstimulasi mikrosirkulasi dan mencegah hilangnya air di kulit," kata Reed. Selain itu, kata Donofrio, "jauh di dalam kulit, khasiat dari kandungan ini bisa meningkatkan produksi ceramides, berupa lem yang memegang sel bersama-sama dan mencegah kehilangan air." Hasilnya bisa memberikan kulit yang sehat, muda dan berseri.

nah semoga bermanfaat ya.. selamat mencoba..

Waspada Terhadap Kosmetik

VIVAnews - Ragam produk kosmetik menawarkan kemampuan membuat kulit tampak halus, menghilangkan noda dan menjadikan wajah terlihat lebih muda. Masalahnya, sebagian besar kosmetik yang beredar saat ini mengandung senyawa kimia. Penulis buku "Perfect Hormone Balance for Fertility" Dr Robert Greene menjelaskan apabila wajah terpapar bahan kimia dalam waktu lama dapat menimbulkan kerusakan jangka panjang (bio mutagenik) yang berbahaya bagi kesehatan karena memicu ketidakseimbangan hormon. Sebagai contoh, senyawa kimia ftalat yang banyak digunakan pada parfum, kosmetik, dan cat kuku. Wanita yang sering menggunakan produk mengandung senyawa kimia ftalat meningkatkan risiko kesuburan dan dapat menaikkan risiko kanker pada anak-anaknya. Dokter Greene menyarankan agar lebih berhati-hati memilih produk kosmetik.

1. Pilih produk-produk organik. Produk kosmetik organik umumnya lebih aman dan lebih sedikit mengandung bahan kimia. Perlu diingat, Anda tetap harus memeriksa label kosmetik walaupun perusahaan mengkalim produknya organik untuk mengetahui isi produk kosmetika.
2. Gunakan riasan sederhana Anda bisa menghindari kemungkinan terpapar bio mutagen dengan mengurangi jumlah produk kosmetika yang Anda gunakan.
3. Pilih kosmetika non-aroma Sebagian besar wewangian pada produk kosmetik mengandung bahan kimia yang mudah menguap dan lebih mudah masuk ke aliran darah.
4. Minimalkan penggunaan cat kuku Cat kuku dianggap penyebab paling konsisten yang mengakibatkan cacat lahir. Jika Anda memakai cat kuku, sebaiknya pakailah dalam sebuah area yang berventilasi baik dan pastikan cat kuku bebas senyawa ftalat.
5. Membuat daftar belanja Belilah kosmetik yang Anda butuhkan, jangan membeli kosmetik hanya karena tertarik tanpa memperhatikan isinya.

nah semoga bermanfaat ya.. selamat mencoba..

Cara Mengusir Stres Sesuai Horoskop (II)

VIVAnews - Ingin bebas stres di awal tahun? Anda bisa mengikuti serangkaian latihan atau gerakan olahraga untuk mengusir stres berikut ini. Lakukan tips sesuai zodiak Anda. Jika terdesak waktu, cukup lakukan gerakan ini 10 menit saja. Dijamin, Anda akan mendapatkan ketenangan pikiran, tubuh dan jiwa. Gerakan apa sajakah itu? Taurus Hentikan dulu semua aktivitas yang bisa membuat para Taurus stres. Coba dengarkan apa yang dibutuhkan tubuh Anda dengan kelima panca indera. Anda bisa melakukan meditasi sambil mendengar iringan musik menenangkan, seperti new age. Lakukan juga gerakan peregangan di bagian leher dan bahu. Cara ini bisa mengurangi beban yang Anda rasakan. Hasilnya, bisa membuat pikiran Anda tenang dan jernih. Gemini Fokus utama kaum Gemini adalah pernapasan. Mulailah dengan memperlancar saluran pernapasan. Anda bisa melakukan mengikuti gerakan aerobik yang dinamisGerakkan lengan, bahu dan pergelangan tangan, ini untuk menguasai seluruh tubuh. Selama bergerak, dan jangan lupa bernapas. Latihan ini juga baik untuk kesehatan patu-patu Anda. Cancer Biarkan emosi Anda yang mengatur gerakan Anda. Biarkan tubuh Anda merefleksikan mood yang sedang Anda alami, dan mengubah gerakan sebagai nada perubahan emosi. Lakukan gerakan yang bisa mengikuti keinginan hati, dan membuat perasaan Anda makin nyaman. Kaum Cancer rentan mengalami masalah lambung. Lakukan meditasi untuk menenangkan perut Anda. Leo Cara sederhana pemilik bintang Leo untuk meredam stres adalah membuka hati. Gerakan yoga “Fish Pose” bisa menjadi pilihan gerakan yang bisa dipraktekkan. Jika perlu, lakukan gerakan ini di bawah mentari pagi. Ada kekuatan dan rasa percaya diri yang positif dalam diri Leo. Sehingga apapun beban berat yang akan dipikul, akan muncul tekad yang bisa memotivasi Leo. Virgo Virgo bisa memilih gerakan senam yang memerlukan ketepatan, dan pengulangan. Melakukan gerakan-gerakan ini bisa membuat otot-otot tulang belakang relaks. Lakukan secara rutin. Mengulangi gerakan hingga energi terkuras bisa membuat Virgo mampu mengatasi sifat cenderung kompulsif, yang bisa memicu stres. Libra Gerakan yang elegan dan dinamis seperti gerakan balet bisa memberikan kedamaian batin bagi kaum Libra. Lakukan latihan pernapasan sambil melakukan gerakan untuk memperbaiki ketidakseimbangan dalam tubuh Anda. "Tree Pose" pada balet merupakan gerakan fantastis untuk memperbaiki keseimbangan tubuh. nah semoga bermanfaat ya.. selamat mencoba..

Cara Mengusir Stres Sesuai Horoskop

VIVAnews - Ingin bebas stres di awal tahun? Anda bisa mengikuti serangkaian latihan atau gerakan olahraga untuk mengusir stres berikut ini. Lakukan tips sesuai zodiak Anda. Jika terdesak waktu, cukup lakukan gerakan ini 10 menit saja. Dijamin, Anda akan mendapatkan ketenangan pikiran, tubuh dan jiwa. Gerakan apa sajakah itu? Scorpio Cobalah fokus pada daerah pinggul. Pilih gerakan yang bisa mengakses energi seksual Scorpio. Gerakkan pinggul Anda secara perlahan, layaknya meniru gerakan penari perut. Kuncinya, intensitas dalam gerakan, sehingga bisa membantu membangkitkan gairah Anda . Sagitarius Gerakan bebas bisa membangkitkan energi Sagitarius. Lakukan latihan olahraga, seperti berenang, atau jogging, dengan bersemangat. Makin bersemangat gerakan, makin aktif hari-hari Anda. Capricorn Kulit Anda tergolong sensitif. Lakukan kegiatan yang tidak menganggu kesehatan kulit. Anda bisa memilih olahraga indoor. Yang paling penting, pilihlah gerakan yang bisa menenangkan lutut, seperti berenang atau senam. Aquarius Bergerak dengan cepat, dan bebaskan diri Anda. Ikuti kata hati Anda, karena kuncinya adalah untuk mencoba hal baru. Anda bisa mencoba olahraga yang selama ini ingin dilakukan. Energi Anda membawa tubuh untuk bergerak. Kejutan akan hadir ketika Anda dengan cara aneh menemukan gerakan baru yang bermanfaat. Pisces Biarkan diri Anda merasa seolah-olah menari tanpa tulang untuk menahan Anda. Bayangkan tubuh Anda benar-benar bisa mengambang. Lakukan gerakan dengan diiringi musik favorit. Tutup mata Anda sambil menikmati gerakan tari. Aries Saat stres, kondisi itu bisa terlihat di wajah Anda. Lepaskan ketegangan akibat stres dengan menyalurkan dorongan agresif dan lakukan gerakan sederhana. Mulailah dengan pijat wajah. Lakukan gerakan ringan dengan menggerakkan mulut dan rahang secara perlahan untuk memulainya. Ini berguna untuk meregangkan otot-otot wajah dan bisa membantu melepaskan ketegangan. Langkah selanjutnya, ikuti latihan seni beladiri. Gerakan memukul, menendang, menerjang maju atau apapun kegiatan seni bela diri bisa membuat kaum Aries akan merasakan langsung getaran yang dapat mengaktifkan mood Anda. nah semoga bermanfaat ya.. selamat mencoba..

Tips Sederhana Agar Olahraga Lebih Efektif

VIVAnews - Ada beberapa anjuran yang sebaiknya Anda perhatikan saat berada di pusat kebugaran. Minum air putih sebelum melakukan latihan olahraga ternyata bukan solusi terbaik. Setelah latihan, Anda akan tetap mengalami dehidrasi lewat keringat. Sebaiknya sebelum, selama dan setelah olahraga, konsumsi air putih sebanyak mungkin. Berikut ini beberapa tips agar olahraga Anda lebih efektif. Makan sebelum dan setelah olahraga Sebelum melakukan gerakan olahraga, tubuh memerlukan asupan karbohirdrat dan protein. Karbohidrat memberi energi selama latihan dan protein menjaga nutrisi untuk membentuk otot dan memperbaiki jaringan tubuh yang rusak. Satu jam sebelum latihan, dianjurkan makan menu ringan. Beberapa pilihan makan di antaranya pisang, sereal gandum atau minum sari kacang kedelai atau makan sebuah apel/seledri dengan selai kacang membantu menahan rasa lapar hingga latihan selesai. Setelahnya, asupan protein atau karbohidrat akan menstimulasi pembentukan otot. Hindari makanan kecil yang mengandung gula karena menjadikan tubuh menjadi lemas. Hindari juga kafein karena membuat Anda merasa segar seketika tetapi menurun dengan cepat. Pakaian yang Pas Saat berada di pusat kebugaran, kenakan pakaian olahraga yang pas. Jangan gunakan yang terlalu ketat. Selama latihan, tubuh membutuhkan udara. Lengan dan kaki memerlukan ruang agar bebas bergerak tanpa risiko cidera akibat pakaian ketat. Jangan juga memakai pakaian terlalu longgar, karena akan merepotkan. Bisa jadi, pakaian Anda tersangkut di mesin saat melakukan latihan. Pakaian olahraga terbaik yang dapat Anda kenakan berupa pakaian dengan bahan karet sintetis yang memiliki sirkulasi udara. Pakai celana pendek dan kaos yang pas di badan serta sepatu kets yang mendukung gerakan latihan Anda. Bernapas dengan benar Jika dada terasa nyeri di pertengahan gerakan olahraga, sebaiknya perhatikan cara bernapas Anda. Mengelola pernapasan dengan baik membuat Anda bisa berlari, berjalan, jogging, atau mengangkat beban lebih lama. Ketika melakukan latihan angkat beban misalnya, tarik napas setiap kali gerakan dan lepaskan saat Anda menurunkan beban. Saat senam aerobik, tarik napas panjang dan keluarkan perlahan-lahan. Setelah lama berlatih, Anda akan menemukan teknik tepat untuk Anda. Bagi yang menggunakan treadmill atau lari misalnya, bisa menarik napas setiap tiga langkah dan mengeluarkannya setelah dua langkah berikutnya. Olahraga di waktu ideal Masing-masing orang memiliki olahraga favorit sendiri-sendiri. Olahraga yang dilakukan secara rutin pada jam ideal tubuh akan meningkatkan energi Anda. Sebaliknya, olahraga yang dilakukan pada waktu yang salah akan merusak tubuh dan memberi energi negatif. Olahraga di awal malam hari misalnya akan membebani tubuh. Setiap orang memiliki tingkat energi yang berbeda-beda. Bisa saja dalam sehari Anda merasa fit, dan hari berikutnya Anda seperti kehilangan tenaga. Asal tidak dalam waktu lama, sekali-sekali Anda bisa meliburkan diri dari rutinitas latihan. nah semoga bermanfaat ya.. selamat mencoba..

Lari Tanpa Alas Kaki Ternyata Lebih Sehat

VIVAnews - Jika Anda sedang berfikir untuk mencari sepasang sepatu untuk lari? Sebaiknya batalkan saja! Penelitian yang dilakukan tim peneliti dari Harvard University menemukan bahwa lari tanpa alas kaki justru lebih sehat. Dari sebuah penelitian, diketahui seseorang yang menggunakan sepatu untuk lari, cenderung mengalami shock yang menimbulkan rasa nyeri di seluruh tubuhnya. Penelitian ini didasari atas survey yang dilakukan pada gaya lari para atlet baik yang menggunakan sepatu maupun tanpa alas kaki. Selain itu juga, ditemukan bahwa para atlet yang lari menggunakan sepatu bisa mengalami "heel strike", yaitu untuk setiap mil mereka berlari, mereka akan membanting tumit ke tanah 1.000 kali. Bantingan ini menciptakan tekanan yang cepat dan besar pada seluruh tubuh. Namun untuk atlet yang tidak menggunakan sepatu cenderung mendaratkan kaki secara lentur. Hentakan kaki mereka lebih lembut dibandingkan yang menggunakan sepatu. Hal ini menjelaskan mengapa banyak para atlet lari tidak dianjurkan memakai alas kaki saat bertanding. "Seseorang yang tidak menggunakan sepatu saat berlari biasanya mengalami tekanan yang berbeda dibandingkan yang menggunakan sepatu," kata Daniel Lieberman, profesor bidang evolusi biologi manusia di Harvard University, seperti vivanews kutip dari Daily Mail. "Sebagian besar orang berpikir berlari tanpa alas kaki bisa berbahaya dan menyakitkan. Padahal, dengan berlari telanjang kaki justru membuat seseorang bisa berlari pada jalanan yang keras tanpa rasa sakit," tambah Lieberman. Hal terpenting saat berlari telanjang kaki, menurut Lieberman, adalah hati-hati dengan calluses (kapalan) yang timbul. Jika memang timbul kapalan, bersihkan dan atasi dengan krim untuk menghindari infeksi. nah semoga bermanfaat ya..