Apk Post format for all blogger websites

Tâm

thg 12 15, 2023

Apk Post format for all blogger websites

This CSS code is not merely a set of styles; it's a symphony of design elements meticulously orchestrated to create a visually appealing and functional APK post format.

Demo

<!-- add this on post  -->
<div class="post-body">
 <div class="pc">

<img class="apmg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png" alt="apps"> 

<h2>Apk post format <span> in short code</span></h2>

<p class="inf">Size - 50MB , version - 2.5</p>
<br>

<a class="aplink" href="#">Download <svg xmlns="http://www.w3.org/2000/svg" height="16" fill="white"width="16" viewBox="0 0 512 512"><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg></a>
  </div>   
</div>




<!-- add this before close head tag -->
<style>
.pc{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content space-around; align-items: center; text-align: center; border: 1px solid #ccc; padding: 17px; margin: 5px; border-radius: 8px; } .post-body h2{ color: #ff00c7; word-wrap: break-word; } .post-body .inf{ color: #f2005a; margin: -7px 2px; font-weight: 700; } .apmg{ width: 20%; padding: 1px; border-radius: 50%; animation: disco 4s infinite; } .post-body h2 span{ color: green;} .aplink{ background: #dc0051; color: white; padding: 10px 15px; width: 80%; text-decoration: none; font-weight: bold; font-size: 18px; border-radius: 20px; filter: drop-shadow(0px 4px 9px #f3005aa5); } @keyframes disco { 0%, 100% { box-shadow: 10px 0px 15px #ff8b00, -10px 0px 15px #ff0000, 0px 10px 15px #00ff00, 0px -10px 15px #0000ff; } 25% { box-shadow: -10px 0px 15px #e8ff00, 10px 0px 15px #ff008b, 0px -10px 15px #00b9ff, 0px 10px 15px #00ffb9; } 50% { box-shadow: 10px 0px 15px #00b9ff, -10px 0px 15px #00ffb9, 0px 10px 15px #ff8b00, 0px -10px 15px #e8ff00; } 75% { box-shadow: -10px 0px 15px #00ff2e, 10px 0px 15px #5d00ff, 0px -10px 15px #002eff, 0px 10px 15px #5dff00; } } 



.pc::after {
  content: 'Pro';
  position: absolute;
  top: 10px; 
  
  right: 15px; 
  
  padding: 6px 10px; 
  
  background-image: linear-gradient(45deg, blue, cyan); 
 
  
  color: white;
  border-radius: 30px 10%;
  font-weight: bold;
}
 
</style>

The Visual Symphony: Elements in Harmony

Post Body Structure

The core structure of the APK post format is encapsulated within the post-body div, providing a canvas for content presentation. Within this, the pc class orchestrates a flexible, column-based layout that adapts seamlessly to various screen sizes. The border, padding, and margin attributes add a touch of elegance, framing the content with finesse.

Heading Elegance with h2

The heading, defined by the h2 tag, is a focal point of the design. The vibrant magenta color (#ff00c7) commands attention, while the word-wrap: break-word; property ensures readability even with lengthy titles. The addition of a green span within the heading adds a subtle yet impactful visual contrast, enhancing the overall aesthetic.

Informational Prowess with .inf

The information block, denoted by the inf class, stands out in a striking fuchsia (#f2005a), emphasizing crucial details. The negative margin ensures a snug fit, and the bold font-weight commands authority, making it impossible for users to overlook essential information such as size and version details.

Animated Allure of .apmg

The animated image (apmg) adds a dynamic flair to the post format. With a width of 20% and a circular border-radius, it not only maintains a sleek appearance but also engages users with a captivating disco animation. This attention to detail reflects a commitment to providing a visually pleasing user experience.

Call to Action - .aplink

The download link, styled with the aplink class, is a masterpiece in user interaction. The bold white text on a vibrant magenta background beckons users to take action. The use of an SVG icon within the link adds a touch of sophistication, while the drop shadow filter introduces a subtle layer of depth, making the call to action impossible to ignore.

Conclusion: Elevating User Experience

In conclusion, the APK post format presented here is not just a design; it's an experience. Every element, from the layout to the colors and animations, is meticulously crafted to create a harmonious and engaging user journey. Embrace this design, and elevate your content presentation to new height

Apk Post format for all blogger websites