This is the Example Page post.

Example Page

08 Apr 2017 | Examples

Example One ( Link )

Ref lain :

Petunjuk lain untuk jekyll how to :

Example Two ( Image and Var )

Foto Cantik posisi kiri

Test Image posisi kanan

Use SPAN posisi kiri

Variabel :

page.id : /Example-page
page.url : /Example-page
page.path : _posts/2017-04-08-Example-page.md
site.url : https://abuisa.github.io
site.baseurl :
post.url :

Example three ( Code highlight )

To insert highlight code inside of a post, it’s enough to use some specific tags, has directly described into the Jekyll documentation. In this way the code will be included into a .highlight CSS class and will be highlight according to the syntax.scss file. This is the standard style adopted by Github to highlight the code.

This is a CSS example:

1
2
3
4
5
6
7
8
body {
  background-color: #fff;
}

h1 {
  color: #ffaa33;
  font-size: 1.5em;
}

And this is a HTML example, with a linenumber:

1
2
3
<html>
  <a href="example.com">Example</a>
</html>

Last, a Ruby example:

1
2
3
def hello
  puts "Hello World!"
end

Example Four ( Blok Note )

This is a blockquote ini juga bloknote

The Command for download your github repo to local :

Command $ git clone https://github.com/abuisa/abuisa.github.io

Unordered list

list 1
list 2
list 3
list 4
a;askdf
aksdf

Ordered list

one
two
three
four
alsjdf
aksjdf

Examples Five ( loop )

Contoh Mengambil semua Kategori :

RM for Remove, Replace Multiple File_Name

A-Z Linux Command Line with Examples

Youtube Downloader - youtube-dl

Command Line Working with Files and Directories [Vol-2]

Command Line Working with Files and Directories [Vol-1]

WGET for Download same webpage name to N times

The Art of Command Line

Linux Command Line Text Processing

Linux Command Line Shell

Linux Command Line Shell Scripting

Linux Command Line Shell Customization

Linux Command Line introduction

Book for Free to Study and Trainig LINUX

BackUp Web ini ke Offline dengan FIND dan SED

Belajar perintah xargs di Linux

Downgrade atau Remove kernel dan kembali ke versi sebelumnya

Membuat Server Repository Local di Ubuntu

Contoh penggunaan For with br

Loop tanpa br

Click Number : 1 : 2 : 3 : 4 : 5 : 6

Examples Six ( Video )

Manual Embed video from youtube :

https://www.youtube.com/watch?v=fuS-3HSnpq4

Scrip ini copy dan buat menjadi satu bari (menghindari error)..

1
2
3
4
5
6
<iframe allowfullscreen="" 
	class="YOUTUBE-iframe-video" 
	frameborder="0" height="400" 
	src="https://www.youtube.com/embed/fuS-3HSnpq4?feature=player_embedded" 
	width="600">
</iframe>

Tampak videonya 1 :

Video From LK21.com

Vidio dengan time start dan time end

Video start dari detik ke : 100 s/d detik ke : 235

1
2
3
4
5
6
<iframe allowfullscreen="" 
	class="YOUTUBE-iframe-video" 
	frameborder="0" height="400" 
	src="https://www.youtube.com/embed/fuS-3HSnpq4?start=100&end=235&feature=player_embedded" 
	width="600">
</iframe>

Examples Seven ( SCRIPT Jquery & HTML )

Menampilkan SCRIPT PYTHON :

  class RedditSpider(GenericSpider):
      name = "reddit"
      start_urls = ["https://www.reddit.com/"]
  
      class Meta:
          items = CssTarget("items", ".thing")
          targets = [   # scrapyz also has XpathTarget and RegexTarget classes for extraction
              CssTarget("rank", ".rank::text"),
              CssTarget("upvoted", ".upvoted::text"),
              CssTarget("dislikes", ".dislikes::text"),
              CssTarget("likes", ".likes::text"),
              CssTarget("title", "a.title::text"),
              CssTarget("domain", ".domain > a::text"),
              CssTarget("datetime", ".tagline > time::attr(datetime)"),
              CssTarget("author", ".tagline > .author::text"),
              CssTarget("subreddit", ".tagline > .subreddit::text"),
              CssTarget("comments", ".comments::text")
          ]

Script untuk buat tabel dari tag div dan ubah dari kolom menjadi baris

HTML untuk div tabelnya :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<a href="#" id="rtc">Column</a>&nbsp;|&nbsp;
<a href="#" id="ctr">Rows</a>&nbsp;|&nbsp;

<a href="#" onclick="rowtc()">JF-Column</a>&nbsp;|&nbsp;
<a href="#" onclick="ctrow()">JF-Rows</a>&nbsp;|&nbsp;

<div class="table">
  <div class="row" id="hdr">
	<div class="no">No. </div>
	<div class="jdpdf">JUDUL  </div>
	<div class="np">PENULIS  </div>
	<div class="abmet">ABSTRAK </div>
	<div class="abmet">METODE</div>
	<div class="jdpdf">FILE </div>
  </div>

  <div class="row">
	<div  class="column"><b class="hd">NO :		</b>1. </div>
	<div  class="column"><b class="hd">JUDUL :	</b> Judul 1  </div>
	<div  class="column"><b class="hd">PENULIS :	</b> Penulis 1 </div>
	<div  class="column"><b class="hd">ABSTRAK :	</b> Abstrak 1 </div>
	<div  class="column"><b class="hd">METODE :	</b> Metode 1 </div>
	<div  class="column"><b class="hd">FILE :	</b> File 1 </div>
  </div>
  <div class="row">
	<div  class="column"><b class="hd">NO :		</b>2. </div>
	<div  class="column"><b class="hd">JUDUL :	</b> Judul 2  </div>
	<div  class="column"><b class="hd">PENULIS :	</b> Penulis 2 </div>
	<div  class="column"><b class="hd">ABSTRAK :	</b> Abstrak 2 </div>
	<div  class="column"><b class="hd">METODE :	</b> Metode 2 </div>
	<div  class="column"><b class="hd">FILE :	</b> File 2 </div>
  </div>
  <div class="row">
	<div  class="column"><b class="hd">NO :		</b>3. </div>
	<div  class="column"><b class="hd">JUDUL :	</b> Judul 3  </div>
	<div  class="column"><b class="hd">PENULIS :	</b> Penulis 3 </div>
	<div  class="column"><b class="hd">ABSTRAK :	</b> Abstrak 3 </div>
	<div  class="column"><b class="hd">METODE :	</b> Metode 3 </div>
	<div  class="column"><b class="hd">FILE :	</b> File 3 </div>
  </div>
</div>

CSS untuk table dan column

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.table {
    display: table;
}

.row {
    display: table-row;	

}
.rowb{
	border-bottom: 1px solid gray;
	padding: 4px;
}
.column, .no, .jdpdf, .np, .abmet {
    display: table-cell;
    vertical-align: top;
	border: 0px solid gray;
	padding: 4px;
	border-left:0px solid gray;
	border-bottom: 0px solid gray;		
}
.columnb {        
    vertical-align: top;
	border: 0px solid gray;
	padding: 4px;
	border-left:0px solid gray;
	border-bottom: 0px solid gray;
}
.no, .jdpdf, .np, .abmet {
	border-bottom: 1px solid gray;	
	font-weight: bold;	
}
.no{
	width: 2%;
}
.jdpdf{
	width: 18%;
}
.np{
	width: 14%;			
}
.abmet{
	width: 30%;			
}
.hd{
	display: none;
}
.hds{
	display: block;
	font-weight: bold;
}

JavaScript untuk mengubah class dari kolom menjadi baris (Fungsi js yang isinya jquery)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function ctrow(){
    	//--- Ganti class --columnx-- dengan class --column--
    	$(".column").addClass('columnb');
    	//--- Hapus class --columnx-- yang terdapat pada semua --div--
		$("div").removeClass("column");
		//--- Ubah class --row-- menjadi --rowb--
		//--- Show Garis Pembatas ------------
		$(".row").addClass('rowb');
		$(".row").removeClass("row");
		//--- Hide Head of Column
		$("#hdr").hide();

		//--- Show Sub Judul ------			
		$(".hd").addClass('hds');
		$(".hd").removeClass("hd");
}
function rowtc(){
	    //--- Ganti class --columnx-- dengan class --column--
    	$(".columnb").addClass('column');
    	//--- Hapus class --columnx-- yang terdapat pada semua --div--
		$("div").removeClass("columnb");
		//--- Ubah class --row-- menjadi --rowb--
		//--- Show Garis Pembatas ------------
		$(".rowb").addClass('row');
		$(".rowb").removeClass("rowb");
		//--- Show Head of column ----
		$("#hdr").show();

		//--- Hide sub judul ----
		$(".hds").addClass('hd');
		$(".hds").removeClass("hds");
}

JQuery untuk mengubah class dari kolom menjadi baris (bedanya dengan js diatas hanya pada fungsi untuk memanggil)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(document).ready(function(){
    $("#rtc").click(function(){
    	//--- Ganti class --columnx-- dengan class --column--
    	$(".columnb").addClass('column');
    	//--- Hapus class --columnx-- yang terdapat pada semua --div--
		$("div").removeClass("columnb");
		//--- Ubah class --row-- menjadi --rowb--
		//--- Show Garis Pembatas ------------
		$(".rowb").addClass('row');
		$(".rowb").removeClass("rowb");
		//--- Show Head of column ----
		$("#hdr").show();

		//--- Hide sub judul ----
		$(".hds").addClass('hd');
		$(".hds").removeClass("hds");		
    });

    $("#ctr").click(function(){
    	//--- Ganti class --columnx-- dengan class --column--
    	$(".column").addClass('columnb');
    	//--- Hapus class --columnx-- yang terdapat pada semua --div--
		$("div").removeClass("column");
		//--- Ubah class --row-- menjadi --rowb--
		//--- Show Garis Pembatas ------------
		$(".row").addClass('rowb');
		$(".row").removeClass("row");
		//--- Hide Head of Column
		$("#hdr").hide();

		//--- Show Sub Judul ------			
		$(".hd").addClass('hds');
		$(".hd").removeClass("hd");
    });	

});

DEMO (ubah kolom kebaris)

Column | Rows | JF-Column | JF-Rows |

No.

JUDUL

PENULIS

ABSTRAK

METODE

FILE

NO : 1.

JUDUL : Judul 1

PENULIS : Penulis 1

ABSTRAK : Abstrak 1

METODE : Metode 1

FILE : File 1

NO : 2.

JUDUL : Judul 2

PENULIS : Penulis 2

ABSTRAK : Abstrak 2

METODE : Metode 2

FILE : File 2

NO : 3.

JUDUL : Judul 3

PENULIS : Penulis 3

ABSTRAK : Abstrak 3

METODE : Metode 3

FILE : File 3

Examples Eight ( Arabic Style )

Contoh untuk style arabic :

Al-Allamah Ubaid Al-Jabiry hafizhahullah berkata:

ﺇﺫَﺍ ﻛﺎﻥ ﻓﻲ ﺍﻟﻤَﺴﺠﺪ ﻣﺼَﺎﺣﻒ ﻓﻼ ﺗﻨْﺒﻐﻲ ﺍﻟﻘﺮَﺍﺀﺓ ﺑﺎﻟﻬَﺎﺗﻒ ﻭﺃَﻧﺎ ﺃﻛْﺮﻩ ﺫﻟﻚ ﻷَﻥ ﺍﻟﻤﺼﺤﻒ ﻳﺘﻌﺒﺪ ﺑِﺤﻤﻠِﻪ ﻭﺍﻟﻨﻈَﺮ فيه ﻭﺍﻟﻬَﺎﺗﻒ ﻟﻴْﺲ ﻛَﺬﻟﻚ ﻭﻗَﺪ ﻳُﺘﺮﺗّﺐ ﻋﻠﻰ ﺫَﻟﻚ ﻫُﺠﺮﺍﻥ ﺍﻟﻤَﺼﺎﺣﻒ ﻭﺍﻟﺰّﻫﺪ ﻓِﻴﻬﺎ .

Jika di masjid ada mushaf-mushaf al-Qur'an maka tidak sepantasnya membaca al-Qur'an dengan HP. Dan aku membenci hal itu, karena mushaf itu, membawanya dan melihat kepadanya itu termasuk ibadah, sementara HP itu tidak demikian. Dan terkadang hal itu akan berakibat mushaf-mushaf ditinggalkan dan tidak dimanfaatkan.

Examples Nine ( Video Local)

Contoh untuk memainkan video MP4 local dengan html :

SCRIPT :

1
2
3
<video width="600" controls>
  <source src="reff/Lightning-Exclusive-Nasheed-By_ Ahmad-Al-Muqit.mp4" type="video/mp4">
</video>

DEMO :

Contoh untuk memainkan video WEBM local dengan html :

SCRIPT :

1
2
3
<video width="600" controls>
	<source src="reff/nasheed--amaman-junod-alfeda.webm" type="video/webm">
</video>

DEMO :

Contoh untuk memainkan video Secara otomatis dan berulang :

1
2
3
<video width="600" controls autoplay loop >
  <source src="reff/Lightning-Exclusive-Nasheed-By_ Ahmad-Al-Muqit.mp4" type="video/mp4">
</video>

Embed Youtube Loop :

1
2
3
4
5
<iframe width="560" height="315" 
	src="https://www.youtube.com/embed?listType=playlist&list=PLnoTfAA_jyrgySNpyxOc1Eo6Oob5_jwCo&autoplay=1&loop=1" 
	frameborder="0" 
	allowfullscreen>
</iframe>

Demo :

Sumber dari :

Kategori : Examples, Post by : admin