Telegram
Viber
WhatsApp
info@buyreadysite.com
[custom_toc]
11 Unusual Ways to Use Codes in Articles: A Fun Roundup for Your Store-Type Website
If you run a store-type site, you probably know that quality articles are key to driving traffic and retaining visitors. But how familiar are you with using codes in articles? In this article, we'll look at 11 unusual ways to use codes to help you create engaging and interactive articles.
Article codes are blocks of programming code that can be inserted directly into the text of an article. They allow you to add various features and elements to the article, making it more interesting and engaging for readers.
1. Embedding video
One of the most popular ways to use codes in articles is to embed videos. You can use code to insert a video from YouTube or another popular video platform directly into the text of an article. This makes the article more interactive and allows readers to watch the video without leaving your site.
For example, you can use the following code to embed a video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ваш_идентификатор_видео" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
To embed a YouTube video, you will need to replace “your_video_id” with the actual video ID.
Note: Make sure you have permission to use videos from platforms like YouTube and follow their rules.
2. Creating interactive elements
Using codes, you can create interactive elements directly within an article. For example, you can add survey or quiz elements that readers can fill out to test their knowledge or participate in a discussion.
To create a survey you can use the following code:
<form>
<p>Question 1: What is your favorite color?</p>
<input type="radio" name="q1" value="Красный" checked> Red<br>
<input type="radio" name="q1" value="Синий"> Blue<br>
<input type="radio" name="q1" value="Зеленый"> Green<br>
</form>
This is just one example of creating interactive elements using code. The possibilities are limited only by your imagination and your programming skills.
3. Adding animation
Inserting code into an article also allows you to add animation to create effects or visual appeal. For example, you can use code to create a parallax effect when scrolling through a page or add animated elements that grab the reader's attention.
Below is a sample code to create a simple animation:
<div class="animation">Animated element</div>
Remember that the use of animation should be careful not to draw too much attention and distract readers from the main content.
4. Insert slideshow
The codes also allow you to insert slideshows with images or photos into an article. You can create presentations with photos or images, show a sequence of images in an article, or create sliders to showcase products or services.
Below is a sample code for creating a slideshow using the jQuery library:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-/Wiki2UiyF7z3vkg15AXId+jzz3yXwzWAs5apCEOOPCti7LHwGIEY+nTDAPejlgD" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('.slideshow').slick({
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
dots: true
});
});
</script>
<div class="slideshow">
<div><img src="slide1.jpg" alt="Slide 1"></div>
<div><img src="slide2.jpg" alt="Slide 2"></div>
<div><img src="slide3.jpg" alt="Slide 3"></div>
</div>
Don't forget to include the jQuery library before using this code.
5. Create interactive charts and graphs
Codes also allow you to create interactive charts and graphs that will help visualize the data in the article. You can use libraries like Chart.js or Google Charts to create different types of charts, such as pie or bar charts, and insert them into the article.
Below is a sample code for creating a bar chart using the Chart.js library:
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
The above code creates a bar chart with months on the X-axis and sales values on the Y-axis.
6. Insert Google Maps
If you want to show the geographic location of your store or office on your website, you can use the Google Maps embed code. This will allow readers to easily find your location and get directions.
Google provides a special service for generating a code for embedding a map. You can visit Official Google Maps website and create your own embed code. Then paste this code into the text of the article.
For example:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3017.9759269787105!2d-81.11560158440583!3d33.77325705760574!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f8b9634e1e01d9%3A0xe580d3ed1e695cd4!2sGoogle%20Office!5e0!3m2!1sen!2sus!4v1635296930675!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
The above code inserts a Google Maps map with the Google Office location.
7. Integration of social buttons
You can use codes to add social media buttons like Facebook, Twitter, Instagram, LinkedIn and more to your article. This will make it easy for your readers to share your article or product on social media.
Each social network provides its own code for inserting buttons. You can visit the corresponding social network site and find the code for inserting the button. Then paste this code into the text of the article.
For example, the code to add a Facebook button might look like this:
<div class="fb-share-button" data-href="https://example.com" data-layout="button" data-size="large"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0" nonce="nonce"></script>
The above code inserts a Facebook share button with the specified URL.
8. Adding pop-up windows
Embedded codes also allow you to add pop-up windows that appear when you click on a link or button. You can use pop-up windows to display additional information, offers, or contact forms.
Below is an example code to create a popup window:
<script>
function openPopup() {
window.open("popup.html", "My popup window", "width=400,height=300");
}
</script>
The above code opens a new window with the content from the “popup.html” file when the button is clicked.
9. Accordion and tabs
Using codes, you can create accordions and tabs to organize the content in an article. This allows readers to easily navigate through long articles and hide or reveal certain sections as they see fit.
One example of code for creating an accordion:
<div class="panel">
<p>Contents of Section 1</p>
</div>
<div class="panel">
<p>Contents of Section 2</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
The above code creates an accordion with two sections. Clicking on a section button will open or close the section content.
10. Adding comments
With the help of codes, you can add a comment function to the article so that readers can leave their feedback and comments. Comments can enrich your content and promote reader engagement.
One of the popular comment services is Disqus. You can create an account on the site disqus.com and get the code to embed comments on your site. Then paste this code into your article to add the comment feature.
11. Embedding a product catalog
If you want to sell products on your store type site, you can use the product catalog embed code. The code will allow you to display products, their descriptions, prices and other information so that readers can easily select and purchase products.
BuyReadySite has various ready-made sites that can help you create a store with an integrated product catalog. For example, the ready-made site “Multilingual Mega-Market” (https://buyreadysite.com/ready-websites/mnogoyazychnyj-mega-market/) offers a functional product catalog.
You can use the following code to embed a product catalog:
<iframe src="https://buyreadysite.com/ready-websites/mnogoyazychnyj-mega-market/" width="100%" height="600" style="border:none;"></iframe>
The code above inserts a product catalog from the ready-made site “Multilingual Mega-Market”.
Conclusion
Using codes in articles can greatly improve the visual and functional aspect of your store type website. They allow you to create interactive and engaging articles that will attract your readers and help keep them on your site.
With the code you can embed videos, create interactive elements, add animations, insert slideshows, create charts and graphs, integrate Google Maps, add social buttons, create pop-ups, add accordions and tabs, embed comments and embed a product catalog.
Using codes is a great way to make your article more interesting and informative for your readers. However, make sure you use the right code and test it before publishing.
We hope this fun overview has helped you learn more about the unique ways you can use codes in your store type site articles.
Sources: https://ru.wikipedia.org/wiki/Brilliant_computer_games
