Home » ब्लॉगरवर्डप्रेसवेब सीईओ » How to Add Stylish Like and Dislike Button in Posts (Without Plugins)?

How to Add Stylish Like and Dislike Button in Posts (Without Plugins)?

Read More

हेलो फ्रेंड यदि आप अपने ब्लॉग पोस्ट के Dislike Button लगाना चाहते हैं तो आज जानकारी ं हम आप बताएंगे आप अपने ब्लॉग पोस्ट के नीचे पोस्ट लाइक ओर डिसलाइक बटन लगा सकते हैं इस जानकारी में है Blogger Platform और wordpress.com दोनों के लिए बताएंगे जिससे कि वह अपने ब्लॉग पोस्ट के अंत में पोस्ट लाइक ओर डिसलाइक बटन लगा सकें।

Like and Dislike Button लगाने से वेबसाइट या ब्लॉग पोस्ट के रिव्यु को जान पाते हैं जिसको हमारे पोस्ट पसंद आते हैं वह हमारे आर्टिकल लोग को लाइक करके रिव्यू देते हैं

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

यदि आप बनाकर WordPress platform पर है तो आप WordPress Like and Dislike Button का इस्तेमाल करके लाइक और डिसलाइक बटन लगा सकते हैं और यदि आप वर्डप्रेस पर हैं तो आप Plugins का इस्तेमाल करके लाइक एंड डिसलाइक बटन लगा सकते हैं।

Stylish Like and Dislike Button

Like and dislike button लगाने के फायदे?

Likes and dislike button कई फायदे होते है। इससे आपके ब्लॉग पर लिखे पोस्ट को रिव्यू मिलता है। विजिटर आपकी पोस्ट को कितना पसंद है। आपको पता होना चाहिए।

और आपका ब्लॉग या वेबसाइट को professional look मिलता है। सभी पोस्ट के नीचे  likes and dislike button लगाने से

WordPress Stylish Like and Dislike Button Code?

वर्डप्रेस पोस्ट के नीचे लाइक और डिस्क लाइक बटन लगाने के लिए हमें एचटीएमएल स्क्रिप्ट और सीएसएस की जरूरत पड़ती है।

  1. तो सबसे पहले आपको नीचे दिए गए कोर्ट को function.php में पेस्ट करके सेव करना है।

	//---- Add buttons to top of post content
	function ip_post_likes($content) {
		// Check if single post
		if(is_singular('post')) {
			ob_start();

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

			$output = ob_get_clean();

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

	add_filter('the_content', 'ip_post_likes');

	//---- Get like or dislike count
	function ip_get_like_count($type = 'likes') {
		$current_count = get_post_meta(get_the_id(), $type, true);

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

	//---- Process like or dislike
	function ip_process_like() {
		$processed_like = false;
		$redirect       = false;

		// Check if like or dislike
		if(is_singular('post')) {
			if(isset($_GET['post_action'])) {
				if($_GET['post_action'] == 'like') {
					// 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
					$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();
				}
			}
		}

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

	add_action('template_redirect', 'ip_process_like');
?>
  • ऊपर वाले कोर्ट को function.php में सेव करने के बाद आप आपको उसका सीसर्च फाइल सेव करना है। नीचे दिए गए सीसर्च फाइल को कॉपी करके 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;
}
  • जिसके बाद आप देख सकते हैं आपके पोस्ट के नीचे लाइक ओर डिसलाइक बटन दिखने लगेगा।

इसी तरह ब्लॉगर ब्लॉग में भी Like and Dislike Button लगा सकते हैं।

Blogger Posts के लीचे Like and dislike button कैसे लगाए?

  1. सबसे पहले ब्लॉगर “” section में जाए और “” पर क्लिक करें।
  2. अब आपके सामने थीम edit करने यानी की आपकी टेम्पलेट का पूरा कोड सामने दिख रहा होगा अब अपने कीबोर्ड की सहायता से CTRL+F दबाकर Search में : इस कोड को डालकर सर्च करें और Expand करें।
  3. उसके बाद आपको इस कोड को सर्च करें और इसके नीचे ही like and Dislike Button Code को पेस्ट कर दे।
  4. सबसे अच्छा यदि आप Blogger Templete में Share button का इस्तेमाल कर रहे है तो उसके नीचे ही लाइक एंड डिसलाइक बटन कोड को लगा सकते है।

Blogger Stylish Like and Dislike Button Code

1.Transpert Like and dislike button-

DEMO



2– Drop style Like and dislike button

DEMO



3.Black and white Likes and dislike button

DEMO



4.Colourfull Likes and dislike button

DEMO



5.Lovely Likes and dislike button-

DEMO



तो इस तरह से आप अपने ब्लॉगर या वर्डप्रेस वेबसाइट ब्लॉक के पोस्ट के नीचे Like and Dislike Button को सामी से लगा सकते हैं।

No tags for this post.
Share on:

Leave a Comment