Blogger Indonesia yang Terkenal Karena Template Buatannya

Muqaddimah

Bismilahhir Rahmanir Rahim.Assalammualaikum Warahmatullahi Wabarakatuh. Kabar baik kan gan, Insya Allah. Setelah bahas masalah BlueStacks (Cara Menginstal Aplikasi Android Di BlueStacks) dan setelah ane kembali dari posting tentang blogger,kali ini ane akan membahas tentang Blogger Indonesia yang Terkenal Karena Template Buatannya.

Agan pernah ganti template? Sudah pasti pernah ya. Klo udah pernah, blog mana aja yang agan pake buat download template? Dari Indonesia? Klo dari Indonesia, mungkin agan sekarang sedang menebak siapa yang masuk diposting ini. Klo ane udah dong. Tinggal liat aja posting ane sekarang, dah nebak kan? *terserah. Udah gak usah pake lah, langsung kita liat siapa yang masuk menurut ane..... (Gan, postingan ini bukan ajang promosi yak, tapi cuma ajang share aja. Siapa tau agan-agan disini mau pilih salah satu untuk digunakan di blog agan. Hehehehehe....)

1. Mbak Arlina Fitriani (Arlina Design)

Kenapa ane pilih mbak Arlina sebagai jawara 1? Karena ane make template buatannya nya, gan. Hehehehehe....

Klo menurut ane, template buatan mbak Arlina itu keren. Udah dukung HTML 5, SEO, Responsive Mode, pless (baca:plus) loading nya sangat ringan. Ane juga suka sama tips-tips blognya, karena tips nya mudah di pahami buat ane. Lanjut yang kedua...

2. Kang Ismet (Blog Kang Ismet)

Kang Ismet juga gak kalah keren. Blog serta template buatannya ringan, loadingnya gak berat dan yang pasti template nya itu lho yang keren. Selain itu, tips blogger nya juga buanyak. Jadi, ente bisa terapin dah mana yang bagus buat blog ente.

3. Mas Kolis (Creating Website & Mas Template)

Mas Kolis juga gk kalah keren kok. Ini blog tempat ane download template pertama kalinya. Walaupun pas diliat di blog utamanya (Creating Website) dia jarang update, tapi coba liat blog Mas Template nya. Bnayak  template hasil karyanya sendiri. Ente bisa klik linknya di bagian judul di atas gambar ini!

4. Kompi Ajaib

Mas Kompi Ajaib juga cocok buat ente! Sama seperti yg lain, tapi disini kaya nya sering update tentang blogger yak? Silahkan di coba sendiri deh

Nah itu para blogger-blogger nya, klo ada yg mau nambahin silahkanketik sekarang di komentar ya. Many Thanks.. Wassalammualaikum Warahmatullahi Wabarakatuh

Cara Memasang Font Awesome Di Blog

Halaman Depan Website Font Awesome | Image Courtesy of : (HASIL SCREENSHOT DARI HALAMAN DEPAN WEBISTE : fontawesome.io)

Bissmillahir Rahmannir Rahim. Assalammu'alaikum Warahmatullahi Wabarakatuh. Halo agan-agan semua pembaca setia Blog Rayhanar! Kembali lagi bersama ane dengan artikel tentang blog. Kali ini, ane akan membahas tentang cara memasang font awesome di blog. Langsung Menuju TKP!

Sebenarnya, apa sih Font Awesome itu? 

Font Awesome adalah salah satu framework CSS. Disini, Font Awesome menyediakan style CSS yang jika kita gunakan akan memunculkan ikon-ikon tertentu. Seperti bendera, kue ultah, pensil, dll.

Jadi, defimisi singkatnya Font Awesome itu framework yang dapat memunculkan ikon. Salah satu kelebihan Font Awesome adalah :

1. Tanpa Javasript, karena hanya menggunakan CSS saja.

2. Mudah digunakan. Bahkan pemula pemrograman ataupun yang tidak mengerti program pun bisa menggunakan ini.

3. Ada sekitar 400+ ikon yang bisa kita gunakan dengan Font Awesome.

4.Dan untuk kelebihan lainnya, bisa dilihat di halaman depat Font Awesome Disini.

Cara Memasang Font Awesome

Nah terus gimana cara masang nya? Baca dibawah ini gan :

1.  Buka blog agan, klik template, setelah itu klik Edit HTML
2. Cari kode </style>. Untuk caranya, bisa dilihat disini (lihat point ke 2)
3. Copy kode dibawah ini, lalu paste di atas kode </style>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

4. Klik Simpan Template, dan selesai...

Cara Menggunakan Font Awesome

Sekarang, Font Awesome sudah bisa digunakan! Nah terus cara make'nya gimana gans? Gampang kok, gk pake Edit HTML lagi, nih pake kode ini

<i class="IKON_CSS_FONT_AWESOME"></i>

Contoh kode

<i class="fa fa-comments"></i>

Hasilnya :
Untuk ikon CSS lainnya, bisa dilihat disini!

Gimana gan, bermanfaat gak? Silahkan dicoba!

Cara Mudah Membuat Back To Top Dengan Efek Bounce

Back to top nya disamping gambar | Image Courtesy of : (DOKUMEN PRIBADI)

Bissmillahir Rahmannir Rahim. Assalmmu'alaikum Warahmatullahi Wabarakatuh. Halo agan-agan semua, kembali lagi di blog ane. Kali ini kita bahas tema tentang tutorial blog gan. Langsung menuju TKP.

Apaan sih back to top itu? 

Back to top adalah sebuah tombol kembali ke atas yg digunakan website supaya memudahkan pengunjungnya untuk kembali ke atas. 

Jadi definisi singkatnya back to top itu tombol kembali keatas.

Nah disini ane bakal bahas cara membuat membuat tombol back to top beserta efek bounce nya. Oke gan perhatiin baik-baik ya caranya :

1. Buka blog agan, klik template, lalu klik edit html

2. Klik sembarang dulu di text areanya, abis itu klik Ctrl + F, (jika sudah muncul form pencarianya di samping kanan atas textareanya) lalu ketik </style> dan tekan enter. Bagi yg gak tau caranya liat gambar dibawah ini :

Image Courtesy of : palingserbagunaku.blogspot.com

3. Setelah itu, copy kode dibawah ini, lalu paste di atas kode </style> :

/* CSS Back To Top */
#BackToTop {background:#fff;display:none;color:#fafafa;padding:15px 8px;font-size:16px;
line-height:30px;border-radius:100% 0 0 100%;box-shadow:0 0 5px rgba(0,0,0,0.3);transition:all .3s linear;}
.BackToTop {-webkit-transform: translateZ(0);cursor:pointer;position:fixed;bottom:25%;right:0;z-index:90;}
#BackToTop .fa.fa-arrow-up {background:#a3dd94;padding:10px;border-radius:100%;transition:all .3s linear}
#BackToTop .fa.fa-arrow-up:hover {background:#3a414e;transition:all .3s linear}

4. Setelah itu, copy kode di bawaha ini, lalu paste di bawah kode </style> :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

5. Setrlah cara 1 - 4 selesai, cari kode </body> (untuk caranya bisa dilihat di point ke 2)

6. Copy kode dibawah ini, dan paste di atas kode </body> :

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BackToTop').fadeIn(); } else { $('#BackToTop').fadeOut(); } });
$('#BackToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('.searchbutton').click(function(){
  $(this).toggleClass('active');
  $('.search-form').fadeToggle('normal');
});
});
//]]>
</script>

7. Masih di kode </body>. Setelah point ke-6 sudah dilakukan, copy kode di bawah ini, dan paste di atas kode </body> :

<div class="BackToTop">
<a id="BackToTop" style="display: none;">
<i class="fa fa-arrow-up"></i>
</a>
</div>

8. Klik Simpan Template. Dan... jreng-jreng, selesai!

Jika agan ada pertanyaan, silahkan kirimkan di kolom komentar yak!

Sumber : Di edit dari blog Click and Skip