Skip to content Skip to sidebar Skip to footer

Cara Membuat Tema Wordpress dan blogger Sendiri

Membuat tema WordPress maupun blogspot sendiri masih menjadi permasalahan yang membingungkan bagi orang yang mempunyai keinginan besar untuk memiliki sebuah website ditambah dengan tampilan yang cantik dan unik. 
Cara-Membuat-Template-Website

Ternyata hal ini tidak terlalu sulit seperti yang diperbincangkan oleh banyak orang-orang.  Banyak dari beberapa orang yang hanya terlalu fokus pada satu hal saja untuk mendapatkan hal ini.

Cara membuat template website

Langkah yang dapat anda ambil adalah dengan merujuk beberapa referensi yang dapat anda gunakan untuk mendapatkan template wordpress yang unik dan menarik sehingga hal ini dapat menjadi nilai tambah karena milik anda tidaklah pasaran. 

Langkah yang dapat anda lakukan adalah dengan cara membuat tema wordpress sendiri dengan langkah yang harus lalui memang dari yang paling dasar dahulu.

Setelah anda memilih tema yang akan anda gunakan dan sudah sesuai dengan dominan website yang anda kelola, maka anda juga dapat memadukan tema wordpress yang sudah anda persiapkan dengan hasil karya sendiri dengan framework CSS bootstrap untuk menjadikan fitur-fitur yang ada di bootstrap dapat diaplikasikan di tema wordpress anda.

Salah satu jenis untuk memadukan dua kategori ini yaitu responsive di internet. Banyak orang yang mempertanyakan, bagaimana bisa menggabungkan banyak hal seperti ini diterapkan untuk membuat tema wordpress sendiri jika kita belum mengetahui kode wordpress sama sekali? 

Sebenarnya hal ini tidak perlu terlalu anda khawatirkan bagi pemula yang masih belum terlalu mendalaminya. 

Untuk mengatasi masalah pembuatan web seperti ini sebaiknya anda menghindari rasa panik dan khawatir, tetap optimis dengan cara terus mencoba berbagai langkah yang ada.

Langkah Membuat Tema Wordpress Untuk Pemula

Setelah persiapan tools, installasi, dan konfigurasi sudah anda persiapkan sebaik mungkin, langkah awal yang diperlukan dalam membuat tema wordpress adalah membuat sebuah folder yang terdapat dua file diantaranya index.php dan style.css.

Langkah pertama dengan membuat folder

Kemudian buatlah sebuah file kosong php dan beri nama “index.php” di dalam folder awal yang telah anda buat. Buatkan file css “style.css” masih di dalam folder pertama, kemudian isi file tersebut dengan kode untuk dapat disimpan

Pilih menu Appearance > tema. Anda dapat memilih tema yang anda sukai dan sesuai keinginan, Kemudian anda dapat mengaktifkan dengan klik tombol Active

Jika anda sudah menyelesaikan step yang ada diatas, maka langkah awal membuat tema wordpress sendiri sudah berhasil anda lakukan. 

Salah satunya dengan membuat desain tema. Namun, anda dapat mengikuti beberapa tips yang bisa anda jadikan referensi untuk membuat tema wordpress.

Tips Untuk Membuat Tema Wordpress

Pada kode dan fungsi yang sebelumnya meminta konfirmasi, anda dapat meng-copy pada salah satu diantara keduanya, kemudian tekan paste dan lakukan pencarian di google untuk menambah yang lain untuk fungsi pengetahuan baru.

Untuk anda yang memiliki banyak pertanyaan dan ingin mendiskusikan kode lainnya, manfaat kolom komentar dan bergabung dengan para komentator dengan bahasa yang sopan dan baik

Like beberapa Fans Page yang menjelaskan hal mengenai membuat tema wordpress sendiri, berikut ini saya tampilkan kode penting dalam membuat template website:

Setingan awal Setelah menginstal tema, ini adalah pengaturan minimun untuk membuat semua widget berfungsi dengan baik di tema ini.

Kode Menu Navigasi

Menyiapkan menu Untuk Mengedit Menu di tema ini Anda dapat mengikuti langkah ini:

<ul class = 'sf-menu' id = 'menunav'>
  <li> <a class='home' expr:href='data:blog.homepageUrl'> Beranda </a> </li>
  <li> <a href='#'> About </a> </li>
  <li> <a href='#'> Arsip </a> </li>
  <li> <a href='#'> Contact </a> </li>
  <li> <a href='#'> Dengan Sub Menu </a>
    <ul>
      <li> <a href='#'> Sub Menu </a> </li>
      <li> <a href='#'> Sub Sub Menu </a>
        <ul>
          <li> <a href='#'> Sub Menu </a> </li>
          <li> <a href='#'> Sub Menu </a> </li>
          <li> <a href='#'> Sub Menu </a> </li>
          <li> <a href='#'> Sub Menu </a> </li>
        </ul>
      </li>
      <li> <a href='#'> Sub Menu </a> </li>
      <li> <a href='#'> Sub Menu </a> </li>
    </ul>
  </li>
  <li> <a href='#'> Kesalahan 404 </a> </li>
</ul>

Catatan Ubah tanda # dengan tautan URL  halaman Anda, kode di atas berfungsi untuk membuat menu navigasi di halaman website anda. 

Kode iSosial Media

Selanjutnya Mengatur Ikon media Sosial, Untuk Mengedit Ikon Sosial di tema ini Anda dapat mengikuti langkah kode berikut ini:

<ul>
  <li> <a target='_blank' class='fbx' href='#' title='Facebook'> facebook </a> </li>
  <li> <a target='_blank' class='twix' href='#' title='Twitter'> twitter </a> </li>
  <li> <a target='_blank' class='goex' href='#' title='youtube'> youtube</a> </li>
  <li> <a target='_blank' class='linx' href='#' title='Linkedin'> Linkedin </a> </li>
  <li> <a target='_blank' class='pinx' href='#' title='Pinterest'> Pinterest </a> </li>
  <li> <a target='_blank' class='drix' href='#' title='Dribble'> Dribble </a> </li>
  <li> <a target='_blank' class='vmex' href='#' title='Vimeo'> Vimeo </a> </li>
  <li> <a target='_blank' class='rssx' href='#' title='RSS'> RSS </a> </li>
</ul>

Catatan Ubah # dengan link URL Media Sosial Anda.

Kode di atas berfungsi untuk menampilkan informasi akun media sosial anda, terserah anda mau menempatkan di sebelah mana media sosial anda. 

Kode postingan unggulan

Posting Unggulan Otomatis (Peragaan Slide Dari Umpan JSON) Untuk menambahkan widget Featured Post, ikuti langkah dan Salin Kode ini:

<div id = "featpost"> </div>
<script type = 'text / javascript'>
jQuery ("# ​​featpost"). AutofeaturedPost ({
MaxPost: 5
});
</script>

(Default) Lengkapi Javascript untuk memanggil Posting Unggulan Otomatis seperti kode ini:
jQuery ("# ​​ID_Place_To_Load_Plugin") .AutofeaturedPost ({
blogURL: "",
MaxPost: 4,
ImageSize: 650,
Panjang ringkasan: 150,
RandompostActive: benar,
pBlank: "http://nulisartikel.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",
tagName: false
});

Properti
Deskripsi
 
blogURL
URL blog Anda atau Anda dapat membiarkannya kosong untuk memuat di mana skrip ini dimuat.

MaxPost
Jumlah artikel maksimal akan ditampilkan di Featured Post

Ringkasan panjang
Jumlah karakter ringkasan untuk ditampilkan.

Ukuran gambar
Ukuran Posting Gambar (dalam piksel)

RandompostActive
default benar. Ini akan menampilkan artikel dengan cepat. Jika ingin menampilkan Recent Post ubah saja menjadi false

pBlank
Gambar cadangan jika posting tidak memiliki penyimpanan gambar di blogspot atau web picasa

tagName
Jika Anda ingin menampilkan Featured Post oleh Label. Contoh: untuk menampilkan posting unggulan dari Label toko online cukup tulis seperti ini tagName: "toko online"
Membuat Konten Unggulan Posting, Posting Label Vertikal, Posting Label Horizontal, Posting Label Slider dan Halaman Kesalahan
Tampilan Slide Manual (Menggunakan Widget Gambar) ATAU Posting Unggulan Otomatis (Tampilan Slide Dari Umpan JSON)

Pertunjukan Slide Manual

Untuk Membuat Peragaan Slide Manual, ikuti langkah ini
di Dashbord Blogger Klik Layout
Di Area Widget Rangkai Slide Manual, Klik Tambah Gadget
Pilih Widget Gambar
Isi Dengan Judul Gambar
Uraian gambar; kesan
Link Ketika Gambar atau Judul Diklik
Cari Gambar Anda
Hapus centang menyusut agar pas
NB: Ukuran Gambar yang Direkomendasikan 650px x 320px

Klik Simpan
Jika You Whan Show 5 image, lakukan langkah ini 5 kali

Posting berdasarkan Label (Slider dan Vertical Post)

Slider Post

Untuk menambahkan widget Post by Label (Slider Post) ikuti langkah dan
Salin Kode ini:

<div id = "webdespost"> </div>
<script type = 'text / javascript'>
jQuery ("# ​​webdespost"). RecentPostbyTag ({
postType: "s",
MaxPost: 5,
ImageSize: "s200-p",
tagName: "Desain Web"
});
</script>

Klik Simpan
Catatan: Dalam tagName adalah nama Label Post yang akan ditampilkan. pada sample ini adalah "Sports" artinya akan menampilkan artikel dari label Sports.

Posting Vertikal

Untuk menambahkan widget Post by Label (Vertical Post), ikuti langkah dan
Salin Kode ini:

<div id = "musicpost"> </div>
<script type = 'text / javascript'>
jQuery ("# ​​musicpost"). RecentPostbyTag ({
postType: "v",
MaxPost: 4,
tagName: "Musik"
});
</script>

Klik Simpan
Catatan: Dalam tagName adalah nama Label Post yang akan ditampilkan. pada sample ini adalah "Music" artinya akan menampilkan artikel dari label Music.

Pos Horisontal

Untuk menambahkan widget Post by Label (Horizontal Post) ikuti langkah dan
Salin Kode ini:

<div id = "sportpost"> </div>
<script type = 'text / javascript'>
jQuery ("# ​​sportpost"). RecentPostbyTag ({
postType: "h",
MaxPost: 4,
tagName: "Olahraga"
});
</script>

Klik Simpan
Catatan: Dalam tagName adalah nama Label Post yang akan ditampilkan. pada sample ini adalah "Sports" artinya akan menampilkan artikel dari label Sports.

Slider, Horizontal Post dan Vertical Post digunakan oleh satu Javascript Script dan Anda dapat melihat Kode Default untuk Memanggil Plugin ini terlihat seperti di bawah ini:

jQuery ("# ​​ID_Place_To_Load_Plugin"). RecentPostbyTag ({
blogURL: "",
MaxPost: 4,
FirstImageSize: "s220-p",
ImageSize: "s80-p",
Panjang ringkasan: 100,
ShowDesc: false,
ShowDate: true,
ShowComment: benar,
Acak: salah,
postType: "v",
pBlank: "http://nulisartikel.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Ags", "Sep", "Oct", "Nov", "Des" ],
tagName: false
});

Properti
Deskripsi
 
blogURL
URL blog Anda atau biarkan kosong untuk memuat JSON tempat skrip ini dimuat.
MaxPost
Jumlah artikel maksimum akan ditampilkan
Ringkasan panjang
Jumlah karakter ringkasan untuk ditampilkan.
Ukuran gambar
Format Gambar menggunakan format gambar Picasa / Blogspot:
Untuk membuat gambar persegi (200x200) Format Gambar gunakan seperti ini "s200-c" atau "s200-p". gambar akan dipotong untuk membuatnya persegi.

Format Gambar Blogspot juga terlihat seperti ini: "s200" (jika lebar lanskap gambar 200px. Jika tinggi Potret gambar 200px), "w200" (lebar gambar 200px) atau "h200" (tinggi gambar 200px)

FirstImageSize

Format Gambar menggunakan format gambar Picasa / Blogspot:
Untuk membuat gambar persegi (200x200) Format Gambar gunakan seperti ini "s200-c" atau "s200-p". gambar akan dipotong untuk membuatnya persegi.

Format Gambar Blogspot juga terlihat seperti ini: "s200" (jika lebar lanskap gambar 200px. Jika tinggi Potret gambar 200px), "w200" (lebar gambar 200px) atau "h200" (tinggi gambar 200px)

ShowDesc

Untuk Menampilkan Semua Deskripsi (Cukup Kerjakan PostType Horizontal dan Vertikal). Default-nya salah
ShowDate
Untuk Menampilkan Tanggal: Default benar
ShowComment
Untuk menampilkan Komentar: Default adalah benar (Bekerja pada Jenis Pos Horizontal dan Vertikal).
Acak
Untuk membuat post ramdom: Default is false
postType
Ada tiga jenis PostType: "v" (Posting vertikal), "h" (Posting horizontal), dan "s" (Posting Slider)
pBlank
Gambar cadangan jika posting tidak memiliki gambar
MonthNames
Format nama bulan
tagName
Jika Anda ingin menampilkan Post by the Label. Contoh: untuk menampilkan kiriman dari Label Olahraga tulis saja seperti ini tagName: "Olahraga"

Kode untuk membuat halaman eror

Untuk mengubah teks di Halaman Kesalahan, 
Gulir ke bawah dan Temukan Kode ini:

<div class = 'error-custom'>

<h2> 404 Tidak Ditemukan </h2>
<p class = 'error-body'> Maaf, kami tidak dapat menemukan halaman yang Anda cari. <br/>
Ini mungkin terjadi jika Anda salah memasukkan url situs atau halaman ini tidak ada lagi. </p>

<p> Anda dapat mencoba menelusuri halaman lagi atau kembali ke beranda </p>

<form action = '/ search' id = 'searchform' method = 'get'>
<input id = 's' name = 'q' onblur = 'if (this.value == "") {this.value = "Search ...";}' onfocus = 'if (this.value == "Search ...") { this.value = "";} 'type =' text 'value =' Search ... '/>
<input id = 'searchsubmit' type = 'submit' value = 'Go' />
</form>

</div>
Ubah bahasa Anda yang mana

Konfigurasi Widget Ringkasan, Muat Lebih Banyak dan Mode Tampilan Ringkasan dan Muat Lainnya
(Default) Lengkapi Javascript untuk mengatur mode tampilan seperti kode ini:
viewMode ({
viewmodedefault: "kisi",
juru masak: "daftar",
cookiegrid: "grid"
});
Properti
Deskripsi

viewmodedefault

Ini akan menyiapkan mode tampilan: Anda dapat memilih "kisi" untuk menampilkan entri Anda pada mode kisi atau "daftar" untuk menampilkan entri Anda pada mode daftar juru masak Nama cookie mode daftar. 

Ini akan disimpan di browser untuk membuat jika pengguna mengklik tombol mode daftar.
cookiegrid.dll

Nama cookie mode kisi. Ini akan disimpan di browser untuk membuat jika pengguna mengklik tombol mode Grid.

(Default) Lengkapi Javascript untuk mengatur Muat Lebih Banyak Posting seperti kode ini:

loadMorePost ({
thumbnailSize: "s200-p",
ringkasanPanjang: 300,
MoreText: "Muat lebih banyak posting",
viewmodedefault: "kisi",
juru masak: "daftar",
cookiegrid: "grid",
BackupImage: "http://nulisartikel.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif"
});
Properti
Deskripsi
 
ukuran thumbnail
Format Gambar menggunakan format gambar Picasa / Blogspot:
Untuk membuat gambar persegi (200x200) Format Gambar gunakan seperti ini "s200-c" atau "s200-p". gambar akan dipotong untuk membuatnya persegi.
Format Gambar Blogspot juga terlihat seperti ini: "s200" (jika lebar lanskap gambar 200px. Jika tinggi Potret gambar 200px), "w200" (lebar gambar 200px) atau "h200" (tinggi gambar 200px)
summaryLength
Tentukan panjang ringkasan
MoreText
Muat lebih banyak teks untuk ditampilkan: default: "Muat lebih banyak posting"
viewmodedefault
Ini akan menyiapkan mode tampilan: Anda dapat memilih "kisi" untuk menampilkan entri Anda pada mode kisi atau "daftar" untuk menampilkan entri Anda pada mode daftar (buat setelan yang sama dengan javascript mode tampilan)
juru masak
Nama cookie mode daftar. Ini akan disimpan di browser untuk membuat jika pengguna mengklik tombol mode daftar. (buat nama yang sama dengan javascript mode tampilan)
cookiegrid.dll
Nama cookie mode kisi. Ini akan disimpan di browser untuk membuat jika pengguna mengklik tombol mode Grid. (buat nama yang sama dengan javascript mode tampilan)
BackupImage
Gambar cadangan jika posting tidak memiliki gambar.

Kode ukuran gambar dan panjang artikel 

Untuk mengubah ukuran gambar dan panjang Ringkasan ikuti langkah ini.

var configSummary = {
    thumbnailSize: "s200-p", // Tentukan ukuran thumbnail posting
    summaryLength: 300, // Tentukan panjang ringkasan
    BackupImage: 'http://nulisartikel.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif' // Gambar cadangan jika posting tidak memiliki gambar
};
Properti
Deskripsi
 
ukuran thumbnail
Format Gambar menggunakan format gambar Picasa / Blogspot:
Untuk membuat gambar persegi (200x200) Format Gambar gunakan seperti ini "s200-c" atau "s200-p". gambar akan dipotong untuk membuatnya persegi.
Format Gambar Blogspot juga terlihat seperti ini: "s200" (jika lebar lanskap gambar 200px. Jika tinggi Potret gambar 200px), "w200" (lebar gambar 200px) atau "h200" (tinggi gambar 200px)
summaryLength
Tentukan panjang ringkasan
BackupImage
URL gambar cadangan jika posting tidak memiliki gambar
Muat Lebih Banyak Posting (Halaman Utama)
Untuk mengedit Muat Lebih Banyak Teks, ubah ukuran gambar dan panjang Ringkasan ikuti langkah ini.
Pada Template Klik Dashbord Blogger
Klik Edit HTML
Gulir ke bawah dan Temukan Kode ini:


loadMorePost ({
thumbnailSize: "s200-p",
ringkasanPanjang: 300,
MoreText: "Muat lebih banyak posting"
});
Properti
Deskripsi
 
ukuran thumbnail
Tentukan ukuran thumbnail posting
summaryLength
Tentukan panjang ringkasan
MoreText
Muat lebih banyak teks untuk ditampilkan: default: "Muat lebih banyak posting"

ukuran gambar dan panjang ringkasan pada skrip ringkasan dan Muat lebih banyak skrip harus memiliki nilai yang sama
Mode Tampilan (Halaman Utama)
Untuk mengedit Mode Tampilan dari mode Kisi ke Mode Daftar, ikuti langkah ini.
Pada Template Klik Dashbord Blogger
Klik Edit HTML
Gulir ke bawah dan Temukan Kode ini:


viewMode (); (Default) Javascript Lengkap untuk mengatur mode tampilan seperti kode ini:
viewMode ({
viewmodedefault: "kisi",
juru masak: "daftar",
cookiegrid: "grid"
});
Properti
Deskripsi
 
viewmodedefault
Ini akan menyiapkan mode tampilan: Anda dapat memilih "kisi" untuk menampilkan entri Anda pada mode kisi atau "daftar" untuk menampilkan entri Anda pada mode daftar
juru masak
Nama cookie mode daftar. Ini akan disimpan di browser untuk membuat jika pengguna mengklik tombol mode daftar.
cookiegrid.dll
Nama cookie mode kisi. Ini akan disimpan di browser untuk membuat jika pengguna mengklik tombol mode Grid.

Navigasi Halaman, jika Anda ingin mengubah Muat lebih banyak Posting dengan Navigasi halaman, ikuti langkah ini.

viewMode ();
loadMorePost ({
  thumbnailSize: "s200-p",
  SummaryLength: 300
}); dan kode ini:

viewMode ({
  viewmodedefault: 'list',
  juru masak: 'list1',
  cookiegrid: 'grid1'
});
loadMorePost ({
  viewmodedefault: 'list',
  juru masak: 'list1',
  cookiegrid: 'grid1',
  thumbnailSize: "s200-p",
  SummaryLength: 300
}); Ubah Semua Dengan Kode Ini:

viewMode ();
pageNavi ({
halaman pos: 6,
halaman nomor: 3,
LatestText: "Latest Post"
});
Properti
Deskripsition
 
postperpage
Nomor Posting Akan muncul jika Nomor Halaman Klik berikutnya. Catatan harus sama dengan "Tampilkan paling banyak" di Setelan Blogger
numshowpage
Nomor Halaman Nomor akan Ditampilkan
Teks Terbaru
Teks Terbaru. Ini akan bekerja jika Nomor Halaman bukan 1

komentar terbaru, Untuk menambahkan widget komentar terbaru, ikuti langkah dan salin Kode ini:


<div id = "rcentcomnets"> </div>
<script type = 'text / javascript'>
jQuery ("# ​​rcentcomnets"). RecentComments ();
</script>
Klik Simpan
(Default) Lengkapi Javascript untuk memanggil Komentar Terbaru seperti kode ini:
jQuery ("# ​​ID_Place_To_Load_Plugin"). RecentComments ({
blogURL: "",
JumlahKomentar: 4,
karakter: 100,
avatarSize: 50,
Showimage: benar,
defaultAvatar: "http://nulisartikel.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Ags", "Sep", "Oct", "Nov", "Des" ],
maxfeeds: 50,
adminBlog: ""
});
Properti
Deskripsi
 
blogURL
URL blog Anda atau Anda dapat membiarkannya kosong untuk memuat di mana skrip ini dimuat.
numComments
jumlah maksimum komentar terbaru
karakter
Jumlah karakter ringkasan untuk ditampilkan. jika diatur 0, ringkasan tidak akan ditampilkan
avatarSize
Ukuran thumbnail gambar / ukuran avatar
Showimage
Tampilkan atau sembunyikan avatar. Nilai: benar atau salah
defaultAvatar
Gambar cadangan jika penulis komentar tidak memiliki gambar avatar
MonthNames
Format nama bulan
maxfeeds
Pakan maksimum untuk dimuat
adminBlog
Kontrol untuk menampilkan atau menyembunyikan komentar penulis / admin. contoh: jika anda tidak ingin menampilkan komentar anda, cukup tulis nama blogger anda seperti ini adminBlog: "nulis artikel"

Hasil Pencarian JSON, Untuk mengedit Teks Hasil Pencarian JSON Anda dapat mengikuti langkah ini dan Temukan Kode ini:


searchxx ({summaryLength: 100, scrthumbSize: 50});
Jika Anda ingin mengubahnya. Anda dapat melihat Script default lengkap di bawah ini:
(Default) Lengkapi Javascript untuk memanggil Hasil Pencarian JSON seperti kode ini:
searchxx ({
blogURL: "",
srcBlank: "http://nulisartikel.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
findText: "Hasil pencarian untuk kata kunci",
NotfindText: "Tidak ada hasil!",
Showthumb: benar,
LoadingText: "Mencari ...",
SummaryLength: 100,
scrthumb Ukuran: 50
});
Properti
Deskripsi
 
blogURL
URL blog Anda atau Anda dapat membiarkannya kosong untuk memuat di mana skrip ini dimuat.
srcBlank
Gambar cadangan jika posting tidak memiliki gambar
Temukan teks
Kalimat jika ditemukan posting dengan kata kunci
NotfindText
Teks jika tidak ada postingan
Tunjukkan jempol
Tampilkan atau sembunyikan thumbnail posting. Nilai: benar atau salah
MemuatTeks
Teks untuk ditampilkan pergi mencari
summaryLength
Panjang karakter ringkasan
scrthumbSize
Ukuran gambar thumbnail, ukuran dalam piksel.

Emoticon, Untuk mengedit Emoticon Text Anda dapat mengikuti langkah dan salin Kode ini:


emotikonx ({
emoRange: "# comments p, div.emoWrap",
putEmoAbove: "iframe # comment-editor",
topText: "Klik untuk melihat kode!",
emoMessage: "Untuk memasukkan emotikon, Anda harus menambahkan setidaknya satu spasi sebelum kode."
});
Jika Anda ingin mengubahnya. Anda dapat melihat Script default lengkap di bawah ini:
Properti
Deskripsi
 
emoRange
Di mana emotikon akan ditampilkan / berfungsi
putEmoAbove
Di mana sampel emotikon akan ditempatkan
teks atas
Kalimat di bawah contoh emotikon
emoMessage
Kalimat di bawah contoh emotikon dan kotak peringatan

Posting terkait 

Untuk mengedit Emoticon Text Anda dapat mengikuti langkah dan salin Kode ini:

relatedPostsWidget ();
Jika Anda ingin mengubahnya. Anda dapat melihat Script default lengkap di bawah ini:
(Default) Lengkapi Javascript untuk memanggil Posting Terkait seperti kode ini:
relatedPostsWidget ({
blogURL: "",
maxPosts: 5,
maxTags: 5,
maxPostsPerTag: 5,
rlt_summary: 100,
rlt_thumb: 200,
ShowDate: true,
relatedTitle: "Posting Terkait",
recentTitle: "Kiriman Terbaru",
readMoretext: "[...]",
rlpBlank: "http://nulisartikel.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif"
});
Properti
Deskripsi
 
blogURL
URL blog Anda atau Anda dapat membiarkannya kosong untuk memuat di mana skrip ini dimuat.
maxPosts
Jumlah maksimum artikel akan ditampilkan (jika Related Post)
maxTags
Tag / Label Maksimum akan dimuat
maxPostsPerTag
Maksimal posting setiap tag / label akan ditampilkan (maksimal posting terbaru jika artikel tidak memiliki tag / label)
rlt_summary
Panjang karakter ringkasan
rlt_thumb
Ukuran gambar thumbnail, ukuran dalam piksel
relatedTitle
Judul jika artikel memiliki posting terkait
recentTitle
Judul jika artikel tidak memiliki posting terkait (akan memuat posting terbaru)
readMoretext
Baca Lebih Banyak Teks
rlpBlank
Gambar cadangan jika posting tidak memiliki gambar.

Membuat halaman statis

Membuat halaman statis di website, caranya cukup masuk ke halaman dan beralih ke mode html dan masukkan kode berikut:

<div class="tabbed-toc" id="tabbed-toc"><span class="loading">Memuat…</span></div><script>/*!
 * Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
 * Free for change but keep the original attribution.
 * URL: https://plus.google.com/108949996304093815163/about
 */
var tabbedTOC={blogUrl:"https://nulisartikel.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">New!</em>'};
!function(a,b){var c=(new Date).getTime(),d={blogUrl:"http://dte-feed.blogspot.com",containerId:"tabbed-toc",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' &ndash; <em style="color:red;">Baru!</em>'};if("undefined"==typeof tabbedTOC)tabbedTOC=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTOC[e]?tabbedTOC[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="active-tab"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="toc-line"></span><ul class="toc-tabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="toc-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="toc-content">';for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"&hellip;":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document);</script>

Ganti link yang berwarna merah menjadi link halaman anda.

Kustomisasi template akan berfungsi jika Template Seluler Diaktifkan sebelum mengunggah Tema Setelah menyesuaikan template Anda, Anda dapat menonaktifkan  Mobile Template tetapi itu akan membuat Kustomisasi mobile tidak berfungsi seperti penjelasan berikut ini:


Properti, Deskripsi, Warna utama, Ini Akan Mengubah warna latar belakang Header, Warna Latar Belakang Area Konten, Warna Latar Belakang Footer dan Header dan Warna Perbatasan.

Area Header, Ini akan mengubah Jenis Font Judul Blog, jenis font Deskripsi Blog, Warna Judul Blog dan Warna Deskripsi Blog.

Warna Menu, Ini akan mengubah warna teks Menu, Warna Top boreder, Warna Latar Sub Menu dan warna latar Sub Menu.

Area Posting dan Sidebar, Ini akan Mengubah Warna Latar Belakang, Warna Tepi, Warna Teks Tajuk dan Tombol, Tanggal, Warna Latar Belakang Detail Posting Unggulan.

Area Footer, Ini akan mengubah Warna Teks, Warna Tepi, dan Warna Teks Judul.

Tombol dan Unggulan, Ini akan mengubah warna teks Button dan Featured Detail Post (Featured Post Description)

Warna teks, Ini akan mengubah warna teks utama

Warna Tautan, Ini akan mengubah warna link

Tautan Warna Hover, Ini akan mengubah warna link Hover (saat mouse hover / mouse di atas link)

Warna Tautan Dikunjungi, Ini akan mengubah warna link yang dikunjungi (jika link itu sudah dikunjungi)

Warna Teks Sidebar, Ini akan mengubah Warna Teks Sidebar

Font Teks, Ini akan mengubah jenis font area utama

Font Judul, Ini akan mengubah semua jenis font heading

Itulah penjelasan sederhana tentang pembuatan template website, beserta kode dan fungsinya, tetapi saya minta maaf karena artikel dan kode masih acak-acakan

Terima kasih banyak telah membaca artikel tentang tema ini. Jika anda ingin bertanya, saya akan dengan senang hati membantu Anda jika Anda memiliki pertanyaan terkait dengan artikel tema ini.

Tidak ada jaminan, tapi saya akan melakukan yang terbaik untuk membantu. Jika Anda memiliki pertanyaan yang lebih umum terkait dengan artikel tema ini Anda dapat mempertimbangkan untuk mengunjungi forum dan menanyakan pertanyaan Anda di bagian "halaman Contact", dan saya akan mengupdate status artikel ini jika ada yang baru di internet.

Post a Comment for "Cara Membuat Tema Wordpress dan blogger Sendiri"