Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara membuat Flipper Sharing Widget hanya dipostingan blog. Dengan artikel Cara membuat Flipper Sharing Widget hanya dipostingan blog 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 Cara membuat Flipper Sharing Widget hanya dipostingan blog 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 Cara membuat Flipper Sharing Widget hanya dipostingan blog selengkapnya:
Dua tahun lalu kami meluncurkan sebuah widget berbagi sederhana menggunakan set Icon flapper. Kami menggunakan sprite CSS untuk membuat gulungan atas efek yang lebih cepat dan efektif. Sekarang ketika kita telah diajarkan sebagian besar dari Anda bagaimana menerapkan CSS3 transisi, waktu untuk menerapkannya dengan cara yang berbeda. Aku hanya dirancang dua ikon flapper tambahan untuk Pinterest dan Google Plus dan sekarang versi baru ini memiliki beberapa keuntungan atas sebelumnya. Para Ikon memutar dan membalik secara vertikal pada mouse hover. Waktu yang dibutuhkan oleh efeknya sangat kecil sehingga pengguna jarang memperhatikan pergeseran gambar. Kami akan merilis beberapa media lebih sosial ikon dalam beberapa hari mendatang dengan beberapa CSS3 efek tak terlihat untuk membiarkan Anda mengambil kebahagiaan penuh animasi tanpa menggunakan jquery.
Kami menggunakan ikon kami pradesain dan dikemas menjadi satu gambar. Kemudian kita buat kelas terpisah untuk setiap ikon dengan menentukan properti posisi latar belakang untuk menghubungkan kelas sub dengan kelas utama yang berisi gambar kemasan. Untuk efek Flip vertikal kami menggunakan milik kemudahan dalam dan waktunya itu pada o.15 detik.
Set flapper mencakup total 12 icons tapi kami telah dikecualikan Technorati, yahoo dan ikon YouTube untuk membuat penggunaan yang lebih berguna seperti:
- Google Ditambah
- kericau
- Delicious
- Digg
- Stumble upon
- RSS
Cara menggunakannya :
- Buka akun blog Anda
- Masuk ke Menu template >> Procced >> centang Expand Template Widget
- Cari kode : '<data:post.body/>' lalu masukkan kode dibawah ini tepat dibawah kode '<data:post.body/>' yang kedua
<style>
/*--------Flipper Sharing Widget ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYnoLrc6MAGfH2q0leJAKtngfJvVj009aBuSWWmGDgIawB30B4CrHY27Nkbi_CxL5iK6MyctV2WrVWxbAaEUmNZOdL_S28z3Owhq3D_BsgwdRfsss8AHOuvj6UPJ4ICPilSXp6Riv9ygV/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
cursor:pointer;
}
.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}
.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}
.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}
.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>
<div class='flipper'>
<b:if cond='data:blog.pageType == "item"'>
<div class="Pleaseshare">
Please Share it! :) </div>
<!--Google Plus-->
<a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank' title='+1 it :>'/>
<!--Facebook-->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>
<!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>
<!-- Pinterest -->
<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :>'/>
<!-- Delicious -->
<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>
<!--DIGG-->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>
<!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :>'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Bookmark plz :>'/>
</b:if></div>
<div style="clear:both"/>
Lalu simpan...
Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara membuat Flipper Sharing Widget hanya dipostingan blog dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.
0 komentar:
Posting Komentar