selamat sore dan selamat beristirahat buat pengunjung mywapmaster Alhamdulillah hari ini dapat juga menulis lagi di wap ini, maaf sebelumnya karena tulisan kali ini isinya hanya simpanan lama saya yang telah berdebu yang saya cari tidak ketemu, maklum file folder wap ini sudah tidak tersusun rapi banyak sekali pening dan galau di buatnya, dari itu saya berinisiatif untuk di post saja agar tidak terulang lagi, artikel ini berisi kerangka dasar pembuatan xtgem cocok buat pemula dan buat anda yang mau menggunakan silahkan karena tidak dipungut biaya alias free, file foldernya berisi kode html mentah dari header, footer, tutorial dan tiga file tambahan baru yang saya perbaharui yaitu xt twig blog, xt btwig guestbook atau buku tamu yang semuanya terkhususkan buat xtgem, jangan khawatir walau sudah tersimpan lama html ini mempunyai susunan yang baik dan terarah alias seo sekali, bukan template yang saya pakai sekarang tidak jelas susunannya.

oke saya mulai saja ya sob mohon ijinnya dahulu.

HEADER
- klik file browser > buat file baru beri nama _header > klik tanda tambah / tambahkan blok > code > isi dengan kode html berikut dan ganti nama, deskripsi serta ganti text ykub.xtgem.com > dengan url blogmu TANPA http:// pada search form.
yang lain jangan di ganti.

<!--Header--> <div id="wrapper"> <div id="header-wrapper"> <div id="header"> <div id="logo"> <h1 class="heading"><a href="/index">Name Blog</a></h1> <h2 class="description">masukan deskripsi wap disini</h2> </div> </div> </div> <div id="menu"> <span> <a href="/index">Home</a> </span> <span> <a href="/about.xhtml">About</a> </span> <span> <a href="#navigation-menu">Navigation</a> </span> <div id="search"> <form method="get" action="http://google.com/search"> <input type="hidden" name="sitesearch" value="ykub.xtgem.com"/> <input type="text" name="q" id="search-text" value="" /> <input type="submit" id="search-submit" value="Go" /> </form> </div> </div> <!-- end #menu --> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <!-- Content --> <div id="content">

2. FOOTER

klik file browser > buat file baru beri nama _footer > klik tanda tambah/ tambahkan blok > code > masukan html berikut,

<br /><div id="yn_blog_share"><h3>Share On</h3></div> <div class='share-on'> <div style="text-align:center"> <a class='sfb' href='http://www.facebook.com/sharer.php?u=<xt:url>' target='_blank'></a> <a class='stwit' href='http://twitter.com/share?url=<xt:url>' target='_blank'></a> <a class='sgp' href='http://plus.google.com/share?url=<xt:url>' target='_blank'></a> <a class='smail' href=' mailto:?subject=mywapmaster&body=Have a look : <xt:url>' target='_blank'></a> <script> var uri = window.location.href; var ttle = document.title; document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' class='slintas'></a>"); </script></div></div> <div style="clear: both;">&nbsp;</div> </div> <!-- navigasi / sidebar --> <div id="sidebar"> <ul> <li><h3>Navigation</h3> <a name="navigation-menu"></a> <ul> <img src="http://lh3.googleusercontent.com/-HqVCW8dfONc/AAAAAAAAAAI/AAAAAAAAAAA/EueWxcEgM1k/s46-c-k-no/photo.jpg" alt="profilku.jpg" title="profile" style="border:1px solid #b7b7b7;padding:2px;margin:2px;width:60px;height:62px;float:left;" /><a href="https://plus.google.com/114889141373234671318"><img src="http://www.google.com/images/icons/ui/gprofile_button-16.png" alt="gprofile_button-16.png" title="g+ icon" /> Yakubnay</a><br /> Thanks to <b>ALLAH SWT</b> dan teman-teman wapper serta blogger semua atas dukungannya pada wap ini dengan harapan semoga bermanfaat, sebagai manusia biasa Saya menyadari wap ini jauh dari kesempurnaan, dari itu kritik dan sarannya sangat saya harapkan apapun itu, Agar ( <a href="/about.xhtml">Selengkapnya</a> ) </li> <li><a href="http://www.facebook.com/yakubnay" title="facebook">My Facebook</a></li> <li><a href="http://www.twitter.com/yakubnay" title="twitter">My Twitter</a></li> <li><a href="https://plus.google.com/114889141373234671318" title="google plus">My Google Plus</a></li> <li><a href="http://ykub.xtgem.com" target="_blank">Mywapmaster</a></li> </ul> </li> <li><!-- kategori... untuk mengisi link kategori ambil link dari tag pada artikel dengan mengunjungi artikel lalu klik link tagnya dan copy lalu pastekan dibawah ini (kurang ngerti hub fb.com/yakubnay) contoh ada dibawah --> <h3>Kategori</h3> <ul> <li><a href="http://ykub.xtgem.com/artikel/index?__xtblog_block_id=1&__xtblog_tag=css#xt_blog">Kategori</a> (<xt:blog t_name="counter" entries_per_page="0" tag="nama tag pada artikel"/>)</li> <li><a href="http://link tag blog">kategori</a> (<xt:blog t_name="counter" entries_per_page="0" tag="nama tag pada artikel"/>)</li> <li><a href="http://link tag blog">kategori</a> (<xt:blog t_name="counter" entries_per_page="0" tag="nama tag pada artikel"/>)</li> <li><a href="http://link tag blog">kategory</a> (<xt:blog t_name="counter" entries_per_page="0" tag="nama tag pada artikel"/>)</li> </ul> </li> </ul> </div> <!-- end #sidebar --> <div style="clear: both;">&nbsp;</div> <!-- end #page --> </div> </div> </div> <div id="footer-bgcontent"> <div id="footer"> <p> <script language="JavaScript"> Year=new Date(); var copyright=Year.getUTCFullYear(); document.write("Copyright © " + copyright); </script> <a href="/index">Name Blog</a>. Diberdayakan oleh <a href="http://www.xtgem.com">Xtgem.com</a><br /> <small>Diamond Style</small> </p> <p><!---bagian ini harap jangan dihapus, cuma mau titip link satu saja--->By <a href="http://ykub.xtgem.com" rel="nofollow">Mywapmaster</a></p> </div> <!-- end #footer --> </div>

3. HEADTAGS

Klik file browser > klik buat file (create file) > beri nama _headtags > ok > klik tanda tambah / tambahkan blok > code > masukkan kode ini

<link rel="stylesheet" type="text/css" href="/styles/<xt:get_device_template>.css" media="all,handheld"/>

4. INDEX

File index adalah file utama saat orang mengunjungi wap kamu, melalui file index inilah kita mengarahkan pengunjung ke link-link lainnya, dan disini juga kita dapat menulis artikel baru, oke kita aktifkan tempat menulis artikel, caranya :

Klik file index (file index sudah ada otomatis saat pembuatan akun jika terhapus dapat di buat baru dengan nama index) > klik tanda tambah / tambahkan blok > social > blog > oke

setelah filenya muncul klik XT:Blog > aktifkan fitur > Header and truncated post body and first image > Ok.
agar lebih menarik lagi klik Buka dalam penyunting teks (linknya ada di bagian bawah) > cari kode display_limit="50" lalu ubah angka "50" menjadi "215" > simpan

NOTE
pada file index inilah kita menulis artikel baru dengan klik new post

5. FOLDER TUTORIAL

Masih pembuatan file, selanjutnya kita buat file untuk mengalihkan pengunjung membaca artikel kita. untuk file ini wajib dan tidak boleh diganti dengan nama lain yaitu Tutorial, caranya

klik file browser > buat file > beri nama > Tutorial (Nama diawali huruf besar dan tidak boleh di ubah) > ok > klik tanda tambah / tambahkan blok > code > masukan kode ini

<xt:blog tzone="7" format="Y-m-d" show_time="1" display="5" entries_per_page="3" comments_per_page="5" comments_sort="1" display_limit="215" display_symbol="..." version="1" show_searchbox="1" t_back_to_posts="" t_comments="Comments" t_comments_empty="no comments" t_post_a_comment="new comment" t_name="" t_comment="" t_post="submit" t_tags="" t_search="" t_created="By Mywapmaster" t_showing_tagged_posts="" t_no_entries_found="" t_no_search_results_found="" t_show_all_comments="" t_see_parent_thread="" t_show_all_replies="" t_show_replies="" t_reply="Reply" t_posting_as="" t_comments_login_required="" t_login="" t_signup="" t_confirm_email="" t_report_spam="spam" t_hidden_comment="" />

6. BUKU TAMU

selanjutnya kita buat halaman buku tamu pengunjung atau guestbook, halaman ini berisi biodata admin. caranya

Klik file browser > buat file (create file) > beri nama about.xhtml (nama wajib dan tidak boleh diubah nama lain) > ok > klik tanda tambah / tambahkan blok > code > masukkan kode ini ( edit lagi ganti dengan biodata anda yaitu text, fb, twitter, gplus. yang lain jangan di ganggu coy)

<div class="heading1"><h2 class="post-title">About Me</h2></div><br /> <img src="http://lh3.googleusercontent.com/-HqVCW8dfONc/AAAAAAAAAAI/AAAAAAAAAAA/EueWxcEgM1k/s46-c-k-no/photo.jpg" alt="profilku.jpg" title="profile" style="border:1px solid #b7b7b7;padding:2px;margin:2px; width:60px;height:62px;float:left;" alt="about.png"/> <a href="https://plus.google.com/114889141373234671318"><img src="http://www.google.com/images/icons/ui/gprofile_button-16.png" alt="gprofile_button-16.png" title="g+ icon" /> Yakubnay</a><br /> Thanks to <u>ALLAH SWT</u> dan teman-teman wapper serta blogger semua atas dukungannya pada wap ini dengan harapan semoga bermanfaat, sebagai manusia biasa Saya menyadari wap ini jauh dari kesempurnaan, dari itu kritik dan sarannya sangat saya harapkan apapun itu. Agar wap ini lebih baik kedepannya.<br /><br /> <br/><div class="heading1"><h2 class="post-title">Contact</h2></div><br /><br />Tweet Me<br><a href="https://twitter.com/yakubnay" class="twitter-follow-button" data-show-count="1" data-show-screen-name="false">Follow @yakubnay</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <br /><br />My Facebook<br> <iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fyakubnay&width=120&height=21&colorscheme=light&layout=button_count&show_faces=false&appId=199825720221363" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe><br /> <br />Fanspage<br><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fwapbloggers&width=120&height=21&colorscheme=light&layout=button_count&show_faces=false&appId=199825720221363" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe><br /> <br />Google+<br /> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <div class="g-follow" data-href="https://plus.google.com/117417206807986978269" data-rel="author"></div> <xt:guestbook format="Y-m-d" comments_per_page="20" comments_sort="1" parse_html="0" t_guestbook="" t_guestbook_empty="no comment" t_post_a_comment="new comment" t_name="" t_comment="" t_post="" t_show_all_comments="" t_reply="" t_posting_as="" t_comments_login_required=" to post comments" t_login="" t_signup="" t_confirm_email="" t_report_spam="Spam" t_hidden_comment="" />

Nah semua file utama telah terbentuk namun semua belum indah tanpa dekorasi, jadi kita buat dekornya, pelan-pelan saja sob tidak bayar kok :yay: saya saja menulis ini hampir seminggu jika ada waktu saja, ini tanpa screenshot jika pakai itu mungkin sebulan :wack: kita lanjutkan dengan membuat dekorasinya yaitu twig blog dan twig guestbook, caranya :

8. TWIG BLOG

klik file browser > klik buat folder (create folder) > beri nama foldernya _xtgem_templates > ok.

Masih dalam folder _xtgem_templates > klik buat file (create file) > (pada kolom pertama nama file isi dengan nama) xtblog.twig > (pada kolom kedua type file) pilih TEXT(file teks biasa yang sederhana) > OK > masukkan kode ini

{% if data.translations.t_name == 'counter' %} {{ data.entries|length }} {% else %} {% if data.translations.tname == 'counter' %}{% include 'counter.js' %}{% else %} {% if view == 'entries_list' %} <div class="blog_body"> {% block entries_list %} {% for entry in data.entries %} <div class="xt_blog"><div id="xt_blog_content"><div class="xt_blog_title"><h2 class="title"> <a href="{{ entry.url }}">{{ entry.title }}</a></h2></div> <div class="yn_date">{% if data.entry_list_show_time %} {{ data.translations.t_created }} {{entry.created}}{% endif %}</div> {% if data.display_type != 'header' and entry.content %} <div class="yn_description">{% set img_http=entry.content|split('"') %} {% if img_http[3] starts with 'http' or img_http[3] starts with '/' %} {% set short_desc=entry.content|split('</a>') %} <img src="{{ img_http[3] }}" style="border: 2px solid #eee; padding: 2px; margin: 2px; width: 50px; height: 50px; float: left;" alt="{{ entry.title }}" title="{{ entry.title }}" /> {{ short_desc[1] }} {% else %} <img class="xt_thumbnail" src="http://xtgenerator.yn.lt/img/icon/default1.png" style="border: 1px solid #eee; padding: 2px; margin: 2px; width: 50px; height: 50px; float: left;" alt="{{ entry.title }}" title="{{ entry.title }}" /> {{ entry.content|raw }} {% endif %} [<a href="{{ entry.url }}">Read More</a>]</div> {% endif %} <div class="yn_comment"> <a href="{{ entry.url }}_comments"> {% if entry.comments_count %} {{ entry.comments_count }} {% else %} {{ entry.comments_count }} {% endif %} <span>Comment</span></a></div> </div></div> {% endfor %} {% endblock %} </div> {% block entries_list_footer %} {% if data.back_url %} <div class="yn_back-post"><a href="{{ data.back_url }}">{{ data.translations.t_back_to_posts }}</a></div> {% endif %} {{ data.pagination_html|raw }} {% endblock %} {% block entries_list_searchbox %} {% if data.searchbox %} <div class="xt_search"> <h4 class="xt_search_title">Cari Artikel</h4> <div id="xt_searchbox"> <form action="{{ data.searchbox.url }}" method="get" class="xt_blog_search_form"> {% for key, value in data.searchbox.params %} {% if value %} <input type="hidden" name="{{ key }}" value="{{ value }}" /> {% endif %} {% endfor %} <span class="xt_input"><input type="text" name="__xtblog_search" value="{{ data.searchbox.phrase }}"></span> <span class="xt_submit"><input class="xt_button" type="submit" value="{{ data.translations.t_search }}" /></span> </form> </div></div> {% endif %} {% endblock %} {% elseif view == 'entry' %} <div class="yn_breadcrumbs"><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a href="/" itemprop='url'><span itemprop='title'>Home</span></a></span> » <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a href="/Tutorial" itemprop='url'><span itemprop='title'>Tutorial </span></a></span> » {{ data.post.title }}</div> <div class="xt_top_content"> <div class="blog"> {% block entry_post %} <div class="heading1"><h2 class="post-title">{{ data.post.title }}</h2></div> {% if not data.entry.in_comments_thread %} {% if data.post.subtitle %} <div class="post_subtitle">{{ data.post.subtitle }}</div> {% endif %} <div class="post_content">{{ data.post.content|raw }}</div> {% block entry_tags %} {% if not data.entry.in_comments_thread %} {% if data.hide_tags == false and data.post.tags %} <div class="yn_tags">{{ data.translations.t_tags }} {% for tag in data.post.tags %} <a href="{{ tag.url }}">{{ tag.name }}</a>{% if loop.last == false %} , {% endif %} {% endfor %} </div> {% endif %} {% endif %} {% endblock %} <div class="xt_blog_review"> <div itemscope='' itemtype='http://data-vocabulary.org/Review'> Judul <b><span itemprop='itemreviewed'>{{ data.post.title }}</span></b><br/> Author <b><span itemprop='reviewer'>{{ data.translations.t_created }} {{ data.post.date }}</span></b><br/> Rating <b><span itemprop='rating'>3</span> / 5</b> </div> </div> {# FEATURED SITE DATA #} {% if data.post.feed_data %} {% if data.device == 'mobile' %} {% endif %} {% if data.social_share_enabled %} <div id="xt_social_shares"> <li><h6>Share On: </h6></li><li> <a title="Share on facebook" rel= "nofollow" href="http://www.facebook.com/sharer.php?u={{data.post.url}}" class="xt_fb_share" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('{{ data_post_url[0] }}'), 'facebook-share-dialog', 'width=600,height=400');return false;"> <img height="16px" width="16px" src="http://ykub.xtgem.com/xtblog/images/icon-facebook.png" alt="Share on facebook" /></a> </li><li><a title="Share on twitter" rel= "nofollow" href="http://twitter.com/home?status={{data.post.url}}" class="twitter" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img height="16px" width="16px" src="http://ykub.xtgem.com/xtblog/images/twitter.png" alt="Share on twitter" /></a> </li><li><a title="Share on Google+" rel= "nofollow" href="https://plus.google.com/share?url={{data.post.url}}" class="gp" target="_blank" onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img height="16px" width="16px" src="http://ykub.xtgem.com/xtblog/images/icon-gplus.png" alt="Share on google+" /></a> </li><li><a title="Share via mail" href="mailto:?subject=Have a look&body={{data.post.url}}" class="xt_mail_share" target="_blank" > <img height="16px" width="16px" src="http://xtgem.com/images/email.png" alt="Share via mail"> </a></li> </div><br /> <!-- --> {% endif %} {% endif %} {# END FEATURED SITE DATA #} {% endif %} <div class="yn_back-post"> <a href="{{ data.back_url }}">{{ data.translations.t_back_to_posts }}</a> </div> {% endblock %} </div><div class="yn_comment_blok"> {% block entry_comments_list %} {% if data.post.allow_comments %} {% if data.new_comments_system %} <div class="xt_blog_comments" id="xt_blog_comments"> {% if data.entry.in_comments_thread %} <br /><div><a href="{{ data.entry.comments_thread_all }}" class="xt_button xt_link">&larr; {{ data.translations.t_show_all_comments }}</a></div><br /> {% if data.entry.comments_thread_parent %} <div><a href="{{ data.entry.comments_thread_parent }}" class="xt_button xt_link">&larr; {{ data.translations.t_see_parent_thread }} </a></div> {% endif %} {% endif %} <div class="yn_comment_title"><h3><a name="comments" class="no-link"> {% if data.entry.comments %} {{ data.translations.t_comments }} {% else %} {{ data.translations.t_comments_empty }} {% endif %} </a></h3></div> <div class="yn_comment_body"> {% macro comments_list (comments, ctx) %} {% for comment in comments %} <div class="comment_page{% if comment.owner_of_comment %} {% endif %}" id="1"> <div class="comment-header"> {% if comment.author_profile %} <img src="{{ comment.author_profile.avatars[32] }}" class="avatar"> <h5 class="author"><a href="{{ comment.author_profile.link }}"{% if comment.owner_of_comment %} "{% endif %}>{{ comment.author_profile.name }}</a>{% if comment.owner_of_comment %} (Author){% endif %}</h5> <div class="date">{{ comment.date }}</div> {% else %} <img src="http://xtgenerator.yn.lt/images/user.jpg" class="avatar" /><h5 class="author">{{ comment.nick }}</h5><div class="date">{{ comment.date }}</div> {% endif %} </div> {% if comment.is_hidden %} <div class="comment- content-found">{{ ctx.data.translations.t_hidden_comment }}</div> {% else %} <div class="comment-content">{{ comment.message|raw }}</div> {% endif %} {% if not ( ctx.data.entry.in_comments_thread and comment.childs and (comment.childs_count > 0) ) %} <div class="xt_blog_comment_actions"> <a href="{{ comment.reply_link }} target="_blank" class="xt_blog_comment_action_reply">{{ ctx.data.translations.t_reply }}</a> {% if ctx.data.is_logged_in and not comment.is_hidden and not data.comments_form.is_maintenance %} {% if ctx.data.reported_spam and ctx.data.reported_spam == comment.id %} <span class="xt_blog_comment_action_reported"> {{ctx.data.translations.t_reported}}</span> {% else %} <a href="{{ comment.spam_link }}" class="xt_blog_comment_action_report_spam">{{ ctx.data.translations.t_report_spam }}</a> {% endif %} {% elseif not ctx.data.is_logged_in and not comment.is_hidden and not data.comments_form.is_maintenance %} <a href="{{ comment.login_link }}" class="xt_blog_comment_action_report_spam">{{ ctx.data.translations.t_report_spam }}</a> {% endif %} {% if not comment.childs and (comment.childs_count > 0) %} <a href="{{ comment.reply_link }}" class="xt_blog_comment_action_reply">{{ ctx.data.translations.t_show_replies }} ({{comment.childs_count}}) </a> {% endif %} {% if comment.show_more %} <a href="{{ comment.reply_link }}" class="xt_blog_comment_action_reply">{{ ctx.data.translations.t_show_all_replies }}</a> {% endif %} </div> {% endif %} {% if comment.childs %} <div class="xt_reply"> {{ _self.comments_list (comment.childs, ctx) }} </div> {% endif %} </div> {% endfor %} {% endmacro %} </div> {{ _self.comments_list(data.entry.comments, _context) }} {{ data.pagination_html|raw }} {% else %} <div class="xt_blog_comments" id="xt_blog_comments"> <span class="xt_blog_comments_title">{{ data.translations.t_comments }}</span> {% for comment in data.entry.comments %} <div class="xt_blog_comment"> <span class="xt_blog_comment_date"> [{{ comment.date }}]</span> <span class="xt_blog_comment_author">{{ comment.nick }}:</span> <div class="xt_blog_comment_content">{{ comment.message|raw }}</div> </div> {% endfor %} </div><br /> {{ data.pagination_html|raw }} {% endif %} {% endif %} {% endblock %} </div></div> {% block entry_comments_form %} {% if data.comments_form.is_maintenance %} {{ data.comments_form.maintenante_markup|raw }} {% elseif data.is_logged_in and data.new_comments_system and not data.community_name %} <span class="color:#f00">{{ data.translations.t_provide_community_name }}</span> <form action="{{ data.community_name_submit_url }}" method="post" id="xt_blog_comment_form"> {% if data.entry.in_comments_thread %} <input type="hidden" name="__xtblog_comment_thread_id" value="{{ data.entry.in_comments_thread }}" /> {% endif %} <div class="xt_input"> <input type="text" name="community_name" value="{{data.community_name_tmp}}" /><br /> <div class="xt_submit"> <input class="xt_button" type="submit" value="{{ data.translations.t_submit }}" /> </div> </form> </div></div> {% else %} {% if data.post.allow_comments %} <div class="blog"> <div class="yn_comment_title"><h3><a name="comments" class="no-link">{{ data.translations.t_post_a_comment }}</a></h3></div><div class="xt_blog_comment_form"> {% if data.comments_form.comments_restriction == "logged_in" and not data.is_logged_in %} <div>{{ data.translations.t_comments_login_required }}: <a href="{{ data.comments_form.login_link }}"> {{ data.translations.t_login }} </a> | <a href="{{ data.comments_form.signup_link }}"> {{ data.translations.t_signup }} </a></div> {% elseif data.comments_form.comments_restriction == "logged_in" and data.is_logged_in and not data.is_confirmed_email %} <div> <a href="{{ data.confirm_email_link }}?redir={{ data.comments_form.url_encoded }}" class="xt_blog_confirm_email"> {{ data.translations.t_confirm_email }} </a> </div> {% else %} <form action="{{ data.comments_form.url }}" method="post" id="xt_blog_comment_form"> {% if data.entry.in_comments_thread %} <input type="hidden" name="__xtblog_comment_thread_id" value="{{ data.entry.in_comments_thread }}" /> {% endif %} <input type="hidden" name="__xtblog_post" value="Post" /> <input type="hidden" name="__xtx" value="{{ data.comments_form.fields.xtx }}" /> <input type="hidden" name="__xtxs" value="{{ data.comments_form.fields.xtxs }}" /> <input type="text" name="__xtblog_blog" value="" style="display:none" /> <input type="hidden" name="__xtblog_entry" value="{{ data.comments_form.entry_id }}" /> {% if data.is_logged_in and data.new_comments_system %} <div class="xt_label"> <label>{{ data.translations.t_posting_as }}: <span class="xtblog_community_name">{{ data.community_name }} </span></label> </div> {% else %} {% if data.comments_form.spam_comments_reserved_name and data.new_comments_system %} <div>{{ data.translations.t_reserved_name }}</div> {% endif %} {% if data.comments_form.poster %} <input type="hidden" name="__xtblog_nick" value="{{ data.comments_form.poster }}" /> {% else %} {{ data.translations.t_name }} <br> <input type="text" name="__xtblog_nick" value="{{ data.comments_form.spam_comments_nick }}" class="input-text" /><br /> {% endif %} {% endif %} {% if data.comments_form.comments_restriction == "email_required" and not data.is_logged_in %} <div class="xt_label"> <label>{{ data.translations.t_email }} </label> </div> <div class="xt_input"> <input type="text" name="__xtblog_email" value="{{ data.comments_form.spam_comments_email }}" /><br /> </div> {% endif %} <div class="xt_label"> <label>{{ data.translations.t_comment }} </label> </div> <div class="xt_textarea"> <textarea id="xtblog_comment_msg" name="__xtblog_msg">{{ data.comments_form.spam_comments_msg }}</textarea> </div> {% if data.comments_form.spam_comments %} Please enter the text you can see on the image below: <br /> <input type="hidden" name="hash" value="{{ data.comments_form.spam_hash }}" /> <img src="{{ data.comments_form.spam_captcha_url }}" alt="" /><br /> <div class="xt_label"> <label>Code: </label> </div> <div class="xt_input"> <input type="text" name="code" /> </div><br /> {% endif %} <div class="xt_submit"> <input class="xt_button" type="submit" value="{{ data.translations.t_post }}" /> </div> </form> {% endif %} </div> {% endif %} {% endif %} {% endblock %} </div></div> {% elseif view == 'no_contents' %} {% block no_contents %} {% if data.searchbox.phrase %} <div class="xt_blog xt_list">{{ data.translations.t_no_search_results_found }}</div> {% else %} <div class="xt_blog xt_list">{{ data.translations.t_no_entries_found }}</div> {% endif %} {% endblock %} {% block no_contents_searchbox %} {% if data.searchbox %} <div class="blog"> <form action="{{ data.searchbox.url }}" method="get" class="xt_blog_search_form"> {% for key, value in data.searchbox.params %} {% if value %} <input type="hidden" name="{{ key }}" value="{{ value }}" /> {% endif %} {% endfor %} <span class="xt_input"><input type="text" name="__xtblog_search" value="{{ data.searchbox.phrase }}" /></span> <span class="xt_submit"><input class="xt_button" type="submit" value="{{ data.translations.t_search }}" /></span> </form> </div> {% if data.back_url %} <div class="xt_container"><a href="{{ data.back_url }}" class="xt_blog_back_to_posts xt_link xt_button">{{ data.translations.t_back_to_posts }}</a></div> {% endif %} {{ data.pagination_html|raw }} </div> {% endif %} {% endblock %} {% elseif view == 'no_entry' %} {% block no_entry %} <div class="xt_blog xt_list">No blog entry found</div> {% endblock %} {% endif %} {% endif %} {% endif %}

itulah kode dekorasi blog xtgem, sekarang kode decor buat buku tamu.

9. TWIG GUESTBOOK

untuk membuat file guestbook ini sama dengan membuat file xtblog diatas tadi, Klik folder _xtgem_templates > klik buat file (create file) > (pada kolom pertama nama file isi dengan nama) xtguestbook.twig > (pada kolom kedua type file) pilih TEXT(file teks biasa yang sederhana) > OK > masukkan kode ini

{% block guestbook_comments_form %} {% if data.comments_form.is_maintenance %} {{ data.comments_form.maintenante_markup|raw }} {% elseif data.is_logged_in and not data.community_name %} <div class="yn_comment_title"><h3><a name="comments" class="no-link">{{ data.translations.t_provide_community_name }}</a></h3> </div><div class="list1"> <form action="{{ data.community_name_submit_url }}" method="post" class="post new"> {% if data.in_comments_thread %} <input type="hidden" name="__xtcomments_thread_id" value="{{ data.in_comments_thread }}" /> {% endif %} <input class="input" type="text" name="community_name" value="{{data.community_name_tmp}}" /> <input class="submit" type="submit" value="{{ data.translations.t_submit }}" /> </form> </div> {% else %} <div class="yn_comment_title"><h3><a name="comments" class="no-link">{{ data.translations.t_post_a_comment }}</a></h3> </div> {% if data.comments_form.comments_restriction == "logged_in" and not data.is_logged_in %} <div class="error"> <b>{{ data.translations.t_comments_login_required }}:</b> <a href="{{ data.comments_form.login_link }}"> {{ data.translations.t_login }} </a> <a href="{{ data.comments_form.signup_link }}"> {{ data.translations.t_signup }} </a> </div> {% elseif data.comments_form.comments_restriction == "logged_in" and data.is_logged_in and not data.is_confirmed_email %} <div class="breadcrumbs"> <a href="{{ data.confirm_email_link }}?redir={{ data.comments_form.url_encoded }}"> {{ data.translations.t_confirm_email }}</a> </div> {% else %} {% if data.comments_form.spam_comments_reserved_name %} <div class="breadcrumbs">{{ data.translations.t_reserved_name }}</div> {% endif %} <div class="blog"><div class="xt_blog_comment_form"> <form action="{{ data.comments_form.url }}" method="post" class="post new"> {% if data.entry.in_comments_thread %} <input type="hidden" name="__xtcomments_thread_id" value="{{ data.entry.in_comments_thread }}" /> {% endif %} <input type="hidden" name="__xtx" value="{{ data.comments_form.fields.xtx }}" /> <input type="hidden" name="__xtxs" value="{{ data.comments_form.fields.xtxs }}" /> <input type="text" name="__xtcomments_comments" value="" style="display:none" /> {% if data.is_logged_in %} <label>{{ data.translations.t_posting_as }}: <span class="author" style="color:#990000;">{{ data.community_name }}</span><br> </label> {% else %} {% if data.comments_form.poster %} <input type="hidden" name="__xtcomments_nick" value="{{ data.comments_form.poster }}" /> {% else %} <label>{{ data.translations.t_name }} <br> <input class="input" type="text" name="__xtcomments_nick" value="{{ data.comments_form.spam_comments_nick }}" /><br> </label> {% endif %} {% endif %} {% if data.comments_form.comments_restriction == "email_required" and not data.is_logged_in %} <label>{{ data.translations.t_email }} <br> <input class="input" type="email" name="__xtcomments_email" value="{{ data.comments_form.spam_comments_email }}" /> <br> </label> {% endif %} <label>{{ data.translations.t_comment }} <br> <textarea name="__xtcomments_msg">{{ data.comments_form.spam_comments_msg }}</textarea> </label> {% if data.comments_form.spam_comments %} <input type="hidden" name="hash" value="{{ data.comments_form.spam_hash }}" /> <label> Please enter the text you can see on the image below: <br> <img src="{{ data.comments_form.spam_captcha_url }}" title="captcha" alt="" /><br> <input class="input" type="text" name="code" /> </label> {% endif %} <div class="xt_submit"> <input class="xt_button" name="submit" type="submit" value="{{ data.translations.t_post }}" /> </form><br /> <b><font color="blue">Bbcode On</font></b> </div></div></div> {% endif %} {% endif %} {% endblock %} {% block guestbook_comments_list %} {% if data.in_comments_thread %} <div class="breadcrumbs"> <a href="{{ data.comments_thread_all }}" class="">{{ data.translations.t_show_all_comments }}</a> </div> {% endif %} {% macro comments_list (comments, ctx) %} {% for comment in comments %} <div class="comment_page{% if comment.owner_of_comment %} {% endif %}" id="1"> <div class="comment-header"> {% if comment.author_profile %} <img src="{{ comment.author_profile.avatars[32] }}" title="author" alt="*" class="avatar"> <h5 class="author"><a href="{{ comment.author_profile.link }}"{% if comment.owner_of_comment %} "{% endif %}>{{ comment.author_profile.name }}</a>{% if comment.owner_of_comment %} (Author){% endif %}</h5> <div class="date">{{ comment.date }}</div> {% else %} <img src="http://xtgenerator.yn.lt/images/user.jpg" title="user.jpg" alt="*" class="avatar" /><h5 class="author">{{ comment.nick }}</h5><div class="date">{{ comment.date }}</div> {% endif %} {% if comment.is_hidden %} <div class="comment-found">{{ ctx.data.translations.t_hidden_comment }}</div> {% else %}<div class="comment-content"> {{ comment.message|raw }}</div> {% endif %} {% if comment.childs %} <div class="xt_reply">{{ _self.comments_list(comment.childs, ctx) }} </div> {% endif %} </div> {% if not ( ctx.data.entry.in_comments_thread and comment.childs and (comment.childs_count > 0) ) and not comment.owner_of_comment%} <div class="xt_blog_comment_actions"> {% if ctx.data.visitor_is_admin and not comment.childs %} <a href="{{ comment.reply_link }}" class="xt_blog_comment_action_reply">{{ ctx.data.translations.t_reply }}</a> {% endif %} {% if ctx.data.is_logged_in and not comment.is_hidden and not data.comments_form.is_maintenance %} {% if ctx.data.reported_spam and ctx.data.reported_spam == comment.id %} <span class="xt_blog_comment_action_reported"> {{ctx.data.translations.t_reported}}</span> {% else %} <a href="{{ comment.spam_link }}" class="xt_blog_comment_action_report_spam">{{ ctx.data.translations.t_report_spam }}</a> {% endif %} {% elseif not ctx.data.is_logged_in and not comment.is_hidden and not data.comments_form.is_maintenance %} <a href="{{ comment.login_link }}" class="xt_blog_comment_action_report_spam">{{ ctx.data.translations.t_report_spam }}</a> {% endif %} </div> {% endif %} </div> {% endfor %} {% endmacro %} {{ _self.comments_list(data.comments, _context) }} {{ data.comments_pagination_html|raw }} <div class="yn_breadcrumbs"><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a href="/" itemprop='url'><span itemprop='title'>Home</span></a></span> » <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a href="/Tutorial" itemprop='url'><span itemprop='title'>Tutorial </span></a></span> » <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a href="{{ data.post.title }}" itemprop='url'><span itemprop='title'>Guestbook </span></a></span></div> {% endblock %}

selesai mendekorasinya namun masih belum indah tanpa css, dengan css akan terasa lengkap, apa apalah gitu.
10. TEMPAT MENYIMPAN CSS OTOMATIS

agar kode css terarah kita dapat membuat sebuah folder, melalui folder ini css dapat kita atur misal tampilan otomatis wap (ponsel) dan web (komputer), caranya :

Klik panel > file browser > buat folder (create folder) > beri nama styles (nama styles wajib tidak boleh diubah) > ok.

kita buat css tampilan mobile jika dilihat dari ponsel caranya

masih di folder styles > klik buat file (create file) > kolom pertama beri nama mobile.css (nama mobile.css tidak boleh diganti) > kolom kedua type file pilih TEXT(file teks biasa yang sederhana) > OK > masukkan kode ini sebagai bahan percobaan

@import url(http://ykub.xtgem.com/xtblog/diamondblue/mobile.css);

saatnya tampilan desktop buat pengunjung yang datang melalui PC web, caranya sama dengan diatas membuat file klik folder styles > klik buat file (create file) > kolom pertama beri nama web.css (nama web.css tidak boleh diganti) > kolom kedua type file pilih TEXT(file teks biasa yang sederhana) > OK > masukkan kode ini sebagai bahan percobaan

@import url(http://ykub.xtgem.com/xtblog/diamondblue/web.css);

selesai sob cuapekkk

oh ya sob mungkin tutorial diatas terdapat kode yang hilang atau text yang terpotong dan tidak jelas dari itu saya sudah menyiapkan file zip lengkap dengan tutorialnya dapat di download disini.
kerangka_dasar_xtgem.zip