Cara membuat social media box valid HTML 5

 Social media box suscribe valid HTML5

Credit by Jember Preker

Social media merupakan tempat sharing dan berbagi informasi serta update hal yang positif namun social media dapat digunakan untuk media dalam interaksi khususnya berlangganan artikel.Untuk membuat social media box yang valid HTML 5 dan sudah terbukti valid.Untuk beberapa kebutuhan yang umum dalam kotak social media ini seperti Google+ share rekomendasi,Facebook Like,Share Facebook,Tweet,Follow twitter @JemberPreke,Kotak subscribe/kotak berlangganan artikel,Serta tambahan tombol mudah RSS Feed.

Cara membuat social media box valid HTML 5

1. Pertama login blog anda.
2. Setelah login pilih template add Widget 
3. CTRL+F lalu cari </head> dan Letakkan Script dibawah tepat diatas kode </head>
   

   <style> /* Social Widget */ #MBT-mashable-bar { border: none; margin: auto; width:auto; } .fb-likebox { background: #F5FCFE; padding: 10px 13px 0 10px; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-bottom: 1px solid #D8E6EB; margin:0px; height:30px; } .googleplus { background: #F5FCFE; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-image: initial; font-size: .90em; font-family: "Arial","Helvetica",sans-serif; color: #000; padding: 9px 11px; line-height: 1px;} .googleplus span { color: #000; font-size: 11px; position: absolute; display:inline-block; margin: 9px 70px;} .g-plusone { float: left;} .gplus { background: #fff; padding: 0px; border: 0px solid #C7DBE2; margin-bottom:-13px;} .twitter { background: #EEF9FD; padding: 10px; border: 1px solid #C7DBE2; border-top: 0;} #mashable { background: #EBEBEB; border: 1px solid #CCC; border-top: 1px solid white; padding: 2px 8px 2px 3px; text-align: right; border-image: initial;} #mashable .author-credit {} #mashable .author-credit a { font-size: 10px; font-weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration:none;} #email-news-subscribe .email-box{ background: #EEF9FD; padding: 5px 10px; font-family: "Arial","Helvetica",sans-serif; border-top: 0; border-right: 1px solid #C7DBE2; border-left: 1px solid #C7DBE2; border-image: initial; height:50px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ font-family: "Arial","Helvetica",sans-serif; border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 1px 1px 0; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background: #ff9b00; box-shadow:0 0 3px #999 border-radius:3px; border:1px solid #cc7c00; color:#FFFFFF; text-shadow:#d08d00 1px 1px 0} #other-social-bar { background-color: #D8E6EB; box-shadow: 0 1px 1px #FFFFFF inset; padding: 20px 0 0 15px; font-family: "Arial","Helvetica",sans-serif; font-weight:bold; overflow: hidden; border: 1px solid #B6D0DA; height:30px; } #other-social-bar ul {list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow { float: left; color:#1E598E; overflow: hidden; height:20px; padding:5px; width: 270px;} #other-social-bar .other-follow ul { list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow ul li { font-size: 12px; font-weight: bold; display:inline; border:0; text-shadow: 1px 1px white;} #other-social-bar .other-follow ul li a { font-size: 12px; color:#1E598E; font-weight: bold; display:inline; text-shadow: 1px 1px white;} #other-social-bar .other-follow li { font-size: 12px; font-weight: bold; display:inline; border:0; text-shadow: 1px 1px white;} #other-social-bar .other-follow li a { font-size: 12px; color:#1E598E; font-weight: bold; display:inline; text-shadow: 1px 1px white;} #other-social-bar .other-follow li.my-rss { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4en1CCSvVvQxVoTrU290KHtPc9Qb2JabKRLtPoq28KtOpd73ZTDzWfIaMtuFVGhtkE28-i0JKsrONI4F-XBlzpvYMFVlZ8jOmLpd5ebDS09h6F-bmCwEkrUzIxL8YQJ-gwuW8Wzs-vTE/s400/rss-16x16.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px; margin-left:5px;} #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{ text-decoration:none; } #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ text-decoration:underline; } #other-social-bar .other-follow li.my-twitter { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7WHIm_ekpRzdRFlm8hXUWIhC1POjnz_mm54v0yK89UoCXuMPCdzraPdPjyNT4S6kBzWZSLvgghgz5tsfyHLMILSGFoshIo_k0rEASiuvHJHG2G7Sy5U-3aqqhLyiTaUHTdrYkOJov4f4/s400/twitter%2527.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px;} #other-social-bar .other-follow li.my-gplus { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8RKN1GCRqiLb9A2Mnjy-3nYwLAx21knqbgzyixG4oQoXWt4kyDcnRFtzBYSzQPCD1CYKdjA-c5yMpLcCQZ7RFuXLxSuAGslXy-rVnQGsQQYZVIAGdvThmBEikA8KvKsCVzp7jRiXpUfw/s400/gplus-16x16.png) no-repeat transparent; line-height: 1; width: 60px; padding: 0px 3px 1px 20px; margin-bottom:0px;} </style> <!--[if IE]> <style> #email-news-subscribe .email-box input.subscribe{ background: #FFCA00; } </style> <![endif]-->

   Save Template.
   Untuk kode di atas sudah FIX CSS3 dan mudah - mudahan sempurna dan cocok di template anda juga.
   
   
4. Setelah itu masuk Tata Letak dan add widget.
5. CTRL+F lalu cari kode </head> Letakkan kode di bawah tepat di atas </head>
   
   Coba di Klik

   Untuk kodenya silahkan lihat di sini http://notes.io/cEW
   Untuk tulisan yang berwarna biru silahkan ganti dengan alamat anda dan untuk yang lain abaikan untuk menghindari kerusakan pada box social media. http://feedburner.google.com/fb/a/mailverify?uri=JemberPreker adalah alamat feedburner anda misal http://feeds.feedburner.com/JemberPreker"

<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" > <!-- Google Plus--> <div class="gplus"> <!-- Place this tag where you want the badge to render --> <div class="googleplus"> <!-- Google --> <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="230"> </div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="fb-likebox"> <div class="fb-like" data-send="true" data-layout="button_count" data-show-faces="true"> </div> </div> <div class="twitter"> <a href="https://twitter.com/share" title="Twitter" class="twitter-share-button" data-via="JemberPreker" >Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <a href="https://twitter.com/JemberPreker" title="@emberPreker" class="twitter-follow-button" data-show-count="true">Follow @JemberPreker</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action='http://feedburner.google.com/fb/a/mailverify?uri=JemberPreker' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=JemberPreker&loc=en_US', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'> <input class='email' onblur='if (this.value == "") {this.value = "ketik email anda disini...";}' onfocus='if (this.value == "ketik email anda disini...") {this.value = ""}' type='text' value='ketik email anda disini...'/><input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" href="http://feeds.feedburner.com/JemberPreker" target="_blank" title="RSS Feed">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" href=http://twitter.com/jemberpreker target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" href="https://plus.google.com/109702209817184849277" target="_blank">Google+</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://jember-preker.blogspot.com/" title="Jember Preker" target="_blank" >Home</a></span></div> <!-- End Widget --> <!--end of social widget--></div> </div> </div>

Save template. 

Semoga informasi ini bermanfaat bagi anda,untuk catatan bagi yang ingin mendapatkan cara - cara lain silahkan request untuk membuat blog anda valid HTML 5.Sekian tentang Cara membuat social media box valid HTML 5.