Cara membuat dan merilis widget subscriber (kotak berlangganan) di blog

Akhirnya setelah penulis rajin blogwalking ke beberapa blog tetangga, saya menemukan sebuah widget lagi yang unik dan menarik yaitu widget berlangganan (subscriber) yang sudah di rilis. Widget yang satu ini agak sedikit berbeda karena di tambah fitur-fitur tambahan. Widget ini memilki hampir semua yang anda butuhkan untuk bersosialisasi dengan beberapa website jejaring sosial.

Dengan meningkatnya persaingan dan beberapa widget sosial yang tersedia di internet untuk blog, kita harus memunculkan sesuatu yang berbeda dan kami mencapai apa yang kami dapat. Widget berlangganan sosial Ini dapat meningkatkan pelanggan Anda, dapat membuat postingan di jejaring sosial, juga memungkinkan pembaca untuk bisa terhubung pada jejaring lain dan bahkan dapat meningkatkan penggemar Facebook anda (fans Facebook). Semuanya ini disajikan sangat rapi. Jadi, jangan berpikir dua kali ...

View Demo

Fitur:

Kotak berlanggan feedburner yang bagus untuk meningkatkan pelanggan
Tombol follow us sehingga para pembaca dapat bergabung dengan jejaring sosial anda
Tombol sosial media yaitu, Facebook, Twitter, G+1, Stumble Upon dan tombol share Addthis untuk jaringan sosial lainnya.
Kotak like Facebook fans page anda untuk meningkatkan penggemar

Bagaimana cara menggunakan widget ini?

Sangat sangat sederhana dan cukup mudah untuk menggunakan widget ini, ikuti langkah-langkah berikut di bawah ini:

Pergi ke akun Blogger anda -> Template -> Edit HTML -> Proceed

Centang Expand Template Widget

Cari kode / tag <data:post.body/>

Kemungkinan anda menemukan kode tersebut 2 atau 3, cukup konsen pada kode yang pertama di template anda. Tepat di bawah kode <data:post.body/> pastekan kode berikut di bawah ini:

<!--Social Subscription Box by jalu-pangna.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
<style>
.tbibox {
    background: #fff;
    border: 1px solid #ddd;
    height: 360px;
    margin: 10px auto;
    padding: 10px;
    width: 572px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.tbisubscribe {
    border: 1px solid #D3D3D3;
    padding: 8px;
    width: 300px;
    -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;
}
.tbisubscribe:hover {
    -moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
    -webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
    box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
    border: 1px solid #D3D3D3;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
    color: #666;
    font: 14px "trebuchet ms", 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;
}
.tbimailbox: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;
}
.tbisubmit {
    font: bold 12px Tahoma, Geneva, sans-serif;
    font-style: normal;
    color: #ffffff;
    background: #ff5714;
    border: 0px solid #ffffff;
    text-shadow: 0px -1px 1px #222222;
    box-shadow: 2px 2px 5px #000000;
    -moz-box-shadow: 2px 2px 5px #000000;
    -webkit-box-shadow: 2px 2px 5px #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    padding: 8px 15px;
    cursor: pointer;
    margin: 0 auto;
}
.tbisubmit:active {
    cursor: pointer;
    position: relative;
    top: 2px;
}
.tbisubmit::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin: 0;
}
.tbisharebox {
    border: 1px solid #D3D3D3;
    margin: -157px 0 0 330px;
    padding: 8px;
    width: 225px;
    -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;
}
.tbisharebox:hover {
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
    box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 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>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbibox'>
    <div class='tbisubscribe'>
        <div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>
Dapatkan Artikel Baru Kami di 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.open('http://feedburner.google.com/fb/a/mailverify?uri=jalu-pangna', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
            style='margin: 0pt;' target='popupwindow'>
                <input name='uri' type='hidden' value='TopBloggingIdeas' />
                <input name='loc' type='hidden' value='en_US' />
                <input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
                onfocus='if (this.value == "Enter your email...") {this.value = ""}'
                type='text' value='Enter your email...' />
                <input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'
                />
            </form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>
Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
            <a href='http://go.topbloggingideas.com/facebook' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5GWQyQL6lBHAIB1b-WOyXo_4OMq2ycLpstg_eppsVCSAdhL__doiwct4JkxHpNR5J4-XKThO_XIy2QrFkQ_K4nGP3Mbwdo_ZUTeJVO-p0ivWlYgCxT9fkwX263LlU_s4vyrxSCjQfrEs/s32/facebook500.png' alt='facebook'/></a>
            <a href='http://go.topbloggingideas.com/twitter' rel='nofollow' target='_blank'
            title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEpg50DM7rFvOYtDSjHIAP-zbnneEEZm8A3s_bx8hodVm9DcLjKnjHs3q3oUENMhfGD_yAfaoXJuIy-OlWm4RrSi01NaKFQLhsJWCS3IMg9B1Ls-bJceIAYO0cc6PETtSwVDQXb9XXeVA/s32/twitter.png' alt='twitter'/></a>
            <a href='http://go.topbloggingideas.com/gplus' rel='nofollow' target='_blank'
            title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipRO9yhMY_M3rfspLiSFthun_kLUfc6v0z-cgRvhci-LlZbuvFlkMB-fL6QHtXEVH_TFDUH2_3r_nraTQd3I3ww5zRPV_ofbk-hzLAd4-guMI_u2u3z5mlZIopDUZ5xI-GsCkiU-OtNN8/s32/googleplus-revised.png' alt='gplus'/></a>
            <a href='http://pinterest.com/topbloggingidea/' rel='nofollow' target='_blank'
            title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGu6YiEDa3rIEqFdqQlXtvHWn-iWxJbxuocag-acrOX9fnatKj4Ug0cUPQSuTjL2EqdQf5luAeh7c4qDT_4wrq_eKVvJk8cmVlTo6doC8Zvh-3v2IT_vzCD8F2X2OSqbGzJa59B1r0dJ4/s32/pinterest.png' alt='pinterest'/></a>
            <a href='http://go.topbloggingideas.com/rss' rel='nofollow' target='_blank'
            title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdKUOxa7ApkjlosIayuNATVurxPr5Ca7w3SnXnAIuJthFNnp-F-yPyYrdy_XXjaiPcRT_lWL4PClvJM2a0hyphenhyphenmLY33Q61a2bOLZk96B7nmfTbrFipuoCql6gJpdV3Xmkj8gdcNUQWQGXQ/s32/rss.png' alt='rss'/></a>
        </div>
</div>
<div class='tbisharebox'>
        <script type='text/javascript'>
            var switchTo5x = true;
        </script>
        <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'
        />
        <script type='text/javascript'>
            stLight.options({
                onhover: false
            });
        </script>
        <div style='margin: 5px 5px;'>
            <span class='st_fblike_hcount' displaytext=''></span>
        </div>
<div style='margin: -30px -20px 0 0; float: right;'>
            <a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
            expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'
            data-related='topbloggingidea:Get latest Blogger Widgets, Blogging Tips,  Blogging Ideas, Blogger Gadgets, Free Blogger Templates, Plugins and SEO tips to Optimize Your Blogs.'
            data-count='horizontal' data-via='topbloggingidea' data-lang='en'></a>
            <b:if cond='data:post.isFirstPost'>
                <script type='text/javascript' src='http://platform.twitter.com/widgets.js'>
                   
                </script>
            </b:if>
        </div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
            <a class='addthis_counter'></a>
            <script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
        </div>
<div style='margin: 5px 5px;'>
            <su:badge layout='1'></su:badge>
            <script type='text/javascript'>
                (function () {
                    var li = document.createElement('script');
                    li.type = 'text/javascript';
                    li.async = true;
                    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(li, s);
                })();
            </script>
        </div>
</div>
<div style='float: right; margin: -40px -5px 0 0;'>
        <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'>
</div>
<script type='text/javascript'>
            (function () {
                var po = document.createElement('script');
                po.type = 'text/javascript';
                po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(po, s);
            })();
        </script>
    </div>
<div style='margin-top: 20px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2www.facebook.com/pages/Eyang-anom/427305383989192&width=570&colorscheme=light& show_faces=true&stream=false&header=false&height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
    </div>
</div>
</b:if>
<!--Social Subscription Box by jalu-pangna.blogspot.com-->

Beberapa hal penting untuk dirubah:

Ganti jalu-pangna dengan feedburner URLAnda.
Ganti link/ alamat URL Facebook, Twitter, Google +, Pinterest dan RSS feed anda masing-masing.
Ganti 2Fwww.facebook.com/pages/Eyang-anom/427305383989192 dengan halaman fans Facebook Anda.

Happy Blogging...!

Original source

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 16.07

12 April 2013

Cara membuat dan merilis widget subscriber (kotak berlangganan) di blog

Jalupangna

0 komentar:

Popular Posts

Blog Archive

Label

Recent Comment

Followers