Cara Membuat Widget Social Media

 Widget ini meliputi Subscribe ke Email Sobat, Facebook Fan page, Social media sharing, Profile Google Plus milik Sobat.

Sobat Tertarik untuk memasang di Blog Sobat ? Silahkan ikuti tutorial Cara Membuat Widget Social Media “ All in One  “ di bawah Postingan Blog

1. Masuk ke Akun Blogger Sobat

2. dari Dashboard pilih Menu TEMPLATE >> EDIT HTML

Catatan Penting…!!!

Sebelum Sobat melakukan perubahan pada HTML, Silahkan BACKUP Template Sobat, guna menghindari kesalahan yang tidak di inginkan ( kerusakan pada template ).

3. Cari kode <data:post.body> Gunakan Ctrl+F untuk pencarian cepat

4. Kalau sudah ketemu, letakkan kode di bawah ini di bawah kode <data:post.body>

5. Berikut ini kode yang dipasang dibawah kode <data:post.body>

HTML

<!-- All-in-one Social Widget Blogger Oleh  Bloggingpasuruan -->

<;style>

.dsgbox {

background: #fff;

border: 1px solid #ddd;

height: 355px;

margin: 10px auto;

padding: 10px;

width: 650px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

.dsgsubscribe {

border: 1px solid #D3D3D3;

padding: 8px;

width: 340px;

height:172px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.dsgsubscribe:hover {

-moz-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);

-webkit-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);

box-shadow: inset 1px 1px 10px 1px rgbaundefined91,148,253, 1, 1);

}

.dsgmailbox {

border: 1px solid #D3D3D3;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 1px 1px rgbaundefined255, 172, 84, 0.4) inset;

-webkit-box-shadow: 1px 1px 1px 1px rgbaundefined0, 0, 0, 0.4) inset;

box-shadow: 1px 1px 1px 1px rgbaundefined0, 0, 0, 0.4) inset;

color: #666;

font: 14px &quot;trebuchet ms&quot;, sans-serif;

padding: 7px 15px;

width: 160px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.dsgmailbox:hover {

-webkit-box-shadow: none;

box-shadow: none;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.dsgsubmit {

font: bold 18px Segoe UI,RobotoTahoma, Geneva, sans-serif;

font-style: normal;

color: #ffffff;

background: #5b94fd;

border: 1px dashed #ffffff;

border-radius: 10px 10px 10px 10px;

padding: 4px 15px;

cursor: pointer;

margin: 0 auto;

}

.dsgsubmit:active, .dsgsubmit:hover {

cursor: pointer;

color:#5b94fd;

border: 1px dashed #fff;

background:#000;

position: relative;

top: 1px;

}

.dsgsubmit::-moz-focus-inner {

border: 0;

padding: 0;

margin: 0;

}

.dsgsharebox {

border: 1px solid #D3D3D3;

margin: -157px 0 0 350px;

padding: 8px;

height:130px;

width: 273px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.gplusholder {

margin: -157px 0 0 350px;

}

.dsgsharebox:hover {

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);

box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

</style>

<div class="dsgbox">

      <div class="dsgsubscribe">

            <div style="color: #666666; font-weight: bold; font: 22px Segoe UI, Roboto, cursive; margin: 0px 0px 10px 15px;">

                   Suka dengan Artikel ini ? Kirim Langsung ke Inbox Email Anda!

            </div>

            <div style="margin: 10px 0 0 6px;">

                  <form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=YOUR_ACCOUNT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">

                        <input name="uri" type="hidden" value="YOUR_ACCOUNT"/>

                        <input name="loc" type="hidden" value="en_US"/>

                        <input class="dsgmailbox" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if undefinedthis.value == &quot; Masukkan Email disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Masukkan Email disini "/>

                        <input alt="" class="dsgsubmit" title="" type="submit" value="Subscribe"/>

                  </form>

            </div>

            <div style="border: none; color: #666666; font: 19px Segoe UI, Roboto; margin: 25px 0 0 5px;">

                   Follow us on:

            </div>

            <div style="margin: -32px 0 0 120px;">

                  <a href="https://www.facebook.com/YOUR_ACCOUNT" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-O6Ovbh9gWm9Qh1PZ3T-y74ehBbA6OXgtw2KNMIcNXxdHdW7nlpWYFfFsysQ-K1jHvhUZTai6RmVM-Q9Gwk3-qYUUZiuGubv3lLEFTSdsIINLrFVAKVXPaFnS1JFF-lFrzXH5WRBU1qs/s32/facebook500.png style=&quot;border: 0px; padding:2px;&quot;"/></a>

                  <a href="https://www.twitter.com/YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iv7G-qCAYNMWtmVCBLQth8iXnSfPHhCGZttJHzluzr1P_SumIWfN_pPWpODWsJr1AoBieen59RgRqTPRK0mX74JL84WVYse8NrjXi7R29AtT_YlRjfiS-q3ZCLgG9NfiyYz1kaYG4w4/s32/twitter.png" style="border: 0px; padding: 2px;"/></a>

                  <a href="https://plus.google.com/+YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3PcJlx46DiaYO1UM7wIG543ewdyolBzvAg9HgJr4O83ecx7jaPcj7CeonwnV8QLMmhh7_g7Yqiwcq3v1aye7G_efP2BDM8sH6Msw417nMonFB3RXSEPF247GRSt2sSM7RbRhFLZDuR4/s32/googleplus-revised.png" style="border: 0px; padding: 2px;"/></a>

                  <a href="http://pinterest.com/YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaLehivEv7abq0w_icRvOSfLi5Su4v2MD9GGQDl0Vqla5gWjGYAC7gKO5ghKpkQfFN6XDYgnlD1f9WM6L5UVtgxzkgWLyVsDTE01kLcEdpCkaeKKYUJoJl-rwI9Vn84mNBz8GKY1FZNk/s32/pinterest.png" style="border: 0px; padding: 2px;"/></a>

                  <a href="http://www.YOUR_ACCOUNT.com/feeds/posts/default?alt=rss" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP1d3XrkNkM9K-fo7-hAu-9nX7oZ7XdYlEcb0DHCIyhmsLXls38TQi3EtMQHiRW84wW58QKmG7IyXA5cn2Ep5rIHOWe0EFgCZy9VPFzicaQWKCiAjBVxItGQckrmD9pDAaVdo7KaRjI2c/s32/rss.png" style="border: 0px; padding: 2px;"/></a>

            </div>

      </div>

      <div class="dsgsharebox">

            <script type="text/javascript">

var switchTo5x = true;

 </script>

            <script src="//s7.addthis.com/js/300/addthis_widget.js" type="text/javascript"></script>

            <br/>

            <div style="margin: -15px 5px;">

                  <a class="addthis_button_facebook_like" fb:like:layout="button_count">

                  </a>

            </div>

            <div style="float: right; margin: -15px -5px 0 0;">

                  <a class="addthis_button_stumbleupon_badge">

                  </a>

            </div>

            <div class="addthis_toolbox addthis_default_style " style="margin: 16px 0 10px 98px;">

                  <a class="addthis_button_google_plusone" g:plusone:size="inline">

                  </a>

            </div>

            <div style="margin: 5px 5px;">

                  <a class="addthis_button_tweet">

                  </a>

            </div>

            <div style="float: right; margin: -30px -60px 0 0;">

                  <a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>

            </div>

      </div>

      <div style="margin-top: 35px;">

            <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FYOUR_ACCOUNT&amp;width=340&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=170" style="border: none; height: 160px; overflow: hidden; width: 340px;">

            </iframe>

      </div>

      <div class='gplusholder'>

            <div class='g-person' data-href='https://plus.google.com/YOUR_ACCOUNT' data-layout='landscape' data-showcoverphoto='false' data-showtagline='false' data-width='225'>

            </div>

      </div>

</div>

<!-- All-in-one Social Widget Blogger Oleh Bloggingpasuruan-->

" Kustomisasi “

Gantikan YOUR_ACCOUNT dengan ID ( facebook fan page,twitter,google plus,feedberner ) milik Sobat.

Catatan Penting !

Jika Widget tidak bekerja, silahkan merubah letak ( kode ) pada <data:post.body> yang kedua atau yang ketiga. Jika masih ada masalah silahkan kontak Admin untuk bantuan.

ARTIKEL TERBARU