Macam Mana Cara Nak Reka Blogger Template Sendiri
Tutorial ini akan merangkumi langkah-langkah yang diperlukan untuk mencipta template blogger anda sendiri. Ramai orang telah menggunakan blogger untuk menjalankan blog-blog dan tertanya-tanya bagaimana mereka boleh membuat tema sendiri untuk digunakan .
Untuk membuat template blogger, anda akan memerlukan editor grafik (Seperti Photoshop, GIMP, atau Cat) untuk mewujudkan imej untuk latar belakang, tajuk post, bar sisi, dll. Anda juga akan memerlukan idea atau wawasan tentang apa yang anda mahu cipta. Tanpa itu, anda hanya membuang masa dan elektrik anda. Akhir sekali, anda perlu tahu mengenai CSS (Cascading.Style.Sheets), dan bagaimana untuk mengendalikan mereka. Jika anda tidak tahu bagaimana untuk berbuat demikian, anda tidak boleh mencipta kesan yang menarik untuk template baru anda (Seperti: Meletakkan gambar atau teks, mewujudkan latar belakang berulang , bergerak di sekitar gambar dan teks dan banyak lagi).
Sebaik sahaja anda telah mendapat semua yang anda perlukan, anda perlu memulakan Rangka Kerja CSS dengan meletakkan sifat-sifat seperti:
body[ background-color: #000000; margin: 0 auto; font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 14px;}
#title [ font-size: 32px; color: #000011; }
Satu senarai asas ini tag yang telah diambil dari tema mudah putih Blogger boleh didapati di sini: (PDF File) Senarai Tags XML Blogger Of CSS. Cara yang lebih mudah untuk melakukan ini adalah untuk mencari tema yang anda suka dan copy dan paste CSS, mengedit.Ini lebih menjimatkan masa anda. Satu-satunya masalah dengan melakukan perkara itu adalah setiap tema kejuruteraan berbeza jadi tag akan berubah.
Selepas mengkonfigurasi Helaian gaya CSS anda, anda perlu simpulkan ia bersama-sama dalam HTML. Ini boleh dicapai dengan menggunakan struktur yang sama.
<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>
Jangan lupa untuk merujuk penulis blog template yang telah dicipta untuk widget yang diperlukan yang anda sepatutnya meletakkan di kawasan-kawasan tertentu. Tanpa melakukan ini, anda tidak dapat melengkapkan membuat template anda sendiri.
Ini merupakan bahagian yang amat sukar yang anda boleh lakukan sendiri,tetapi akan ambil masa berjam-jam untuk menyiapkan atau anda boleh copy je dari laman web lain dan edit ikut kreativiti anda. Blogger dikonfigurasi menggunakan widget. Semua post anda adalah hanya satu widget besar yang kod di atas sana. Contoh kod yang anda boleh taip sendiri atau copy adalah:
<div class=’post-footer’>
<p class=’post-footer-line post-footer-line-1′><span class=’post-author’>
<b:if cond=’data:top.showAuthor’>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span> <span class=’post-timestamp’>
<b:if cond=’data:top.showTimestamp’>
<data:top.timestampLabel/>
<b:if cond=’data:post.url’>
<a class=’timestamp-link’ expr:href=’data:post.url’ title=’permanent link’><data:post.timestamp/></a>
</b:if>
</b:if>
</span> <span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class=’post-icons’>
<!– email post links –>
<b:if cond=’data:post.emailPostUrl’>
<span class=’item-action’>
<a expr:href=’data:post.emailPostUrl’ expr:title=’data:top.emailPostMsg’>
<span class=’email-post-icon’> </span>
</a>
</span>
</b:if>
<!– quickedit pencil –>
<b:include data=’post’ name=’postQuickEdit’/>
</span> </p>
<p class=’post-footer-line post-footer-line-2′><span class=’post-labels’>
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
</b:loop>
</b:if>
</span> </p>
kod yang diterjemahkan ke dalam segi manusia mengawal apa yang berlaku di bahagian bawah setiap post ... Dalam kes ini penulis, masa, comment link dan label. Untuk mengekstrak kod dari template lain, hanya klik butang "Expand Template Widget" dan ia adalah di bawah stylesheet pada template tertentu.
Kebanyakan membuat template hanya percubaan dan kesilapan. Jika anda lihat pada kod dan cuba simpulkan ia bersama-sama sedikit demi sedikit .. anda akhirnya akan berjaya mencipta template anda sendiri. Saya harap tutorial ini dapat membantu anda mencipta template anda sendiri.
* Update *
Setiap kod dalam template yang tidak perlu digunakan boleh diubah suai agar sesuai dengan apa yang anda inginkan. Sebagai contoh, anda tidak perlu memasukkan "Label" dalam setiap posting jika ia akan membuatkan template anda kelihatan teruk.
translate from bradblogging.com
Untuk membuat template blogger, anda akan memerlukan editor grafik (Seperti Photoshop, GIMP, atau Cat) untuk mewujudkan imej untuk latar belakang, tajuk post, bar sisi, dll. Anda juga akan memerlukan idea atau wawasan tentang apa yang anda mahu cipta. Tanpa itu, anda hanya membuang masa dan elektrik anda. Akhir sekali, anda perlu tahu mengenai CSS (Cascading.Style.Sheets), dan bagaimana untuk mengendalikan mereka. Jika anda tidak tahu bagaimana untuk berbuat demikian, anda tidak boleh mencipta kesan yang menarik untuk template baru anda (Seperti: Meletakkan gambar atau teks, mewujudkan latar belakang berulang , bergerak di sekitar gambar dan teks dan banyak lagi).
Sebaik sahaja anda telah mendapat semua yang anda perlukan, anda perlu memulakan Rangka Kerja CSS dengan meletakkan sifat-sifat seperti:
body[ background-color: #000000; margin: 0 auto; font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 14px;}
#title [ font-size: 32px; color: #000011; }
Selepas mengkonfigurasi Helaian gaya CSS anda, anda perlu simpulkan ia bersama-sama dalam HTML. Ini boleh dicapai dengan menggunakan struktur yang sama.
<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>
Jangan lupa untuk merujuk penulis blog template yang telah dicipta untuk widget yang diperlukan yang anda sepatutnya meletakkan di kawasan-kawasan tertentu. Tanpa melakukan ini, anda tidak dapat melengkapkan membuat template anda sendiri.
Ini merupakan bahagian yang amat sukar yang anda boleh lakukan sendiri,tetapi akan ambil masa berjam-jam untuk menyiapkan atau anda boleh copy je dari laman web lain dan edit ikut kreativiti anda. Blogger dikonfigurasi menggunakan widget. Semua post anda adalah hanya satu widget besar yang kod di atas sana. Contoh kod yang anda boleh taip sendiri atau copy adalah:
<div class=’post-footer’>
<p class=’post-footer-line post-footer-line-1′><span class=’post-author’>
<b:if cond=’data:top.showAuthor’>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span> <span class=’post-timestamp’>
<b:if cond=’data:top.showTimestamp’>
<data:top.timestampLabel/>
<b:if cond=’data:post.url’>
<a class=’timestamp-link’ expr:href=’data:post.url’ title=’permanent link’><data:post.timestamp/></a>
</b:if>
</b:if>
</span> <span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class=’post-icons’>
<!– email post links –>
<b:if cond=’data:post.emailPostUrl’>
<span class=’item-action’>
<a expr:href=’data:post.emailPostUrl’ expr:title=’data:top.emailPostMsg’>
<span class=’email-post-icon’> </span>
</a>
</span>
</b:if>
<!– quickedit pencil –>
<b:include data=’post’ name=’postQuickEdit’/>
</span> </p>
<p class=’post-footer-line post-footer-line-2′><span class=’post-labels’>
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
</b:loop>
</b:if>
</span> </p>
kod yang diterjemahkan ke dalam segi manusia mengawal apa yang berlaku di bahagian bawah setiap post ... Dalam kes ini penulis, masa, comment link dan label. Untuk mengekstrak kod dari template lain, hanya klik butang "Expand Template Widget" dan ia adalah di bawah stylesheet pada template tertentu.
Kebanyakan membuat template hanya percubaan dan kesilapan. Jika anda lihat pada kod dan cuba simpulkan ia bersama-sama sedikit demi sedikit .. anda akhirnya akan berjaya mencipta template anda sendiri. Saya harap tutorial ini dapat membantu anda mencipta template anda sendiri.
* Update *
Setiap kod dalam template yang tidak perlu digunakan boleh diubah suai agar sesuai dengan apa yang anda inginkan. Sebagai contoh, anda tidak perlu memasukkan "Label" dalam setiap posting jika ia akan membuatkan template anda kelihatan teruk.
translate from bradblogging.com
Comments
Post a Comment