|
|
Name
|
|
|
|
|
|
|
|
1
|
Joseph Kham
|
1
|
2
|
Mary Lun
|
|
3
|
Thang Kap Kim
|
|
4
|
Lian Kip Cung
|
|
5
|
Thang Sian Khup
|
|
|
|
|
|
|
|
1
|
Nang Cin Khai(Khenno)
|
2
|
2
|
Niang Boih
|
|
3
|
Vung Sian Cing
|
|
4
|
Thang Gel Sang
|
|
5
|
Lian Lam Thang
|
|
|
|
|
1
|
Lal Lian Thanga
|
3
|
2
|
Niang Ngaih Lian
|
|
3
|
Lal Tluangi
|
|
4
|
Pau Muan Sang
|
|
4
|
John Lalrin Puia
|
|
|
|
|
1
|
Pau Khua Mang
|
4
|
2
|
Dim Deih Lun
|
|
3
|
Thang Thawn Suum
|
|
4
|
Dim San Ciin
|
|
5
|
Thang Sian Hon
|
|
6
|
Lian Muan Sang
|
|
7
|
Ning Suan Mung
|
|
8
|
Dal Sian Khai
|
|
9
|
Lun Ngaih Muang
|
|
10
|
Cing Suan Kim
|
|
|
|
|
1
|
Pau Khan Lian
|
5
|
2
|
Niang Ngaih Lun
|
|
3
|
Thang Muan Lian
|
|
4
|
Cin Mun Muang
|
|
|
Nang Khan Sing
|
|
|
|
|
1
|
Ciin Don Niang
|
6
|
2
|
Pau Tung Mung
|
|
|
|
|
|
|
|
1
|
Pau Sut Lian Mung
|
7
|
2
|
Nan Nan Chaw Mung
|
|
3
|
Cing Lam Nuam
|
|
4
|
Naw Hte Ka Baw Dim
|
|
5
|
Huai San Kim
|
|
|
|
|
1
|
Khan Cin Pau
|
8
|
2
|
Lalam
|
|
3
|
Ciin Sian Geel Cing
|
|
|
|
Monday, February 16, 2015
Posted By:
Admin
Pawlpi member list
Sunday, February 15, 2015
Posted By:
Admin
split post into multiples pages
<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">
Add content here
</div>
<div class="content_2" style="display: none;">
Add content here
</div>
<div class="content_3" style="display: none;">
Add content here
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">
Add content here
</div>
<div class="content_2" style="display: none;">
Add content here
</div>
<div class="content_3" style="display: none;">
Add content here
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
Divide/Break Blogger post into differernt Pages
Hey! It has been long time since I posted my previous post at ABT, so today I am back with yet another post which teaches you how you can split up your blogger post into different pages just like in blogs like Mashable and other WordPress blogs.
To create engagement and to divide the posts in section this method can be very useful. Also if you have a very long post you may use this method so the long post will now be splited into many shorts pages.
You can see the live demo of how it works by clicking the below button
Live Demo
Once you have seen the demo to split up your post what you need to do is just follow the below steps.
Firstly open the post editor and switch to HTML tab. By default the Compose tab is selected. After opening it paste the below code
Now replace Add content here with the text you want in the respective pages and publish the post.
There are some points you need to note as they are very crucial for this particular splitting.
Thats it, you are done now. Now you and your visitors can see long posts divided just as you would see in WP posts.
To create engagement and to divide the posts in section this method can be very useful. Also if you have a very long post you may use this method so the long post will now be splited into many shorts pages.
You can see the live demo of how it works by clicking the below button
Live Demo
Once you have seen the demo to split up your post what you need to do is just follow the below steps.
Add the code in Post Editor
Firstly open the post editor and switch to HTML tab. By default the Compose tab is selected. After opening it paste the below code
<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">
Add content here
</div>
<div class="content_2" style="display: none;">
Add content here
</div>
<div class="content_3" style="display: none;">
Add content here
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
Now replace Add content here with the text you want in the respective pages and publish the post.
Important Points to Note before you move on
There are some points you need to note as they are very crucial for this particular splitting.
- Make sure you have the jquery plugin in your blog, if not then add the below code just below the code <head> in your template
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
- It is preferred that you first draft the post and at the last point add this code and make respective changes as due to changing of tabs from Compose to HTML and vice versa the code may automatically get changed.
- You may have got the idea of the code pattern and I guess one can add more pages if they want (here the tut is given only for 3 pages) in case you have any problem drop a comment below and I will try to help you as soon as possible.
Thats it, you are done now. Now you and your visitors can see long posts divided just as you would see in WP posts.
Subscribe to:
Posts (Atom)