Trik Komputer: Loseasi Blog Full with Stylish Trick

Semakin susah membuat trick blog, trik yang sudah ada dikreasikan kembali agar mendapatkan tutorial yang fresh. Tidak terbilang sudah Beben bagi buat blogger sekalian! Mirip dengan postingan berikut , lagi-lagi master @v_ku menciptakan .
Yes my friend that's right, tiga buah float sekaligus tercipta en ketika disorot akan terbuka apa yg ada didalamnya itu loh :D Silahkan ikuti langkah² dari sana membuat followernya yah :P Beben Koben si bloglang anu ganteng kalem tea cuman mau berbagi kode CSS floatnyah sajah :">

CSS Float Coded

/* Blogger */

.barrightblogger {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUApxRulbe9sPx7U-IMf3Fr1hrwlxtwJJ8rnu5FFU_DwzM53POuH88AEKq-AFJlFPsSrzRa72FLv-o4QDRjOC8CRV9kpdusfRc-QpSe3NokKi4C5I37HtiH7C412-L0fjA0Iemo4LFckwN/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 50px;
z-index: 1000;
}

.barrightbloggerc {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj68RaSLiKYrCM2Uk8VTZD49uFJgtERUp13-4-rxoNieH2DKnpLSt7uXsTC89VIlUmxoP-CkI1JftvVuGtDQbT3EyJsxC1pYh5wuGbSkAS8FeW5P4ArGLNEFGZg3FyrGqoSkMKnHrbUVA2y/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 50px;
z-index: 1100;
}

.barconteblogger {
margin: 5px 0 0 47px
}

/* Twitter */

.barrighttwitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhenjlryOFyeSPlkNexnwzdzIAmxrnh_SX0BbOD3BZWhpnygJXaUD2_w1DTjG_VT9Jz7OYsOImAyRvl_1Dl3D727yS2-fMJgbfkg-38OWKY-AP0knhR4j_DbQaMlsas2yAopdS1AD2VZTgt/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 210px;
z-index: 1000;
}

.barrighttwitterc {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Y6C-zPezt0bJpiL-WYDusaF5QIkd1FRX1wVh01g8IkMBHWLqHTQApPsXKKjINPsO3Jgj2PWDYc8L_lvG3xmpM19klnUWh66Ih4utxSF5lK-1zEQyfPrBWrAuC6P0x5rX6JclfUwNGw8q/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 120px;
z-index: 1100;
}

.barcontetwitter {
margin: 5px 0 0 47px
}

/* Facebook */

.barrightfacebook {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUSwqWo1UKzIjAvR5neiQxP9Cv5K8xcC-8Kd5a4C1lUAJTZlbWWxlcpfLySnX7D-uJAGulsCAj4Gu5kgvStJBsz8VctHMWEnGxbix9zUskREy5wsAnCiPpqnhq8IIMrQhyphenhyphen4FVrqqURT3Gx/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 370px;
z-index: 1000;
}

.barrightfacebookc {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8e0SANzue6yJI9WH1R6McG0yzevEe2oKAQvuvpZyZE8FypqbBcwHkcL777fMZy5oeSFOvnef96tMEiCTfgGlBhJGBec9599maA9XDN5D4oGG_aCCerEUMLNi42tScizoGtvU2VDc4cf-m/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 185px;
z-index: 1100;
}

.barcontefacebook {
margin: 5px 0 0 47px
}

Letakkan diatas kode ]]></b:skin>

Coded HTML Float

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">

CONTENT BLOGGER HERE

</div>
</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">

CONTENT TWITTER HERE

</div>
</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">

CONTENT FACEBOOK HERE

</div>
</div>

Didalam tag <body> Kalau mau metode Add a Gadget ► HTML/JavaScript sobat tinggal kasih tagging seperti berikut

<style type="text/css">

CODED CSS HERE

</style>

So...

Final Coded method Add a Gadget ► HTML/JavaScript

Menilik dan meneliti ternyata blog loseasi mempunyai keunikan² yg tersembunyi. Sangkin banyaknya jadi betah menelitinya ;;) Koben lihat terdapat satu trik lagi yg cip merkicip. Scroll down in demo, tengok menu bagian atas, sorotlah:

demo

Kode CSS

#header-right {
width: 100%;
padding: 8px 0 9px 0px;
vertical-align :middle;
font-size: 12px;
color: #fff;
background: #333;
height: 16px;
position: relative;
}
#header-right img {
height: 18px;
vertical-align: middle;
}
#header_vku {
position: absolute;
width: 99.3%;
top: 0;
left: 5px;
z-index: 1000;
}
#header_vku:hover {
position: fixed;
top: 0px;
}
.header_vku-bar {
background-color: #222;
height: 5px;
position: fixed;
width: 99.3%;
z-index: 0;
top:0;
}

Kode HTML

<div id="header_vku">
<div class="header_vku-bar"></div>
<div id="header-right">

<div style="position:absolute;right:0;padding-right:15px">YOUR-NAME</div>
<div style="position:absolute;padding-left:14px;">Konek with me:
<a href="https://plus.google.com/XXXXXXXXXXXXXXXXXX/posts" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXQ66w2Vr4I5GPpO0HuswIWAxyAlM3oNpjiM94qEI4HRjIBjQlUknrWiHyj7M5PV2mOd0iyRKzM_NCyy_MEn33BQ6-OWgwfPYZkN3Yjr6td9ttb3yGEIpMV14b-mMJQ394FpipIKpfr2iQ/"/></a>
<a href="http://www.facebook.com/ACCOUNT-FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp1o89QB2037Bs5dEJmdDF4YikyaAjWowkmy0bJ8Cl2WPxVq9sKXB6-caQexIMD2vk5wB8lh5llFa_oWGs0HUGF4mE0peGrtjVXkvsZVVARCt-ZVWqIlB6YKdeZXlBbtNXZ_59Ep5fIzvb/"/></a>
<a href="http://www.twitter.com/ACCOUNT-TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXmNuimTpRLiKd3mVCmeqs0ZMRF3lvaw9nTmKhdzCXpaB-j_0GsaUspBUKhl7dVJMw1sMOsOmoFAAMjABoTzOgFguHAQyEfP0483hogs6AN55AF3o_zNO0lgFETPRNtcqeF-Ix4dm1jU0/"/></a>
<a href="http://www.youtube.com/user/ACCOUNT-YOUTUBE" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYM933Ot5fbP0E1opnyDz6fxrKanuV1iwR8y5tFDB_K0He5a8u_pVQNX_NOQ2dKdQ5XF5ZRao_UkgPMXQJyj-6oBG_YhUF9AkOKDQjMS2gBX3bJrLezcQme_qSWUGVHum4iA5BUCE_efDR/"/></a>
<a href="http://uy.linkedin.com/in/ACCOUNT-LINKEDIN" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_c5i2Sh3jcA8uCMYWy071bVH1TZOd3Klz_Jzmc5Zua8uBb5THDAioh-py6V1aTGP7sMcPjIeLc2DCH61AUZyTr0OIfg-XZkI2tbjqrHzmx3vUZd8JM1WSiMOev8odS3zrSNxVnuTw1DQ/"/></a>
<a href="http://YOUR-LINK-KONTAK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiInL_TWXTucmO7qrLGQJ09_OJ4lThQZlFaD1EG5qKGNsLESY4N0h7P5GUoov0RrHP0Gx8yUrvpMbaMVxmYnKzVRqIhyBmVWv9XTvPnMENeVl3iWGi9k54-yA71s6X98vAPK-4ujutLEx0/"/></a>

</div></div></div>

Isikan tulisan berwarna biru sesuai dengan kebutuhan :)
Contoh tut's dari sana yg pernah koben share juga:

VkuMenuBar Minimize Expande.
Fixed Menu from Bloggers de Buffalo State.
Rotation Script.

Happy blogging \m/

CONTENT HERE

Trik Komputer

Senin, 17 Oktober 2011

Loseasi Blog Full with Stylish Trick

CSS Float Coded

Coded HTML Float

Kode CSS

Tidak ada komentar:

Posting Komentar