0 Arsitektur Web

 

       Arsitektur Website adalah suatu pendekatan terhadap desain dan perencanaan situs yang, seperti
arsitektur itu sendiri, melibatkan teknis, kriteria estetis dan fungsional. Seperti dalam arsitektur tradisional, fokusnya adalah benar pada pengguna dan kebutuhan pengguna. Hal ini memerlukan perhatian khusus pada konten web, rencana bisnis, kegunaan, desain interaksi, informasi dan desain arsitektur web. Untuk optimasi mesin pencari yang efektif perlu memiliki apresiasi tentang bagaimana sebuah situs Web terkait dengan World Wide Web.

            Sejak web perencanaan isi, desain dan manajemen datang dalam lingkup metode desain, Vitruvian tradisional tujuan komoditas, keteguhan dan kesenangan dapat memandu arsitektur situs, seperti yang mereka lakukan arsitektur fisik dan disiplin desain lainnya. Website arsitektur akan datang dalam ruang lingkup estetika dan teori kritis dan kecenderungan ini dapat mempercepat dengan munculnya web semantik dan web 2.0. Kedua ide menekankan aspek struktur informasi. Strukturalisme adalah sebuah pendekatan untuk pengetahuan yang telah dipengaruhi sejumlah disiplin akademis termasuk estetika, teori kritis dan postmodernisme. Web 2.0, karena melibatkan user-generated content, mengarahkan perhatian arsitek website untuk aspek-aspek struktur informasi.

Ada tiga standar utama untuk penerapan Web Service, Standar-standar ini mendukung pertukaran data berbasis XML. Tiga standar tersebut meliputi SOAP, WSDL, dan UDDI.

1. SOAP (Simple Object Access Protocol) adalah Suatu bahasa versi bebas dari protokol RPC (Remote Procedure Caoll) yang berguna untuk proses transaksi melalui HTTP standar.
2. WSDL (Web Services Description Language) adalah bahasa yang memungkinkan berbagai dokumen yang dibuat dalam aplikasi yang berbeda dapat berkomunikasi.
3. UDDI (Universal Description Discovery and Integration) adalah semacam direktori global untuk mengelola web services.

Teknik-teknik Membuat Website

Pada umumnya, ada dua jenis pilihan cara pembuatan konten website yang harus dipersiapkan, yaitu website statis atau website dinamis. 

1. Website statis adalah website yang hanya berisi file-file HTML dan file pendukung (misalnya gambar). Pada intinya, yang harus Anda lakukan adalah membuat dan mendesain file halaman-halaman website serta mengaitkan satu dengan lainnya lewat link agar bisa diakses dengan baik.

2. Adapun Website dinamis adalah website yang selain didesain melalui file-file HTML juga disertai dengan pemrograman web lebih lanjut. Ciri website yang dibuat dengan pemrograman antara lain ditandai dengan adanya fitur login, pengelolaan member, serta pengisian data halaman web melalui database.

Mendesain Website dengan Teks  Editor dan Visual Web Editor

Teknik membuat web paling dasar adalah menyiapkan file-file HTML. File-file ini didesain dan dihubungkan satu dengan lainnya secara terstruktur melalui link menu atau tombol navigasi. 

Pembuatan halaman web secara manual bisa dilakukan hanya dengan memakai program teks editor sederhana, misalnya Notepad. Yang diperlukan di sini adalah kemampuan untuk meramu tampilan teks dan gambar yang akan disajikan melalui pengkodean HTML. 

Jika Anda tidak menguasai teknik pengkodean HTML atau mengalami kesulitan untuk merangkai sejumlah halaman web dan file pendukungnya, Anda bisa memanfaatkan program Visual Web Editor. Contoh program jenis ini antara lain Microsoft Frontpage dan Dreamweaver. 

Melalui program Visual Web Editor, Anda tinggal menyusun teks, menyisipkan gambar, membuat link, dan sebagainya. Semua bisa Anda lakukan secara langsung tanpa harus menguasai teknik-teknik pengkodean HTML. Penggunaannya sangat praktis dan cepat, seperti saat mendesain dokumen melalui program pengolah kata. Bahkan, Anda juga bisa membuat halaman web menggunakan program pengolah kata seperti Microsoft Word sebagai Visual Web Editor Anda. 

File berupa kode HTML akan dihasilkan secara otomatis oleh program Visual Web Editor. Anda tinggal menempatkan file-file yang telah Anda desain beserta file pendukung seperti gambar ke hosting Anda. Website pun siap diakses pengunjung.

Metode pembuatan website menggunakan cara di atas sudah cukup memadai untuk sebuah website personal dan sederhana. Anda tinggal membuat halaman beranda, halaman profil, dan halaman-halaman informasi lainnya menjadi website yang utuh.

Mendesain Website dengan Pemrograman Web

Untuk kebutuhan pembuatan website tingkat lanjut, misalnya website berita, website e-commerce, dan website lain yang memiliki fitur kompleks, Anda harus menggunakan teknik pemrograman web. Jika Anda ingin membuat situs berita, tentunya sangat memakan energi jika setiap berita baru harus Anda buatkan file HTML-nya, lalu Anda sisipkan link-linknya di halaman lain agar berita terbaru bisa diakses, dan seterusnya.

Melalui website berbasis database, maka berbagai hal dapat dilakukan secara cepat dan dinamis. Tentunya, Anda harus memiliki skill pemrograman web dan database.

Bahasa pemrograman web yang lazim dipakai dewasa ini adalah PHP. Selain itu dikenal juga ASP.net dan JSP. Adapun database yang lazim digunakan adalahMySQL. Melalui kombinasi PHP dan MySQL, sebuah website dapat didesain untuk bisa digunakan sebagai media transaksi online, forum diskusi, dan lainnya, seperti berbagai jenis website yang lazim Anda temui di internet dewasa ini.

Membuat Website dengan CMS

Anda tidak ingin berkutat dengan masalah teknis pemrograman web dan database ? Anda tidak memiliki waktu untuk mempelajarinya ? selalu ada solusi !

Dewasa ini sudah banyak website siap pakai yang lazim disebut Content Management System (CMS). CMS adalah kerangka website yang telah diprogram dan didesain sedemikian rupa untuk keperluan tertentu. 

Dengan menggunakan CMS, Anda tidak perlu dipusingkan dengan masalah mendesain halaman web atau memprogram web dan databasenya. Yang perlu Anda lakukan hanyalah menempatkan file-file CMS ke hosting, menginstalnya melalui prosedur yang telah disediakan. Abrakadabra... website pun sudah jadi dan tinggal diisi.

CMS sangat beragam jenis dan fungsi penggunaannya. Anda pun dapat memperolehnya secara gratis di internet. Bahkan, jika Anda menggunakan jasa web hosting berbayar, puluhan jenis CMS siap Anda instal hanya dengan dua atau tiga kali klik !. 

Berikut contoh beberapa CMS populer dan peruntukannya :

• Joomla : untuk membuat portal, website serba guna dengan berbagai fitur dan kemampuan.
• Drupal : hampir serupa dengan Joomla.
• WordPress : untuk membuat website berbasis blog, hasilnya seperti pada situs wordpress.com.
• Moodle : untuk membuat web pembelajaran online.
• phpBB : untuk membuat website forum.
• OS Commerce : untuk membuat toko online.

Web Content

Web content adalah isi website Anda. Tanpa adanya file-file halaman web dan file pendukung, maka domain dan hosting yang telah Anda miliki tidak akan menampilkan apa-apa jika diakses. Ini seperti memiliki rumah baru yang sudah ada alamatnya tapi belum diisi perabot alias kosong.

Berbeda dengan domain dan hosting yang sangat mudah dimiliki serta tidak membutuhkan skill khusus, konten website membutuhkan penanganan dan skill khusus. Anda harus menyiapkan halaman web beserta file pendukungnya secara terstruktur agar berfungsi dengan baik, lalu menempatkannya di hosting Anda.

Model Generatif

       Probabilitas dan statistik, model generatif adalah model untuk menghasilkan data yang dapat diobservasi, biasanya diberikan beberapa parameter tersembunyi secara acak. Ini menentukan distribusi probabilitas bersama atas observasi dan urutan label. Model generatif yang digunakan dalam pembelajaran mesin baik untuk pemodelan data secara langsung (yaitu, pengamatan pemodelan menarik dari fungsi kepadatan probabilitas), atau sebagai langkah menengah untuk membentuk fungsi kepadatan probabilitas bersyarat. Sebuah distribusi bersyarat dapat dibentuk dari model generatif melalui aturan Bayes '.

Model Retorika

         Retorika berarti kesenian untuk berbicara baik (Kunst, gut zu reden atau Ars bene dicendi), yang dicapai berdasarkan bakat alam (talenta) dan keterampilan teknis (ars, techne), Dewasa ini retorika diartikan sebagai kesenian untuk berbicara baik, yang dipergunakan dalam proses komunikasi antarmanusia. Pada bahasa informatika model ini berarti berbicara antarmuka melalui jaringan internet melalui website seperti: YM, Facebook, Skype, dll.
  


Sumber :

• https://made21indra.wordpress.com/2015/03/28/arsitektur-web-dan-aplikasi-utama-konsep-dan-pengamanan-web/
• https://faris6593.blogspot.com/2013/03/arsitektur-web-dan-aplikasi-utamanya.html
• http://rivirodeo.blogspot.com/2015/05/pengolahan-web.html
• http://rakhapermanasblog.blogspot.com/2013/07/model-generatif-model-retorika-pada-web.html
•  

1 Cara Membuat Efek Salju Pada Blog

Kali ini saya akan membahas tentang Bloging, yaitu Cara Membuat Efek Salju Pada Blog ,namun sebelum saya cara membuat efek salju pada blog mungkin kamu ingin melihat hasil dari efek salju di blog yang sudah menggunakan script efek salju ini, agar kamu lebih yakin apakah script ini bekerja.

Untuk melihat efek salju di blog secara langsung silakan klik gambar di bawah ini

 

Bagaimana hasilnya?

Oke saya rasa tidak perlu panjang lebar, langsung saja ke topik utama, simak baik-baik ya.

  1.Klik Tata Letak

   2. Klik Tambah Gadget

   3. Pilih HTML/JavaScript

    4. Isi Dengan Kode Dibawah Ini

<script type="text/javascript" src="http://ahmad-rifai-tools.googlecode.com/files/salju-blog.ahmadrifai.net.js" /></script>

   5. Simpan

Karena salju itu warnanya putih maka efek salju di atas warnanya adalah putih, dan ini hanya cocok untuk blogger yang menggunakan template dengan warna gelap, seperti hitam, dsb. (Pokoknya yang bisa menampilkan efek salju yang berwarna putih).

Jika blog teman menggunakan template dengan warna putih seperti blog ini, maka script efek salju yang harus digunakan adalah yang script efek salju alternatif, silakan gunakan script berikut.

Kode Script Alternatif

<script type="text/javascript" src="http://ahmad-rifai-tools.googlecode.com/files/salju-blog.ahmadrifai.net.js" /></script>
<script type="text/javascript">

snowStorm.snowColor = '#99ccff';
snowStorm.flakesMaxActive = 96;
snowStorm.useTwinkleEffect = true;
</script>

Note: Pada Tulisan #99ccff Itu Adalah Code Hex Warna, Code Itu Bisa Diganti Sesuai Keinginan Anda (Jika Ingin Melihat Daftar Code Hex Klik Disini)

0 Cara Membuat Spoiler Pada Postingan Blog

Sebagian orang pastinya sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Sebelumnya kalau ada yang belum tahu apa itu spoiler, saya jelasin singkat saja. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. 

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutup itu (Spoiler). Oke langsung saja Cekidooot...

Cara Membuat Spoiler Pada Postingan Blog

1. Login ke Blogger 
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (Gambar atau Video) disini

 <br>
</div>
</div>
</div></div>

5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.

Spoiler:

Sekian kurang lebihnya mohon maaf, jika anda berkenan tolong follow blog ini, anda juga bisa request Software dan Tutorial ke saya dengan cara like dan comment di FP blog ini.

0 Kumpulan Widget Animasi

Cara Memasang Widget Animasi Yang Lucu dan Keren di Blog -

Banyak hal yang dapat membuat sebuah blog dikatakan menarik, selain dari isi content atau postingan , ternyata ada hal - hal lain yang bisa membuat si blog terlihat lebih menarik dan tentunya banyak pengunjungnya. Nah selain postingan, disain dan animasi / pernak - pernik blog ternyata dapat meningkatkan performa dari suatu blog.. ga percaya ? cobalah anda berkunjung kesuatu blog yang disainnya polos hanya berisikan artikel saja kemudian bandingkan dengan blog yang berisi postingan menarik dengan disain yang menarik pula . Pasti kita akan lebih betah berlama-lama di blog yang berisi artikel menarik dan disain / animasi yang menarik itu bukan ? tentunya. Dan, memberikan efek animasi di blog itu ga sulit kok, dan pilihan animasinya pun beragam bergantung selera. . nah dibawah ini ada beberapa contoh widget animasinya. Kalo udah cocok, berikut langkahnya :

 Cara Memasang Widget Animasi Di Blog

1.Copy Code Script Animasi Yang Anda Ingin Kan

2.Login Ke Blog

3.Pilih Tata Letak

4.Klik Tambah Gadget

5.Pilih HTML / JavaScript

6.Pastekan Code Script Tadi

7.Lalu Save..

Selamat Mencoba..

1.Helicopter

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="widget animasi lucu bergerak atau gif"  alt="animasi bergerak naruto dan onepiece"/></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

2. Ekspresi Muka

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/742/th/74214.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">Ekspresi</a></center></small></div>

 

3. Kodok Mata Gede

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/466/th/46606.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

4 Spiderman

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/3/th/312.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

5.Pig

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/110/th/11046.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

6. Muka Senyum

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/197/th/19769.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

7. Monyet

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/458/th/45845.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

 8.Doraemon

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1031/th/103123.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

9.Spongebob

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

10.Panda

 

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

11.Monyet Loncat

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53966.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

12.Anime Cewek

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/228/th/22801.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

13.Saringgan

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img src="http://s.myniceprofile.com/myspacepic/712/th/71266.gif" title="My widget" alt="animasi  bergerak gif" border="0" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

14.Naruto Berubah

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/656/th/65649.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

15.Gajah Loncat

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click To Get More." /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">Widget-Animasi</a></center></small></div>

16. Lumba Lumba

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click To Get More." /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">Widget Animasi</a></center></small></div>

17.Kucing Tidur

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click To Get More." /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">Widget Animasi</a></center></small></div>

18.Ayam Betelur

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://poloknow.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020541.gif" title="Click To Get More." /></a><small><center><a href="http://poloknow.blogspot.com/2013/02/kumpulan-widget-animasi.html" target="_blank" title="Cara Memasang Widget Animasi">Widget</a></center></small></div>

0 Cara Menambah Dan Mengganti Jenis Font di Blog

Banyak blogger yang tidak merasa nyaman dengan font yang formal dan ingin menggantinya dengan font yang lebih menarik. Sebenarnya ini sangat mudah jika template blog anda dilengkapi fungsi variabel untuk mengganti font. Lalu bagaimana jika template blog anda tidak dilengkapi dengan variabel itu?

Kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut :

Memilih Jenis Font

• Buka halaman http://www.google.com/webfonts/
• Jika anda sudah menemukan huruf-huruf yang anda sukai tinggal klik Add to Collection pada bagian kanan bawah sampel huruf. Silahkan pilih lebih dari satu huruf jika diperlukan

• Jika anda sudah selesai memilih huruf silahkan klik Use

• Anda akan dialihkan ke halaman baru. Pada halaman baru ada 2 hal yang harus anda lakukan

• Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya

• Kedua, copy kode yang diberikan untuk dipasang di blog

 

Menambahkan Font Pada Blog

• Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda.
• Pilih menu Template > Edit HTML
• Cari kode  </b:skin> dan paste kode yang tadi anda copy dibawahnya
• Jangan lupa untuk menambahkan kode / sebelum penutup > pada kode tersebut. Hasilnya akan terlihat seperti contoh di bawah

<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900|Julius+Sans+One|Cherry+Swash:400,700' rel='stylesheet' type='text/css' />

• Simpan Template

Menggunakan Font

Sekarang setelah selesai melakukan langkah langkah sebelumnya anda tinggal memakai font itu. Contohnya seperti di bawah ini :

#outer-wrapper {
  margin:0 auto;
  padding:0px;
  text-align:$startSide;
 font-family:"Cinzel Decorative";
 font-size:13px;
margin:10px auto;
  }

#header { max-width: 450px; text-align: left; color:#fff;float: left; font-weight: 700; font-family: Cinzel Decorative; }

Sekian tutorial saya kali ini mohon maaf bila ada kekurangan, 

0 Cara Membuat Spoiler Pada Postingan Blog

Sebagian orang pastinya sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Sebelumnya kalau ada yang belum tahu apa itu spoiler, saya jelasin singkat saja. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. 

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutup itu (Spoiler). Oke langsung saja Cekidooot...

Cara Membuat Spoiler Pada Postingan Blog

1. Login ke Blogger 
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (Gambar atau Video) disini

 <br>
</div>
</div>
</div></div>

5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.

Spoiler:

Sekian kurang lebihnya mohon maaf, jika anda berkenan tolong follow blog ini, anda juga bisa request Software dan Tutorial ke saya dengan cara like dan comment di FP blog ini