Auto Scrolling Recent Posts Widget

हुन त यो एउटा Trick हो कसरी आफुले पोस्ट गरेको Recent Post हरु आफै चल्ने बनाउन को लागी प्रयोग गर्न सकिन्छ । यसको सहयोग ले तपाइले पोस्ट गर्नु भएको लिन्क हरु आफै सर्ने छन । मैले यसलाई Coding गरेको छु मात्र तपाइ हरु को लागी way2bloging को सहायतामा । आज को यस पोस्ट ले तपाइको भिजिटर लाई उल्झाउने एक प्रायअस मात्र हो । र आकर्षक समेत देखाउछ , हेर्नुहोस ।

सबै भन्दा पहिले तपाइले यो प्रयोग गर्न को निमित्त
1.लगिन गर्नुहोस । 
2.Drop Down Menu मेनु मा क्लिक गर्नुहोस र Layout मा क्लिक गर्नुहोस ।
3.अब साइड बार मा यो तल को कोड कपि गरेर पेस्ट गरी दिनुस ।
4. Save Now .

<script type="text/javascript">
    var w2bWidth= 100;
    var w2bScrollAmount=10;
    var w2bScrollDelay=50;
    var w2bDirection="left";
    var w2btargetlink="no";
    var w2bnumPosts=10;
    var w2bBulletchar =">>>";
    var w2bimagebullet="yes";
    var w2bimgurl="http://i.imgur.com/yvm7e.gif";
    var w2bfontsize=18;
    var w2bbgcolor="FFFFFF";
    var w2blinkcolor="FF0000";
    var w2blinkhovercolor="3366CC";
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging_rpscroller_v3.js" ></script>
<script type="text/javascript" src="http://www.samjhanakophool.blogspot.com/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10" ></script>
<noscript><a href="http://www.samjhanakophool.blogspot.com/2012/10/auto-scrolling-recent-posts-widget.html">Auto Scroll Posts by SAMJHANAKOPHOOL</a></noscript>

तपाइ को लागी यो कोड कच्चा हुन सक्दछ किनकी मैले यो कोड को तयारी मेरो ब्लग को लागी बनाएको थिए त्यसैले तपाइले साधारन परिवर्तन गर्नुहोस । निलो कलर को भएको लाई परिवर्तन गर्नुहोस ।

10 यसलाई परिवर्तन गर्नुहोस आफ्नो इक्षा ले यसमा परिवर्तन गर्दा कती पोस्ट गर्ने भनेर देखाउदछ । जस्तै १० राख्दा १० वटा पोस्ट Scrolling हुनेछ ।

र दुइ ओटा कोड छ जस्लाई कलर गरिएको छ यस्को लाई परिवर्तन गरे नि हुन्छ नगरे नि हुन्छ यो चाही कलर परिवर्तन को लागी हो ।

http://www.samjhanakophool.blogspot.com अब यसको सट्टा मा तपाइको लिन्क राख्नु होस । 

तपाइ को काम सकियो । 
Thank You  

Want to see in Video 

Read more...

How to make post and Label ? With Photo and Video

आज को पोस्ट मा म तपाइ लाई पोस्ट र लेबल कसरी बनाउने भन्ने कुरा को जानकारी दिन जादै छु धेरै जना साथी हरुलाई त आउछ होला तर मैले प्राप्त गरेको मेसेज मा लेबल बनाउन र पोस्ट गर्न नै अन्यौल मा रहेको Blogger Admin हरु पनि भेटें तसर्थ हामिलाई थाहा हुनु पर्दछ कि पोस्ट कसरी गर्ने भनेर र त्यसलाई कसरी छुट्याउने भन्ने कुराको जानकारी पनि हुनु पर्दछ । भन्ने हो भने हामिलाई सबै कुराको सुरुमै जानकारी कसरी हुन्छ र तसर्थ नसिकिकन जान्ने कम नै छन । कि त पढेर जानिन्छ कि परेर जानिन्छ भने जस्तै आज म तपाइलाई पढ्अएर सिकाउन जानिन्छ भने तपाइले परेर सिक्नु हुनेछ ।

सबै भन्दा पहिले तपाइले के बिसयमा पोस्ट गर्नु हुन्छ र के के पोस्ट गर्नु हुन्छ सामाग्री पहिले नै निर्धारन गर्नु होस ।जस्तै मैले यो पोस्ट तयार पार्नु पुर्ब मैले यस पोस्ट मा आवस्यक कुरा हरु पहिले नै तयार पारेको हुन्छु उधाहरण को लागी यस पोस्ट को सिर्षक छुट्याउनु पनि एउटा पुर्ब तयारी अन्तर्गत नै पर्दछ ।

Some Example ;
Video Making software
Screen Capture Software
Post Title and Label
and text body

माथी उल्लेखित शब्दहरु पढ्नु होस र बुझ्नुहोस मैले यो पोस्ट तयार पार्न धेरै कुराको ख्याल राखेर तयार पारेको छु । यो पोस्ट मा नै तपाइले पोस्ट गर्न र लेबल तयार पर्न सक्नु हुनेछ भन्ने मेरो पुरा बिस्वास छ ।

अब कुरा भन्दा पनि काम तिर लागौ आखिर कसरी पोस्ट गर्ने त । आज को पोस्ट मा मैले भिडियो पनि बनाएको छु तर MIC नभएकोले मेरो आवाज राख्न सकिन तसर्थ फोटो र Without साउन्ड भए पनि भिडियो राखेको छु ।

Step - by Step 

This Step for create new post

* ब्लगर मा लागिन गर्नु होस ।
* ड्रप डाउन मेनु मा छान्नुहोस ।
* अब देखिएको लिस्ट मा तपाइले पोस्ट लाई छान्नुहोस ।
* अब न्यू पोस्ट मा क्लिक गर्नुहोस ।
* अनी देखिने छ पोस्ट को टाइटल र त्यसमा टाइटल राख्नुहोस ,अब त्यो भन्दा तल पोस्ट गर्ने थाउ छ त्यहाँ आवस्यक पोस्ट राख्नुहोस ।

१ - टाइटल : यसमा तपाइको पोस्ट को सिर्षक राख्नुहोस
२ - कम्पोज:  यसमा बसेर पोस्ट गर्नुहोस किनकी यसमा Words  सपोर्ट गर्छ ।
३ - HTML : यसमा तपाइले HTML Code हरु पोस्ट गर्न सक्नु हुनेछ । जस्तै घडी राख्नु पर्‍यो भने घडिको HTML कोड HTML मा क्लिक गरेर पेस्ट गर्नुहोस ।
४ - बडी सेक्टर : यस मा तपाइ को पोस्ट हरु समाबेश गर्नुहोस जस्तै अहिले तपाइले पढ्णु भएको सबै मेरो पोस्ट हरु बडी अन्तर्गत पर्दछ ।
५ - Label : यसमा लेबल भनअले तपाइको पोस्ट लाई जनाउने छोटो सब्द्द हो ।
 
 अब तपाइले सानो सानो सब्द प्रयोग गर्नुहोस र बनाउनुहोस ठुलो पोस्ट । यो पोस्ट मेरो ब्लगर टिप्स , ईन्टरनेट टिप्स , र भिडियो सहित को भएको ले मैले Blogger Tips , Internet Tips , With Video भनेर लेबल बनाए तपाइ को पनि पोस्ट अनुसार बनाउनुहोस । 

सबै पोस्ट गरी सके पछी पब्लिश गरी दिनुहोस ।
तपाइलाई नेपाली मा लेख्न कठिन भए यहाँ क्लिक गर्नुहोस र रोमन बाट लेखेर कपि गरेर पेस्ट गर्नुहोस । 

See Video Here

Read more...

How to Enable Mobile Version

यस पोस्ट मा आज म तपाइ Blogger हुनु हुन्छ भने तपाइको ब्लग लाई कसरी मोबाइल भिउ मा समेत हेर्न मिल्ने बनाउने भन्ने कुरा सिकाउने छु । हाम्रो देश नेपाल मा ५०% भन्दा बढी मानिस मोबाईल बाट Internet suffer गर्ने गर्दछ तसर्थ मोबाईल मा तपाइ को ब्लग हेर्न मिल्ने बनाउनु जरुरी छ । हाम्रो ब्लग को च र्चा कमाउन मोबाईल मा समेत हेर्न मिल्ने बनाउन सकेउ भने मात्र बल्ल हाम्रो ब्लग को बि स्तार हुने छ किनकी आधा मानिस त मोबाईल मा चलाउछ ईन्टरनेट ।

सदा झै तपाइ लागिन गरेर Template सम्म पुग्नु होस । र आज EDIT HTML को सट्टामा तपाइले यो Image  मा देखाएको जस्तो तपाइ को मा देखाएको हुन्छ यदी तपाइको ब्लग Disable छ भने यदी छैन भने Disable देखिदैन चित्र मा हेर्नुहोस । 

तपाइको मा Enable छ भने चित्र अहिले को जस्तो देखिन्छ यदी active छैन भने पहिले को जस्तो देखिन्छ तसर्थ पहिले को जस्तो देखियो भने यो Step मा जानुहोस यदी पहिले देखी नै Activate नै छ भने के हि गर्नु पर्दैन ।
1.पहिले को जस्तो चित्र छ भने तपाइले गियर मा क्लिक गर्नुहोस ।

2.माथी को जस्तो चित्र देखिने छ र तपाइले माथी को चित्र मा जस्तै   Yes show mobile version of your current template लाई छान्नुहोस ।
3.अब शेभ गर्नुहोस या पृभिउ हेर्नुहोस कस्तो देखिन्छ ।

अब मोबाईल मा कसरी हेर्ने भन्ने कुरा आउछ यो लिन्क शेयर गर्न सक्नु हुन्छ अथवा Direct नै अब मोबाईल मा पनि खुल्छ । सजिलो को लागी यो लिन्क  [Your Blog URL]/?m=1बनाउनुहोस । 

For Example www.samjhanakophool.blogspot.com/?m=1
तपाइले मेरो लिन्क को सट्टा मा तपाइको प्रयोग गर्नु होस 

Read more...

मेनु कसरी बनाउने ?

मैले यो पोस्ट मा सबै भन्दा महत्व पुर्ण पोस्ट गर्न जादै छु जुन चाही ब्लग को प्राण हो । अहिले सम्म तपाइ हरु लाई अन्य महत्व पुर्ण कुरा सिकाए तर कसरी मेनु राख्ने भनेर सिकाएको छैन तसर्थ यो पोस्ट मा मेनु बिसेश रहनेछ । हेरौ तपाइ को लागी कती को उपायोगी हुनेछ । यस पोस्ट अन्तर्गत तपाइले Drop down मेनु कसरी बनाउने भन्ने कुरा सिक्नु हुनेछ भन्ने आसा लिएको छु । ड्रप डाउन भन्नाले तपाइले मेरो ब्लग मा डिजाइन मा माउस लादा त्यसको तल ग्राफिक डिजाइन , वेबसाईट डिजाइन र अन्य भनेर देखिन्छ यस्तै बनाउनु लाई Drop Down मेनु भनिन्छ । अब लागौ कसरी राख्ने तर्फ ।


सबै भन्दा पहिले तपाइले लागिन गरेर EDIT HTML सम्मा पुग्नु होस 
यदी बिर्सनु भयो भने पुरानो पोस्ट हेर्नु होस 

1. एडिट HTML सम्म पुगी सके पछी तपाइले यो कोड खोज्नु होस   </head> Shortcut code { CTRL + F and </head> }।
2. अब तपाइले </head> कोड भन्दा माथी तल को कोड पेस्ट गर्नुहोस ।

<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://samjhanakophool.blogspot.com-->

    
        3. तपाइले टेम्प्लेट सेभ गर्नु भन्दा पहिले तपाइले कोड मा थोरै परिवर्तन गर्नुहोस मेरो मतलब कलर मा परिवर्तन गर्नुहोस । 

कलर को कोड को लागी तपाइले यो साइट प्रयोग गर्न सक्नु हुनेछ । Click Here
    4. कलर लाई परिवर्तन गरी सक्नु भए पछी तपाइले टेम्प्लेट लाई शेभ गर्नुहोस
    5. "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript"  and paste गर्नुहोस तल को कोड  तपाइ को आवस्यकता अनुसार  

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://samjhanakophool.blogspot.com/search/label/Blogger Tips">Blogger Help</a></li>
</ul>    

Note : तपाइले माथी को कोड मा # को सट्टा मा तपाइको लिन्क राख्नुहोस जस्तै होम मा www.samjhanakophool.blogspot.com भनेर राख्नुहोस ।
थप्न चाहनु भएको खन्ड मा  
न्यू थप्नु चाहनु भएको मा मेरो मतलब तपाइले मेनु र सब मेनु दुबै राख्नु खोज्नु भयो भने यसरि थप्नु होस 

</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>

सब मेनु मात्र बनाउन को लागी तपाइले  Add or Remove
</ul> भन्दा माथी 

<li><a href="#">Semitransparent</a></li>

यसरि राखी दिनुहोस

for Example

</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>

लाई परिवर्तन गर्दा 

</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">New Sub menu added</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>

थपिएको लाई रातो कलर गरिएको छ 
Now Save HTML/JavaScript Box
Thank You for Viewing this Post
Jiban

Read more...

Twitter in Sidebar

यो पोस्ट हेर्नुहोस यसमा तपाइलाई ब्लग मा मेरो जस्तो Sidebar मा कसरी twitter का अपडेट कसरी देखाउने भनेर सिकाउदै छु । हुन त हाम्रो देश मा Twitter कमै ले चलाउछन त बिस्वमा हिसाब गर्ने हो भने ७००००० लाख ले पोस्ट गरी रहेको हुन्छ तसर्थ ब्लग लाई राम्रो सङ्ग चलाउन को लागी Twitter पनि एक हो । अब लागौ पोस्ट तिर

सबै भन्दा पहिले
१ लागिन गर्नुहोस
२ ड्रप डाउन मेनु मा क्लिक गर्नु होस र त्यहाँ layout मा क्लिक गर्नुहोस ।
३ अब तपाइले कता राख्न चाहनु हुन्छ त्य्स्को Add gadget मा क्लिक गर्नु होस र ट्यसमा HTML / JavaScript लाई सेलेक्ट गर्नु होस  and Copy below code and paste in box

<div style="background:#cc0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKXrHe4W4yTGFHKsfG6qla76Kr7YLCrzKhHQM6nnSpRsrN7vkzS2jFV-5W0k243r7u4k5XB8N-BBGTMkptp7Ht8nwCZVenimIFenMQc6SObiE5yYSk5_y5Xoqp85Kv30zad2mELb57LpM/s1600/twitter+me.png) no-repeat;padding-top:46px;padding-left:10px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 260,
height: 180,
theme: {
shell: {
background: 'transparent',
color: '#aeaeae'
},
tweets: {
background: 'transparent',
color: '#aeaeae',
links: '#cc0000'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('JibanShrestha1').start();
</script>
</div>


<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){

// UL = .tabs
// Tab contents = .inside

var tag_cloud_class = '#tag-cloud';

//Fix for tag clouds - unexpected height before .hide()
var tag_cloud_height = jQuery('#tag-cloud').height();

jQuery('.inside ul li:last-child').css('border-bottom','0px') // remove last border-bottom from list in tab conten
jQuery('.tabs').each(function(){
jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load
});
jQuery('.inside > *').hide();
jQuery('.inside > *:first-child').show();


jQuery('.tabs li a').click(function(evt){ // Init Click funtion on Tabs

var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value

jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs
jQuery(this).addClass('selected');
jQuery(this).parent().parent().parent().children('.inside').children('*').hide();

/*
if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)
{
clicked_tab_ref_height = tag_cloud_height + 20;
}
else // Other height calculations
{
clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();
}
*/
//jQuery('.inside').stop().animate({
// height: clicked_tab_ref_height
// },400,"linear",function(){
//Callback after new tab content's height animation
jQuery('.inside ' + clicked_tab_ref).fadeIn(500);
// })

evt.preventDefault();

})

})

//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')
//** v1.1 (April 7th, 09'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera.


var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<div class="backtotop"></div>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#scrolltop', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}

scrolltotop.init()
//]]>
</script>

Note : JibanShrestha1 Change with your Twitter ID 
Save Now see preview 
Thank You  

Read more...

How to Add A Comment Count Bubble To Blogger Post Titles

 यस पोस्ट मा हेर्नु होस कसरी राख्ने कती कमेन्ट आको छ भनेर पोस्ट को हेड मा नै । सिक्नु होस र सिकाउनुहोस । 
यदी तपाइले  old Blogger interfaceचलाउनु भएको छ भने 

• Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

यदी तपाइले   new Blogger interfaceचलाउनु भएको छ भने

• Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. यो कोड भेट्टाउनु होस ]]></b:skin>   (CTRL + F)

]]></b:skin>

Step 3. तल को कोड यो कोड ]]></b:skin>   भन्दा माथी पेस्ट गर्नु होस  

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXP2DHr6FKbuWqoaKyzdOPYkm_gq44SgqegTOuPK_JeWT55rgORCW83xraIDnQSxZfyPM5oVO_GCa_VC2VlRVeVCDv0m0yBNt6jNxQNz1AFuJZTJYR0lF8m7pHKOouFY7VAsy0o5_4VEQf/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Step 4. अब यो कोड भेट्टाउनु होस 

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Note: यदी माथी को कोड भेटिएन भने यो कोड खोज्नु होस  

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>

Step 5. अब तल को कोड माथी को कोड भन्दा तल राख्नु होस 

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

Step 6. अब पृभिउ हेर्नु होस यदी ठीक छ भने Template लाई सेभ गर्नु होस 
निलो कलर को कोड लाई आफ्नो लिन्क ले चेन्ज गर्नु होस 

तल को इमेज मा right क्लिक गरेर कपि इमेज लोकेसन गर्नुहोस र त्यो लिन्क लाई माथी को निलो लिन्क सङ्ग परिवर्तन गर्नुहोस 

Read more...

How To Add Flash Animated Label Cloud Widget For Blogger

हरेक को हरेक सपना हुन्छ कसैको उडेको कसैको गुडेको त्यस्तै आज एउटा पोस्ट लिएको छु मात्र तपाइ हरुको लागी । यस पोस्ट मा मैले Label लाई छानेको छु यस बाट तपाइले Cloud स्टाईल ले एनिमेटेड हुनेछ अ र्थात आफै चली बस्ने छ हेर्नुहोस एक चोटी ट्राइ गरेर अवस्य मन पराउनु हुने छ यस्ले काम गर्ने छ ।
सबै भन्दा पहिले आफ्नो टेम्प्लेट लाई डाउनलोड गर्नुहोस  

1. Login to New Blogger Dashboard - Choose your Blog and Click the More Options Dropdown
2. Select the Template - Click on Edit HTML - Proceed
3. Check/Tick the Expand Template Widgets checkbox
4. Search for <b:section class='sidebar' id='sidebar' preferred='yes'> Tag

<b:section class='sidebar' id='sidebar' preferred='yes'>

माथी को कोड भेटी सके पछी तपाइले तल को कोड कपी गर्नुहोस र त्यो माथी को कोड भन्दा तल पेस्ट गरी दिनुहोस 

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;

</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Save Your Template
Thank You

Read more...

Recent Comment Widget for Blogger

आज को यस पोस्ट मा मैले गूगल मा खोजेर कोड ल्याएको छु जस्ले तपाइको भर्खरै गरेको कमेन्ट हरु देखिने छ । तसर्थ तपाइलाई यो उपायोगी हुन्छ हुन त यो सुबिधा गूगल ले पनि दिएको छ तर कुनै ठाउमा कोड नै आवस्यक हुन आउँदाछ त्यती बेला यो कोड उपायोगी हुन सक्दछ । हेर्नुहोस Code र प्रयोग गर्ने तरिका पनि । 

Step 1. सबै भन्दा पहिले लागिन गर्नुहोस र   Blogger Dashboard --- Design -- Page Elements --- Add a Gadget ---HTML/JavaScript सम्मा पुग्नुहोस /

For new Please go drop down menu and Layout -- Add Gadget --- Choose HTML / JavaScript

Step 2. तल को कोड कपी गर्नु होस र त्यस बक्स मा पेस्ट गर्नुहोस ।

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://samjhanakophool.blogspot.com/2012/09/recent-comment-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

Step 3.  Your-blog-name यस को सट्टा मा तपाइले आफ्नो लिन्क राख्नुहोस र शेभ गर्नुहोस ।

Read more...

Official Facebook Recommendations Bar Widget for Blogger

तपाइले कती को ब्लग मा देख्नु भएको नै होला तल छेउ तिर Facebook को Recomanded bar देखिएको । आज म तपाइ लाई यही पोस्ट मार्फत कसरी   राख्ने भन्ने कुरा सिकाउन जादै छु आशा छ तपाइ लाई मन पर्ने छ । यस लाई राख्नाले तपाइको ब्लग को भिजिटर लाई समेत धेरै बेर सम्मा राख्ने छ किनकी यस्मा Thumbnail सङ्ग देखाउछ पोस्ट हरु तसर्थ तपाइको ब्लग लाई बधवा दिन को लागी समेत यो राख्नु उपायोगी हुन्छ ।

This is Preview

1. Login to New Blogger Dashboard - Choose your Blog and Click the More Options Dropdown
2. Select the Template - Click on Edit HTML - Proceed
3. Check/Tick the Expand Template Widgets checkbox
4. Search for <head> (Ctrl+F)tag and place the Copied code Below <head> tag.

यो कोड भन्दा तल पेस्ट गर्नु होस  <head>

 यो कोड लाई कपी गर्नु होस र माथी को Tag भन्दा तल पेस्ट गर्नु होला

<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    </b:if>
<b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
</b:if>

<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- End Open Graph metadata -->

1. First go here for Get Code  
2.  Directly click the Get Code Button.

3. Click on Create a new app Link

 4.Enter the App Name with your Blog Title and App URL with your Blog URL, like as below and Click Continue button.

5. Enter Captcha Code Correctly and Click Submit button

6. Then Click the Get Code Button once again.

7. Copy the First JavaScript SDK code (First Box Code) and Encode the Code using This Tool

1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template -- Click on Edit HTML - Proceed
3. Check/Tick the Expand Template Widgets checkbox
4. Search for <body> tag and place the Copied code After <body> tag.
5. Facebook Recommendations Bar Customizations:
   You can customize the Facebook Recommendations Bar settingsLike ; Like and recomanded , left and right , Number of Recomednations and read time 
6. Search for <data:post.body/> tag and place the following code after the <data:post.body/> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-recommendations-bar" data-trigger="onvisible" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div></b:if>

    7. Save template.

 धेरै जना ईंग्लिश नै बुझ्ने हुँदा आफ्नो मौलिक ईंग्लिश राखेर पोस्ट गरेको छु यदी मन परेन भने म तपाइलाई नेपाली मा समेत पोस्ट गर्ने छु साथै अर्को पोस्ट नेपाली मा नै गर्ने छु ।
हेर्दै गर्नु होस यो ब्लग अझ नेपाली मा ब्लग को टिप्स जान्न को लागी 

Read more...

How to add Facebook Like box each post

आज को यस पोस्ट मा म तपाइलाई फेसबूक लाईक अप्सन कसरी राख्ने भन्ने कुरा सिकाउन जादै छु आशा छ तपाइ लाई यो पोस्ट मन पर्ने छ ।
सबै भन्दा पहिले आफ्नो Template को Backup लिनुहोस
अब सुरु गरौ Step by Step

1.  सधै झै आफ्नो Blogger अकाउन्ट मा लागिन गरेर तपाइ EDIT HTML सम्मा पुग्नु होस । यो भन्दा अगाडी सिकाइ सकेको छु कसरी EDIT HTML सम्म पुग्ने भनेर ।
2.  “Expand Widget Templates” यसमा ठिक चिन्न लगाउनुहोस क्लिक गरेर । 

  <div>
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like>
</div>
 

     3. <data:post.body/> यो कोड खोजेर (CTRL +F) यस्को तल, माथी कपी गरिएको कोड लाई पेस्ट गर्नु होस 

     4. फेसबूक लाईक अप्सन राख्न केहि परिवर्तन गर्नु पर्छ तसर्थ यो कोड  <html लाई खोज्नु होस तेस को पछाडी तल दिएको कोड राख्नुहोस यो सबै भन्दा महत्व पुर्ण च रन हो । 

  

<html

माथी को कोड को सट्टा मा तल को कोड राख्नुहोस 

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out.

5. अब एक चोटी Preview हेर्नुहोस सेभ गर्नु भन्दा अगाडी किनकी यदी तपाइले एडिट गर्दा मिस्टेक भाको छ भने ERROR आउछ । यदी ERROR आएन भने टेम्प्लेट लाई शेभ गरी दिनुहोस अब तपाइ को हरेक पोस्ट मा FACEBOOK LIKE अप्सन आउने छ । 

 

Read more...

How to Put Nepali Time in Your Blog

आज को यस पोस्ट मा म तपाइलाई नेपाली calendar तथा टाइम कसरी राख्ने भन्ने कुरा सिकाउन जादै छु । यस पोस्ट को लागी मैले नेपाली पात्रो र अशेष को वेबसाईट को मद्दत लिएको छु आशा छ तपाइ लाई मन पर्ने छ । 
सबै भन्दा पहिले

1.  Login गर्नुहोस तपाई को ब्लग मा 
2. अब तपाई पाहिले को जस्तै गारी Layout सम्म  होस र त्यहा Add Gadget देख्नु हुनेछ त्यहा क्लिक गर्नुहोस /
3. अब तपैले त्यहा देख्नु हुने लिस्ट मा HTML / JavaScript  लाइ छान्नुहोस र ताल को मध्य कुनै एक कोड छानेर राख्नुहोस /

नेपाली पात्रो तिथी सहित 
Copy this Code 

<script type="text/javascript">
client=100000505378411;addon="day";theme="default";
</script>
<script type="text/javascript" src="http://nepalipatro.com.np/addon/get"> </script>

Nepali Calendar for sidebar through Ashesh

Copy This Code 

<iframe src="http://www.ashesh.com.np/calendarlink/calendar.php?api=34061" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:220px; height:166px;" allowtransparency="true">
</iframe><br /><font size="1"><a title="Nepali Calendar" href="http://www.ashesh.com.np/nepali-calendar/" target="_new">Nepali calendar</a></font>  

नोट :Only Change Width and height only
Format 1 Time and date dynamic two line (without second)

<iframe scrolling="no" border="0" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" src="http://www.ashesh.com.np/linknepali-time.php?time_only=no&font_color=333333&aj_time=yes&font_size=12&line_brake=1&sec_time=no&nst=yes&api=71566" width="195" height="45"></iframe>

 Format 2 Time and date dynamic two line

<iframe scrolling="no" border="0" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" src="http://www.ashesh.com.np/linknepali-time.php?time_only=no&font_color=333333&aj_time=yes&font_size=12&line_brake=1&api=71977" width="195" height="45"></iframe>

Format 3 Time and date dynamic single line

<iframe scrolling="no" border="0" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" src="http://www.ashesh.com.np/linknepali-time.php?time_only=no&font_color=333333&aj_time=yes&font_size=12&line_brake=0&api=69611" width="324" height="22"></iframe>

Format 4 Time and date dynamic single line without B.S

<iframe scrolling="no" border="0" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" src="http://www.ashesh.com.np/linknepali-time.php?time_only=no&font_color=333333&aj_time=yes&font_size=12&line_brake=0&bikram_sambat=0&api=35249" width="300" height="22"></iframe>

 Format 5 Time only dynamic single line

<iframe scrolling="no" border="0" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" src="http://www.ashesh.com.np/linknepali-time.php?time_only=yes&font_color=333333&aj_time=yes&font_size=12&api=67466" width="165" height="22"></iframe>

 Format 6 Date only single line       

<iframe scrolling="no" border="0" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" src="http://www.ashesh.com.np/linknepali-time.php?dwn=only&font_color=333333&font_size=12&api=34192" width="165" height="22"></iframe>

Format 7 Date only single line without B.S

<iframe scrolling="no" border="0" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" src="http://www.ashesh.com.np/linknepali-time.php?dwn=only&font_color=333333&font_size=12&bikram_sambat=0&api=75450" width="165" height="22"></iframe>

हेर्नुहोस सबै कोड को स्टाइल फोटो मा देखाइएको छ 
त्यही अनुरुप को कोड छान्नुहोस यदी तपाइ लाई Format १ को मन पर्छ भने तपाइले Format 1 को कोड छान्नु होस  

 माथी को कोड मा साइज र उचाइ मात्र परिवर्तन गर्नुहोस 
Thank You For Viewing This Article ...

Read more...

How to add Search Box

नया तर  राम्रो सर्च बक्स  तपाई को ब्लगमा कसरी राख्ने भन्ने कुरा सिकाउन गई रहेको छू / मैले तपाई लाइ 6 ओटा स्टाइल दिएको छू बास्ताबमा मैले यो  PSD source designed by Design3edge. बाट लिएर परिवर्तन गरेको छू आसा छ तपाई लाइ मन पर्ने छ /










1 . Login गर्नु होस पाहिले ब्ल्गरमा  /
2 . Blogger Dashboard - Design tab - Page Elements . for New ( Layout)
3 . क्लिक गर्नुहोस Add Gadget र  लिस्ट बाट  HTML/JavaScript  छान्नुहोस /
4 . अब तलको मध्य कुनै एक कोड रोज्नुहोस र राखी दिनुहोस /
5 . अब कोड राखी सके पछि शेभ गरी दिनुहोस    /
तपाईको काम पूरा भयो हेर्नुहोस /

Style 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQGmRU7QliHl5DgwOqEyHFJajNLBNBAFrh_hs4ebMURHgt6mYL7Qt8FBCrxx8bi-uxXL9vzAJiykd_Fc6Ws1D4q3Dp3xAiZUiypqUoY5T0vv0I3PR8iC3tWsDMzrxp7C1PZzKINiajeI5/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwDNVHHsZp_IRhAEGvdnCo2TSLFexl8Y3QjfZidEHC74RoRX7T6pky0WeTNTVOaayb7tCUiB90j5QaWTW2r_IzbGCM_EUoa1jwCfvS0CDp_M9i0wBZy4BTkUUFhRdkqfYjYW3VgG8xm_Fv/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1AUtlj0OEs6YSnX3wYQ7a92AcBmnefZ1okbqmrhgSg7ETyMQOnwz4E0jn__sKHx5gjVZgAbcnKwO-1CaQ-0mR8ctV6CLL8zmX7F8B1Jski0zU-_fHs0h0kWN8IrR7twsIKb0aE3zEAtu/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTnC4rPBnVoKojWLUWRMLH-xyN4tZTlNKK7w0utvwa2lq3HZu9svnbaZaFApW4kIA4CHzNDuHdHV0mq2lIJq5wginRhdbaQhP2jLc-B7AhWHxkNIsTbKdioU9j0K-ErfWnfndtN-_xa6Y/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixq0QfaZtuUoSKK7e53wBEckFrB0RcbjeWgaliYmr5Ks0-D-fD1u1Qxc49RB5ija-6C04AbJLgkC3jXlfdqMwmIlLwaC4V1aohuDqmu2delmql8N1MBnzSY7BZW6RUgMv0xdm4jcHiyZ4m/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTbZ770NCCeA806nRjomNex6xUggh7MST0AZQpd8dW1R1kcWUb4N2hBLzmRB2qGyzktsKc2dzdT_dyX7N-UHuUvU2gRwEueO-we8j_ZOFXOFwIuqen1dowOS2znt_clG7-HwyajUcWpUU/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Read more...