Cara Menciptakan Tombol Share Animasi Dengan Css Di Blog
Tombol Share Animasi menjadi desain menarik serta sanggup meningkatkan traffic pada sebuah web atau Blog. Pada tutorial kali ini saya akan mengembangkan tombol share seolah-olah dengan dampak hover benar-benar keren, terdapat empat tombol sosial media dengan link mengembangkan diantaranya facebook, Twitter, Google+ dan Pinterest.
Namun, Anda juga sanggup menganti tombol sosial media tersebut sesuai dengan keingin. Sebagai contoh, Anda sanggup melihat screnshotnya di bawah ini :
Anda tertarik, berikut langkah-langkah dalam penerapannya :
1. Log-in ke akun Blogger
2. Pilih Template
3. Lalu klik Edit HTML
4. Langkah berikutnya, Anda tekan tombol Ctrl+F untuk membuak kotak pencarian di Blogger, kemudian ketikan atau copy kode ]]></b:skin> dan tekan Enter untuk menemukan aba-aba tersebut.
5. Setelah ditemukan, kopy aba-aba di bawah ini :
6. Tahap selanjutnya, Anda menuju aba-aba HTML dalam template. Cari kode <data:post.body/> , sesudah di temukan copy aba-aba di bawah dan pastekan aba-aba tersebut di atas kode <data:post.body/>.
Catatan : Biasanya aba-aba <data:post.body/> pada Template lebih dari satu kode, terapkan saja aba-aba diatas pada aba-aba yang ketiga atau Anda sanggup mencobanya satu per satu.
Namun, Anda juga sanggup menganti tombol sosial media tersebut sesuai dengan keingin. Sebagai contoh, Anda sanggup melihat screnshotnya di bawah ini :
Anda tertarik, berikut langkah-langkah dalam penerapannya :
Tombol Share Animasi Dengan CSS di Blog
1. Log-in ke akun Blogger
2. Pilih Template
3. Lalu klik Edit HTML
4. Langkah berikutnya, Anda tekan tombol Ctrl+F untuk membuak kotak pencarian di Blogger, kemudian ketikan atau copy kode ]]></b:skin> dan tekan Enter untuk menemukan aba-aba tersebut.
5. Setelah ditemukan, kopy aba-aba di bawah ini :
.share_button {width: 300px;height: 50px;margin: 10px auto;}.share_button ul {width: 50%;height: inherit;float: left;list-style: none;margin: 0 !important;padding: 0 !important;}.share_button ul h1 {margin-top: 9%;overflow: hidden;width: 100%;color: #4889F0;font-size: 18px;text-shadow:2px 2px 2px #fff;}.share_button ul li {position: absolute;height: inherit;width: 150px;margin: 0 !important;padding: 0 !important;background: #EEEEEE;-webkit-transition: all 600ms;-moz-transition: all 600ms;-o-transition: all 600ms;-ms-transition: all 600ms;transition: all 600ms;text-align: center;}.share_button ul li h2 {display: inline-block;width: 32%;height: 40px;overflow: hidden;margin-top: 5%;cursor: pointer;border: 0 !important;}.share_button ul:first-child li:first-child{text-align: right;}.share_button ul:last-child li:first-child{text-align: left;}.share_button ul:first-child li:last-child,.share_button:hover ul:first-child li:first-child {-webkit-transform: rotateY(90deg);-moz-transform: rotateY(90deg);-o-transform: rotateY(90deg);-ms-transform: rotateY(90deg);transform: rotateY(90deg);}.share_button ul:last-child li:last-child,.share_button:hover ul:last-child li:first-child {-webkit-transform: rotateY(-90deg);-moz-transform: rotateY(-90deg);-o-transform: rotateY(-90deg);-ms-transform: rotateY(-90deg);transform: rotateY(-90deg);}.share_button:hover ul:first-child li:last-child,.share_button:hover ul:last-child li:last-child {-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-o-transform: rotateY(0deg);-ms-transform: rotateY(0deg);transform: rotateY(0deg);}
6. Tahap selanjutnya, Anda menuju aba-aba HTML dalam template. Cari kode <data:post.body/> , sesudah di temukan copy aba-aba di bawah dan pastekan aba-aba tersebut di atas kode <data:post.body/>.
<div class='share_button'><ul><li><h1>Share t</h1></li><li><h2><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4BHSxxrrKorYqpTxAH2KpObwH-wjJ7krD_tD02UX3MqUZ_nTkVv1Crh6djBSC7DsBE_GrrcHsszKrnNEnjsW1Uhz43sttw6RrN6aJ8pkSuKkTrwg5PBohQaMMwfC0-IwO3mWuFDrmxcA/s1600/Facebook.png"/></a></h2><h2><a expr:href='"http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Gqw28wrVpCa3fAExXVezhj1Gw82I8DiObZ-oQgTnaBKt3aypA7Pia1yXCl2S6_1tnA7e9URb2GiM9t5-S_6Vjjug-3D6VNwharIauI9MRO1vDmBC-c_BEZDDKX9VGBTegCUA-AD7zMok/s1600/Twitter.png"/></a></h2></li></ul><ul><li><h1>his page</h1></li><li><h2><a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrjBzXVvBFUjrcHpjyqq5ikZMwNJDVa_pUqdjW44f0MoYrpwewzwyKz_OTZ7ECq_YcsVpGcB_H_l9FjGvfOs1WAiJrUBZhcH_oy8hSId4R-gwe_FGz5euk9xkmGDOWgV7TESUnqAXuhWN2/s1600/Google-plus.png"/></a></h2><h2><a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKK1aeMMsIxjZnY0uP5UDKV70uRK1NtPb4ZGtQNlSCyhAbMsyNJcSMGbT6-78fcbYIeHChapzrvdX29HGNy2xyAXzmqoG35OhAn_MyzVkKVkxaxApdfXtbIS1tZU01lCXNk7bHSa_B7RSM/s1600/Pinterest.png"/></a></h2></li></ul></div>
Catatan : Biasanya aba-aba <data:post.body/> pada Template lebih dari satu kode, terapkan saja aba-aba diatas pada aba-aba yang ketiga atau Anda sanggup mencobanya satu per satu.
7. Selanjutnya Anda simpan Template.
Demikan tutorial Membuat Tombol Share Animasi Dengan CSS di Blog, sekian dari saya terima kasih sudah berkunjung dan biar bermanfaat.