Cara Menciptakan Flat Social Share Buttons Di Blogger

Baca Juga

Menge-share artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas dan terkenalnya sebuah blog/situs. Tujuan membuatkan ke sosial media yaitu untuk meningkatkan pengunjung jikalau pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk membuatkan postingan ke sosial media yaitu dengan cara memasang tombol share buttons di blog Anda. Mungkin tombol share ini sudah tidak abnormal lagi dikalangan web atau situs. Karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya yaitu biar pengunjung sanggup membagikan sebuah postingan anda di Sosial Media.

Pada kesempatan kali ini, aku akan membagikan Flat Social Share Buttons. Dengan tombol share buttons, pengunjung sanggup dengan gampang membuatkan artikel ke sosial milik ia dengan hanya satu klik saja.

Baca Juga :

• Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger <Update>
• Cara memasang Tombol Share di Blogger, Responsive!
• Cara Membuat Tombol Share Sosial Button Seperti EvoMagz
• Cara Membuat Tombol Share Sosial Media Buttons Melayang di Kiri Blog

Screenshoot : 

Cara Membuat Flat Social Share Buttons di Blogger 

Cara Pertama :

1. Buka Blogger - Kemudian Login.

2. Dashboard - Kemudian Template.

3. Edit HTML.

Proses Pembuatan : 

1. Temukan <CTRL+F> kode ]]></b:skin> atau </style>

2. Copy & Paste arahan berikut ini, dan letakkan diatas arahan ]]></b:skin> atau </style>

/* CSS Share Button */ .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}

3. Jika sudah dipasang? Temukan lagi kode <data:post.body/>
4. Copy & Paste arahan berikut ini, dan letakkan dibawah kode <data:post.body/>
Catatan :

" Bisanya arahan ini lebih dari satu, silakan anda pilih yang kedua. Atau anda sanggup mencobanya satu/satu."

<b:if cond='data:blog.pageType == &quot;item&quot;'>         <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'><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'><i class='fa fa-pinterest'/>Share</a></li>                  </ul>          </div> </b:if>

5. Supaya Responsive? Sekarang kita pasang script Bootstrapcdn atau Font Awesome. Karena Icon pada tombol share ini, memakai font awesome icons "Contoh : fa fa-facebook"
6. Selanjutnya Temukan arahan </head>
7. Copy & Paste arahan berikut ini, dan letakkan diatas arahan </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

8. Terakhir, Simpan Template.

Sekian Tutorial Blogger kali ini, bila ada kesalahan? Silakan jangan sungkan untuk berkomentar. Terakhir silakan anda lihat postingan blog anda. Sekian dari saya Semoga Bermanfaat! Thank's For Reading & Sharing and Visited; Cara Membuat Flat Social Share Buttons di Blogger