2 Totorial untuk diri sendiri : macam mana nak up bilangan comment kat hujung entry

PERHATIAN: segala bentuk totorial dalam nih just untuk pemplet aku sahaja dan sedang digunapakai .. untuk totorial baru google sendiri.. hehhe :p

kalo rasa-rasa nak buat someting yang lain kat blog korang
boleh guna cara nih
selain senang nak tau berapa jumlah comment kat entry yang kita up tu .. hehe
macam nih...

sumber
aku carik kat cikgu kacamata
leh terjah sendiri kalo nak lebih paham..

seperti biasa

STEP 1
1. pergi kat templet (1)
2. Edit HTML (2)

3. copy kod  bawah ni (ctrl+F)
                ]]></b:skin>

4. pastekan kod atas tu kat (3)
5. Enter

STEP 2
6. copy plak kod bawah nih

.comment-bubble {
float:right;
z-index:2;
position:relative;
width:36px;
height:36px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezg0SZB7_plyRdYrPftDDoMEEgFNwyePkxr2ozsNkxGOdAuCReiKzs83zsTi4g9GuAtIj0ZfBYXmKou6o-WRizcCIiDKKL0ptOSAxQVYPh71gEN1THgYMEUbUOA4tsyIGXztWZ3zExwD1/s1600/CK-Bubble4a.png) no-repeat;
font-size:16px;
padding-left:0px;
padding-top:2px;
margin-top:-15px;
margin-right:2px;
text-align:center;
}

7. pastekan diatas kod ]]></b:skin>  tadi (4)
macam dalam gambar

STEP 3
8. cari plak kod dibawah nih (guna ctrl + F)

<h3 class='post-title entry-title' itemprop='name'>

9. Enter

* Langkah ni perlu lebih berhati-hati sebab terdapat 2 kod yang sama, utk pemplet yana, yana guna kod yang ke2

STEP 4

10. copy kod dibawah ni

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color:#000000; font-family:mistral; font-size:21px;'><data:post.numComments/></a>
</b:if>

Nota:

• Kod warna ungu:
  Untuk menukar jenis font
• Kod warna aqua/cyan:
  Untuk menukar saiz font
• Kod warna hijau:
  Untuk menukar warna bagi bilangan komen pada sebelah Tajuk Entri
*klik untuk mendapatkan kod-kod warna lain

11. pastekan di atas  <h3 class='post-title entry-title' itemprop='name'> tadi

12. cuba preview dulu, jadi ke tak
and baru save

nak dapatkan icon comel yang lain klik sini

#creditcikgukacamata

4 Totorial untuk diri sendiri : macam mana nak buat drop down menu pada header

PERHATIAN: segala bentuk totorial dalam nih just untuk pemplet aku sahaja dan sedang digunapakai .. untuk totorial baru google sendiri.. hehhe :p


kalo ada banyak menu page
korang leh guna cara ni untuk kurangkan menu2 yang banyak kat header tu
macam ni..namanya dropdown menu
ni kira susun atur la jugak kan..
susun ikut kategori kekdahnya...

contoh:-






LANGKAH 1


1. Masuk ke akuan blogger macam biasa
2. Pilih Template > Edit HTML 

Ayat2 pelik macam nih akan kuar and kena 

3. Cari code </head>, Guna Ctrl + F untuk search

copy code di bawah, and pastekan di atas code </head>

<style>

#coolMenu,

#coolMenu ul {

    list-style: none;

}

#coolMenu {

width:980px;

    float: left;

}

#coolMenu > li {

    float:left;

}

#coolMenu li a {

display: block;

    padding: 5px 10px 5px 10px;

    text-decoration: none;

}

#coolMenu ul {

    position: absolute;

    display: none;

        z-index: 999;

}

#coolMenu ul li a {

    width: 30px;

 float:left;

padding: 5px 10px 5px 10px;

}

#coolMenu li:hover ul { 

}

/* Main menu

------------------------------------------*/

#coolMenu {

    font-family: Arial;

    font-size: 12px;

    background: #2f8be8;

margin:0 auto;padding:0 auto;

background: #02b0cf;

padding-left:3px;

border-bottom:1px solid #ccc;border-top:2px solid #ccc;

}

#coolMenu > li > a {

    color: #fff;

    font-weight: bold;

padding:8px 10px 8px 10px;

}

#coolMenu > li:hover > a {

    background: #f09d28;

    color: #000;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}

/* Submenu

------------------------------------------*/

#coolMenu ul {

    background: #f09d28;

padding:3px 5px 3px 5px;

}

#coolMenu ul li a {

    color: #000;

width:100px;

}

#coolMenu ul li:hover a {

    background: #ffc97c;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}

</style>

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

<script>

$(function(){

    $('#coolMenu').find('> li').hover(function(){

        $(this).find('ul')

        .removeClass('noJS')

        .stop(true, true).slideToggle('fast');

    });

});

</script>

---------------------------------------------------------------------------------------------------

code Biru (Code lebar menu)

code Merah (warna background menu)

code Ungu (warna background sub Menu)

boleh gantikan code-code tadi  kat sini (cikgu kacamata)

Simpan Templet

-------------------------------------------------------------------------------

LANGKAH 2

Pergi kat layourt

Add Gadget

HTML/Java Script

paste code dibawah ni

--------------------------------------------------------------------------------

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blazer Blog (Header)' type='Header'/>
</b:section>
</div><!-- end header-wrapper -->

<ul id="coolMenu">
    <li><a href="#">Tajuk</a></li>
    <li><a href="#"></a></li>
    <li>
    <a href="#">Tajuk</a>
    <ul class="noJS">
        <li><a href="#">Tajuk</a></li>
        <li><a href="#">Tajuk</a></li>
        <li><a href="#">Tajuk</a></li>
    </ul>
</li>
<li>
    <a href="#">Service</a>
    <ul class="noJS">
        <li><a href="#">Tajuk</a></li>
        <li><a href="#">Tajuk</a></li>
        <li><a href="#">Tajuk</a></li>
<li><a href="#">Tajuk</a></li>

<li><a href="#">Tajuk</a></li>

<li><a href="#">Tajuk</a></li>

<li><a href="#">Tajuk</a></li>

<li><a href="#">Tajuk</a></li>

    </ul>
</li>
    <li><a href="#">Tajuk</a></li>
  <li>
    <a href="#"></a>
    <ul class="noJS">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>

    </ul>
</li>
</ul>

-----------------------------------------------------------------------------------

LANGKAH 3

Korang tukar tanda # tu and gantikan dengan link blog yang ingan dipaut..

tukar jugak Tajuk and masukan tajuk korang..

simpan and cuba jadi tak

ok tu jew.. 

selamat men'try' hehe

kalo korang tak faham cara aku, leh study kat sini membuat-buat)