Multilingual Blog / Blog Dwi Bahasa: April 2018

Coding

4:45 AM | Labels: # Blog Stats, Page Number For Blog's

Copy Code dibawah, kemudian masukkan ke HTML Blog anda Untuk Dapatkan Page Number Untuk Blogger Seperti Image Dibawah Ni..! Selamat Mencuba

How to add Blogger Page Number:

Step 1st: Go to Template - Edit Html - Click on the coding Box - (Ctrl F) - Search ]]></b:skin> - Copy Another Coding below it - Paste on above.

i.gray page number

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}

ii. Black with Orange Current Page

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

iii. dark With Blue current Page

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}

#blog-pager .pages{border:none;background: none;}

iv.Green & Pink Page

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

v. Orange Widget

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Step 2nd: (Ctrl F) - Seacrh </body> - Copy Code below it - Paste on above

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=1;
var numPages=1;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";

if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="Page "+currentPageNo+' of '+lastPageNo+"";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<a href="'+home_page+'">'+firstText+'</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<a href="'+home_page+'">'+prevText+'</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a>'}}else{if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+=''+jj+''}else if(jj==1){if(currentPage=="page"){html+='<a href="'+home_page+'">1</a>'}else{html+='<a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a>'}}else{if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a>'}else{html+='<a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a>'}}
var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}
if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}

/*]]>*/
</script>
</b:if>

</b:if>

perPage: 7,

numPages: 6,

var firstText ='First';

var lastText ='Last';

var prevText ='« Previous';

var nextText ='Next »';

}

Step 3rd : Label Fix , Find each Occurrence following Code

expr:href='data:label.url'

And replace one below

expr:href='data:label.url + "?&max-results=7"'

Step 4 ( Last ): Save Template

Read User's Comments(0)

css

4:43 AM | Labels: Comand

CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Selector	Example	Example Selects:	CSS
.class	.intro	All elements with class="intro"	1
#id	#firstname	The element with id="firstname"	1
*	*	All elements	2
element	p	All <p> elements	1
element,element	div,p	All <div> elements and all <p> elements	1
element element	div p	All <p> elements inside <div> elements	1
element>element	div>p	All <p> elements where the parent is a <div> element	2
element+element	div+p	All <p> elements placed immediately after a <div> element	2
[attribute]	[target]	All elements with a target attribute	2
[attribute=value]	[target=_blank]	All elements with a target attribute equal to "_blank"	2
[attribute~=value]	[title=flower]	All elements with a title attribute that contains space separated words, one of which is "flower"	2
[attribute\|=language]	[lang\|=en]	All elements where the lang attribute's value is "en", even if the value contains a hyphen (-), like "en-us"	2
:link	a:link	All links (<a> elements with href)	1
:visited	a:visited	All visited links	1
:active	a:active	Active links	1
:hover	a:hover	Links on mouse over	1
:focus	input:focus	The input element that has focus	2
:first-letter	p:first-letter	The first letter of all <p> elements	1
:first-line	p:first-line	The first line of all <p> elements	1
:first-child	p:first-child	All <p> elements that is the first child of its parent	2
:before	p:before	Content will be placed before each <p> element	2
:after	p:after	Content will be placed after each <p> element	2
:lang(language)	p:lang(it)	All <p> elements with the lang attribute containing "it"	2

CSS Properties

CSS Property Groups

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Background Properties

Property	Description	CSS
background	Sets all the background properties in one declaration	1
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	1
background-color	Sets the background color of an element	1
background-image	Sets the background image for an element	1
background-position	Sets the starting position of a background image	1
background-repeat	Sets how a background image will be repeated	1

Border and Outline Properties

Property	Description	CSS
border	Sets all the border properties in one declaration	1
border-bottom	Sets all the bottom border properties in one declaration	1
border-bottom-color	Sets the color of the bottom border	1
border-bottom-style	Sets the style of the bottom border	1
border-bottom-width	Sets the width of the bottom border	1
border-color	Sets the color of the four borders	1
border-left	Sets all the left border properties in one declaration	1
border-left-color	Sets the color of the left border	1
border-left-style	Sets the style of the left border	1
border-left-width	Sets the width of the left border	1
border-right	Sets all the right border properties in one declaration	1
border-right-color	Sets the color of the right border	1
border-right-style	Sets the style of the right border	1
border-right-width	Sets the width of the right border	1
border-style	Sets the style of the four borders	1
border-top	Sets all the top border properties in one declaration	1
border-top-color	Sets the color of the top border	1
border-top-style	Sets the style of the top border	1
border-top-width	Sets the width of the top border	1
border-width	Sets the width of the four borders	1
outline	Sets all the outline properties in one declaration	2
outline-color	Sets the color of an outline	2
outline-style	Sets the style of an outline	2
outline-width	Sets the width of an outline	2

Dimension Properties

Property	Description	CSS
height	Sets the height of an element	1
max-height	Sets the maximum height of an element	2
max-width	Sets the maximum width of an element	2
min-height	Sets the minimum height of an element	2
min-width	Sets the minimum width of an element	2
width	Sets the width of an element	1

Font Properties

Property	Description	CSS
font	Sets all the font properties in one declaration	1
font-family	Specifies the font family for text	1
font-size	Specifies the font size of text	1
font-style	Specifies the font style for text	1
font-variant	Specifies whether or not a text should be displayed in a small-caps font	1
font-weight	Specifies the weight of a font	1

Generated Content Properties

Property	Description	CSS
content	Used with the :before and :after pseudo-elements, to insert generated content	2
counter-increment	Increments one or more counters	2
counter-reset	Creates or resets one or more counters	2
quotes	Sets the type of quotation marks for embedded quotations	2

List Properties

Property	Description	CSS
list-style	Sets all the properties for a list in one declaration	1
list-style-image	Specifies an image as the list-item marker	1
list-style-position	Specifies if the list-item markers should appear inside or outside the content flow	1
list-style-type	Specifies the type of list-item marker	1

Margin Properties

Property	Description	CSS
margin	Sets all the margin properties in one declaration	1
margin-bottom	Sets the bottom margin of an element	1
margin-left	Sets the left margin of an element	1
margin-right	Sets the right margin of an element	1
margin-top	Sets the top margin of an element	1

Padding Properties

Property	Description	CSS
padding	Sets all the padding properties in one declaration	1
padding-bottom	Sets the bottom padding of an element	1
padding-left	Sets the left padding of an element	1
padding-right	Sets the right padding of an element	1
padding-top	Sets the top padding of an element	1

Positioning Properties

Property	Description	CSS
bottom	Sets the bottom margin edge for a positioned box	2
clear	Specifies which sides of an element where other floating elements are not allowed	1
clip	Clips an absolutely positioned element	2
cursor	Specifies the type of cursor to be displayed	2
display	Specifies the type of box an element should generate	1
float	Specifies whether or not a box should float	1
left	Sets the left margin edge for a positioned box	2
overflow	Specifies what happens if content overflows an element's box	2
position	Specifies the type of positioning for an element	2
right	Sets the right margin edge for a positioned box	2
top	Sets the top margin edge for a positioned box	2
visibility	Specifies whether or not an element is visible	2
z-index	Sets the stack order of an element	2

Print Properties

Property	Description	CSS
orphans	Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element	2
page-break-after	Sets the page-breaking behavior after an element	2
page-break-before	Sets the page-breaking behavior before an element	2
page-break-inside	Sets the page-breaking behavior inside an element	2
widows	Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element	2

Table Properties

Property	Description	CSS
border-collapse	Specifies whether or not table borders should be collapsed	2
border-spacing	Specifies the distance between the borders of adjacent cells	2
caption-side	Specifies the placement of a table caption	2
empty-cells	Specifies whether or not to display borders and background on empty cells in a table	2
table-layout	Sets the layout algorithm to be used for a table	2

Text Properties

Property	Description	CSS
color	Sets the color of text	1
direction	Specifies the text direction/writing direction	2
letter-spacing	Increases or decreases the space between characters in a text	1
line-height	Sets the line height	1
text-align	Specifies the horizontal alignment of text	1
text-decoration	Specifies the decoration added to text	1
text-indent	Specifies the indentation of the first line in a text-block	1
text-shadow	Specifies the shadow effect added to text	2
text-transform	Controls the capitalization of text	1
unicode-bidi		2
vertical-align	Sets the vertical alignment of an element	1
white-space	Specifies how white-space inside an element is handled	1
word-spacing	Increases or decreases the space between words in a text	1

Read User's Comments(0)

Blogger Gadget

4:37 AM | Labels: # How to insert Blog's stats & Popular Posts

By date of posting this article, the new widgets for Blog's stats and Popular Postsare now available for bloggers to add and display on their blogspot site(s) through Add a Gadget activation. Configuring both widgets really very simple as all the given options can be selected by just mark the provided radio buttons and also from the drop down list to select the value.

Before I further explain the importance of each widget related to blog content and the post content publicizing, let us see from the options given in each widget; Blog's stats and Popular Posts; respectively. By logic thinking, there must be various and multiple advantageous from these providing offered by the Blogger Team. If it is a type of useless thing, for sure, the Blogger Team won't surface or propose it to be used by blogspot's users.

Multilingual Blog / Blog Dwi Bahasa

Total Pageviews

Labels

Nuffnang

Popular Posts

Archives

Visit Malaysia

Categories

adv