Creating Custom Master Page in SharePoint 2013

In SharePoint 2013 we can create our own Html Master Page and convert it to SharePoint master page. In this Document I try explain it briefly.

•  Open any editor for html example Notepad and write the Following sample code • If you want you can also create Css file for this master page.
•  Now navigate to the Top Level site in your SharePoint site collection and click settings icon and select Site Settings option. 
• Open the Master Pages and Page Layouts under web designer galleries category. 
• Click Upload Document in the Ribbon and browse for your Html file and click upload. Select html Master page as content type of the File.
• You can add your css style sheet reference in the information form.

• Upload you style sheet and graphics as design files. You can create a separate for them too.

• Navigate to the Design Manager in site settings under Look and feel and select Edit Master Pages. Note Your Html Master Page in the list.

• Click on Convert to Html file to a SharePoint master page and select your master page from the gallery.

• Click on insert and SharePoint will convert your Html Page into a Master Page, Showing the master page status as conversion successful.
• You can either download a copy of the converted .html file from the master pages gallery or open the top level site for editing in SharePoint designer 2013 where you can edit the file on the fly and see the changes in the preview right away.

• In SharePoint Designer Click to open the file, then click the Edit file link. You can see that the conversion, SharePoint added a whole lot of code in the Html version of the file in addition to creation of .master page file .Do not delete the code added by SharePoint!

Add Snippets to your .html Master Page

• Go to the Design manager which is located under Site settings. Select Edit Master Page .
• Select your html Master Page and click on it. The preview will be shown as below.

• Click on snippets in the upper right hand corner of the preview page. This opens a new browser for     selecting and customizing the snippets, i.e. the SharePoint controls.

• Pick the snippet on the ribbon, customize it as needed, then click on Copy to Clipboard and place the code in the appropriate place in the HTML file.

• If you are working in SharePoint Designer, save changes and refresh preview to view the changes made by inserting the snippets