I am using rich text editor ckeditor in my website which works fine but i want this to look something like a text editor used by blogger like shown in the image below. how is it possible?
CKEditor 4.x you have the sharedspace plugin which allows you anchoring editor toolbar in specified element and use it for all editors you have on your web page.
You can find a demo of sharedspace plugin with source code here: https://sdk.ckeditor.com/samples/sharedspace.html
About moving all toolbar items into a single line. Please open standard or full sample and play around with the Toolbar Configurator. If you remove row separators, you will get single line toolbar. Next you just need to copy the toolbar configuration and paste it into config.js (if you want to use it for all editors) or into editor instance configuration (if you want to use it for a single editor).
NOTE: The available space in that sample is too small to fit all the buttons in a single line but of course on your web page the available space may be wider.
