Apakah anda ingin tampilan blog anda semakin menarik, dengan membuat para pengunjung blog bisa mengganti tampilan blog sendiri? Tentu sangat kepingin kan... Nah widget berikut ini mampu merubah gambar dengan URL gambar anda sendiri. Tak hanya itu, jenis font, warna dan ukuran huruf pun bisa anda tentukan sendiri.. Pokoknya keren abis dech, anda juga dapat merubah skin atau latar blog dengan warna kesukaan anda. Gimana, mantab to...
Langsung saja simak langkah-langkah berikut ini :
- 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/AVvXsEjouqswEoJIj61_qB65CjSyw1jZksQr9Hyca7SmdfCnXhJ-gcirynblQlbN1yKJe7LC51MKvFmHk6t_JE9UesPv2YEn5zwN2ruLD0UEAL3NrRtGAp8uKHtUPjKY-00rUPcljHhZlWYop2k/s30/Halloween_Wallpapers_47+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouqswEoJIj61_qB65CjSyw1jZksQr9Hyca7SmdfCnXhJ-gcirynblQlbN1yKJe7LC51MKvFmHk6t_JE9UesPv2YEn5zwN2ruLD0UEAL3NrRtGAp8uKHtUPjKY-00rUPcljHhZlWYop2k/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/AVvXsEjQ2-h0Oz1_4NWzMay8GzA3kNEgR5bB8pP-rwK1SDMvX3XPraZgLU8MzFiD3JE3Z3C6jScLpLm0nnvX5JhhHz87QbvcIaUefPIcUhGVlp6JkksW7qVspSCeOMwO6wpVLnfhKJf-ODJcJJw/s30/Halloween_Wallpapers_120+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2-h0Oz1_4NWzMay8GzA3kNEgR5bB8pP-rwK1SDMvX3XPraZgLU8MzFiD3JE3Z3C6jScLpLm0nnvX5JhhHz87QbvcIaUefPIcUhGVlp6JkksW7qVspSCeOMwO6wpVLnfhKJf-ODJcJJw/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/AVvXsEhgZ1PNa4ZvKtOXL9iJBVz_PkVZt5TT03lCx66u_PS1XSsPthJXdL-DwGiQX__Iawu3IXVD4MqF6N1y6hpk1neTlqhbUAXR3ryxotNv0YsRThky9LFxhCEZ-Khz3pDKC5-OIdRb6KE0NDM/s30/Halloween_Wallpapers_117+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgZ1PNa4ZvKtOXL9iJBVz_PkVZt5TT03lCx66u_PS1XSsPthJXdL-DwGiQX__Iawu3IXVD4MqF6N1y6hpk1neTlqhbUAXR3ryxotNv0YsRThky9LFxhCEZ-Khz3pDKC5-OIdRb6KE0NDM/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/AVvXsEhreoCpeJfK4cwAUDt-FKxCQqmb21GsPrl84X3jZ8P5koK_phRaELrZ6Kltkx7pspQ2gQv0FT_2WX6FGIXXpaOoyxTdVKKLNAqy8HQfo7S63YNCcCyudRO298_FKsyXHdsjsQt9OefX_fE/s30/Halloween_Wallpapers_55+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhreoCpeJfK4cwAUDt-FKxCQqmb21GsPrl84X3jZ8P5koK_phRaELrZ6Kltkx7pspQ2gQv0FT_2WX6FGIXXpaOoyxTdVKKLNAqy8HQfo7S63YNCcCyudRO298_FKsyXHdsjsQt9OefX_fE/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/AVvXsEivReuN-eGhqQMdCDaHVMZRm0_8M7UFUljoY2rRyCPllSS_mSdppODJgNfCPr3YkmPs7pV2EHXOWc-ZhefPuYFgFBCgqIz1Ayr5tUSienMvf1y_P0-xOyU5e-54ubCDpf_bJBN6T7tovi9R/s30/Burning_Umbrella+%28+gothicwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivReuN-eGhqQMdCDaHVMZRm0_8M7UFUljoY2rRyCPllSS_mSdppODJgNfCPr3YkmPs7pV2EHXOWc-ZhefPuYFgFBCgqIz1Ayr5tUSienMvf1y_P0-xOyU5e-54ubCDpf_bJBN6T7tovi9R/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/AVvXsEg2w1vAXDin77fWJN3RfKQlpr4LlKwofMBWd0yXJCbeqri2DWqYYfRp6bhryvdO-fzN8G5cVgAzHksGUjqLMgFL3wM7X5_3BtdTxrb8sWXf6O2vxko86fPu7MZAR3ESpK1iHQbhuY5Xr5U/s30/Dark_Angel_Wallpapers_14+%28darkwallz.blogspot.com%29.jpg);" onclick="bgImgSwitch('black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2w1vAXDin77fWJN3RfKQlpr4LlKwofMBWd0yXJCbeqri2DWqYYfRp6bhryvdO-fzN8G5cVgAzHksGUjqLMgFL3wM7X5_3BtdTxrb8sWXf6O2vxko86fPu7MZAR3ESpK1iHQbhuY5Xr5U/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='https://sites.google.com/site/blogsantamars/css-santa-mars/cookie.js'></script>
<script src="https://sites.google.com/site/blogsantamars/css-santa-mars/displayskins-sm2.js"></script>
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Memodifikasi Tampilan Blog Oleh Pengunjung Sendiri. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
