Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Custom thread comments blogger all in one 2014

Posted by Unknown Kamis, 30 Januari 2014 0 komentar
Jali ini saya akan share tutorial tentang cara modifikasi atau custom theread comment di blog,kenapa theread comment ini all in one? ya karena fiturnya sudah lengkap di dalam theread comment yang akan kita bahas ini,selain tampilan theread comment yang keren juga sudah dilengkapi beberapa fitur pendukung untuk memperindah tampilan thread comment di blog anda,dari pada penasaran langsung saja lihat beberapa fitur thread comment'nya dibawah ini,dan untuk demonya juga sudah saya pasang di blog ini,jika anda ingin mencobanya silahkan berkomentar. . :D
Modifikasi theread comment 2014

Fitur dari theread comment ini
  1. Menghilangkan hcard error pada richsnippet 
  2. Valid HTML 5 
  3. Optimasi avatar menjadi lebih kecil
  4. Custom kotak pesan komentar
  5. Emoticon otomatis
  6. Menghapus link aktif dalam komentar
  7. Thread coment hack
  8. Bisa menyisipkan Video youtube,gambar,dan code tag dlm koment
  9. Dll
Cara pemasangan dalam blog
  • Masuk ke dashboard blog anada
  • Tempelate>>Edit HTML
  • Kemudian cari kode dibawah ini
<b:include data='post' name='threaded_comments'/>
Ganti dengan code dibawah ini. . ! !
<b:include data='post' name='comments'/>
Kalau sudah,sekarang simpan CSS thread comment dibawah ini tepat diatas]]></b:skin> pada tempelate anda.
/* Threaded Comment BY andoelsean.blogspot.com */
#comments {}
#comments h3 {background:#35404d;border:1px solid #1d2630;display:inline;margin-bottom:25px;padding:5px;line-height:40px;position:relative;text-transform:uppercase;color:#fff;font:13px Oswald;border-radius:3px;}
#comments h3:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #35404d;border-right:20px solid transparent;width:0;height:0;line-height:0}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #151d26;
background:#25303c;
padding:4px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1xgeCJP7-QA1j7gu5YMGB-waUi7IzqMjLHElG47l20g7bEfpCoyi7YlImuFIa3UDiuQ3wcaAn75lnygYRNDzllHeDyeayYgsUQ9rXrcevVSOTtvaxOps52a5_z1sjSIsdcRLBiNFE7bRa/s1600/anon.jpg) no-repeat;
}
.comment_name a {
font-family:Oswald, Arial, Sans-serif;
padding-bottom:10px;
font-size:14px;
text-decoration: none;
}
.comment_admin .comment_name {
font-family:Oswald, Arial, Sans-serif;
padding-bottom:10px;
font-size:14px;
text-decoration: none;
}
.comment_admin .comment_date {
font-weight: normal;
font-size:11px;
}
.comment_name {
font-family:Oswald, Arial, Sans-serif;
padding-bottom:10px;
font-size:14px;
font-weight:normal;
position:relative;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #999;
float:right;
font-size:11px;
font-weight:normal;
}
.comment_date a{
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
}
.comment_date a:hover{
color: #a9a9a9;
text-decoration:none;
}
.comment_body{
margin-top:-72px;
margin-left:65px;
background:#25303c;
border:1px solid #1d2630;
border-top:1px solid #171f28;
border-left:1px solid #171f28;
padding:15px;
}
div.comment_inner.comment_admin{
background:#394549;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #999;
font-size: 13px;
word-wrap:break-word;
padding-bottom:10px;
}
.comment_inner {
padding: 15px;
margin: 5px 0 5px 0;
background-color:#35404d;
}
.comment_child .comment_wrap {padding-left: 5%;}
.comment_reply {
display: inline-block;
margin-top:8px;
margin-left:-5px;
padding: 1px 12px;
color: #fff !important;
text-align: center;
text-decoration: none;
border-radius: 2px;
background: #54687c;
font: 11px/18px sans-serif;
transition: background-color 1s ease-out 0s;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #627c96;
}
.unneeded-paging-control {display: none;}
#comment-editor {width:100% !important;background:#e1e3e6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6xJFTHFGuxBXdlUAcmtjcdbtsJFd9IKu7rmx-9VfQHOckAK-1SW2LNXwxibvUqY7VrCRIpVTKrp1R7hKK1MgOvW6GnCa2gnBvBlKaIjLt9AqeJ2KnIsLLuOT7sl8SN1KPpfHechqsnNQ/s1600/kangis-loader.gif') no-repeat 50% 30%;border-radius:4px;margin-bottom:20px;position:relative;}
.comment-form {max-width: 100% !important;}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
.comment_form a:hover {text-decoration: underline;}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
img.comment_emo {margin:0;padding:0;vertical-align:middle}
.comment_emo_list{
display:none;
}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}
.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1xgeCJP7-QA1j7gu5YMGB-waUi7IzqMjLHElG47l20g7bEfpCoyi7YlImuFIa3UDiuQ3wcaAn75lnygYRNDzllHeDyeayYgsUQ9rXrcevVSOTtvaxOps52a5_z1sjSIsdcRLBiNFE7bRa/s1600/anon.jpg) no-repeat}
.comment-delete img{float:right;margin-left:15px;margin-top:3px;}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;}
iframe{border:none;overflow:hidden}
.deleted-comment {
background:#db6161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZ9vJca4iN2_3a1LnGwCbEaGKWEFY0nFATeV2MDuYwkIl_kauMvnJT5K6QgBR_pR-qMumpMfRlVCt5Wn3m-9PCE_ZM1DfYdRCjG99SWFQQi1PQuU15Dz-zckGcvFJW3FhB0UH-v_73Ls/s1600/tempat-sampah.png) no-repeat 2% 50%;
color:#efd4d4;
line-height: 22px;
border: 1px solid #c44d4d;
padding:12px 15px 12px 45px;
margin:5px 0;
display: block;
}
.comment-form p {
background: #54687c;
padding: 15px 15px 14px 15px;
margin: 5px 0 5px 0;
color: #f4f4f4;
font-size: 13px;
line-height: 20px;
border-radius:4px;
position:relative;
}
div.comment_avatar img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NMp5mxpZVGZenbNsvCzCmTnH9wvcR7EzsJBMHGONei4JulXTlCKUBh_1v2ofTuGN2aCRGiI3FwRJWt1YFdPnu7d3HefbU8YCVQsHycB0la8vBF_zkaRluTORHFpfzWhYEzHPcDcYs1g/s45-c/gravatar.png);
}
div:target .comment_inner{background:#346656;transition:all 15s ease-out;}
div:target .comment_child .comment_wrap .comment_inner{background:#404c5c;}
iframe{border:none;overflow:hidden}
kalau sudah sekarang cari kode dibawah ini. . ! !
<b:includable id='comments' var='post'>...</b:includable>
Gantilah code dari <b:includable id='comments' var='post'&gt sampai </b:includable> dengan code dibawah ini. . ! !
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<h3>
<b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h3>
</b:if>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<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>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<div class='clear'/>
<div id='comment_block'>
<b:loop values='data:post.comments' var='comment'>

<div class='data:comment.adminClass' expr:id='data:comment.anchorName'>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
&lt;div class=&#39;comment_inner comment_admin&#39;&gt;
<b:else/>
&lt;div class=&#39;comment_inner&#39;&gt;
</b:if>

<div class='comment_header'>
<div class='comment_avatar_wrap'>
<div class='comment_avatar'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>
</div>

<div class='clear'/>
</div>

<div class='comment_body'>
<span class='comment_arrow'/>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='comment_author_flag'/>
<span class='comment_service'>
<a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHtzs0TogSfIKXbIXPJ1srh0IpNYr12i3S2f1dm7s3AhxukvZlXeqK20aKieHQcLI2N50tbius_wl2-qZCWITHA5Qtwuv3rnmLU7-OZ04e4Og0e7hcGH4CeER1C4AmRdCAyig9JA1vMeY/s1600/delete4.png' title='Hapus Komentar'/>
</a>
<span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
</span></div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<div class='clear'/>

</b:if>

</div>
<div class='clear'/>
&lt;/div&gt;
<div class='clear'/>

<div class='comment_child'/>
<div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>
</div>
</b:loop>
</div>
<div class='clear'/>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<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>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div class='comment_form'>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<div class='comment_emo_list'/>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
</b:if>
</div>
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>

<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>

<b:if cond='data:post.numComments != 0'>
var Items = <data:post.commentJso/>;
var Msgs = <data:post.commentMsgs/>;
var Config = <data:post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
</b:if>
//<![CDATA[
//Global setting
Config.maxThreadDepth = 6;//Kedalaman tingkat threaded comment
Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable
Replace_Image_Link = false;//Auto replace link image, ketik "false" untuk mendisable.
Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true

//Pengaturan Emoticon
Emo_List = [
':)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDojha2DETcoR6G4iEPudt4IoyO9i6RQsFCuVytiLwonuSPPiuSpJchge07tex99_xAc-ol0wvJb_uCH5A14xbjkVhAf9PkvWzfDvGJbMPRkSJ3A_ntu3dMn9i7RDUqUNuFK8M0qpv_6E/s1600/smile1.gif',
':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qpamt3qMHhhe6eeSLinRfZ0ssIQk0cD7a0mW6TvPhmUfBMIN2uJb-xw009LgkQvY51vkEtHviXxtb87Sy3IJcsnWSZx8Vkbi4XRaq1PTYwSc9wZ24A-vVvvbZIMehQyCfpcJcBZaqGU/s1600/sad.gif',
'=(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXljoOIqFiFKFNzTBAXCHwhhrb1sopCb516JCoH6itnmy_3xOr5QaDg_gVMJyu9PGoHWJDgVNfYLB7W2dkkSHeImcmR78sEz4i8cLsA-I53zreUPlHhzwy-pDE9igwPAu1qrKr08DCkxs/s1600/sadanimated.gif',
'^_^' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCqczVZmdG_rW5oVoaKJJBeRmMZlkcL0PHm99GDDzcpEshOt6iJyUOMqfO_LDcriGZHwZeKS7rfqG2gM-gjd5Vo8TIyruL49JaA5dAoY-UbQjLahU0SoOEsc0RVBCPUtPO4dhDFlrt5tE/s1600/smile.gif',
':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-9KlTCuc54aDdr9r9LAKLMh4_L55n22b2v3910Rffuexdu8y-M1xDpLOp_w3Lh6WKFxoMcwjEOQ05a-lPbd6pjFGtWtgvYii6RaPREIDJHtikXIdUDD0SRggLjv9tOM6ZALgw2vvha8/s1600/icon_smile.gif',
'=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMqOi17LBkY_7Wz-Kb414u2RYWckhj-5ZdMnpDDGMuuqa-b-FTKmwpBcUhUUOQV99eavx1abbBPYB9bVly7bNYL2GgHhiIlaGfmR-1J1_xwmzRvgvnUif_dJnZn4g-iarAM30gAgdIYcI/s1600/hihi.gif',
'@@,' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIc5hpiVwitwVrtt-Qc9jyxrO4BXdgaRrAznNAfr4iFPnZb3R6ku2A78JzRiOS0wChcW_4Wa0zZbuegrYe6YjEWmseR7TH7dJ1gkHMmNwO0Q4kDCbo9Vqidd0nbSaCi6A75PRp5fzy55A/s1600/rolleyes.gif',
';)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipAdAdatIIlJf9nXyQCDTFpygiH3kUBuGNE6O5OmU9EeWQC9-UbQuqg8A3S-1nWWWGBE5r5afDlPWoFBa_IP14pN4qxiU9b3rnstNlEoJ0zbBBPnNYC3SURnwYy8XFMSg2tBcryz4_N9M/s1600/wink.gif',
':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBwOeQ-_-25wZ8_wmFVmbdG5B16TwtE-yKiq6-Z2VsgkKJWvqztaUkzl_A5hfUvYbh6O9lea5IYZhiXjRctvnWQnhdHP72jZMn8Bdv-np0V6m3lyZ7B72MFjQJBLwszgLpUHvaTc1WFtI/s1600/thumb.gif',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKjXLSDL_y0PQG6YfajyQqj1paOnhYwg37bijwV-Jo1T6Rn6e90jqCIew3KQ4xqyfKkaJbmN7dBCTTCRG2sRZ36OjBXHB6k7OzF5DrfURux2XCwtsJtg0-lAR2-mBHhERFtqehjqD_hh4/s1600/thumbsup.gif',
':p' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiasDpwLUiakd8qfGi6mHzmyilI3vMUI6Gcd6-vMlnMNtmNGN9YBZEPWzF93CPPI7hyphenhyphenDLLkgptg1Sh2tyNVHBJEYLwRUHhu1A57ZUsIeIv8qxiK2H-1DL7Wl0BoTI4ShqtX8El2L24nnLo/s1600/wee.gif',
];


//Config Force tag list, define all in lower case
Force_Tag = [
'[pre]','<pre>',
'[/pre]','</pre>',
'<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
'</pre>','</code>'
];

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
var ava = $(this).attr('src');
$(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s45-c/"));
});
//]]>
</script>
</b:includable>
Kalau langkah-langkah diatas sudah anda terapkan secara benar,sekarang save tempelate anda dan lihat hasilnya. . :)

Baca Selengkapnya ....

Langkah optimisasi seo onpage pada blog

Posted by Unknown Selasa, 12 November 2013 0 komentar
Optimisasi seo onpage pada blog
Optimasi SEO on page pada blog - jadi sangat penting saat membangun website yang didesain untuk memenangkan pertarungan di mesin pencari. Apalagi setelah sebagian besar mesin pencari memberlakukan peraturan yang  semakin ketat pada algoritmanya saat menentukan kualitas suatu website. Untuk itu saya menulis artikel panduan Optimasi SEO on page lengkap ini, artikel ini merupakan kumpulan informasi dari beberapa website SEO yang saya rangkum disini.

Berikut ini adalah faktor-faktor penting yang mempengaruhi SEO on page sebuah website yang biasa digunakan algoritma mesin pencari. Title tag/ judul, main body text/teks utama, meta tag, link popularity/backlink, nama domain, heading tags, densitas keyword, bold and italics, nama folder, alt tag image, title attribut dan keyword di kalimat pertama. Berdasarkan tingkat kepentingannya setiap faktor ini memiliki nilai masing-masing dimata mesin pencari. Seperti ditampilkan tabel SEO berikut ini.
Title Tag2,0
Popularitas Link2,0
Jumlah Kata Dalam Artikel1,5
Nama Domain1,0
Densitas/Kepadatan Kata kunci1,0
Heading Tags0,5
Kedekatan Kata Kunci0,5
Bold dan Italic0,4
Folder dan Nama File0,4
Meta Description0,3
Alt Tag0,2
Title Attribute0,1
Meta Keywords0,1
Total10

Optimasi SEO On Page pada Title Tag
Dalam dunia SEO, title tag merupakan bagian yang paling penting karena bagian ini yang secara langsung mewakili sebuah halaman website. Setiap halaman website sudah seharusnya memiliki sebuah title tag yang unik.

Bagaimana menulis title tag sesuai SEO On Page.

  1. Title tag harus ada pada heading tag (<head></head>).
  2. Harus unik dan berisi keyword yang akan disajikan di halaman website.
  3. Keyword yang digunakan di title tag ini juga harus ada di halaman website.
  4. Tuliskan dua keyword yang sama dalam satu title tag untuk menambah densitas keyword.
  5. Terdiri dari 6-12 kata (kurang dari 60 karakter).
  6. Usahakan membuat title tag yang membentuk kalimat yang mudah dibaca dengan susunan yang logis.
  7. Tempatkan kata kunci yang ditargetkan di awal title tag.
  8. Pastikan untuk tidak menggunakan kata ‘stop word’ mesin pencari seperti Home, Index, No-index, Default dll.
  9. Hindari menggunakan tanda baca di title tag.
  10. Gunakan Title Case pada title tag
  11. Usahakan setiap halaman website memiliki title tag yang unik satu sama lain.
  12. Jangan merubah title tag, jika perlu jangan terlalu sering.

Contoh Title tag yang sesuai SEO

<title>Anwar – Personal Blog About Seo</title>
<title>Blog Optimasi Mesin Pencari</title>

Contoh Title tag yang tidak sesuai SEO

<title>anwar, personal, blog, about seo</title>
<title>blog,optimasi,mesin pencari</title>

Optimasi SEO On Page pada Artikel Utama

  • Pastikan menuliskan kata kunci utama pada awal paragraf pertama, karena kata yang pertama kali muncul pada paragraf pertama akan dianggap penting oleh mesin pencari.
  • Perhatikan juga Densitas/kepadatan kata kunci, misalkan jika halaman website terdiri dari 500 kata maka densitas kata kunci utama yang baik sekitar 1-3%, jika halaman terdiri dari 500 lebih kata makan kita bisa gunakan 2-3% kata kunci dalam halaman ini.
  • Usahakan membuat artikel yang terdiri dari minimum 250 kata dan maksimum 750 di setiap halaman.
  • Usahakan menggunakan CSS daripada tag <font> untuk ukuran dan jenis font.
  • Minimalisir penggunaan javascript yang diload dari external file.
  • Sebaiknya jangan menggunakan tombol gambar dan javascript untuk link, lebih baik gunakan link bentuk text yang lebih alami.
  • Gunakan heading tags (h1,h2,h3) karena mesin pencari menyukai halaman website yang menggunkan tag h1,h2,h3 dan tempatkan kata kunci utama di tags ini.
  • Jika mungkin, ulangi penggunaan tag <title> untuk memperjelas kata kunci.
  • Perhatikan juga keyword proximity: kedekatan kata kunci satu dengan yang lain.
  • Gunakan bold dan italic pada kata kunci utama
  • Selalu gunakan Alt tag untuk mendeskripsikan gambar, karena beberapa mesin pencari termasuk Google juga mencari kata kunci utama di Alt tag gambar.
  • Biasakan mengupdate kontent website secara berkala, karena mesin pencari menyukai website yang selalu update.

Optimasi SEO On Page pada Meta Tags

Meta tags merupakan tags yang ditempatkan setelah title tag. Tag ini tidak akan terlihat  halaman website tetapi akan dibaca oleh crawler mesin pencari. Bagian utama yang penting dari meta tag adalah meta name, yang syntaxnya seperti berikut:
<Meta name=”description” content=”ketikkan deskripsi disini”></Meta>
<Meta name=”keywords” content=”ketikkan kata kunci utama disini”></Meta>

Optimasi SEO On Page meta description tag

  • Tuliskan meta description tag dalam bentuk kalimat utuh dan logis
  • Gunakan 20-39 kata (atau di bawah 150 karakter).
  • Jangan mengulang kata kunci yang sama 3 kali dalam satu tag deskripsi, jika perlu gunakan imbuhan.
  • Minimalisir penggunaan kata penghubun seperti dan, yang, atau.
  • Letakkan kata kunci berdasarkan prioritasnya, jadi kata kunci utama selalu yang di lebih awal.
  • Usahakan untuk menggunakan meta tag description di setiap halaman website dan unik satu sama lain.
  • Jangan menuliskan meta tag deskripsi yang hanya berisi kata kunci.
  • Gunakan kepadatan kata kunci 6%-20% di setiap meta tag decription.

Optimasi SEO On Page Meta Keyword tag

  • Gunakan 100 sampai 250 kata
  • Awali meta keyword tag dengan kata kunci utama kemudian diikuti kata kunci turunan.
  • Gunakan kata kunci yang masih berhubungan dengan niche utama.
  • Jangan mengulang kata lebih dari 3 kali.
  • Jangan tempatkan kata-kata yang sama berdekatan.
  • Gunakan kata kunci yang benar-benar ada di halaman website dan mewakili keseluruhan isi halaman website itu.
  • Usahakan menggunakan kata kunci yang terdiri dari satu atau dua kata saja.
  • Gunakan small case
  • Usahakan agar densitas kata kunci sekitar 4%-10% saja.
  • Gunakan Navigasi halaman yang SEO friendly
  • Gunakan keyword/kata kunci yang mendeskripsikan halaman yang dituju.
  • Selalu gunakan keyword utama sebagai link text dalam setiap halaman.
  • Usahakan untuk menggunakan Keyword utama di link text yang pertama kali di crawl oleh mesih pencari.
  • Biasakan untuk menggunakan title attribut pada text link, contoh: <a href=”halmanweb.html” title=”deskripsi halamanweb”>link mengarah kesini</a>
  • Jangan gunakan gabungan kata yang terlalu panjang, 40-50 karakter per link text.
  • Hindari menggunakan link berbentuk javascript.
  • Gunakan sitemap untuk website dengan lebih dari 30 halaman. (untuk wordpress saya rekomendasikan menggunakan Google XML sitemap Generator).
  • Submit XML sitemap ke mesin pencari besar seperti Google, Yahoo, Bing.
  • Batasi link perhalaman sebanyak 20 link
  • Gunakan tanda sambung “-” untuk setiap kata pada link.

Optimasi SEO On Page dengan Menambah Popularitas Link

Website dengan Link popularity baik atau yang biasa disebut website berbacklink banyak akan lebih mudah menempati ranking tinggi di mesin pencari, untuk itulah popularitas link jadi sangat penting. Sebenarnya bahasan popularitas link ini sudah masuk SEO off Page, namun jika link itu masih dalam satu website masih bisa disebut SEO On Page.

Tips Menaikkan Popularitas Link

  • Anchor link/ link yang masuk dari website lain harus berisi kata kunci yang mendukung kata kunci utama website.
  • Usahakan untuk memperbanyak link masuk ke halaman utama.
  • Cari blog atau forum dengan tema yang sama kemudian tinggalkan komentar yang sesuai dan arahkan backlink ke websitemu.
Optimasi SEO On Page ini sangat dipengaruhi oleh perubahan yang di lakukan pihak mesin pencari, update algoritma mesin pencari besar ataupun kecil tentunya akan mempengaruhi Optimasi SEO On Page sebuah halaman website.

Baca Selengkapnya ....

Cara membuat efek animasi loading di blog

Posted by Unknown Senin, 14 Oktober 2013 0 komentar
Berikut saya akan memberikan cara mudah membuat animasi loading di blog,mungkin sudah banyak dan sudah umum banyak artikel yang membahas tentang cara membuat efek animasi loading keren di blog,tapi tidak ada salahnya saya ikut sedikit berbagi tutorial,mungkin ada yg bertanya bagaimana cara membuat efek loading yang seperti di blog ini?nah berikut cara mudah dan ga ribet. . hee
cara membuat animasi loading di blog

Langsung saja ke caranya sob,ikuti langkah-langkah dibawah ini:

1.tambahkan jQuery di bawah ini pada blog anda,letakkan sebelum </head> pada tempelate anda. . ! !
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
KETERANGAN:
Jika dalam tempelate anda sudah terdapat jQuery,langkah 1 abaikan saja.

2.Copy dan paste CSS di bawah ini tepat diatas ]]></b:skin> pada tempelate anda.
/* page loader */
#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url(' data:image/gif;base64,R0lGODlhKwALAPEAAP///0tKSqampktKSiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=' ) no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; text-shadow:none }

Nah langkah ke 3 tambahkan jowoscript atau istilah bulenya javascript dibawah ini diatas kode </body> pada tempelate anda. . ! !
</script>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"> </div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});
//]]>
</script>

Sudah belum?kalau sudah ya langsung disave saja bro,refresh blog anda dan lihat hasilnya efek animasi loading pun sudah terpasang di blog keren anda. . :)
Sekian artikel dari saya,Semoga bermanfaat. .

Baca Selengkapnya ....

Modifikasi crusor blog dengan efek kurang kerjaan

Posted by Unknown Jumat, 02 Agustus 2013 0 komentar
Oke kembali lagi dengan saya,gimana kabarnya sob semoga selalu sehat yaa.  :) Pada kesempatan kali ini saya akan berbagi tutorial tentang cara modifikasi crusor blog dengan efek kurang kerjaan,hhe kenapa begitu? ya kerena setelah menerapkan tutorial ini pada blog kita, crusornya akan di ikuti beberapa doted warna warni yang mengikuti gerak crusor keren pada blog kita,sama dengan tutorial lainya tapi saya rasa tutorial ini lebih simple, .Nah daripada kelamaan langsung saja ke cara memasang nya di blog yaa. .Yang nanti hasilnya akan seperti gambar di bawah ini. .
Cara modifikasi crusor pada blog
cara memasang di blog
1. Masuk ke dashboard blog > design > add a gadget > HTML/javascript.

2. Copy dan paste kod di bawah ke dalam kotak HTML/javascript.
<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>
3. Kalau sudah simpan perubahan,lalu refresh blog anda dan lihat hasilnya.

KETERANGAN:
Setelah anda memasang script di atas,dan kalau ingin merubah warnanya silahkan cari  kode sperti dibawah ini pada script diatas,dan sesuaikan kode warnanya sesuka anda.
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

Baca Selengkapnya ....

Cara membuat blog jadi bertaburan kelopak bunga mawar

Posted by Unknown 0 komentar
Mungkin bagi anda yang ingin memperindah tampilan blognya,pada tutorial kali ini saya akan membagikan sedikit tutorial tentang cara membuat blog menjadi bertaburan kelopak bunga mawar,tentunya akan semakin menambah indah tampilan blog anda terutama buat para blogger cwek kalau yang suka dengan bunga dan ingin mengaplikasikan pada blog,berikut cara mudah dan simplenya. . langsung saja yaa. . !!
Tutorial membuat blog bertabur bunga mawar
Untuk lebih jelasnya silahkan lihat demonya dulu disini,dan kalau anda suka langsung saja lihat cara mengaplikasikan di blog. .

cara mengaplikasikan di blog
1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy dan paste kode di bawah ke dalam kotak HTML/javascript
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>
3. Kalau sudah simpan perubahan refresh blog anda dan lihat hasilnya.

Nah demikian tutorial singkat tentang cara membuat blog menjadi bertabur kelopak bunga mawar,sekian tutorial saya kali ini selamat mencoba dan selamat berksperimen. .

Baca Selengkapnya ....

Blogger Related Post Sederhana Dengan Efek Check List

Posted by Unknown Jumat, 19 Juli 2013 0 komentar
Pada artikel saya kali ini saya akan mencoba memberikan tutorial singkat tentang  Cara membuat Related post atau artikel terkait pada blogger,tutorial yang akan kita bahas ini adalah membuat Artikel terkait dengan efek check list,cara menambahkan artikel terkait ini pada blog sangat mudah sob,bagi yang ingin menambahkan related post ini silahkan ikuti beberapa cara dibawah ini. . ! !
Related post dengan efek check list
cara membuat related post
  • Seperti biasa,langsung saja ke edit tempelate blog anda
  • Selanjutnya cari kode ]]></b:skin> pada tempelate anda
  • Kalau sudah ketemu,copy CSS dibawah ini dan pastekan di atas ]]></b:skin>
.rbbox
{
font-family:Federant;
background:#fff;
border:1px solid #ccc;
height:198px;
overflow:auto;
margin:10px 0 15px;
padding:10px
}
.rbbox ul li:hover
{
cursor:pointer;
list-style-image:url(http://4umi.com/image/icon/check.png);
color:#3B5998
}
.rbbox ul li
{
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8vhhJOM_KC_tipNGP0142EryOBECzF0cOSxQo1_ItRElSTPzkFQD9UsgQw2F-wS9fqyeD5bEbKHlvenypR3Oq6ho5dH4pb-RA8PGHxibvDw61e1ur_tG7hp_lCLjq6zw_eXk8buA9bX8/s12/uncheck.gif);
padding:.5em 0 .5em .3em
}
  • Kalau sudah sekarang cari kode <data:post.body/>
  • Copy code dibawah ini dan pastekan dibawah <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='rbbox'>
<div>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel =999;
var maxNumberOfLabels = 999;
maxNumberOfPostsPerLabel = 999;
maxNumberOfLabels = 999;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

Jika Nanti Related Post diatas Tidak Muncul dibawah Posting anda, maka kode diatas sobat simpan dibawah Kode : <data:post.body/> yang 'kedua' lebih tepatnya di bawah tag </b:if>.
Atau sobat juga bisa meletakan kode kode di atas di bawah kode <div class='post-footer-line post-footer-line-1'>
Simpan hasil edit tempelate anda,dan lihat hasilnya. . :)

Baca Selengkapnya ....

Daftar Isi Blogger Keren Dengan Tema Dan Navigasi

Posted by Unknown Selasa, 09 Juli 2013 0 komentar
Cara membuat daftar isi keren dengan navigasi di blog, daftar isi atau biasa dikenal oleh para blogger dengan sebutan Sitemap merupakan semua isi halaman url artikel blog dan untuk mempermudah pengunjung mengetahui lebih jauh isi dari blog tersebut secara keseluruhan. Sedangkan fungsi Sitemap sendiri terhadap SEO untuk menginformasikan url-url yang berada di blog agar lebih mudah di crawl dan dijelajahi oleh mesin pencari (Search Engine) sehingga bisa lebih cepat terindeks.
Daftar isi atau sitemap pada blogger

Nah pada tutorial kali ini,Saya akan membahas tentang cara memasang daftar isi atau sitemap keren dengan berbagai tema dan dilengkapi dengan navigasi,sehingga tampilan daftar isi akan menjadi lebih simple dan menarik. .Mungkin anda berencana untuk membuat daftar isi jadi lebih keren dan menarik?Oke langsung saja ikuti cara membuat daftar isi dibawah ini gampang dan gak ribet. . ! !

cara membuat daftar isi keren
1. Login pada blog
2. Pilih Page/Laman kosong
3. Masukan code berikut, pada halaman HTML bukan pada Compose
<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_facebook-theme.css" type="text/css" />
<script type="text/javascript">
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya &#9658;",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "http://andoelsean.blogspot.com",
postsperpage = 4,
numchars = 370,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi3VG04xdlHid3bT94-u3fwGkW7lmpRtDdagRCfx6mP-ozAoNuhyphenhyphen3WjC_KihuzUSbdvHcRVr_k8QTLMxUYtrmXfLIiKz7qGDfBgHYSIQFV3JSIK9BNLiWovi79denczeDtvNDf_rhoYPU/s1600/no+image.jpg";
</script>
<script type="text/javascript" src="http://fianetmu-com.googlecode.com/files/blog%20daftar%20isi.js"></script>
KETERANGAN :
Url yang berwarna kuning,itu adalah url tema daftar isi,silahkan pilih tema daftar isi dibawah ini sesuai dengan yang anda inginkan.
Dan Url yang berwarna merah silahkan ganti dengan url blog anda

Demo - Brown theme
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown.css

Demo - Black theme
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_elegant-black-theme.css

Demo - Diary book theme
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_CSS3-diary-book-theme.css

Demo - Elegan white theme
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-white-theme.css

Demo - Yellow green theme
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_yellow-green-theme.css

Demo - Dark red theme
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_dark-red-theme.css

Demo - Contruction theme
http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_construction-theme.css
Nah kira-kira anda ingin memasang daftar isi dengan tema yang mana? :) Selamat mencoba dan happy blogging. .

Baca Selengkapnya ....

Full Modifikasi Kotak Pesan Komentar Blogger

Posted by Unknown Minggu, 07 Juli 2013 0 komentar
Kotak pesan formulir komentar blogger memang sudah tidak asing lagi bagi sebagian blogger dimana pesan formulir komentar tersebut memang sudah disediakan buat pengguna blogger. meskipun fasilitas tersebut sudah disediakan oleh blogger itu sendiri namun secara defaultnya terkadang memang tidak cocok dengan apa yang pengguna harapkan, karena pengaturannya yang tidak disediakan adapun pengaturan yang bisa dipakai dengan meletakan beberapa kode yang bisa digunakan sementara untuk memodifikasi lebih lanjut kita harus merubah/menambahkan kode kedalam HTML template.
Modifikasi kotak pesan komentar blogger
Full modifikasi kotak pesan komentar blogger yang sesuai judul di atas, kali ini saya akan share cara memodifikasi kotak komentar blogger. Mungkin sobat blogger pernah melihat suatu blog, saat pengunjung berkomentar dapat memasukan video,gambar,emoticon dan elemen terlarang di dalam komentar, nah kali ini saya akan menjelaskan cara membuat kotak komentar blogger secara lengkap dari cara mengizinkan elemen terlarang masuk ke dalam komentar sampai membuat pesan formulir komentar kren.

A. Cara mengizinkan video,gambar,emoticon dan elemen terlarang masuk kedalam kotak komentar.

1. Masuk di dasbor blogger
2. Klik Template / Rancangan
3. Klik Edit html
5. Cari kode </body>
6. Copy kode di bawah ini dan pastekan di atas kode </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://cunayz.googlecode.com/svn/trunk/jQuery.js' type='text/javascript'/>
</b:if>
7. Cari lagi kode </head> setelah ketemu copy kode di bawah ini pastekan di atas kode tersebut
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Add More Features to the Blogger Comments by Shadows-k */
img.emo {
display:inline-block;
vertical-align:middle;
}
#comment-holder .cm-youtube {
display:block;
border:none !important;
background-color:#333;
width:370px;
height:218px;
margin:0 auto 30px;
}
#comment-holder .cm-image {
display:block;
margin:0 auto 15px;
outline:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
padding:2px;
max-width: 95%;
}
#comment-holder code,
#comment-holder i[rel="code"] {
font:normal 12px Monaco,"Courier New",Monospace;
color:blue;
}
#comment-holder pre,
#comment-holder i[rel="pre"] {
display:block;
font:normal 12px Monaco,"Courier New",Monospace;
background-color:#333;
color:white;
padding:0.5em 1em;
word-wrap:normal;
white-space:pre;
overflow:auto;
}
#comment-holder blockquote,
#comment-holder b[rel="quote"] {
margin:0 2%;
background-color:#eee;
padding:1em 1.2em;
border-left:4px solid #7498AD;
display:block;
font-weight:bold;
font-style:italic;
}
#comment-holder i[rel="image"],
#comment-holder i[rel="youtube"] {
display:block;
overflow:hidden;
border:2px solid black;
position:relative;
width:170px;
height:100px;
margin:0 auto 30px;
}
#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
content:"Please enable your JavaScript to see this image!";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:red;
color:white;
font-weight:bold;
text-align:center;
padding:15px 0;
}
#comment-holder i[rel="youtube"]:before {
content:"Please enable your JavaScript to watch this video!";
}
</style>
</b:if>
cara menggunakan code
Masukan kode-kode dibawah ini pada kotak pesan folmulir komentar,untuk memberi tau pengunjung seandainya ingin memasukan gambar,emoticon,blockquote,video pada komentar.

1. Untuk menyisipkan gambar silahkan anda gunakan tag
[img]URL Gambar[/img] atau <i rel="image">URL Gambar</i>
2. Untuk menyisipkan video silahkan anda gunakan tag
[youtube]URL Video[/youtube] atau <i rel="youtube">URL YouTube</i>
3. Untuk menyisipkan kode anda bisa gunakan seperti tag.
<i rel="code">Kode Anda</i> atau [code]Kode Anda[/code]
4. Untuk memasukan kode html / css / jquery bisa menggunakan
<i rel="pre">Kode Anda</i> atau [pre]Kode Anda[/pre]
5. Untuk Menggunakan blockquote di komentar bisa menggunakan tag
<b rel="quote">Kata-kata Anda</b> atau [blockquote]Kata-kata Anda[/blockquote]
Nah.. selesai tentang cara memasukan elemen terlarang seperti video,gambar,emoticon kedalam kotak komentar.Sekarang lanjut ke cara membuat kotak pesan formulir komentar biar lebih keren.

B. Cara membuat kotak pesan formulir komentar kren.

Kotak pesan formulir komentar blogger
1. Masih dalam edit html
2. Cari kode seperti dibawah ini
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='430' id='comment-editor' name='comment-editor' src='' width='100%'/>
KETERANGAN: Ganti kode yang berwarna kuning dengan kode dibawah ini. .
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='430' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
4. Kemudian cari kode ]]></b:skin> atau </style>
5. Copy code CSS dibawah ini dan pastekan diatas kode ]]></b:skin> atau </style>
#threaded-comment-form p {
position: relative;
background: #DD0;
border: 3px solid #38F;
padding: 10px;
font-size: 13px;
line-height: 1.6em;
color: #000;
margin-top: 30px;
}
#threaded-comment-form p::after, #threaded-comment-form p::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#threaded-comment-form p::before {
border-top-color: #38F;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#threaded-comment-form p::after {
border-top-color: #DD0;
border-width: 9px;
left: 10%;
margin-left: -30px
}
6. Cari lagi kode seperti dibawah ini
document.getElementById(domId).insertBefore(replybox, null);
7. Jika sudah ketemu,ganti dengan kode dibawah ini
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
Kalau sudah sekarang save hasil edit tempelate anda,dan pada tempelate anda sudah terpasang kotak pesan formulir komentar dan sekaligus sudah bisa memasukan elemen terlarang pada from komentar. .
isikan pesan formulir komentar dengan kata-kata yang anda inginkan
caranya:
Masuk ke Setting / setelan
1.Lalu klik Komentar
2.Lalu scroll ke bawah dan lihat kata Pesan Formulir Komentar
3.Nah isi kolom tersebut dengan pesan anda lalu klik Simpan Stelan / Save Setting
Selamat mencoba. . :)

Baca Selengkapnya ....

Modifikasi Widget Statistik Blogger Jadi Lebih Keren

Posted by Unknown Jumat, 05 Juli 2013 0 komentar
Blogger widget statistik
Banyak ragam widget statistik untuk blogger yang disediakan oleh pihak ke tiga. Baik itu widget dari Sitemeter, Histats, Statcounter, Feedjit, Hitwebcounter dan segudang layanan widget statistik lainnya. Adapun widget statistik default dari blogger meskipun masih memiliki kekurangan karena belum memberikan data statistis yang lengkap seperti jumlah visitor karena hanya menampilkan jumlah total tayang laman saja, tetapi cukup untuk memantau perkembangan blog anda.

Tutorial kali ini tentang cara modifikasi widget statistik default blogger agar terlihat lebih keren dari aspek desain. Tentu dengan pengetahuan CSS anda bisa mengembangkan lagi desain dari widget ini.

Fitur dari widget statistik ini adalah:
  1. Menampilkan jumlah postingan
  2. Menampilkan jumlah komentar
  3. Menampilkan total tayang laman
Nah jika anda tertarik Untuk memasang widget statistik ini pada blog anda,ikuti cara-caranya dibawah ini simple dan gak rumit. . :)
  • Masuk ke dasbord blogger>>pilih menu tata letak
  • Tambah gadget>>Pilih widget statistik blog
  • Lebih jelasnya lihat gambar dibawah. . ! !
Statistik blog
Pada kolom kongfigurasi,anda tidak perlu mengganti nama widget atau memilih tampilan widget statistik,langsung klik "SIMPAN" kemudian klik "SIMPAN SETELAN".
  • Kalau sudah sekarang masuk ke menu tempelate>>edit HTML
  • Copy Kode dibawah ini dan pastekan tepat diatas ]]></b:skin> pada tempelate anda.

#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{display:inline;width:28%;margin:0;border:0;background-color:#fff;background:#0090D5;color:#fff;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:12px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}
Sesuaikan sendiri Code CSS diatas,anda bisah mengubah kode warna Background dan kode warna font widget statistik,agar sesuai dengan tampilan warna yang anda inginkan. .
  • Kalau sudah sekarang cari kode dibawah ini
<b:widget id='Stats1' locked='false' title='total tayang laman' type='stats'/>
  • Jika sudah ketemu ganti kode diatas dengan kode dibawah ini
<b:widget id='Stats1' locked='false' title='' type='Stats'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <li> <h4 id='Stats1_totalPosts'>&amp;hellip;</h4> <span>Posts</span> </li> <li id='totalComments'> <h4 id='Stats1_totalComments'>&amp;hellip;</h4> <span>Comments</span> </li> <li id='totalCount'> <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4> <span>Pageviews</span> </li> </ul> <script type='text/javascript'> //<![CDATA[ function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>'); //]]> </script> </div> </b:includable> </b:widget>
Selesai Simpan dan lihat hasilnya. . :D

Baca Selengkapnya ....

Blogger Related Post Simple Dan Ringan

Posted by Unknown 0 komentar
Blogger Related Post
pengertian related post
Related Post adalah suatu Elemen yang berguna untuk menampilkan postingan yang terkait dengan artikel yang sedang kita baca, karena itu Artikel terkait adalah sebuah elemen penting dalam dunia blogger.,

Namun Related Post yang saya bahas ini berbeda, ini adalah Related Post JSON ( dibaca Jason ) adalah sebuah format ringkas pertukaran data komputer, jadi ringan untuk blog anda alias tidak membuat lambat dan berat. Cara membuatnya mudah, ikuti langkah berikut ini:
  • Login ke blogger
  • Masuk ke menu tempelate>>edit HTML
  • Cari kode ]]></b:skin> pada tempelate anda
  • Copy CSS dibawah ini
  • Paste tepat diatas kode ]]></b:skin> pada tempelate anda

.rbbox_blitarian4rt{border: 1px solid #000000;padding: 5px;

background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}

.rbbox_blitarian4rt:hover{background-color: #EFFBEF;}

.rbbox_blitarian4rt ul li {

display : block;

background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;

margin-left : -10px;padding-top : 0;padding-right : 0px;padding-bottom : 1px;padding-left : 20px;margin-bottom : 5px; line-height : 1em; border-bottom:1px dotted #cccccc;}
  • Kalau sudah memasang kode di atas
  • Masih di edit tempelate,sekarang cari kode <data:post.body/>
  • Copy Kode dibawah ini letakan dibawah kode <data:post.body/>
  • Jika pada tempelate anda ada 2 kode <data:post.body/>
  • Pilih kode <data:post.body/> yang kedua
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>

<div class='rbbox_blitarian4rt'>

<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>

<div id='albri'/>

<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 15;

maxNumberOfPostsPerLabel = 50;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement(&#39;ul&#39;);

var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i &lt; maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {

if (entry.link[k].rel == &#39;alternate&#39;) {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement(&#39;li&#39;);

var a = document.createElement(&#39;a&#39;);

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

}

for (var l = 0; l &lt; json.feed.link.length; l++) {

if (json.feed.link[l].rel == &#39;alternate&#39;) {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);

var txt = document.createTextNode(label);

var h = document.createElement(&#39;b&#39;);

h.appendChild(txt);

var div1 = document.createElement(&#39;div&#39;);

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById(&#39;albri&#39;).appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;

+ label +

&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = &quot;<data:label.name/>&quot;;

var test = 0;

for (var i = 0; i &lt; labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel &lt; maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

<script type='text/javascript'>RelPost();</script>

</div>

</b:if>
Kalau sudah preview dulu,jika tidak ada yang error langsung save saja,dan lihat hasilnya sekarang pada blog anda sudah terpasang related post dibawah postingan secara otomatis. .
KETERANGAN : Anda dapat mengubah kode warna pada background-color: #F2F2F2 dengan kode warna yang anda inginkan untuk kotak related post,background-color: #EFFBEF untuk warna background ketika disorot kursor. Anda juga dapat mengubah angka pada maxNumberOfPostsPerLabel = 50 untuk mengatur jumlah artikel terkait yang akan ditampilkan,dan angka pada maxNumberOfLabels = 3 untuk mengatur jumlah artikel terkait yang ingin ditampilkan

Baca Selengkapnya ....

Menambah Background Keren Untuk Video Anda Di Blogger

Posted by Unknown Jumat, 28 Juni 2013 0 komentar
Pada utorial kali ini saya akan memberikan cara tentang menambah background video youtube pada postingan blogger,agar lebih terlihat keren pada saat kita akan memasukan video youtube pada postingan blog. . tentu dengan menambahkan background seperti contoh dibawah ini,maka tampilan video youtube dalam pstingan kita akan lebih terlihat menarik.mungkin bagi anda yang belum tau caranya?langsung saja ikuti langkah dibawah ini,gak ribet dan gak sulut. . :)
Video youtube pada postingan blogger
Cara menambah background pada video di blog
  • Gunakan kode HTML dibawah ini
  • Copy dan pastekan pada postingan blog anda
  • Pastekan pada mode HTML bukan compose
<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIlWnWw2bi8pXM4Sp-WBl0uz0zkEJX_T43G9KuE3qeiN3KeXmb1fk3JPzIhghOCxHDp5fSYXW3YRCw4OYdpi3qY2kQX86GrLoPtcsyUQhyphenhyphen02KG8VVaPF7SqvweZdLDcu7oiXPllshaxCs/s1600/video-background.png&quot;) no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 22px; text-align: left; width: 532px;"><iframe allowfullscreen="" frameborder="0" height="298" src="http://www.youtube.com/embed/G92Yio_J8VM" width="498"></iframe></div>  
  • kode yang berwarna MERAH diatas
  • Silahkan ganti dengan Id Video Youtube anda
  • Kalau tidak tau Id video youtube silahkan lihat gambar di bawah ini
Id video youtube

DEMO VIDEO DENGAN BACKGROUND

Baca Selengkapnya ....

Blogger costum error page 404 keren

Posted by Unknown Minggu, 23 Juni 2013 0 komentar
Error page 404 blogger berguna jika alamat url yang menuju ke blog kita tapi pada blog kita halaman tersebut tidak ada atau sudah terhapus maka itu disebut sebagai error page,dan kita bisa costum pada halaman error page tersebut dengan mengalihkan ke url pada hompage blig kita,jika pada blog kita ada url yang error atau sudah terhapus maka costum error page ini akan muncul dengan sendirinya..
Pada postingan saya kali ini saya akan membahas tentang cara costum error page pada blog,agar tampilan error 404 lebih bagus dan mengalihkan ke homepage atau beranda pada blog kita,seandainya ada url yang error pada blog kita. .
Blogger costum error page
cara memasang costum error page 404
  • Masuk ke dasbor blogger kalian
  • Pilih tempelate>>edit HTML
  • Cari  kode </body> pada tempelate anda
  • Copy Kode dibawah ini dan letakan diatas </head> pada tempelate anda
<b:if cond='data:blog.pageType == "error_page"'>
<style>
/* CSS reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
html,body{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
#error-not-found{background:#310404 url(https://css3-tutsplus.googlecode.com/svn/trunk/Erorpage404/images/red_texture.png) repeat;font-family:'BebasNeueRegular';z-index:999999;position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999999}
.eror-page{background:-webkit-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-moz-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-ms-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));position:absolute;width:100%;height:100%;left:0px;top:0px;z-index:1000}
#error-not-found h2{position:absolute;top:50%;line-height:100px;height:100px;margin-top:-50px;font-size:100px;width:100%;text-align:center;color:transparent;-webkit-animation:blurFadeInOut 3s ease-in backwards;-moz-animation:blurFadeInOut 3s ease-in backwards;-ms-animation:blurFadeInOut 3s ease-in backwards;animation:blurFadeInOut 3s ease-in backwards}
#error-not-found h2.frame-1{-webkit-animation-delay:0s;-moz-animation-delay:0s;-ms-animation-delay:0s;animation-delay:0s}
#error-not-found h2.frame-2{-webkit-animation-delay:3s;-moz-animation-delay:3s;-ms-animation-delay:3s;animation-delay:3s}
#error-not-found h2.frame-3{-webkit-animation-delay:6s;-moz-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s}
#error-not-found h2.frame-4{font-size:200px;-webkit-animation-delay:9s;-moz-animation-delay:9s;-ms-animation-delay:9s;animation-delay:9s}
#error-not-found h2.frame-5{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span{-webkit-animation:blurFadeIn 3s ease-in 12s backwards;-moz-animation:blurFadeIn 1s ease-in 12s backwards;-ms-animation:blurFadeIn 3s ease-in 12s backwards;animation:blurFadeIn 3s ease-in 12s backwards;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span:nth-child(2){-webkit-animation-delay:13s;-moz-animation-delay:13s;-ms-animation-delay:13s;animation-delay:13s}
#error-not-found h2.frame-5 span:nth-child(3){-webkit-animation-delay:14s;-moz-animation-delay:14s;-ms-animation-delay:14s;animation-delay:14s}
.sp-globe{position:absolute;width:282px;height:273px;left:50%;top:50%;margin:-137px 0 0 -141px;background:transparent url(https://css3-tutsplus.googlecode.com/svn/trunk/Erorpage404/images/globe.png) no-repeat top left;-webkit-animation:fadeInBack 3.6s linear 14s backwards;-moz-animation:fadeInBack 3.6s linear 14s backwards;-ms-animation:fadeInBack 3.6s linear 14s backwards;animation:fadeInBack 3.6s linear 14s backwards;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter:alpha(opacity=30);opacity:0.3;-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);transform:scale(2)}
.sp-circle-link{position:absolute;left:50%;bottom:100px;margin-left:-50px;text-align:center;line-height:100px;width:100px;height:100px;background:#fff;color:#3f1616;font-size:25px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:fadeInRotate 1s linear 16s backwards;-moz-animation:fadeInRotate 1s linear 16s backwards;-ms-animation:fadeInRotate 1s linear 16s backwards;animation:fadeInRotate 1s linear 16s backwards;-webkit-transform:scale(0.8) rotate(0deg);-moz-transform:scale(0.8) rotate(0deg);-o-transform:scale(0.8) rotate(0deg);-ms-transform:scale(0.8) rotate(0deg);transform:scale(0.8) rotate(0deg)}
.sp-circle-link:hover{background:#85373b;color:#fff}
/**/@-webkit-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-webkit-transform:scale(0)}
}
@-webkit-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;-webkit-transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
}
@-webkit-keyframes fadeInBack{0%{opacity:0;-webkit-transform:scale(0)}
50%{opacity:0.4;-webkit-transform:scale(1)}
100%{opacity:0.2;-webkit-transform:scale(2)}
}
@-webkit-keyframes fadeInRotate{0%{opacity:0;-webkit-transform:scale(0) rotate(360deg)}
100%{opacity:1;-webkit-transform:scale(1) rotate(0deg)}
}
/**/@-moz-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-moz-transform:scale(0)}
}
@-moz-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
}
@-moz-keyframes fadeInBack{0%{opacity:0;-moz-transform:scale(0)}
50%{opacity:0.4;-moz-transform:scale(1)}
100%{opacity:0.2;-moz-transform:scale(2)}
}
@-moz-keyframes fadeInRotate{0%{opacity:0;-moz-transform:scale(0) rotate(360deg)}
100%{opacity:1;-moz-transform:scale(1) rotate(0deg)}
}
/**/@keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;transform:scale(0)}
}
@keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
}
@keyframes fadeInBack{0%{opacity:0;transform:scale(0)}
50%{opacity:0.4;transform:scale(1)}
100%{opacity:0.2;transform:scale(2)}
}
@keyframes fadeInRotate{0%{opacity:0;transform:scale(0) rotate(360deg)}
100%{opacity:1;transform:scale(1) rotate(0deg)}
}
</style>
<div class="container">
<div id='error-not-found'>
<div class="eror-page">
<div class="sp-globe"></div>
<h2 class="frame-1">Mohon Maaf..!!!</h2>
<h2 class="frame-2">Halaman Yang Anda Cari Tidak Ada</h2>
<h2 class="frame-3">Pergi ke Home</h2>
<h2 class="frame-4">Now !!</h2>
<h2 class="frame-5"><span>Page Not</span> <span>Found.</span> <span>404.!!</span></h2>
<a class="sp-circle-link" expr:href='data:blog.homepageUrl' title='home page'>HOME</a>
</div>
</div> </div> <!-- end-->
</b:if>
  • Kalau sudah memasukan kode diatas selanjutnya save tempelate anda
Keterangan: 
Untuk mencobanya apakan eror page ini bekerja pada blog anda, anda tinggal masukan url pada browser dengan alamat url yang tidak ada pada blog ana contoh http://namablog-kamu.blogspot.com/erorpage

Baca Selengkapnya ....

Cara memasang kaskus emoticon untuk postingan blog

Posted by Unknown Selasa, 18 Juni 2013 0 komentar
Berikut cara mudah dan cepat memasang emoticon kaskus untuk postingan di blogger/blogspot,sehingga postingan kita lebih bervariasi dengan adanya emoticon kaskus ini. ;) memang sudah banyak para blogger senior yang membahas atau berbagi tutorial tentang cara memasang emoticon di blog,baik emoticon untuk postingan dan emoticon pada komentar blog tapi saya juga ingin berpartisipasi dengan berbagi tutorial yang saya tau. . :D Langsung saja ke caranya memasang emoticon untuk postingan blog. .
Cara memasang emoticon kaskus di blog
Memasang emoticon di postingan
  • Masuk ke blogger dasbor kalian
  • Menu tempelate dan edit HTML
  • Selanjutnya cari kode ]]></b:skin>
  • Kemudian copy kode dibawah ini dan pastekan tepat dibawah ]]></b:skin> pada tempelate anda
<script src='http://cekidot-gan-emotkaskus.googlecode.com/files/emoticoncekidotgan.js' type='text/javascript'/>
  • Kalau sudah Save tempelate anda
Untuk menggunakan emoticon pada postingan,gunakan kode-kode emoticon yang anda inginkan.Nah begitulah cara memasang kaskus emoticon untuk postingan di blog. . :x 

Baca Selengkapnya ....

Berkreasi membuat tulisan marquee keren dengan menambah css

Posted by Unknown Minggu, 16 Juni 2013 0 komentar
Membuat tulisan dengan efek marquee atau tulisan berjalan pada postingan blog sangat mudah,memang sudah banyak blogger senior yang membahas atau memberikan tutorial tentang cara membuat tulisan dengan efek marquee,tapi tidak ada salahnya pada postingan saya kali ini, saya akan membahas tentang berkreasi membuat tulisan marquee dengan menambah kode css,sehingga akan menjadikan efek marquee yang lebih bagus. .
cara membuat efek marquee di blogger
Cara membuat efek marquee
Biasanya default efek marquee di buat dengan kode html berikut.
<marquee>SELAMAT DATANG DI BLOG ANDOELSEAN</marquee>,hasilnya seperti di bawah ini. SELAMAT DATANG DI BLOG ANDOELSEANNamun pada postingan saya kali ini saya akan menambahkan kode css,untuk memperindah efek marquee,sehingga hasilnya akan menjadi seperti di bawah ini.
SELAMAT DATANG DI BLOG ANDOELSEAN,SILAHKAN BACA ARTIKEL MENARIK LAINYA
Code untuk membuat marquee seperti di atas adalah:
<div class="marqueeart2">
<marquee style="color: white; font-family: Times New Roman; font-size: 30px; text-shadow: 2px 2px 4px #000;">SELAMAT DATANG DI BLOG ANDOELSEAN,SILAHKAN BACA ARTIKEL MENARIK LAINYA</marquee></div>
<style>
.marqueeart2 {
border-radius:6px;
border:1px solid #1E90FF;
border-left:5px solid #1E90FF;
border-right:5px solid #1E90FF;
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
}
</style>
Untuk menggunakan kode di atas,pada saat akan memasukan effect marque pada postingan beralih dulu dari mode Compose ke HTML,kalau belum mengerti lihat gambar dibawah ini. . ! !
Mode postingan di blogger
Nah jika anda ingin mengedit kode marquee'nya,silahkan ganti kode yang berwarna sesuai yang anda inginkan. .
KETERANGAN:
  • Kode yang berwarna ORANGE di atas adalah untuk kata-kata dalam marquee,silahkan ganti dengan kata-kata yang anda inginkan. 
  • Border-radius:itu untuk sudut lengkung pada kotak marquee,nilai 6px bisa anda ganti dengan yang anda inginkan 
  • Border:untuk garis tepi pada kotak marquee,silahkan disesuaikan nilai dan warnanya sesuai yang anda inginkan 
  • Border-left:itu untuk border sebelah kiri silahkan atur ketebalan dan warnanya. 
  • Border-right:Untuk border sebelah kanan 
  • Dan kode yang berwarna MERAH,itu untuk css background gardient,silahkan anda ganti sesuai yang anda inginkan,kalau gak tau bagaimana caranya membuat css background gardient silahkan buat disini.
Nah saya rasa cukup sampai disini dulu tutorial tentang cara berkreasi membuat tulisan marquee dengan menambah css,selamat mencoba dan berksperimen. . :)

Baca Selengkapnya ....
Trik SEO Terbaru support Online Shop Baju Wanita - Original design by Bamz | Copyright of download mp3 cutter.