Share For You

Sobat nih ada trik agar blog kita kebanjiran pengunjung, ciee kebanjiran pengunjung, mau kan? pasti mau dah , nih ane kasih tau caranya, salah satunya dengan cara share blog kita melalui media sosial, seperti Facebook, Twitter , Pinterest ,dan google+, karena sosial media tersebut memiliki jutaan member yang dalam hal ini sobat memiliki peluang besar untuk mempromosikan blog sobat. dengan cara banyak promosi pasti blog sobat banyak di kenal setelah blog terkenal pasti deh nyampe tuh yang namanya kebanjiran,,hahha siap2 pindahin barang barang tuh ,,

Nah kita akan memanfaatkan widget dari masing masing media sosial untuk di Add di blog kita, tentunya dengan Customisasi yang keren dengan efek Slide , langsung tkp !

1. Masuk Blogger --- >Layout
2. Klik ' Add Gadget' lalu pilih ' HTML / JavaScript '
3. Pastekan Kode dibawah ini

<style> .btrix-social-slidebox { font: 16px normal 'Denk One', sans-serif; display: inline-block; position: relative; width: 95%; max-width: 200px; padding: 12px; } .btrix-social-slide { width: 95%; max-width: 280px; padding-top: 8px; padding-left: 8px; padding-right: 8px; } .btrix-social-slide a { text-decoration: none !important; } .btrix-social-slide ul {margin-top:-5px; margin: 0; padding: 0; list-style: none; } .btrix-social-slide ul li {margin-bottom:15px; display: inline; margin: 0; padding: 0; text-indent: 0; margin-left:10px; } .btrix-social-slide ul li a.facebook { border-left: 65px solid rgba(59, 89, 152, 1); color: rgba(59, 89, 152, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.facebook p { margin: 2px 20px 0 -60px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.facebook:hover { background: rgba(59, 89, 152, 1); border-left: 0px solid rgba(59, 89, 152, 0.1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.facebook:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .btrix-social-slide ul li a.twitter { border-left: 65px solid rgba(64, 153, 255, 1); color: rgba(64, 153, 255, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.twitter p { margin: 2px 20px 0 -60px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.twitter:hover { background: rgba(64, 153, 255, 1); border-left: 0px solid rgba(64, 153, 255, 1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.twitter:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .btrix-social-slide ul li a.gplus { border-left: 65px solid rgba(219, 74, 57, 1); color: rgba(219, 74, 57, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.gplus p { margin: 2px 20px 0 -50px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.gplus:hover { background: rgba(219, 74, 57, 1); border-left: 0px solid rgba(219, 74, 57, 1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.gplus:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .btrix-social-slide ul li a.pinterest { border-left: 65px solid rgba(174, 45, 39, 1); color: rgba(174, 45, 39, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.pinterest p { margin: 2px 20px 0 -50px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.pinterest:hover { background: rgba(174, 45, 39, 1); border-left: 0px solid rgba(174, 45, 39, 1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.pinterest:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } .btrix-social-slide ul li a.rss { border-left: 65px solid rgba(255, 102, 0, 1); color: rgba(255, 102, 0, 1); -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.rss p { margin: 2px 20px 0 -60px; display: inline-block; color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.rss:hover { background: rgba(255, 102, 0, 1); border-left: 0px solid rgba(255, 102, 0, 1); color: #fff; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .btrix-social-slide ul li a.rss:hover p { opacity: 0; -webkit-transition: all 1ms ease-in-out; -moz-transition: all 1ms ease-in-out; -ms-transition: all 1ms ease-in-out; -o-transition: all 1ms ease-in-out; transition: all 1ms ease-in-out; } </style> <div class="btrix-social-slide"> <ul> <li><a class="btrix-social-slidebox facebook" href="https://www.facebook.com/Id Facebook sobat"><p> 12K+</p> Facebook </a></li> <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/Id twitter sobat"><p> 5K+</p> Twitter</a></li> <li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/Id google+ sobat"><p> 4K+ </p> Google+</a></li> <li><a class="btrix-social-slidebox pinterest" href="http://pinterest/Id pinterest sobat"><p> 2K+ </p> Pinterest</a></li> <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/Id Feedburner sobat"><p> 11K+</p> RSS</a></li> </ul> </div>

4. Save HTML / JavaScript

Semoga bermanfaat sob,