Recent Comments dengan Avatar

                                            بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ 

Recent comments adalah widget bagi memaparkan komen yang diterima pada posting blog anda.Kebiasaannyanya Cuma dalam bentuk teks sahaja,tapi kali ini agak menarik kerana akan memaparkan avatar disamping komen yang dibuat.

Cara membuatnya:
1.Masuk ke dashboard blogger,pilih layout dan klik add a gadget

2.pada paparan scroll ini pilih HTML/Javascript

3.masukkan kod berikut padanya

<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.w2b_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;
}

.w2b_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;
}

.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}

.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;

}
</style>
<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=" https://sites.google.com/site/teknikbuatblog/tbb/tbbcirclecomment.js"></script>
<script type="text/javascript" src="http://teknikbuatblog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script></div></div>
<span style="font-size:10px;"><a href="http://teknikbuatblog.blogspot.com/2013/08/widget-komen-terbanyak-dengan-avatar.html" target="_blank"> <center><font color="blue">**Dapatkan widget ini**</font></center> </a></span> 

Nota:
Tukarkan teknikbuatblog pada kod dengan nama blog anda
Tukarkan nilai “5” bagi memaparkan jumlah komen yang hendak dipaparkan
numComments  = 5
dan
&max-results=5
Untuk menukar saiz avatar ubah nilai 60 pada kod diatas.

tutor dari teknikbuatblog.blogspot.com , thx buat sharenya.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Sunrise Gloss Drop Down Menus

  بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ 

• Login ke blogspot kamu.
• Klik rancangan.
• Klik add gadget
• Pilih HTML/JavaScript
• Masukkan kode dibawah ini:

<div class="nav-container-outer"> <br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEjZlrbS6cxJAmt_InfMi2W2j2ae-foX50ZLwLgrK7PZqbJKKEWnMjntBshMWXDyrPEsltHCM0L8RwIqg-omzxCatgGMCLpYoRSOKZVsIPbMnNLCynob0pn1YPuqzEIDYI0EKUD0dzxUQS/s1600/nav-bg-l.jpg" alt="" class="float-left" /><br /> <br /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFBn7zVK7C3BRxs5i2pEye6PWAtTOh0EsdPSxNsaNzHToeDttGbQRHj5yiz7yZg4iBDRmWfIl865Zp6Pn7AD_Qq1qHcCkOQEyQ-RBKvaFJzTxWbcZlJ3snkoIfavlpWn24LE3SZAQ3Yw0m/s1600/nav-bg-r.jpg" alt="" class="float-right" /><br /> <br /> <ul id="nav-container" class="nav-container"> <li><a class="item-primary" href="#">HOME</a><br /> <br /> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Products</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Quality</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Services</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Very Long Item</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Fully Flexible</a><br /> <br /> <br /> <br /> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul> </li> <li class="clear"> </li> </ul> <br /> </div>

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

<br /> @charset "utf-8";<br /> <br /> /* CSS Document */<br /> <br /> <br /> <br /> body{<br /> <br /> padding: 25px;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Navigation Structure ^'^*/<br /> <br /> .nav-container-outer{<br /> <br /> background: #990000;<br /> <br /> padding: 0px;<br /> <br /> height: 74px;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTzV3GCepBuHKSvh16gIllFMqZ3Ed2QhGPKrQu1TaSvK9S_DxOyJ3ghhE2aOGBDC-Y0CbOGunPXeJ92QO8fVYkCwza6Kr1na1USXO5kAsxgWLwmzE_YGkwyQlY3Zhq7gfh6s0Fz9Jteoz/s1600/nav-bg.jpg);<br /> <br /> }<br /> <br /> .float-left{<br /> <br /> float: left;<br /> <br /> }<br /> <br /> .float-right{<br /> <br /> float: right;<br /> <br /> }<br /> <br /> .nav-container .divider{<br /> <br /> display:block;<br /> <br /> font-size:1px;<br /> <br /> border-width:0px;<br /> <br /> border-style:solid;<br /> <br /> }<br /> <br /> .nav-container .divider-vert{<br /> <br /> float:left;<br /> <br /> width:0px;<br /> <br /> display: none;<br /> <br /> }<br /> <br /> .nav-container .item-secondary-title{<br /> <br /> display:block;<br /> <br /> cursor:default;<br /> <br /> white-space:nowrap;<br /> <br /> }<br /> <br /> .clear{<br /> <br /> font-size:1px;<br /> <br /> height:0px;<br /> <br /> width:0px;<br /> <br /> clear:left;<br /> <br /> line-height:0px;<br /> <br /> display:block;<br /> <br /> float:none;<br /> <br /> }<br /> <br /> .nav-container{<br /> <br /> position:relative;<br /> <br /> zoom:1;<br /> <br /> margin: 0 auto;<br /> <br /> }<br /> <br /> .nav-container a, .nav-container li{<br /> <br /> float:left;<br /> <br /> display:block;<br /> <br /> white-space:nowrap;<br /> <br /> }<br /> <br /> .nav-container div a, .nav-container ul a, .nav-container ul li{<br /> <br /> float:none;<br /> <br /> }<br /> <br /> .nav-container ul{<br /> <br /> left:-10000px;<br /> <br /> position:absolute;<br /> <br /> }<br /> <br /> .nav-container, .nav-container ul{<br /> <br /> list-style:none;<br /> <br /> padding:0px;<br /> <br /> margin:0px;<br /> <br /> }<br /> <br /> .nav-container li a{<br /> <br /> float:none<br /> <br /> }<br /> <br /> .nav-container li{<br /> <br /> position:relative;<br /> <br /> }<br /> <br /> .nav-container ul{<br /> <br /> z-index:10;<br /> <br /> }<br /> <br /> .nav-container ul ul{<br /> <br /> z-index:20;<br /> <br /> }<br /> <br /> .nav-container ul ul ul{<br /> <br /> z-index:30;<br /> <br /> }<br /> <br /> .nav-container ul ul ul ul{<br /> <br /> z-index:40;<br /> <br /> }<br /> <br /> .nav-container ul ul ul ul ul{<br /> <br /> z-index:50;<br /> <br /> }<br /> <br /> li:hover>ul{<br /> <br /> left:auto;<br /> <br /> }<br /> <br /> #nav-container ul {<br /> <br /> top:100%;<br /> <br /> }<br /> <br /> #nav-container ul li:hover>ul{<br /> <br /> top:0px;<br /> <br /> left:100%;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Primary Items ^'^*/<br /> <br /> #nav-container a{<br /> <br /> padding:7px 17px 7px 18px;<br /> <br /> margin: 10px 0px 0px 0px;<br /> <br /> color: #FFFFFF;<br /> <br /> font-family: Trebuchet MS, Arial, sans-serif, Helvetica;<br /> <br /> font-size:14px;<br /> <br /> text-decoration:none;<br /> <br /> font-weight: bold;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxDH-UDXp2aunsRrqey2c3Peh5Tw6ZghZ2r-3D_wVFsmUQdlUWxZBQms1-iAQ81Hi1f2iv_ySaFJHJgzTqaR57RZuhyphenhyphenUXdg869iN_mgFmOPdOCGMbwEz9OXyJfOSMPxa72naEkaB1oVmEI/s1600/item-primary-bg.gif);<br /> <br /> background-repeat: no-repeat;<br /> <br /> background-position: top;<br /> <br /> }<br /> <br /> <br /> <br /> #nav-container a:hover{<br /> <br /> color: #6C3600;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxDH-UDXp2aunsRrqey2c3Peh5Tw6ZghZ2r-3D_wVFsmUQdlUWxZBQms1-iAQ81Hi1f2iv_ySaFJHJgzTqaR57RZuhyphenhyphenUXdg869iN_mgFmOPdOCGMbwEz9OXyJfOSMPxa72naEkaB1oVmEI/s1600/item-primary-bg.gif);<br /> <br /> background-repeat: no-repeat;<br /> <br /> background-position: center;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Items Container ^'^*/<br /> <br /> #nav-container div, #nav-container ul{<br /> <br /> padding:10px 4px 10px 4px;<br /> <br /> margin:0px 0px 0px 0px;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZj6j4Jv1lianq7EPTyoTw3LyKwgr4eUD40rseMUNeV-o5SNaydt8RJndI95gXh7jy7J9jal1W0Z6ju4PZpbjN9ikMST0UUAn7sUjGxYIpAcciZ9stQXdxBjIt-OaIdKa-c8VJUtDjYLVf/s1600/item-secondary-container-bg.jpg);<br /> <br /> background-repeat: repeat-x;<br /> <br /> background-color: #FF9900;<br /> <br /> border-bottom: 1px solid #CA6500;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Items ^'^*/<br /> <br /> #nav-container div a, #nav-container ul a{<br /> <br /> padding:3px 10px 3px 6px;<br /> <br /> background-color: #FFFFFF;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ujwxNrj7CxS2tiDRkCULAHf7K8QBYDfnGuY8t68aanICTJqbf-kML7WTGhz2JU2X1oBrwXQCB6WA0pSL4i9FB658_XsskdXz8Gpm6WbBUYS2p_Te05NLAmyFJ9R5XwkhBRxdeEUkMk2N/s1600/item-secondary-bg.jpg);<br /> <br /> background-repeat: no-repeat;<br /> <br /> background-position: 0px 22px;<br /> <br /> font-size:11px;<br /> <br /> border-width:0px;<br /> <br /> border-style:none;<br /> <br /> margin: 0px 0px 0px 0px;<br /> <br /> width: 149px;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Items Hover State ^'^*/<br /> <br /> #nav-container div a:hover, #nav-container ul a:hover{<br /> <br /> background-color: #FFFFFF;<br /> <br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ujwxNrj7CxS2tiDRkCULAHf7K8QBYDfnGuY8t68aanICTJqbf-kML7WTGhz2JU2X1oBrwXQCB6WA0pSL4i9FB658_XsskdXz8Gpm6WbBUYS2p_Te05NLAmyFJ9R5XwkhBRxdeEUkMk2N/s1600/item-secondary-bg.jpg);<br /> <br /> background-repeat: no-repeat;<br /> <br /> color:#CC0000;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Secondary Item Titles ^'^*/<br /> <br /> #nav-container .item-secondary-title{<br /> <br /> cursor:default;<br /> <br /> padding:4px 0px 3px 7px;<br /> <br /> color: #6C3600;<br /> <br /> font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;<br /> <br /> font-size:11px;<br /> <br /> /* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH3EC77938_-PLzdN2_B6K-4lUM5hs3L3PQTOGPp6_ywxZJNeg1ILhUKhYXk0_xngMNRktjuwRpZl2A5qct7nV94v0KuWkq1-QYfCqLN0xjnJ7R0AJ9824iAl8-aE8xtCPJubN7I3Qyqzk/s1600/item-secondary-title-bg.jpg); */<br /> <br /> background-repeat: no-repeat;<br /> <br /> font-weight:bold;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Horizontal Dividers ^'^*/<br /> <br /> #nav-container .divider-horiz{<br /> <br /> border-top-width:1px;<br /> <br /> margin:5px 5px;<br /> <br /> border-color: #C16100;<br /> <br /> }<br /> <br /> <br /> <br /> /*^'^ Vertical Dividers ^'^*/<br /> <br /> #nav-container .divider-vert{<br /> <br /> border-left-width:1px;<br /> <br /> height:15px;<br /> <br /> margin:4px 2px 0px 2px;<br /> <br /> border-color:#AAAAAA;<br /> <br /> }

tutor dari many-cara.blogspot.com , thx buat sharenya.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**

Cara membuat Tombol Top UP di Blog

                                             بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ 



Cara membuat Tombol Top UP di Blog.
tombol ini membantu anda untuk kembali ke Top Up alias ke atas kembali dengan cepat.Bagai mana Cara membuat nya..

1. Anda Harus Log In dulu ke Blogger
2. Pilih / klik Rancangan 
3. Klik pada Tulisan Tambahkan Gadged
4. Trus masukan kode berikut.

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6EpzRU4E7lXITQ9nE_X4JhS1Kyx4oZfcKaftSq1tU2a85AZsfOXJf3L2OdjrLeFnNGSesqApiy1mf1U5nLlalfmPTBJendC-H662S5ITjVoH7YXzuQyuir5QuEk80yUQS7cbJm_Z0pc2/s1600/
backtotop.png" /></a><span style="font-size: 50%">Widget edited by <a href="http://many-cara.blogspot.com/" target="_blank" rel="follow">Many-Cara</a></span>

5.Terus Simpan.
 
Anda Juga Bisa Menyimpannya di Atas Kode </body>

Cara menempatkan kode-nya.

1. kilik Template
2. edit HTML
3. Trus Cari Kode </Body>
4. simpan

kalau ingin Cepat Gunakan Tombol CTRL + F. di keyboard anda

tutor dari many-cara.blogspot.com , thx buat sharenya.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                            **Bebas Disunting Dengan Menyebutkan Sumber**