Membuat Widget Follow Twiter Dengan Material design

Beragam gaya berkat CSS Desain saya memodifikasi widget di Blogger, dalam postingan baru ini saya akan memberi cara menyisipkan kartu widget termasuk tombol Twitter follow, dengan desain yang unik denagn Material design.

Widget Follow Twitter ini dapat dipasang di Blogger, WordPress, Joomla, dan platform web apa pun yang kamu gunakan.

Tentu saja widget ini sangat responsie, karena kode yang akan diterapkan sepenuhnya responsif, dapat dilihat dengan benar dari komputer desktop, maupun dari smartphone apa pun.

Jika tertarik ingin menambahkan widget ini, silahkan simak caranya dibawah ini.

Membuat Widget Follow Twiter Dengan Material design

1. Masuk ke Blogger
2. Pilih Tata letak dan tambahkan widget baru
3. Pilih HTML/Javascript
4. Copy dan letakkan kode dibawah ini didalamnya

<div class="col-md-12">
 <div class="card card-stats">
 <div class="card-header" data-background-color="blue">
 <i class="fa fa-twitter"></i>
 </div>
 <div class="card-content">
 <p class="category">Followers</p>
 <h3 class="title"> <a class="twitter-follow-button" href="https://twitter.com/mahesaidn" data-show-count="true" data-lang="id">Follow @mahesaidn</a><br />
 <script type="text/javascript">// <![CDATA[
 !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
 // ]]&gt;</script></h3>
 </div>
 <div class="card-footer">
 <div class="stats">
 ➤ designed by mahesa.id
 </div>
 </div>
 </div>
 </div>
 <style>
 .card {
 display: inline-block;
 position: relative;
 width: 100%;
 margin: 25px 0;
 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
 border-radius: 3px;
 color: rgba(0,0,0, 0.87);
 background: #fff;
 }
 .card-stats .card-header {
 float: left;
 text-align: center;
 }
 .card [data-background-color] {
 color: #FFFFFF;
 }
 .card [data-background-color="blue"] {
 background: linear-gradient(60deg, #26c6da, #00acc1);
 box-shadow: 0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2);
 }
 .card .card-header {
 box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
 margin: -20px 15px 0;
 border-radius: 50px;
 padding: 8px;
 background-color: #999999;
 }
 .card-stats .card-header i {
 font-size: 36px;
 line-height: 56px;
 width: 56px;
 height: 56px;
 }
 .card-stats .card-content {
 text-align: right;
 padding-top: 10px;
 }
 .card .card-content {
 padding: 15px 20px;
 }
 .card .card-footer {
 margin: 0 20px 10px;
 padding-top: 10px;
 border-top: 1px solid #eeeeee;
 }
 .card .card-content .category {
 margin-bottom: 0;
 }
 .card .category:not([class*="text-"]) {
 color: #999999;
 }
 p {
 margin: 0 0 10px;
 }
 .card-stats .title {
 margin: 0;
 }
 .card .card-footer .stats {
 line-height: 22px;
 color: #999999;
 font-size: 12px;
 }
 .card .card-footer div {
 display: inline-block;
 }
 .card .card-footer .stats .material-icons {
 position: relative;
 top: 4px;
 font-size: 16px;
 }
 .col-md-12 {
 width: 100%;
 padding: 4px 0px 0px 0px;
 }
 h3 {
 font-size: 24px;
 }
 .card-header:hover {
 box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.3);
 }
 </style>
 <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/> 

5. Ganti Twitter id yang di tandai dengan warna kuning dengan id Twitter kamu.
* Jika di template kamu sudah menggunakan Font awesome maka fotn awesom yang berada di paling bawah dari kode di atas jangan di ikutsertakan

simpan dan lihat hasilnya