Kali ini Blog Gado Gado akan menampilkan artikel berjudul Profile Sosial Animasi untuk Blogger. Dengan artikel Profile Sosial Animasi untuk Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Profile Sosial Animasi untuk Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Profile Sosial Animasi untuk Blogger selengkapnya:
D-Copy Blog's | Setelah pertumbuhan yang cepat dan pembangunan di situs jaringan sosial, banyak masyarakat menunjukkan minat mereka dalam mensosialisasikan situs web mereka dengan favorit mereka jejaring sosial yaitu website Facebook, Google Plus, Twitter dan lain-lain Kemajuan cepat di Media Sosial telah membuat semua orang berpikir tentang nya signifikansi. Ini adalah alasan mengapa setiap sekarang dan kemudian kita dapat melihat Widgets menakjubkan yang berhubungan Media Sosial. Tooltips adalah tambahan terbaru dalam Widgets jejaring sosial. Setiap kali, pengunjung Anda akan menempatkan pointer mereka pada ikon sosial sebuah kotak kecil akan muncul dengan informasi tentang item tertentu yang sedang melayang . Hari ini kita akan mengintegrasikan Tooltip Widget Sharing Sosial di Blogger.Langkah :
- Masuk ke Akun Blogger Anda
- Masuk ke Menu Template > Edhit HTML > Proceed > centang Expand Template Widget
- Cari kode dibawah ini :
]]></b:skin>4. Pastekan kode dibawah ini, diatas pada kode diatas :/*---d-copy.blogspot.com Animated Social Sharing Tooltips Widget ---*/5. Save Template Anda.
.mbl-wrapper{
padding: 0;
width: 535px;
height: 70px;
margin: 80px auto 30px auto;
}
.mbl-wrapper ul{
float: left;
}
.mbl-wrapper ul a{
display: block;
width: 68px;
height: 70px;
margin: -10 -24 px;
outline: none;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigTX50rLYtswTj1-CrTV0QjVkSHUjNP6qHCU1F1Rvuv4tJ9cvAJ7YzFHpJcevcIwN-u6lByXPDS0Cvoa36u3rfcxhQNeBwhLX10m9rXw9PH9feN6jptTKVzmf1pVWKN_XBFwhZ1SQDdr7M/s1600/1.png) no-repeat top left;
text-indent: -9000px;
position: relative;
}
.mbl-wrapper ul .mbl-gplus{
background-position: 0px 0px;
}
.mbl-wrapper ul .mbl-twitter{
background-position: -68px 0px;
}
.mbl-wrapper ul .mbl-pinterest{
background-position: -136px 0px;
}
.mbl-wrapper ul .mbl-facebook{
background-position: -204px 0px;
}
.mbl-wrapper ul .mbl-linkedin{
background-position: -272px 0px;
}
.mbl-wrapper ul .mbl-rss{
background-position: -340px 0px;
}
.mbl-wrapper ul a span{
width: 100px;
height: auto;
line-height: 20px;
padding: 10px;
left: 50%;
margin-left: -64px;
font-family: Shanti, Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 14px;
color: #2f6986;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #2f6986;
background: rgba(255,255,255,0.3);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mbl-wrapper ul a span:before,
.mbl-wrapper ul a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
.mbl-wrapper ul a span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #2f6986;
}
.mbl-wrapper ul a:hover span{
opacity: 0.9;
bottom: 70px;
}
6. Masuk ke Menu Layout > Add gadget > pilih HTML/JavaScript
7. Pastekan kode dibawah ini dan save :<div class="mbl-wrapper">
<ul><a class="mbl-gplus " href="URL Google Plus Anda"><span>Google Plus</span></a></ul>
<ul><a class="mbl-twitter" href="http://twitthis.com/twit?url=http://www.mybloggerlab.com"><span>Twitter</span></a></ul>
<ul><a class="mbl-pinterest" href="http://pinterest.com/ID Pinterest Anda/"><span>Pinterest</span></a></ul>
<ul><a class="mbl-facebook" href="http://www.facebook.com/sharer.php?u=http://www.mybloggerlab.com"><span>Facebook</span></a></ul>
<ul><a class="mbl-linkedin" href="Linkedin-URL Anda"><span>LinkedIn</span></a></ul>
<ul><a class="mbl-rss" href="http://feeds.feedburner.com/ID URL FeedBurner Anda"><span>Feeds</span></a></ul>
</div>
Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Profile Sosial Animasi untuk Blogger dengan keword yang masuk Blogger Widget . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.
0 komentar:
Posting Komentar