Blogspot yang membahas tentang Tutorial Blogger, Animasi Blogger, Google Adsense, Game Blogger, Seo Blogger, Template Blogger, TV Online, Dan Tools Blogger

Saturday 15 February 2014

Style Switcher Blog

Style Switcher Blog - Blogger Update. Assalamualaikum wr.wb. Malam ini saya akan menuliskan salah satu Tutorial Blog yang saya dapat dari DTE adalah Style Switcher Blog. Widget ini berguna untuk Merubah Tipe Font, Warna Font, Ukurang Font dan Mengganti Background Blog kita sesuai keinginan pengunjung. Mungkin dengan widget ini pengunjung betah berlama-lama di blog kita. Lihat screenshoot dari Widget Style Switcher Blog :

Widget Style Switcher Blog
Langkah-Langkah Membuat Style Switcher Blog
1. Buka Blog Anda >> Edit Tempalate.
2. Cari kode </body>, lalu masukan kode dibawah ini diatas kode </body>.
<script src='http://dte-project.googlecode.com/svn/trunk/cookie.js'/><script>/** * Style Switcher with JavaScript Cookie by Taufik Nurrohman * URL: https://plus.google.com/108949996304093815163/posts */
//<![CDATA[// =========================================================================// == Your personal function// =========================================================================var expiredStyle = 7000,    dbs = document.body.style;
// background switcherfunction bgSwitch(v) {    dbs.background = v;    createCookie('bgstyle', v, expiredStyle);}
// font switcherfunction fontSwitch(v) {    dbs.fontFamily = v;    createCookie('fontstyle', v, expiredStyle);}
// font sizerfunction changeFontSize(v) {    dbs.fontSize = v + 'px';    createCookie('fontsize', v, expiredStyle);}
// color switcherfunction fontColor(v) {    dbs.color = v;    createCookie('fontcolor', v, expiredStyle);}
// =========================================================================// == If cookies successfully created and successfully read... do something!// =========================================================================if (readCookie('bgstyle')) {    dbs.background = readCookie('bgstyle');}if (readCookie('fontstyle')) {    dbs.fontFamily = readCookie('fontstyle');}if (readCookie('fontsize')) {    dbs.fontSize = readCookie('fontsize') + 'px';    document.getElementById('fontSizer').value = readCookie('fontsize');}if (readCookie('fontcolor')) {    dbs.color = readCookie('fontcolor');    document.getElementById('fontColorer').value = readCookie('fontcolor');}
// =========================================================================// == Reset button// =========================================================================function resetStyle() {    eraseCookie('bgstyle');    eraseCookie('fontstyle');    eraseCookie('fontsize');    eraseCookie('fontcolor');    window.location.reload(1);}//]]></script>
3. Simpan template.
4. Pilih tata letak >> tambahkan gadget >> HTML/javascript.
5. Masukan script dibawah ini ke dalam gadget HTML/javascript.
<style>#styleSwitcher {  border:none;  margin:0 0;  padding:0 0;  width:98%;  text-align:left;  font:normal 11px Tahoma,Arial,Sans-Serif;  border-collapse:collapse;}
#styleSwitcher th,#styleSwitcher td {  vertical-align:middle;  border:none !important;  padding:2px 10px;}
#styleSwitcher th.title {  background-color:#ccc;  padding:5px 10px;  margin:0 0 10px;  text-transform:uppercase;  font-size:12px;  font-family:Arial,Sans-Serif;}
#styleSwitcher select,#styleSwitcher input[type="text"] {  width:130px;  border:2px solid #bbb;  background-color:#333;  padding:2px;  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;  color:#999;  display:block;  margin:0 0 0;  height:24px;}
#styleSwitcher select option {  color:white;  padding:5px 10px;  cursor:pointer;}
#styleSwitcher button {  font:normal 11px Tahoma,Arial,Sans-Serif;  padding:3px 5px;  cursor:pointer;}
#styleSwitcher #bgColorer {  overflow:hidden;  margin:10px 0 10px;}
#styleSwitcher #bgColorer span {  display:block;  float:left;  width:20px;  height:20px;  border:1px solid black;  margin:0 5px 0 0;  cursor:pointer;}
#styleSwitcher input[type="text"] {  width:118px !important;  padding:4px !important;  height:auto !important;}</style><table border="0" id="styleSwitcher">    <tr><th class="title" colspan="2">Ganti Tampilan Sesuka Hati</th></tr>    <tr>        <td colspan="2">            <div id="bgColorer">                <span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span>                <span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span>                <span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span>                <span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span>                <span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span>                <span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span>                <span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span>            </div>        </td>    </tr>    <tr><th>Tipe Font</th>        <td>            <select onchange="fontSwitch(this.value);">                <option selected />--                <option value="&#39;Book Antiqua&#39;,Serif" />Book Antiqua                <option value="&#39;Times New Roman&#39;,Serif" />Times New Roman                <option value="Georgia,Serif" />Georgia                <option value="Arial,Sans-Serif" />Arial                <option value="Tahoma,Verdana,Arial,Sans-Serif" />Tahoma                <option value="&#39;Trebuchet MS&#39;,Arial,Sans-Serif" />Trebuchet                <option value="Verdana,Arial,Sans-Serif" />Verdana                <option value="&#39;Century Gothic&#39;,Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic                <option value="&#39;Comic Sans MS&#39;,Serif" />Comic Sans            </select>        </td>    </tr>    <tr><th>Warna Font</th>        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>    </tr>    <tr><th>Ukuran Huruf</th>        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>    </tr>    <tr><th>Reset?</th>        <td><button onclick="resetStyle();">Reset Semua Tampilan</button></td>    </tr>
</table>

6. Simpan dan selesai.

Jika ada pertanyaan silahkan ditanya dikotak komentar saya akan menjawab pertanyaan sobat blogger sebisa saya. Sekian dari saya Mochammad Fikri yang menuliskan artikel tentang Style Switcher BlogSimak juga artikel saya yang lainnya :Daftar Isi Dengan Scroll, Cara Membuat Artikel Terkait Dengan ThumbnailCara Membuat Label Tertentu Dengan Thumbnail,  Cara Membuat Emoticon Di Komentar Blogger, dan Cara Membuat Artikel Yang Berkualitas SEO FriendlyTerima kasih sudah berkunjung.

Dilarang untuk meng-copas artikel ini kecuali menuliskan sumbernya
DMCA.com

Style Switcher Blog Rating: 4.5 Diposkan Oleh: Fikri

2 komentar:

 
notifikasi
close