Cara Menciptakan Sosial Media Share Buttons Responsive For Blogger

Baca Juga

Mungkin tombol share ini sudah tidak abnormal lagi dikalangan web atau situs. Karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya ialah supaya pengunjung sanggup membagikan sebuah postingan anda di Sosial Media. Menge-share artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Makara jikalau blog anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel anda ke aneka macam sosial media yang anda miliki. Hal ini supaya orang tahu blog Anda untuk melihat terus-menerus alamat blog anda di Timeline mereka.

Tujuan membuatkan ke sosial media ialah 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. Dengan tombol share buttons, pengunjung sanggup dengan gampang membuatkan artikel ke sosial milik ia dengan hanya satu klik. Dan kali ini aku akan mempostingan sesuai judul yaitu Cara Membuat Sosial Media Share Buttons Responsive for Blogger

Screenshoot :

Cara Membuat Sosial Media Share Buttons Responsive for Blogger

Cara Pertama :
 

1. Buka Blogger - Kemudian login.

2.  Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

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

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

/* Share on Media Sosial Start */ .share-post{font-family:'Arimo';text-align:center;margin-bottom:20px;margin-top:20px;margin-bottom:10px;padding:10px 0;} .widget .post-body > .share-post ul {padding:0;} .share-post li{float:left;margin:0 1%;width:18%;padding:5;list-style:none;position:relative;} .share-post li:hover{} .share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;} .share-post li a:hover{color:#fff;} .share-post li .twitter{background-color:#19bfe5;} .share-post li .facebook{background-color:#3b5998;} .share-post li .gplus{background-color:#d64136;} .share-post li .pinterest{background-color:#cb2027;} .share-post li .tumblr{background-color:#304e6c;} .share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover, .share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;} .share-post li:last-child{margin-right:0} .share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;} .share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);} .share-post li .fa {display:initial;} .share-post li:hover{} .share-post li a{padding:6px 0 6px 0;} .share-post li .fa:before{display:none;} .bagitiga{-webkit-column-count:1;-moz-column-count:1;column-count:1;}} @media screen and (max-width:480px) { .share-post li{width:100%}} .bpas-tooltip {position:relative;display:inline-block;} .bpas-tooltip:before, .bpas-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;}    .bpas-tooltip:hover:before, .bpas-tooltip:hover:after {opacity:1;} .bpas-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}        .bpas-tooltip:after {content:attr(data-bpas-tooltip);background:#FF9934;color:#fff;padding:6px 8px;font-family:'Arimo';font-size:12px;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;} .bpas-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#FF9934;} .bpas-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px;} .bpas-tooltip-bottom:before {top:100%;left:50%;margin:-6px 0 0 0;border-bottom-color:#FF9934;} .bpas-tooltip-bottom:after {top:100%;left:50%;margin:6px 0 0 -10px;} .bpas-tooltip-right:before {left:100%;bottom:50%;margin:0 0 -4px 0;border-right-color:#FF9934;}        .bpas-tooltip-right:after {left:100%;bottom:50%;margin:0 0 -13px 12px;} .bpas-tooltip-left:before {right:100%;bottom:50%;margin:0 0 -4px 0;border-left-color:#FF9934;}        .bpas-tooltip-left:after {right:100%;bottom:50%;margin:0 8px -13px 0;} /* Share on Media Sosial End */

3. Jika sudah? Temukan lagi isyarat <data:post.body/> Kode ini biasanya lebih dari satu, silakan Anda pilih yang kedua/ketiga.
4. Copy&paste isyarat berikut ini, dan letakkan dibawah isyarat <data:post.body/>

Wajib Baca :
 Anda sanggup meletakkan isyarat dibawah ini diatas related post, next-previous, subscribe dll.
(jika memasangnya)

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='share-post'>               <ul>                 <li><a class='twitter bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>                 <li><a class='facebook bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>                 <li><a class='gplus bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>                 <li><a class='tumblr bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>                 <li><a class='pinterest bpas-tooltip bpas-tooltip-top' data-bpas-tooltip='Share on 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'/>Pinterest</a></li>               </ul>          </div> </b:if>

5. Jangan lupa untuk memasang Font Awesome Icons. Karena pada tombol share ini, memakai Font Awesome . Contoh : fa fa-facebook
6. Temukan isyarat </head>
7. Copy&paste Font Awesome Icons, dan letakkan diatas isyarat </head>

<script type='text/javascript'> //<![CDATA[ //CSS Ready function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("http://fonts.googleapis.com/css?family=Arimo:400italic,400,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); //]]>

8. Simpan Template.

Demikian Tutorial Blogger kali ini, bila ada kesalahan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir silakan lihat postingan anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading, Sharing & Visited and Search : Cara Membuat Sosial Media Share Buttons Responsive for Blogger