Related Posts Widget For Blogger

1)  Design > Page Elements > Edit HTML > Expand Widget Templates ကိုသြားလိုက္ပါ။

2) </head> ဒီကုဒ္ေလးကို ရွာပါ...။

3)ေတြ႔ျပီဆိုရင္  </head> အေပၚမွာ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြကို ထည့္လိုက္ပါ။

<!--Related Post Widget Starts-->
<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;http://www.webaholic.co.in/other/bw.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/1866208202/rlpost.js' type='text/javascript'/>
<!--Related Post Widget Ends-->

4) ဒီ<div class='post-footer'> ကုဒ္ေလးကိုရွာပါ...။


5) ေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို <div class='post-footer'> ရဲ႔ေအာက္မွာထညိ့လိုက္ပါ။

<!--Related Post Widget Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<!--Related Post Widget Ends-->

6)  Template ကို Save လုိက္ပါ...။လုပ္ေဆာင္ခ်က္ျပီးဆံုးပါျပီ။

auto select all mouse hover

ေအာ္တိုေရြး ကုဒ္ေလးပါ

<textarea cols="25" name="txt" onclick="this.focus();this.select()" onfocus="this.select()" onmouseover="this.focus()" rows="6" style="display: inline;">စာကို ဒီမွာေရးပါ</textarea>

Remove - Subscribe to: Posts (Atom)

1. Go to dashboard/ template/ edit HTML
2. Click the 'Expand Widgets Templates' box
3. Find:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

Remove this line:

<b:include data='feedLinks' name='feedLinksBody'/>

That should remove Posts (Atom)

ေနာက္တစ္မ်ိဳး

1. Go to Blogger Dashboard > Design tab > Edit HTML tab
2. Check Expand Widget Templates checkbox
3. Then serach for the following line of code and remove it.

   <b:include name='feedLinks'/>

4. Finally Save Your template.

How to Hide this links By CSS?

There is another way to hide this links By CSS
You just copy the below code and paste it before ]]></b:skin> tag

.blog-feeds{display:none !important;}

ေနာက္တစ္မ်ိဳး

1.  Log in to blogger account > Go to Design >> Edit Html

2. Make sure added check mark in Expand Widget Templates

3.  Find this tag by using Ctrl+F

 <b:include name='feedLinks'/>

Delete code Blue you found.
4. Now click save template. you are done.

Automatic Thumbnail and Read More Function for Blogger

Read more function is used to cut our post on homepage, post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.
This is automatic read more function with thumbnail. We just need to set up our HTML code.
Follow steps:
1. Go to "Design" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find this code
<data:post.body/>
4. Replace with this code below

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

5. Now, search for </head> and paste the following section of code immediately before it:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

clarification code above:
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

read more

10/19/2011 04:34:00 PM | ေရးသားသူ@Admin@ ေမာင္ေအးလြင္

အရင္ဆံုး  Blogger မွာ Login ၀င္လိုက္ပါ ျပီးရင္ေတာ့ Layout > Edit HTML in your Blogger dashboard and check the "expand widget templates" box.
၁.ဒီကုဒ္ေလးကိုရွာပါ</head> ေတြ႔ရင္ အေပၚမွာ ေအာက္ကကဒ္ေတြကို ထည့္လိုက္ပါ

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Note in above codes we can change the numeric numbers according to our need

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Now find this code <data:post.body/> in your template and replace it with below codes.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Preview Your template if its showing thumbnail with read more hack Save it.

How To Add Slide Out Navigation Menu In Blogger

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now Expand Widget Templates
• Find the code shown below using [ctrl+F]

]]></b:skin>

• Now Paste the Code shown below just above/before it

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvVSk4qCCOPG72dP4nt910AvuRURkYR0CLdlTRwVvemN0RoCnBOVRxF7va835HK4wXqeAgwo_5WJiAQITwvjMGhY3Mn5KUmKoCCtaYdMXhRss3k2GqXPmDbeQSUDBY0YRmaVP13goah8/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFgwmFJ7ke07maH3UImA2KIlAbaThuyJsr71Rhzru1RXd8rSjmGpC6pIHBqRVm8GBbndPBSFexcgO4DXhBSVPKzubZB8d9BuNjfN2V9-gUOIi_wDdhBTJq1YhidNRNMfozToRMHGGu8Hs/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyXoCYrBe53TrMqWs0JiZhvMgkv1FH2mBrbdSWos_BwfJzpsl_g2u7GKwDcTRwlGSfK6fgrNHcBvs-41T2CEB8P9v1TyRon7wfp-OPHrKgFFcXsCDxn6Ad-6bx_r6s0FO2796k2A6RLj4/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGFcsPKnvTfs2IhsNLHvbxZjbWK3r5TADTzBBMiZmcxsgfurXVC4v3zGLRadqPpANMdLz3tSgNLFJw1z426qbNERbHjKTojJTBOfTdoNhTfvj1LiL-3A3ILt4BwnAAXL4kTxSsZBp69wI/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJTQSdT5IGzL055D_7UpHWulOAiqwkXFP5IaYrkAfSfR4b6XU8cfj8sEi_z-o8XfKl4x5J2eCNnmV5Os3TEL0PkpfnndFVUg62abqAu_flxX3_J6PNHPES0f_219yOhvnKHwu2dWJ0ZQ/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2kbIlMsm6gF0lLLhM-jR1BnQkvmQJz84PowGoVL8AMloxZvXrBCWJdzs7S-TXjG0Mrd7jPMD4yTuole0t2XIXS52IY6vjZhwbrYhLHg5D5ysaAkSiN9z_WVM6Vn90v2i90Al2vLBnkRo/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbU1uDWHWoeXoBDON4wEkdC_vdjXolNC8jB-vxiIJYdEB0_G59ceGx2jyKBTZOrayqYx1c4U8zptD3MzLsxh0nhXcLtbPu2WYCg1meTYMLFU23x2BmUobXrQZ98mwxKwCSWVzFuyD64M/s1600/mail.png);
}

• Now Find the code shown below using [ctrl+F]

</head>
<body>

• Now Replace it with the code shown below

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>
</head>
<body>
<p style="display:none;"> Navigation Menu by<a href="http://www.latesthack.com">Latest Hack</a></p>
<ul id="navigation">

            <li class="home"><a href="" title="Home"></a></li>

            <li class="about"><a href="" title="About"></a></li>

            <li class="search"><a href="" title="Search"></a></li>

            <li class="photos"><a href="" title="Photos"></a></li>

            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="" title="Podcasts"></a></li>

            <li class="contact"><a href="" title="Contact"></a></li>

        </ul>  

How To Add Slider Notification Widget in Blogger

• Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
• Backup your Template before making any changes to your blog
• Now Expand Widget Templates
• Press Ctrl + F and search the code shown below
• Now Find the code shown below using [ctrl+F]

</head>

• Now Paste the Code Shown Below just above/before it

<style type="text/css">
.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em;
-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}
.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://latest-hacks.googlecode.com/svn/gadgets/Sliding Description Panel/jquery.slidenote.min.js" type="text/javascript"></script>

• Now Find the code shown below using [ctrl+F]

</body>

• Now Paste the Code Shown Below just above/before it

<div class='slidenote' id='note'>
<div id='container'>
<h2>LATESTHACK</h2>
<span><em>Get All Blogger Tricks And Tips !!! :) </em></span>
<p>Visit now : <a href='http://latesthack.com/'>http://latesthack.com/</a> and learn ... </p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRMl6WiUNjc4bq40KPIXktjDRQ6gf_xxvO6NAbVtAuEaUjcWKWCXtXEUxFTUqzJgPeC0WTTahZEH_RRoT3MKfjXDNPtlqazUNXTRzBLCSIN17r2pGbcBW9AEE9wsdKE_VydWTMuDwz-c/s320/slidenote.close.png&#39;
});
</script>

• Now save your template

ဘေလာ့အေဟာင္းမွ ဘေလာ့အသစ္ကိုခ်ိတ္ေပးနည္း

 စာဖတ္သူမ်ား မိမိ ဘေလာ့အေဟာင္းကို ၀င္ေရာက္ဖတ္ေနခ်ိန္မွာ မိမိျပဳလုပ္ထားေသာ ဘေလာ့ အသစ္ကို
၀င္ေရာက္ ဖတ္ေစခ်င္ ၀င္ေရာက္ေရာက္ေစခ်င္လွ်င္ ေအာက္ပါနည္းအတိုင္း ျပဳလုပ္ထားျခင္းျဖင့္ မိမိ၏
ဘေလာ့အသစ္ကို ဒါရိုက္ ၀င္ေရာက္ျပီးသား ျဖစ္ေနမွာပါ....။
1.မိမိ၏ ဘေလာ့ အေဟာင္းကို  Login အရင္ဆံုး၀င္ေရာက္လိုက္ပါ

2. ျပီးရင္ Design >>Edit HTML>> Expand Widget Templates မွာ အမွတ္ေလးေပးလို္က္ပါ။
   ျပီးရင္ေတာ့ ဒီ <head> ကုဒ္ေလးကိုရွာလိုက္ပါ...။
3.  <head>.ကို ေတြ႔ျပီဆိုလွ်င္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ကို <head>ရဲ႕ ေအာက္မွာထည့္လိုက္ပါ။

<meta http-equiv="refresh" content="0;URL=ဒီေနရာမွာ မိမိဘေလာ့အသစ္၏လိပ္စာထည့္ပါ"/>  

4. ဥပမာေအာက္မွာျပထားပါတယ္။

<head>

<meta http-equiv="refresh" content="0;URL=http://walkerindark.blogspot.com/"/>  

5. မိမိ၏ Template ကို Preview နဲ႔ ၾကည့္လိုက္ပါ။Error မတတ္ရင္ေတာ့ Template ကို Save လိုက္ပါ။

Animated recent post widget ထည့္နည္း

1. www.blogger.com မွာ မိမိဘေလာ့မွာLog in ၀င္လိုက္ပါ။ > Page Elements>
    > add a gadget > HTML/Javascript ကိုသြားလိုက္ပါ။

2. ျပီးရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ကုဒ္ေလးေတြကို HTML/Javascript မွာ Paste လုပ္လိုက္ပါ။

<style type="text/css">

#rp_plus_img{height:377px;}

#rp_plus_img li {height:60px;padding:5px;list-style:none;

background-color:#ffffff;

border:solid 1px #000000;}

#rp_plus_img a{color:#00000;}

#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;

text-align:justify;

-moz-border-radius: 5px;}

#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>

<script type="text/javascript">

var speed = 1500;

var pause = 3500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 5;

var numchars = 0;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul><small><a href="http://walkerindark.blogspot.com/2012/08/animated-recent-post-widget.html" target="_blank">get this widget here</a></small>

3.  Preview နဲ႔ အရင္ၾကည့္လိုက္ပါ။ Ok ...အဆင္ေျပရင္ေတာ့ Save လိုက္ပါ။ ေအာက္မွာ DEMO    အေနနဲ႔ ျပထားပါတယ္ အားလံုးအဆင္ေျပၾကပါေစ။

get this widget here

post တဲ့ အခါမွာ စာပိုဒ္ေလးေတြ ပံုေလးေလးေတြကို Hide လုပ္ျပီးေရး ၾကမယ္

၁။ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြကို Design>>Template Designer>>Advenced>>Add CSS ကိုသြားလိုက္ပါ။

၂။ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြကို ေကာ္ပီ(copy)ယူျပီး css box မွာ (paste) ထည့္လိုက္ပါ။

.posthidden {display:none}
.postshown {display:inline}

၃။ ေနာက္တစ္ဆင့္အေနနဲ႔ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူျပီး</head> အေပၚက ထည့္လိုက္ပါ။

<script type="text/Javascript">

function expandcollapse (postid) {

   whichpost = document.getElementById(postid);
 
   if (whichpost.className=="postshown") {
      whichpost.className="posthidden";
   }
   else {
      whichpost.className="postshown";
   }
}
</script>

၄။ မိမိ၏တိန္းပလိတ္(template) ကို နမူနာ(preview) နဲ႔ ၾကည့္လိုက္ပါ။ Error မတက္ဘူးဆိုရင္ တိန္းပလိတ္ ကို သိမ္း(Save) လိုက္ပါ။

မွတ္ခ်က္။ ။ မိမိ post တင္ခ်ိန္မွာေတာ့ မိမိ ေဖ်ာက္(Hide) ျပီးေရးခ်င္တဲ့ အေၾကာင္းအရာေလးေတြကို ေအာက္မွာျပထားတဲ့ အတိုင္းေရးရမွာျဖစ္ပါတယ္။
ေအာက္ကအတိုင္းမေရးရင္ေတာ့ (Hide) ျဖစ္မွာ မဟုတ္ပါဘူး။
ဥမမာ ၁။ဒါကေတာ့ မိမိ (Hide)လုပ္ျပီးေရးခ်င္တဲ့ စာပိုဒ္ေလးကိုေဖ်ာက္ျပီးေရးတာပါ။

<a href="javascript:expandcollapse('subtopic0001')">
<h4>ေခါင္းစဥ္ထည့္ပါ</h4></a>
<span class="posthidden" id="subtopic0001">
မိမိ ေဖ်ာက္(Hide) ျပီးေရးခ်င္တဲ့ အေၾကာင္းအရာကို ဒီေနရာမွာေရးပါ</span>

ဥပမာ ၂။ ဒါကေတာ့ အေၾကာင္းအရာ စာသားႏွင့့္ ပံု ကို ေဖ်ာက္ျပီးေရးနည္းပါ။

<a href="javascript:expandcollapse('subtopic0002')">
<h4>ေခါင္းစဥ္ထည့္ပါ</h4></a>
<span class="posthidden" id="subtopic0002">
<img SRC="ဒီေနရာေလးမွာ မိမိပံု၏ လင့္ ကို ထည့္ပါ"border="0">
မိမိ ေဖ်ာက္(Hide) ျပီးေရးခ်င္တဲ့ အေၾကာင္းအရာကို ဒီေနရာမွာေရးပါ</span>

ဥပမာ ၃။ ဒါကေတာ့ စားသားႏွင့္ ပံု ၁ ပံု (သို႔)၂/၃ ပံုကို ေဖ်ာက္ျပီးေရးတာပါ။

<a href="javascript:expandcollapse('subtopic0003')">
<h4>ေခါင္းစဥ္ေရးပါ</h4></a>
<span class="posthidden" id="subtopic0003">
<img SRC="ဒီေနရာေလးမွာ မိမိပံု၏ လင့္ ကို ထည့္ပါ"border="0">
<img SRC="ဒီေနရာေလးမွာ မိမိပံု၏ လင့္ ကို ထည့္ပါ"border="0">
အေၾကာင္းအရာ ကို ဒီေနရာမွာ ထည့္ပါ</span>

ဥပမာ ၁၊၂၊၃ အားလံုးကိုလဲ ထည့္ေရးလို႔ ရပါတယ္....။

အားလံုးအဆင္ေျပၾကပါေစ။ ေအာက္မွာ နမူနာ ထည့္ျပထားပါတယ္။
ေလးစားစြာျဖင့္ WiD(walkerindark)

ဒီမွာႏိႈက္ၾကည့္ပါ

နမူနာပံုေလးေတြပါ အားလံုးအဆင္ၾကပါေစ....။

ဘေလာ့ဂါ Post မွာ ပံုေလးေတြလွ်ိဳ႕တင္နည္

မိမိရဲ႕ post မွာ screen shot ပံုေလးေတြျဖစ္ျဖစ္ မိမိတင္ခ်င္တဲ့ ဘယ္ပံုျဖစ္ျဖစ္ မိမိေရးသားထားတဲ့
infomation ေလးကိုဖတ္ျပီးမွ ပံုေလးကို လွ်ိဳ႕၀ွက္တင္ခ်င္ရင္ေတာ့ ဒီနည္းေလးကေတာ္ေတာ္လဲကို
လန္းမယ္ထင္ပါတယ္။
နည္းလမ္းေလးကို မေျပာခင္မွာ စကားနည္းနည္းေလာက္ ေျပာခ်င္ပါတယ္။
က်ေနာ္သည္ ဘာမွ မတတ္ေသပါဘူး ေလ့လာေနသူဆဲသာျဖစ္ပါသည္။ က်ေနာ္ေလ့လာေနေသာ
ေလ့လာျဖစ္ေသာ အေၾကာင္းအရာမ်ားကိုသာ ျပန္္လည္မွ်ေ၀ျခင္းသာျဖစ္ပါသည္။က်ေနာ္၏ဘေလာ့
တြင္ေရးသားထားေသာအေၾကာင္းအရာ (ကုဒ္) မ်ားသည္ က်ေနာ္ကိုယ္တိုင္ေရးသားထားျခင္မဟုတ္ပါ
က်ေနာ့္ေလ့လာခဲ့ေသာ သူမ်ားေရးသားထားေသာ ကုဒ္ မ်ားကို က်ေနာ္သိသေလာက္ ျပန္လည္ျပငဆင္္
ေရးသားျခင္းသာ ျဖစ္ပါေၾကာင္း၀န္ခံအပ္ပါသည္။
ကဲနည္းလမ္းေလးစလိုက္ၾကရေအာင္ေနာ္.......။
post အသစ္တစ္ခုကို တင္ရန္ျပင္ဆင္လိုက္ပါ....။မိမိတင္မယ့္ post အေၾကာင္းအရာေတြေရးျပီးသြားျပီဆိုပါေတာ့..။
အေၾကာင္းအရာ ေအာက္မွာ Screen Shot ပံုေလးပါတင္ေပးမယ္ေပါ့။ဒါေပမယ့္ အဲဒီပံုေလးကို မိမိဘာသာစကား(စာေပ)
နားလည္သူအတြက္ အလြယ္တကူုၾကည့္လို႔ရေအာင္ ေအာက္ကနည္းအတိုင္းတင္ပါ။
၁။ Html ကို ကလစ္ပါ။ျပီးရင္ ေအာက္က ကုဒ္ေလးေတြကို ေကာ္ပီ ယူျပီး မိမိပံုထည့္ခ်င္တဲ့ေနရာမွာ ထည့္လိုက္ပါ။
၂။ ကုဒ္မွာ ျပင္စရာေလးေတြ ျပင္ပါ။ျပင္မယ့္ေနရာေတြမွာ ျမန္မာလိုေရးထားပါတယ္။

<h4>
<u>ေအာက္မွာပံုေဖ်ာက္၍တင္ထားပါသည္</u></h4>
<script language="javascript" type="text/javascript">
function hideImage() {
if (document.getElementById) {
document.getElementById('div').style.visibility = 'hidden';
}
}
function showImage() {
if (document.getElementById) {
document.getElementById('div').style.visibility = 'visible';
}
}
</script>

<button onclick="javascript:hideImage()"><blink><span style="color: red;">၀ွက္ထားမယ္</span></blink></button>
<button onclick="javascript:showImage()"><blink><span style="color: green;">ၾကည့္မယ္</span></blink></button>
<div id="div">
<center>
<img border="0" src="ဒီေနရာေလးမွာ မိမိပံု၏ လင့္ ကို ထည့္ပါ" /> </center>
</div>

၃။ ပံုလွ်ိဳ႕၀ွက္တင္နည္းေလး ျပီးစီးသြားပါျပီ။
ေအာက္မွာ ဥပမာ အေနနဲ႔ တင္ျပထားပါတယ္။အားလံုးအဆင္ေျပမယ္လို႔ေမွ်ာ္လင့္ပါတယ္။
အဆင္မေျပခဲ့ရင္ေတာ့ ကြန္႔မက္ေလးေပးသြားၾကပါေနာ္။က်ေနာ္လို blogger ေပါက္စေလးေတြ
အတြက္သာ ရည္ရြယ္ပါတယ္....။blogger ဆရာမ်ားေသးခံေပးပါေနာ္။ သင္ဆရာ ျမင္ဆရာမ်ားအား
အစဥ္ထာ၀ရ ဦးထိပ္ပန္ဆင္လွ်က္ WiD(walkerindark)

ေအာက္မွာပံုေဖ်ာက္၍တင္ထားပါသည္

စာကိုၾကည့္မယ္

ဒီမွာ ၀ွက္ထားတဲ့ စာပိုဒ္ေလ....

ပံုကိုၾကည့္မယ္

က်ေနာ္ ၾကိဳက္တဲ့ ပံုေလးပါ ေက်းဇူးတင္ပါတယ္.

အားလံုးကိုေက်းဇူးတင္ပါတယ္

ဆက္လက္ေလ့လာ မွ်ေ၀သြားပါဦးမယ္ WiD(walkindark)

How To Add Slide Out Navigation Menu In Blogger

• Blogger Dashboard --> Design --> Edit HTML သြားပါ။
• မိမိရဲ႕Template ကို Backup လပ္ထားေပးပါ။
• Expand Widget Templates မွာ အမွန္မွတ္ေလးေပးလိုက္
• ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို [ctrl+F] အကူနဲ႔ ရွိလို္ကပါ။
•  
  ]]></b:skin>
  
  
• ေတြျပီဆိုရင္ေအာက္မွာေပးထားကုဒ္ကို  ]]></b:skin> ရဲ႕အေပၚက ထည့္လိုက္ပါ

ul#navigation {

    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvVSk4qCCOPG72dP4nt910AvuRURkYR0CLdlTRwVvemN0RoCnBOVRxF7va835HK4wXqeAgwo_5WJiAQITwvjMGhY3Mn5KUmKoCCtaYdMXhRss3k2GqXPmDbeQSUDBY0YRmaVP13goah8/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFgwmFJ7ke07maH3UImA2KIlAbaThuyJsr71Rhzru1RXd8rSjmGpC6pIHBqRVm8GBbndPBSFexcgO4DXhBSVPKzubZB8d9BuNjfN2V9-gUOIi_wDdhBTJq1YhidNRNMfozToRMHGGu8Hs/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyXoCYrBe53TrMqWs0JiZhvMgkv1FH2mBrbdSWos_BwfJzpsl_g2u7GKwDcTRwlGSfK6fgrNHcBvs-41T2CEB8P9v1TyRon7wfp-OPHrKgFFcXsCDxn6Ad-6bx_r6s0FO2796k2A6RLj4/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGFcsPKnvTfs2IhsNLHvbxZjbWK3r5TADTzBBMiZmcxsgfurXVC4v3zGLRadqPpANMdLz3tSgNLFJw1z426qbNERbHjKTojJTBOfTdoNhTfvj1LiL-3A3ILt4BwnAAXL4kTxSsZBp69wI/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJTQSdT5IGzL055D_7UpHWulOAiqwkXFP5IaYrkAfSfR4b6XU8cfj8sEi_z-o8XfKl4x5J2eCNnmV5Os3TEL0PkpfnndFVUg62abqAu_flxX3_J6PNHPES0f_219yOhvnKHwu2dWJ0ZQ/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2kbIlMsm6gF0lLLhM-jR1BnQkvmQJz84PowGoVL8AMloxZvXrBCWJdzs7S-TXjG0Mrd7jPMD4yTuole0t2XIXS52IY6vjZhwbrYhLHg5D5ysaAkSiN9z_WVM6Vn90v2i90Al2vLBnkRo/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbU1uDWHWoeXoBDON4wEkdC_vdjXolNC8jB-vxiIJYdEB0_G59ceGx2jyKBTZOrayqYx1c4U8zptD3MzLsxh0nhXcLtbPu2WYCg1meTYMLFU23x2BmUobXrQZ98mwxKwCSWVzFuyD64M/s1600/mail.png);
}

• မိမိ Template Preview နဲ႔ ၾကည့္လိုက္ပါ Error မတက္ရင္ မိမိ၏တိန္းပလိတ္ကို Save လိုက္ပါ။

ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို Page Elements က Add a Gadget ကို HTML/JavaScript

မွာ ထည့္လိုက္ပါ။

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>
</head>
<body>
<p style="display:none;"> Navigation Menu by<a href="http://www.latesthack.com">Latest Hack</a></p>
<ul id="navigation">

            <li class="home"><a href="" title="မူလစာမ်က္ႏွာ"></a></li>

            <li class="about"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="search"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="photos"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="rssfeed"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="podcasts"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="contact"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

        </ul>  

template Save လိုက္ပါ။ လုပ္ေဆာင္ခ်က္ျပီးဆံုးသြားပါျပီ။

ျပင္ဆင္ရန္။   ။ျမန္မာေရးထားတဲ့ ေနရာေတြကို မိမိ စိတ္ၾကိဳက္ ျပင္ဆင္ ႏိုင္ပါတယ္

ျပင္ဆင္ရန္။  ။
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvVSk4qCCOPG72dP4nt910AvuRURkYR0CLdlTRwVvemN0RoCnBOVRxF7va835HK4wXqeAgwo_5WJiAQITwvjMGhY3Mn5KUmKoCCtaYdMXhRss3k2GqXPmDbeQSUDBY0YRmaVP13goah8/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFgwmFJ7ke07maH3UImA2KIlAbaThuyJsr71Rhzru1RXd8rSjmGpC6pIHBqRVm8GBbndPBSFexcgO4DXhBSVPKzubZB8d9BuNjfN2V9-gUOIi_wDdhBTJq1YhidNRNMfozToRMHGGu8Hs/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyXoCYrBe53TrMqWs0JiZhvMgkv1FH2mBrbdSWos_BwfJzpsl_g2u7GKwDcTRwlGSfK6fgrNHcBvs-41T2CEB8P9v1TyRon7wfp-OPHrKgFFcXsCDxn6Ad-6bx_r6s0FO2796k2A6RLj4/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGFcsPKnvTfs2IhsNLHvbxZjbWK3r5TADTzBBMiZmcxsgfurXVC4v3zGLRadqPpANMdLz3tSgNLFJw1z426qbNERbHjKTojJTBOfTdoNhTfvj1LiL-3A3ILt4BwnAAXL4kTxSsZBp69wI/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJTQSdT5IGzL055D_7UpHWulOAiqwkXFP5IaYrkAfSfR4b6XU8cfj8sEi_z-o8XfKl4x5J2eCNnmV5Os3TEL0PkpfnndFVUg62abqAu_flxX3_J6PNHPES0f_219yOhvnKHwu2dWJ0ZQ/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2kbIlMsm6gF0lLLhM-jR1BnQkvmQJz84PowGoVL8AMloxZvXrBCWJdzs7S-TXjG0Mrd7jPMD4yTuole0t2XIXS52IY6vjZhwbrYhLHg5D5ysaAkSiN9z_WVM6Vn90v2i90Al2vLBnkRo/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbU1uDWHWoeXoBDON4wEkdC_vdjXolNC8jB-vxiIJYdEB0_G59ceGx2jyKBTZOrayqYx1c4U8zptD3MzLsxh0nhXcLtbPu2WYCg1meTYMLFU23x2BmUobXrQZ98mwxKwCSWVzFuyD64M/s1600/mail.png);
}

အနီေရာင္ နဲ႔ ျပထားတဲ့ ပံုေတြကို အကိုယ္ပိုင္ image URL နဲ႔ အစားထိုး အသံုးျပဳပါ။

 နမူနာ အေနနဲ႔ က်ေနာ္ ဘေလာ့ရဲ႕ ဘယ္ဘက္မွာ menu ေလးကို ၾကည့္ႏိုင္ပါတယ္။

Add Blockquote To Blogger with bg image& hover image

၁။ ]]></b:skin> ကို Ctrl+F အကူနဲ႔ ရွာလိုက္ပါ ။
၂။ေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ CSS code ေလးေတြကို  ]]></b:skin>  အေပၚက ကပ္ျပီးထည့္လိုက္ပါ။

blockquote {
background: #000 url(ဒီေရာေလးမွာ ပံုမွန္ျမင္ေနရမယ္ပံု၏ URL ကိုထည့္ပါ) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}
blockquote:hover {
background: #000 url(ဒီေနရာေလးမွာ mouse နဲ႔ေထာက္လိုက္လွ်င္ ေပၚခ်င္ပံု၏ URL ကိုထည့္ပါ) no-repeat right bottom ;
color:#E0E089;
}


blockquote p {
margin: 0;
padding-top:10px;
}

လုပ္ေဆာင္ခ်က္ျပီးဆံုးသြားပါျပီ။ သင့္၏ Template ကို Preview နဲ႔ ၾကည့္လိုက္ပါ Error မတက္ဘူးဆိုလွ်င္
Template ကို Save လိုက္ပါ။
NOTE: အေရးၾကီးပါသည္
မိမိ ဘေလာ့မွာ Post တင္တဲ့အခါမွာ Code ေတြကို ထည့္တဲ့ေနရာမွာ ေအာက္မွာျပထားတဲ့အတိုင္း ေရးမွသာ
Code ရဲ႕ေနာက္ခံ Image နဲ႔ Hover ေနာက္ခံ Image ေတြ ေပၚမွာျဖစ္ပါတယ္

<blockquote> ကုဒ္ေတြကိုဒီမွာေရးပါ</blockquote>

Simple CSS Blockquotes and Pullquotes

.blockquote {
background-image: url(images/open-quote.gif);
background-repeat: no-repeat;
background-position: left 5px;
padding-left: 30px;
font-style: italic;
}
.blockquote span {
background-image: url(images/close-quote.gif);
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 30px;
}

Hover Effect To Authors Comments On Blogger

Step 1. In your Blogger dashboard click > Design > Edit Html > Tick The Expand Widget Templates Box :



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy and Paste the following code directly Above / Before ]]></b:skin>

.comment-body-author {
-moz-border-radius: 15px;
border-radius: 15px;
background: #000000; /* BG color*/
color: #ffffff; /* Font color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}

.comment-body-author:hover {
-moz-border-radius: 15px;
border-radius: 15px;
background: #cccccc; /* BG Hover color*/
color: #000000; /* Font Hover color*/
border-top: 1px solid #990000;border-bottom: 1px solid #990000;border-left: 1px solid #990000;border-right: 1px solid #990000;
margin:0;
padding:0 0 0 20px;
}

Note - The colors (Hex) are highlighted in red above and can be changed.To get the Hex code for the colors you want go to this chart - Hex Code Color Chart.

Step 4. Save Your Template, But we are not finished.

In the next step you need to find a section of code in your template and add two extra snippets of code to it.When testing this i found older and custom Blogger templates are different to templates from the Blogger templates designer.For that reason i have two separate methods.The first is for people with Blogger templates that are not from the template designer the second is for templates from the template designer....Got It ....

Users With Custom And Older Blogger Templates Follow These Steps

Step 1. Now we need to edit the following section of code in your template.Finding a section of code can be hard so the best way is to find the first line (Use The Ctrl F Search Method) and work from there.If you cant find the first line look for the second line, remember Blogger templates can have different code so it might not look exactly the same.

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Step 2. OK you have located the section of code, we now add two snippets of code to it.You can see the two snippets and were i have added them below in red.

<b:if cond='data:comment.author == data:post.author'>

<dd class='comment-body-author'>

<p><data:comment.body/></p>

</dd>

<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Step 3. Once your happy you have the code in the right place you can save your template and check it out.

Change Author Comments Color Style In Blogger

Highlighting and customizing author comments differently from visitor comments is a very important step that you must take as soon as possible because this will make author comments more prominent to the visitors and will therefore encourage visitors to take part in the discussion and better communicate with the author. The blogger comment block consists of three important sections which are,

1. Comment-author
2. Comment-body
3. Comment-footer

Our tutorial today is on how to style the Comment-Body section of Author. So lets get to work!

Highlight and Customize Comments in Blogger

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Check "Expand widget templates" Box
4. Search for this.

]]></b:skin>

     5.   Just above it paste the CSS code below,

.mbt-comment-body {
background: #FFFFFF;
color: #008000;
border: 1px solid #008000;
margin:0;
padding:0 0 0 10px;
width:520px;
}

Make these changes:

• To Change the background color of author comments change #FFFFFF
• To change font color change #008000
• To change border size change 1px, to change border style change to solid, dashed or dotted  and to change the color of the border change #008000
• To change the width of the comment body change 520px

Tip: Use our color generator for making these changes
   6.    Next search carefully for this code in your template,
Tip: Press Crtl +F and search for one line at a time

      <data:commentPostedByMsg/>
          </dt>

          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>

     7.     Replace it with the following code,

      <data:commentPostedByMsg/>
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-comment-body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
</b:if>

     8.    Save your template and you are done!

Free Download Blogger Template Hacker Terbaru Terkeren

Template Blogspot Hacker ini tidak sengaja saya temukan dan untuk mengabadikannya saya posting aja disini ya. Tapi memang postingan ini agak jauh dari Cheat Game tapi yang namanya share kan gak mengenal topik.

Sebelumnya baca juga ya All hair Style + All In Shop Update New April 2012 Ninja Saga Cheat dan silahkan dilihat dulu screencutnya :

Template Blogger Hacker Cracker Terbaru

Demo | Download

Mohon maaf kalau gambarnya gelap gelap kayak mati lampu,karena memang begitu adanya Free Download Blogger Template Hacker Terbaru Terkeren,semoga bermanfaat.