Home
All Post
Links
About
Penelitian

Example Page

Ref lain :

Example Two ( Image and Var )

Foto Cantik posisi kiri

image-title-here











Test Image posisi kanan

image-title-here










Use SPAN posisi kiri

image-title-here











Variabel :

  1. page.id : /Example-page
  2. page.url : /Example-page
  3. page.path : _posts/2017-04-08-Example-page.md
  4. site.url : https://abuisa.github.io
  5. site.baseurl :
  6. 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

  1. one
  2. two
  3. three
  4. four
  5. alsjdf
  6. aksjdf

Examples Five ( loop )

Contoh Mengambil semua Kategori :

Contoh penggunaan For with br

    1
    2
    3

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