Header Ads Widget

Responsive Advertisement

Widget Merubah Tampilan Blog Langsung

Monoz 8:00 AM

Alllooo Moz's blogger kalo kata afika "ada yang baru nich...", yup aplikasi blog kreasi monozcore Widget Merubah Tampilan Blog Langsung, yaitu Blog Setting Plus v2. Aplikasi ini memperbolehkan pengunjung blog untuk mengganti warna latar belakang atau gambar latar belakang blog kita di browsernya. Tenang sob warna latar atau gambar latar hanya berlaku di browser pengunjung dan tidak akan mempengaruhi template asli blog kita. Aplikasi blog ini bertujuan agar pengunjung blog menjadi betah untuk mengunjungi blog kita karena dengan aplikasi blog ini pengunjung dapat menyesuaikan tampilan latar blog yang sesuai seleranya. Gimana...sob makin keren-kan kreasinya...hehehe :):) semua ini berkat dukungan dan bantuan dari sobat blogger monozcore... karenanya setiap postingan artikel di blog monozcore selalu diusahakan yang terbaik...

Blog Setting Plus kompatibel dengan browser yang sudah mendukung JavaScript, CSS 3, HTML 5 dan Cookie Enable, seperti Mozilla Firefox 3.6 atau lebih, IE 8 atau lebih, Opera 10 atau lebih, Safari 5 atau lebih dan Google Chrome 16 atau lebih. Blog setting plus memiliki berbagai setting yang atraktif untuk pengunjung blog mulai dari mengganti warna latar atau gambar latar blog sampai memutar video youtube sebagai latar belakang blog.

Buat sobat blogger yang ingin mencoba dahulu silakan disimak cara pemasangannnya... Buat yang pengen kasih donasi monggo diklik logo paypal di bawah ini.

Okelah kalo begitu kita langsung menuju ke TKP...

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.





  • Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.
    <script>
if(typeof(jQuery) == 'undefined'){document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
</script>
<style>
fieldset {padding:4px;border-radius:2px;}
legend {color: #0D517B;}
</style>

<script type='text/javascript'>
var divSetOpacity='#wrapper';
var youtubecode='afQekcZmSIg';
</script>

<script src='http://sites.google.com/site/monozcore/home/monozcore_blogsettingplus_v2.js'></script>

<!-- Start Blog Setting Plus -->
<div id="pageSetting" style="display:none;background-color:#CDCEC5;padding:5px;border-radius:4px;border:2px ridge #ccc;">
<form>
<fieldset>
<legend>Background Image</legend>
<input name="bgRadio" id="bgradioImgStatic" type="radio" onclick="radioBgStatic=1;enableBgInput();goBgImage();" /><span  style="font-size:12px;font-family:Arial;">STATIC IMAGE</span>
<table border="0" width="100%" style="font-size:12px;font-family:Arial;">
<tr><td width="50px">URL</td>
<td style="padding-right:5px;"><input id="imgBgURL" name="url" style="width:100%;" type="text" disabled /></td><td align="right" width="30px"><input id="bgBtnImgURL" onclick="radioBgStatic=2;goBgImage();" type="button" value="Set Image" disabled /></td></tr>
<tr>
<td>Position</td>
<td colspan="2">
<select id="slcImgStaticPosition" onchange="goBgImgSelect();" style="width:100%;" disabled>
<option value="1" selected />Strech
<option value="2" />Center
<option value="3" />Tile
</select>
</td></tr>
<tr>
<td>Effect</td>
<td colspan="2">
<select id="slcImgStaticEffect" onchange="setBgImageEffect()" style="width:100%;" disabled>
<option value="1" selected />None
<option value="2" />Move Left
<option value="3" />Move Right
<option value="4" />Move Up
<option value="5" />Move Down
</select>
</td></tr>
<tr>
<td>Speed</td>
<td colspan="2">
<select id="slcImgStaticSpeed" onchange="setBgImageEffect()" style="width:100%;" disabled>
<option value="1" selected />Normal
<option value="2" />Fast
<option value="3" />Slow
</select>
</td></tr>
</table>
</fieldset>
<fieldset>
<legend>Background Color</legend>
<div style="font-size:12px;font-family:Arial;">
<input name="bgRadio" id="bgSolidColor" onclick="enableBgInput();setBgSolidColor();$(&#39;#cbSolidColor&#39;).css(&#39;background-color&#39;,$(&#39;#cbSolidColor&#39;).val());" type="radio" checked />SOLID COLOR
<select id="cbSolidColor" onchange="$('#bgColorHex').val($(this).val());setBgSolidColor();$(this).css('background-color',$(this).val());" disabled>
<option value="#FFFFFF" style="background-color:#FFFFFF;" />#FFFFFF
<option value="#F0E68C" style="background-color:#F0E68C;" />#F0E68C
<option value="#E0FFFF" style="background-color:#E0FFFF;" />#E0FFFF
<option value="#98FB98" style="background-color:#98FB98;" />#98FB98
<option value="#B0E0E6" style="background-color:#B0E0E6;" />#B0E0E6
<option value="#87CEFA" style="background-color:#87CEFA;" />#87CEFA
<option value="#FFDAB9" style="background-color:#FFDAB9;" />#FFDAB9
<option value="#FFC0CB" style="background-color:#FFC0CB;" />#FFC0CB
<option value="#E6E6FA" style="background-color:#E6E6FA;" />#E6E6FA
<option value="#D3D3D3" style="background-color:#D3D3D3;" />#D3D3D3
<option value="#ADC4C5" style="background-color:#ADC4C5;" />#ADC4C5
<option value="#000000" style="background-color:#000000;color:#FFFFFF;" />#000000
</select>
<input id="bgBtnColor" onclick="$(&#39;#colorcode&#39;).toggle(&#39;clip&#39;);" type="button" value="#" disabled />
<input id="bgColorHex" name="hex" onfocus="doClear(this)" size="8" type="text" value="#FFFFFF" disabled />
<input id="bgBtnSetColor" onclick="setBgSolidColor()" type="button" value="Set Color" disabled />
</div>
<div id='colorcode' style='display:none;'>
<embed  width='100%' height='380px' name='obj1' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='High' src='https://sites.google.com/site/monozcore/home/color.swf' type='application/x-shockwave-flash'/>
</embed>
</div>
</fieldset>
<fieldset>
<legend>Dynamic Background</legend>
<table style="font-size:12px;font-family:Arial;">
<tr>
<td width="80px"><input name="bgRadio" id="bgImgTiles" onclick="enableBgInput();setbgImgTiles();" type="radio" />TILES</td>
<td colspan="2">
<select id="idBgTiles" onchange="setbgImgTiles();" style="width:100%;"  disabled>
<option value="1" selected />Black Grill
<option value="2" />Blue Star
<option value="3" />Cloud Tile
<option value="4" />Fire Skull
<option value="5" />Dance Flow
<option value="6" />Lolita Devil
</select>
</td></tr>
<tr>
<td><input name="bgRadio" id="bgImgMatrix" onclick="enableBgInput();setBgImgMatrix();" type="radio" />MATRIX</td>
<td colspan="2">
<select id="idMatrix" onchange="setBgImgMatrix()" style="width:100%;" disabled>
<option value="1" />Matrix Green 1
<option value="2" />Matrix Green 2
<option value="3" />Matrix Green 3
<option value="4" />Matrix Red 1
<option value="5" />Matrix Red 2
<option value="6" />Matrix Blue 1
<option value="7" />Matrix Blue 2
<option value="8" />Matrix 0-1-1
<option value="9" />Matrix Port List
<option value="10" />Matrix LCars
</select>
</td></tr>
<tr>
<td><input name="bgRadio" id="bgImgNature" onclick="enableBgInput();setBgImgNature();" type="radio" />NATURE</td>
<td colspan="2">
<select id="idNature" onchange="setBgImgNature()" style="width:100%;" disabled>
<option value="1" />Blue Sky
<option value="2" />Night Sky
<option value="3" />Lightning 1
<option value="4" />Lightning 2
<option value="5" />Lightning 3
<option value="6" />Lightning 4
</select>
</td></tr>
<tr>
<td><input name="bgRadio" id="bgImgMovie" onclick="enableBgInput()" type="radio" />Youtube ID</td>
<td style="padding-right:5px;"><input id="idBgMP4URL" style="width:100%;" type="text" disabled /></td>
<td align="right" width="30px"><input id="bgBtnMP4" onclick="setBgImgMP4()" type="button" value="Set Movie" disabled /></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Advanced Setting</legend>
<table style="font-size:12px;font-family:Arial;">
<tr>
<td colspan="2"><input id="goOpacity" onclick="checkOpacity()" type="checkbox" />Set Transparant (0.1 - 1) [ <input id="txtOpacity" type="text" value="1" size="2" disabled /> ] <input id="btnOpacity" type="button" onclick="goBtnOpacity()" value="Set" size="2" disabled /></td>
</tr>
<tr>
<td><input id="bgImgDecoration" onclick="enableBgInput()" type="checkbox" />Decoration</td>
<td><select id="idDecoration" onchange="setBgImgDecor()" style="width:200px;" disabled>
<option value="1" />Train Set
<option value="2" />Country
<option value="3" />Halloween
<option value="4" />Fire Starter
</select></td>
</tr>
<tr>
<td><input id="goDragon" onclick="startDragonCode()" type="checkbox" />Creatures</td>
<td><select id="idCreature" onchange="creaturesCHG()" style="width:200px;" disabled>
<option value="1" />Dragon
<option value="2" />Ghost
<option value="3" />Devil
</select></td>
</tr>
<tr>
<td><input id="goAlert" onclick="checkAlert()" type="checkbox" />Text Alert</td>
<td><select id="idAlert" onchange="checkAlert()" style="width:200px;" disabled>
<option value="1" />Normal Alert
<option value="2" />Welcome back commander
<option value="3" />Press OK to start hack the system
</select></td>
</tr>
</table>
</fieldset>
<fieldset style="text-align:center;">
<input onclick="savePageSetting()" type="button" value="Save"/> <input onclick="bgTogglePage()" type="button" value="Close"/> <input id="resetBtn" onclick="delCookie()" type="button" value="Reset"/>
</fieldset>
<div id='btnSet'></div>
</form>
</div>
<!-- End Blog Setting Plus -->

    Gunakan kode berikut ini sebagai tombol untuk mengaktifkan Blog Setting Plus. Kode ini bisa ditempatkan dimana saja sesuai dengan yang sobat inginkan. 

    <a href="#pageSetting" id="setting-btn" onclick="bgTogglePage()" title="Setting"><span class="pulse-text"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/24/monitor-edit-icon.png" style="vertical-align:middle;"></span> Setting</a>

    Apabila penempatan dibuat melayang gunakan tambahkan kode HTML seperti berikut ini.

    <div style="position:fixed !important;top:0px;left:2px;">
<a href="#pageSetting" id="setting-btn" onclick="bgTogglePage()" title="Setting"><span class="pulse-text"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/24/monitor-edit-icon.png" style="vertical-align:middle;"></span> Setting</a>
</div>

    CARA PENGGUNAAN :
    • Kotak Background Static Image merupakan link url untuk gambar latar belakang yang digunakan apabila pengunjung ingin mengganti gambar latar belakang blog yang sesuai dengan yang diinginkan pengunjung, caranya masukan link url gambar pada kotak url. Gambar yang ingin digunakan bebas dengan dimensi berapa saja. Gambar latar akan di strech sesuai dengan ukuran layar monitor pengunjung. Setelah memasukan link url gambar jangan lupa centang kotak Show Background Image untuk bisa menampilkan gambar latar belakang yang dipilih.
      Contoh : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHJ2ceLFmNmKHNhp__v9fDRGbQtA1KDAfdf4iBYZcfYBq32i8RZn2cAhZ1xmx7L06guPPPeA-ydYSEjf6wfWZ9Jmu5EIhxgB2w8Us9pycLDHAj4EvwnJPOc_ee23LZjH5tK3QD20tJl4M/s800/monozcore_planet1.jpg
    • Kotak Background Color merupakan kotak warna latar dengan berbagai pilihan warna. Opsi ini digunakan apabila pengunjung blog hanya ingin mengganti tampilan latar dengan warna latar belakang saja. Cara penggunaan tinggal klik pada beberapa pilihan warna atau gunakan kode hexa warna apabila ingin menampilkan warna spesifik. Klik tombol "?" untuk melihat pilihan warna lainnya.
    • Kotak Centang Show Background Image digunakan untuk menampilkan gambar latar belakang.
    • Kotak Centang Alert Load on Profile digunakan untuk menampilkan pesan setiap membuka halaman blog apakah settingan yang sudah disimpan ingin ditampilkan atau tidak. Jika tidak ingin menampilkan pesan ini hilangkan tanda centang tersebut.
    • Apabila settingan sudah selesai klik tombol save untuk menyimpan hasil setingan.
    • Tombol Reset merupakan tombol yang digunakan untuk menghapus setingan blog yang telah tersimpan.

  • Klik "Save" dan lihat hasilnya...
Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.
Tags:
Monoz

Posted by: Monoz

Post a Comment

0 Comments