With the revolution in smartphone market and 5G services, there are millions of people are viewing and sharing their knowledge and experience on blogging websites. These includes movie talks, adventure, travels, fitness and etc. Still there are many people wondering how to start blogging and share their experience with others? Also some wants to earn money while working on blogging, but don't know where to start? In this article, we will walk through step-by-step guide on how to start your personal blog. With the little help and creative idea, you can also start your own personal blog. So let's get started. Follow the bellow steps and you have your own blog. Step 1 - Find some creative topic of the blog! If you are thinking about creating your blog, then first of all you need to find your blog topics. You hdon't need to be unique but your blog should have to focus on specific topic. Your unique idea and interesting topic attracts more people that will create your sites more popular. For that choose topic that you are interested in or passioned. Also make sure you focused on specific topic whether it is travel, entertainment or fashion. Step 2 - Name your Blog This is most interesting and important for choosing your blog name. This becomes brand for you, how people will remember it. For that you have to choose right domain name for your blogging topics. It is your Blog name also. It should also reflects to your blogging niche. The domain name should be short and easy to remind. .com domain extension is most prefered and don't use dash(-) in domain name. Step 3 - Choose Website platform This is the topic where everyone confuse. Currently there are many CMS(Content management system) available. Wordpress is the most easy and user friendly CMS to run blogging website. If you choose wordpress as website platform, you don't need to purchase heavy or costly server.  Installing Wordpress is also so easy. You don't need any programming skill to install Wordpress. You can also choose from the hundreds of the theme in Wordpress. Even if you need to customize the website, there are many tutorials videos are available. There are many hosting provider helps in Wordpress websites if you need. Step 4 - Choose the Hosting Provider After you choose you blogging platform, you will need web hosting. Web hosting service allows your blog to access on the internet. There are plenty of web hosting companies are available. If you are thinking to start new blog, then GoDaddy and Bluehost are the well for CMS and shared hosting. They provides cheap hosting for Wordpress and other CMS also. Step 5 - Install Wordpress or CMS Once you have purchased hosting, now it's time to login to your account and install your blogging platform. Mostly companies provides click and installation for most CMS. Wordpress is the easiest from all of them. If you have little knowledge about programming skills, I will recommend to choose Wordpress. Step 6 - Choose theme After you have installed the Wordpress software, now it's time to choose attractive theme. Wordpress comes bellow themes out of the box. You can install new theme from the Wordpress settings. In the Appearance section click on Themes option and you can apply new theme as you want. Make sure to choose attractive and user friendly theme. Themes color combination should also match to your blog topics. Like travel and fashion blog should have light colored theme while Glamour, Entertainment blogs should looks dark theme. Step 7 - Change Logo and content of the website When you are ready with new theme, now it's time to change Logo and content of the blog. In the blog, you need to create some bellow pages. To change the content and logos of the website, go through all options on the appearance section. About you page will tell visitors about the blog and you. Contact page will conect visitors directly contact you through form. Portfolio page will display about your work done. Terms & Condition and Privacy policy page is also required in the all websites. These pages will include about terms to use your blog and privacy of the visitors. Step 8 - Start publishing After all the above done, Now you are ready to publish the articles. Take a paper and pen and put your ideas on the paper. Don't be afraid to put your expierince on the blog.  Don't hurry in making more and more articles. You need to provide quality content.  Think about your creativity and what visitors are required. Learn from your family and friends. Read more from social network what people are interested in. Check in the comment section what visitors wants. Step - 9 Promote and Advertise your blog When you have start publishing the articles, users also need to know about your blog. Create a social account in Facebook, instagram, Twitter etc. for your blog and update it. Submit your blog urls to search engines like Google Web master, Bing. It will help to make your website indexed and blog popular. Add SEO plugin better search results of your blog. Also post your blog posts in other social sites, like Reddit, Forums. Create a mailing list and send new update about your blog. There are also many ways you can promote your blog. Keep in mind there are always ways you can make your blog. Step 10 - Make money from advertisements If your blog have enough visitors and you want to earn some money while blogging, then you can also make your blog monetize. There are many advertisement services are providing to monetize. Google Adsense is the best and reliable advertisement source to earn. For that you need to create Your Google Adsense account and need to approve also. You can also choose other advertisement websites that also provides high rate. If oyur blog is more popular, then you can also get dedicate advertisement partner that will provide you all your requirement. Conclusion This way you can start your own blog. It is easy and make you interesting. I hope this guide will help you to your setup your own blog. Good Luck!

Sitemap is a blueprint of your website that help search engines to find, index all of your website's webpage. A sitemap contains XML file that lists your websites URLs. The sitemap should be standard format. The file itself must be UTF-8 encoded. The sitemap should content below xml tags. 1. Sitemap should begin with an opening <urlset> tag and end with a closing </urlset> tag. 2. Specify the namespace within the <urlset> tag. 3. Include a <url> entry for each URL, as a parent XML tag. 4. Include a <loc> child entry for each <url> parent tag. In addition to above tags, you can also add other tags in each <url> parent tag. 1. The <lastmod> tag which shows date of last modification of the file. This date should be in W3C Datetime format. However you can use YYYY-MM-DD format. 2. <changefreq> tag tells search engines how frequently the page is likely to change. This value provides general information to search engines and may not correlate exactly to how often they crawl the page. The valid values include: always hourly daily weekly monthly yearly never 3. The <priority> tag describes priority of this URL relative to other URLs on your site. Valid values range from 0.0 to 1.0. The default priority of a page is 0.5. Your Sitemap file must be UTF-8 encoded. As with all XML files, any data values like URLs must use entity escape codes for the characters listed in the table below. Sample XML Sitemap The below example shows a Sitemap in XML format. <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">     <url>         <loc>https://laravelcode.com/article/how-to-completely-remove-package-from-ubuntu</loc>         <lastmod>2021-03-26T13:37:02+00:00</lastmod>         <changefreq>daily</changefreq>         <priority>1.0</priority>     </url>     <url>         <loc>https://laravelcode.com/article/how-to-create-get-and-post-request-using-python-requests-module</loc>         <lastmod>2021-03-22T13:19:48+00:00</lastmod>         <changefreq>daily</changefreq>         <priority>1.0</priority>     </url>     <url>         <loc>https://laravelcode.com/article/how-to-store-multiple-checkbox-value-in-database-in-laravel8</loc>         <lastmod>2021-03-22T06:31:19+00:00</lastmod>         <changefreq>daily</changefreq>         <priority>1.0</priority>     </url>     <url>         <loc>https://laravelcode.com/article/reactjs-file-uploading-example-with-axio</loc>         <lastmod>2021-03-22T06:14:38+00:00</lastmod>         <changefreq>daily</changefreq>         <priority>1.0</priority>     </url> </urlset> Once you have created the Sitemap file and placed it on your webserver, you need to inform the search engines that support this protocol of its location. You can do this by: 1. You can submit the sitemap to search engine Google Search Central, Bing Webmaster etc. 2. You can specify more than one Sitemap file per robots.txt file. Sitemap: https://www.website.com/sitemap-file1.xml Sitemap: https://www.website.com/sitemap-file2.xml 3. Ping search engine to your Sitemap url. Example for google: http://www.google.com/ping?sitemap=https://example.com/sitemap.xml

The manifest.json is a simple JSON file in your website that tells the browser about your website on user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt. When user installs or bookmark your web application to the homescreen or adds it to an application launcher, manifest.json provides to the browser so that it can treat your website the name, icons, etc. There are then more advanced features that you would need, like being able to indicate the preferred orientation and if you want your app to be fullscreen. The manifest.json file contains details of your website app name, icons it should use, the start_url it should start at when launched, and many other details. Note: W3C mentions manifest.webmanifest file instead of manifest.json but that the actual name are totally irrelevant, as long as you serve it with application/json. However, manifest.json is far more likely to be served with a correct MIME type. To add manifest.json file in your website, first tell the browser about path of the manifest.json file. For that add <link> tag in the <head> tag. href is the location of the manifest.json. <link rel="manifest" href="/manifest.json"> You can add bellow code if your Manifest file is manifest.webmanifest. <link rel="manifest" href="manifest.webmanifest"> Then create manifest.json in the location of the href of the <link> tag. Bellow is the simple example of the manifest.json. {     "short_name": "Laravelcode",     "name": "Laravelcode blogging platform",     "icons": [         {             "src": "/images/icons-128.png",             "type": "image/png",             "sizes": "128x128"         },         {             "src": "/images/icons-192.png",             "type": "image/png",             "sizes": "192x192"         },         {             "src": "/images/icons-512.png",             "type": "image/png",             "sizes": "512x512"         }     ],     "start_url": "/index.html",     "background_color": "#3367D6",     "display": "standalone",     "scope": "/app/",     "theme_color": "#3367D6" } First check if manifest.json is applied in the browser. For that open developer window by pressing shortcut F12. In Application tab, click Manifest option and see if it displays information that you have set. Explanation Let's discuss some of most used options in the manifest.json file. "short_name": "Laravelcode", "name": "Laravelcode blogging platform", "short_name" is the very short name of your web application that is displayed in homescreen or in the menu. "name" is bigger name and alias of your web application that is useful when user search in phone or desktop searchbar. "icons": [     {         "src": "/images/icons-128.png",         "type": "image/png",         "sizes": "128x128"     } ], "icons" option is the logo of your application that will display in the homescreen or the menu. It is a json array of icons object. Every object contains src, sizes and type property You can add different size of your logo and add them in manifest.json file in nested object. It will automatically adds responsive size of icon in different size of the displays. "start_url": "/index.html", "start_url" is the root URL of your web application that will always open first. "display": "standalone", "display" will tell how to display website in the browser. Options are fullscreen, minimul-ui, standalone, or browser. "standalone" will display as normal with statusbar and "fullscreen" will display in fullscreen. "orientation": "landscape" "orientation" will set your application default orientation, when open. "background_color": "#3367D6", "theme_color": "#3367D6" In Android system, Google Chrome and other browsers, "background_color" and "theme_color" will set on splash screen that show while your site is loading. "scope": "/app/", "scope" controls the URLs that navigates all the entry and exit points in your web application. If the user opens that is outside the scope, then it opens in  normal web page inside a browser tab/window. Conclusion The manifest.json file has overcome to add different meta tag for different browsers and helps to sets unique to display in different browsers. There are many other options that you can add in the manifest.json. For full reference, see documents at Google or MDN web docs.

Extensions in Google chrome and Add-ons in Firefox allows us to customize user experience for the all websites in Browser. Suppose you install Image Downloader extension in the browser, then you can download images from all the websites. There are hundreds of extensions available in the Store. Most interesting thing is if you have front end programming skills, e.g., HTML, CSS, Javscript then you can also create simple extension. You don't need special skills to develop basic extension. In this article, I will show you how you can create basic extension for Chrome browser and test it on your Chrome. Extension is simple web page with HTML, CSS and Javascript with Chrome APIs as they provide. You can choose what type of extension you want to create. I here create simple box with HTML view. It is good idea first to start with basic details. manifest.json In the first step we will create one project folder with all required files. In the folder create manifest.json file. This is the json file with details of your extension. This file also includes which permission required to work. Below is the manifest.json file I have created for the test. {     "manifest_version": 3,     "name": "Image Plugin",     "version": "1.3.11",     "description": "Testing Plugin" } Now from the browser go to chrome://extensions or from the Menu More Tools > Extensions. Enable Developer mode on the right side switch. Click the Load UnPacked and select the extension folder. The extension is installed in your Chrome browser. The current installed extension does nothing as there are no any details what to do. So let's deep into and add some functionality. background script. Now we will add some background script and add it in manifest.json file. Create background.js file in the extension folder and update manifest.json. {     "manifest_version": 3,     "name": "Image Plugin",     "version": "1.3.11",     "description": "Testing Plugin",     "background": {         "service_worker": "background.js"     } } In the background.js file add some Javascript code. Extensions monitor events using scripts in their background service worker, which runs with specific coded instructions. A service worker is loaded when it is needed, and unloaded when it goes idle. In the background.js file add the code. let color = '#3aa757'; chrome.runtime.onInstalled.addListener(() => {     chrome.storage.sync.set({ color });     console.log('Default background color set to %cgreen', `color: ${color}`); }); Permissions Obviously the extension needs permission to run or make changes. So we define which permissions our extension required. {     "manifest_version": 3,     "name": "Image Plugin",     "version": "1.3.11",     "description": "Testing Plugin",     "background": {         "service_worker": "background.js"     },     "permissions": [         "storage",         "activeTab"     ] } Storage is permission to change in the files or folders. activeTab permission is to access the active tabs. User interface. Extensions required views to make setting changes or action in the page. The default action is default_popup which will popup. You also need to add them to manifest.json file. {     "manifest_version": 3,     "name": "Image Plugin",     "version": "1.3.11",     "description": "Testing Plugin",     "background": {         "service_worker": "background.js"     },     "permissions": [         "storage",         "activeTab"     ],     "action": {         "default_popup": "popup.html"     } } Add popup.html with below HTML code. <!DOCTYPE html> <html>     <head>         <link rel="stylesheet" href="button.css">     </head>     <body>         <button id="changeColor"></button>     </body> </html> HTML code loads CSS file which we need to create. Create button.css file in the project folder and add the codes. button {     height: 30px;     width: 30px;     outline: none;     margin: 10px;     border: none;     border-radius: 2px; } button.current {     box-shadow: 0 0 0 2px white,               0 0 0 4px black; } Now you may want to add the extension icon. Under the "action" option add "default_icon" with the list of res of icons. "action": {     "default_popup": "popup.html",     "default_icon": {         "16": "/images/logo-image-16.png",         "32": "/images/logo-image-32.png",         "48": "/images/logo-image-48.png",         "128": "/images/logo-image-128.png"     } }, "icons": {     "16": "/images/logo-image-16.png",     "32": "/images/logo-image-32.png",     "48": "/images/logo-image-48.png",     "128": "/images/logo-image-128.png" } Put the icon in the /images/folder. For the Extension management page, you can add images in "icons" option. Here is complete manifest.json file. {     "manifest_version": 3,     "name": "Image Plugin",     "version": "1.3.11",     "description": "Testing Plugin",     "background": {         "service_worker": "background.js"     },     "permissions": [         "storage",         "activeTab"     ],     "action": {         "default_popup": "popup.html",         "default_icon": {             "16": "/images/logo-image-16.png",             "32": "/images/logo-image-32.png",             "48": "/images/logo-image-48.png",             "128": "/images/logo-image-128.png"         }     },     "icons": {         "16": "/images/logo-image-16.png",         "32": "/images/logo-image-32.png",         "48": "/images/logo-image-48.png",         "128": "/images/logo-image-128.png"     } } Now reupload the plugin and see the button on Menu bar, It should be changed with the current you have added. You will also see icon in extensions page. Here is the list of API Reference to interect with Chrome browser that you can use in the extension. If your Extension is enough good to publish on Chrome Store, you can also go for it.