Cara Membuat Threaded Comments Valid HTML5 di Blogger by zulfansy

9:38 AM zulfansyah 0 Comments

Cara Membuat Threaded Comments Valid HTML5 di Blogger - Halo sobat Blogger, kali ini saya akan membagikan suatu artikel yang Insyaallah bermanfaat untuk sobat, yaitu cara membuat threaded Comment valid HTML5 di blog, tutorial ini saya dapat dari +Rio Us .

Threaded Comments

Sebelum mempraktekannya di blog sobat, alangkah baiknya jika kita melihat fitur pada Threaded Comments ini, fitur lihat dibawah ini.


Fitur :

  • Emoticon
  • Optimasi Avatar
  • jQuery Smoot Scrolling
  • Valid HTML5
Untuk demo, sudah ada Screen shot gambar diatas, atau sobat bisa lihat disini


Memasang Threaded Comments


Cari kode di bawah ini :


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

.
Lalu ganti script di atas dengan script dibawah ini :


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


Simpan CSS berikut, diatas ]]><b:skin>



/* Threaded Comments By Fajriandaviar.blogspot.com  */
.comment-form p {background-color: #393939;font-size: 12px;line-height: 16px;color: whitesmoke;margin-top: 45px;border-left: 6px solid #4D90F0;padding: 8px 10px;position: relative;}
#comments {margin-bottom:5px;padding:5px;background: #E4E4E4;}
#comments h4 {position: relative;font-size: 16px;margin: -5px -5px 5px -5px;padding: 7px 10px 7px;text-decoration: none;text-align: right;background: #F8F8F8;border: 1px solid #E2E2E2;}.comment_avatar {border:2px solid #fff; height:45px; width:45px; background:transparent url(http://img254.imageshack.us/img254/1986/anonymousavatar.gif) no-repeat center center; float:left; margin-right:10px; overflow:hidden }
.comment_avatar * { max-width:1000% !important; display:block; max-height:1000% !important; width:45px !important; height:45px !important; margin-right:10px }
.comment_name { color:#000; font-size:105%; font-weight:bold; padding:0 0 3px; text-decoration:none; margin:0; text-transform:uppercase; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.comment_name a { color:#000; text-overflow:ellipsis; overflow:hidden }
.comment_name a:hover { color:green }
.comment_body p { font-size:95% }
.comment_header { background-color:#F8F8F8; border:1px solid #ccc; padding:5px; }
.comment_body { background-color:#F8F8F8; border-left:1px solid #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc; margin-top:0; margin-bottom:17px; padding: 1px 10px 0px 10px; position:relative }
.comment_body p img { background-color:#EEE; max-width:100%; width:auto; margin:0 auto; margin-top:5px }
.comment_date { color:#000; cursor:pointer; font-weight:normal }
.comment_date:hover { color:green }
.comment_child .comment_wrap { padding-left:20px }
.comment-delete {border-radius: 2px;z-index:9;border:1px solid #ccc;font-size: 12px; line-height: 1.5em; max-width: 100%; background: #f1f1f1; font-weight: 400; padding: 1px 12px; color: #000 !important;float:right;position:absolute;right:5px;font-family: Arial;}
.comment-delete a:hover{background:#00A8FF;color:#fff;}
.comment_reply {border-radius: 2px;z-index:9;border:1px solid #ccc;font-size: 12px; line-height: 1.5em; max-width: 100%; background: #f1f1f1; font-weight: 400; padding: 1px 12px; color: #000 !important;float:right;position:absolute;right:70px;font-family: Arial;}
.comment_reply a:hover{background:#00A8FF;color:#fff;}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.deleted-comment { color:#ad3000 }
.paging-control-container { background-color:#0070b0; color:#f6f6f6; display:block; margin:5px 0; padding:5px 10px }
.paging-control-container a { color:white }
.paging-control-container a:hover { color:gold }
.comment-form{max-width:100%}
#comment-editor {width: 69.3%!important;background:transparent url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%}
iframe{border:none;overflow:hidden}
/*Target Komentar*/
div:target .comment_header {border-top:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;}
div:target .comment_header {border-right:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;}
div:target .comment_header {border-left:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_header{border:1px solid #ccc;}
div:target .comment_reply {border:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_reply{border:1px solid #ccc;}
div:target .comment-delete {border:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment-delete{border:1px solid #ccc;}
div:target .comment_body {border:2px solid #A07B7B;}
div:target .comment_child .comment_wrap .comment_body{border:1px solid #ccc;}


Lalu cari kode di bawah ini :


<b:includable id='comments' var='post'>
 bla...bla...
</b:includable>


Lalu ganti kode bla...bla... tadi dengan kode dibawah ini :


<div class='comments' id='comments'>
        <b:if cond='data:post.allowComments'>
       
         <b:if cond='data:post.numComments != 0'>
          <h4>
           <b:if cond='data:post.numComments == 1'>
            1 <data:commentLabel/>:
           <b:else/>
            <data:post.numComments/> <data:commentLabelPlural/>
           </b:if>
          </h4>
         </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'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>
              </div>
              <div class='comment_service'>
               <a expr:href='data:comment.url' rel='nofollow' title='Permalink'><span class='comment_date'><data:comment.timestamp/></span></a>             
              </div>
              <div class='clear'/>
             </div>
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
<data:comment.body/>
              <b:else/>
               <p><data:comment.body/></p>
<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)'>Balas</a> 
<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'>Hapus</a>                                                          <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'>
            <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'><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[
Config.maxThreadDepth = 12;//How many threaded level that you want
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}('6 5=\'.v\';6 w=$(\'#o-x\').9(\'y\');7 12(b){6 I=\' \\n\\r\\t\\f\\13\\14\\15\\16\\17\\18\\19\\1a\\1b\\1c\\1d\\1e\\1f\\1g\\1h\\1i\\1j\\1k\\1l\\1m\\1n\\1o\\1p\';J(6 i=0;i<b.z;i++){8(I.g(b.1q(i))!=-1){b=b.j(0,i);1r}}k b}$(\'.K .1s p\').3(7(i,h){A=h.1t();l=A.g(\'@<a B="#c\');8(l!=-1){C=A.g(\'</a>\',l);8(C!=-1){h=h.j(0,l)+h.j(C+4)}}k h});7 L(2){r=2.g(\'c\');8(r!=-1)2=2.j(r+1);k 2}7 M(2){2=\'&1u=\'+2+\'#%N\';O=w.1v(/#%N/,2);k O}7 P(){3=$(5).3();$(5).3(\'\');5=\'.v\';$(5).3(3);$(\'#o-x\').9(\'y\',w)}7 Q(e){2=$(e).9(\'D\');2=L(2);3=$(5).3();8(5==\'.v\'){R=\'<a B="#S" 1w="P()">\'+1x.1y+\'</a><a 1z="S"/>\';$(5).3(R)}1A{$(5).3(\'\')}5=\'#1B\'+2;$(5).3(3);$(\'#o-x\').9(\'y\',M(2))}E=1C.1D.B;F=\'#o-1E\';G=E.g(F);8(G!=-1){T=E.j(G+F.z);Q(\'#1F\'+T)}J(6 i=0;i<q.z;i++){8(\'U\'1G q[i]){6 2=q[i].U;6 H=1H($(\'#c\'+2+\':s\').9(\'V\'));$(\'#c\'+2+\' .1I:s\').3(7(l,W){6 m=q[i].D;8(H>=1J.1K){$(\'#c\'+m+\':s .1L\').X()}6 u=$(\'#c\'+m+\':s\').3();u=\'<Y 1M="K" D="c\'+m+\'" V="\'+(H+1)+\'">\'+u+\'</Y>\';$(\'#c\'+m).X();k(W+u)})}}$(\'.1N a\').Z(7(){d=$(10).9(\'d\');$(\'#\'+d).1O(\'11\')});$(\'.1P a\').Z(7(){d=$(10).9(\'d\');$(\'#\'+d).1Q(\'11\')});',62,115,'||par_id|html||Cur_Cform_Hdr|var|function|if|attr||str||data|||indexOf|||substring|return|index|child_id||comment||Items||first||child_html|comment_form|Cur_Cform_Url|editor|src|length|temp|href|index_tail|id|cur_url|search_formid|search_index|par_level|whitespace|for|comment_wrap|Valid_Par_Id|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|reset_html|origin_cform|ret_id|parentId|level|oldhtml|remove|div|click|this|comment_collapsed|trim|x5b|x5d|x7c|x7d|x3c|x3e|x0b|xa0|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u200b|u2028|u2029|u3000|charAt|break|comment_body|toLowerCase|parentID|replace|onclick|Msgs|addComment|name|else|r_f_c|window|location|form_|rc|in|parseInt|comment_child|Config|maxThreadDepth|comment_reply|class|collapse|addClass|expand|removeClass'.split('|'),0,{}))
//small avatar
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/"));
});  
//Emoticon
$(function () {
    var emoRange = "#comments p, div.emoWrap, div.post-body";
dfs
    function emo(emo, imgRep, emoKey) {
        $(emoRange).each(function () {
            $(this).html($(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig, "<br> $1").replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"))
        })
    }
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvOFNbJNAG9d2UWcEXMGg_HNYQBNOzNS4UH8OIMDPqwTzqItIck2MjCLMXIHo8BWXsjL6nCCywI8rSnq6ORN0A3S-m7Bn_9Ym_3s9fdN1bkTMqrrr095PcD5lbN44XUsqUI0yVNtrWXa0/s1600/smile1.gif", ":)");
    emo(/\s;\)+/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/wink.gif", ";)");
    emo(/\s:\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/sad.gif", ":(");
    emo(/\s=\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/sadanimated.gif", "=(");
    emo(/\s@@,/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/rolleyes.gif", "@@,");
    emo(/\s:yaya:/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/yaya.gif", ":yaya:");
    emo(/\s:s/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/sullen.gif", ":s");
    emo(/\s:\\/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/memble.gif", ":&#92;");
    emo(/\s:D/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/haha.gif", ":D");
    emo(/\s=D/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/hihi.gif", "=D");
    emo(/\s\^:D/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/abovemehaha.gif", "^:D");
    emo(/\s\^(\_|)\^/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/senyum-tulus.gif", "^_^");
    emo(/\s:'\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/cry.gif", ":&#39;(");
    emo(/\s:waaa:/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/wawa.gif", ":waaa:");
    emo(/\sT_T/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/tears.gif", "T_T");
    emo(/\sB\)/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/cool.gif", "B)");
    emo(/\s:Q/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/smoking.gif", ":Q");
    emo(/\s\*\*p/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/crazy.gif", "**p");
    emo(/\s7:\(/g, "http://reader-download.googlecode.com/svn/trunk/images/emo/conf.gif", "7:(");
    emo(/\s:p/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/wee.gif", ":p");
    emo(/\s:Oz+/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/sleep.gif", ":Ozz");
    emo(/\s7:O/ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/angry.gif", "7:O");
    emo(/\s\\o\//ig, "http://reader-download.googlecode.com/svn/trunk/images/emo/applause.gif", "&#92;o/");
});
//]]>
</script>
<script type='text/javascript'> 
var jump=function(e)
{
    //alert(&#39;here&#39;);
   if (e){
       //e.preventDefault();
       var target = jQuery(this).attr(&quot;href&quot;).replace(&#39;/&#39;, &#39;&#39;);
   }else{
       var target = location.hash;
   }

   jQuery(&#39;html,body&#39;).animate(
   {
       scrollTop: (jQuery(target).offset().top) - 150
   },3000,function()
   {
       //location.hash = target;
   });

}

jQuery(document).ready(function($)
{
    $(document).on(&#39;click&#39;, &#39;a[href*=#]&#39;, jump);

    if (location.hash){
        setTimeout(function(){
            $(&#39;html, body&#39;).scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $(&#39;html, body&#39;).show();
    }
});
</script>


Validasi HTML5 


Cari semua kode di bawah dan hapus satu persatu.
  • allowtransparency='true'
  • frameborder='0'
  • src='' style='display: none'
  • scrolling='no'
  • width='100%'
Kemudian cari kode dibawah ini :


<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>


Ganti dengan ini :


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>



Selesai sudah tutorial saya hari ini, jika ada pembahasan atau ada kekurang atau kesalahan bisa sobat berkomentar di kolom yang telah disediakan dibawah ini, terima kasih telah mengunjungi blog saya, untuk segala kekurangan dan kesalahan saya ucapkaan maaf, Wassalam.


Resource : http://www.daengrio.com/2013/10/threaded-comments-blogger-valid-html-5.html

0 comments:

Cara Membuat Menu Horizontal Seperti KASKUS by zulfansy

9:38 AM zulfansyah 0 Comments

Cara Membuat Menu Horizontal Seperti KASKUS

Assalamu'alaikum....
Wah sepertinya ada yang lagi cari menu horizontal seperti Kaskus Hehehe, OK dah kita langsung saja pada inti dari postingan ini yaitu Cara Membuar Menu Horizontal Seperti Kaskus ikuti langkah demi langkah berikut :



-Pergi ke Dasbord Blogger kalian
-Template � Edit HTML �
-Cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
 

Keterangan:


Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.
-sisipkan kode CSS berikut ini tepat di atas ]]></b:skin> .



/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Fajri Andaviar
Blog: Fajri Andaviar
URL : http://fajriandaviar.blogspot.com/
--------------------------------------------------------------*/
 

.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

 

.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}

.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}

.kolom-menu ul {
height: auto;
margin-top: 0px;
}

.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}

 

.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}

 .kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

 

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125); 



Keterangan:


Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

-Lalu cari kode <body> dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.




<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://fajriandaviar.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9XxTN3GBi4y9Mp9pa9qxBWnn0iiRIOpEcNHcZ9pBuk7kJQr7LFntvA3NeT7-2vLuP6Pc-x4DPQXK9wJ6RMJpCcW8GwzADv2J66VqLiwLuC7bOXDiUQWcY3uLo_f-jIfP3naodTO-qJho/s800/Beranda.png' width='20px'/></a></li>
<li><a href='URL'>Menu Kiri 1</a></li>
<li><a href='URL'>Menu Kiri 2</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='URL'>Menu Kanan 1</a></li>
<li><a href='URL'>Menu Kanan 2</a></li>
</ul>
</div>
</div>
</div>



Keterangan:


Ganti http://fajriandaviar.blogspot.com/ dengan URL blog Kalian dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

-Terakhir simpan template.

Bagaimana? Lumayan baguskan?
Sekian Tutorial saya Cara Membuat Menu Horizontal Seperti KASKUS ini. Selamat mencoba dan semoga berhasil.

0 comments:

Membuat Artikel Terkait Disertai Thumbnail Gambar by zulfansy

9:38 AM zulfansyah 0 Comments

Artikel Terkait Disertai Thumbnail Gambar
Demo Artikel Terkait

Membuat Artikel Terkait Disertai Thumbnail Gambar - sudah lama saya tidak membuka blog, dan kali ini saya akan membagikan artikel yaitu bagaimana membuat artikel terkait disertai thumbnail gambar, artikel terkait ini saya dapat dari tutornesia yang setelah itu saya redesign agar lebih enak dilihat, tidak usah berlama-lama, berikut tutorialnya :



Sebelum memulai, alangkah baiknya anda melihat demo nya terlebih dahulu :


Penerapan Artikel Terkait Disertai Thumbnail Gambar

1. Masuk ke Template > Edit HTML > Letakkan CSS berikut diatas ]]></b:skin> atau </style>
#inikotak {width:100%;height:40px;background:#2282ba;color:#fff;text-align:center;margin:0 auto;margin-top:20px;text-transform:uppercase;font:20px Oswald;border-radius:3px;line-height:40px;vertical-align: middle;position:relative;}
#inikotak::after {content:&quot;&quot;;position:absolute;bottom:-10px;left:10px;border-top:10px solid #2282ba;border-right:20px solid transparent;width:0;height:0;line-height:0}
#artikel-terkait-fhd {margin-left:-30px}
#artikel-terkait-fhd a:hover,a:active{color:#2c3e50;}
#artikel-terkait-fhd ul {width:100%;margin-bottom: 20px; padding:0px;list-style:none; }
#artikel-terkait-fhd ul li{float:left;text-align:center;height:144px;margin:0 20px 10px 0;width:137px;font-size:12px;}
#artikel-terkait-fhd img{padding:3px;width:130px;height:80px;border-radius:4px;box-shadow: 0px 0px 3px 0px rgba(69,62,69,1);}
#artikel-terkait-fhd ul li:nth-child(4n+4){margin-right:0;}

Sesuaikan CSS diatas dengan Template blog anda, css diatas tadi saya menggunakan font Open Sans, masukkan script Open Sans jika sebelumnya belum ada di template anda, atau bisa modifikasi lagi dengan font sesuai keinginan anda.

Langkah selanjutnya cari kode <data:post.body/>, biasanya ada dua, pastekan kode di bawah ini tepat di bawah kode kedua <data:post.body/>, namun jangan hanya fokus pada kode <data:post.body/> saja, karena tiap template berbeda, jika sebelumnya telah ada artikel terkait di template anda, sebaiknya hapus saja script artikel terkait sebelumnya, dan ganti dengan script ini :



<!-- Artikel Terkait FHD :] Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='inikotak'>Baca Juga Artikel Terkait Lainnya</div>
<div id='artikel-terkait-fhd'>
<script type='text/javascript'>//<![CDATA[
var ry='';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ASGGMKORoSzH9ndOxzMv8Dd4ITSa99yvUnDjEryBgKA1aOZqAtbOnBUYx-s-cCdcl1vIwhYSnXoWDa_2s5dJ-_20N-00JtGqzbRwLctpHm8Z_36jKcfTJRd_c2f1kHEcXU-_lS6FTfSF/s1600/no+image.jpg'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s200/")+'" title="'+titles[c]+'"/></a></div><a href="'+urls[c]+'" title="'+titles[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('artikel-terkait-fhd').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=19&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=8;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>
<!-- Artikel Terkait FHD :] End -->

Modifikasi lagi sesuai keinginan anda, ganti kode maxresults=8 dengan jumlah artikel terkait keinginan anda, jika masih ada pertanyakan silahkan berkomentar dibawah ini, terima kasih atas kunjungannya.

0 comments:

jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger by zulfansy

9:37 AM zulfansyah 0 Comments

jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger
jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger - Sudah lama saya tidak membuat artikel, Kali ini saya akan memberikan sebuah tutorial yaitu "jQuery Sliding Panel dengan Membuka/Menutup untuk Blogger" dan pastinya untuk digunakan pada platform Blogger.

Berikut Tutorialnya :


1. Masuk ke Template > Edit HTML > lalu taruh javascript berikut ini diatas </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>


2. Masukkan CSS berikut di atas ]]></b:skin> atau <style>


.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1CHtcInbez6Gkdh4BHacq2GQCtxFot1gKR73PiNoafJqlomapESao8uMEskktdox87Ye200KppWqyYfsViVDLLKT1doOpGzUga758Ug1pz5mt2KhdaHYT-FH5TuMWi7qPEyt56mIBe-7/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTj-K5JnBAWsahvK5MusTceK1I9FIGjMsFQdleRpo04qjsU4dpgt6RGbsjPZ_hEv4fdMOGtY_-8hoFEHcZPC2f1IDZujY8RYntKzN4cgyJL_80XaRpoGeDIUDiGWtMm6cvfS1-9FZ-dtH9/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRLVtdcTESIgfmirvbObf7CwhMjBFp6xO_7WSgYVCOzmCS5SnRC_8MW8HOpeGjHNMNMqMMd9WPI4ndjtmigTIAiciiTSv9KWTIbUmp_Ux2plySZIUUd_9pr4x60qBW-dPq7i1dwkU7LiQy/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFoif9PltEGGuxD7kr1Hi1pqqEThW8wJjngOBvkV8ilQOQup_4-pgsDmbmJnD1N6zZ75z6NcLCAAdZtVnpkl6lKVmKrQOOuNH2aO7revuNEuzbwUFDfeSHd3wDkK3AkS3aFuWLHGgL9trl/s1600/sliding-panel-tab.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD7I7mFGlwrAVed14ggS_EL4BXK9e9LtagKlbDnLCUQY0LYvxaTqLY3v4tVsyc772xNL_o3zULJcOqcoHcYNIVglIc6NClRnQ4ngYs8OhJdO-1nNWOj2gKgi_HD3xJYFppDQqjKvi_uyYz/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVrhGUk-spTqe-I47mLx04DpIf8l6yQQfrx68-ReC7OBd9dERouTIz9xzqJhOwvu8a_ge4ysYTbHxZE-o5lammnKtBrFwCrB0NeiibpPUNDecpEq4BcMCgJwz1-vLzPF4wTBGsf4_t4jIx/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD7I7mFGlwrAVed14ggS_EL4BXK9e9LtagKlbDnLCUQY0LYvxaTqLY3v4tVsyc772xNL_o3zULJcOqcoHcYNIVglIc6NClRnQ4ngYs8OhJdO-1nNWOj2gKgi_HD3xJYFppDQqjKvi_uyYz/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVrhGUk-spTqe-I47mLx04DpIf8l6yQQfrx68-ReC7OBd9dERouTIz9xzqJhOwvu8a_ge4ysYTbHxZE-o5lammnKtBrFwCrB0NeiibpPUNDecpEq4BcMCgJwz1-vLzPF4wTBGsf4_t4jIx/s1600/button-close.png) no-repeat left -19px;}

#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvdOfTY7OfwhySf6qTstFX7jTvrJf99rnuiPwMnN1RSmi9OpUkx5iJQH0h4GpdksEfxP1IdBPZoR0OwQFgo4iJ0a9CxHCNDGSBzfAPJEMoquksAMgRXufFZlh8Q2Ta6MH1GrVjF5nFPq7/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRuUiAmKKFP31AWtVq505K_jcRv3od-QZ4YqrsX08bTq7TzYVQ7bD1Fp4Rg759Z1SEue0QRldPWLli6PdCnfrI8iTSCNkBVwaRCEbHl_iFKMXntkBRmPsnqoiXAC3wPuOwnmOVpX7e3civ/s1600/star-bullet.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}

#search-box22{
margin-top: 20px;
}

#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search-box22 input[type="text"]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}


Silahkan sobat atur sendiri apabila ada kekurangan dari tampilan sliding panel tersebut.

3. Terakhir masukkan HTML berikut di bawah <body>


<!-- Start sliding panel -->
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>

<!-- first section -->
<div class='left' style='width:240px !important'>

<h4>Welcome to my blog!</h4>
<div class='about-author'>
<div class='authorbox'>
<div class='authorinfo'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMX8-TrZk9AhR9pMPRdZNmZo-h5A9VknxGtzziv453xo8JGR6uXywXiKrB_3QVkbQEwrrafM6L-mZYha98QCveE03zTL2fmayLeX9EFnfPYVeiCRR9FrUF8x4n2fmML6tAXJQAf9O1MucL/s1600/profile-pic.png'/>
<h3 class='boxtitle'>Meet the Author</h3>
<p>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.</p>
</div>
</div>
</div>
<p align="right" style="margin-top: 10px;">Looking for something?</p>
<form method="get" action="/search" id="search-box22">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>

<!-- second section -->
<div class='left' style='width:320px !important'>
<h4>Categories</h4>
<div id='sliding-panel'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>
</div>

<!-- third section -->
<div class='left right' align="center">
<h4>Subscribe to this blog!</h4>
<p style="padding:0px 30px;">Receive the latest posts by email. Just enter your email below if you want to subscribe!</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='en_EN'/>
<input class='button-register' type='submit' value='Subscribe'/></form>

<div align='center' style="clear: both;">

<a href='http://www.facebook.com/username'><img
title="Follow on Facebook"
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXkY-WGV-4aofmOf7kJg2bZOBUgAlcrxX9osUcHG41rtIsnK98o8PUekRrnpeYJqpzRj-lH1b8JfDQ3eA8qUXyMg3rEQyoOBmnX6yYufw7zVrIwVp34xds2kEmsmdJQtjXIy3mlRrTKvZz/s1600/Facebook.png'
style='padding:5px;' width='32'/></a>

<a href='http://blog-address.blogspot.com/atom.xml'><img
title="RSS Feed"
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRuGAlssQl9bSM4IWD3thPV7v1ItVXiaZn2-DxVNtA2_CPTYcP6XEhLLYLzDQ2k9R2-z_bUXZiLZZcBMmVI08qcXCHHbL-qcC0FzCDJYljya75z1IfhKN3HBpalWE6wZVNJMoD6bp3NZ38/s1600/RSS.png'
style='padding:5px;' width='32'/></a>

<a href='https://plus.google.com/username'><img
title="Follow on Google"
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2mU1TRRHMe1fm4gIGd4kR-iT0JP4CwR1YK0q0gcb7pVhWyoBnllcx35uU-tg40qSsa6g08NbS1n3z1wdZKva16qqm_HyDMP04CziMljOnyUgGav-Z9AreDt4Y1-VU3G5nVC6F0FXjbRdd/s1600/Google-plus.png'
style='padding:5px;' width='32'/></a>

<a href='http://twitter.com/username'><img
title="Follow on Twitter"
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh58HFMfl5DRg8a-kXJxJ6KCucoLXaUWTYpTld-rYRm29MfX_VS_02bZ01Ja13AHP_r9ha2kfEpl8zfAtYyhjWjDh5_1XNYemPxJjgV1LUYBsxqGHwYo6gDHfYGqlpljFpZbylBjDDT74Wd/s1600/Twitter.png'
style='padding:5px;' width='32'/></a>
</div>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hello guest!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Open menu</a>
<a class='close' href='#' id='close' style='display: none;'>Close menu</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

Selamat mencoba !

0 comments:

Cara Mendapatkan Kode Google Site Verifikasi/Verification by zulfansy

9:36 AM zulfansyah 0 Comments

Cara Mendapatkan Kode Google Site Verifikasi/Verification
Cara Mendapatkan Kode Google Site Verifikasi/Verification - Mendengar kata ini, pasti anda telah mengetahui maksud dari postingan ini, yap google site verifikasi ini bertujuan untuk memverifikasi bahwa anda adalah pemilik asli dari blog tersebut.

Google Webmaster Tools memang memiliki beberapa fitur untuk memverikasi pemilik asli dari blog tersebut, macam-macam pilihan verifikasi seperti : Verifikasi via email, HTML Tag, Google Analytic dan melalui DNS domain jika blog anda telah memiliki Custom Domain.

Baca juga : Cara Mendapatkan Kode Verikasi Alexa


Manfaat Kita Memverifikasi Blog ke Webmaster Tools

Menurut saya banyak sekali mafaat dari memverifikasi Blog ke Webmaster Tools, salah satunya membuat postingan/artikel kita cepat terindex Google, dan Google secara otomatis akan mengindex cepat sitemap blog tersebut, cara ini sangat bermanfaat pada optimasi seo blog anda, Google pun percaya bahwa blog kita bukanlah blog "Dummy" atau blog "Robot" setelah kita memverifikasi Blog ke Webmaster Tools.

Contoh kepemilikan situs/blog :

Contoh Kepemilikan Situs/Blog pada Search Engine


Cara Penerapan Memverifikasi Blog ke Webmaster Tools

1. Pertama masuk ke alamat: https://www.google.com/webmasters/tools , Jika belum Login, silahkan anda login terlebih dahulu menggunakan akun google anda.

2. Klik Blog anda yang ingin di verifikasi, atau klik "Tambahkan Situs" jika blog anda belum terdaftar di Google Webmaster Tools.

Pilih Blog yang ingin di verifikasi

3. Klik gambar  () , lalu klik "Detail Verifikasi"

Klik Detail Verifikasi




4. Lalu klik "Verifikasikan dengan menggunakan metode yang berbeda".

Klik Verifikasikan dengan menggunakan metode yang berbeda

5. Kemudian Klik "Tag HTML", lalu akan muncul sebuah kode Meta tag HTML Google Site Verification.

Tag HTML yang di pasang pada Template Blog

6. Copy kode tersebut di template anda, letakkan tepat dibawah kode <head> , Setelah itu Simpan Template, setelah disimpan, kembali lagi pada Google Webmaster, dan klik "Verifikasi".


Kode Tag HTML pada Webmaster Tools akan nampak seperti ini <meta name="google-site-verification" content="o9HoMufLEG-UvEplNRUNpyn2UzlppqaPAftcThzfD6Q" /> , setelah simpan ditemplate, otomatis Google akan merayapi Blog anda, dalam arti akan mengindex secara cepat pada blog anda.


Resource: http://www.just4rt.com/2013/07/cara-mendapatkan-kode-google-site-verification.html

0 comments:

Cara Membuat Sticky Widget Sidebar di Blog by zulfansy

9:36 AM zulfansyah 0 Comments


Membuat Widget Sidebar menempel di Blog

Cara Membuat Sticky Widget Sidebar - Banyak orang yang bertanya, bagaimana sih cara membuat Widget Sidebar selalu menempel atau selalu mengikuti kemana scroll naik atau turun, kali ini Berilah ingin memberikan tutorial tersebut

Perhatian: Dulu blog Berlian adalah LintasWeblog, jadi maklumi jika setiap postingan selalu ada kata LintasWeblog


Kelebihan Sticky Widget

Kelebihannya tentu membuat pengunjung menjadi lebih mudah untuk melihat Sidebar Widget yang sobat-sobat gunakan pada blog sobat, dan Sticky Widget ini tidak memberatkan atau tidak memberi efek berat pada blog sobat, jadi jangan sungkan untuk menggunakan Sticky Widget ini.


Cara Membuat Sticky Widget Pada Blog

  • Masuk ke Dashboard Blogger
  • Klik Template � Edit HTML
  • Cari kode ]]></b:skin> ( untuk mempercepat pencarian tekan Ctrl+F )
  • Masukkan kode dibawah ini diatas/sebelum kode ]]></b:skin> 


<!--sticky-->
#mdstickybar {background-color:#ECEEF5;padding-top:10px;width:300px!important;padding-bottom:15px;
color:#474747;}
<!--sticky-->


  • Lalu cari kode </head> dan masukan kode dibawah ini diatas/sebelum kode </head>


<!--sticky-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Lintas Weblog
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Created: 2/14/2011
// Date: 9/12/2011
// Website: http://labs.anthonygarand.com/sticky
// Description: Makes an element on the page stick on the screen as you scroll
// For Blogger by : http://lintasweblog.blogspot.com/
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>
<!--sticky-->

Kode yang saya beri warna berbeda, itu adalah jQuery, jika sudah ada jQuery tersebut diblog sobat, lebih baik hapus satu, karena jika jQuery tersebut ada dua di Blog sobat, Sticky Widget ini tidak akan bisa/berhasil.


  • Selanjutnya cari </body>
  • Masukkan kode dibawah ini diatas/sebelum kode </body>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#mdstickybar&quot;).sticky({topSpacing:0});
});
</script>
  • Simpan Template
Setelah itu kita harus mencari ID Widget yang akan kita pasang Sticky Widgetnya, Untuk mencari ID Widget Cukup Sobat masuk pada Tata Letak � Lalu cari widget yang akan sobat pasang Sticky � lalu Klik Edit pada Widget tersebut, nah ID Widget sobat akan tertera pada Url Widget, contoh Url Widget:


http://www.blogger.com/rearrange?blogID=1787216510986734973&action=editWidget&sectionId=sidebar-bawah&widgetType=null&widgetId=HTML2
Yang saya beri warna Hijau tadi, itu adalah ID Widget
  • Lalu sobat kembali lagi ke Template � Edit HTML
  • Lalu cari ID Widget sobat yang tadi ingin diberi Sticky Widget
  • Contoh ID Widget yang ada pada Template


 <b:widget id='HTML2' locked='false' title='Contact' type='HTML'>
 <b:includable id='main'>
 <!-- only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
 <h2 class='title'><data:title/></h2>
 </b:if>
 <div class='widget-content'>
 <data:content/>
 </div>
 <b:include name='quickedit'/>
</b:includable>
 </b:widget>

Diatas adalah kode Widget asli pada Template sobat, mungkin biasanya berbeda sedikit, tapi cara membuat Sticky Widget ini akan selalu berhasil :P


  • Lalu Sobat hanya tinggal menambah beberapa kode pada kode Widget diatas tadi, berikut kodenya...
<div id='mdstickybar'>
</div>


  • Masukan kode tadi, di Widget seperti ini:
<b:widget id='HTML2' locked='false' title='Contact' type='HTML'>
<b:includable id='main'>
<div id='mdstickybar'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
  • Terakhir, Simpan Template.

Itulah Cara Membuat Sticky Widget Sidebar Pada Blog. Jika ada kekurangan atau terjadi masalah pada Template Sobat bisa berkomentar dibawah ini.

Sebenarnya Siraja Blogger "Kang Ismet" sudah pernah memberikan tutorial Membuat Sticky Widget pada postingannya, tapi banyak para Blogger yang tidak berhasil/gagal pada tutorialnya tersebut, dengan alasan yang berbeda-beda, dan tutorial ini saya pastikan akan berhasil pada Blog sobat, So Funny and Always Blogging :D

0 comments: