Комментарии Blogger и Google Plus вместе, с переключением между ними

Посмотрим сначала картинки, как это будет выглядеть. Вот скриншот кнопок, формы комментариев Blogger и Google Plus скрыты:

Комментарии Blogger и Google Plus, скрыты

Нажимаем на иконку Google+ и открывается форма комментариев, где пользователь может написать пару строчек и они опубликуются у вас и заодно в ленте комментатора в соцсети. Плюс дополнительный трафик вам обеспечен:

Комментарии Google Plus

Если нажать ещё раз на красную кнопку +, то комментарии скроются. Захотел ваш читатель комментировать в родных, не удобных блогеровских, пожалуйста, кликаем нужный значок и опля, появились родненькие:

Комментарии Blogger

Ну, и как вам, захотелось установить, это чудо - чудное к себе на блог Blogger? Тогда ой да, за мной, выполнять небольшую мою инструкцию. И так, ищем у себя в шаблоне такую строчку:

<b:include data='post' name='post'/>

И чуть ниже её добавляем такой небольшой код:

<b:if cond='data:blog.pageType == "item"'> <style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJvaDuCNr7zOqPLC84kX7lNsVC1xJ0DXP-ZaHgZkzcovyiSHgvPMIWZE8MryKUPSpPkSevI8VLZt2vQFhXn_pcOl2XEPnhJdNbHQ7goSytZet6UaOgwMBLLAd6jq3mqdLI00p-6F5z56ei/s1600/speech-bubble.png) no-repeat; font-size: 20px; font-family: "Arial Narrow",Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style> <div class='comments-icons'> Открыть комментарии: <a class='show-hide-comments' href='javascript:void();' onclick='$("#gplus-comments-visibility").slideToggle();$("#comments").hide();'><img class='gplus-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOhyIr__N-zhcj0oWz_9OUztmKali5v5ImDQoOeI27r-gEWtAvDhyYJ9z7VbqVtfOJ0m47QXPmfyZDJ2p0_5YNnNR4n0DRDJAw1Hfu3DEtGhREdmgifKKxWo8gHFTwuPLZZxc141EDHAI7/s1600/google-plus-logo.png' width='35'/></a> или <a class='show-hide-comments' href='javascript:void();' onclick='$("#comments").slideToggle();$("#gplus-comments-visibility").hide();'><img class='blogger-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT3mLqVU1i6sHra4H5OhPxwN65FYLGgVpHcHv72RU2qzSe99Qg5pNjvD_3RUweXGNwzxErfehYN5FfUTJ3Nq-f5Y6w-eATIM56ia5P1McCnxmniWUH6S-8xInJe6yBf1dGqjv4fzyGBzDq/s1600/blogger-logo.png' width='35'/></a> </div> <div id='gplus-comments-visibility'> <div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/> </div> </b:if> /textarea><br /> </div>

Вот и весь наш процесс, легко и быстро. Здесь, в коде можете изменить текст на свой, а также, поменять ширину формы комментариев data-width='550'. Обратите внимание, что я тестировал данный способ комментирования на стандартном шаблоне, так как, большинство новичков сейчас используют именно их.

источник