Cari Artikel

Friday, August 3, 2012

Cara pasang fungsi Threaded Comment di Blogspot




Fungsi Threaded comment memudahkan untuk kita menjawab setiap komen yang telah diberikan pada sesebuah posting. Hanya klik pada Reply untuk membalas setiap komen tersebut dan komen yang di reply itu akan berada di bawah setiap komen yang diberikan oleh pembaca. Untuk membina Threaded Comment pada bahagian komen blog anda seperti yang boleh di lihat pada bahagian komen blog ini (sila klik Demo), sila ikut langkah-langkah di bawah.

1. Log in dashboard--> Template --> Edit HTML --> Proceed.

 2. Seterusnya tick "Expand Widget Templates"

 3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin>

 4. Copy dan paste kod css ini, di atas atau sebelum kod ]]></b:skin>




#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width: 70px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background-image: url(http://3.bp.blogspot.com/-PmKxzY3m4xc/TrH6vjTcW7I/AAAAAAAABbU/bjyOcVut-AA/s60/684c851af59965b680086b7b4896ff98.png);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
}

.cm_name {
font-weight: bold;
font-size: 12px;
float: left;
}

.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}

.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}
5. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </body>

6. Copy dan paste kod ini, di atas atau sebelum kod </body>



<script type="text/javascript" src="http://javscript-code.googlecode.com/files/threaded%20comment.js"></script>



7. Seterusnya, copy dan paste kod ini pada notepad dan edit pada kod yang di bold merah dengan menggantikannya dengan ID Blog anda.

Contoh ID blog saya : http://www.blogger.com/rsd.g?blogID=2075431096052623527



<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments &gt; 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>
   
        <div id='cm_reply_css'></div>
   
        <div class='cm_pagenavi' id='cm_page'></div>
   
        <div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>
           
                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/>
                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>                    
                                </div>
                                <div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2075431096052623527&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
                                </div>
                            </div>

                            <div class='cm_entry'>
                                <span class='cm_arrow'></span>
                                <div class='cm_info'>
                                    <div class='cm_name'>
                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                        </b:if>
                                    </div>
                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>                                
                                </div>
                           
                                <p><data:comment.body/></p>
                            </div>
                        </div>
                    </div>
                </b:if>          
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'></div>
   
    <b:if cond='data:post.embedCommentForm'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='comment-form'/>
            <b:else/>
                <data:post.noNewCommentsText/>
            </b:if>
            <b:else/>
            <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
            </b:if>
    </b:if>

  </b:if>
  </div>



8. Seterusnya adalah langkah akhir yang merumitkan sedikit. Kembali kepada script template anda. Dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <b:includable id='comments' var='post'>

Selepas menjumpai kod tersebut, delete kod-kod yang bermula selepas kod <b:includable id='comments' var='post'> hingga sebelum kod </b:includable>

Contoh:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments &gt; 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>
       ------------ Sebahagian daripada kod yang perlu di delete -------------------


      <b:include data='post' name='comment-form'/>
            <b:else/>
                <data:post.noNewCommentsText/>
            </b:if>
            <b:else/>
            <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
            </b:if>
    </b:if>
  </b:if>
  </div>
</b:includable>




9. Kemudian, copy kod yang telah siap di edit pada notepad ( rujuk langkah ke 7) dan paste pada kod yang telah anda delete pada langkah ke 8 di atas.


<b:includable id='comments' var='post'>
Paste kod yang siap di edit pada notepad di bahagian ini
</b:includable>


10. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save.

p/s: 1. Sila pastikan anda membuat backup pada script template sebelum membuat tutorial ini.

2. Pastikan setting Comment Location anda adalah Embedded  (Lokasi Ulasan = Terbenam).

3. Jika avatar(gambar profile) comment tidak berada betul-betul di tengah kotak, sila cari kod css yang seperti ini dan delete.




.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #eeeeee;
}

Cara Mengubahsuaikan Layout Blog Anda




Template anda adalah cara yang menyeronokkan untuk menyesuaikan blog anda. Apabila mewujudkan blog baru, anda pertama kali diminta untuk memilih templat lalai, ini adalah reka bentuk asas blog anda.

Anda boleh memilih banyak dari template untuk blog anda; hanya memilih yang paling sesuai dengan keperluan anda. Di samping itu, anda boleh menyesuaikan reka bentuk blog anda menggunakan antara muka intuitif drag-and-drop.

Anda juga boleh menambah alat berkuasa seperti persembahan slaid, pemilihan pengguna, atau iklan walaupun AdSense. Menukar fon dan warna pada blog anda adalah mudah, terlalu. Jika anda mahukan kawalan yang lebih tepat ke atas susun atur blog anda, anda juga boleh menggunakan

Edit Ciri HTML. Untuk mengedit layout blog anda, ikuti langkah berikut:


1. Klik Layoutfrom menu drop-down di papan pemuka anda di bawah blog yang anda ingin menyesuaikan.

2. Dari situ, klik Edit untuk mengedit alat yang sedia ada, atau Tambah Gadget menambah yang baru.

3. Untuk menambah alat baru selepas anda klik Tambah Alat, klik tanda tambah bersebelahan dengan alat yang dikehendaki anda. Anda boleh memilih daripada alat mengikut kategori, atau mencari alat tertentu di sebelah kanan atas tetingkap pop-up.



4. Selepas anda menambah maklumat yang perlu untuk alat yang anda pilih, klik butang Simpan oren perkiraan. Perubahan layout anda akan muncul dengan serta-merta.

Privasi dan keizinan

Secara lalai, blog anda sepenuhnya awam, dan boleh dibaca oleh sesiapa sahaja di internet. Walau bagaimanapun, jika anda mahu memastikan ia swasta, anda boleh berbuat demikian juga. Anda boleh menukar tetapan ini pada tab Tetapan | Asas.

Di bawah seksyen Readers 'Blog', anda mungkin akan melihat 'Sesiapa sahaja' dipilih sebagai lalai. Apabila anda menukar ini kepada 'Hanya ini pembaca, anda akan mendapat Pembaca butang Tambah.

Klik butang Pembaca Tambah dan kemudian masukkan alamat e-mel orang yang anda ingin untuk memberikan akses ke blog anda. Untuk tambah beberapa orang, mengasingkan alamat dengan koma.

Bagi setiap alamat memasuki, Akaun Google yang bersekutu dengan alamat tersebut akan diberi akses untuk melihat blog anda. Jika alamat tidak berkaitan dengan akaun, orang itu akan menerima e-mel jemputan dengan pautan yang membolehkan mereka lakukan salah satu daripada tiga perkara:

Mendaftar masuk ke akaun yang sedia ada.

Buat akaun baru.

Lihat blog anda sebagai tetamu (akaun tidak memerlukan).

Cara Masukkan Video Kedalam Entri Atau Blog Post




Untuk menambah video ke blog post anda, klik ikon filem jalur dalam toolbar Editor Pos di atas di mana anda mengarang teks blog anda. Satu tetingkap akan muncul membolehkan anda 'Tambah video ke dalam blog post anda.'



Klik Browse untuk pilih fail video dari komputer anda yang anda ingin untuk dimuat naik. Sila ambil perhatian bahawa Blogger menerima AVI, MPEG, QuickTime, Real dan fail Windows Media dan video anda mesti kurang dari 100MB.

Sebelum mengupload video anda, menambah tajuk di dalam kotak 'Hakmilik Video' dan bersetuju dengan Terma dan Syarat (anda hanya akan mempunyai untuk melakukan ini kali pertama anda memuat naik video dengan Blogger). Kemudian klik Muat naik Video.

Manakala upload video anda, anda akan melihat pemegang tempat dalam editor pos yang menunjukkan di mana video anda akan muncul. Anda juga akan melihat mesej status di bawah penyunting pos yang membolehkan anda tahu bahawa upload anda dalam kemajuan. Bergantung kepada saiz video anda, ini biasanya mengambil masa kira-kira lima minit. Apabila ia selesai, video anda akan muncul dalam editor jawatan.

Mahu melihat ini dalam tindakan? Klik pada link untuk menonton video bagaimana untuk menambah video ke dalam blog post anda:

Cara Masukkan Imej Atau Gambar Kedalam Entri / Blog Post



Anda boleh menambah imej dari komputer atau web anda ke blog anda. Klik ikon imej dalam bar alat Editor Post. Satu tetingkap akan muncul mendorong anda untuk melayari untuk fail imej pada komputer anda, atau masukkan URL imej di Web.


Setelah anda memilih imej anda, anda boleh memilih susun atur untuk menentukan bagaimana imej anda akan muncul dalam catatan anda:

'Kiri', 'Center', dan 'Hak' pilihan membolehkan anda untuk menyesuaikan cara teks blog anda akan mengalir di sekeliling imej anda.
Pilihan 'Saiz imej akan menentukan berapa besar imej akan muncul dalam catatan anda.

Klik muat naik imej untuk menambah imej anda, dan kemudian klik DONE apabila tetingkap pemberitahuan muncul memberitahu anda bahawa 'Imej anda telah ditambah.'

Blogger kemudian akan mengembalikan kamu kepada editor jawatan, di mana anda akan melihat imej anda sedia untuk diterbitkan ke blog anda.

Anda juga boleh menyiarkan imej ke blog anda menggunakan peranti mudah alih anda, foto percuma Google perisian Picasa, atau perkhidmatan pihak ketiga seperti flickr.

Tulis Tajuk Entri / Post Anda



Setelah anda mendaftar masuk ke Blogger, anda akan melihat papan pemuka anda dengan senarai blog anda. Berikut adalah apa yang anda perlu lakukan:

1. Klik ikon pensil oren untuk menulis satu jawatan baru, dan masukkan apa sahaja yang anda mahu berkongsi dengan dunia.

2. Seterusnya, anda akan melihat laman Editor Pos. Mulakan dengan memberikan catatan anda tajuk (pilihan), kemudian masukkan jawatan itu sendiri:

3. Apabila anda selesai, klik butang Preview di bahagian atas untuk memastikan ia bersedia untuk pergi, dan kemudian klik butang Publish untuk menerbitkan catatan anda.


Bina Blog Anda


Sebelum anda boleh membuat blog percuma di Blogspot, perkhidmatan hos Blogger, anda perlu telah membuat Akaun Google. Apabila anda sudah log masuk ke blogger.com, klik blog Baru sebelah senarai blog anda:


Dalam tetingkap pop-up, masukkan Tajuk dan Alamat (URL), kemudian memilih template untuk blog anda. Apabila anda selesai, klik Create blog!:


Anda semua sedia untuk pergi! Blog anda harus muncul pada Papan Pemuka anda dan anda boleh memulakan posting dengan mengklik ikon pensil oren datang ke blog anda. Jika anda pernah lupa atau mahu menukar URL anda, anda boleh mencari pilihan menyunting at Tetapan | Asas.

Cara Mendaftar Blog



Untuk memulakan blog dengan Blogger, sila layari laman utama Blogger, masukkan nama pengguna dan kata laluan anda, dan klik Daftar masuk. Masukkan nama paparan dan terima Syarat Perkhidmatan Blogger. Kemudian klik Buat link Blog dan mulakan!

Memilih alamat (URL) dan tajuk blog. Kemudian, pilih template blog kegemaran anda (ini adalah bagaimana blog anda akan kelihatan apabila anda menerbitkan). Sudah kreatif, menambah maklumat kepada profil peribadi anda, dan menyesuaikan bagaimana blog anda kelihatan, jika anda merasa sehingga. Mulakan blogging sekarang!
Related Posts Plugin for WordPress, Blogger...

Rujukan