Tampilkan postingan dengan label widget. Tampilkan semua postingan
Tampilkan postingan dengan label widget. Tampilkan semua postingan

Minggu, 25 Mei 2014

Cara Membuat Warna Background Sidebar Warna Warni Dengan Css

1 komentar

Tutorial kali ini ialah Cara Membuat Warna Background Sidebar Warna Warni Dengan Css. Kita tidak perlu edit gambar begini begitu, warna ini warna itu untuk mempercantik tampilan sidebar blog sobat. Yang juga gambar-gambar seperti itu hanya akan menambah beban blog sobat (kebanyakan sih orang bilang begitu) cukup dengan sedikit sentuhan CSS maka sobat dapat membuat warna background sidebar akan tampak warna-warni yang menawan dan mempesona. supaya lebih jelas sobat dapat melihat contoh yang sudah dibuat dibawah ini :




Nah bentuknya seperti ini sobat
Sahabat bisa berkreasi Sesuai dengan
keinginan sobat sendiri
warnapun bisa sahabat ganti sesuai
dengan yang diinginkan oleh sahabat
 lumayan mantap bukan ?! hehe
.

Nah apabila sahabat tertarik berikut adalah kode cssnya silahkan copy dan pastekan pada halaman posting milik sahabat

<div style="
background: -moz-linear-gradient(top, #FF0000, #FFFF00);
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FFFF00));">
GANTI DENGAN TULISAN SAHABAT DISINI
</div>

Nah kalau mau lebih rame lagi silahkan lihat contoh dibawah ini :


Nah bentuknya seperti ini sobat
Sahabat bisa berkreasi Sesuai dengan
keinginan sobat sendiri
warnapun bisa sahabat ganti sesuai
dengan yang diinginkan oleh sahabat
 lumayan mantap bukan ?! hehe
.

Nah untuk kodenya silahkan sahabat copy kode dibawah ini ya :

<div style="
background: -moz-linear-gradient(-40deg, black, green, yellow, orange, blue, indigo, violet); background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(16%,orange), color-stop(32%,yellow), color-stop(48%,green), color-stop(64%,blue), color-stop(80%,indigo), to(violet));">GANTI DENGAN TULISAN SAHABAT DISINI
</div>
Read more...

Senin, 19 Mei 2014

Clean Social Subscribe Widget for Blogger

0 komentar

Hello Readers, I am again back after a long break. This time I present you the extremely elegant social subscribe widget which you can add in the footer of your blogger blog posts. This widget showcased Facebook, Twitter and Feedburner integration.

This widget has been optimized for blogs with smaller width too and looks perfect on all blogs. The widget uses Jquery, CSS and HTML for its working.

Adding the code


First and foremost you need to add the code. First go to Blog Title → Template → Edit HTML. Press Ctrl. + F and search for <data:post.body/> code in your template and paste the below given code just below <data:post.body/>.

NOTE : There maybe more than one (usually 2-4) <data:post.body/> so make sure that you have selected the right one. If the widget does not appear try changing the location of code.

<section class="newsletter">
<h2>
Tired of checking for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/AllBloggerTricks" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOEQf-UVsXjgXMAoTIN7HE-oAZikp_tXNFL5NdP0gZEZH85_t6J2Xrcgr9UMxxYwIhEoGz55KBZeHXdB353vN2rIMl1MH5X7I48gzIKOcEd0Lpp6e00yXl-n_DPSwM6mg89Gdeu2xF_-y-/s1600/nl-facebook@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FAllBloggerTricks&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
  </div>
<div class="social twitter">
<a href="https://twitter.com/AllBloggerTrick" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj30Yhwbc01vQK-bRjxSN2aG9RKecKsttfmDgMZh4Y3LHpycNeUyB6AIJe7P40Ilv0x8MQnXKeo_ek07AH7cJoA6UOS00GOLus4sw0SY2u2b3pwoF_m_RdKjlMltPFOoR-HU9FoItCXuqC/s1600/nl-twitter@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=AllBloggerTrick&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>
  </div>
<div class="newsletter-form">
<fieldset>
<h2>
       Get all posts directly in your mail.
      </h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
          <input name="uri" type="hidden" value="AllBloggerTricks" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>

Editing the Code


After adding the above given code, you need to make some necessary changes for changing the user IDs. In the above code I have made 6 words in bold and blue, you need to change them as required.
The first two are for Facebook Username, the third and fourth for Twitter handle and the last two are for Feedburner ID. After making these changes you just need to Save your Template.

Thats it, the clean social subscribe widget on your blogger blog is live and ready to attract your users. Cheers!
Read more...

Elegant Popular Posts Widget Tweak

0 komentar

Popular Posts Blogger
Ever wanted a really elegant and beautiful popular posts widget for your blogger blog? If yes, then you have landed on the right place. Today I am back with yet another unique and amazingly looking popular posts widget customization.
I had my exams which ended just a couple of days before so I was thinking of something substantial to post. A image of this came to my mind and its here for all of you to use.
   So the widget I am going to add today looks quite different from the rest of the collection. You can see the demo of the customized Popular posts widget by clicking the button below.


Once you have seen the demo, to add the Popular posts customized widget follow the given steps.

Adding the Popular Posts Widget


Firstly go to  Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.
Remember to check the Item Snippet and Image Thumbnail option.

Adding the CSS


Now we have to add the CSS of the Popular Posts customized widget, for this go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>
/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content { position: relative; }

Also note that you have removed all the previous Popular Posts CSS codes (if any) before adding this one or the result will be the combination of the two.

Adding the JS


Usually Popular posts widget do not require any JavaScript, but this one needs in order to resize the popular posts image and cut short the snippet.
To add the JS, search for </body> and paste the below given code just above it.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

After adding the code save the template. PS. Remove the code in red if you already have it in your template.

You are done now. Now you and your visitors can see this elegant Popular posts widget on your blogger blog. Also it is my earnest request to you that please do not remove the comments added in the codes. They will not be displayed in your blog. Only the person viewing the code can see this.
Read more...

Rabu, 29 Januari 2014

Widget Sharing Is Caring

0 komentar

Cara Memasang Widget Sharing Is Caring Di Bawah Posting Blog - Kali ini saya akan membahas Tutorial Blog yaitu Cara Memasang Widget Sharing Is Caring Di Bawah Posting Blog, widget ini tidak jauh berbeda dengan yang lainnya yang fungsinya nya untuk share artikel  kamu ke jejaring social seperti Facebook,Twitter dan masih banyak lainnya, dan widget ini diletakan teaptnya di bawah posting blog


Berikut Cara Memasang Widget Sharing Is Caring Di Bawah Posting Blog :

1. Login ke Blog kamu.
2. Pilih EDIT HTML, Jangan Lupa Centang Expand Widget Template Nya.
3. Cari kode <data:post.body/> setelah ketemuletakan kode dibawah ini tepat dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
img{border:0;}
#wrapper{width:488px; height:110px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKmyOOefUQCs1F9Ie_F2jFyJh5Cz8rLtJZRQ_6Lwe8ZbtropMfO4Px72sjzlhWTBwgo4VRO-13n28uEza0CEh3OKiksPOZuSQNLERfwV_G6PCuBATnmJ2lG1T-MUCECfA_n_fnBv9Fv_w/s1600/sharing+is+caring+hearts.jpg); position:relative; background-repeat:no-repeat; background-color:transparent;}
#wrapper ul{position:absolute; width:600px; top:42px; left:3px; list-style-type:none;}
#wrapper li{float:left;}
</style>
<div id='wrapper'>
<ul>
<li>
<!-- Facebook -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Facebook' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtKbEak8dRVXxczBvjtfDUsTCpiChu5ppx7tjjzbolA41d66xF40whqf8veDudBD_bLzNafF76_q5fgjJHVxnPuEJGJKgHhIzNvuiF5Z9Miq_HcN3JmE4JVu4I19yMoeXqdW7xNQCgHTI/s1600/facebook.png' width='48'/></a>
</li>
<li>
<!-- Digg -->
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ9wGZ9wj_Aplm2ctLV-3lhGpgd8Bc5V0NrGSK-FMgGVsNh_JySttsoMpnsvOkzyv-Oqr70tIFQHe7QfNpuJ7mdJFe7TiuAzSkZbSRX6h2rkVPRegWuAYqu0ZZi012QJ-Wz9ysiBDtzPE/s1600/digg.png' width='48'/></a>
</li>
<li>
<!-- Stumbleupon -->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwJ6VyHR4g6z72eQ6e8lcXxMPyf04J2EfcFIbTB9nTOpVrVnBpNTC1lLUOeMH0UdPOf4FCRS6Hma6oH1HR9Zo3DuSTqo0JWKmLCRJBSarddsNBhPE9iJyzPEjfJZy0OJXPUAM92Si4LxQ/s1600/stumble.png' width='48'/></a>
</li>
<li>
<!-- Twitthis -->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Tweet This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkwi2eUpJdzPNYyQd-t1rJ4Eq6USX_MPUXQ41f6QRvvf2eYPOcyV_ap1WQb-B2KAs1Bra1VleHqse9jd07DhcipeVGXq9qgttRXslSykZ7D26z7rrSJRykuDsTTkHDAwDiujQk4XO41I/s1600/twitter.png' width='48'/></a>
</li>
<li>
<!-- Delicious -->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Save Tis Post To Delicious' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4uTwj0SH8-CPneijyyaq0kgCwShTGLHEOYsxKZ9CYOY4HkQEfGMLFMoAKVMW-DncQhR49zD06TkEltDn0Y2ozuvXIyo4tG0ZrY6CYrsnzPRwhSUsHXH0UMzmZ6DWyMkCaZSznh6V-Asc/s1600/delicious.png' width='48'/></a>
</li><li>
<!-- Design Float -->
<a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Float This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIfKcYNT0ESoBNFGY8ICg2q1SrrhwufADKV4-KI5KF_VtN2vPmyxXnT0q3Ho_7Pnqp_O_nmTUTmQkstJ7IdpaL2tzg-gi_Lhz814o1CTzbG9tjZO50TYPT3yhtAUH6XKKkVhZZXOqeK8/s1600/designfloat.png' width='48'/></a>
</li><li>
<!-- Reddit -->
<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Reddit' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBJMgL0psSS_keScdWWQBrsl82Huc38ja30ENRgHSuN5VIBJIfaxI6GQ4E-pO2po-kh-nyClktXHaK3PaliYFJwYXu7sMZEhRj2Gyq5dkxzLgSzPar1YHYNWSzmBNMlsrx4SVIYtnRbk/s1600/reddit.png' width='48'/></a>
</li><li>
<!-- Technorati -->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Bookmark On Technorati' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNikcBd4ufBu5TUUa2lPkRvmhwD941Ht6BPU-0bp5Hd4vhljFmzfaa2iVfPtM3gHxE0-uUaoCKaY24rTN15hd4xFxb7dGoGrOAjVQOUWHLx2Yf7TFlTk_mt0MXjfQTLMFm1nlLPVEgoA/s1600/technorati.png' width='48'/></a>
</li></ul></div>
</b:if>
Simpan Template dan Lihat Hasilnya.
Read more...

Widget Share Keren

0 komentar

Cara Membuat Widget Share Keren Untuk Blogger, widget share kali ini sangat special karena saat pointer di arahkan pada icon secara otomatis icon tersebut akan berganti. Untuk lebih jelasnya lagi silahkan lihat gambar di disamping ini.

Cara Membuat :
1. Login ke Blog kamu.
2. Add Gadget, pilih HTML JavaScript.
3. Copy kode di bawah ini.
<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="YOUR FACEBOOK PAGE" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER PAGE" rel='external nofollow' target='_blank' ></a>
</div>
Read more...

Widget Sharing is Caring

0 komentar


Tombol Sharing is Caring
Cara Memasang Widget Sharing is Caring Di Bawah Postingan Blog-Memasang widget sharing atau membuat sosial bookmark di blog menajdi keharusan di era social media sekarang ini. Dengan tombol sharing tersebut pengunjung dapat men-share artikel blog tersebut ke akun facebook, twitter, google+ dan lainya. Pada postingan sebelumnya Cara Design Blog sudah memberika tutorial blogger cara membuat tombol share button di bawah postingan blog.

Pada kesempatan ini saya akan berikan tips blog cara membuat widget sharing is Caring di bawah postingan blog.
Apa fungsi widget sharing is caring?
Funginya sama seperti share button lainya, yaitu untuk memudahkan pengunjun untuk sharing atau berbagi artikel blog ke sosial media. Namun tampilan widget ini lebih cantik.



Bagaimana cara memasang widget sharing is caring?

Silahkan ikuti tips blogger berikut ini:

1. Login Dasbor Blog.
2. Template > EDIT HTML > Centang Expand Widget Template.
3. Cari kode <data:post.body/>

Biar lebih mudah mencari pake CTR+F

4. Letakan kode berikut tepat dibawah <data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='http://blazerracing.blogspot.com/'><img alt='Blazer Blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0S9pp7if1j-c1ZtHgcsXneziPPTp1a8d0G0loRWipROFL1PjQxt77EowcxL8JwIrlQTxElrF6PjkKAjVXisCLgDtdtxqZlOCd3ZkOoqIqaVCL9FKw-KH4PswSo1R58m-1_jYcm_cTTnq0/s1600/best+blogger+tips.png'/></a><style>
img{border:0;}
#wrapper{width:488px; height:110px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKmyOOefUQCs1F9Ie_F2jFyJh5Cz8rLtJZRQ_6Lwe8ZbtropMfO4Px72sjzlhWTBwgo4VRO-13n28uEza0CEh3OKiksPOZuSQNLERfwV_G6PCuBATnmJ2lG1T-MUCECfA_n_fnBv9Fv_w/s1600/sharing+is+caring+hearts.jpg); position:relative; background-repeat:no-repeat; background-color:transparent;}
#wrapper ul{position:absolute; width:600px; top:42px; left:3px; list-style-type:none;}
#wrapper li{float:left;}
</style>
<div id='wrapper'>
<ul>
<li>
<!-- Facebook -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Facebook' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtKbEak8dRVXxczBvjtfDUsTCpiChu5ppx7tjjzbolA41d66xF40whqf8veDudBD_bLzNafF76_q5fgjJHVxnPuEJGJKgHhIzNvuiF5Z9Miq_HcN3JmE4JVu4I19yMoeXqdW7xNQCgHTI/s1600/facebook.png' width='48'/></a>
</li>
<li>
<!-- Digg -->
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ9wGZ9wj_Aplm2ctLV-3lhGpgd8Bc5V0NrGSK-FMgGVsNh_JySttsoMpnsvOkzyv-Oqr70tIFQHe7QfNpuJ7mdJFe7TiuAzSkZbSRX6h2rkVPRegWuAYqu0ZZi012QJ-Wz9ysiBDtzPE/s1600/digg.png' width='48'/></a>
</li>
<li>
<!-- Stumbleupon -->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwJ6VyHR4g6z72eQ6e8lcXxMPyf04J2EfcFIbTB9nTOpVrVnBpNTC1lLUOeMH0UdPOf4FCRS6Hma6oH1HR9Zo3DuSTqo0JWKmLCRJBSarddsNBhPE9iJyzPEjfJZy0OJXPUAM92Si4LxQ/s1600/stumble.png' width='48'/></a>
</li>
<li>
<!-- Twitthis -->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Tweet This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkwi2eUpJdzPNYyQd-t1rJ4Eq6USX_MPUXQ41f6QRvvf2eYPOcyV_ap1WQb-B2KAs1Bra1VleHqse9jd07DhcipeVGXq9qgttRXslSykZ7D26z7rrSJRykuDsTTkHDAwDiujQk4XO41I/s1600/twitter.png' width='48'/></a>
</li>
<li>
<!-- Delicious -->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Save Tis Post To Delicious' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4uTwj0SH8-CPneijyyaq0kgCwShTGLHEOYsxKZ9CYOY4HkQEfGMLFMoAKVMW-DncQhR49zD06TkEltDn0Y2ozuvXIyo4tG0ZrY6CYrsnzPRwhSUsHXH0UMzmZ6DWyMkCaZSznh6V-Asc/s1600/delicious.png' width='48'/></a>
</li><li>
<!-- Design Float -->
<a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Float This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIfKcYNT0ESoBNFGY8ICg2q1SrrhwufADKV4-KI5KF_VtN2vPmyxXnT0q3Ho_7Pnqp_O_nmTUTmQkstJ7IdpaL2tzg-gi_Lhz814o1CTzbG9tjZO50TYPT3yhtAUH6XKKkVhZZXOqeK8/s1600/designfloat.png' width='48'/></a>
</li><li>
<!-- Reddit -->
<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Reddit' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBJMgL0psSS_keScdWWQBrsl82Huc38ja30ENRgHSuN5VIBJIfaxI6GQ4E-pO2po-kh-nyClktXHaK3PaliYFJwYXu7sMZEhRj2Gyq5dkxzLgSzPar1YHYNWSzmBNMlsrx4SVIYtnRbk/s1600/reddit.png' width='48'/></a>
</li><li>
<!-- Technorati -->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Bookmark On Technorati' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNikcBd4ufBu5TUUa2lPkRvmhwD941Ht6BPU-0bp5Hd4vhljFmzfaa2iVfPtM3gHxE0-uUaoCKaY24rTN15hd4xFxb7dGoGrOAjVQOUWHLx2Yf7TFlTk_mt0MXjfQTLMFm1nlLPVEgoA/s1600/technorati.png' width='48'/></a>
</li></ul></div>
</b:if>

5. Klik Preview.
Untuk melihat apa masih ada galat atau kesalahan. Bila ada kesalahan silahkan diulangi lagi dan pastikan kode diletakan sesuai petunjuk. Jika tidak ada kesalahan lanjutkan ke langkah berikutnya.

6. Save Template.
Sekarang widget sharing is caring di blog kamu sudah siap.

Read more...

Widget Subcription + Social Sharing + Fans Box

0 komentar

Widget ini juga tidak terlalu memberatkan blog kok. Sizenya cuma 10kb :D ! bagaimana ? sangat cantik dan ringan bukan ? saya saja mau pasang widget yang keren ini hehe. Langsung kamu lihat caranya di bawah ini ok.
1. Login ke Blogger.com
2. Klik Template --> Kemudian kamu Back Up template kamu terlebih dahulu
3. Masih dibagian Template, sekarang kamu klik Edit HTML --> Lanjutkan --> Centang Expand Template Widget --> Cari kode <data:post.body/>. Nantinya kamu akan menemukan bebrapa kode <data:post.body/>, maka kamu pilih yang pertama atau yang kedua. Setelah itu kamu salin kode di bawah ini :
<!--No Ordinary Social Subscription Widget--> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<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;'>Get Free Updates in your Inbox</div> 
<div style='margin: 10px 0 0 6px;'> 
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' 
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Masukkan-ID-Feedburner-Kamu&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' 
style='margin: 0pt;' target='popupwindow'> 
<input name='uri' type='hidden' value='Masukkan-ID-Feedburner-Kamu' /> 
<input name='loc' type='hidden' value='en_US' /> 
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' 
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 
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='Masukkan-URL-FACEBOOK-Kamu' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-zRAQTMkwCsb-idB3up4fxcSBLJkK4e8hyphenhyphenxvbrvAGv8F2d_FgXZrEhKcdjH1_xkTV9Lm11ZXNF17tD27MmRuE8F8jPWAqkI-2S25-r7evNwajVPV2hMjepP87gXSIKisGOM5YQ2o6ac/s32/facebook500.png' alt='facebook'/></a> 
<a href='Masukkan-URL-TWITTER-Kamu' rel='nofollow' target='_blank' 
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndF5SJGl4UJ3pPZvnGgWF4RE1Y8335H3T0MPJ7BGHiD7prEnbYDjjWZU0oPdqejSXjjK0NAloEvV-z6kkznPyLPH4t4d3Ac3tdbQX4Zity3L0vNpvNv_irV713eKeGB0nneuqU8WIRqA/s32/twitter.png' alt='twitter'/></a> 
<a href='Masukkan-URL-GOOGLE-PLUS-Kamu' rel='nofollow' target='_blank' 
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiokrp06qpJlkkiB8Eop8j_87gXtcMvMjBeB9CLZ1kxfMPatT01JnVPNhsa_ngH1JIi8u2-XcT_n59vQiehyTClO6btuLX0KatNgVE4ItldnTKBKndraQu4bKQSk-wujtGPuUQ5bWeWbpo/s32/googleplus-revised.png' alt='gplus'/></a> 
<a href='Masukkan-URL-PINTEREST-Kamu' rel='nofollow' target='_blank' 
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglt_gCVNqsve1SgCiW_3DX1nxMw5nGnMLiSDVGuJ8jnKNXZdEelcpPidsBXXn8u1_tzEnAB7Ahvc8gkOfnDxACRyqpgfprHj0TtGkEaC2L1V1d0UWuUKdYX_1VLSfpTHuRkQNancaBpLU/s32/pinterest.png' alt='pinterest'/></a> 
<a href='Masukkan-URL-RSS/FEED-Kamu' rel='nofollow' target='_blank' 
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJ-6zgkhl8DcLl7B1KUIpG5-OCUQ4mVXjaMuLOUJqhx5JbOgLbYonVDnsAUgjG-tMBI9RuCe1XvK0APBLX_t0p0YK1Vqg4UDDUTzY-Q5dOEbF_8-_G6FFnYXKw1KBB-mCNrPQq54ot44/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-count='horizontal'  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%2Fwww.facebook.com%2Farieadie&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' 
style='border:none; overflow:hidden; width:570px; height:180px;' /> 
</div> 
</div> 
</b:if> 

<!--No Ordinary Social Subscription Widget-->

NOTE : Ganti www.facebook.com%2Farieadie dengan nama URL Fanpage Facebook kamu, %2F adalah kode dari garis miring, contohnya, yang tadinya www.facebook.com/arieadie kemudian dibuah menjadi www.facebook.com%2Farieadie

4. Oh iya, kalau kamu tidak mau ribet, widget ini bisa digunakan sebagai widget biasa dengan cara :
Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan masukkan kode JS diatas.
5. Klik simpan jika sudah selesai. Selamat mencoba...

Read more...

 

Copyright © 2013. wong jowo - All Rights Reserved
Distributed By Blogger