Header
Showing posts with label Blogger Template. Show all posts
Showing posts with label Blogger Template. Show all posts

Cara Edit Template Blogger Versi Baru

Posted by : Admin On 14 April 2013 40 comments

Udah pada tau kan kalau sekarang tampilan edit template Blogger udah berubah gan. Lebih keren, moderen dan simple mirip-mirip kayak edit template di WP. Sekarang udah gak ada lagi fitur Expand Widget di edit templatenya gan. Kalau mau cari kode langsung tinggal di search aja dan kalau mau edit bagian tertentu dari widget di template udah disediain pilihannya gan.

Sebenernya buat yang udah lama ngeblog tampilan edit template baru ini sama aja gak ada bedanya gan. Tapi mungkin buat yang baru ngeblog pasti bingung, apalagi kebanyakan tutorial yang ada di blog ini masih pake cara edit template versi lama. Oleh karena itu gw buat tutorial cara edit template Blogger versi baru ini biar loe bisa ngerti gan.

Langsung aja silahkan disimak penjelasan tentang cara edit template Blogger versi baru ini gan.



Cara Edit Template Blogger Versi Baru




Pertama kalau mau edit widget udah disediain pilihannya gan. Tinggal di klik aja Jump to widget ntar bakal muncul pilihan widget yang ada di blog loe. Setiap widget yang loe pilih ntar bakal ditandai kodenya dengan tanda panah kecil dan sudah ada angka yang nunjukin urutan baris ke berapa kode tersebut gan.



Sekarang untuk mencari kode di template blog, kalau dulu kita mesti centang Expand Widget Template sekarang gak pake lagi gan. Untuk nyari kode tinggal klik aja di sembarang tempat di dalam kotak kodenya lalu teken Ctrl+F. Nanti bakal muncul kotak search di pojok kanan atas, tinggal di ketik aja kodenya nanti bakal langsung ketemu gan.



Itu aja yang baru di edit tempalte Blogger gan. Untuk Format Template itu tentu fungsinya untuk memformat tempalte blog biar lebih rapi dan valid, silahkan aja dicoba sendiri gan. Sekian dulu ulasan singkat gw tentang cara edit template Blogger versi baru ini, semoga bermanfaat. Jangan lupa ninggalin komentar di bawah gan.

Template Ringan Keren Dan SEO Friendly Gratis

Posted by : Admin On 12 February 2013 156 comments

Dalam membuat blog peran sebuah template sangat besar pengaruhnya gan. Selain tampilannya harus keren juga template tersebut harus ringan dan SEO friendly tentunya. Kenapa harus ringan dan SEO friendly, alasannya sederhana kalo loading blog kita cepet, pengunjung pasti ngerasa seneng. Dan SEO friendly tentu biar blog kita di sukai sama mesin pencari gan.


Buat seorang blogger tujuan membuat blog tentu biar blognya nomor satu di Google, dan juga bikin tampilan blognya sekeren mungkin ya gak gan. Di luaran sono banyak banget situs yang nyediain template Blogger gratis, dan hampir semuanya keren menurut gw gan.

Pada kesempatan kali ini gw pengen berbagi template ringan SEO friendly gratis gan. Template ini hasil karya gw sendiri dan tampilannya lumayan gak jelek-jelek amat. Template gratis ini gw namain Ciyus 1st Edition gan.

Setelah beberapa hari gw utak-atik akhirnya tempalte ringan SEO friendly ini beres juga dan siap di edarkan gan. Template ini gw usahain buat seringan mungkin dengan meminimalis pengunaan javscript, jadi gak banyak fitur widgetnya. Untuk fitur lengkapnya silahkan di baca di bawah ini dan dicek juga demonya gan.



Fitur Template Ciyus 1st Edition :



  1. Template 2 Kolom.
  2. Layout Krem dan Biru.
  3. Ringan dan SEO Friendly.
  4. Sidebar Kanan.
  5. Tab Menu Atas Dropdown.
  6. Halaman Konten & Sidebar Lebar.
  7. Navigasi Melayang.
  8. Slot Ads 468x60 di Header.
  9. Slot Ads 125x125 di Sidebar ( Eksternal Kode ).
  10. 4 Widget di Footer.
  11. Social Icon di Header.
  12. Widget Related Post di Bawah Postingan.
  13. Facebook Comment Keren Plus Blogger Comment.
  14. Widget Back To Top.

License / Lisensi : Template ini gratis dan boleh digunain buat keperluan komersil maupun non komersil. Bagi pengguna di haruskan untuk tidak menghapus atau merubah link atribut dari author di footer template.







Pengaturan Template Ciyus 1st Edition :





1. Header ( Judul, Banner 468x60 dan Social Icon )



Untuk Judul dan Banner 468x60 langsung aja di edit dari Layout blog kalian gan. Buat Social Icon kalian tinggal cari kode di bawah ini dan ganti tanda # dengan URL profil sosial media kalian. Sekedar info aja kalau social icon di template ini bisa juga kalian download di blog ini gan.


<div class='socialhead'>
<a href='#' rel='nofollow' target='_blank' title='Like Us on Facebook'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRp-iW5oSHq6JTmz1G0yWgN53m3boDmomwxMRdQfUk7QFESqUU7XrQ2nOOqJFsgmUOoF57mnYkpIdF-cs1ftb-P-Kt7EHpK02wwh0DbgucqiRB0A0b_Dx33moHCPFYykM4F14UVpusFoMr/s1600/SC+facebook+icon64.png'/></a>
<a href='#' rel='author' target='_blank' title='Follow Us on Google+'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimbGqwnmB8kO4KAtQ517YkR9WeExlGbuiSthAZcpvVWYfF5nTdI7erdAOQ_R1b_toQMV1Jta3uz0RoM6uxLGRv_toO0TXZAYQe9qrvj-qcqNazZ_q5ZeDJbQv29GdgP8NyEeVaBmOtrUIq/s1600/SC+google++icon64.png'/></a>
<a href='#' rel='nofollow' target='_blank' title='Follow Us on Twitter'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK6YDSLrJuhCHdChNIpMNrDeRDS4I9FPsqHwBja0l6V4VYg_4Dw_QpKbTCviBa1wALSU_gTsC9TkUWUCvPnplwyTJ3tlO6ZO3e_oCkqrZuZ2ZeqpvGlJBaWVzcOXYZ-UR3lIsMgREt2eYg/s1600/SC+twitter+icon64.png'/></a>
<a href='#' rel='nofollow' target='_blank' title='Subscibe Via RSS Feed'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkk6GdMwrBjJmv25fSdHAOtC9Dq7bdI3gBkY1Ero5xsomVljcQTU2hVR80RHLg4lg-GdsrUKTrlIq3tstylKc4WD92fYtxKboBV6ZXAo_0S1hsY4EPKa-dM1tVzxyEJ8k9UGLU8wPCYPHO/s1600/SC+rss+icon64.png'/></a>
</div> 



2. Tab Menu



Buat ngedit Tab Menu tinggal cari kode di bawah ini dan rubah tanda # ganti dengan url yang sesuai dengan isi blog dan judulnya silahkan diganti juga gan. Kalo mau ditambahin menunya silahkan aja gan disesuaiin aja sama kebutuhan.


<div class='menu-primary-container' id='submenu'><div class='menu' id='menu-primary'>
<ul>
<li><a href='#'>News</a></li>
<li><a href='#'>Tutorials</a>
<ul>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>WordPress</a></li>
<li><a href='#'>SEO</a></li>
</ul>
</li>
<li><a href='#'>Service</a>
<ul>
<li><a href='#'>Web Design</a></li>
<li><a href='#'>SEO Service</a></li>
<li><a href='#'>Template Maker</a></li>
</ul>
</li>
<li><a href='#'>Freebies</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
</ul>
</div></div>



3. Sidebar Slots Ads 125x125



Ini Slots Ads 125x125 gw pake kode tambahan jadi tinggal nambahin di widget sidebar aja gan. Kalo kalian suka silahkan dipasang kodenya ada di bawah ini, tinggal diganti URL Iklan dan gambarnya gan.


<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#fff">
<tbody><tr>
<td><center><a href="URL Iklan" rel="nofollow" target="_blank"><img border="0" alt="Deskripsi Iklan" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbbDgsbv0qpNHPkqa5Uv5SxC7VXlFepcsX2wCyzyPmv30LFV-677EJVBLxxFRBQl4Y3hMZrkQoxWWbNYbhymoDZQCKSSUQzvrnmZi6GGRA0pVNULw7zUYpznu2AnI-KeC41fTqLwlqZ6tX/s1600/ads.jpg" height="125"/></a></center></td>
<td><center><a href="URL Iklan" rel="nofollow" target="_blank"><img border="0" alt="Deskripsi Iklan" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbbDgsbv0qpNHPkqa5Uv5SxC7VXlFepcsX2wCyzyPmv30LFV-677EJVBLxxFRBQl4Y3hMZrkQoxWWbNYbhymoDZQCKSSUQzvrnmZi6GGRA0pVNULw7zUYpznu2AnI-KeC41fTqLwlqZ6tX/s1600/ads.jpg" height="125"/></a></center></td>
</tr>
<tr>
<td><center><a href="URL Iklan" rel="nofollow" target="_blank"><img border="0" alt="Deskripsi Iklan" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbbDgsbv0qpNHPkqa5Uv5SxC7VXlFepcsX2wCyzyPmv30LFV-677EJVBLxxFRBQl4Y3hMZrkQoxWWbNYbhymoDZQCKSSUQzvrnmZi6GGRA0pVNULw7zUYpznu2AnI-KeC41fTqLwlqZ6tX/s1600/ads.jpg" height="125"/></a></center></td>
<td><center><a href="URL Iklan" rel="nofollow" target="_blank"><img border="0" alt="Deskripsi Iklan" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbbDgsbv0qpNHPkqa5Uv5SxC7VXlFepcsX2wCyzyPmv30LFV-677EJVBLxxFRBQl4Y3hMZrkQoxWWbNYbhymoDZQCKSSUQzvrnmZi6GGRA0pVNULw7zUYpznu2AnI-KeC41fTqLwlqZ6tX/s1600/ads.jpg" height="125"/></a></center></td>
</tr>
</tbody></table>
</div>



4. Komentar Facebook



Ini fitur tambahan keren yang gw isi di template ini gan. Ada kotak komentar facebooknya berdanpingan sama komentar blog yang asli. Mungkin loe udah sering liat di blog laen yang kayak beginian tapi yang satu ini beda lebih keren karena sudah gw modifikasi gan.

Cara settingnya gampang tinggal cari kode di bawah ini lalu loe ganti  Facebook Profile ID sama ID facebook loe dan Aplikasi Facebook ID sama ID aplikasi facebook loe. Kalo bingung silahkan baca cara membuat komentar facebook keren terbaru di blog gan.


<meta content='Facebook Profile ID' property='fb:admins'/>
<meta content='Aplikasi Facebook ID' property='fb:app_id'/>


5. Related Post



Widget Related Post di template ini gw udah isi sama icon smiley gan, kalau kalian mau ganti misal dengan favicon silahkan aja. Tinggal cari kode di bawah ini lalu ganti background : url sama url gambar loe gan.


#screlated-post ul li {
display : block;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHgkOdIYFvCZjg5H0s5I9HwRnGQzvyDqWnyF0X5DwC5O8dizlF7HMp9BcLWQP5VQdbppKBhY8qtp37v6RwrH1sQwlOLta1zZnLJa8RpvgiviGPy9OsRL6w-r8HFWwrMH89hmArDd5bY07/s1600/stupid-idea-icon.png) no-repeat 0 0;



6. Footer



Untuk nambahin widget di footer langsung aja dari Layout dashboard blog gan.



7. Meta Tag



<meta content='Index, Follow' name='robots'/>
<meta content='Your home page description' name='description'/>
<meta content='your keywords, keywords1, keyword2' name='keywords'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.url' rel='canonical'/>


Tambahan aja untuk edit meta tag, silahkan ganti description dan keywords sesuai isi blog loe. Di template ini gw cuma isi beberapa meta tag, kalau mau lebih silahkan ditambahkan sendiri. Bagi yang udah lama blogging, pasti udah tau cara nambahinnya. Tapi buat yang baru ngeblog dan mungkin bingung, silahkan disimak postingan gw tentang cara membuat meta tag gan.


Mudah-mudahan template ini berguna buat loe yang pengen buat blog. Harap di maklumi kalo masih banyak kekurangan dalam hal design dan fitur di template ini. Untuk widget-widget yang laen sengaja gak gw isi karena itu tergantung selera masing-masing, jadi silahkan berkreasi dan di edit sendiri templatenya gan.

Sekian dulu yang bisa gw share dan mudah-mudahan kalian suka dengan template ringan gratis ini. Kalo ada masalah dalam penginstalan atau yang gak di mengerti silahkan ditanyakan dan jangan lupa ninggalin komentar gan.

Premium Blogger Templates Terbaik Gratis

Posted by : Admin On 12 December 2012 26 comments

Bingung cari premium blogger template gratis yang keren tapi simple buat blog gan? 


Kali in gw bakal share premium blogger templates terbaik gratis, kalo loe suka langsung aja di sedot gan. Semua template disini bukan gw yang buat tapi dari website laen gw cuma mau ngasi info buat loe aja gan, selamat menikmati.



Premium Blogger Templates Terbaik Gratis



1. Webfolio



2. Pro Indexer



3. Flow



4. Freshmade



5. Design Pile Blue



6. Organica



7. Rockwell



8. Grunge Theme



9. Magiting



10. MBL Freshable





Sekian dulu gw share premium Blogger template gratisnya gan, semoga bermanfaat buat loe yang mau bikin blog baru. Jangan lupa komentarnya gan.


Sebelumnya