Adding widget area in wordpress sidebar using hook

I am very new to wordpress as well as themeing. I am making a theme where I want to add some widget areas in sidebars. I have sidebar.php. In my functions.php, I have added:

function themeone_sidebar_top() {

    register_sidebar( array(
        'name' => 'Home right sidebar Top',
        'id' => 'sidebar_top',
        'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="rounded">',
        'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'themeone_sidebar_top' );

function add_sidebar_top() {
    if(is_sidebar_active('sidebar_top')) {
             dynamic_sidebar('sidebar_top');
    }
}
add_action('sidebar','add_sidebar_top', 10);

But its not showing the widget area in theme customization. But if I add the following code to my sidebar.php, the option is shown.

<div class="col-md-4 sidebar">
    <?php if ( is_active_sidebar( 'sidebar_top' ) ) : ?>
    <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
        <?php dynamic_sidebar( 'sidebar_top' ); ?>
    </div><!-- #primary-sidebar -->
    <?php endif; ?>
</div>

So I want to know, as beginner , whats the best way to add the widget area in sidebar(or any other areas) using hooks ?

NB: I am following tutorial for guidance.