Tombol Share Button Responsive Ala Arlina Design

Tombol Share Button Responsive Ala Arlina Design | Selamat malam sahabat Blog Ainur dimanapun berada bertemu lagi ya dengan admin Blog Ainur. Dalam kesempatan yang sehat wal afiat ini admin akan sharing kepada sobat para pengguna Blogger semua. Sebuah Tombol Share Button Responsive Ala Arlina Design sob. Mungkin sebagian besar diantara sobat semua udah pada tau dengan tombol share button yang ini atau bahkan udah pada menggunakan. Wah memang sih tombol share buntton merupakan hal yang lumayan banyak dicari oleh para sebagian pengguna blogger karena disebagian template gratis tombol share buttonnya tidak sesuai dengan selera masing masing.

Tombol Share Button Responsive Ala Arlina Design

Ok langsung saja kita ke langkah langkahnya

• Buka Tema/Template edit HTML

• CSS
  Letakan kode CSS dibawah ini sebelum kode ]]></b:skin> atau </style> template sobat, ini berfungsi sebagai pembentuk dari tombol share tersebut.

  /* CSS Share Button Arlina Design */
  .sharepost li{width:19%;padding:0;list-style:none;}
  .sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
  .sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
  .sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
  .sharepost li .twitter{background-color:#55acee;}
  .sharepost li .facebook{background-color:#3b5998;}
  .sharepost li .gplus{background-color:#dd4b39;}
  .sharepost li .pinterest{background-color:#cc2127;}
  .sharepost li .linkedin{background-color:#0976b4;}
  .sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
  .sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
  .sharepost li{float:left;margin-right:1.2%}
  .sharepost li:last-child{margin-right:0}
  .sharepost li .fa:before{margin-right:5px}

• Font Awesome
  Letakan kode dibawah ini sebelum </head> template blog sobat.

  <link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

• HTML
  Letakan kode dibawah setelah <data:post.body/> nomor 2 di dalam template sobat, kalau tidak muncul, silahkan cobakan saja pada kode <data:post.body/> yang lainnya satu per satu karna kode <data:post.body/> ini biasanya lebih dari satu.

  <div class='clear'/><div class='sharepost'>
  <ul>
  <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
  <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
  <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
  <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank' title='LinkedIn Share'><i class='fa fa-linkedin'/>Share</a></li>
  <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' title='Pin It'><i class='fa fa-pinterest'/>Share</a></li>
  </ul></div>

• Save

Itulah ulasan singkat mengenai Tombol Share Button Responsive Ala Arlina Design, semoga bisa menambah wawasan bagi kita dan dapat bermanfaat serta menambah sedikit pengetahuan bagi kita semua. Jika masih ada yang belum dipahami silahkan tanyakan dikolom komentar dan jika ada kesalahan mohon diingatkan karena setiap manusia tidak akan lepas dari yang namanya salah. Silakahkan share di media sosial jika bermanfaat dan dapat membantu kita semua. untuk mendapatkan berbagai tamplate blogger responsive bisa kumjungi alamat ini ya. Kunjungi

Berbagi :