Cara Menciptakan Sosial Media Share Buttons For Blogger

Baca Juga

Sebelumnya aku pernah posting cara menciptakan aneka macam "Tombol Sosial Media Share" Tujuan nya sama yaitu untuk meningkatkan pengunjung. Dengan tombol share buttons yang anda terapkan di Blogger, pengunjung sanggup dengan gampang membuatkan artikel ke sosial media milik pengunjung. 

Baca Juga :

• Cara Membuat Tombol Share Buttons Responsive pada Blogger
• Cara Membuat Flat Social Share Buttons di Blogger
• Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger
• Cara Membuat Tombol Share Sosial Media Buttons Melayang di Kiri Blog
• Cara memasang Tombol Share di Blogger, Responsive!

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 isyarat <CTRL+F> ]></b:skin> atau </style> 
2. Copy&paste isyarat berikut ini, dan letakkan diatas isyarat ]></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 ialah memasang Font Awesome Icons. Karena pada tombol share sosial media ini memakai font awesome icon. Contoh : fa fa-facebook
4. Temukan isyarat </head>
5. Copy&paste isyarat 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 isyarat <data:post.body/>
7. Copy&paste isyarat 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, jikalau 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