Meminimalkan Size HTML Template Dengan Cara Sederhana

Meminimalkan Size HTML Template Dengan Cara Sederhana - Kali ini SMZ:] akan memberikan sedikit tips sederhana untuk Meminimalkan size template blog. Seringkali kita menemukan blog yang menggunakan kode-kode HTML dalam tutorialnya. Namun yang jadi masalah, kode-kode tersebut menambah size HTML blog dan membuat loading blog menjadi lebih lambat. Nah kita akan menggunakan fitur bawaan blogger untuk lebih memudahkan tutorial kali ini.

Menambah Widget
Tentunya saat kita ingin menambahkan widget ke blog, kita harus masuk dulu ke Bagian "Template" Lalu "Edit HTML" cari kode </style> lalu tambahkan CSS Widget tersebut kedalamnya. Lalu masuk "Tata Letak" dan menambahkan widget tersebut kesana. Namun itu adalah cara lama. Itu akan menambah size template anda. Saya akan berikan cara yang lebih efisien.

Jika anda ingin menambahkan widget pihak ke 3 ( Widget buatan ) ke blog anda. Langsung saja masuk ke Tata Letak Add Gadget HTML/Javascript dan masukkan kodenya.

Saya beri contoh kode langsungan.

<style type='text/css'>
.banners-pl {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 14px 2px -10px #CCCCCC;
    margin-bottom: 30px;
    padding: 8px;
    position: relative;
    width: 652px;
    z-index: 15;
}
.corte-img {
    cursor: pointer;
    height: 167px;
    overflow: hidden;
    position: relative;
}
.corte-img > img {
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    position: absolute;
    z-index: 50;
    opacity: 1;
    left: 0;
}
.banners-pl:hover .corte-img > img {
    opacity: 0;
    margin-top: -167px;
}
.conten-pl-home {
    position: absolute;
    top: 0;
    z-index: 10;
}
.conten-pl-home a {
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 2px 0 #333333 inset;
    display: block;
    float: left;
    margin: 13px;
    padding: 6px;
    position: relative;
    text-decoration: none;
    width: 125px;
    height: 125px;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.conten-pl-home a:hover {
    background: #07aaee;
}
.banners-pl .conten-pl-home a strong {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-weight: normal;
    right: -20px;
    padding: 3px 6px;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
    top: 0;
    z-index: 9999;
}
.banners-pl .conten-pl-home a strong {
    opacity:0;
    -webkit-transition-property: opacity, top;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: opacity, top;
    -moz-transition-duration: 500ms;
    -o-transition-property: opacity, top;
    -o-transition-duration: 500ms;
    transition-property: opacity, top;
    transition-duration: 500ms;
}
.conten-pl-home  a:hover strong {
    opacity:1;
    top: 120px;
}
</style>
<div class="banners-pl">
<div style="position:relative">
<div class="corte-img">
<img src="http://i784.photobucket.com/albums/yy130/nakula1212/Spaceiklan_zps1574b011.png" />
</div>
<div class="conten-pl-home">
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBvPMdzw3bPfR5eQpuMqxEXcq6S-wtlBXntfp9DbGWA8l9IBT0u0IyuugZjadI9BOixN-w8mUFjTgF3-CzTIvXy1IjCUVLJcDDaSZZMQTM5YKyOKwGnk3Q4T_BtXQF_P1dwXHGonErdkky/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBvPMdzw3bPfR5eQpuMqxEXcq6S-wtlBXntfp9DbGWA8l9IBT0u0IyuugZjadI9BOixN-w8mUFjTgF3-CzTIvXy1IjCUVLJcDDaSZZMQTM5YKyOKwGnk3Q4T_BtXQF_P1dwXHGonErdkky/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBvPMdzw3bPfR5eQpuMqxEXcq6S-wtlBXntfp9DbGWA8l9IBT0u0IyuugZjadI9BOixN-w8mUFjTgF3-CzTIvXy1IjCUVLJcDDaSZZMQTM5YKyOKwGnk3Q4T_BtXQF_P1dwXHGonErdkky/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBvPMdzw3bPfR5eQpuMqxEXcq6S-wtlBXntfp9DbGWA8l9IBT0u0IyuugZjadI9BOixN-w8mUFjTgF3-CzTIvXy1IjCUVLJcDDaSZZMQTM5YKyOKwGnk3Q4T_BtXQF_P1dwXHGonErdkky/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
</div>
</div></div>

Dan akan menjadi seperti ini

Keterangan IklanKeterangan IklanKeterangan IklanKeterangan Iklan

Tidak perlu lagi masuk ke Edit HTML untuk memasukkan kode CSS, anda bisa langsung menambahkannya disana dengan catatan! Setiap kode css selalu diawali <style type='text/css'> dan penutup </style> .
Dengan begitu template anda tidak terpenuh dengan terlalu banyak kode :] Hal ini berlalu juga didalam postingan. Sekian Semoga berguna

Tweet