Senin, 06 Mei 2013

Modifikasi Threded Komen Di blogger Ala Bp

Bp_Threded_KomenSetelah sekian lama mencari dan membandingkan tutorial tentang threaded komen di dunia maya ini , Akhirnya pencarian berakhir pada sebuah tutorial tentang threded komen dari bX-NicoNico , di mana sistem threded komen yang di buatnya menggunakan tag blogger data:comment.inReplyTo yang akan mengembalikan id dari komentar induk , dan menggunakan loop blogger untuk menunjukan balasan komentar . Dari artikel tersebutlah saya mencoba mempelajari dan mengembangkan kode-kode untuk threded komen yang akan kita bahas kali ini , baik di bagian Css maupun HTML . Sesuai dengan judul postingan ( Modifikasi Threded Komen Di blogger Ala Bp ) , Threded Komen yang akan kita buat kali ini , telah saya rubah kata-katanya kedalam bahasa indonesia baik pada bagian author maupun pada tomblol reply dan delete sehingga menjadi Jawab dan Hapus .

Dan adapun cara Modifikasi Threded Komen Di blogger Ala Bp adalah :

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode dibawah ini gunakan Ctrl + F atau F3 untuk memudahkan pencarian.
<b:includable id='comments' var='post'>
5. Selanjutnya copy kode dibawah ini dan letakan kode tersebut tepat di atas kode no.4 di atas.

Klik Untuk :
<b:includable id='custom-comments' var='post'>
<section class='custom-comments' id='custom-comments'>
<b:if cond='data:post.allowComments'>

<!-- bambangpage.blogspot.com -->
<h4>
Ada
<b:if cond='data:post.numComments == 1'>
1 Komentar Pada &quot;<data:post.title/>&quot;:
<b:else/>
<data:post.numComments/> Komentar Pada &quot;<data:post.title/>&quot;:
</b:if>
</h4>
<!-- bambangpage.blogspot.com -->

<b:if cond='data:post.commentPagingRequired'>
<nav class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;
<data:post.commentRangeText/>&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</nav>
</b:if>

<div id='comments-area'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.inReplyTo'><b:else/>
<b:if cond='data:comment.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
<div class='comment-item clearfix' expr:id='data:comment.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if> .....Mengatakan.....
</strong>
<a class='comment-permalink pull-right' expr:href='data:comment.url' title='Comment Permalink'><data:comment.timestamp/></a>
</div> <!-- comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div> <!-- avatar-box -->
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<data:comment.body/>
</b:if>
</div> <!-- comment-body -->
<b:loop values='data:post.comments' var='replies'>
<b:if cond='data:replies.inReplyTo == data:comment.id'>
<b:if cond='data:replies.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
<div class='comment-reply clearfix' expr:id='data:replies.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<b:if cond='data:replies.authorUrl'>
<a expr:href='data:replies.authorUrl' rel='nofollow'> <data:replies.author/></a>
<b:else/>
<data:replies.author/>
</b:if> .....Mengatakan.....
</strong>
<a class='comment-permalink pull-right' expr:href='data:replies.url' title='Comment Permalink'><data:replies.timestamp/></a>
</div> <!-- reply comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:replies.favicon'>
<img expr:src='data:replies.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:replies.authorAvatarImage/>
</b:if>
</div> <!-- reply avatar-box -->
<div class='comment-body'>
<b:if cond='data:replies.isDeleted'>
<span class='deleted-comment'><data:replies.body/></span>
<b:else/>
<data:replies.body/>
</b:if>
</div> <!-- reply comment-body -->
<span class='comment-bottom-line'>
&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:replies.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Hapus&lt;/a&gt;
</span>
</div> <!-- reply comment-reply -->
<b:if cond='data:replies.author == data:post.author'>&lt;/div&gt;</b:if>
</b:if> <!-- replies.inReplyTo -->
</b:loop>
<span class='comment-bottom-line'>
<b:if cond='data:comment.isDeleted != &quot;true&quot;'>&lt;a class=&#39;reply-btn&#39; data-icon=&#39;&amp;dArr;&#39; href=&#39;javascript:replyTo(&quot;<data:comment.id/>&quot;);&#39;&gt;Jawab&lt;/a&gt;</b:if>&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:comment.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Hapus&lt;/a&gt;
</span>
<div expr:id='&quot;form-container-&quot; + data:comment.id'/>
</div> <!-- comment-item -->
<b:if cond='data:comment.author == data:post.author'>&lt;/div&gt;</b:if>
</b:if> <!-- comment.inReplyTo -->
</b:loop>
</div>

<b:if cond='data:post.commentPagingRequired'>
<nav class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;
<data:post.commentRangeText/>&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</nav>
</b:if>

<div class='custom-comment-form' id='custom-comment-form'>
<h4>Tulis dan Publikasikan Komentar Anda :</h4>
<p>Tulis Komentar Anda Disini :</p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<div class='custom-comment-editor-wrapper'>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src=''/>
</div>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);</script>
<a class='cancel-reply-btn' href='javascript:replyTo(&quot;cancel&quot;);'>Cancel Jawaban</a>
</div>

<script type='text/javascript'>
//<![CDATA[
var originalSource = document.getElementById('comment-editor').src.split('#');
function replyTo(id) {
var frame = document.getElementById('comment-editor'),
form = document.getElementById('custom-comment-form'),
container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'),
part = originalSource;
frame.style.height = "50px";
frame.style.visibility = "hidden";
frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1];
container.insertBefore(form, null);
frame.onload = function() {
this.style.height = "250px";
this.style.visibility = "visible";
};
}
//]]>
</script>

</b:if>
</section>
</b:includable>

5. Selanjutnya cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan pencarian .
<b:include data='post' name='threaded_comments'/>
atau seperti ini:
<b:include data='post' name='comments'/>
6. Kemudian ganti dengan kode di bawah ini .Pungsi dari Penggantian kode ini adalah untuk mengaktifkan threded komen yang kita buat.
<b:include data='post' name='custom-comments'/>
7. Dan untuk kode Css copy kode di bawah ini dan pastekan di atas kode ]]></b:skin>.

Klik Untuk :
/* Start Comment Style CSS Code */
.clearfix:after {
content:"";
display:table;
clear:both;
}

.clearfix {*zoom:1}

.pull-left {
display:block;
float:left;
}

.pull-right {
display:block;
float:right;
}

/* Start Custom Comments' CSS */
.custom-comments {
margin:3em 0 0;
font:normal normal 13px/1.4 Tahoma,Arial,Sans-Serif;
letter-spacing:0;
}

/* links */
.custom-comments a,
.custom-comments a:visited {
color:#2143B4;
text-decoration:none;
}

.custom-comments a:hover {text-decoration:underline}

/* comment item */
.custom-comments .comment-item {
margin:0 0 1em;
padding:0 0 .7em 0;
border-bottom:1px solid #eee;
position:relative;
}

/* comment header */
.custom-comments .comment-header {background-color:#f1f1f1;border:2px solid #e3e3e3;padding: 1px;border-radius: 5px;-moz-border-radius: 5px;margin:left:40px;color: #39a6f3; overflow:hidden; margin:0 0 1em 0;
}
.comment-permalink pull-right
.custom-comments .datetime a{color:#0E6284;font-size:12px;float:left;text-decoration:none}
/* avatar area */
.custom-comments .avatar-box {
width:50px;
margin:-5px 5px 20px 0;
}

/* avatar */
.custom-comments .avatar-image-container,
.custom-comments .avatar-image-container a,
.custom-comments .avatar-image-container img {
border:none;
padding:0 0;
margin:-5px 5px;
float:none;
display:block;
width:35px;
height:35px;
max-width:none;
max-height:none;
}

.custom-comments .avatar-image-container img {
border:1px solid #ddd;
padding:1px;
background-color:#fafafa;
}

/* comment body */
.custom-comments .comment-body {margin-top: 5px;margin-bottom: 8px;padding-left: 10px;margin-left: 60px;border-left: 4px solid #C4C4C4;background: #f9f9f9;border-left-style: double;}

/* comment reply */
.custom-comments .comment-reply {
margin:1em 0 0 75px;
padding:1em 1.2em;
background-color:transparant;
position:relative;
font-size:11px;
}

.custom-comments .comment-reply:after {
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:0;
border:0px solid transparent;
border-color:white #F5F2D8 #F5F2D8 white;
}

.custom-comments .comment-reply .user {margin-left:15px;}
.custom-comments .comment-reply a {color:#767643}

.custom-comments .comment-reply .avatar-image-container img {
border-color:#EAE5C4;
background-color:#F5F0D3;
}

/* comment item footer */
.custom-comments .comment-bottom-line {
display:block;
clear:both;
margin:1em 0 .5em 75px;
text-align:right;
}

/* comment buttons */
.custom-comments .comment-bottom-line a,
.custom-comments .cancel-reply-btn {
border:1px solid #ddd;
outline:none;
padding:2px .7em 3px .5em;
margin:0 0 0 4px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-decoration:none;
}

.custom-comments .comment-reply .comment-bottom-line a,
.custom-comments .cancel-reply-btn {border-color:#EAE5C4}
.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}
.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}
.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}

.custom-comments .comment-bottom-line a:hover,
.custom-comments .cancel-reply-btn:hover {
border-color:#bbb;
text-decoration:none;
}

.custom-comments .comment-bottom-line a:active,
.custom-comments .comment-bottom-line a:focus,
.custom-comments .cancel-reply-btn:active,
.custom-comments .cancel-reply-btn:focus {border-color:#999}
.custom-comments .cancel-reply-btn {padding:3px 1em 4px}

/* comment form */
.custom-comments .custom-comment-form {
margin:1em 0 2em;
clear:both;
}

.custom-comments .comment-item .custom-comment-form {
border:1px solid #eee;
padding:1em .2em 2em 1.5em;
margin-left:75px;
}

.custom-comments #comment-editor {
max-width:none;
width:100%;
height:250px;
border:none;
background:none;
}
.custom-comments .comment-reply .comment-bottom-line a,
.custom-comments .cancel-reply-btn {border-color:#EAE5C4}
.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}
.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}
.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}

.custom-comments .custom-comment-form .cancel-reply-btn {display:none}
.custom-comments .comment-item .custom-comment-form .cancel-reply-btn {display:inline}
.custom-comments .comment-item .custom-comment-form h4 {display:none}

/* loading animation */
.custom-comments .custom-comment-editor-wrapper {background:transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%}

/* deleted comment */
.custom-comments .deleted-comment {
font-style:italic;
color:#aaa;
}

/* comments paging control */
.custom-comments .paging-control-container {
font-size:80%;
text-align:center;
width:auto;
height:auto;
line-height:normal;
margin:1em 0;
float:none;
display:block;
clear:both;
border:1px solid #eee;
padding:.5em 1em;
overflow:hidden;
}

.custom-comments .paging-control-container .unneeded-paging-control {display:none}
.custom-comments .paging-control-container .paging-control {display:inline}

/* Author Comments Style: Do whatever you want with this! */
.custom-comments .author-comment .comment-reply .user:after {display:none}
.custom-comments .author-comment .user:after,
.custom-comments .author-comment .author-comment .comment-reply .user:after {
content:url("http://newtemplete-project.googlecode.com/files/_admin-coment.png");
display:inline-block; width:12px; height:12px; vertical-align:top; margin:-8px 0px 0 25px;
}
.author-comment > .comment-item,
.author-comment > .comment-reply {}

/* End Comment Style CSS Code */

Keterangan :

* Untuk membedakan komentar admin dan komentar pengunjung ganti kode yang berwarna Biru dengan alamat URL image admin anda..

8. Simpan Templete anda.

Blogger Threded Komen ini di peruntukan untuk blog baru dan blog lama yang memiliki komentar yang tidak terlalu banyak.

Selesai selamat mencoba....
Posted by: Bambang PageBambang PageUpdated at : 08.00

Kamis, 02 Mei 2013

Pasang Meta Tag Blogger Head Valid XHTML 2013

Meta Tag Valid XHTMLMembuat Meta Tag valid XHTML merupakan unsur yang sangat penting bagi seo sehingga mampu bersaing pada mesin pencari khususnya Google, dan mampu membuat blog cepat terindex oleh Google . Meta Tag yang akan kita bahas saat ini merupakan meta tag yang di pasang pada bagian heading blog yang akan memuat deretan Keyword dan Deskripsi pada blog kita . Sebenarnya banyak sekali tutorial di dunia maya ini yang membahas tentang meta tag ini dan banyak yang di ragukan validitasnya . Apakah Meta tag Blog anda valid XHTML ? anda bisa mengecek validitas meta tag tersebut dengan tool W3C CSS Validator , dan jika anda telah mengeceknya dan mendapati error pada bagian meta tag heading , mungkin tutorial kali ini yaitu Pasang Meta Tag Blogger Head Valid XHTML 2013 merupakan jawaban yang tepat untuk masalah anda . Tutorial ini mungkin merupakan kelanjuatan dari beberapa tutorial sebelumnya yaitu Agar Templete Blogger Valid XHTML Terbaru , Memasang Meta Tag Dinamis Pada Blogger , Cara Edit Blogger Templete Agar Lebih SEO , yang di maksudkan untuk memaksimalkan unsur seo blog kita dimata search enggin.

Dan adapun cara Pasang Meta Tag Blogger Head Valid XHTML 2013 adalah :

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode <b:include data="blog" name="all-head-content"> (Gunakan CTRL+F agar lebih mudah).

5. Hapus semua Meta Tag, mulai dari <b:include data="blog" name="all-head-content"> sampai sebelum <b:skin><![CDATA[ .

6. Ganti kode yang di hapus tadi dengan kode di bawah ini :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' name='Description'/>
<meta content='Blog KEYWORD ANDA' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>
</b:if>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/><meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url + &quot;feeds/posts/default&quot;' rel='alternate' title='Atom' type='application/atom+xml'/>
<link expr:href='data:blog.url + &quot;feeds/posts/default?alt=rss&quot;' rel='alternate' title='RSS' type='application/rss+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='index,follow' name='robots'/>
<b:else/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='index,follow' name='robots'/>
<b:else/>
<meta content='noindex,follow' name='robots'/>
</b:if>  
</b:if>
6. Ganti Kode Blog KEYWORD ANDA yang berwarna merah dengan keyword anda .

7. Simpan Templete anda.

Selesai dan semoga bermanfaat.

Posted by: Bambang PageBambang PageUpdated at : 08.00

Senin, 29 April 2013

Membagi 3 Kolom Post Widget Dengan Thumbnail

3 Kolom Post WidgetBeberapa waktu yang lalu saya telah mencoba berexperiment dengan templete blogger yang saya miliki , dimana experiment tersebut adalah membagi kolom postingan widget menjadi tiga kolom dan di sertai thumbnail serta read more . Mungkin Experiment ini dapat di bilang lebih sulit di bandingkan dengan yang sebelumnya yaitu Membagi Blogger Post Widget Menjadi Dua Kolom , Karena kita hanya membagi blogger post widget tersebut menjadi dua tanpa thumbnail dan readmore pada homepage . Secangkir kopi besar , sekarung camilan dan sebungkus rokok ternyata bahan-bahan yang dapat dibilang sangat berperan penting dalam keberhasilan experiment ini , bagaimana tidak berperan penting ! tanpa ketiga bahan tadi mungkin saya tidak akan betah dan kepala akan cepat pusing jika berlama-lama mengotak-atik kode , dan bukan hanya satu templete yang saya buat mungkin 2 sampai tiga dan akhirnya jadilah postingan kali ini dengan judul Membagi 3 Kolom Post Widget Dengan Thumbnail .

Dan adapun cara Membagi 3 Kolom Post Widget Dengan Thumbnail adalah :

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode ]]></b:skin> gunakan Ctrl + F untuk memudahkan Pencarian.

5. Copy Kode di bawah ini dan pastekan dibawah Kode ]]></b:skin> tadi.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.blog-feeds,.feed-link,.date-header {display:none;}
.post-header{text-indent:-9999em;background:transparent;height:0px}
#main-wrapper {position:relative;width: 62%;float:left;padding:5px 1%;word-wrap:break-word;margin:10px 10px;overflow:hidden;background:#fff}
#sidebar-wrapper {position:relative;width:32%;float:right;word-wrap:break-word;margin: 10px 10px 5px 0;overflow:hidden;background: #fff;box-shadow: 0 0 6px #999;}
.readmore{
position: absolute;
top: 100px; left: 137px;font-size: 10px;}
.post {
position: relative;
width:190px;
height:120 px;
float:left; 
margin:0px 2px 10px 6px; 
padding: 5px 0px 5px;
background:url(http://newtemplete-project.googlecode.com/files/template-clean-post-white.png)  no-repeat center;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 0px #d100b2;
-webkit-box-shadow:0px 0px 0px #d100b2;
box-shadow:0px 0px 0px #ccc;
border:0px solid;
box-shadow:0px 0px 0px #ccc;
}
.post-body{padding:0px 0px;background:transparent}
.post-footer{text-indent:-9999em; height:0px;} 
.post-utama{
position: absolute;
left:0px;
width:125px;
padding: 0px 0px;
margin-top:5px;
color: #919090;
line-height: 1.0em;
font-size: 12px;
font-style:italic;
text-align:left;}
.post-utama:hover{
color:#919090;}
.post-home-thumbnail img{
float:right;
padding: 4px;
margin: 20px 0px 0px 0px;
width: 45 px; 
height:45 px;
-moz-transition: 
-moz-transform 0.5s ease 0s;
background: #fff; 
border: 1px solid #f5f5f5}
.post-home-thumbnail img:hover {
background:#ffffff !important;
border: 1px solid #f5f5f5;
-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-ms-transform:rotate(15deg);
}
</style>
</b:if>
</b:if>
Keterangan :

* Kode yang berwarna 190 Hijau Merupakan lebar dari postingan widget.
* Kode yang berwarna 120 Biru Merupakan tinggi dari postingan widget.
* Kode yang berwarna 125 Orange merupakan lebar dar snippet postingan.
* Kode yang berwarna 45 Pink merupakan lebar dari image (thumbnail)
* Kode yang berwarna 45 Purpler ( ungu ) merupakan tinggi dari image (thumbnail).
* Kode-kode tersebut bisa anda sesuaikan sesuai kebutuhan.

6. Cari kode seperti atau mirip kode di bawah ini gunakan Ctrl+f atau F3 untuk mempermudah pencarian.
<div class='post-body entry-content' expr:id='data:post.id'>

<data:post.body/>
7. Setelah anda menemukan kode seperti atau mirip kode diatas ( no.6 ) , Ganti <data:post.body/> dengan kode di bawah ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.thumbnailUrl'>

<div class='post-home-thumbnail'>
<div class='Image-home'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>

<b:else/>

<div class='post-home-thumbnail'>
<div class='Image-home'>
<img border='0' height='95' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBN13SbbXHqkU2mXK7SqT8M3bs0PfCCHYh38pFHcISLXvPAaqBlSshUd1Wk-IUFN_pokP2RWANmA_Ej5A07WvQXkBH35bjoJ6JLTKbyYem_bS5SHGAcQhX2-FPF3Hd6GjPHgEHsf-JNujN/s0/no-image.png' width='95'/>
</div>
</div>
</b:if>

<div id='post-utama'>
<b:if cond='data:post.snippet'>
<data:post.snippet/>
</b:if>
</div>

<div class='readmore'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>Read More</a></b:if>
</div>    
   
<b:else/>

<data:post.body/>

</b:if>
</b:if>
8. Simpan Templete anda.

Selesai dan selamat mencoba.....

Posted by: Bambang PageBambang PageUpdated at : 08.00

Kamis, 25 April 2013

Cara Membuat 3 Kolom di Bawah Postingan Blogger

3 Kolom di Bawah PostinganPada templete magazine mungkin kita sering mendapati 3 buah kolom di bawah postingan dan biasanya ini di gunakan untuk menampilkan postingan perlabel . Pada Postingan terdahulu saya pernah membahas tentang bagai mana cara membuat dua kolom di bawah postingan baca Cara Membuat Dua Kolom Di Bawah Postingan Blogger dengan trik tersebut kita akan mendapat kan 2 kolom di bawah postingan blog kita . Nah untuk saat ini sesuai dengan judul postingan yaitu Cara Membuat 3 Kolom di Bawah Postingan Blogger , Kita hanya akan menambahkan 1 kolom lagi di bawah postingan tersebut sehingga menjadi tiga kolom .

Dan adapun Cara Membuat 3 Kolom di Bawah Postingan Blogger adalah:

1. Pergi ke blogger dasbor >>> Pilih opsi lainya >>> Templete >>>Back Up Dulu templete anda.

2. Selanjutnya Klik Edit HTML dan Centang kotak kecil Expand Widget Templates.

3. Cari kode di bawah ini gunakan Ctrl + F atau F3 untuk memudahkan pencarian.
<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>
4. Copy kode di bawah ini dan pastekan sebelum kode </div> diatas ( yang berwarna merah).
<div id='under-post-wrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='under-post' id='col-left' showaddelement='yes' />
   <b:section class='under-post' id='col-mid' showaddelement='yes' />
    <b:section class='under-post' id='col-right' showaddelement='yes'/>
    <div style='clear: both;'/>
    </b:if>
</div>
5. Selanjutnya cari kode ]]></b:skin> dan copy kode css di bawah ini lalu pastekan diatas kode ]]></b:skin> .
/*3 Kolom Under Post Css Start*/
#under-post-wrapper {background: #fff; margin: 0 auto;width:100%; padding: 0 0px  0px 0;}
.under-post  h2 { margin: 0px 0px 0px 0px; padding: 4px 0px 4px 0px; text-align: left; color: #000; background: #fff; font-weight: bold;font-size: 16px;}
.under-post .widget { margin: 0px 0 0 0px; border: 1px solid #fff; background: #fff;}
.under-post .widget-content { padding: 0px 0px 5px 0px; }
.under-post ul { list-style-type:square; margin-left:0px; }
#col-left, #col-mid {
display:inline-block;
width: 31%;
float:left; 
margin: 0px  18px 0px 0px; 
padding: 5px 0px 0px;
margin-top:5px;
color: #919090;
line-height: 1.0em;
font-size: 12px;
font-style:italic;
border:0px solid;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 0px #d100b2;
-webkit-box-shadow:0px 0px 0px #d100b2;
box-shadow:0px 0px 0px #ccc;
    }
#col-right{
display:inline-block;
width: 32%;
float:left; 
margin: 0px  0px 0px 0px; 
padding: 5px 0px 0px;
margin-top:5px;
color: #919090;
line-height: 1.0em;
font-size: 12px;
font-style:italic;
border:0px solid;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 0px #d100b2;
-webkit-box-shadow:0px 0px 0px #d100b2;
box-shadow:0px 0px 0px #ccc;
    }
/*3 Kolom Under Post Css End*/

6. Simpan templete anda.

Selesai dan selamat mencoba.....

Posted by: Bambang PageBambang PageUpdated at : 08.00

Senin, 22 April 2013

Jenis dan Cara Pemasangan Auto Refresh di Blogger

Auto RefreshMungkin saya atau anda pernah berkunjung kesebuah blog atau website di mana kita mendapati blog atau website yang sedang kita baca tersebut melakukan auto refresh/reload berulang-ulang dengan jangka waktu tertentu . Kita sudah dapat memastikan bahwa pemilik blog atau website tersebut memasang auto refresh/reload di templete blognya . Pemasangan auto refresh/reload ini banyak di maksudkan untuk meningkatkan pageview pada blog tersebut , auto refresh ini biasanya di pasang pada tag meta ini menguntungkan pemilik blog tentunya tapi mungkin akan sedikit mengganggu para pengunjung atau pembaca blog tersebut karena blog akan refresh/reload pada jangka waktu tertentu dimana kita sedang membaca blog tersebut.Tidak hanya itu tentunya bagi para pengguna internet yang memiliki bandwith terbatas ini akan sangat mengganggu karna mungkin blog yang sedang di bacanya , akan refresh secara otomatis namun tidak membuaka halaman secara sempurna karena kurangnya bandwith .


Dan adapun Jenis dan Cara Pemasangan Auto Refresh di Blogger adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Pilih Templete >>>Back Up dulu Templete Anda.
3. Klik Edit HTML .
4. Pilih salah satu kode auto refresh di bawah ini dan letakan setelah kode </head> .

I# Refresh Otomatis dengan delay .

Ini memungkinkan blog kita akan refresh secara otomatis berdasarkan waktu atau rentang 300 detik atau 5 menit. Anda bisa menyesuaikannya dengan keinginan anda.
<meta http-equiv="refresh" content="300"/>
II# Refresh Otomatis ke web lain tanpa delay.

Ini bukan reload, tapi lebih kepada redirect atau reload ke domain lain. Sangat berguna bagi kia yang memiliki blog baru. dalam arti semua yang mengunjungi blog lama kita akan langsung ter-direct ke alamat blog baru kita.
<meta http-equiv="refresh" content="0;URL=http://bambangpage.blogspot.com" />
III# Refresh Otomatis ke web lain dengan delay .

Ini memungkinkan blog kita akan redirect ke blog lain dalam jangka waktu 10 detik .Fungsinya sama dengan jenis no II#.Namun yang membedakannya hanya penggunaan dan disertainya delay atau rentang waktu.
<meta http-equiv="refresh" content="10;URL=http://bambangpage.blogspot.com" />
IV# Refresh Otomatis Tanpa delay .

Ini memungkinkan blog kita akan refresh secara otomatis tanpa delay waktu dan sangat tidak di anjurkan.Mengapa tidak di anjurkan ? karena mungkin kita tidak akan bisa membaca isi blog yang menggunakan trik ini dimana blog akan refresh tanpa jangka waktu (kurang dari 1 seconds blog refresh).Tapi dengan trik ini anda bisa melipatgandakan pengunjung hingga puluhan sampai ratusan kali.Dan tentu saja tidak di anjurkan.
<meta http-equiv="Refresh" content="0" />

Trik diatas banyak di gunakan oleh para blogger (khususnya no I#) untuk meningkatkan pageview biasanyanya pada blog baru mereka . Dengan trik ini Anda bisa melipat gandakan pengunjung yang berasal dari 1 IP sama.

Selesai dan semoga bermanfaat..

Posted by: Bambang PageBambang PageUpdated at : 08.00

Kamis, 18 April 2013

Agar Templete Blogger Valid XHTML Terbaru

XHTML Css ValidationDalam meningkatkan kualitas seo pada blog kita , banyak cara yang bisa kita lakukan dan salah satunya adalah membuat templete blog kita valid xhtml atau valid html5 . Sesuai dengan judul postingan kali ini yaitu Agar Templete Blogger Valid XHTML Terbaru , kita akan mencoba mengurangi atau bahkan menghilangkan error pada Templete blogger kita dengan langkah-langkah yang akan saya jelaskan dibawah . Dengan mengurangi error pada templete blogger tersebut , diharapkan akan memberikan kemudahan pada mesin pencari google untuk menjelajahi blog kita dan secara otomatis meningkatkan kualitas seo dari blog kita tentunya.Agar mendapatkan hasil yang maksimal dan tanpa error pada templete blogger kita , mungkin ada baiknya kita menggunakan accout blogger baru sebagai percobaan dari templete yang akan kita buat dan valid xhtml atau valid html5 . Dan jika anda menggunakan account yang biasa anda gunakan dan dengan templete yang telah terpasang pastikan anda telah membackupnya terlebih dahulu serta menggkopi semua kode yang terdapat dalam widget kedalam notpad dan kemudian menghapus semua widget tersebut . Karena kebanyakan error templete biasanya di sebabkan oleh widget yang kita pasang pada templete kita . Untuk mengecek validasi dari blogger templete kita , ada dua buah tool yang bisa kita gunakan yaitu Markup Validation Service dan CSS Validation Service dari W3C . Dengan kedua tool tersebut kita akan mengetahui jumlah error serta penyebab timbulnya error pada templete dengan memasukan url blog kita , sehingga memudahkan kita untuk mengedit atau memperbaiki error tersebut.

Setelah kita mengetahui bagian penyebab error dari templete blogger kita , inilah saatnya melakukan perbaikan pada error tersebut . Ada beberapa bagian penyebab error yang biasa timbul pada kebanyakan templete blogger dan kali ini saya mencoba memberikan solusi serta cara mengurangi error tersebut.

Adapun langkah-langkah selanjutnya Agar Templete Blogger Valid XHTML Terbaru adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Pilih Templete >>>Back Up dulu Templete Anda.
3. Klik Edit HTML >>>Centang Kotak Expand Template Widget .
4. Cari Kode seperti atau mirip kode dibawah ini .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
5. Ganti kode diatas (no.4) dengan kode di bawah ini.
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
6. Selanjutnya Cari kode </html> dan ganti menjadi </HTML> .

7. Hapus semua bagian Meta tag yang menyebabkan error.

8. Cari Kode <b:include data=’blog’ name=’all-head-content’/> kemudian hapus kode tersebut.

9. Cari semua Comment Declaration pada bagian css ( /* ----------- ) dan hapus bagian kode ( ----------- ) atau dash.
/* ----------------------
    Name: Simple Faster Blogger Templates
    Date: 1 Maret 2013
    Edited by: Blogger Gubug
    -------------------------*/ 
Sehingga menjadi menjadi
/* Blogger Template Style
    Name: Simple Faster Blogger Templates
    Date: 1 Maret 2013
    Edited by: Blogger Gubug */
10. Cari kode <body> dan letakan kode di bawah ini di atas kode <body> tersebut.
<!-- <body><div></div> -->
Keterangan ;

* langkah ini untuk menghilangkan kode navbar bawaan dari blogger.
* Akan muncul peringatan untuk menghapus navbar, dan klik hapus .

11. Cari kode <b:include name='quickedit'/> kalo sudah ketemu hapus semua, jangan lupa jika kelak menambahkan widget baru hapus lagi kode tersebut.Ini untuk menghilangkan Icon Quickedit ( gambar kunci dan obeng).

12. Cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan pencarian.
<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'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>
        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div>
Ganti dengan kode berikut
<span class='post-icons'>
    <!-- email post links -->
    <b:if cond='data:post.emailPostUrl'>
    </b:if>
    </span>
    </div>
13. Tambahkan type="text/javascript" pada semua kode JavaScript. Baik pada templates, posting maupun pada widget.

contoh :
<script src='http://cilimoes-script-file.googlecode.com/files/IEmarginFix.js'/>
Sehingga menjadi:
<script src='http://cilimoes-script-file.googlecode.com/files/IEmarginFix.js' type='text/javascript'/>
14. Tambahkan type type="text/css" untuk semua kode css yang ada . Baik pada templates, posting maupun pada widget.

Contoh ;
<style>


<script src="https://bambangpage.googlecode.com/files/test.css"></script>
Sehingga menjadi :
<style type='text/css'>
<script src="https://bambangpage.googlecode.com/files/test.css" type="text/css" ></script>
15. Tambahkan atribut title dan alt pada setiap gambar.dan pada saat posting gambar hapus atribut Anchor='1' dan Border='0' .

Contoh :
<img src="http://newtemplete-project.googlecode.com/files/Bp_button.png/" />
Sehingga menjadi :
<img alt="BP_LOGO" src="http://newtemplete-project.googlecode.com/files/Bp_button.png/" title="Bp_LOGO" />
16. Jangan pernah menggunakan tag <center> untuk membuat tulisan ataupun gambar rata tengah, pakailah kode berikut jika tidak ingin mengakibatkan error html baik di postingan maupun di widget html.
<div style="text-align: center;">Isi Widget</div>
17. Untuk mengatasi masalah invlid xhtml yang disebabkan oleh adanya penggunaan url dalam template blog dengan tanda & , bisa kita selesaikan dengan mengganti setiap tanda & dengan kode dibawah ini.
&amp;

Sebenarnya masih banyak lagi langkah-langkah yang bisa kita lakukan Agar Templete Blogger Valid XHTML , namun kali ini saya mengambil point-point penyebab error pada templete blogger.

Selamat mencoba dan semoga bermanfaat.
Posted by: Bambang PageBambang PageUpdated at : 08.00

Senin, 15 April 2013

Cara Membuat Banner Iklan di Kanan dan Kiri Blog

Masih tentang banner iklan untuk mempromosikan produk , blog atau website . Pada postingan sebelumnya kita pernah membahas tentang banner ini baca Cara Membuat Banner Iklan di Footer Blog , yang artinya kita memasang banner iklan dari sebuah produk , blog atau website tersebut pada bagian bawah blog kita . Nah berhubungan dengan banner iklan tersebut , kali ini sesuai dengan judul postingan yaitu Cara Membuat Banner Iklan di Kanan dan Kiri Blog saya akan mencoba membahas bagai manakah caranya jika kita ingin menempatkan banner iklan tersebut di bagian kanan dan kiri blog atau website kita , dimana dalam kebanyakan templete blog bagian sebelah kanan dan kiri , biasanya masih memiliki ruang kosong yang sayang jika tidak kita manfaatkan.

Dan adapun Cara Membuat Banner Iklan di Kanan dan Kiri Blog adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Tata Letak .
3. Klik Tambahkan Gadget .
4. Selanjutnya Pilih dan klik HTML/Javascrip .
5. Masukan kode di bawah ini kebagian kotak konten Mengonfigurasi HTML/JavaScript.


<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<!--start: floating ads-->
<div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;align:left;"><img src='http://newtemplete-project.googlecode.com/files/banner-close-icon-left.png'/></a></div>
<!--Mulai disini-->

<a href="http://bambangpage.blogspot.com/" rel="nofollow" target="_blank" title="Pasang Iklan"><img src="http://newtemplete-project.googlecode.com/files/BP-banner.gif" width="172" height="600" alt="" /></a>

<!--Akhir disini-->
</div>
<!--end: floating ads-->
<!--start: floating ads-->
<div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;align:right;"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuTmI7QI3roWIQUs8e0qKZ2sLtc-c3QPcxksxc26hXAcy6hMlfaAcq6XYV_YpU4MnUpK1YBFkKCJ-Sd28JG8TtPEEukoIbHGzYiU4wfKgiBfawmhpSHYNj-14qQ9J4DehOAUb50sZTA7Py/s1600/close-icon.png'/></a></div>
<!--Mulai disini-->
<a href="http://bambangpage.blogspot.com/" rel="nofollow" target="_blank" title="Pasang Iklan">
<img src="http://newtemplete-project.googlecode.com/files/BP-banner.gif" width="172" height="600" alt="" /></a>
<!--Akhir disini-->
</div>
<!--end: floating ads-->

Keterangan :

* Ganti Kode yang berwarna Merah dengan URL blog/website tujuan.

* Ganti Kode Yang berwarna Biru dengan URL image yang anda inginkan.

* Ganti Kode yang berwarna Orange dengan ukuran lebar banner yang anda inginkan.

* Ganti kode yang berwarna Hijau dengan ukuran tinggi banner yang anda inginkan.

6. Klik simpan/save pada Mengonfigurasi HTML/JavaScript.

7. Pilih Simpan Setelan pada Tata Letak.

Selamat mencoba dan semoga bermanfaat....

Posted by: Bambang PageBambang PageUpdated at : 08.00

Kamis, 11 April 2013

Cara Membuat Banner Iklan di Footer Blog

Footer BannerBanyak cara yang dilakukan para blogger untuk mempromosikan blog atau website dari sebuah produk yang diantaranya dengan memasang banner iklan mereka di blog sendiri atau blog orang lain . Di samping dapat menghemat ruang iklan pada blog atau website , banner ini juga dapat memberikan citra profesional dan menarik pada sebuah blog . Sebenarnya banyak sekali cara dan macam dari banner ini , namun sesuai judul postingan kali ini yaitu Cara Membuat Banner Iklan di Footer Blog , dimana banner yang akan kita buat saat ini tampil di bagian footer dari blog kita.

Dan adapun Cara Membuat Banner Iklan di Footer Blog adalah:

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Tata Letak .
3. Klik Tambahkan Gadget .
4. Selanjutnya Pilih dan klik HTML/Javascrip .
5. Masukan kode di bawah ini kebagian kotak konten Mengonfigurasi HTML/JavaScript.


<!-- Banner Iklan Bawah Mulai -->
<script type="text/javascript">
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type="text/css">
div#btm_banner {
bottom: 0;
position: fixed;
width: 103%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style="height: 0px;"></div>
<div align="center" id="btm_banner" style="height: 110px; z-index: 9999;">
<div style="text-align: right; width: 940px; height: 8px;">
<img id="closed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuTmI7QI3roWIQUs8e0qKZ2sLtc-c3QPcxksxc26hXAcy6hMlfaAcq6XYV_YpU4MnUpK1YBFkKCJ-Sd28JG8TtPEEukoIbHGzYiU4wfKgiBfawmhpSHYNj-14qQ9J4DehOAUb50sZTA7Py/s1600/close-icon.png" /></div>
<div style="clear: both;"></div>
<p>
</p><center>
<a href="http://cilimoes.blogspot.com/" rel="nofollow" target="_blank" title="Pasang Iklan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY1N1ZbLQQXhs74DMWqprUSP5_4vWWgkWBZCf5Eqv7ID0sdXJrdQmGvuqmZIvLkWbQXcKPyui2XVJYNnNzazFd34oEiMO8Ed8beLqPHEwebGWhyphenhyphenSz9DFdckX7mw2_QBu5iJi_xILSbQwo/s1600/Iklan-2.gif" width="940" height="90" /></a>
</center>
<p></p>
</div>
<!-- Banner Iklan Bawah Selesai-->

Keterangan :

* Ganti kode yang berwarna Orange dengan Ukuran lebar yang anda inginkan.

* Ganti kode yang berwarna Biru dengan dengan ukuran tinggi yang anda inginkan.

* Ganti kode yang berwarna Hijau dengan alamat URL yang di tuju.

* Ganti kode yang berwarna Merah dengan kode URL gambar anda.

6. Klik simpan/save pada Mengonfigurasi HTML/JavaScript.

7. Pilih Simpan Setelan pada Tata Letak.

Selamat mencoba dan semoga bermanfaat....

Posted by: Bambang PageBambang PageUpdated at : 08.00

Senin, 08 April 2013

Cara Memperbaiki Masalah Pada Halaman Statis

Halaman statis merupakan halaman yang berdiri sendiri pada blogger yang biasanya di gunakan untuk membuat artikel khusus atau menu seperti contact us,about us,privacy police,site map,daftar isi dan lain-lain . Setiap orang menggunakan template yang berbeda-beda tentunya dan tak jarang ada yang mengalami masalah saat membuat halaman statis . Masing-masing templete terkadang memiliki masalah yang berbeda pada halaman statis , Masalah yang timbul pada halaman statis tersebut biasanya disebabkan karena kesalahan pengkodean pada HTML yang berbeda-beda pula tentunya . Hal yang sering dialami oleh para blogger ini biasa nya di sebabkan pemasangan readmore yang salah atau tidak cocok, jadi menyebabkan artikel atau postingan tidak terbuka secara sempurna di halaman statis . Nah sesuai dengan judul postingan kali ini yaitu Cara Memperbaiki Masalah Pada Halaman Statis saya akan mencoba memberikan beberapa solusi dari masalah yang timbul pada halaman statis tersebut.

Masalah yang mungkin timbul pada halaman statis :

* Pada Halaman Statis Isi Artikel Muncul Tapi Artikel Terpotong Oleh Read More.

* Pada Halaman Statis tidak menampilkan isi artikel dan hanya muncul tulisan/kode "Read more".

* Terjadi Eror Pada Halaman Statis .

Dan adapun Cara Memperbaiki Masalah Pada Halaman Statis adalah :

Pada Halaman Statis Isi Artikel Muncul Tapi Artikel Terpotong Oleh Read More >> Cara Mengatasinya..

1. Log in Ke Blogger dasbor dengan account anda.
2. Pilih Opsi lainya >>> Pilih Templete >>>Back Up dulu Templete Anda.
3. Klik Edit HTML >>>Centang Kotak Expand Template Widget .
4. Cari Kode seperti atau mirip kode dibawah ini Gunakan Ctrl+F atau F3.


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url' rel='nofollow'>Read More</a></span>
</b:if>

5. Ganti Kode di atas dengan kode di bawah ini.

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url' rel='nofollow'>Read More</a></span>
</b:if>
</b:if>

Pada Halaman Statis tidak menampilkan isi artikel dan hanya muncul tulisan/kode "Read more" >> Cara Mengatasinya..

1. Cari Kode seperti atau mirip kode dibawah ini Gunakan Ctrl+F atau F3.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType !="item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9 ;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

2. Ganti Kode di atas dengan kode di bawah ini .

<b:include data='post' name='post'/>

Terjadi Eror Pada Halaman Statis >> Cara Mengatasinya..

* Templete dengan read more biasa *.

1. Cari Kode seperti atau mirip kode dibawah ini Gunakan Ctrl+F atau F3.

<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read more...</a>
</b:if>

2. Ganti Kode di atas dengan kode di bawah ini.

<b:if cond='data:blog.pageType == "static_page"'><br/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'><br/>
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>
* Templete dengan "Read more" otomatis .

1. Cari Kode seperti atau mirip kode dibawah ini Gunakan Ctrl+F atau F3.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read More..</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

2. Ganti Kode di atas dengan kode di bawah ini.

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read More...</a></span>

</b:if>

</b:if>


<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
5. Simpan Templete anda.

Selesai selamat mencoba.....
Posted by: Bambang PageBambang PageUpdated at : 08.00
 

Copyright 2011 Bambang's Page is proudly powered by blogger.com | Design by Bambang's Page | Find us on Google+

Postingan Baru

Komentar Baru

Postingan Acak