How To add Gadget Next To Blog Header

0

1.Go To Blogger > Design
Edit HTML and find code : ]]></b:skin>

#header {width:50%;display:inline-block;_float:left;} #header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;} #header-right .widget {margin:0;}
Please  Copy Code given above box  ⏫ and Paste it just above code:    ]]></b:skin>

Then copy code given below and paste it just above code:
      ]]>
    </b:template-skin>

#layout #header {width: 50%; float: left;} #layout #header-right {width: 35%; float: right;}

And then please search code: <div class='header-cap-bottom cap-bottom'> after that please copy code given below and paste as per instruction below on RED <b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>

Next: Copy code inside box ⏫ and Search for code given⏬:
      </b:widget>
      </b:section>
Paste here:

</div>
</div>
<div class='header-cap-bottom cap-bottom'>

Klick For Demo
Google Barcode

Read More »

Sample Pemasangan Code Untuk Blogspot.

0

Google Barcode

Klik Live Demo

Read More »

Macam Mana Nak Buat Button Top and Down Dalam Blogger

0

1.Go To Blogger > Design
Choose Add a Page Element
Press "ctrl" and search </body>
Dan paste code below di atas,  (</body>)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <div class='button_up' id='button_up' style='display:none;'/> <div class='button_down' id='button_down' style='display:none;'/> <script> //<![CDATA[ (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})(); $(function() { var $elem = $('body'); $('#button_up').fadeIn('slow'); $('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#button_up,#button_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#button_up,#button_down').stop().animate({'opacity':'1'}); }); $('#button_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#button_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );}); //]]> </script>, sila type guna edit html


2.
Press "ctrl" and search     ]]></b:skin>
Dan paste code below di atas,

/* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-pfMb2j9_1E-L1pZwR46UR0igX8BbeYBA78Kw3fUZDMH1S_7Y8SXZHmmMkcPJwyyZ-W0WNbrLfU_lBktEaS_5wA1zFUUTJkl2wUuK63R9d_LbhbW_Gbwhq6N_9c8FvPU1gQZ8VKE_Dmk/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:280px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .button_down{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8aJK3j93gzcBeI1FU960vLlzMDHR9A7ksJQxuVrZSFK3ZaO7xey6aHzSVbShQwoYgPhN6GnM-Vq1dWMCTqWRIkGbC6bDlDMqWmI3QKwIKXO6I00pdkaEGZShSbpHgvCI-JeCjasHiVc/s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:242px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }, sila type guna edit html


Your TEXT, sila type guna edit html

Google Barcode

Read More »

Macam Mana Nak Buat 3 Tab Widget

0

Google Blog Press

Toturial Kali Ini Ialah Macam Mana Nak Buat 3 Tab Widget, 

Seperti demo dalam bentuk jpg yang tertera dibawah iaitu, Tab:Pupular, Tag, Guide. Sebenarnya anda boleh menukar apa sahaja nama Tab yang anda gemari.

Step yang pertama sila cari code ]]></b:skin>, dengan tekan CTRL+F, kemudian pastekan code dibawah di atas code ]]></b:skin>.

 

.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#4E4840;background:#EBEBE5;padding:5px 16px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#756857;color:#FFF;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

Selepas itu anda seharusnya mencari salah satu code dibawah menggunakan step yang pertama dengan menekan ctrl+f pada keyboard pc. Kemudian sila copy code dalam petak kuning dan pastekan diatas salah satu dari tiga code dibawah.

<div class='column-right-inner'>

<div id='sidebar-wrapper'>

<div id='rsidebar-wrapper'>

Google Barcode

<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
      
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Followers</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>                                      
</div>                           
                               
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>                                        
</div>                           
                               
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>                                    
</div>
</div> 

Read More »

Submit Your Web Portal, Blog URL

0

Google Blog Press

Perlu diingat, Pihak Google tidak guarantee dan bukan semua index blog yang anda submit akan tersenarai

Tetapi ia amat penting bagi anda submit URL untuk klasifikasi yang mana ia amat penting, sekiranya anda tidak berbuat demikian, apa yang yang anda karang atau tulis tidak dapat di cari oleh pembaca atau pelanggan.

Kaedah buat sub domain juga amat penting bagi pelanggan dan pembaca menaip blog atau laman web portal anda dengan mudah seperti contoh blog url seperti yang tertera dibawah berikut:
Mariminum 
Keraguan address url biasanya akan berlaku ketika pihak ke dua atau ketiga menerima lisan mengenai laman blog url seperti: "www,code3.com" biasanya pihak ketiga akan menaip blog url anda seperti, "ww.codethree.com" jadi sekali gus laman url anda tidak dapat dicari, Maka seelok eloknya jauhi dari menggunakan laman web/portal atau blog anda dengan mengunakan number!!. Justeru itu kekuatan index code amat penting atau meta tag blog anda mesti "strong" sekiranya anda ingin menggunakan address yang bernombor.

Read More »