Senin, 17 Oktober 2011

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 trick hover Beben bagi buat blogger sekalian! Mirip dengan postingan berikut OnmouseOver Trick, lagi-lagi master @v_ku menciptakan Make Float Follower Blogger, Twitter and Facebook.
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 GadgetHTML/JavaScript sobat tinggal kasih tagging seperti berikut<style type="text/css">

CODED CSS HERE

</style>
So...
Final Coded method Add a GadgetHTML/JavaScript
<style type="text/css">
.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}

.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}

.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}
</style>

<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>
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:Happy blogging \m/
CONTENT HERE
CONTENT HERE
CONTENT HERE

Tidak ada komentar:

Posting Komentar