(2646) Widget share valid html5 ~ Blog Irvan Efendy

Widget share valid html5

IRVAN EFENDI

Saturday, October 11, 2014

Hello,... apa kabar kamu yang disana,???
selamat berjumpa lagi dengan saya orang terkece sedunia maya -/\- wkwkkwkk :D
Pada postingan hari ini saya akan membahas tentang cara membuat widget share valid html5 tutorial ini saya buat berdasarkan permintaan dari sahabat blogger yang bernama Irfan Chandra Irawan atau biasa di panggil Ipeenk. sebelum lanjut ke pembahasan silahkan lihat DEMO nya terlebih dahulu.
Berikut ini adalah tombol yang valid html5:

Simak langkah² dibawah ini :

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan

Ctrl

cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.share{display:block;padding:0;margin:10px 0;}
.post-share,ul.share-links{position:relative;margin:0;padding:0}
.post-share{overflow:hidden;line-height:0;margin:0}.share-links li a,.share-links li a:before{float:left;text-align:center;line-height:32px}.share-links li{width:32px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:20%}.share-links li a{display:inline-block;cursor:pointer;width:100%;height:32px;color:#fff;font-weight:400;font-size:13px;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .17s ease}.is-mobile li.whatsapp-desktop,.share-links li.whatsapp-mobile{display:none}.is-mobile li.whatsapp-mobile{display:inline-block}.share-links li a:before{display:block;width:32px;background-color:rgba(255,255,255,.07);font-size:15px}.share-links li a:hover{opacity:.8}.social a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400}.social .facebook a:before{content:"\f09a"}.social .twitter a:before{content:"\f099"}.social .gplus a:before{content:"\f0d5"}.social .linkedin a:before{content:"\f0e1"}.social .pinterest a:before{content:"\f0d2"}.social .whatsapp a:before{content:"\f232"}.social .external-link a:before{content:"\f35d"}.social-color .facebook a{background-color:#3b5999}.social-color .twitter a{background-color:#00acee}.social-color .gplus a{background-color:#db4a39}.social-color .pinterest a{background-color:#ca2127}.social-color .linkedin a{background-color:#0077b5}.social-color .whatsapp a{background-color:#3fbb50}.social-color .external-link a{background-color:#111}.social-text .facebook a:after{content:"Facebook"}.social-text .twitter a:after{content:"Twitter"}.social-text .gplus a:after{content:"Google Plus"}.social-text .linkedin a:after{content:"LinkedIn"}.social-text .pinterest a:after{content:"Pinterest"}.social-text .whatsapp a:after{content:"Whatsapp"}.social-text .external-link a:after{content:"WebSite"}@media screen and (max-width:540px){.share-links li a span{display:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:30px}}

5. Tekan

Ctrl

cari kode <div class='post-footer'>...</div>
kemudian ganti kode tersebut dengan kode di bawah ini

<div class='share'>
<div class='post-share'>
                  <ul class='share-links social social-color'>
                    <b:class cond='data:blog.isMobileRequest' name='is-mobile'/>
                    <li class='facebook'><a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Facebook</span></a></li>
                    <li class='twitter'><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=450, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><span>Twitter</span></a></li>
                    <li class='pinterest'><a class='pinterest' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='linkedin'><a class='linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=950, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='whatsapp whatsapp-desktop'><a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
                    <li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'/></li>
                  </ul>
                </div>
  <div class='clear'/>
</div>

6. Kemudian simpan template sobat.

Semoga bermanfaat, jika ada kesulitan silahkan tinggalkan komentar sobat...

Jika bermanfaat? Bantu share ya sobat

<div class='clear'/> <div id='button-count-share'> <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i> <div class='slide-share'> <p>Share</p> </div> <a class='fb-share-button' name='fb_share' rel='nofollow' share_url='"http://www.facebook.com/sharer.php?u=" + data:blog.url' type='button_count'/> </div> <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i> <div class='slide-share'> <p>Like</p> </div> <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/> </div> <div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i> <div class='slide-share'> <p>G+</p> </div> <div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/> <script type='text/javascript'> window.___gcfg = {lang: 'id'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i> <div class='slide-share'> <p>Tweet</p> </div> <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a> <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> <div class='clear'/> </div> <div class='clear'/>

#bieKK{background:#030303;position:fixed;z-index:99999;bottom:0;height:88px;display:none;width:100%;} .qq{height:20px}.foot-right,.bie2{float:right} #bie{padding: 07px;width: 80%;color: #fff;font-size: 15px;line-height: 1.4em;margin: 0 auto;} #bie ul i,.bie2 ul i{font-size:18px} #search{padding:5px;} #penginput{padding:5px;border:0;background:#2c3e50;color:#fff;} .tabs li.selected a,.tabs li.selected a:hover{background:#34495e;position:relative;font-weight:inherit;} #blog-pager{text-align:center;} .showpageArea{overflow:hidden;padding:5px 0;} .showpageOf{display:none;background:#eee;padding:2px 5px;margin-right:5px;}.showpagePoint{background:#2980b9;color:#fff;padding:10px;margin-right:3px;} .showpageNum a{background:#fff;padding:10px;margin-right:3px;color:#000;transition:all 0.4s ease-in-out;} .showpage a:hover,.showpageNum a:hover{background:#2980b9;color:#fff;border-color:#2980b9} .showpage a{background:#fff;padding:10px;margin:0;color:#000;} input[type="text"]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;}

<div id='bieKK'><div id='bie'><div style='text-align:center;'>Maaf untuk sementara ini klik kanan dinonaktifkan, karena banyak blogger yang copy paste sembarangan tanpa izin. <br/> <br/> Jadi jika ingin Copy Tekan "<div class='kbrd'>Ctrl</div>+<div class='kbrd'>C</div>". Dan jika ingin buka link di new tab klik linknya sambil menekan tombol <divclass='kbrd'>Ctrl</div>. Terimakasih atas Pengertiannya, dan mohon maaf Jika anda terganggu. .</div> <div style='text-align:right;'>ADmin : <a href='https://fb.com/irvan.cyberArt'><b>IRvan EFendy</b></a></div></div></div> <script language='javascript' type='text/javascript'> document.oncontextmenu = RightMouseDown; document.onmousedown = mouseDown; function mouseDown(e) { if (e.which==3) {//righClick $("#bieKK").toggle(500); } } function RightMouseDown() { return false; } </script> <script language='javascript' type='text/javascript'> $(document).ready(function(){ $(".bie2").click(function(){ $("#bieKK").hide(500); }); }); </script>

Balas Hapus

IRVAN EFENDI 30 January, 2015

in sya allah gak mempengaruhi sob
aku juga masang kok loading blog ku juga gak berat" amat

IRVAN EFENDI 31 January, 2015

monggo gan

IRVAN EFENDI 01 February, 2015

~~kamu pake template apa sih gan,..~~

Mungkin pertanyaan sobat tidak akan dibalas, Karena saya sudah menyediakan halaman OOT.

~~punya mu udah ada tombol flide share nya kalo mau ganti harus di hapus semua script share yang ada di template mu~~

Mungkin pertanyaan sobat tidak akan dibalas, Karena saya sudah menyediakan halaman OOT.

~~hapus semua kode ini di template mu~~

<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};
 
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
<div class='clear'/>

Mungkin pertanyaan sobat tidak akan dibalas, Karena saya sudah menyediakan halaman OOT.

kalo udah di hapus langsung ganti dengan script share yang ada di artikel ini.
gak usah cari kode no 5

Mungkin pertanyaan sobat tidak akan dibalas, Karena saya sudah menyediakan halaman OOT.

iya sama"

Tambahkan CSS berikut ini tepat di atas kode </style>

#bieKK{background:#030303;position:fixed;z-index:99999;bottom:0;height:88px;display:none;width:100%;}
.qq{height:20px}.foot-right,.bie2{float:right}
#bie{padding: 07px;width: 80%;color: #fff;font-size: 15px;line-height: 1.4em;margin: 0 auto;}
#bie ul i,.bie2 ul i{font-size:18px}
#search{padding:5px;}
#penginput{padding:5px;border:0;background:#2c3e50;color:#fff;}
.tabs li.selected a,.tabs li.selected a:hover{background:#34495e;position:relative;font-weight:inherit;}
#blog-pager{text-align:center;}
.showpageArea{overflow:hidden;padding:5px 0;}
.showpageOf{display:none;background:#eee;padding:2px 5px;margin-right:5px;}.showpagePoint{background:#2980b9;color:#fff;padding:10px;margin-right:3px;}
.showpageNum a{background:#fff;padding:10px;margin-right:3px;color:#000;transition:all 0.4s ease-in-out;}
.showpage a:hover,.showpageNum a:hover{background:#2980b9;color:#fff;border-color:#2980b9}
.showpage a{background:#fff;padding:10px;margin:0;color:#000;} input[type=&quot;text&quot;]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;}

Cari kode <body> kemudian ganti dengan kode ini

<body oncontextmenu='return false;'>

Kemudian tambahkan kode berikut ini tepat diatas kode </body>

<div id='bieKK'><div id='bie'><div style='text-align:center;'>Maaf untuk sementara ini klik kanan dinonaktifkan, karena banyak blogger yang copy paste sembarangan tanpa izin. <br/> <br/> Jadi jika ingin Copy Tekan &quot;<div class='kbrd'>Ctrl</div>+<div class='kbrd'>C</div>&quot;. Dan jika ingin buka link di new tab klik linknya sambil menekan tombol <divclass='kbrd'>Ctrl</div>. Terimakasih atas Pengertiannya, dan mohon maaf Jika anda terganggu. .</div>
<div style='text-align:right;'>ADmin : <a href='https://fb.com/irvan.cyberArt'><b>IRvan EFendy</b></a></div></div></div>
<script language='javascript' type='text/javascript'>
  document.oncontextmenu = RightMouseDown; 
  document.onmousedown = mouseDown; 

  function mouseDown(e) {
    if (e.which==3) {//righClick
    $(&quot;#bieKK&quot;).toggle(500);
    } 
  }

  function RightMouseDown() { 
    return false; 
  }
</script>
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
  $(&quot;.bie2&quot;).click(function(){
    $(&quot;#bieKK&quot;).hide(500);
  });
});
</script>

iyaa

yang bermasalah ketika masukin kode yang mana??

IRVAN EFENDI 02 February, 2015

gak bisa gimana penk

💬 Peraturan dalam berkomentar :
➥ Budayakan berkomentar sesudah membaca artikel sob.
➥ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
➥ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, dan Profokasi.
➥ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT).
➥ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.

Konversi Kode Konversi KodeOut Of TopicEmoticon