Showing posts with label Blogger Templates. Show all posts
Showing posts with label Blogger Templates. Show all posts
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. ^_^

Megpite Blogger Template v1.4
Saya dapat mesej daripada Cik Matahariku tentang bagaimana nak tambah iklan di dalam template Megpite.

Maka saya mengambil inisiatif dengan menambah beberapa ciri-ciri baru untuk template Megpite.

Nak tahu apakah ciri-cirinya?

Baca lagi...

Megpite v1.5



Kemaskini #1: Tempat Iklan

1. Di Atas Wrapper

Cari kod ini di dalam template:

<!-- MULA: Iklan Outer-Wrapper -->

Gantikan:

<img border="0" src="http://i.imgur.com/UVNB9wL.png"></img>

Dengan kod iklan anda.

2. Di Bawah Tajuk Entri

Cari kod ini di dalam template:

<!-- MULA: Iklan Bawah-Tajuk -->

Gantikan:

<img border="0" src="http://i.imgur.com/coKkIPR.gif"></img>

Dengan kod iklan anda.

3. Di Akhir Entri

Cari kod ini di dalam template:

<!-- MULA: Iklan Akhir-Artikel -->

Gantikan:

<img border="0" src="http://i.imgur.com/coKkIPR.gif"></img>

Dengan kod iklan anda.

Kemaskini #2: Deskripsi Blog


Deskripsi template Megpite


Kemaskini #3: Syntax Highlighter

*Untuk advanced user sahaja.

Ciri ini sesuai untuk blog yang niche tutorial blog.

Anda boleh guna syntax ini dengan menggunakan kod:

<pre><code>

KOd HTML atau CSS atau Javascript

<pre><code>

Dan paste dalam post.

Kemaskini #4: Like dan Share Button Facebook


Facebook like and share button

Kemaskini #5: Attribution Auto Hide



Terima kasih kepada Tuan Anuar kerana mengeur saya tentang link attribution. Kini veri 1.5 serta merta akan menghilangkan widget tersebut.

Daripada Penulis

Dari masa ke semasa saya cuba untuk menambahkan lagi ciri-ciri yang terbaik dalam template Megpite untuk anda agar dapat memaksimakan penggunaan template Megpite.

Andai anda sebarang pertanyaan tentang template Megpite, anda boleh ajukan di ruang komen. Dan jangan lupa kongsikan sebarkan entri ini.

Terima kasih. :)

KEMASKINI: Download template versi tebaru di sini (megpite versi terbaru).

Megpite Blogger Template
Semenjak jadi Otaku, masa saya untuk berblog semakin kurang.

Sekarang baru saya faham kenapa orang sanggup berhabis duit kerana Anime.

Baiklah. Balik kepada cerita asal, saya sempat juga menyiapkan satu lagi template Blogspot selepas template Johny Simple Master.

Kali ini, saya membawa kelainan yang elegan dan template ini direka untuk disayangi. Maklumlah banyak sangat tonton Anime Romance sesampaikan rasa cinta melimpah-limpah.

Template ini ringan dan minimalis serta sudah dioptimasi mesra SEO lagi disukai pembaca.

Maka, mari kita lihat templatnya dengan lebih dalam:




Bagaimana untuk Menggunakan Template Megpite



1. Upload Template Megpite

Pergi ke Blogger Dashboard > Template > Klik Backup / Restore > Browse ... > Upload Template Megpite.


2. Setting Menu

> Selepas upload Template, pergi ke Layout.

> Klik "Edit" pada widget Link List.

> Tambah menu dengan letak New Site Name dan New Site URL.

> Dan tekan Add Link.

Anda boleh tambah seberapa banyak link pada menu Link List yang anda mahu.


3. Setting Popular Post Sidebar

> Klik "Edit" pada widget Popular Post.

> Setting seperti gambar rajah di bawah:


Setting Popular Post


> Dan klik Save.


4. Setting Popular Post Footer Column

> Selepas setting Popular Post Sidebar, cari perkataan "Terhangat" di dalam halaman Layout.

> Setting seperti gambar di bawah:


Setting Terhangat


> Dan klik Save.


5. Tambah Widget Komen Terkini

> Di dalam halaman Layout, cari perkataan Komen Terkini pada sidebar.

> Selepas itu, klik "Edit" dan tambah / ganti kod di bawah dalam kotaknya:


<style type="text/css" scoped>
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px 
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #ddd;}
.kangismet_recent a {text-decoration:none;}
.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;width:35px;height:35px}
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Kang Ismet';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>
> Dan klik Save.


6. Setting Email Newsletter

> Pergi ke Template.

> Cari perkataan ini: Danialde4


Setting Email Newsletter

> Ubah perkataan tadi dengan perkataan Feedburner anda.

> Dan Save Template.

Maka, anda sudah selesai setting template-nya.


Daripada Penulis

Template ini sebenarnya berasal daripada blog BlogTipsNTricks dan saya ambil inspirasi daripada blog Copyblogger.

Digabung dengan kedua-duanya maka jadilah template Megpite. Simpel lagi elegan. Dan direka untuk disayangi.

Andai anda mengalami sebarang masalah ketika memasang template Megpite, utarakan masalahnya di ruang komen. Nescaya saya membantu anda dengan pantas.

[UPDATED: 24-9-2013, waktu Malaysia]
Penambahbaikan:
  • Popular post terbaru.
  • Buang, Showing post with label... show all posts.
  • Tambah Open Graph Meta Tag.
  • Remove butang tweet sebab terlalu berat.
  • Optimasi template agar mesra SEO dengan rahsia terkini.
Johny Simple Master, freemium blogger template 
Assalamualaikum WBT dan selamat sejahtera kepada tetamu yang dihormati. Itulah saya katakan. blogger template ini boleh memuat turun SECARA FREE!!!

Tak tipu. Memang pada awalnya saya nak meletakkan harga RM37 kerana keistimewaan template ini daripada pelbagai ciri yang sempurna.

Walaubagaimanapun, saya bermurah hati untuk memberikan template yang saya design selama 3 BULAN.

3 Bulan. Memang agak lama nak dikatakan.

Sebenarnya template ini ada keburukan dan kebaikannya jadi mari kita lihat apakah keburukannya dahulu.

Keburukan Template Ini

Aik? Kata template harga RM37 tapi kenapa ada keburukan?

Pelik.

Tidak pelik sebenarnya. Template ini pada asasnya di ambil daripada laman PremiumBloggerTemplates.com dan di redesign mengikut daya imaginasi saya tambahan daripada inspirasi blog MyBloggerTricks.

Jadi, kalau anda pengguna template dari PBT anda sudah tahu yang page layout dalam template ini tidak tersusun.

page layout


Itulah keburukannya.

Persoalanya. Adakah ianya ada kesan apa-apa yang negatif pada blog anda?

Jawapannya = Tidak. Tidak ada kesan di mana-mana sekali pun.

Kalau trafik blog? tidak kurang malahan jika anda menggunakan template ini lagi tinggi trafik blog anda.

Kebaikan Template Ini.

1) Mesra SEO

Di cipta khas mesra SEO. Mesra SEO dari hujung rambut hingga ke hujung kaki :D

Jadi apakah yang membuat template ini Mesra SEO?
  1. Template ini HTM5 > Google suka pada laman HTML5
  2. Sudah mengoptimumkan title untuk enjin carian
  3. Ada Meta Tags
  4. Ada open graph meta tags
  5. Ada rich snippets review > Star rating
  6. Sudah mengoptimumkan link untuk carian
  7. Lagi? Base on thesis for blogspot theme

Nak lagi? Amboi, tamaknya. Itu pun sudah cukup Mesra. Kalau terlebih mesra akan menyebabkan blog anda kecundang pada akhirnya.

2) Widgets

Template ini juga ada beberapa widget yang "Power". iaitu:
  1. CSS3 Popular Post
  2. Recent Post
  3. CSS3 sosial bookmarking and share
  4. Translate
  5. Related post
  6. Breadcrumb
  7. Stat pada footer bar
  8. Drop down menu
  9. Subscription box dan drop down label
  10. Sosial profile
  11. CSS3 pagination
  12. Auto read more

3) Design

Design saya membuat color berwarna biru. Biru laut.

Color dia ialah:

Blue, Black, Silver, White, Red

Font?

Oswald, Verdana dan juga Courgette. Mungkin lebih lagi.

Setting

Edit meta tags

YOUR NAME HERE!!! - Gantikan dengan Nama anda

Sekarang nak letak description untuk blog.

Pergi ke blogger dashboard > Settings > Search preferences > Meta tags

Ok, pada meta tags itu anda lihat ada > Description.

Pada sebelah kanan ada tulisan "Edit"

Klik pada Edit itu

Dia akan kata "Enable search description?" > Tick > Yes

Akan keluar satu kotak. Dalam kotak itu tulislah description blog anda.

Tips
  • Kebanyakannya orang selalu tanya nak tulis description apa? Ok, Description itu bermaksud. Blog anda tentang apa? Tentang widget ke? Tentang blog ke?
  • Kalau blog saya tentang Diari yang akan memotivasikan untuk berblogging. Bagaimana pula anda?

P/S: Jangan pendek sangat. Sekurang-kurangnya minimun 100 huruf+Space.

<!-- Top sosial profiles -->

Edit sosial profil icon

Cari/Search > Top sosial profiles

P/S: Kalau nak search tekan CTRL+F > Kat firefox akan keluar bar kat bawah / Chrome akan keluar bar kat top-right.

http://twitter.com/
http://facebook.com/
https://plus.google.com/
http://www.linkedin.com/
mailto:your@email.com

Ganti setiap link dengan link sosial profile anda.

<!-- START: CSS3 Drop down menu -->

Edit CSS3 drop down menu - Cari > CSS3 Drop down menu

<nav id='de4-menu-wrap'>
<ul id='de4-menu'>
<li><a href='/'>Home</a></li>
<li>
<a href='URL-Here'>Categories</a>
<ul>
<li>
<a href='URL-Here'>CSS</a>
<ul>
<li><a href='URL-Here'>Item 11</a></li>
<li><a href='URL-Here'>Item 12</a></li>
<li><a href='URL-Here'>Item 13</a></li>
<li><a href='URL-Here'>Item 14</a></li>
</ul>
</li>
<li>
<a href='URL-Here'>Graphic design</a>
<ul>
<li><a href='URL-Here'>Item 21</a></li>
<li><a href='URL-Here'>Item 22</a></li>
<li><a href='URL-Here'>Item 23</a></li>
<li><a href='URL-Here'>Item 24</a></li>
</ul>
</li>
<li>
<a href='URL-Here'>Development tools</a>
<ul>
<li><a href='URL-Here'>Item 31</a></li>
<li><a href='URL-Here'>Item 32</a></li>
<li><a href='URL-Here'>Item 33</a></li>
<li><a href='URL-Here'>Item 34</a></li>
</ul>
</li>
<li>
<a href='URL-Here'>Web design</a>
<ul>
<li><a href='URL-Here'>Item 41</a></li>
<li><a href='URL-Here'>Item 42</a></li>
<li><a href='URL-Here'>Item 43</a></li>
<li><a href='URL-Here'>Item 44</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='URL-Here'>Work</a>
<ul>
<li><a href='URL-Here'>Work1</a></li>
<li><a href='URL-Here'>Work2</a></li>
<li><a href='URL-Here'>Work3</a></li>
<li><a href='URL-Here'>Work4</a></li>
</ul>
</li>
<li><a href='URL-Here'>About</a></li>
<li><a href='URL-Here'>Contact</a></li>
</ul>
</nav>

URL-Here > Gantikan dengan url yang anda mahukan

<!-- Feedburner Bar -->

Edit Feedburner - Cari > Feedburner Bar

mailverify?uri=Danialde4
value='Danialde4

Danialde4 > Gantikan dengan Nama/URL feedburner anda.

Recent Post

Pergi ke layout > Klik Add a Gadget > Cari > HTML/JavaScript dan klik > Masukkan kod dibawah

<!-- Start: Danialde4.blogspot.com -->
<!-- Script: Section -->
<script>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;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=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTw40HPM1CiqnqWIlzgKUNFiMIRwnhY7-iqHiARmHUVR04SoOYteORov5o1nBiiJjgSFwcOlAYByMjOe06PSGmYSwtyEGCgZAoR1Ca5cFjHvt0P8eyFILsakin8MZ2Mpxv2BQEuX80a8Cg/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=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";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');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,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

<style>
img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}
</style>

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
</script>

<script type="text/javascript" src="http://johny-simplemaster.blogspot.com/feeds/posts/default/?orderby=updated&alt=json-in-script&callback=labelthumbs">
</script>
<!-- End: Danialde4.blogspot.com -->

Edit

johny-simplemaster.blogspot.com > Gantikan dengan url blog anda

var numposts = 5; > Berapa banyak yang anda ingin paparkan recent post. Saya pilih 5 anda pula bagaimana?

var showpostthumbnails = true; > Post thumbnail. Kalau tak nak paparkan thumbnail tukar kepada false

var displaymore = false; > Read more button. True untuk paparkan

var displayseparator = false; > Separator. True kalau nak paparkan

var showcommentnum = false; > Jumlah komentar. True kalau nak paparkan

var showpostdate = false; > Tarikh. True kalau nak paparkan

var showpostsummary = false; > Summary. True kalau nak paparkan

var numchars = 80; > Don't know. Harap maaf ^_^

P/S: Jangan lupa pula nak letak title "Recent Post"

Sekarang barulah anda boleh lihat dan download templatenya :)

Dari Penulis...

Alhamdulillah, alhamdulillah diucapkan dan kesyukuran tidak terhingga kepada Allah SWT kerana memberi peluang untuk saya membuat satu template yang pertama pada usia yang agak muda iaitu pada umur 16 tahun.

Macam tak percaya. Tapi saya percaya pada diri saya sendiri :D

Kalaulah dulu masa mula-mula kenal dengan blogspot saya dah berputus asa mungkin sekarang saya tidak berjaya membuat template ini.

Jadi, kalau anda tak nak guna juga. Tepuk dada, tanya siapa yang rugi?

P/S: Kalau ada sebarang masalah komen-komenlah di bawah, InsyaAllah saya dapat bantu anda ;)

Total Pageviews

Search This Blog

Powered by Blogger.

Followers

Translate

Popular Posts