Full Version Download Sofware Dan Game: Tombol Share

Cara memasang Flat Social Share Buttons di Blog.

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

Pada kesempatan kali ini, saya akan membagikan Flat Social Share Buttons. Dengan tombol share buttons, pengunjung dapat dengan mudah berbagi artikel ke sosial milik dia dengan hanya satu klik saja.

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 kode berikut ini, dan letakkan diatas kode ]]></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 kode berikut ini, dan letakkan dibawah kode <data:post.body/>

Catatan :

" Bisanya kode ini lebih dari satu, silakan anda pilih yang kedua. Atau anda bisa 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='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='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>



         </div> </b:if>

<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>

5. Supaya Responsive? Sekarang kita pasang script Bootstrapcdn atau Font Awesome. Karena Icon pada tombol share ini, menggunakan font awesome icons "Contoh : fa fa-facebook"
6. Selanjutnya Temukan kode </head>
7. 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'/>

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!

Cara Memasang Tombol Share Sosial Button Seperti EvoMagz.

Kali ini saya akan membagikan bagaimana cara membuat Tombol Share Sosial Media Buttons Seperti EvoMagz. Tombol Share ini, merupakan Tombol Share karya Mas Sugeng yang sudah ada di Template EvoMagz. Tombol Share ini keren serta unik sekali, karena Tombol Share Button ini disertai dengan gambar dan Box-Count. Untuk lebih jelasnya perhatikan gambar berikut :

Cara Pertama :

1. Buka Blogger Kemudian Login.

2. Dashboard - Template.

3. Edit HTML.

Cara Pembuatan :

1. Temukan Kode (CTRL+F) ]]</b:skin> atau </style>

2. Copy & Paste kode CSS berikut, dan Letakkan diatas kode ]]</b:skin> atau </style>

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUSm31wUxB0IawOijp3QdxvXcGzWkYJiPvIFMnyfqHqz8z4oERoPvJC1gYFmDPp7L-jy6yCVaSPy_cxy-XuVIjBpri3j0fKH-80tZ1hWleQMgkpyTfBn1Lcr5WUSVX9wD87FSQR9a8B7_8/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}

3. Jika sudah? Temukan kode <data:post.body/> . Biasanya kode ini lebih dari satu, silakan pilih yang kedua atau yang ketiga. Atau bisa diatas Related Post.
4. Copy&paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

<div class='share-buttons-box'>
  <div class='share-buttons'>
   <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
   <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
   <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
   <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
   <div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
   lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>
  </div>
  </div>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>

5. Simpan Template!

Demikianlah Tutorial Blogger kali ini, jika terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini.

Cara Memasang Tombol Shere Melayang Di Kiri.

Sesuai gambar diatas, yang dipanah kebawah. Merupakan Tombol Share Sosial Media Buttons. Merupakan Tombol Share kedua yang saya gunakan. Yang pertama adalah dibagian bawah postingan. Dan yang kedua adalah Tombol Share Sosial Button Melayang di Kiri Blog. Jika anda tertarik dan ingin memperganteng blog anda sebaiknya pasang.

Mungkin tombol share ini sudah tidak asing lagi dikalangan web atau situs, karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya adalah agar pengunjung dapat membagikan sebuah postingan anda di Facebook atau Twitter bahkan juga Google Plus dan Sosial Media yang lainnya. Oke langsung saja kita praktekan..
Cara Pertama :

1. Buka Blogger - Login Blogger!
2. Dashboard - Tata Letak
3. Tambahkan Gadget Seterah dimana saja.
4. Pilih HTML Java Script.
5. Copy & Paste Kode berikut ini.

<!-- Floating social media buttons by MayCyber-Download --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid #808080;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
</div>

<!-- End Floating social media buttons by Maycyber-Download --></div>

6. Simpan !

Dan Taraaaa, Jadilah Tombol Share Buttons Melayang di Kiri Blog.
Bagaimana? Mudah bukan! Sekian dari saya, Semoga Bermanfaat!

Cara Membuat Tombol Share Facebook , Buzz , Digg , Twitter Dll

Seperti yang kita ketahui tombol share ini merupakan elemen yang sangat penting, sebab dapat mendatangkan pengunjung yang banyak dari luar. percaya ga ? pokok nya harus percaya :) Berikut adalah Cara membuat tombol share facebook , buzz , digg , twitter:

Langsung saja copykan script di bawah ini ke dalam html di blog anda :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="border-top: 1px dashed rgb(204, 204, 204); border-bottom: 1px dashed rgb(204, 204, 204); padding: 10px 0px; margin: 10px 0px; width: 100%; float: left; height: 20px;">
<div style="float: left; padding-top: 3px; font: italic 12px Verdana;">Share this article on: </div>

<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>
<div style='float:left;padding-left:10px;'>
<a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>(function() {var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];s.type = &#39;text/javascript&#39;;s.async = true;s.src = &#39;http://widgets.digg.com/buttons.js&#39;;s1.parentNode.insertBefore(s, s1);})();</script></div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name Anda' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

</div>
</b:if>