How to add a full page blog to a blog preview?

user_15755487 0
Viewed 85

I have a template that I modified and there is a section in the div with a blog part (its a one page template, im not good enough for the moment to make one page like this one by myself) : blog part Here is the test website in any cases (if its easier for you to understand) : https://test555989.000webhostapp.com/index-slider.html

And this is the codein html :

   <!-- Blog Start -->
    <section class="section bg-light" id="blog">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center">
                    <div class="section-title">
                        <h4 class="title text-uppercase fw-normal mb-4">Latest <span class="text-primary fw-bold">News</span> </h4>
                        <p class="text-muted mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
                    </div>
                </div><!--end col-->
            </div><!--end row-->

            <div class="row">
                <div class="col-lg-4 col-md-6 mt-4 pt-2">
                    <div class="blog-post bg-white rounded">
                        <img src="images/blog/01.jpg" class="img-fluid rounded-top" alt="">
                        <div class="blog-content p-3">
                            <h5><a href="#" class="blog-title text-dark">How To Better Understand Yourself</a></h5>
                            <p class="text-muted">Сконтактируйте с нами и получите бесплатную констультацию</p>
                            <div class="tag text-muted">
                                <a href="javascript:void(0)" class="float-end mb-0 text-muted"><i class="mdi mdi-account me-2"></i>A.Lanez</a>
                                <a href="javascript:void(0)" class="mb-0 text-muted"><i class="mdi mdi-calendar-heart me-2"></i>1st July 2019</a>
                            </div>
                        </div>
                    </div><!--end blog post-->
                </div><!--end col-->
                
                <div class="col-lg-4 col-md-6 mt-4 pt-2">
                    <div class="blog-post bg-white rounded">
                        <img src="images/blog/02.jpg" class="img-fluid rounded-top" alt="">
                        <div class="blog-content p-3">
                            <h5><a href="#" class="blog-title text-dark">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</a></h5>
                            <p class="text-muted">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velits</p>
                            <div class="tag text-muted">
                                <a href="javascript:void(0)" class="float-end mb-0 text-muted"><i class="mdi mdi-account me-2"></i>A.Lanez</a>
                                <a href="javascript:void(0)" class="mb-0 text-muted"><i class="mdi mdi-calendar-heart me-2"></i>1st July 2019</a>
                            </div>
                        </div>
                    </div><!--end blog post-->
                </div><!--end col-->
                
                <div class="col-lg-4 col-md-6 mt-4 pt-2">
                    <div class="blog-post bg-white rounded">
                        <img src="images/blog/03.jpg" class="img-fluid rounded-top" alt="">
                        <div class="blog-content p-3">
                            <h5><a href="#" class="blog-title text-dark">Be One With Nature | Zero-wast Life</a></h5>
                            <p class="text-muted">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velits</p>
                            <div class="tag text-muted">
                                <a href="javascript:void(0)" class="float-end mb-0 text-muted"><i class="mdi mdi-account me-2"></i>A.Lanez</a>
                                <a href="javascript:void(0)" class="mb-0 text-muted"><i class="mdi mdi-calendar-heart me-2"></i>1st July 2019</a>
                            </div>
                        </div>
                    </div><!--end blog post-->
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end container-->
    </section><!--end section-->
    <!-- Blog End -->

And I don't know how to do to make happen for example when you click on it, to open a pop up page with a full text and the same picture which will be inside that you can scroll down to see all text of the blog and not the preview! here I have all the files : files

and I am pretty new in the sphere , I am trying to just make a blog section .. or if you have a solution just to expand the text in a pop up or something I will be very grateful

thank you in advance for your help

css html php javascript
1 Answers

You could put the blog's contents in an <iframe> and make the blog previews change the src and show the <iframe> when clicked.  Here's an example with a button that summons an iframe with a random StackOverflow image.  You can also click outside the window to hide it.

I'm not entirely sure why the iframe doesn't center itself though—this worked fine before when I used it in a school project.

function hideBlogWindow(){
  document.getElementById("blog-window").hidden = true;
}

function showBlogWindow(src){
  document.getElementById("blog-window-iframe").src = src;
  document.getElementById("blog-window").hidden = false;
}
overlay {

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    
    /* This determines the darkening effect around the window */
    background-color: #00000067; 
    
}

overlay > iframe {

    /* Make the iframe 60% the width of the page*/
    width: 60vw;
    /* Make the iframe 50% the height of the page*/
    height: 50vh;
    
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
}
<button onclick="showBlogWindow('https://i.stack.imgur.com/37IJK.png')">
  Show Blog Window
</button>

<overlay id="blog-window" hidden="true" onclick="hideBlogWindow()">
    <iframe id="blog-window-iframe"></iframe>
</overlay>

user_152049950
Related