Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Saturday, September 23, 2017

Tutorial Membuat Widget 'Social Follow Us' v1

Tutorial:

1. Login ke Dashboard blogger.

2. Klik butang " More Options " dan klik " Layout ".


3. Pada halaman Layout, klik " Add a Gadget " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.


4. Cari HTML/Javascript dan klik butang tambah.


5.  Copy (CTRL+C) kod javascript dibawah:
<style>
.sidebarRight{float:right;display:block;width:330px;background:#fff;margin:7px 0;padding:0 1% 7px 1%}
h2.box-title{width:100%;padding:10px 3px;margin-bottom:10px;border-bottom:1px solid #e5e5e5}
h2.box-title a{font-size:17px;line-height:1em;font-weight:700;color:#007197;margin-right: 12px}
#social-buttons{width:100%;overflow: hidden;margin:10px 0}
.a-social{float:left;width: 46%;margin: 1%;padding: 1%;
background: none repeat scroll 0 0 #EEEEEE;
-moz-box-shadow: 0 1px 0 #FDFDFD inset;
-webkit-box-shadow: 0 1px 0 #FDFDFD inset;
box-shadow: 0 1px 0 #FDFDFD inset}
.a-social.facebook, .a-social:hover.facebook .social-slide{background: #3873ad}
.a-social.google, .a-social:hover.google .social-slide{background: #f73c28}
.a-social.twitter, .a-social:hover.twitter .social-slide{background: #62c6f8}
.a-social.rss, .a-social:hover.rss .social-slide {background: #f18421}
.a-social i {
display: block;
font-size: 20px;
font-family: FontAwesome;
color: #FFFFFF;
font-style: normal;
width: 40px;
height: 40px;
line-height: 40px;
margin: 15px auto 2px;
text-align: center;
border: 2px solid #fff;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%}
.social-container{
position: relative;
color: #FFFFFF;
font-size: 15px;
font-weight: 600;
height: 45px;
line-height: 45px;
overflow: hidden;
text-align: center;
width: 100%}
.social-slide, .a-social i {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out}
.social-slide{height: 45px;position: absolute;top: -35px;width: 100%}
.icon-facebook:before{content:"\f09a"}
.icon-twitter:before{content:"\f099"}
.icon-google-plus:before{content:"\f0d5"}
.icon-rss:before{content:"\f09e"}
.social-slide:after{
position: absolute;
display: block;
width: 100%;
height: 10px;
border-left: 2px solid #EEEEEE;
bottom: 0;
content: ""}
.a-social:hover .social-slide{top: 0}
.facebook_c{position: relative;top:5px;}
.twitter_c {position: relative;top:5px}
.google_c{position: relative;top:5px}
.rss_c{position:relative;top:-10px}
.rss .IN-widget, .button1 iframe {position: relative;top: -5px}
.twitter iframe{width: 134px !important}
.google #___plusone_0{width: 60px !important}
.a-social.rss{margin-right: 0}
</style>
<div class='sidebarRight'>
  <h2 class='box-title'><a>FOLLOW US</a></h2>
<div id="social-buttons">
<div class="facebook a-social">
    <i class="icon-facebook"></i>
    <div class="social-container fb">
        <div class="social-slide">
            <div class="facebook_c">
                <iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/faiz.tutorial&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe>
            </div>
        </div>
        Facebook
    </div>
</div>

<div class="twitter a-social">
    <i class="icon-twitter"></i>
    <div class="social-container tw">
        <div class="social-slide">
            <div class="twitter_c">
                <a href="https://twitter.com/faizal_ahmad91" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></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>
        Twitter
    </div>
</div>

<div class="google a-social">
    <i class="icon-google-plus"></i>
    <div class="social-container tw">
        <div class="social-slide">
            <div class='google_c'>
                <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
                <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/102149587857352560756" data-rel="publisher"></div>
            </div>
        </div>
        Google+
    </div>
</div>

<div class="rss a-social">
    <i class="icon-rss"></i>
    <div class="social-container tw">
        <div class="social-slide">
            <div class="rss_c">
<p><a href="http://feeds.feedburner.com/Faiz-tutorial"><img src="http://feeds.feedburner.com/ ,fc/Faiz-tutorial?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
            </div>
        </div>
        Rss Feed
    </div>
</div>

</div>
<div class='clear'></div>
</div>

KETERANGAN:
  • https://www.facebook.com/faiz.tutorial - Gantikan dengan link/url fan pages Facebook anda.
  • https://twitter.com/faizal_ahmad91 - Gantikan dengan link/url Twitter anda.
  • https://plus.google.com/102149587857352560756 - Gantikan dengan link/url Google+ anda.
  • http://feeds.feedburner.com/Faiz-tutorial - Gantikan dengan link/url Feedburner anda.
  • Faiz-tutorial  - Gantikan dengan link/url ID Feedburner anda.
  • [PERHATIAN] Sekiranya button counter Feedburner tidak terpapar dengan betul, sila login ke akaun Feedburner anda [KLIK SINI] ---> Klik Nama blog anda (Jika tiada, daftarkan blog anda pada feedburner terlebih dahulu) ---> Klik tab Publicize ---> Klik FeedCount ---> Klik Activate (Sekiranya belum diaktifkan) ---> Copy kod HTML yang diberi  ---> Gantikan dengan kod diatas yang di 'highlight dengan warna OREN.
6. Paste (CTRL+V) pada ruang Content.

7. Seterusnya klik " Save " dan lihat la hasilnya
Sumber https://faiz-tutorial.blogspot.co.id/

Share on Facebook
Share on Twitter
Share on Google+

Related : Tutorial Membuat Widget 'Social Follow Us' v1