Diskusi Terbaru! ×

PERTAMAX!! - Responsive HTML5 Blogger Template

Subhanallah, tidak terasa sudah ± 1 Minggu saya tidak membuat posting/berbagi ilmu dengan temen2 blogger. tapi jangan kecewa dulu sob, 1 minggu kemarin saya di sibukan dengan membuat template blog agar 100% responsive, dan alhamdulillah akhirnya karya "PERTAMA" saya lahir juga.

Mengapa saya beri nama template ini "PERTAMAX!!"?

hehe, karena ini memang karya pertama saya dalam membuat "Template Blogger Responsive - Valid HTML5" ..

Mungkin sebelumnya, ada yang ingin saya sampaikan untuk template ini. yaitu beberapa Point Plus-plus / Fitur pada template ini :
  1. Responsive & FLAT Design Check Disini
  2. SEO Friendly [ 100% ] Check Disini
  3. Valid HTML5 [ Homepage ] Check Disini
  4. Valid HTML5 [ Postingan ] Check Disini
  5. List Grid Mode [ Postingan ] Lihat
  6. Back To Top [ Widget] Lihat
  7. Threaded Comment V3 [ Plugin ]
  8. Emoticon Kaskus pada Komentar [ Plugin ]
  9. Responsive Tooltip [ Plugin ]
  10. Font Icon Awesome [ Plugin ]
  11. Sticky [ Widget]
  12. Quotes Footer [ Widget]
  13. Recent Comment [ Widget - Visitor Friendly ]
  14. dan masih banyak lagi ..

PERTAMAX!! - Responsive HTML5 Blogger Template

Lihat Demo Download Template



Lihat Demo Download Template


Template ini saya bagikan Gratiiis!!!. Sobat bisa menghilangkan Credit pada footer, dengan membayar Rp. 50.000,- melalui Paypal "kangrian14@gmail.com" / Transfer Bank.
(This template is absolutely free, you may remove credit link by sending me $5 USD through PayPal "kangrian14@gmail.com" / Transfer Bank ).

Donatur Pertamax!


Special thanks to Hady Eka Saputra

Instalasi Template :

Untuk pemasangan Template mengikuti Dummy yang ada berikut akan saya jelaskan di bawah ini :

Panduan Instalasi :

1. Install/Upload Template yang ada pada direktori /Themes/ di dalam file (.RAR) ke dalam Blog sobat.

2. Masuk ke menu/halaman Tata Letak, lalu edit semua widget yang ada dengan code / settingan yang sudah saya siapkan di bawah ini :

► Setting Widget Popular Post seperti screenshot di bawah ini :


► Setting Widget Sosial Media ( Sticky ) dengan menambahkan kode di bawah ini :
<div class="g-person" data-width="250" data-href="//plus.google.com/u/0/108034059941947835351" data-layout="landscape" data-rel="author"></div>
<a href="https://twitter.com/KangRian14" class="twitter-follow-button" data-show-count="true" data-lang="id">Follow @KangRian14</a>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fkangriandotcom&amp;width&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=169828266520120" style="border:0px!important; overflow:hidden; height:62px;width:100%;"></iframe>
<script>
//<![CDATA[
// Twitter Load
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
//]]>
</script>
<!-- Plaats deze tag na de laatste widget-tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'id'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<div class='clear'></div>

Konfigurasi Kode Sosial Media :
→ Ganti URL //plus.google.com/u/0/108034059941947835351 dengan URL Google Plus sobat.
→ Ganti Semua Text @KangRian14 dengan Username Twitter sobat.
→ Ganti Text kangriandotcom dengan Username Fanpage Facebook sobat.

► Setting widget Komentar Terbaru dengan menambahkan kode di bawah ini :
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 100,
 showAvatar  = true,
 avatarSize  = 40,
 roundAvatar = true,
 characters  = 45,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=500,
 adminBlog='YOUR NAME';
//]]>
</script>
<script type="text/javascript" src="https://googledrive.com/host/0B7H_GQEvKCj1cUVkYy1jbXpqZW8/recent-comments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangrian_recent_comment&amp;&amp;max-results=100">
</script>

Konfigurasi kode "Komentar Terbaru" :
→ Rubah text YOUR NAME dengan nama sobat agar tidak muncul pada widget komentar terbaru.

► Setting/Edit widget Kategori menjadi seperti screenshot di bawah ini :


dan yang terakhir,
► Setting/Edit widget Kutipan, dengan menambahkan kode di bawah ini :
<div class='kutipan'>
<blockquote>Saya pikir semua orang harus belajar coding,
Karena coding mengajarkan anda berpikir.<br/>
<cite>&ndash; Steve Jobs, pendiri Apple.</cite></blockquote>
<blockquote>Kebijaksanaan di Facebook adalah meng-hire coder berkualitas sebanyak mungkin. Tapi pasar saat ini tidak menyediakan stock yang cukup..<br/>
<cite>&ndash; Mark Zuckerberg, pendiri Facebook.</cite></blockquote>
<blockquote>Anda tidak harus menjadi jenius untuk bisa coding. Pertambahan, pengurangan... itu sudah cukup!.<br/>
<cite>&ndash; Bill Gates, pendiri Microsoft.</cite></blockquote>
<blockquote>Coders yang hebat adalah rock star masa kini! Titik!.<br/>
<cite>&ndash; Will.i.am, anggota Black Eyed Peas.</cite></blockquote>
</div>



Untuk membuat blog agar tetap valid HTML5, pastikan setiap menambahkan widget baru, langsung hapus kode di bawah ini pada Template -> Edit HTML
<b:include name='quickedit'/>

Semoga template ini bermanfaat untuk semua Blogger yang ingin memiliki Blog valid HTML5 dan Responsive Design tentunya, dan saya sangat berharap masukan untuk template ini, silahkan curahkan pada kotak komentar di bawah ini. Terima kasih.

Silahkan untuk sahabat yang ingin membagikan ulang template ini, jika template ini bermanfaat dan jangan sungkan2 untuk berbagi.

Salam Blogger,
A.K.A Kang Rian ®

REVIEW: QWORDS DOT COM - Penjual Domain & Hosting terbaik di Indonesia!

205 komentar:

«Terlama   ‹Lebih tua   201 – 205 dari 205
fika zhafirah mengatakan...

templatenya kalo di isi postingan yang banyak foto kok jadi g teratur halaman utamanya.

Nasrullah Halim mengatakan...

Kog tata letak nya berantakan mas, berjejer kebawah, padahal pengen saya beli

GUNUNG MAS PONSEL mengatakan...

Ingat..,!! Kesempatan tidak akan datang untuk ke-2 kali!!! Kami Hadir Utk Menjawab Kebutuhan Anda.Terhadap Produk Elektronik.Transaksi Aman DanTerpercaya.Kami Menawarkan Berbagai Jenis Type HP,LAPTOP dan CAMERA.DLL, Dgn Harga TERJANGKAU/ SUPER PROMO DI GUNUNG MAS PONSEL TEMPAT BELANJA ONLINE AMAN DAN TERPERCAYA. 100% BEBAS PENIPUAN MINAT PIN BB: 7C22D79F HUB/SMS:0851-4515-5828 klik web resmi kami di http://gunungmas-phone.blogspot.com/ Ready Stock! Samsung Galaxy A8 Rp.2.900.000 Ready Stock! oppo R5 Rp.3.000.000 Ready Stock! Apple iPhone 5 32GB Rp.2.500.000 Ready Stock! Apple iPhone 5S 32GB Rp.3.000.000 Ready Stock! Samsung Galaxy A3 A300H Rp.1.500.000 Ready Stock! Samsung Galaxy A5 A500F Rp.2.000.000 Ready Stock! Samsung Galaxy E5 E500H Rp.1.500.000 Ready Stock! Samsung Galaxy Grand Prime SM-530H Rp.800.000. Ready Stock! Asus Zenfone 2 ZE551ML RAM 4GB Rp.2.000.000 Ready Stock! Samsung Galaxy S3 I9300 .Rp.1.500.000. Ready Stock! Samsung Galaxy S6 32GB Rp.3.300.000 Ready Stock! Samsung Galaxy Note N7100.Rp.2.000.000. Ready Stock! Samsung Galaxy Note 5 Rp.4.000.000 Ready Stock! Samsung Galaxy Note 4 SM-N910H Rp.3.500.000 Ready Stock! Samsung Galaxy Note 3 Rp.2.000.000 Ready Stock ! Samsung Galaxy S5 Rp.2.000.000, Ready Stock ! Samsung Galaxy S4 l9500 Rp.1.500.000

fika zhafirah mengatakan...

Kalau judul postingan panjang gmn caranya? biar pada tampilan rapih

mametz LH mengatakan...

izin sedot gan

«Terlama ‹Lebih tua   201 – 205 dari 205   Lebih baru› Terbaru»