Cara Membuat Sosial Media Share Buttons for Blogger

Sebelumnya saya pernah posting cara membuat berbagai "Tombol Sosial Media Share" Tujuan nya sama yaitu untuk meningkatkan pengunjung. Dengan tombol share buttons yang anda terapkan di Blogger, pengunjung dapat dengan mudah berbagi artikel ke sosial media milik pengunjung.

Baca Juga :

Screenshoot :

Cara Membuat Sosial Media Share Buttons for Blogger

Cara Pertama :

1. Buka Blogger - Kemudian login
2. Dashboard - Template
3. Edit HTML.

Proses Pembuatan :

1. Temukan kode <CTRL+F> ]></b:skin> atau </style>
2. Copy&paste kode berikut ini, dan letakkan diatas kode ]></b:skin> atau </style>

/* Share postingan Start*/
.share-postingan{height:33px;position:relative;line-height:0;margin:0 0 20px;padding:0}
.share-artikel{display:block;margin:0;padding:0}
.share-artikel a{float:left;width:20%;height:45px;line-height:45px;color:#fff;font-weight:400;font-size:28px;text-align:center;display:inline-block;box-sizing:border-box;opacity:.75;margin:0;padding:0;transition:all .25s ease}
.share-artikel a:hover{opacity:1}
.share-artikel .fac-art{background:#3b5998}
.share-artikel .twi-art{background:#00acee}
.share-artikel .goo-art{background:#db4a39}
.share-artikel .pin-art{background:#CA2127}
.share-artikel .lin-art{background:#0077B5}
/* Share postingan End*

3. Jika sudah? langkah selanjutnya adalah memasang Font Awesome Icons. Karena pada tombol share sosial media ini menggunakan font awesome icon. Contoh : fa fa-facebook
4. Temukan kode </head>
5. Copy&paste kode berikut ini, dan letakkan diatas kode </head>

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

6. Terakhir, Temukan kode <data:post.body/>
7. Copy&paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

<!---Share-postingan start-->
<div class='share-postingan'>
<div class='share-artikel'>
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/></a>
<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/></a>
</div>
</div>
<!--Share-Artikel End -->

8. Simpan Template.

Demikian Tutorial Blogger kali ini, bila anda mengalami kesalahan? Silakan jangan sungkan untuk berkomentar. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading, Sharing & Search and Visited : Cara Membuat Sosial Media Share Buttons for Blogger

Cara Membuat Sosial Media Share Buttons for Blogger

0 Response to "Cara Membuat Sosial Media Share Buttons for Blogger"

Post a Comment