Saturday, August 10, 2013

C# WPF Tutorial 17- Show database values in Table or DataGrid

















---------------------------------------------------------------------------------
C# - How to get user entered data from datagridview to windows
Insert, Update and Delete from DataGridView to sqlite WPF   ,MySql Sql database WPF WPF
Microsoft Visual C#/CLI  Windows Controls The Data Grid View
C# Tutorial - Binding a DataGridView to a Database
c# - How to save datagridview records on database table
how can i use data grid view to update data in database using C# WPF
Delete in Datagridview and SQL database‎ WPF
Save From datagridview to access database‎  WPF
Update database from DataGridView‎
transferring multiple row data from listview to datagridview c sharp‎
retrieving seleted value from combobox in datagridview‎  WPF
Updating database table from DataGridView‎  WPF
update DataSet from DataGridView, and update database from
How to Create a Simple Windows Forms C# Database Application
Searches related to c# datagridview database
c# datagridview without database WPF
c# datagrid view WPF
How to insert data from DatagridView to MS Access Database WPF







Friday, August 9, 2013

Add A Good Looking Search Box To Blogger!

I have already written a post on how to add a google custom search on blogger.But many people doesn't like google custom search due to its appearance and slow indexing.In this post I will teach you how to add a search box to blogger.
Check out our site for the search box demo.

Steps To Add The Search Box

  1. Go to your Blogger Dashboard.
  2. Navigate to Layout and add a HTML/Javascript widget.
  3. Copy and paste the below code.                                                                                                                             
<div class='widget-contentss'>
<form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<div id='search'>
<div class='search-input form-search'>
<input id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Search This Site&apos;;}' onfocus='if (this.value == &apos;Search This Site&apos;) {this.value = &apos;&apos;;}' type='text' value='Search This Site'/>
<input id='buttonsinput' style='vertical-align: top;' type='submit' value='Search!'/>
</div></div>
</form>
</div>



   4. Save it.

Customization
 Change the default text in the search box by replacing Search This Site  with your own text.Replace the same text as many times it is displayed on the above code. 

Adding Style

  1. Go to  Blogger Dashboard > Template > Customise > Advanced > Add CSS.
  2. Copy and paste the below code in the CSS box.  
/* Search Box--Start------------------------- */
#buttonsinput { background-color: #EA141F; border: 3px solid #005c91; cursor: pointer; color: white; width: 48px; height: 38px; margin: 0px; font-size: 14px; font-family: 'Monda', sans-serif; 700; margin: 0px; float: right; transition: all 0.3s ease-out; } #search input { border: 1px solid #d2d2d2; padding: 5px 30px 5px 10px; width: 400px; color: #838383;  height: 28px; font-family: 'Monda', sans-serif;outline: none; width: 170px; margin: 0 5px 0 0; float: left; } #buttonsinput { width: 70px!important; height: 40px!important; float: right; padding: 0px!important; margin: 0px!important; } element.style { vertical-align: top; } #search input { border: 1px solid #d2d2d2; padding: 5px 30px 5px 10px; width: 400px; color: #838383;  height: 28px; font-family: 'Monda', sans-serif; outline: none; width: 170px; margin: 0 5px 0 0; float: left; } #buttonsinput { text-transform:capatalize; color: #fff!important; font-family: 'Monda', sans-serif!important; font-style: normal!important; } #buttonsinput:hover { background-color: #364956!important; } .search-input.form-search { float: left; padding-bottom: 20px; border-bottom: 0px!important; } .comment-form a:hover { color: #2f6986; text-decoration: underline; } .comment-form a { color: #2f6986; text-decoration: none; } .comment_body img { max-width: 540px; }
/* Search Box--End ---------------------------- */       

  
  3. Save and enjoy!!    
                                                                                      
Customization
  • To change the button color replace #EA141F with your HTML color code.{Find color codes here.}
  • To change the width of the search input text box replace 170px with your desired size in px.


Wednesday, August 7, 2013

How To Add Background Images And Border To Blogger Comments?

Comments usually help users to identify post quality.Comments also plays a good role in site bounce rate.Many people does not comment even on quality posts.A good looking comment section attracts a user to comment and thereby increases post popularity.Many people switch to 3rd party comment systems for good looking comment sections.This post will help you add a background image to your blogger comment section.

Image background in Blogger comment
Image background in Blogger comment

Steps To Add Background Image And A Border To Blogger Comment Section

  • Go to your Blogger Dashboard.
  • Navigate to Template > Customise > Advanced > Add CSS
  • Copy and paste the following code in the box.                                                                                                 
#comments{border: 1px solid #cdcdcd;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwY_wgD9D65paA0WBAcD53NOSF94xIS6DNWV5d1fN2SW0U3ElPOBSRnS7oMzLvmBcefqpSkalPXgz0K6FQupEqzl_dwfNYBJZn6I6siI7LFlKewEnemJnD1AJQmB54cNHc2Q9hlsIwKBPb/s150/background.png');
}



Only Border


  
  #comments{border: 1px solid #cdcdcd;
}



  • To change the border line size replace 1px to desired value.
  • To change border color replace #cdcdcd with the HTML color code.(To find HTML color codes visit here OR here.)

Only Background Image


    #comments{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwY_wgD9D65paA0WBAcD53NOSF94xIS6DNWV5d1fN2SW0U3ElPOBSRnS7oMzLvmBcefqpSkalPXgz0K6FQupEqzl_dwfNYBJZn6I6siI7LFlKewEnemJnD1AJQmB54cNHc2Q9hlsIwKBPb/s150/background.png');
    }



    • To change the the background image replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwY_wgD9D65paA0WBAcD53NOSF94xIS6DNWV5d1fN2SW0U3ElPOBSRnS7oMzLvmBcefqpSkalPXgz0K6FQupEqzl_dwfNYBJZn6I6siI7LFlKewEnemJnD1AJQmB54cNHc2Q9hlsIwKBPb/s150/background.png with your image URL.(Make sure the image size is less)

    Bckground Color Only


    #comments{
    background-color:#FAEFEF;
    }

      To get color codes visit here.
      Check your site performance!

           

          © 2013 Klick Dev. All rights resevered.

          Back To Top