How To Add Stylish Like And Dislike Button In Posts Blogger/WordPress (Without Plugins)?

Posted on

Hello friend, if you want to put Like and Dislike button on your blog post, then in today’s information we will tell you how you can put Like and Dislike button at the bottom of your blog post, this information is in both Blogger Platform and wordpress.com. So that he can put post like and dislike button at the end of his blog post.

By applying Like and Dislike Button, we are able to know the review of website or blog post, those who like our post give review by liking our article people.

add-like-and-Dislike-Button-in-Blogger-and-WordPress-posts

If you are on WordPress platform by creating then you can apply Like and Dislike button using WordPress Like and Dislike Button and if you are on WordPress then you can apply Like and Dislike button using Plugins also.

Stylish Like and Dislike Button

Benefits of putting like and dislike button?

Likes and dislike button has many benefits. This gives a review to the post written on your blog. How many visitors like your post. you must know.

And your blog or website gets a professional look. By putting likes and dislike buttons below all posts

WordPress Stylish Like and Dislike Button Code?

We need HTML script and CSS to place Like and Disk Like buttons at the bottom of WordPress posts.

  1. So first of all you have to go to the court given below function.php Save it by pasting it.
<?php
	
	function ip_post_likes($content) {
		
		if(is_singular('post')) {
			ob_start();

			?>
				<ul class="likes">
					<li class="likes__item likes__item--like">
						<a href="<?php echo add_query_arg('post_action', 'like'); ?>">
							Like (<?php echo ip_get_like_count('likes') ?>)
						</a>
					</li>
					<li class="likes__item likes__item--dislike">
						<a href="<?php echo add_query_arg('post_action', 'dislike'); ?>">
							Dislike (<?php echo ip_get_like_count('dislikes') ?>)
						</a>
					</li>
				</ul>
			<?php

			$output = ob_get_clean();

			return $output . $content;
		}else {
			return $content;
		}
	}

	add_filter('the_content', 'ip_post_likes');

	
	function ip_get_like_count($type = 'likes') {
		$current_count = get_post_meta(get_the_id(), $type, true);

		return ($current_count ? $current_count : 0);
	}

	
	function ip_process_like() {
		$processed_like = false;
		$redirect       = false;

		
		if(is_singular('post')) {
			if(isset($_GET['post_action'])) {
				if($_GET['post_action'] == 'like') {
					
					$like_count = get_post_meta(get_the_id(), 'likes', true);

					if($like_count) {
						$like_count = $like_count + 1;
					}else {
						$like_count = 1;
					}

					$processed_like = update_post_meta(get_the_id(), 'likes', $like_count);
				}elseif($_GET['post_action'] == 'dislike') {
					
					$dislike_count = get_post_meta(get_the_id(), 'dislikes', true);

					if($dislike_count) {
						$dislike_count = $dislike_count + 1;
					}else {
						$dislike_count = 1;
					}

					$processed_like = update_post_meta(get_the_id(), 'dislikes', $dislike_count);
				}

				if($processed_like) {
					$redirect = get_the_permalink();
				}
			}
		}

		
		if($redirect) {
			wp_redirect($redirect);
			die;
		}
	}

	add_action('template_redirect', 'ip_process_like');
?>
  • After saving the above court in function.php, you have to save its csearch file. Copy the csearch file given below and save it in Additional Css.
.likes {
	display: flex;
}

.likes__item {
	list-style: none;
}

.likes__item:not(:last-child) {
	margin-right: 20px;
}

.likes__item a {
	padding: 10px 15px;
	display: inline-block;
	border-bottom: 2px solid;
	border-radius: 3px;
	box-shadow: none;
	background: #f5f5f5;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 100%;
}

.likes__item a:hover {
	color: #fff;
}

.likes__item--like a {
	border-bottom-color: #47ba72;
	color: #47ba72;
}

.likes__item--dislike a {
	border-bottom-color: #ba6547;
	color: #ba6547;
}

.likes__item--like a:hover {
	background: #47ba72;
}

.likes__item--dislike a:hover {
	background: #ba6547;
}
  • After which you can see that the Like and Dislike button will appear at the bottom of your post.

Similarly, bloggers can also put Like and Dislike Button in the blog.

How to put Like and dislike button on Blogger Posts?

  1. First bloggerTemplateGo to the “ section and click on “Edit HTML”.
  2. Now in front of you to edit the theme, that is, the full code of your template will be visible in front, now in Search by pressing CTRL + F with the help of your keyboard: Search and expand by entering this code.
  3. after that you Search the code and paste the like and dislike button code below it.
  4. Best if you are using Share button in Blogger Templete then you can put like and dislike button code below it.

Blogger Stylish Like and Dislike Button Code

1.Transpert Like and dislike button-

DEMO

coollikebutton
<!-- hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="github" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- hindihelp4u.com END -->

2- Drop style Like and dislike button

DEMO

likeanddislikebutton
<!-- hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="drop" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- hindihelp4u.com END -->

3.Black and white Likes and dislike button

DEMO

likeanddislikebuttondemo
<!--hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="black" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!--hindihelp4u.com END -->

4.Colorfull Likes and dislike button

DEMO

coolLikeanddislikebutton
<!-- hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="greenred" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- hindihelp4u.com END -->

5.Lovely Likes and dislike button-

DEMO

lovelylikeanddislikebutton
<!-- hindihelp4u.com BEGIN -->
<span class="likebtn-wrapper" data-theme="disk" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!--hindihelp4u.com END -->

So in this way you can put the Like and Dislike Button at the bottom of the post of your Blogger or WordPress website block.

Source link

Leave a Reply

Your email address will not be published.