Kamis, 20 Desember 2012

Hover Thumbnail Mention Google+ for Blogger

Developer sepi mau apa yang diposting =)) Issue teranyar dari blogger buzz is mention people in your posts with google+ Artinya menyebutkan seseorang di dalam area postingan memakai account google+ Ketika link disorot akan terbelalak seonggoh kotak profile orang yang dimaksud. Fitur ini akan berjalan bila sobat melakukan postingan dalam mode Compose
(lihat screenshot di bawah)
Derita bagi kita yg terbiasa melakukan post dalam mode HTML :-s Contoh sorot link berikut +Beben Koben ;)) Mungkin google tidak mau kalah dengan fitur satu ini anywhere aplikasi from twitter developer for blogger Ex: @bebenkoben :PMentions-in-Blogger
Mention people in your posts with Google+
New! Now you can call out a Google+ profile or page from your blog to help them notice your post. Just add a "+" or "@" in front of the person or page's name. Learn more
Demikian berita terhangat dari om buzz.
Bonus...premium-stuff-guru.blogspot.com/2012/11/add-css3-awesome-minimalistic-animated.html

.menyu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.menyu>li {
display: block;
}
.menyu>li>div {
position: fixed;
bottom: 5px;
left: 5px;
width: 120px;
height: 160px;
overflow: hidden;
cursor: pointer;
text-align: center;
background: transparent;
box-shadow: 0px 1px 2px #555;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
}
.menyu div:hover {
background: #fff;
z-index: 5;
}
.menyu>li>div>a {
top: 0px;
position: relative;
display: block;
height: 100px;
padding-top: 60px;
font-family: 'Terminal Dosis', sans-serif;
text-decoration: none;
font-size: 25px;
color: #333;
-webkit-transition: all .3s;
-ms-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
}
.nested:hover a {
top: -90px;
}
.menyu ul {
position: absolute;
top: -9999px;
margin: 0 auto;
display: block;
width: 120px;
text-align: center;
-webkit-transition: .5s opacity ease-out;
-ms-transition: .5s opacity ease-out;
-moz-transition: .5s opacity ease-out;
-o-transition: .5s opacity ease-out;
}
.menyu li div:hover ul {
top: 10px;
color: #fff;
opacity: 1;
}
.menyu div:hover ul li a {
color: #111;
font-size: 13px;
text-decoration: none;
}
<ul class="menyu">
<li>
<div class="nested">
<a href="#">Menu</a>
<ul>
<li><a href="#">Title1</a></li>
<li><a href="#">Title2</a></li>
<li><a href="#">Title3</a></li>
...
</ul>
</div>
</li>
</ul>
Happy blogging \m/

Tidak ada komentar:

Posting Komentar