Widget Contact Form Untuk Blogger

Assalamualaikum dan Salam Sejahtera. Tadi semasa sedang berjalan-jalan melayari blog rakan-rakan blogger Sembang Cyber. M'Rie terjumpa satu artikel mengenai widget terbaru yang disediakan oleh pihak Google untuk pengguna Blogspot.

Widget yang diperkenalkan bukanlah widget official blogspot. Tapi sebaliknya ia adalah widget pihak ke 3 (3rd Party Widget). Jika tidak silap M'Rie terdapat 2 widget baru iaitu:

1. Contact Form dan..
2. Wikipedia.

Tapi untuk hari ini. M'Rie hanya nak bercerita soal "Contact Form" sahaja. Ini kerana M'Rie tak berminat dengan widget "Wikipedia" tersebut.

Okay, widget "Contact Form", seperti mana yang kita tahu. Fungsinya adalah untuk memudahkan para pengunjung blog menghubungi "Blog Founder (Penggasas Blog)" atau lebih dikenali sebagai "Blog Owner (Pemilik Blog)".

Kelebihan:

1. Lebih mudah tanpa perlu menggunakan coding untuk memasukkan "Contact Form" ke dalam blog.
2. Ringkas dan padat.
3. Mesej dihantar terus ke "Inbox Email" yang digunakan untuk Log In ke akaun blog.

Kelemahan/Kekurangan:

Setakat ini M'Rie dah mencuba untuk mengubahsuai widget tersebut agar tampak serasi dengan penampilan blog. Tapi malangnya setiap percubaan yang dilakukan hanya memperoleh hasil yang mengecewakan.

• Sukar untuk di ubah suai agar menepati citarasa pengguna.
• Tiada pilihan untuk menentukan saiz kelebaran (width) ruangan nama, email, dan mesej.
• Hanya boleh diletak di "Layout Blog" sahaja dan tidak boleh dipasang di "Page".

Cara Pasang:

1. Sila pergi ke menu "Layout".
2. Klik pada "Add a Gadget".
3. Pilih "More Gadget".
4. Pilih "Contact Form".
5. Klik "Save".

Mengubah Background Main Page dan Border Pada TFBv2

Assalamualaikum dan Salam Sejahtera buat semua. Hari ini saya ingin menunaikan permintaan rakan blogger iaitu Nur Imans (Maaf tak dapat nak tag, tak tahu kenapa).

Beliau meminta saya untuk menghasilkan tutorial bagaimana hendak menukar background main page dan menambah border pada blog beliau yang menggunakan template TFBv2.

saya masih tak confident nak gunakan template editor yg baru ni, pd ms yg sama, sy ingin menukar warna background pada main page, selain menjadikan blog saya ada border pada sebelah kiri dan kanan.Cumanya, saya ingin minta bantuan sdra untuk buat tutorial tukar background template dengan menggunakan template editor baru ni. Harap sdra sudi pertimbangkan.terima kasih ye..;)-  via comment Nur Imans

Langkah 1: Buka Full CSS Code.

Apa yang anda perlu buat adalah dengan pergi ke tab "Edit HTML" dan cari code sama seperti di dalam gambar. Selepas anda menjumpai code tersebut. Sila klik anak panah berwarna hitam untuk memaparkan code penuh bagi CSS Code template.

Langkah 2: Mengedit CSS Code.

Apa yang anda perlu lakukan adalah dengan merujuk artikel/tutorial yang dah lama saya buat untuk mengubahsuai template TFB di sini:

• Menukar Background Blog.

Simple dan senang. Tutorial dah habis ya kawan-kawan. Selamat mencuba.

Bicara Soal New Template Editor ver.2

Assalamualaikum dan Salam Sejahtera buat para pengunjung blog Sembang Cyber. Hari ini saya teringin menunaikan permintaan rakan blogger yang meminta saya untuk membuat tutorial bagaimana hendak mengubahsuai blog menggunakan "New Template Editor". Ini komen yang beliau tinggalkan di blog ini:

Saya masih tak confident nak gunakan template editor yang baru ni, pada masa yang sama, saya ingin menukar warna background pada main page, selain menjadikan blog saya ada border pada sebelah kiri dan kanan. Cumanya, saya ingin minta bantuan saudara untuk buat tutorial tukar background template dengan menggunakan template editor baru ni. Harap saudara sudi pertimbangkan.terima kasih ya.. 

Pertama sekali saya ingin maklumkan. Sebenarnya tidak ada perbezaan yang besar pun diantara "Old Template Editor" jika nak dibandingkan dengan "New Template Editor".  Cuma bezanya adalah dari segi:

• HTML code telah disingkatkan dengan menggunakan fungsi "Dropdown" ataupun "Expand" sahaja.
• Setiap code diringkaskan mengikut ID code masing-masing.
• Fungsi "Ctrl + F" telah diintegrasikan didalam ruangan "Edit HTML" dan bukannya melalui browser internet.
• Dan beberapa lagi fungsi lama yang dinaik taraf.

Jika anda ingin mengubahsuai blog dengan "New Template Editor", anda hanya perlu memanfaatkan fungsi "Ctrl + F" yang telah dimasukkan ke dalam "New Template Editor". Di mana anda perlu klik di dalam ruangan "Edit HTML" terlebih dahulu sebelum anda menekan butang "Ctrl + F" di keyboard laptop mahupun komputer anda. Kemudian carilah code yang ingin diubah dengan menggunakan "Keyword" yang bersesuaian.

Cara yang paling mudah sekali adalah dengan membuka blog anda di halaman baru (New Tab) dan klik kanan pada tetikus komputer (Mouse) dan pilih "Inspect Element". Selepas itu akan terbuka satu ruangan dibawah browser yang memaparkan kedudukan code. Disebelah kiri akan memaparkan code HTML manakala disebelah kanan akan memaparkan CSS Code.

Setakat ini sahaja saya ingin berbicara soal "New Template Editor". Selepas ini saya akan teruskan dengan tutorial yang diminta oleh Nur Imans.

Menggabungkan Intense Debate Bersama Google Plus Comment

Assalamualaikum dan Salam Sejahtera kepada semua tetamu-tetamu Sembang Cyber ~ All In One Blog. Hari ini saya akan kongsikan dengan anda semua, bagaimana hendak menggabungkan Sistem Komen Intense Debate bersama dengan Sistem Komen Google+.

Tutorial kali ini adalah diatas permintaan seorang blogger antarabangsa. Saya rasa beliau tahu pasal penggabungan (combination) antara sistem komen Intense Debate dan Google+ Comment berdasarkan komen yang saya tinggalkan di blog blogger antarabangsa yang bercerita pasal Google+ Comment (agaknyalah). Kalau tidak percaya, boleh lihat sendiri komen beliau di dalam gambar ini:

Permintaan tersebut telah disuarakan oleh Mr Rajeeb. Blogger dari mana itu, anda kenalah tanya sendiri dengan beliau ya. Okaylah, kita berhenti disini dengan mukaddimah kita ya dan teruskan dengan tutorial kita.

Step 1: Install Intense Debate.

Langkah pertama yang perlu anda lakukan adalah dengan menginstall sistem komen "Intense Debate". Macam mana hendak install, silalah melawati laman sesawang Intense Debate.

• Sign Up for Intense Debate Account (Daftar akaun ID).
• Activate your account (Aktifkan akaun).
• Installation process (Proses pemasangan).

Anda perlu memasukkan URL BLOG yang anda ingin pasang sistem komen Intense Debate.

You need put in URL BLOG that you want to install Intense Debate comment system.

Kemudian klik "Next Step". (After that, click "Next Step"). Anda akan dibawa ke halaman ataupun langkah yang seterusnya (You will be brought to page or next step). Sila ikuti langkah-langkah tersebut (Please follow the step).

Jika anda dibawa ke halaman "Choose Platform", sila klik pada "Blogger ataupun Blogspot". (If you brought to "Choose Platform" page, please click in "Blogger or Blogspot")

Arahan / Instruction:

• Display Intense Debate Comments on:
• All new posts (Recommended). Only on posts without comments.
• Choose this option if you want display and use Intense Debate on new post only. This option will show Intense Debate on new post without comment. The post that already have comment will use default comment system. Suitable for those who want use for new post only.
• Sila pilih pilihan ini jika anda ingin memaparkan sistem komen Intense Debate pada artikel terbaru yang belum mempunyai sebarang komen. Mana-mana artikel yang mempunyai komen akan menggunakan sistem komen asal blogspot.
• On all blog posts. This will override the default comment  system on your blog, and replace your previous comments.
• Choose this option if you want replace all comments with Intense Debate. Only recommended for those who expert with coding and want look more professional in blogging world.
• Pilih pilihan ini jika anda ingin menggantikan kesemua komen dengan sistem komen Intense Debate. Hanya disarankan untuk mereka yang pakar dan ingin kelihatan sebagai professional didalam dunia blogging sahaja.

• Just follow the step shown on the picture from step 2 until step 5. (Ikut sahaja arahan dari langkah 2 sehingga langkah 5).

Step 2: Combine Intense Debate with Google+ Comments.

• Buka tab "Edit HTML" dan carilah code Intense Debate sama seperti dibawah ini:
• Open "Edit HTML" tab and find Intense Debate code as below:

<!--Intense Debate--><div id='IDCommentInfoPostTitle' style='display:none'><data:post.title/></div><div id='IDCommentInfoPostTime' style='display:none'><data:post.timestampISO8601/></div><div id='IDCommentInfoPostAuthor' style='display:none'><data:post.author/></div><div id='IDCommentInfoPostCats' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div>  <script type='text/javascript'>var idcomments_acct='881440664e00bb1d88f32c9ac945f3ac'; var idcomments_post_id='<data:post.id/>'; var idcomments_post_url='<data:post.url/>'; var idcomments_post_title=document.getElementById('IDCommentInfoPostTitle').innerHTML;var idcomments_post_author=document.getElementById('IDCommentInfoPostAuthor').innerHTML;var idcomments_post_time=document.getElementById('IDCommentInfoPostTime').innerHTML;var idcomments_post_cats=document.getElementById('IDCommentInfoPostCats').innerHTML;var commentScriptWrapper = document.createElement('SCRIPT');commentScriptWrapper.type = 'text/javascript';commentScriptWrapper.src = 'http://www.intensedebate.com/js/bloggerTemplateCommentWrapper2.php?acct='+idcomments_acct+'&postid='+idcomments_post_id+'&title='+encodeURIComponent(idcomments_post_title)+'&url='+idcomments_post_url+'&posttime='+encodeURIComponent(idcomments_post_time)+'&postauthor='+encodeURIComponent(idcomments_post_author)+'&postcats='+encodeURIComponent(idcomments_post_cats);document.getElementsByTagName('HEAD')[0].appendChild(commentScriptWrapper);</script>
<!--/Intense Debate-->
 <!--Intense Debate-PRE ID <b:include data='post' name='comments'/> -->
</b:if>
<b:if cond='data:blog.pageType == "item"'>      
<!--Intense Debate--><div id='IDCommentInfoPostTitle' style='display:none'><data:post.title/></div><div id='IDCommentInfoPostTime' style='display:none'><data:post.timestampISO8601/></div><div id='IDCommentInfoPostAuthor' style='display:none'><data:post.author/></div><div id='IDCommentInfoPostCats' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div>  <script type='text/javascript'>var idcomments_acct='881440664e00bb1d88f32c9ac945f3ac'; var idcomments_post_id='<data:post.id/>'; var idcomments_post_url='<data:post.url/>'; var idcomments_post_title=document.getElementById('IDCommentInfoPostTitle').innerHTML;var idcomments_post_author=document.getElementById('IDCommentInfoPostAuthor').innerHTML;var idcomments_post_time=document.getElementById('IDCommentInfoPostTime').innerHTML;var idcomments_post_cats=document.getElementById('IDCommentInfoPostCats').innerHTML;var commentScriptWrapper = document.createElement('SCRIPT');commentScriptWrapper.type = 'text/javascript';commentScriptWrapper.src = 'http://www.intensedebate.com/js/bloggerTemplateCommentWrapper2.php?acct='+idcomments_acct+'&postid='+idcomments_post_id+'&title='+encodeURIComponent(idcomments_post_title)+'&url='+idcomments_post_url+'&posttime='+encodeURIComponent(idcomments_post_time)+'&postauthor='+encodeURIComponent(idcomments_post_author)+'&postcats='+encodeURIComponent(idcomments_post_cats);document.getElementsByTagName('HEAD')[0].appendChild(commentScriptWrapper);</script>
<!--/Intense Debate-->
<!--Intense Debate-PRE ID <b:include data='post' name='comments'/> -->

• Selepas anda jumpa code tersebut. Sila tambahkan code "Google+ Comments" selepas code tersebut.
• After you find that code. Please added "Google+ Comments" code after that code.

<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

• Code penuh akan jadi seperti dibawah ini... 
• Full code will be like under...

<!--Intense Debate--><div id='IDCommentInfoPostTitle' style='display:none'><data:post.title/></div><div id='IDCommentInfoPostTime' style='display:none'><data:post.timestampISO8601/></div><div id='IDCommentInfoPostAuthor' style='display:none'><data:post.author/></div><div id='IDCommentInfoPostCats' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div>  <script type='text/javascript'>var idcomments_acct='881440664e00bb1d88f32c9ac945f3ac'; var idcomments_post_id='<data:post.id/>'; var idcomments_post_url='<data:post.url/>'; var idcomments_post_title=document.getElementById('IDCommentInfoPostTitle').innerHTML;var idcomments_post_author=document.getElementById('IDCommentInfoPostAuthor').innerHTML;var idcomments_post_time=document.getElementById('IDCommentInfoPostTime').innerHTML;var idcomments_post_cats=document.getElementById('IDCommentInfoPostCats').innerHTML;var commentScriptWrapper = document.createElement('SCRIPT');commentScriptWrapper.type = 'text/javascript';commentScriptWrapper.src = 'http://www.intensedebate.com/js/bloggerTemplateCommentWrapper2.php?acct='+idcomments_acct+'&postid='+idcomments_post_id+'&title='+encodeURIComponent(idcomments_post_title)+'&url='+idcomments_post_url+'&posttime='+encodeURIComponent(idcomments_post_time)+'&postauthor='+encodeURIComponent(idcomments_post_author)+'&postcats='+encodeURIComponent(idcomments_post_cats);document.getElementsByTagName('HEAD')[0].appendChild(commentScriptWrapper);</script>
<!--/Intense Debate-->
 <!--Intense Debate-PRE ID <b:include data='post' name='comments'/> -->
</b:if>
<b:if cond='data:blog.pageType == "item"'>      
<!--Intense Debate--><div id='IDCommentInfoPostTitle' style='display:none'><data:post.title/></div><div id='IDCommentInfoPostTime' style='display:none'><data:post.timestampISO8601/></div><div id='IDCommentInfoPostAuthor' style='display:none'><data:post.author/></div><div id='IDCommentInfoPostCats' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div>  <script type='text/javascript'>var idcomments_acct='881440664e00bb1d88f32c9ac945f3ac'; var idcomments_post_id='<data:post.id/>'; var idcomments_post_url='<data:post.url/>'; var idcomments_post_title=document.getElementById('IDCommentInfoPostTitle').innerHTML;var idcomments_post_author=document.getElementById('IDCommentInfoPostAuthor').innerHTML;var idcomments_post_time=document.getElementById('IDCommentInfoPostTime').innerHTML;var idcomments_post_cats=document.getElementById('IDCommentInfoPostCats').innerHTML;var commentScriptWrapper = document.createElement('SCRIPT');commentScriptWrapper.type = 'text/javascript';commentScriptWrapper.src = 'http://www.intensedebate.com/js/bloggerTemplateCommentWrapper2.php?acct='+idcomments_acct+'&postid='+idcomments_post_id+'&title='+encodeURIComponent(idcomments_post_title)+'&url='+idcomments_post_url+'&posttime='+encodeURIComponent(idcomments_post_time)+'&postauthor='+encodeURIComponent(idcomments_post_author)+'&postcats='+encodeURIComponent(idcomments_post_cats);document.getElementsByTagName('HEAD')[0].appendChild(commentScriptWrapper);</script>
<!--/Intense Debate-->
<!--Intense Debate-PRE ID <b:include data='post' name='comments'/> -->
<!-- Google Plus Comments -->
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
 <!-- Google Plus Comments -->

• Kemudian klik "PREVIEW", jika tiada error. Bolehlah klik "SAVE". Selepas itu silalah lihat artikel anda untuk memastikan ianya menjadi.
• Then click "PREVIEW", if no error. You can click "SAVE". After that please check your article to ensure it become good.

Please activate your Google+ Comments Function On Your Blog Dashboard. It wouldn't show Google+ Comments if You Not Activate it. 

Minta maaflah ya kalau My English tu tonggang terbalik ataupun tak berapa nak betul. Maklumlah kita ni orang Melayu + Jawa + Banjar, jadi kurang sikit bab-bab "Speaking London" ni. Kalau ada yang salah tu jangan segan silu untuk menegur (Tapi kalau nak menegur biar beradab dan berhemah + berbudi bahasa). Tutorial ini terpaksa combine dengan English sebab ianya atas permintaan blogger antarabangsa. So kenalah ada English nya kan.

Kontes Panduan Blogger by HasrulHassan.com (Promosi)

Assalamualaikum dan Salam Sejahtera. Kontes yang ditunggu-tunggu oleh M'Rie dan rakan-rakan selepas Bro +HASRUL HASSAN  merencanakannya di blog milik beliau beberapa hari yang lalu.

M'Rie join ni pun hanya sekadar untuk mencuba nasib dan selain dari itu penyertaan M'Rie juga bertujuan untuk menunjukkan tanda sokongan sebagai rakan perjuangan dalam arena blogging. Sambil-sambil tu boleh juga mengeratkan silaturrahim sesama bloggerkan.

Kontes ni dianjurkan bermula dari 15 April 2013 sehingga 30 April 2013 (15 hari jer ya). Sesiapa yang nak join dengan M'Rie, dipersilakan mengklik banner disebelah ni. Nanti anda akan diterbangkan ke laman blog dimana kontes dianjurkan.

Hadiah Kontes Panduan Blogger

• 1 x Hadiah Pertama - RM200 + T Shirt Eksklusif OhMedia + Cenderamata Eksklusif.
• 1 x Hadiah Kedua - RM150 + T Shirt Eksklusif OhMedia + Cenderamata Eksklusif.
• 2 x Hadiah Ketiga - RM50 + T Shirt Eksklusif OhMedia + Cenderamata Eksklusif.

Syarat-Syarat Penyertaan dan Pemilihan Pemenang

1. Khas buat blogger yang memegang taraf kewarganegaraan Malaysia dan bermaustatin di Malaysia, yang dok di luar negara tu tak layak kot (tanya sendiri sama penganjur ya).
2. Telah mendaftar sebagai peserta. Kalau belum daftar tu maknanya anda tak layak ler tu.
3. Jawab 3 soalan cepumas dengan betul dan tepat, bukan terpantas menjawab ya.
4. Jawab dengan menghasilkan 1 karya khas bagi ketiga-tiga jawapan. Bukan 1 karya khas untuk setiap jawapan ya.
5. Pastikan anda bukan penaja bagi kontest ni. Kalau menipu memang kena tendang la kamu nanti.

Cara nak Jawab Soalan Kontes Panduan Blogger

1. 3 Soalan cepumas perlu dijawab oleh para peserta yang layak. Soalan cepumas akan disebarkan di Fan Page milik HasrulHassan.com terlebih dahulu sebelum ianya disebarkan di laman blog HasrulHassan.com.
2. Jawapan kepada soalan cepumas adalah bersifat SUBJEKTIF tetapi berkait dengan karya nukilan di dalam blog HasrulHassan.com.
3. Jawapan kepada soalan cepumas WAJIB dijawab dengan menghasilkan 1 karya khas dan bukannya 3 ya.
4. Jawapan wajib dihantar selepas ketiga-tiga soalan diterbitkan di Fan Page facebook dan blog HasrulHassan.com.
5. Link/pautan jawapan tersebut WAJIB disertakan didalam kotak komen karya khusus untuk penghantaran jawapan yang bakal diterbitkan kelak (bilo tu ontah ler, tunggu jer la ya).
6. Setiap entry penyertaan WAJIB disertakan dengan link-link penaja yang disediakan. Tak perlu susah-susah, copy code HTML yang disediakan dan paste didalam entry khas tu jer.

KONTES PANDUAN BLOGGER | Tajaan  OhMedia Network, Eqbalzack.com, RahsiaDuitFree, Aynoranur.com, KhairilMazri.com, MKHakimi.com, Dkna.my, Blogfyna.com, Queachmad.com, JeritPekik.my, Hokangtao.com | Anjuran dan Disediakan oleh PANDUAN BLOGGER BLOGSPOT MALAYSIA

Kontes Panduan Blogger, Kontes