Di artikel ini saya akan memberikan tutorial tentang cara membuat sexy social bookmark yang berbeda dari yang dulu, untuk contohnya anda bisa lihat di bawah artikel ini atau gambar di bawah ini.
Cara pembuatannya adalah sebagai berikut ingat backup dulu template anda sebelum menjalankan tutorial ini :
1. Masuk ke dashboard blogger anda2. Klik design > edit html > centang expand widget template
3. Masukkan scrypt di bawah ini di atas atau di bawah kode : ]]>
div.sociable { margin: 16px 0;}
span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
border: 0;
margin: 0;
padding: 0;
}
.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
4. Kemudian letakkan scrypt di bawah ini di atas kode : span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
border: 0;
margin: 0;
padding: 0;
}
.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
Selamat mencoba dan semoga berhasil
Ayo dukung terus kontes SEO Terbaru yang bertema "javahostindo web hosting indonesia" dengan mengikuti link berikut ini |javahostindo web hosting indonesia |
Next Article
« Prev Post
« Prev Post
Previous Article
Next Post »
Next Post »
Penulisan markup di komentar
- Untuk menulis huruf bold gunakan
<strong></strong>atau<b></b>. - Untuk menulis huruf italic gunakan
<em></em>atau<i></i>. - Untuk menulis huruf underline gunakan
<u></u>. - Untuk menulis huruf strikethrought gunakan
<strike></strike>. - Untuk menulis kode HTML gunakan
<code></code>atau<pre></pre>atau<pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.
Tambahkan komentar Anda
3 comments
Akan saya coba, terima kasih trik nya mas...
Oh ya, ttg sayembara menulis di blog itu ternyata salah tik. Seharusnya paling lambat itu tgl 1 September 2011. Karena tenggat masih lama, jadi silakan berpartispiasi mas...Trik blog juga pasti mantab tuh, heuheu.
Izin follow y :)
