ဘေလာ့မွာ Blogger နွင့္ Google+ Comments Box ၂ခုစလုံး တြဲသုံးလုိ႔ရေအာင္ ထည့္နည္း

မဂၤလာပါ၊  ဒီေန႔ ဘေလာ့သမားမ်ားအတြက္ ဘေလာ့မွာ Blogger Comments Box နွင့္ Google+ Plus Comments Box  ၂ခုစလုံး တြဲသုံးလုိ႔ရေအာင္ ထည့္နည္း/လုပ္နည္းေလးကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ ဒီ နည္းလမ္းေလးကုိေတာ့ က်ေနာ္တုိ႔ ျမန္မာဘေလာ့ေတြမွာ အသုံးျပဳတဲ့သူသိပ္မရွိပါဘူးလုိ႔ေျပာရရင္ မွားမယ္မထင္ပါဘူး။ ဘာပဲျဖစ္ျဖစ္ သုံးခ်င္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ အဆင္ေျပေအာင္ ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link ႏွင့္တကြ ထည့္နည္းနဲ႔ လုိအပ္တဲ့ Cond ေတြလည္း ထားေပးပါတယ္။

၁။Sign In Blogger

၂။ Template

၃။ Edit HTMl

၄။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။

<b:includable id='threaded_comments' var='post'>...</b:includable>

၅။ ေတြ႕ၿပီးဆုိရင္ ထုိ Cond ကုိျဖဳတ္ၿပီး ေအာက္က Cond နဲ႔ လဲေပးလုိက္ပါပါ။ (မွတ္ခ်က္။   ။ မိမိရွာေတြ႔တဲ့ အေပၚက Cond ကုိျဖဳတ္ၿပီး ေအာက္က က်ေနာ္ေပးထားတဲ့ Cond ကုိ ထည့္ေပးလုိက္ပါ။)

<b:includable id='threaded_comments' var='post'>

<div id='comment-header'>

  <img id='comments-norm' class='comment-on' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggyITaQ8sD9LDjzJvkquMvuVahbg_QA9SMiUSPA4XC5tuMD53z8gmI0n-Cj9yDxGiQX0jEq2uSAlG6ZLt12gbot3wF3oiyG5wmJpVU_JjD7Sluf41FqdsFJOEEnloq1v8Cq2FkiY8Ea9qr/s1600/MTMblogger_on.png' title='view Blogger comments' /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKb516_0GIcoF3IOBrMH1Y_9SOaW_d6AoUw5WkKt3-3oAHNLLyS6poz92MdA49N5u2GVo5FoEuJFMCNFo-GG2-lv8xJdfnHWgM9rECI0NUk8XSZQp0cXmqTzw7iG8IrTaooh0t-aB2Z7S7/s1600/MTM.png' /><image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5sHPt5oYo8QIRKb5bg8aaFyoHG94m0J0mc5X4BZEN-g8Xt31vcDrGu902gaxpwLTR1Be0N4hWJOe3hdLz92l-9tHQvIC5WmGXWWGzMeotoo5clprLRpYtanXusJO37i1OzMGDSxUACXP/s1600/MTMplus_off.png' title='view Google+ comments' />

</div>

<div id='comment-zone'>

  <div class='comments' id='comments'>

    <a name='comments'/>

    <h4><data:post.commentLabelFull/>:</h4>



    <div class='comments-content'>

      <b:if cond='data:post.embedCommentForm'>

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

      </b:if>

      <div id='comment-holder'>

         <data:post.commentHtml/>

      </div>

    </div>



    <p class='comment-footer'>

      <b:if cond='data:post.allowNewComments'>

        <b:include data='post' name='threaded-comment-form'/>

      <b:else/>

        <data:post.noNewCommentsText/>

      </b:if>

    </p>



    <b:if cond='data:showCmtPopup'>

      <div id='comment-popup'>

        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>

        </iframe>

      </div>

    </b:if>



    <div id='backlinks-container'>

    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>

       <b:if cond='data:post.showBacklinks'>

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

       </b:if>

    </div>

    </div>

  </div>

  <div id='gcontainer'><div id='gcomments'/></div>

<script src="http://apis.google.com/js/plusone.js"></script>

<script>

gapi.comments.render('gcomments', {

    href: window.location,

    width: '600',

    first_party_property: 'BLOGGER',

    view_type: 'FILTERED_POSTMOD'

});

$('#comments-norm').click(function(){

	// switch to normal comments displaying

	$('#gcontainer').css('display','none');

	$('#comments').css('display','block');

	$('#comments-norm').addClass('comment-on');

	$('#comments-gplus').removeClass('comment-on');

	$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggyITaQ8sD9LDjzJvkquMvuVahbg_QA9SMiUSPA4XC5tuMD53z8gmI0n-Cj9yDxGiQX0jEq2uSAlG6ZLt12gbot3wF3oiyG5wmJpVU_JjD7Sluf41FqdsFJOEEnloq1v8Cq2FkiY8Ea9qr/s1600/MTMblogger_on.png');

	$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5sHPt5oYo8QIRKb5bg8aaFyoHG94m0J0mc5X4BZEN-g8Xt31vcDrGu902gaxpwLTR1Be0N4hWJOe3hdLz92l-9tHQvIC5WmGXWWGzMeotoo5clprLRpYtanXusJO37i1OzMGDSxUACXP/s1600/MTMplus_off.png');

});

$('#comments-gplus').click(function(){

	// switch to google plus comments displaying

	$('#comments').css('display','none');

	$('#gcontainer').css('display','block');

	$('#comments-norm').removeClass('comment-on');

	$('#comments-gplus').addClass('comment-on');

	$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNqdMcfJXu7COfzKNkTU8m6DX896XmhNLutwe6KZwfY_1HsZatsI39vNgNHHs6U95VA-i3HfFWqcSw81Lf9JzhtfHCqX9W2eWPzwERol1uESPSakdiWxToB9-9IAo3F7O9yN326yGkaK8/s1600/MTMblogger_off.png');

	$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhIUEjNFCA0tuvZWoqCTFbjqR-0SlqZXbWpjIO-7HAsK1_dYw_6KbtsTwZmg4FdUJM7uVkN8_Ncd1zmCdG7_YjimzpMooGZirp-FuJnN4j8sOJmpibctUUhTJSuCyL5YBcJO5DyVYQ5rA/s1600/MTMplus_on.png');

});

$('#comments-norm').hover(

	// switch to normal comments displaying

	function(){

		if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggyITaQ8sD9LDjzJvkquMvuVahbg_QA9SMiUSPA4XC5tuMD53z8gmI0n-Cj9yDxGiQX0jEq2uSAlG6ZLt12gbot3wF3oiyG5wmJpVU_JjD7Sluf41FqdsFJOEEnloq1v8Cq2FkiY8Ea9qr/s1600/MTMblogger_on.png');}

	}, 	function(){

		if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNqdMcfJXu7COfzKNkTU8m6DX896XmhNLutwe6KZwfY_1HsZatsI39vNgNHHs6U95VA-i3HfFWqcSw81Lf9JzhtfHCqX9W2eWPzwERol1uESPSakdiWxToB9-9IAo3F7O9yN326yGkaK8/s1600/MTMblogger_off.png');}

	}

);

$('#comments-gplus').hover(

	// switch to gplus comments displaying

	function(){

		if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhIUEjNFCA0tuvZWoqCTFbjqR-0SlqZXbWpjIO-7HAsK1_dYw_6KbtsTwZmg4FdUJM7uVkN8_Ncd1zmCdG7_YjimzpMooGZirp-FuJnN4j8sOJmpibctUUhTJSuCyL5YBcJO5DyVYQ5rA/s1600/MTMplus_on.png');}

	}, 	function(){

		if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5sHPt5oYo8QIRKb5bg8aaFyoHG94m0J0mc5X4BZEN-g8Xt31vcDrGu902gaxpwLTR1Be0N4hWJOe3hdLz92l-9tHQvIC5WmGXWWGzMeotoo5clprLRpYtanXusJO37i1OzMGDSxUACXP/s1600/MTMplus_off.png');}

	}

);

</script>

<style>

#comment-zone {

	position:	relative;

}

#gcontainer {

	display:	none;

}

#comments-norm, #comments-gplus {

	cursor:			pointer;

	padding:		0px 5px;

}

</style>

</div>

</b:includable>

၆။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။

<b:includable id='comment_picker' var='post'>...</b:includable>

၇။ ေတြ႕ၿပီးဆုိရင္ ထုိ Cond ကုိျဖဳတ္ၿပီး ေအာက္က Cond နဲ႔ လဲေပးလုိက္ပါပါ။ (မွတ္ခ်က္။   ။ မိမိရွာေတြ႔တဲ့ အေပၚက Cond ကုိျဖဳတ္ၿပီး ေအာက္က က်ေနာ္ေပးထားတဲ့ Cond ကုိ ထည့္ေပးလုိက္ပါ။)

<b:includable id='comment_picker' var='post'>

  <b:if cond='data:post.forceIframeComments'>

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

    <b:if cond='data:post.showThreadedComments'>

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

    <b:else/>

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

    </b:if>

  <b:else/>

    <b:if cond='data:post.commentSource == 1'>

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

    <b:else/>

      <b:if cond='data:post.showThreadedComments'>

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

      <b:else/>

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

      </b:if>

    </b:if>

  </b:if>

</b:includable>

၈။ ထည့္ၿပီးရင္ Save Template ကုိ ႏွိပ္ေပးလုိက္ပါ။ ၿပီးရင္ မိမိ၏ ဘေလာ့ကုိ ဖြင့္ၾကည့္ပါ၊ သိပ္အဆင္မေျပဘူးဆုိရင္ Edit HTMl ကုိျပန္၀င္ၿပီး ေအာက္က Cond ကုိ ရွာပါ။

</head>

ေတြ႕ၿပီးဆုိရင္ </head> ရဲ႕အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

ထည့္ၿပီးရင္ Save Template ကုိႏွိပ္ေပးလုိက္ပါ။ အားလုံးအဆင္ေျပနုိင္ၾကပါေစ။