1. Sign In di blogger.com
2. Lalu klik tombol di bawah ini dan klik Add Widget

Cara Membuat Widget Komentar Avatar di Blogger

• Sign In di blogger.com
• Pada Menu drop down, Pilih layout
• Klik Add a gadget dan pilih HTML/JavaScript
• Copy paste kode berikut pada kolom yang tersedia

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<p style="display:none;">Recent Comments Widget with Avatar by <a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments  = 5,
showAvatar  = true,
avatarSize  = 60,
roundAvatar = true,
characters  = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://tutorialblogspot.googlecode.com/files/recentcommentavatar.js"></script>
<script type="text/javascript" src="http://contoh.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

• Jangan Lupa mengganti http://contoh.blogspot.com dengan URL blog sobat,lalu simpan Widget sobat

• Masuk ke akun Blogger sobat
• Setelah itu, pada Widget Feedburner sobat, sisipkan kode berikut :

<style>
 /* ============ Customize Fedburner Buzzboost Widget By www.tutorialblogspot.com ============= */
 div.feedburnerFeedBlock ul li {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitUk0sVCyNjb1-n8h4mGfEEfH5b8MJbo6jRbqhn0aTmCs18aJkfM5mXTZE3fNLFHexpfia_ynjoohnuz7hIc0M-bfsIopH_zQQRyLyTu9UxZV2NEPgkix8bAS7eNW-kCEaLfmDKisuOwnl/s1600/rb+cancel+icon.png) no-repeat 2px;
     list-style-type: none;
     margin: 0 0 5px 0px;
     padding: 5px 5px 5px 30px !important;
     border: 1px solid #dddddd;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
  }
 div.feedburnerFeedBlock ul li:hover {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQT9T_V1kJ5i_Ka2RpcCgivvx7TTG3CzjvptJlMeC1dBi0Q4D6EwYM4Y4gthKqVMq3qbh_TOLBDqC5rLmwzuzP-4W5EO_GWBS8lwlfvGOdHCEoDY7djAktPtkzGHPJ-j3PvScxFBXwEnU/s1600/rb+mark+icon.gif) no-repeat 2px;
     border: 1px dashed #848484;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
 div.feedburnerFeedBlock ul li a:hover {
     text-decoration: none;
}
 div  #creditfooter {
     display: none;
 }
 /* ============ Customize Feedburner Buzzboost Widget By www.tutorialblogspot.com ============= */
 </style>

• Sehingga keseluruhan dari kode kita akan terlihat seperti di bawah ini!

<style>
 /* ============ Customize Fedburner Buzzboost WidgetBy www.tutorialblogspot.com ============= */
 div.feedburnerFeedBlock ul li {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitUk0sVCyNjb1-n8h4mGfEEfH5b8MJbo6jRbqhn0aTmCs18aJkfM5mXTZE3fNLFHexpfia_ynjoohnuz7hIc0M-bfsIopH_zQQRyLyTu9UxZV2NEPgkix8bAS7eNW-kCEaLfmDKisuOwnl/s1600/rb+cancel+icon.png) no-repeat 2px;
     list-style-type: none;
     margin: 0 0 5px 0px;
     padding: 5px 5px 5px 30px !important;
     border: 1px solid #dddddd;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
  }
 div.feedburnerFeedBlock ul li:hover {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQT9T_V1kJ5i_Ka2RpcCgivvx7TTG3CzjvptJlMeC1dBi0Q4D6EwYM4Y4gthKqVMq3qbh_TOLBDqC5rLmwzuzP-4W5EO_GWBS8lwlfvGOdHCEoDY7djAktPtkzGHPJ-j3PvScxFBXwEnU/s1600/rb+mark+icon.gif) no-repeat 2px;
     border: 1px dashed #848484;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
 div.feedburnerFeedBlock ul li a:hover {
     text-decoration: none;
}
 div  #creditfooter {
     display: none;
 }
 /* ============ Customize Feedburner Buzzboost Widget By www.tutorialblogspot.com ============= */
 </style>
<script src="http://feeds.feedburner.com/tutorialblogspot/PbmK?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/tutorialblogspot/PbmK"></a><br/>Powered by FeedBurner</p> </noscript>

1. Yang warna merah adalah kode Feedburner.
2. Hasil akhirnya akan terlihat seperti di bawah ini!

1. Looks great on mobile devices
2. They’re animated
3. Small size means they load FAST!

• Sobat blogger harus Sign In dulu di blogger.com,
• Klik tombol yang kami sediakan di bawah ini

• Lalu klik tombol Add Widget.

1. Sign In di blogger.com
2. Pada menu drop down, pilih Layout
3. Klik Add a gadget dan pilih HTML/JavaScript
4. Copy Paste kode kode yang sudah saya siapkan di bawah pada kolom yang tersedia
5. Simpan Widget sobat

• Sign in terlebih dahulu di blogger.com
• Setelah itu, Pada menu Drop Down klik Add A gadget dan pilih HTML/JvaScript
• Copy Paste kode berikut pada kolom yang tersedia (Ingat... Jangan lupa untuk merubah atau mengganti tulisan yang berwarna merah dengan ID Twitter sobat blogger)

<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script> <div id="twitterfanbox"> <script type="text/javascript">fanbox_init("2torialBlogspot");</script></div>

• Simpan Widget Sobat

Cara Memasang Widget Player Streaming Di Blogger

1. Login di blogger.com
2. Kalau sudah login, klik tombol di bawah ini dan klik Add Widget

Cara Memasang Widget Social Media Sharing Di Blog

• Sign In di blogger.com
• Pada menu drop down, pilih Layout
• Klik Add a gadget dan pilih HTML/JavaScript
• Copy Paste kode di bawah ini pada kolom yang tersedia

<style>
/*--------TutorialBlogspot Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://beautifulbloggerwidgets.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>
<p style="display:none;">Cool Social Media Sharing Touch Me Widget by <a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="GOOGLE+ PROFILE LINK" rel='nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="FACEBOOK LINK" rel='nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="TWITTER LINK" rel='nofollow' target='_blank' ></a>
</div>

• Simpan Widget Touch Me sobat

• Sign in di blogger.com
• Pada menu Drop Down, Klik Layout dan klik Add a Gadget
• Copy Paste kode berikut pada kolom yang tersedia:

<div style="border: 1px solid #ccc; padding: 5mm;">
<p style="display:none;">Subscription Email Form by <a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nC2YggA6KmFgu9atJBS5dBPWximEfghRX0PgEdJvy1Vza2DaeGZIoyGsQ9w5THY_U6jIEpnsjYm8ReODzxCP3x8cDrJqWq2-T7FPhiEPOhFWU7G8Ordi17IGC1pulyFCGh-wTvNHLWA/"/></center>
<center><span style="font-weight: bold;font-size:small;">Subscribe by E-mail & Get Latest Blog Updates Free</span></center>
<form action="http://feeds.feedburner.com/FEED-ANDA" style="padding: 3px; text-align: center;" target="popupwindow" method="post" onsubmit="window.open('http://feeds.feedburner.com/FEED-ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><center style="font-weight: normal">Enter your email address:</center><p><center><input type="text" style="width:140px" name="email"/></center></p><center><input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /></center></form></div>

• Simpan Widget FeedBurner sobat

Cara Memasang Widget Tahun Baru

1. Login ke blogger.com
2. Klik tombol yang tersedia lalu klik Add widget

• Mudah untuk dipasang dan dikostumisasi
• Memiliki tampilan yang indah
• Loading dari widget Recent Post Dengan FeedBurner sangat cepat

1. Sign In di akun FeedBurner sobat
2. Klik Feed Title
3. Di bagian menu horizontal akun FeedBurner sobat, klik Publicize

4. Lalu klik BuzzBoost.
5. Kalau BuzzBoost sobat blogger belum diaktifkan, aktifkan terlebih dahulu.
6. Copy Kode BuzzBoost yang di dapat.
7. Tanpa menutup laman FeedBurner, silahkan lanjutkan dengan proses di bawah ini!

Cara Memasang Widget Recent Post Dengan FeedBurner

1. Sign In di blogger.com
2. Pada menu Drop Down, pilih Layout
3. Klik Add a Gadget dan Pilih HTML/JavaScript
4. Copy Paste kode yang didapat pada kolom yang tersedia
5. Simpan Widget feedBurner sobat

1. Number of items to display adalah Jumlah judul Posting yang ditampilkan
2. Display feed title : Apakah judul Feed akan ditampilkan apa tidak
3. Display favicon : Menampilakan Ikon Blog di Widget Recent Post
4. Display item author name : Menampilkan Nama Pemilik blog
5. Display item content : Untuk menampilkan jumlah teks dalam konten
6. Display item publication date : menampilkan waktu atau tanggal dipublikasikannya postingan
7. Show linked media from a podcast : Menampilkan Media Podcast yang berhubungan
8. Display link to feed : Menampilkan Link Feed

Cara memasang Animasi Flying Twitter Man di blog

• Masuk ke akun blogger.com
• Pada Menu drop down, pilih Tata Letak
• Pilih "Tambah Gadget" dan HTML/JavaScript
• Copy Paste kode berikut pada kolom yang tersedia

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/Man.js"></script><script type="text/javascript">
var twitterAccount = "2torialBlogspot";
tripleflapInit();
</script>

• Simpan Widget Flying Twitter Man sobat

1. Ganti 2torialBlogspot dengan nama akun Twitter sobat
2. Jangan kasih judul pada widget ini

Cara Memasang Kalkulator Di Blogger

1. Login ke blogger.com
2. Kemudian klik tombol warna biru di bawah ini dan klik Add widget

Cara Memasang Google+ Followers Gadget Di Blogger

1. Masuk ke akun blogger sobat
2. Pada Menu Drop Down, Pilih Layout (Tata Letak )
3. Kemudian, pilih Add Gadget

4. Klik Google+ Followers
5. Klik Save (Sobat blogger bisa merubah judul Widget Google+ Followers yang ada)
6. Refresh blog sobat untuk melihat indahnya tampilan Widget Google+ Followers di blog sobat.

Cara Memasang Widget Kalender Islam Di Blog

1. Login ke blogger.com
2. Klik tombol di bawah ini dan klik Add Widget