url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHDcYLbGtQ1CGm_xeGI7bYSNR-YOQqqQGJVVvL3Kcd7HBABUa7TD_MsvG2CveGVo0qI_5021nFix5tOjDiOjzoKT6KoKIu-BRwtzrlEskkuXLKzZ4on5CvWq-WuWt8-8JLmeD6rKkvnqJ4/s1600/bg_body.gif)

and <a href='http://www.blogtemplate4u.com' style='color: #CB4E1F'>Free Wordpress Themes</a>

Berikut adalah contoh penulisan font-family:
selector {font-family: family-name, generic-family;}
Contoh real untuk pengaturan font selector heading (h1) di dalam CSS:
h1 {font-family: ”Trebuchet MS”, Helvetica, sans-serif;}
family-name
family-name adalah nama dari kumpulan beberapa font yang sejenis, seperti contoh Trebuchet MS Normal, Trebuchet MS Bold, Trebuchet MS Italic, Trebuchet MS Bold Italic, jadi family-name untuk font-font tersebut adalah Trebuchet MS.
Di dalam “family-name” kita bisa memasukkan lebih dari satu pilihan family-name, seperti contoh diatas ada “Trebuchet MS” dan “Helvetica” kemudian pada urutan terakhir ada “sans-serif” ini yang disebut dengan generic-family. Dianjurkan untuk selalu memasukkan generic-family pada setiap akhir dari properti font-family.
Untuk family-name yang menggunakan spasi atau lebih dari satu kata harus ditulis didalam tanda petik, ”Trebuchet MS”.
Ketika browser akan menampilkan konten yang berupa teks, font yang digunakan adalah yang berada di urutan pertama dari family-name, sebagai contoh diatas adalah Trebuchet MS jika font-font ini tidak ditemukan maka browser akan mencoba mencari font-font jenis Helvetica jika font-font ini tidak ditemukan juga maka browser akan menggunakan standar font-nya masing-masing yang bertipe sans-serif sebagai alternatif terakhir.
Jadi untuk menghindari hal tersebut diatas maka dianjurkan bagi para pembuat website atau webmasters agar menggunakan font standar yang kemungkinan besar sudah tersedia di setiap komputer pengguna, klik link berikut ini untuk melihat list dari font-family standar.
generic-family
Terdiri dari 5 jenis type yaitu: serif, sans-serif, cursive, fantasy dan monospace.
Untuk lebih jelasnya perhatikan contoh berikut:

Tulisan dengan type serif
Tulisan dengan type sans-serif
Tulisan dengan type cursive
Tulisan dengan type fantasy
Tulisan dengan type monospace

Dari hasil percobaan di 5 web browser untuk font type “fantasy” hanya Internet Explorer yang benar-benar berfantasi.

Tipe Serif biasa digunakan untuk kebutuhan printer karena bentuknya yang lebih lembut dan halus, tipe sans-serif cocok digunakan untuk website karena lebih tebal dan jelas sehingga tulisan akan lebih mudah terbaca. Tipe cursive dan fantasy bisa digunakan untuk gambar maupun judul website dan tipe monospace adalah untuk kode dan membuat efek mesin ketik.
Font Families standar yang sering digunakan.

font-family: "Arial Black", Gadget, sans-serif;

Preview: “Arial Black”, Gadget, sans-serif;

font-family: Arial, Helvetica, sans-serif;

Preview: Arial, Helvetica, sans-serif;

font-family: "Andale Mono", "Monotype.com", monospace;

Preview: “Andale Mono”, “Monotype.com”, monospace;

font-family: "Bookman Old Style", serif;

Preview: “Bookman Old Style”, serif;

font-family: "Comic Sans MS", cursive;

Preview: “Comic Sans MS”, cursive;

font-family: "Courier New", Courier, monospace;

Preview: “Courier New”, Courier, monospace;

font-family: Courier, monospace;

Preview: Courier, monospace;

font-family: fixedsys, monospace;

Preview: fixedsys, monospace;

font-family: Georgia, serif;

Preview: Georgia, serif;

font-family: Garamond, serif;

Preview: Garamond, serif;

font-family: Impact, Charcoal, sans-serif;

Preview: Impact, Charcoal, sans-serif;

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

Preview: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;

font-family: "Lucida Console", Monaco, monospace;

Preview: “Lucida Console”, Monaco, monospace;

font-family: "MS Gothic", monospace;

Preview: “MS Gothic”, monospace;

font-family: "MS Sans Serif", Geneva, sans-serif;

Preview: “MS Sans Serif”, Geneva, sans-serif;

font-family: "MS Serif", "New York", sans-serif;

Preview: “MS Serif”, “New York”, sans-serif;

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

Preview: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;

font-family: Symbol, sans-serif;

Preview: Symbol, sans-serif;

font-family: System, sans-serif;

Preview: System, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

Preview: Tahoma, Geneva, sans-serif;

font-family: Techno, Impact, sans-serif;

Preview: Techno, Impact, sans-serif;

font-family: "Times New Roman", Times, serif;

Preview: “Times New Roman”, Times, serif;

font-family: "Trebuchet MS", Helvetica, sans-serif;

Preview: “Trebuchet MS”, Helvetica, sans-serif;

font-family: Verdana, Geneva, sans-serif;

Preview: Verdana, Geneva, sans-serif;

font-family: Wingdings, "Zapf Dingbats", sans-serif;

Preview: Wingdings, “Zapf Dingbats”, sans-serif;

font-family: Webdings, sans-serif;

Preview: Webdings, sans-serif;

Contoh Penggunaan di Kode HTML :

<div style="background:#555;color;:blue;font-family:Cursive;font-weight:bold;font-size:27px;padding:5px;float:left; .... dst;"> Teks dan isi yang lain </div>

Tabel Font-Family :

KODE :	Bentuk Font :
font-family:Arial;	Arial
font-family:Arial Narrow;	Arial Narrow
font-family:Arial Unicode MS;	Arial Unicode MS
font-family:Cataneo BT;	Cataneo BT
font-family:Comic Sans MS;	Comic Sans MS
font-family: Courier;	Courier
font-family:Courier New;	Courier New
font-family:Cursive;	Cursive
font-family:Dauphin;	Dauphin
font-family:Georgia;	Georgia
font-family:Helvetica;	Helvetica
font-family:Helvetica Neue;	Helvetica Neue
font-family:Lucida;	Lucida
font-family:Lucida Console;	Lucida Console
font-family:Lucida Sans;	Lucida Sans
font-family:Monospace;	Monospace
font-family:Monotype Corsiva;	Monotype Corsiva
font-family: Sans serif;	Sans serif
font-family:Sans-serif;	Sans-serif
font-family:MS Sans serif;	MS Sans serif
font-family:Square721 BT;	Square721 BT
font-family:Tahoma;	Tahoma
font-family:Times New Roman;	Times New Roman
font-family:Trebuchet;	Trebuchet
font-family:Trebuchet MS;	Trebuchet MS
font-family:Frutiger;	Frutiger
font-family:Droid Serif;	Droid Serif
font-family:Geneva;	Geneva
font-family:Fantasy;	Fantasy
font-family:Palatino Linotype;	Palatino Linotype
font-family:Impact;	Impact
font-family:Calisto MT;	Calisto MT

Cara Membuat Recent Post / Artikel Terbaru Bergerak Pada Blogspot:
1.   Login ke Dasbor blogspot.
2.  Pilih Rancangan
3.  Klik Tambah Gadget pada bagian blog yang ingin di tambah Recent Post.
4.  Kemudian Pilih HTML/JavaScript
5  Isi Judul Sesuka anda, Copy dan letakkan kode dibawah ini kedalamnya

<center><style type=”text/css”>
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”>
</script>
<script src=”http://theplick.googlecode.com/files/newsticker-plick.js” type=”text/javascript”>
</script>
<script type=”text/javascript”>
var speed = 1000;
var pause = 2500;
$ (document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id=”rp_plus_img”><script>
var numposts = 20;
var numchars = 0;
</script> <script src=”http://capoenk-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt”>
</script> </ul>
</center>

6.  Ganti tulisan yang berwarna merah dengan nama blog yang sobat gunakan.
7. Simpan dan Lihat hasilnya.

 

1. Login ke Blogger.

2. Pilih Template.

3. Pilih Edit HTML.

4. Centang box 'Expand Template Widget'.

5. Cari kode ]]></b:skin> menggunakan CTRL+F, lalu letakkan kode di bawah ini tepat diatasnya.

.social-buttons {

position: fixed;

top: 130px;

width: 45px;

z-index: 9999;

}

.button-left {

left: 0;

}

.button-right {

right: 0;

}

.social-buttons #twitter-btn .social-icon,

.social-buttons #facebook-btn .social-icon,

.social-buttons #google-btn .social-icon,

.social-buttons #rss-btn .social-icon,

.social-buttons #pinterest-btn .social-icon,

.social-buttons #youtube-btn .social-icon {

background-color: #33353B;

background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);

}

.button-left #facebook-btn span {

background-position: right 10px;

}

.button-left #twitter-btn span {

background-position: right -35px;

}

.button-left #google-btn span {

background-position: right -127px;

}

.button-left #rss-btn span {

background-position: right -80px;

}

.button-left #pinterest-btn span {

background-position: 11px -177px;

}

.button-left #youtube-btn span {

background-position: 11px -223px;

}

.button-right #facebook-btn span {

background-position: 12px 10px;

}

.button-right #twitter-btn span {

background-position: 11px -35px;

}

.button-right #google-btn span {

background-position: 10px -127px;

}

.button-right #rss-btn span {

background-position: 11px -80px;

}

.button-right #pinterest-btn span {

background-position: 11px -177px;

}

.button-right #youtube-btn span {

background-position: 11px -223px;

}

.social-buttons #facebook-btn:hover .social-icon {

background-color: #3B5998;

}

.social-buttons #twitter-btn:hover .social-icon {

background-color: #62BDB2;

}

.social-buttons #google-btn:hover .social-icon {

background-color: #DB4A39;

}

.social-buttons #rss-btn:hover .social-icon {

background-color: #FF8B0F;

}

.social-buttons #pinterest-btn:hover .social-icon {

background-color: #D43638;

}

.social-buttons #youtube-btn:hover .social-icon {

background-color: #C4302B;

}

.social-buttons a:hover .social-text {

display: block;

}

.button-left .social-icon {

-moz-transition: background-color 0.4s ease-in 0s;

-webkit-transition: background-color 0.4s ease-in 0s;

background-repeat: no-repeat;

display: block;

float: left;

height: 43px;

margin-bottom: 2px;

width: 43px;

}

.button-left .social-text {

display: none;

float: right;

font-size: 1em;

font-weight: bold;

margin: 11px 40px 11px 0px;

white-space: nowrap;

}

.button-right .social-icon {

-moz-transition: background-color 0.4s ease-in 0s;

-webkit-transition: background-color 0.4s ease-in 0s;

background-repeat: no-repeat;

display: block;

float: right;

height: 43px;

margin-bottom: 2px;

width: 43px;

}

.button-right .social-text {

display: none;

float: left;

font-size: 80%;

font-weight: bold;

margin: 11px 0 11px 40px;

white-space: nowrap;

}

.social-buttons .social-text {

color: #FFFFFF;

}

6. Selanjutnya, cari kode </head>, lalu letakkan kode di bawah ini tepat diatasnya. 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

<script>

    $(window).load(function(){

        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){

            $(this).stop();

            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});  

        });

        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){

            $(this).stop();

            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});

        });

    });

</script>

Keterangan:  Jika pada template anda sudah terpasang Javascript seperti kode berwarna biru diatas, dihapus saja.

7. Masih di Edit HTML, cari kode </body>, letakkan kode di bawah ini tepat diatasnya. 

<div class='social-buttons button-right hidden-phone hidden-tablet'>

<a class='itemsocial' href='https://www.facebook.com/Facebook ID' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>

<a class='itemsocial' href='https://twitter.com/Twitter ID' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>

<a class='itemsocial' href='https://plus.google.com/Google+ ID' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>

<a class='itemsocial' href='http://pinterest.com/Pinterest ID' id='pinterest-btn' target='_blank'><span class='social-icon'>

<span class='social-text'>Follow via Pinterest</span></span></a>

<a class='itemsocial' href='https://www.youtube.com/user/Youtube ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>

<a class='itemsocial' href='http://feeds.feedburner.com/Feedburner ID' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>

</div>

Keterangan: Ganti kode yang berwarna merah dengan ID jejaring social anda (ex. http://twitter.com/arieadiecorps).

6. Klik 'save template', dan selesai.

Tambahkan Push Button Media Sosial Untuk Blogger / Blog

1. Masuk ke akun blogger dan klik drop down.
2. Sekarang pilih "Layout".
3. Klik Tambah Gadget dan pilih 'HTML / Javascript'
4. Paste di bawah salah satu kode di bawah ini.

<style>
#sub_widget {
margin-bottom: 30px;
max-width: 300px;
background: #ddd;
max-height: 400px;
border: 4px ridge green;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
margin-top: 20px;}
#sbsr {height:70px;}
#bts {margin: 9px 0 0 15px;;float:center;}
#bts img {border-style: none;}
.gap {margin: auto 2px;}
#pra {float:left; margin:-6px 0 0px 20px;color:#000;font-size:14px;font-family:arial;font-weight:bold;}
.newsletter {height:35px;float:left;margin: 10px 0 60px 0;}
.button {
margin-top: 5px;
 color: #fff;
width:100px;
font-family:arial;
font-weight:bold;
font-size:16px;
text-margin-left:-10px;
background: green;
}
.email {width:250px;
height:25px;
font-size:12px;
text-margin:0 auto;
pading:10px auto;
background:white}
</style>
<div id="sub_widget">
<center><img id="sbsr" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiydjQYligmwCSZBxZD9PqeK_6eJFxDuvnCKuaPuHBpq8rqBj7_ftOpdEXuRdiTr8kEbC4aimYsV5JtKIDqOioOgqrsnpyJ9CkqTN2vcrzmgOXb3tp9zOMQfkRrKx5-W_rjW1lWCxra7iX-/s734/rss-subscribe.png"/></center>
<center><div class="newsletter">
<form action="http://feedburner.google.com/fb/a/mailverify" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=capoenk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" name="email" onblur="if (this.value == '') {this.value = 'E-mail';}" onfocus="if (this.value == 'E-mail') {this.value = '';}" type="text" value="Get all the latest updates daily in your inbox.." />
<input name="uri" type="hidden" value="capoenk" />
<input name="title" type="hidden" value="capoenk" />
<input name="loc" type="hidden" value="en_IN" />
<input class="button" name="submit" type="submit" value="Submit" />
</form>
</div>
</center>
<center>
<div id="bts">
<a rel="nofollow" class="gap" href="http://feeds.feedburner.com/capoenk" target="_blank"><img  onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIyQZua_U5GHqelOtvCTShFJLbJJxW7CM7ewtYTk0wskYpGY-znjTYtbcjAKEXrFj3Y-ubBfRKplq2uN_3lZKI0zVkMzWedyxwaFmJonlvCVVCb-ywimGdr5IDk8_e-J7ahNCXcBbZt3CJ/s1600/Rss.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBR1gw6xPc5spD7rnIyAkeU_127RgVktohS6WufDMuAJgPuglqhjjN7YWzj-lq-QgwA8rpXr0jRIbdMwGZwoUZBFtJrLKUJtvUzkLbM-nGXOy-hnmXGRt3rHlk00DtOYpOre8QVCGHeFIJ/s1600/Rss_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIyQZua_U5GHqelOtvCTShFJLbJJxW7CM7ewtYTk0wskYpGY-znjTYtbcjAKEXrFj3Y-ubBfRKplq2uN_3lZKI0zVkMzWedyxwaFmJonlvCVVCb-ywimGdr5IDk8_e-J7ahNCXcBbZt3CJ/s1600/Rss.png" title="Subscribe Via Rss" alt="RSS" /></a>
<a rel="nofollow" class="gap" href="https://plus.google.com/102921613865056852662/" target="_blank"><img  onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxXaobmWPvnpk7RlLORalMCsuaHHMobawNlprSnOzdXl0_diCb7ezCbpe63f8vZ9veYQq-2EPnkOYsc52c0b6nVDswJF3bgwUvQBQPGgUjY77teZFJu-eXqUsTm03HVYRQrg8Uh9iRLZtV/s1600/Google.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzMXbO0awHnWtoanHUlNRop5tIT4oYZ_qld29grebgsr2gBI8CpArMg894YaLMwhTBbbFrr22cmiZ-JajpkebKJVrTRmEFwzwS8ikzCQ19uSR_ImmOgHuuD01_9fTsQFTVYDmvF4Kq6Xo9/s1600/Google_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxXaobmWPvnpk7RlLORalMCsuaHHMobawNlprSnOzdXl0_diCb7ezCbpe63f8vZ9veYQq-2EPnkOYsc52c0b6nVDswJF3bgwUvQBQPGgUjY77teZFJu-eXqUsTm03HVYRQrg8Uh9iRLZtV/s1600/Google.png" title="Follow Us On Google plus" alt="Google" /></a></br>
<a rel="nofollow" class="gap" href="http://pinterest.com/arieadie/" target="_blank"><img  onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpD7xXyX6O4E6kYCspizWJ9Zq1eXMciSOrGQAiAN1C7Ax5yIjeH0LQqy25XqA3Bnb01hlFv36KIC75SLdely47XJwz-DIx5vpHwCsNkQIW9Rs_Wi-nZHaopTs-eMS6kcSrIOa5eayQhNfG/s1600/pinterst.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7wC1qPGfqxFz-0yzZphPUNz0PBavQ3ackPNr4C-0A-O59hXzTHKjPlVc62cnNjCWYtap5JQqA0Hsuo8HPc1d5XcvQ81u91WLqbWGnsLDtiKTc-pdj5MuU9hePnfGjiyBjSNFwTVigp39/s1600/pintrest_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpD7xXyX6O4E6kYCspizWJ9Zq1eXMciSOrGQAiAN1C7Ax5yIjeH0LQqy25XqA3Bnb01hlFv36KIC75SLdely47XJwz-DIx5vpHwCsNkQIW9Rs_Wi-nZHaopTs-eMS6kcSrIOa5eayQhNfG/s1600/pinterst.png" title="Follow Us On Pinterest" alt="pinterest" /></a>
<a rel="nofollow" class="gap" href="http://www.facebook.com/arieadie30 " target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtE7In9iYNXqZ3FfuyjETpmqStcirtK8IUVeMppzcqTum4pNgzSWhVi_JNDmzqM0tZHe4m7-6NYMho9GfUGjAfwUnvbXme5XHflDEGA3m1o4uMEvlE_ULURdodQZuRiOrszgaoLcsTmXAQ/s1600/Facebook.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3QGwyRMWpV4ocvZVsrA3dpv3wiOhyphenhyphenmR96n363dqZg6A8WRCkxag9QQ3vdtdJQYmBQxT-06vK5TTTWU03mdtbO4-ryUfBOy8nJ-cmPIU70cwuzLigClLTT_wWYaGnh4aBvQg3h4eBP3g3o/s1600/Facebook_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtE7In9iYNXqZ3FfuyjETpmqStcirtK8IUVeMppzcqTum4pNgzSWhVi_JNDmzqM0tZHe4m7-6NYMho9GfUGjAfwUnvbXme5XHflDEGA3m1o4uMEvlE_ULURdodQZuRiOrszgaoLcsTmXAQ/s1600/Facebook.png" title="Like Us On Facebook" alt="Facebook" /></a>
<a rel="nofollow" class="gap" href="http://www.twitter.com/lindamarlina40" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZyIMNWw8CkOJjq1v6RCWYqhBqe_psPjCkVfyHE4q1bP7XdYVZsMVwDEMKNFPr80klZOwXZfo-sRrAUlRspvwwGYX71dE0_nFRe7Yk_Vda86V1hKa_BFsb_bMAHkAPPwOt-mxxxF9uSoH/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrN8Z_he8K1ONRd7GvfHtPDv8fOpifzhtdyfXsXlksehyTkGgEvZ_CVrj86L6b98UxsXLu62vYZIsvIG3_utUDCWkNV1P1drwfoFC4D10EmJ5HWsDax9Rn-ABj1UfisB_AsaAykZixEkF/s1600/Twitter_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZyIMNWw8CkOJjq1v6RCWYqhBqe_psPjCkVfyHE4q1bP7XdYVZsMVwDEMKNFPr80klZOwXZfo-sRrAUlRspvwwGYX71dE0_nFRe7Yk_Vda86V1hKa_BFsb_bMAHkAPPwOt-mxxxF9uSoH/s1600/Twitter.png" title="Follow Us On Twitter" alt="Twitter" /></a></div></center></div>

Membuat Perubahan ini

• Ganti capoenk dengan ID Feedburner
• Ganti arieadie30 dengan nama pengguna Facebook Anda
• Ganti lindamarlina40 dengan Nama Twitter
• Ganti arieadie dengan Username Pinterest 
• Ganti 102921613865056852662 dengan Nama Google Plus 
• Sekarang menyimpan HTML / Javascript '.
• Dan Anda selesai ...

1. Buka akun blogger Anda
2. Masuk ke menu Tata Letak >> Add gadget >> HTML/Javascript
3. Pastekan kode dibawah ini :

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivYJ4H7_iCpxTBkIHediNeaiS8VeULuno4S1VaUiA0Pz4rfcQr578plknR0TfaNqJGca0HlZStZH9Qdta3hKcDMkztI1qDyXswKZSxfQ24aYKTouL8aG8eyH4NLA6o2uxvvEaDbl37ia8/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZiu8Z-Pz1LrusWx8Jz8pEU8ZMA7W568zgxHlcX1_VVi6PmWu3ArqdoGb6HMhyphenhyphen9cXI1Vv9frpWsnxjVFmEEU9kImHkD0CwDZPRnDOA2wB4VI1Yg__r-4U-4UVVVdifwrRUcyozG6CeCYw/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://facebook.com/arieadie30"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE8UIaQVWDK7W05cKnL3nMuVVe4Pwcglo46sUJq9LLMkG89V_OEyX7kVguJo5UlQQZahUa-8-Rt00382z7zSgeJ9ZX8XS1Ap10sdcuAKZeb41dvDNEqhE1eXoLSsd2FJxJjapoId3RId0n/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/lindamarlina40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPLIhP3t8_lWiX2FsFay7tsExlq1cbAwitIY9WP5chZ5sXTG_OhwMHlYOCmHfgaFIxTVrkX0CLQt4pTFMJA9MwA7K4ZRqg8_-vD-lhW19OmCfFCwOvN3WGcPlyS3Tq-XnnX-qv3Cu1N2KQ/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/102921613865056852662"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJsXpB8YpV4Ba0K61N4bXjbUrI6CNYIG-8hSiKLGJi4PqsiyD6UgF2zzcgyKUnlDV-bv_B6lQs4LNeORGh-8wPfRIkhlWXr2T2cPCnU3S_-arCJpB3xHLu5fMY695B7DnNsOkQPLjrEHIu/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/capoenk"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi46P4K5NhRokYql9gGSAfoxRGEmKQgk4Jo05SG-wiwK15Wd2JltjxbDAW-fFT8sfriEQgA3p9hwBdL3SoOn_vXBnNmVXzV5td_aTsi2z-jkYZtt-gXzTzZp-UwjIso0Whk1TtbZ3iHl07a/s1600/Bloggertrix-Rss.png" /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=capoenk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="capoenk" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>

 Information  :

• 
  
• Ganti arieadie30 dengan nama pengguna facebook Anda
• Ganti lindamarlina40 dengan twitter Username
• Ganti 102921613865056852662 dengan GooglePlus
• Ganti capoenk dengan feedburner nama
• Ganti capoenk dengan Feedburner ID

     7. Kemudian Save HTML/Javascript'.

Pergi ke Blogger.com >> Situs Anda.

Klik Template >> Edit HTML.

Sekarang Anda baru masuk dalam Blogger HTML Editor tekan CTRL+F untuk mencari code ]]> </ b: skin>

Pastekan Kode dibawah ini di atas kode ]]> </ b: skin>

ul.social_TempatBlogging {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_TempatBlogging li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_TempatBlogging li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_TempatBlogging li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_TempatBlogging li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJx0lpkbWSs9dDBf_u6hJS9iFtzPH5S4QrWcijWxtMAtFvcIp9jPCVgiVmLB6Mwbbv6MabHxm15Jxfv6N8_C3uQhC-KeeS8grBCLJl4s8ygrYVLeIBvaqElMB9ocTFWb2iV1h82J-ni9M/s1600/TempatBlogging-facebook-icon.png);
}
ul.social_TempatBlogging li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpZjOCxOJsI9uFmXMxVFk7DGzKcp6yZhedAqX3ApWQlVE7ry5ydQGB5hxQ9Q9m9c1eA2VSlhU2y5DGimF9NRrVljAH5SAEUW2dk8tKjLB4Xy5gigA9OJrbqXIkuvsKISIPHBFQxVQzREve/s1600/TempatBlogging-twitter-icon.png);
}
ul.social_TempatBlogging li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiotvsg5c1D7oU7UelF1LUJbHsBjDYP_v2SIM56mgl3fAD_PVBWKhnsH6l5KGTVWoP2S_mXF_WljFt80fbbM8_BJAI2wUG77UAaT9We6LKumy_I9plDrHyaDlBsViE6CFzDKfbhJjxc8WCa/s1600/TempatBlogging-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpuZSXeOg4e2qAQQaiqumOGKxoWmn7hsC3f2Xc1hGQmt4WrYIu16MWMA0sQ2By344Sv7T1O83qESxVcYWzFzpWRG361-FdyFbb_gtQsDoWjGigiqgIt8WxkL360hc9o8_iesRTMwwhUTs0/s1600/TempatBlogging-Pinterest-icon.png);
}
ul.social_TempatBlogging li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwdLDeH3u6UzcxLzYom2sYW7g0GxPM7wC5W4tw7blFcxY3sD5-uJXo2YBMT5xDdfCv00nxaLsq7_vXL2ZuII8Rway0dyTp0PC2Vt2Ws1P7IYJxRUY0tVPW5tWcON8RWYrXWe-3_yCaUUE/s1600/TempatBlogging-StumbleUpon-icon.png);
}
ul.social_TempatBlogging li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Jw8ODGgBGhr-__Rpg_7oyXU9Vghm9sRE7bz0Yu8ZIzW9NwKbDrUGb7nnsYV_p1sHGxGlds5F-Xmxh9EPiXSW0VkENjLjyqnVSNAh4D0ZKtPhCfVDb3iBofZEaeKfVbGUPO6Vd6ujXIT5/s1600/TempatBlogging-Digg-icon.png);
}
ul.social_TempatBlogging li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdr4UljxFoiErtW9daJwd07zLxA8LB3AmMv4XqoZ4dnbphnrhpbd1ZXYzIDckKwAWFockcuLq2CP5U4AgL9s23P-OrHdZigJvCXN4RII9z2Y6jRIusOSm9Mbrlh-pF96lneLV8CSC1LX70/s1600/TempatBlogging-Linkedin-icon.png);
}
#animation_TempatBlogging:hover li {
opacity:0.2;
}
#animation_TempatBlogging li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_TempatBlogging li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_TempatBlogging li:hover {
opacity:1;
}
#animation_TempatBlogging li:hover a strong {
opacity:1;
top:-10px;
}

     5. Cari tag <data:post.body/> dengan menggunakan Ctrl + F 
     6. Paste kode di bawah Sebelum tag <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_TempatBlogging' id='animation_TempatBlogging'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <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'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>

      7. Simpan Template Anda.