Example Page
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
-
1
2
3
Loop tanpa br
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> |
<a href="#" id="ctr">Rows</a> |
<a href="#" onclick="rowtc()">JF-Column</a> |
<a href="#" onclick="ctrow()">JF-Rows</a> |
<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