Cara Membuat Widget Social Media “ All in One “ di bawah Postingan Blog

Salam Blogger, Artikel Bloggingpasuruan kali ini tentang Cara Membuat Widget Social Media “ All in One  “ di bawah Postingan Blog. 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/AVvXsEgHX5vsisBc1551gNz99KOTNTYQ4TnVlsQ4DksYGfVuUMzbWFkh5jPq_vHM1rwVpNN9ZttIxQ7k6dQcsLuz7UR7p7dRU_cmFKvlfUOVI3A7394V553_0udAeVjlX59Use3rfx74sPlhh8U/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/AVvXsEgMhjq7eb6VxzQeVnAxN0Z6vktWxz2qKH0NAwxroYkQjttqxy7jVpUZipc2sMUX24yC2yrSkyYKKVE6tiH27CFWT2sk2AOXpodtjrZF7MjZmHw9XM10xS_aIyILaqUVscPX1sy9Tu-NpO4/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/AVvXsEi65dEoCN5ofpHul8wZm0PFPOiLkYQeQhko7kn1b1CcNrduUZJz8EnrG0PgAZKbd2rPCQIp4eHor_diz81omp4vdSRINz5bdZvYGwm-k0Op3BW4XxHEyjV0RvraTpJoOkxtH09dkBxgLYU/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/AVvXsEhm7AfVwHFvnrCKATNIYXtz8w05n-ysUTN51brCIsDzV1U7OoP8mcY45ZrMQiucWQk3xIq5u6QCfi754juSqGZXqcU4_mbZpmj_acgouUdRGT-N7oEP0zMwJCF-2DBOUeucPUQP3PxKFp0/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/AVvXsEiNbD_IKT70WNgQmdEEb7bOvci3M1L2o6WFc6-wTOmfuiozw29iKvegEVwqC1jUnpHQxfqCwdPE7JOV2X7om-fPbygpM8peh-lMiMBnwY46St30uvrVZ6Da8dFANGR8m7lD3nvbzbY8ZKU/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 denganID ( 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.

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat Widget Social Media “ All in One  “ di bawah Postingan Blog. Semoga bermanfaat dan terima kasih..

Related Posts