List of beautiful buttons with CSS, HTML for Blogspot - Part 1

You can add a button to your Blogger post or page using HTML and CSS code.

Style 1:

Hover me

    
	
        <div class="style1"> 
            <a href="#" class="button">Hover me</a> 
        </div>
    

    
	
.style1 .button {
	 display: inline-block;
	 padding: 0.75rem 1.25rem;
	 border-radius: 10rem;
	 color: #fff;
	 text-transform: uppercase;
	 font-size: 1rem;
	 letter-spacing: 0.15rem;
	 transition: all 0.3s;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;
     text-decoration: none;
}
.style1 .button:after {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: #0cf;
	 border-radius: 10rem;
	 z-index: -2;
}
.style1 .button:before {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 0%;
	 height: 100%;
	 background-color: #008fb3;
	 transition: all 0.3s;
	 border-radius: 10rem;
	 z-index: -1;
}
.style1 .button:hover {
	 color: #fff;
}
.style1 .button:hover:before {
	 width: 100%;
}
    

Read More

How to disable Copy, Right Click, View Source Code, Select Text Blogger/Blogspot

You can add an anti-right-click code to your blog in order to disable the right-click functionality of your mouse. This code can be added to the head section of your blog's HTML code. Here are the steps to add the anti-right-click code to your blog:

1. Go to the "Theme" section of your Blogger dashboard.
2. Click on the "Edit HTML" button.
3. Search for the </head> tag in the HTML code.
4. Add the following code just before the </head> tag:

               
               
               <script> 
                   document.addEventListener('contextmenu', event => event.preventDefault()); 
               </script>
               
           

5. Save your changes.

Blogger Shortcuts:

Blogger has several keyboard shortcuts that you can use to quickly navigate and edit your blog. Here are some of the most useful shortcuts:

• CTRL + S: Save changes to a post or page. 
• CTRL + B: Bold text. 
• CTRL + I: Italicize text. 
• CTRL + U: Underline text. 
• CTRL + L: Create a link. 
• CTRL + K: Insert a jump break. 
• CTRL + M: Insert an image. 
• CTRL + SHIFT + 7: Create a numbered list. 
• CTRL + SHIFT + 8: Create a bullet list. 
• CTRL + SHIFT + E: Align text to the center. 
• CTRL + SHIFT + L: Align text to the left. 
• CTRL + SHIFT + R: Align text to the right. 
• CTRL + Z: Undo. 
• CTRL + Y: Redo.

You can view the full list of Blogger keyboard shortcuts by pressing the "?" key while in the Blogger dashboard.

Read More

Difference between model, resource model, collection and repository in Magento 2

In Magento 2, there are several components that are used to work with data in the system, including models, resource models, collections, and repositories. Here is a brief summary of the differences between these components:

1. Model: A model is a PHP class that represents a single entity in the system. Models contain business logic and validation rules, and are responsible for performing CRUD (Create, Read, Update, Delete) operations on the entity. Models are typically used to represent data objects that are specific to the domain of the application.
2. Resource Model: A resource model is a PHP class that provides a standardized way to interact with the database for a specific entity. Resource models contain methods for reading and writing data to the database, and are responsible for enforcing data integrity rules, such as validating data before it is saved. Resource models are typically used to abstract away the details of how data is stored and retrieved from the database.
3. Collection: A collection is a PHP class that represents a set of entities of the same type. Collections are used to query and manipulate multiple entities at once, and contain methods for filtering, sorting, and paginating the data. Collections are typically used to represent data sets that need to be displayed or processed together, such as a list of products.
4. Repository: A repository is a PHP class that provides a standardized way to interact with a specific entity or resource in the system. Repositories contain methods for performing basic CRUD operations on the entity, as well as additional business logic and validation rules. Repositories are typically used to abstract away the details of how data is stored and retrieved, and to provide a consistent interface for working with data across the application.

In summary, models, resource models, collections, and repositories are all components used in Magento 2 to work with data in the system, but they have different responsibilities and are used in different contexts. Models represent individual entities in the system, resource models provide a standardized way to interact with the database, collections represent sets of entities, and repositories provide a consistent interface for working with entities or resources.

Read More

What is repository in Magento 2?

Repository in Magento 2

In Magento 2, a repository is a class that provides a way to interact with a specific entity or resource in the system. Repositories are part of the Magento 2 service layer, which abstracts the data access layer and provides a consistent interface for accessing and manipulating data. 

A repository in Magento 2 is responsible for providing a set of methods that allow you to perform basic CRUD (Create, Read, Update, Delete) operations on a specific entity or resource. For example, the Magento\Catalog\Api\ProductRepositoryInterface is responsible for managing product entities in the system. 

By using repositories, developers can create more modular and testable code, as well as ensure that business logic and validation rules are applied consistently across the system. 

It's important to note that repositories in Magento 2 are not the same as repositories in version control systems like Git. Instead, they are a specific design pattern used within the Magento 2 architecture.

Why use a repository?

There are several reasons why repositories are used in software development, including:

1. Abstraction: Repositories provide an abstraction layer between the application and the underlying data storage mechanism. This allows developers to work with data without having to know the details of how the data is stored or retrieved.
2. Modularity: Repositories make it easier to create modular, reusable code. By separating the data access logic from the rest of the application code, developers can create more self-contained and testable components.
3. Separation of concerns: Repositories help to separate the concerns of data access and business logic. This can make the code easier to read, understand, and maintain.
4. Standardization: Repositories provide a consistent interface for working with data across the application. This makes it easier to enforce business rules and validation logic and can help to reduce errors and inconsistencies.
5. Scalability: By using repositories, developers can optimize data access for performance and scalability. This can be particularly important in applications with large volumes of data or high levels of concurrency.

In the case of Magento 2, repositories provide a standardized way to interact with the various entities and resources in the system and help to ensure that business logic and validation rules are applied consistently across the application. This can help to create more modular, testable, and scalable code.

Read More

How to add highlighter Code in Blogspot ?

To add highlighted code in a blog post, you can use syntax highlighting tools such as Prism.js or highlight.js. Here are the steps to do so using Prism.js:

1. First, you need to include the Prism.js library in your HTML code. You can either download the library and host it on your server or include it using a Content Delivery Network (CDN). Here's an example of how to include Prism.js using a CDN:

               
   <head>
   <script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js'/>
   <link href='https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-a11y-dark.min.css' rel='stylesheet'/>
   </head>
               
           

   In this example, we are using the Prism.js library to highlight CSS code.
2. Next, you need to enclose your code block in a <pre> tag and add a <code>  tag inside it. You should also add a class attribute to the <code>  tag to specify the language you want to highlight. For example:

    
           	
   <pre>
   <code class="language-css">
   // Your CSS code here
   </code>
   </pre>
   			
           

Read More