Info untuk blogger



Salam untuk semua blogger.

Blog ini dibuat untuk membantu semua blogger yang menguruskan blog masing-masing. Semua cara untuk mengurus blog saya sertakan disini, Termasuk cara nak iklan kat blog, cara buat duit dari blog, cara buat duit dari blog, cara urus templet blog, cara post artikel/entri blog dan segala macam hal berkenaan denga blog.

 Semoga bermanafaat untuk kalian.

Selamat Berblogger,
TQ



Tutorial 146: Recent Posts Widget for Blogger

Assalammualaikum,
Ini adalah tutorial untuk tahun 2018.
Banyak request tutorial tapi aku buat mana yang mampu.
Maklumlah sibuk je memanjang.

Kali ni nak ajar tutorial yang mudah sahaja. Cuma copy dan paste sahaja. Tak perlu main coding sampai terbeliak biji mata. Jom kita mula. Tapi korang kena pilih salah satu recent post widget mengikut kesukaan korang.

1. Colorful Recent Posts


<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_number = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

2. Gallery Recent Posts


<style>
/* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"https://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var arlina_thumbs = 72;
var arlina_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

3. Simple Recent Posts


<div class="recentpostarea">
<style type="text/css">
.recentpostarea {list-style-type: none;counter-reset: countposts;}
.recentpostarea a {text-decoration: none; color: #49A8D1;}
.recentpostarea a:hover {color: #000;}
.recentpostarea li:before {background: #69B7E2;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}
li.r-p-title { padding: 5px 0px;}
.r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;}
.recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style>
<script type = "text/JavaScript">
function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }}
 </script>
 <script>
 var posts_number = 9;
 var posts_date = true;
 var post_summary = true;
 var summary_chars = 80;
 </script>
 <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
 <noscript>Your browser does not support JavaScript!</noscript>
</div>

Petunjuk:
var posts_number
(boleh tukar kepada bilangan yang korang suka)


1. Pilih antara salah satu code recent post widgets seperti di atas. COPY code kesukaan korang.

2.Login ke Blogspot, clik Layout > Add a Gadget (Sidebar)  > HTML/JavaScript 

2. PASTE ke dalam Html/Java Script

3. SAVE dan LIHAT HASILNYA.

Selamat mencuba.


Assalammualaikum,

Hari ni aku nak share 1 tutorial semudah ABC je, insyaallah boleh jadi punya?
Maaflah, sejak berkurun lama tak update tutorial. Busy je memanjang.
Kali ni tutorial button media sosial seperti facebook, instagram, twitter kat sidebar korang.
Dengan murah hati cik farah ni nak kongsi tutorial, siap nak bagi freebies button lagi.

Macam kat sidebar aku nih,

1.Login ke Blogspot, clik Layout > Add a Gadget (Sidebar)  > HTML/JavaScript 

2. Copy code di bawah dan paste ke dalam Html/Java Script



<center><table border="0"><tbody><tr><td>

<a href="https://www.facebook.com/nurfaraharryna" target="_blank"><img alt=" Add Me" src="http://3.bp.blogspot.com/-dp222O_ehNg/VL-6Ih8ylMI/AAAAAAAAD8s/J47qCoyOfLU/s1600/Facebook.png" style="width:50px;height:50px" /></a></td><td>

<a href="https://twitter.com/fara_idola" target="_blank"><img alt=" Follow Me" src="http://1.bp.blogspot.com/-arcuFOH03ng/VL-6Y7bODdI/AAAAAAAAD9Q/b3kBiF08vZQ/s1600/Twitter.png" style="width:50px;height:50px" /></a></td><td>

<a href="https://www.instagram.com/puteri_nurfarah/" target="_blank"><img alt=" Follow Me" src="http://1.bp.blogspot.com/-MkMAEv6jQ6Y/VL-6YzYzMpI/AAAAAAAAD9M/p04eZTjc4lg/s1600/Instagram.png" style="width:50px;height:50px" /></a></td><td>

<a href="https://www.pinterest.com/" target="_blank"><img alt=" Follow Me" src="http://2.bp.blogspot.com/-rl0FbWXeSMc/VL-6I_XxgHI/AAAAAAAAD8w/UDLYFSSa5W0/s1600/Pinterest.png" style="width:50px;height:50px" /></a></td>

</tr></tbody></table></center>

Tukar:
BIRU - Link Facebook
MERAH - Link Twitter
OREN - Link Instagram
UNGU - Link Pinterest

Kalau nak letak Facebook page boleh tambah code di bawah:

<a href="https://www.facebook.com/blogmissfarah/" target="_blank"><img alt=" Follow Me" src="https://2.bp.blogspot.com/-q7SM9lSbApk/WZ6XqYSy-eI/AAAAAAAAAk4/PhUfc9VHvBcjh1LRwNcqC59XIUO3bwXKwCLcBGAs/s1600/Facebook.png" style="width:50px;height:50px" /></a></td>

Sebelum code HIJAU 

</tr></tbody></table></center>

3. SAVE dan lihat hasilnya.

Nak yang lain? Boleh cuba TUTORIAL INI juga.


Pastinya ramai yang dah mahir dalam aspek pembinaan blog sendiri kan.

Tetapi adalah lebih baik jika kita dapat menambahkan skil tentang cara membuat Blogspot supaya kelihatan lebih cantik dan menarik. Tanpa perlu pandai Coding, Script ataupun Grafik.

Ini penting bagi menarik minat pelawat anda agar selalu berkunjung ke blog anda. Anda boleh hias atau menggubah mengikut kesesuaian dan citarasa anda sendiri.



Sebelum itu, buat anda yang baru nak berjinak dalam membina blog sendiri, Saya ada menyediakan serba sedikit panduannya disini:
CARA MEMBUAT BLOG SENDIRI MENGGUNAKAN PALTFORM PERCUMA BLOGSPOT

p/s - panduan ini agak ringkas dan mudah untuk difahami. Ikut jer step nya!

Bagaimana Mengubah Template Blogspot Agar Lebih Cantik Dan Menarik Dengan Mudah

Perkara asas dan pertama yang perlu anda fahami adalah berkenaan:
  • Fungsi yang disediakan
  • Cara guna yang betul



Ini perlu supaya anda faham dan tahu cara nak betulkan semula jika berlaku sebarang kesilapan semasa mengedit template tersebut.

Tapi jangan bimbang, senangjer nak betulkan nanti.

Langkah 1: Backup template sebelum edit


Penting : Pastikan Anda Membuat Back-Up Dahulu Sebelum Membuat Sebarang Perubahan!

Caranya:
  1. Klik - THEME
  2. Klik - BACKUP/ RESTORE (penjuru atas kanan)
  3. Klik - Download (Sila 'SAVE' dan berikan nama template anda)

Langkah 2: Edit template


Berikut adalah beberapa langkah atau cara yang perlu anda lakukan jika ingin menjadikan template blog tersebut nampak kemas, cantik dan mengikut citarasa yang anda inginkan.



Cara Edit nya begini:
  • #1. Customize: Klik fungsi customize untuk pilih atau ubah design template anda. 
  • #2. Background: Fungsinya adalah untuk buang atau tukar latar belakang blog. Anda boleh memuat naik background pilihan anda sendiri jika mahu dan rasa ianya lebih menarik. 
  • #3. Advance: Fungsi ini adalah untuk mengedit warna, saiz tulisan. Anda juga boleh pilih Font atau jenis tulisan yang anda fikirkan sesuai. Tapi jangan over sangat. Nanti pening pelawat nak baca sebab banyak sangat color nya.

Selepas setiap perkara yang anda ubah, anda boleh tekan butang "PREVIEW" terlebih dahulu untuk melihat hasilnya.



Jika anda sudah berpuas hati, klik butang "PERMOHONAN UNTUK BLOG", dan templat Blogspot secara automatik akan menjadi penonton blog anda.



Langkah 3: Muat turun Templat Percuma


Terdapat banyak templat yang menarik dan percuma untuk memuat turun dan menggunakan.



Hanya melakukan carian Google.



Anda hanya perlu tahu cara memasang dan mengkonfigurasi templat.



Jika anda fikir anda boleh melakukannya sekarang. Atau ...



Tunggu artikel seterusnya mengenai "Cara memasang templat percuma"!



KESIMPULAN
Anda tidak perlu risau tentang membuat perubahan sekiranya anda mempunyai sandaran terlebih dahulu.



Anda boleh membuat percubaan dan kesilapan sehingga anda berpuas hati.



Yang penting adalah percuma, dan anda tidak akan dikenakan bayaran.



Tetapi berhati-hatilah hanya kerana anda mempunyai banyak artikel, jangan lakukan apa-apa yang dilarang Blogger.

Mendapatkan khidmat seorang ahli atau Pakar SEO Malaysia berpengalaman untuk meningkatkan jumlah pelawat secara organik adalah sangat penting dalam membantu anda membina perniagaan secara online.

Persoalannya siapakah Pakar SEO dan Google Malaysia?

Bagaimana memilih orang yang paling layak dan mampu naikkan ranking kata-kunci atau keyword di enjin carian Google serta lain-lain Search Engine?

Sekurang-kurangnya mestilah Top 5 kan serta mampu menarik ramai pelanggan baru melalui lalu lintas web setiap hari.
siapakah pakar google SEO


Assalamualaikum ...!

Ia adalah menarik dan panas topik bit, serta perkhidmatan semasa SEO-pakar, yang dicadangkan oleh pakar-pakar dan jurutera dari Malaysia SEO-perunding.

Setiap daripada mereka bersemangat dan yakin dalam menyediakan perkhidmatan terbaik untuk memenuhi pelanggan. Man mesti terkesan. Tahniah!

Apakah kriteria untuk memilih pakar SEO?
Sebagai pelanggan, anda perlu tahu bahawa keperluan untuk perkhidmatan profesional Malaysia untuk SEO atau pakar SEO untuk SEO bukan sahaja untuk meningkatkan kedudukan laman web dan meningkatkan bilangan pengunjung, tetapi juga lebih meluas.

Antara prinsip asas:

Kenal pasti sasaran khalayak atau sasaran pengunjung betul
Pilih kata kunci atau kata kunci yang paling relevan
Pilihan dan penstrukturan semula halaman web yang dapat memberikan penukaran yang tinggi.
Penggunaan gambar dan frasa "copywriting" adalah menarik dan melekit.
Rundingan mengenai pengurusan maklum balas dengan pengguna.
Terdapat banyak orang dan organisasi atau syarikat yang menawarkan perkhidmatan SEO, menunjukkan testimoni tentang bagaimana mereka berjaya meletakkan kata kunci pada contoh Google.

Tetapi anda perlu tahu bahawa tidak semua kata kunci ini mempunyai TINGKAT KOMPETITIF DAN BANYAK SUIT.

Tanpa pengoptimuman, mudah untuk mencapai kedudukan tertinggi.

PENTING:

WALAU BAGAIMANAPUN SEHEBAT AHLI INSTITUT DAN SEARCH, NO KEYBOARD UNTUK DIPOHON Darat TOP-3 dalam setiap masa!

Tidak mudah melakukan SEO sekarang ... Tuan Google sibuk menari ... hehe!
siapakah pakar google SEO

Apabila anda mencari pekerjaan, mari kita lakukan seperti yang dijanjikan. UNDANG-UNDANG UNDANG-UNDANG FIXED STAFF.

Tidak, tidak ada masalah. Ups dan downs adalah sebab mengapa terdapat banyak pakar SEO di Malaysia.

Beberapa Blogger adalah pakar dan pakar dalam bab pengoptimuman kata kunci.

Siapa yang membuat perkhidmatan SEO sambilan tersedia. Baik ... sains tidak menyelamatkan,

Siapa pakar untuk berkongsi beberapa cadangan mengenai perkara yang perlu dilakukan?

Website Bukan Untuk Dijenguk Orang…Buat Rugi Bayar Servis SEO


siapakah pakar google SEO
Hasil Pakar SEO Google Malaysia Mestilah Tip Top

Anda perlu sedar bahawa tanpa menghiraukan pengalaman atau kepakaran anda dalam pengoptimuman enjin carian (SEO), jika pelanggan tidak menerima pulangan dan keuntungan, anda sebenarnya boleh dianggap sebagai perunding.

Terdapat juga banyak kes, blog atau laman web, dan kedudukannya ok dan pelawat boleh menghalangnya.

Kos perkhidmatan adalah tip-top! Memetik nombor 4 boleh didapati.

Tetapi malangnya pulangan "keluar" atau tidak seperti yang diharapkan.

Sebagai hakikatnya, ini adalah masalah besar untuk pakar atau perunding SEO.

Ini boleh menyebabkan pelanggan anda hilang kerana jumlah pengunjung akan jatuh secara tidak disangka-sangka.

p / s - Jangan biarkan pelanggan berjalan tanpa membayar udahle :)

Oleh itu, tidak hairanlah ramai pelanggan telah memulakan isu sosial seperti Facebook dan cara percuma dan bebas kos lain untuk tujuan promosi dan untuk membuat jualan di Internet.

Dan akhirnya, pakar Google terbaik dan ahli SEO yang berpendidikan tinggi akan berpindah ke destinasi yang sama.



Bagi anda yang berminat untuk belajar mengenai Blog, berikut adalah beberapa petua untuk memulakan dan menggunakan platform Blogspot percuma ini seperti Blogger.

Ini adalah cara yang paling mudah dan termudah untuk mendapatkan pengekodan dan sebagainya. Hanya ikuti langkah seterusnya.

Ok ... ada beberapa cara dan langkah mudah yang perlu anda lakukan. Antara berikut:



1. e-mel: harus ada alamat e-mel kedua gmail dan yahoo dll. Lebih mudah menggunakan akaun Gmail.

2. Blogger A / C: Klik pada pautan Blogspot anda di sini dan di sini - BLOGGER.COM

3. Log masuk: gunakan akaun e-mel anda untuk mendaftar / login.

4. Buat blog: klik pada "Buat blog baru"

5. Tajuk: masukkan tajuk blog anda. Ex: Saya suka makan

6. Alamat: di sini adalah pautan anda atau blog anda. Ex: "jommakan.blogspot.com"

7. Templat: hanya pilih "model" yang anda suka!

8. Penerbitan: Klik pada "jawatan baru" untuk artikel pertama.

9. Tajuk: masukkan tajuk artikel yang anda mahu. Tidak memerlukan masa yang lama.

10. Artikel: tuliskan semua maklumat berkenaan tajuk artikel anda.

11. Label: masukkan label pada artikel. Ex: "Sarapan"

12. Simpan / Preview: anda boleh mengklik pada butang "Preview" untuk melihat siaran anda.

13. Terbitkan: jika anda sudah cukup menulis, klik pada butang "PUBLISH".

Selesai!

Anda telah membuat atau mengemas kini blog pertama anda. Tahniah ...

Jangan lupa untuk mendapatkan maklumat lanjut di sini untuk menjadikan blog anda lebih menarik, seperti memuat naik imej dan tetapan blogspot.




Assalammualaikum w.b.t,

Hari ini adalah pelajaran khas untuk blogger yang bosan dengan blogging.

Jika ini adalah pakar , anda akan melakukannya ...

Tutorial kali ini, bagaimana untuk menyiarkan item tersebut. Sekiranya ia kali pertama saya mempunyai suara, ia adalah idea yang tidak baik. Dah la dengan rupa blogger baru yang tidak terkejut. 😡



1. Klik pada laman web ini ===> https://www.blogger.com

2. Click SIGN IN untuk masuk ke laman web blogger

3. Masukkan email…..tekan NEXT dan masukkan PASSWORD seterusnya click SIGN IN.


4. Click bahagian POST seperti gambar di atas dan click NEW POST.

Ckick untuk pertumbuhbesaran
5.  Rujuk gambar di atas.

- Tulis tajuk posting korang
- Entry-posting korang
- Labels (label sangat penting agar posting/entry korang lebih tersusun dan sistematik) contoh: blog tutorial, so bila orang click labels blog tutorial semua entry/posting yang berkaitan dengan blog tutorials akan keluar jadi reader senang nak baca entry/posting korang.

6. Lepas siap semua tu bolehlah PUBLISH yerrr…

Selamat mencuba! Happy blogging.

Assalamualaikum lama tak berkongsi tutorial.

Kali ini sangat murah hati untuk berkongsi menu pengekod bar menu baru, terutamanya bagi mereka yang bosan dengan tab menu lama ... sy tidak meminta apa-apa pampasan ... pengetahuan yang ada harus dikongsi untuk berkat-berkat yang dikongsi .

Kali ini dengan jenis bar menu bersama dengan menu drop-down menu menengah atau orang.

Bar menu kelihatan seperti ini:


Tapi ada special sikit dia ada sub menu di bawahnya seperti ni :



So lebih jimat ruang dan lebih tersusun blog korangkan...


1.Login ke Blogspot, clik Template > Edit HTML > Rujuk sini

2. Selepas itu...cari code ini ]]></b:skin> dengan cara tekan CTRL F
3. Copy code di bawah dan PASTE di ATAS/SEBELUM code yang korang cari tadi.

#menubar{
border-bottom:4px solid #ff0000;
width:1025px;
height:32px;
background:#000000;
float:center;
margin-bottom:3px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
background: #ff0000;
color: #fff;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #ff0000;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #000000;
color: #ffffff;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##ff0000;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}  

Petunjuk:
Code #ff0000 (border bawah menubar),  
1025px (lebar menubar), 
#000000(background menubar).

4. Try Preview, jika tak ada sebarang masalah. SAVE sahaja.

5. Selepas itu, Copy code di bawah:

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html'>Tutorial Blog</a></li>
<li><a href='http://bicarafarah.blogspot.com/p/my-review-collection.html'>Produk Review</a></li>
<li><a href='http://bicarafarah.blogspot.com/2012/08/tempahan-design-dan-edit-blog.html'>Tempahan Blog</a>
<ul>
<li><a href='http://bicarafarah.blogspot.com/p/info-dan-tips.html'>Info/Tips</a></li>
<li><a href='http://bicarafarah.blogspot.my/p/blog-page_16.html'>Header Design</a></li>
<li><a href='http://bicarafarah.blogspot.my/p/portfolio-header-design.html'>Blog Design</a></li>
<li><a href='http://bicarafarah.blogspot.my/search/label/full%20template'>Contoh Template</a></li>
</ul>
</li>
</ul>
</div>

6. Pergi ke Layout Blog > Add Gadget > Html/JavaScript (bahagian crosscol) dan Paste code di atas dalam Html/JavaScript tapi ubah dulu :

Petunjuk:
http://bicarafarah.blogspot.my - link korang
Home - tab menu title
http://bicarafarah.blogspot.my- sub menu/drop tab menu

7. Save dan lihat hasil.

*kenapa pakai tab menu ni bagus? Sebab kemas dan tersusun..boleh letak banyak menu...boleh delete, add ubah bila-bila masa, jimat masa daripada nak design kat PS.

 Sekian itu sahaja. Selamat mencuba. Doakan Cik Farah Murah rezeki..❤❤❤❤❤




Assalamualaikum.

Sibuk sangat sehingga dia tidak bercakap tentang blog. Banyak komen hebat bertanya tentang soalan ini Kat untuk memperluas Templat Widget ?? Awak tahu, awak tahu. Saya tahu saya belum tahu.

1.Login ke Blogspot, clik Template > Edit HTML >




2. Lepas korang buka edit HTML, akan jumpa coding macam ni. Pastikan kat tepi tu scroll atas sekali. dan jumpa tanda  dan akan keluarlah Expand Widget Templates.




3. Kalau nak find coding dalam tu, pastikan cursor korang click dalam kotak edit HTML dan tekab Ctrl + F untuk mengeluarkan button serach seperti gambar di bawah.



5. Sekarang boleh cari coding yang korang nak..Selamat Mencuba...






Iklan yang diletakkan di blog boleh menjana pendapatan semasa anda membuat blog, tetapi meletakkan iklan berada di tempat yang tepat untuk menarik pengunjung untuk mengklik iklan blog anda.

meletak iklan

Cara meletakkan iklan didalam posting
1.masuk kedashboard blog anda
2.Klik pada template dan pilih edit html

dashboard blog

3.cari kod <data:post.body/> pada template ,gunakan CTRL+F (jika belum biasa gunakan ikuti tutorial ini)

cari perkataan



4.Salin kod iklan dan letakkan seperti dibawah ini

<data:post.body/>
<center>CODE IKLAN ANDA</center>

5.Klik pada preview dan simpan template anda jika tiada error

Redpite Blogger Template.

Alhamdulillah, akhirnya siap juga eksperimen Redpite Blogger Template.

Dahulu Megpite, sekarang Redpite.

Apa bezanya? Dan apa yang bagusnya Template Redpite ini?

Bezanya adalah warna sahaja. Megpite warna temanya ialah putih-biru. Dan untuk Redpite pula warna temanya merah-hitam.

Lebih menawan daripada yang sebelum ini. Tambahan lagi Redpite dilengkapi dengan 5 ciri premium.

Nak tahu?

Baca lagi.


5 Ciri Premium Redpite Blogger Template

  • Mesra SEO (HTML5, siap pasang open-graph meta tag dan sudah optimasi schema.org).
  • Responsive design (Boleh semak di sini).
  • Elegant.
  • Stylish comment system.
  • Ringan dan pantas (Ambil masa 4.11 saat sahaja untuk habis loading).

Bagaimana Pasang Template Redpite pada Blog

Penting: Sebelum nak tukar template baru, backup dahulu template lama.

1. Pergi ke Blogger Dashboard > Template > Edit HTML.

2. Buka fail Redpite Blogger Template menggunakan notepad atau notepad++ (Saya syorkan anda guna notepad++ sebab ia memudahkan untuk edit template).

3. Select-all (Ctrl + A) > Copy kod template Redpite (Ctrl + C).

4. Pergi ke Edit HTML > Select-all > Dan paste (Ctrl + V).

5. Save template.

Seterusnya, setting blog.

Edit Popular Post Sidebar

1. Pergi ke > Layout > Cari Entri Hangat > Klik Edit > Setting seperti di bawah:

Entri Hangat


2. Save.

Edit Popular Post Footer

1. Dalam Layout > Cari Terhangat > Klik Edit > Setting seperti di bawah:

Terhangat

2. Save.

Edit Pages

1. Dalam Layout > Cari Pages > Klik Edit > Kosongkan ruang Title seperti gambar di bawah:

Edit Pages

2. Save

Edit Kotak Tentang Admin

1. Pergi ke Template > Edit HTML > Cari kod:

<div class='author-bio'>

KLik pada gambar untuk gambaran lebih jelas.


Tukar:

1) Danial Abdul Rahim - Dengan nama anda.

2) https://lh5.googleusercontent.com/-Tg0Ltpa-x64/AAAAAAAAAAI/AAAAAAAAARc/tkGTjmQ2Ink/s80-c-k/photo.jpg - Dengan URL gambar anda.

3) Tuan Danial - Dengan nama anda.

4) Pakar dalam perubatan Blogspot dan Hukum Tarikan. &#39;Mengkaji&#39; tentang kehidupan sejak 1996. Misinya membantu manusia meningkatkan kualiti hidup agar dunia lebih aman dan makmur. - Dengan pengenalan anda.

2. Save template.

Daripada Penulis

Akhirnya, template ini berjaya dilancarkan dengan baik. Semuanya dibantu oleh grup sokongan Seni Bina Blog Premium Blogger Support dan juga Subscriber SBB.

Tidak dilupakan juga maklum balas daripada Tuan Hanafi Abdullah mengenai masalah tarikh, Tuan Hisham Mohamad mengenai kotak tentang Admin, Tuan Khairil Mazri mengenai masalah template tak boleh upload dan juga Cikpuan Sya Isya.

Terima kasih dan saya hargai maklum balas daripada anda semua, yang secara tidak langsung terlibat dalam ini eksperimen ini.

Kalau terjumpa bug atau ingin beri pendapat mengenai template Redpite, boleh komen di bawah.

Saya sudi mendengar. ^_^

Facebook Popup Like Box Timer.
Salah satu cara untuk tingkatkan like adalah dengan pasang Facebook Popup dalam blog.

Namun, apabila dicari tutorial berkaitan Facebook Like Popup banyak tutorial yang tidak menjadi.

Jadi, saya ambil inisiatif untuk membantu anda pasang widget Facebook Like Popup Timer yang betul-betul menjadi dan berfungsi.

Saya sudah cuba berkali-kali dan widgetnya terbukti berfungsi. Saya ambil daripada Kaki Network. Boleh lihat demi di bawah:


Tutorial Pasang Widget Facebook Like Popup Timer

Ikut 4 langkah mudah pasang widget:

1. Pergi ke Blogger dashboard > Template > Edit HTML.

2. Cari kod:

<body>

Kalau tidak jumpa, cari yang ini:

<body

Tip: Guna Ctrl + F untuk memudahkan carian anda.

3. Di bawahnya, letak kod ini:

<style type='text/css'>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}#fblikebg{background:none repeat scroll 0 0 #000000;display:none;height:100%;left:0;opacity:1!important;position:fixed;top:0;width:100%;z-index:100}#fblikepop #closeable{float:right;margin:7px 15px 0 0;}#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:14px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}#fblikepop #actionHolder{overflow:hidden;}#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
    kakinetworkdotcom01username="pages/Putera-izmancom/329480917076612",
    kakinetworkdotcom01title="Sila Like Untuk Menerima Info Berguna",
    kakinetworkdotcom01skin="http://1.bp.blogspot.com/-IEuia--cuY8/UC4BCmnjVeI/AAAAAAAAJ3I/w7jBqfho9HY/s1600/FBLikePopUp04.png",
    kakinetworkdotcom01time="30",
    kakinetworkdotcom01wait="0",
    kakinetworkdotcom01lang="my"
//]]>
</script>
<script src='http://yourjavascript.com/21313234350/tawaunetwork.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
    $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Sebelum nak tambah kod di atas, edit dahulu.

Cari kod:

pages/Putera-izmancom/329480917076612

Gantikan dengan URL Facebook page anda.

4. Save template.

Penerangan Kod

kakinetworkdotcom01title="Sila Like Untuk Menerima Info Berguna",

Boleh ubah:

Sila Like Untuk Menerima Info Berguna

Dengan apa sahaja ayat yang anda mahu.

kakinetworkdotcom01skin="http://1.bp.blogspot.com/-IEuia--cuY8/UC4BCmnjVeI/AAAAAAAAJ3I/w7jBqfho9HY/s1600/FBLikePopUp04.png",

Boleh ubah:

http://1.bp.blogspot.com/-IEuia--cuY8/UC4BCmnjVeI/AAAAAAAAJ3I/w7jBqfho9HY/s1600/FBLikePopUp04.png

Dengan URL gambar yang anda mahu.

kakinetworkdotcom01time="30",

Boleh ubah:

30

Dengan masa yang anda mahu. 30 itu untuk 30 saat. Andai mahu ia paparkan selama 5 minit, tukar sahaja 30 jadi 300.

Andai Widget-Nya Tidak Berfungsi, Bagaimana?

Punca ia tidak fungsi adalah kerana plugin jquery.

Tambah plugin ini untuk buat ia berfungsi:

1. Cari kod:

</head>

2. Di atasnya, tambah kod ini:

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

3. Save template.

Jika tidak berjaya juga, mohon komen di ruang komenter.

Daripada Penulis

Sebenarnya banyak lagi widget-widget Facebook Popup yang betul-betul berfungsi.

Salah satu yang saya jumpa ialah Facebook Popup (Like Box Widget).

Kalau anda baca diruang komenter dalam blog teresbut, ada jumpa satu lagi widget Facebook Popup versi Twitter Bootstrap.

Dan jangan lupa G+ entri ini. Terima kasih.

Total Pageviews

Search This Blog

Powered by Blogger.

Followers

Translate

Popular Posts

Preview

Blog ini untuk membantu blogger menguruskan blog mereka.

Info untuk blogger Salam untuk semua blogger. Blog ini dibuat untuk membantu semua blogger yang menguruskan blog masing-masing. Sem...