Sabtu, 09 Maret 2013

0 Widget Display Skin SM

Date: Sabtu, 09 Maret 2013 7:21 PM
Category:
Author: Unknown
Share:
Responds: 0 Comment

Display Skin SM adalah widget blogger yang membantu anda dalam menyempurnakan sebuah blog dengan merubah tampilan secara langsung yang ada didalamnya. Widget ini memanfaatkan Cookie browser untuk menyimpan data rubahan dari tampilan blog itu.

Anda bisa mengatur ukuran huruf, tipe huruf, warna huruf, warna bakground, bahkan Anda juga bisa memilih URL background dari tempat lain.

Suport oleh JQuery dan JavaScript

 Tutorial :
  • Pilih Tab Template lalu klik Edit HTML
  • Letakkan CSS berikut di atas ]]></b:skin>
.displayskin-sm{position:fixed;z-index:293;bottom:120px;left:-300px;}
.dalem-skin{background:#333;color:#aaaa99;width:300px;padding:6px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:0pt 1px 2px black;-webkit-box-shadow:0pt 1px 2px black;-moz-box-shadow:0pt 1px 2px black;display:inline-block;}
.dalem-skin a{cursor:pointer;color:#0186CB;}
.dalem-skin a:hover{color:#0186CB;text-decoration:underline;}
.dalem-skin th,.dalem-skin td {color:#aaaa99;vertical-align:middle;border:none !important;padding:2px 10px;}
.dalem-skin select,#daftarskin-sm input, .skin-sm input[type="text"] {padding:4px !important;height:auto !important;border:1px solid #bbb;background-color:#333;padding:2px;font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;color:#999;display:inline-block;margin:0 0 0;height:24px;}
.dalem-skin select option {color:white;padding:5px 10px;cursor:pointer;}
.dalem-skin button {font:normal 11px Tahoma,Arial,Sans-Serif;padding:3px 5px;cursor:pointer;}
.bgColorer {overflow:hidden;text-align:center;}
.bgColorer span {display:inline-block;width:20px;height:20px;border:1px solid black;margin:0 5px 0 0;cursor:pointer;}
.dalem-skin select,#daftarskin-sm input[type="text"] {width:118px !important;}
#daftarskin-sm{position:relative;z-index:294;display:none;max-height:200px;padding:6px;margin-bottom:-20px;overflow:scroll;box-shadow:0pt 1px 2px black;-webkit-box-shadow:0pt 1px 2px black;-moz-box-shadow:0pt 1px 2px black}
.skin-sm{position:relative;z-index:295;background:#333;box-shadow:0pt 1px 1px 1px black;-webkit-box-shadow:0pt 1px 1px 1px black;-moz-box-shadow:0pt 1px 1px 1px black;padding:6px;}
#hideshow-skin1,#hideshow-skin2{cursor:pointer;display:inline-block;}
  • Buat Gadget HTML/JavaScript baru
  • Masukkan Elemen ini dan klik Simpan
<div class="displayskin-sm">
<div id="hideshow-skin1" style="display:none"></div>
<div class="dalem-skin">
<div id="daftarskin-sm">
<table border="0" id="styleSwitcher">
<tr><td colspan="2"><center><div id="bgcolor-sm" class="bgColorer"></div></center></td></tr>
<tr><th>Tipe huruf</th><td id="font-skin-sm"></td></tr>
<tr><th>Warna huruf</th><td><input type="text" id="fontColorer" value="rgb( 0 , 0 , 0 )" onkeyup="fontColor(this.value);"/></td></tr>
<tr><th>Background url</th><td><input type="text" id="urlGambarer" value="URL dan Enter" onkeyup="urlGambar(this.value);"/></td></tr>
<tr><th>Reset?</th><td><button onclick="resetStyle();">Kembalikan Tampilan</button></td></tr>
</table>
</div>
<div class="skin-sm">
<center><div class="bgColorer">
<span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbAvsG0TkOwRCOTOGx3Oe6UdFoF0sx8_ZOknKvfXTumlsD7Cx0mjFwqgkbopl1cgPUQWn-APbKNjqDvE8zte4TtJCZWf2JPAEWxr5139uaIX0fZ0qvmSmB9b5RSYFGURuhxHyMpZrwGk/s30/Halloween_Wallpapers_47+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbAvsG0TkOwRCOTOGx3Oe6UdFoF0sx8_ZOknKvfXTumlsD7Cx0mjFwqgkbopl1cgPUQWn-APbKNjqDvE8zte4TtJCZWf2JPAEWxr5139uaIX0fZ0qvmSmB9b5RSYFGURuhxHyMpZrwGk/s1600/Halloween_Wallpapers_47+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span>
<span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfNTRhij1VezjM6nK493-IBGkpstjisKh6pJF1YnlXb1WqKL0O-53EA4i_QAq5bRhdWs5J40nYPXf382fWsuT5ip69jvlqQPZznAG6zlTueskI1HPDL7fkRFiLefoDi93Uohtz1S2ynIo/s30/Halloween_Wallpapers_120+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfNTRhij1VezjM6nK493-IBGkpstjisKh6pJF1YnlXb1WqKL0O-53EA4i_QAq5bRhdWs5J40nYPXf382fWsuT5ip69jvlqQPZznAG6zlTueskI1HPDL7fkRFiLefoDi93Uohtz1S2ynIo/s1600/Halloween_Wallpapers_120+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span>
<span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK3p5DuM3dkhDpgCtJnSYIUawMCOlhXBj2y-FDhg1_k_jzEdJfQR4U4ZkHt0zeY4Z2JS_ZARoGVK2Eo0Wl96Yp9ItHbfWCE_6Rt3YT1zYz9rYzihUadR0TwroUglA3IP6YTW0WfXI41og/s30/Halloween_Wallpapers_117+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK3p5DuM3dkhDpgCtJnSYIUawMCOlhXBj2y-FDhg1_k_jzEdJfQR4U4ZkHt0zeY4Z2JS_ZARoGVK2Eo0Wl96Yp9ItHbfWCE_6Rt3YT1zYz9rYzihUadR0TwroUglA3IP6YTW0WfXI41og/s1600/Halloween_Wallpapers_117+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span>
<span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPlLIedd2s9uBRcndOetjf7uAaWKaSmxeus34M4JN6qiA0dTZ5kVCBZNsJJln60YhnNpGCWVTUwNf9kfS085Uwx9IZFGvUT-_ZybFI1w-VdNuopROYnWO0fwmrwv8HTqqFeIWdRMvyP0/s30/Halloween_Wallpapers_55+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPlLIedd2s9uBRcndOetjf7uAaWKaSmxeus34M4JN6qiA0dTZ5kVCBZNsJJln60YhnNpGCWVTUwNf9kfS085Uwx9IZFGvUT-_ZybFI1w-VdNuopROYnWO0fwmrwv8HTqqFeIWdRMvyP0/s1600/Halloween_Wallpapers_55+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span>
<span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBLgA4oJh_Xds0v7LnBq0xRchXZ1_iLWgtDOfSW4Lv5Bo32N94Z3vQT46Vgab9QmRLzvoBXg7FoaKtqlTJVsphXusI2sUmIn6NqdfgmRQExZSpd7xtcB3f5WpVYPJGKg8ktCngWyJux8U/s30/Burning_Umbrella+%28+gothicwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBLgA4oJh_Xds0v7LnBq0xRchXZ1_iLWgtDOfSW4Lv5Bo32N94Z3vQT46Vgab9QmRLzvoBXg7FoaKtqlTJVsphXusI2sUmIn6NqdfgmRQExZSpd7xtcB3f5WpVYPJGKg8ktCngWyJux8U/s1600/Burning_Umbrella+%28+gothicwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span>
<span style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYSE31NB94sxMJaRHqDIbN0ideAEVtes9MOA-Hi2fxMfEstYv29M22cFO11F3R_0nJKlEczSDBgLCznJWxfB4HUbJc6-YWQ_JAsAUDdJkTQ8kyCHkcqcaqYN_rrLFMSMSfKvG3HjqL2Y/s30/Dark_Angel_Wallpapers_14+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYSE31NB94sxMJaRHqDIbN0ideAEVtes9MOA-Hi2fxMfEstYv29M22cFO11F3R_0nJKlEczSDBgLCznJWxfB4HUbJc6-YWQ_JAsAUDdJkTQ8kyCHkcqcaqYN_rrLFMSMSfKvG3HjqL2Y/s1600/Dark_Angel_Wallpapers_14+%28darkwallz.blogspot.com%29.jpg)repeat-x fixed top center')"></span>
</div></center>
<div style="display:inline-block;"><span>Ukuran huruf</span> : <input type="text" id="fontSizer" value="11" maxlength="3" onkeyup="changeFontSize(this.value);" style="width:50px;text-align:center"/></div>
<div id="buka-daftarskin" style="display:inline-block;float:right"></div>
</div>
</div>
<div id="hideshow-skin2"></div>
</div>

<script src='http://reader-download.googlecode.com/svn/trunk/cookie.js'></script>
<script src="http://not-remove-admin.googlecode.com/files/displayskins-sm2.js"></script>

Note!
  1. Anda bisa mengganti URL BACKGROUND sendiri
  2. Juga cukup mengganti s1600 menjadi s30
  3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBLgA4oJh_Xds0v7LnBq0xRchXZ1_iLWgtDOfSW4Lv5Bo32N94Z3vQT46Vgab9QmRLzvoBXg7FoaKtqlTJVsphXusI2sUmIn6NqdfgmRQExZSpd7xtcB3f5WpVYPJGKg8ktCngWyJux8U/30/Burning_Umbrella+%28+gothicwallz.blogspot.com%29.jpg
  4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBLgA4oJh_Xds0v7LnBq0xRchXZ1_iLWgtDOfSW4Lv5Bo32N94Z3vQT46Vgab9QmRLzvoBXg7FoaKtqlTJVsphXusI2sUmIn6NqdfgmRQExZSpd7xtcB3f5WpVYPJGKg8ktCngWyJux8U/1600/Burning_Umbrella+%28+gothicwallz.blogspot.com%29.jpg
<span style="background:url(URL BACKGROUND);" onclick="bgImgSwitch('black url(URL BACKGROUND)repeat-x fixed top center')"></span>

Artikel Terkait :



Category :

Posting Komentar

Langganan: Posting Komentar (Atom)
 
© Copyright Hatakeyama | Template By : Nando Cyber4rt