Cara TERBARU Mengaktifkan dan Setting Robot txt di Blogger

FIRABLOGNEWBIE – Artikel kali ini tentang Cara TERBARU Mengaktifkan dan Setting Robot txt di Blogger. Lalu apa itu robots.txt khusus dan Tag tajuk robot khusus pada pengaturan penelusuran blog , dan bagaimana cara setting robot.txt yang valid dan seo friendly itu ? robots txt merupakan sebuah robot yang berguna untuk mencegah web mengcrawler [ mengindeks ] dan bekerja sama dengan robots web yang lain guna mengakses semua maupun sebagian dari sebuah website / blog yang jika dilihat secara terbuka. Untuk pemasangan robots txt sendiri sangatlah mudah , sebetulnya tanpa harus setting robots.txt pihak blogger sendiri sudah mensettingnya

Apa manfaat dari mengaktifkan dan menyetting robot.txt. ? robot.s txt berfungsi untuk mengarahkan link yang menuju ke blog kita tetapi link tersebut tidak benar-benar ada alias halaman 404. Saya sendiri kurang menggunkan fitur ini, tapi di situasi tertentu fitur ini bisa sangat bermanfaat.

Berikut Cara Mengaktifkan dan Setting robots.txt Khusus yang SEO

1. Pertama , sobat login ke akun blogger Sobat

2. Selanjutnya Masuk ke Setelan >> Preferensi penelusuran >> aktifkan robots.txt khusus.

3. Copy dan Tempelkan code robots.txt  dibawah ini di dalam kolom yang disediakan

User-agent: Mediapartners-Google

    Disallow:

    User-agent: Googlebot

    Disallow: /search

    Disallow: /?m=1

    Disallow: /?m=0

    Disallow: /*?m=1

    Disallow: /*?m=0

    User-agent: *

    Disallow: /search Sitemap:http://firablognewbie.blogspot.com/feeds/posts/default?orderby=UPDATED

Kustomisasi :

>> Sebelum menyimpannya , ganti terlebih dahulu firablognewbie.blogspot.com dengan nama blog Sobat

Cara Setting Tag Tajuk robot khusus yang Seo di Blog

1. Masih , dalam menu setelan , preferensi penelusran [ seperti pada langkah diatas ]

2. Kemudian sobat aktifkan tag tajuk robot khusus

3. Setelah sobat aktifkan , silahkan sobat centang seperti pada gambar berikut :

klik untuk memperbesar gambar

Terkahir , silahkan simpan perubahan

Selesai

Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara TERBARU Mengaktifkan dan Setting Robot txt di Blogger. Terima kasih dan semoga bermanfaat…..

Cara Membuat atau Menambahkan Title Link dan Title Tag Otomatis pada Breadcrumbs

Salam NEWBIE belajar Blog lagi yuckk… Artikel kali ini tentang Cara Membuat atau Menambahkan Title Link dan Title Tag Otomatis pada Breadcrumbs memberikan title link dan title tag pada Breadcrumbs dapat mengoptimasi seo pada breadcrumbs itu sendiri karena seperti yang semua ketahui bahwa semakin banyak title pada link maupun tilte gambar pada blog Sobat maka semakin kuat pula SEO Sobat

Disini Firablognewbie akan memberikan tips optimasi Breadcrumbs dengan menambahkan title tag dan title link secara otomatis , dimana Breadcrumbs tersebut sudah ada titlenya.

Cara Membuat Title Link Otomatis Pada Breadcrumbs Blog

1. Masuk ke Akun Blogger Sobat

2. Masuk ke TEMPLATE >> EDIT HTML

3. Kemudian cari kode seperti dibawah ini

    <b:includable id='breadcrumb' var='posts'>…….</b:includable>

4. Kemudian hapus kode tersebut ( di atas ) dan ganti dengan kode dibawah ini

<b:includable id='breadcrumb' var='posts'>

               <b:if cond='data:blog.homepageUrl != data:blog.url'>

                <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

                 <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &#187; <span><data:blog.pageName/></span></div>

                 <b:else/>

                 <b:if cond='data:blog.pageType == &quot;item&quot;'>

                   <!-- breadcrumb for the post page -->

                  <b:loop values='data:posts' var='post'>

                   <b:if cond='data:post.labels'><span itemscope='itemscope' itemtype='http://schema.org/WebPage'>

                    <div class='breadcrumbs' xmlnssmile='http://rdf.data-vocabulary.org/#'>

                     <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url' title='Beranda'>Beranda</a></span>

                     <b:loop values='data:post.labels' var='label'>

                       &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'><data:label.name/></a><b:if cond='data:label.isLast == &quot;true&quot;'/></span>

                     </b:loop>

                     &#187; <span><data:post.title/></span>

                    </div></span>

                    <b:else/>

                     <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &#187; <span>Tanpa Label</span> &#187; <span><data:post.title/></span></div>

                   </b:if>

                  </b:loop>

                  <b:else/>

                  <b:if cond='data:blog.pageType == &quot;archive&quot;'>

                    <!-- breadcrumb for the label archive page and search pages.. -->

                   <div class='breadcrumbs'>

                    <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Archives for <data:blog.pageName/></span>

                   </div>

                   <b:else/>

                   <b:if cond='data:blog.pageType == &quot;index&quot;'>

                    <div class='breadcrumbs'>

                     <b:if cond='data:blog.pageName == &quot;&quot;'>

                      <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Semua Posting</span>

                      <b:else/>

                      <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Posting dalam <data:blog.pageName/></span>

                     </b:if>

        </div>

          </b:if>

         </b:if>

                 </b:if>

                </b:if>

               </b:if>

              </b:includable>

   

5. Terakhir Simpan template sobat

Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara Membuat atau Menambahkan Title Link dan Title Tag Otomatis pada Breadcrumbs. Terima kasih dan semoga bermanfaat…..

Cara Menghapus Komentar Spam ( Link Aktif ) Secara Otomatis di Blog

Newbie wanna be the winning. Artikel akli ini tentang Cara Menghapus Komentar Spam Secara Otomatis di Blog . Newbie memiliki 2 cara Menghapus dan Mengatasi Komentar Spam [ Link Aktif ] Secara Otomatis di Blog. lalu bagaiamana sih cara untuk menghapus link hidup [ spammer ] di blog Sobat ?

Dalam menghapus komentar spam secara otomatis pada blog , dapat Sobat lakukan dengan 2 cara , yaitu dengan menghapus spam dengan css dan menghapus komentar link aktif dengan javascript , tetapi dianjurkan untuk menghapus komentar spam menggunaka java script . mengapa demikian ? karena kalau kita menghapus komentar spam dengan css , link aktif tersebut masih bisa terbaca oleh browser , maka altenatifnya menggunakan javascript

Cara Menghapus Komentar Spam Otomatis menggunakan CSS

1. Masuk ke Akun Blogger Sobat

2. Masuk ke menu TEMPLATE >> EDIT HTML

3. Kemudian letakkan kode CSS berikut tepat diatas kode ]]></b:skin> atau </style>

.comment-content a {

    display: none;

    }

4. Klik Save Template [ dengan memasang css tersebut kini link aktif / spammer akan terhapus secara otomatis ]

Menghapus Komentar Link Aktif secara Otomatis dengan Javascript

1. Masuk ke Akun Blogger Sobat

2. Masuk ke menu TEMPLATE >> EDIT HTML

3. Kemudian cari kode </body> [ kode ini biasanya terletak paling bawah sekali ]

4. Letakkan kede javascript berikut tepat diatas kode </body>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script>

    $('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});

    </script>

5. Terkahir simpan template dan lihat hasilnya

Untuk mengetesnya silahkan Sobat Newbie memasukkan link aktif ke kotak komentar milik Sobat, misalnya ( copy pastekan kode ini ) <a href="http://nama.blog.blogspot.com">sekedar test</a> lalu klik publikasikan, jika link aktif tersebut  hilang , maka bearti anda sudah berhasil menerapkan tutorial Menghapus Komentar Spam Secara Otomatis di Blog.

Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara Menghapus Komentar Spam Secara Otomatis di Blog. Terima kasih dan semoga bermanfaat…..

Cara Memasang Meta Keyword Otomatis di Setiap Postingan Blog

Newbie come again. Artikel Newbie kali ini tentang Cara Memasang Meta Keyword Otomatis di Setiap Postingan Blog dan tahukah Newbie jika meta tag keyword sangat berpengaruh besar dengan SEO , sebab meta keyword ini berfungsi untuk meng-index artikel Sobat agar berada di halaman pertama Google. Pada umumnya pada template bawaan blogger tidak terpasang meta tag keyword dan meta tag deskripsi.

Sekarang mari kita membuat meta tag keyword pada template sobat yang baik dan valid . Untuk meta tag keyword di tutprial kali ini sudah menyesesuaikan dengan algoritma google terbaru. Meta tag keyword ini dapat otomatis menyesuaikan dengan artikel judul blog yang kita buat , jadi Sobat tak perlu memasukan satu persatu meta tag keyword pada postingan blog.

Cara Memasang Meta Tag Keyword yang Dapat Menyesuaikan Title

1. Login ke akun Blogger >> Dasbor >> TEMPLATE >> EDIT HTML

2. Lalu cari kode <head> ( gunakan CTRL+F untuk memudahkan pencarian )

3. Copy dan pastekan kode di bawah ini tepat di bawah kode <head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<title><data:blog.pageName/> | <data:blog.title/></title>

<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title + &quot; | &quot; + data:blog.pageName' name='description'/>

<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title + &quot; | &quot; + data:blog.pageName' name='keywords'/>

<meta expr:content='data:blog.pageName' name='subject'/>

<meta expr:content='data:blog.pageName' name='abstract'/>

<b:else/>

<title><data:blog.pageTitle/></title>

<meta content='Isi dengan deskripsi blog anda' name='description'/>

<meta content='Isi dengan keyword anda' name='keywords'/>

</b:if>

Catatan : ganti tulisan berwarna merah di atas sesuai dengan diskripsi dan keyword blog anda

5. Save / Simpan Template

Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara Memasang Meta Keyword Otomatis di Setiap Postingan Blog. Terima kasih dan semoga bermanfaat…..

Cara Melindungi Gambar Di Postingan agar tidak bisa di Klik Kanan Dengan CSS

Salam Blogger NEWBIE, Share artikel tentang Cara Melindungi Gambar Di Postingan agar tidak bisa di Klik Kanan Dengan CSS. Kali ini tutorial kita bagaimana agar membuat semua gambar posting kita tidak bisa di copas , jadi Sobat tidak perlu repot-repot untuk menambahkan oncontextmenu="return false;" pada setiap kode gambar

Berikut Cara Otomatis Membuat Gambar Posting Tidak Bisa di Copas

1. Letakkan kode jquery dibawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

2. Jika di blog Sobat sudah punya jquerinya , silahkan tinggalkan langkah pertama ini

Kemudian kita pasang lagi javascript pengamanan image posting blog , caranya pasang kode berikut dan letakan tepat diatas kode </head>

<script type='text/javascript'>

    //<![CDATA[

    $(function(){

    $(".post-body img:nth-child(1)").after("<img src=\"http:\/\/2.bp.blogspot.com\/-lQW7QlMoz10\/T8yL_5IPF6I\/AAAAAAAAAQU\/5R8ngq17xzw\/s1600\/transparent.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");

    });

    //]]>

    </script>

    <script type='text/javascript'>

    //<![CDATA[

    $(function(){

    $(".post-body img").after("<img src=\"http:\/\/2.bp.blogspot.com\/-lQW7QlMoz10\/T8yL_5IPF6I\/AAAAAAAAAQU\/5R8ngq17xzw\/s1600\/transparent.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");

    });

    //]]>

    </script>

3. Klik Save Template dan lihat hasilnya

Cara Melindungi Gambar agar tidak bisa di Klik Kanan Dengan CSS

Kalau yang cara ini , berbeda dengan cara yang diatas tadi , kalau cara menngunakan css , kalau cara diatas tadi menggunakan javascript

1. Caranya adalah , masuk ke TEMPLATE >> EDIT HTML terlebih dahulu

2. Cari kode <body> , dan ganti kode tersebut dengan kode dibawah ini

<body onmousedown='return false' oncontexmenu='return false' onselectstart='return false'>

3. Klik Save >>>>>> selesai

Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara Melindungi Gambar Di Postingan agar tidak bisa di Klik Kanan Dengan CSS. Terima kasih dan semoga bermanfaat…..

Cara Membuat Header Blog Menjadi Responsive

Blogger Newbie still fight, artikel kali ini tentang Cara Membuat Header Blog Menjadi Responsive. Untuk membuat dan mengubah header blog menjadi Responsive dan full screen kita hanya memberi tag div class pembatas pada tag div header . Pada dasarnya header wrapper dibuat widht 100% dengan menambahkan kode pemotongnya menjadi 980 pixel atau sesuai selera sobat .

Tidak ada salahnya bila sobat newbie melakukan eksperimen dan membuat header blog sobat menjadi full screen dan Responsive. Untuk lebih jelasnya silahkan sobat ikuti tips dibawah ini dengan baik :

Gimana udah tahukan apa itu header full screen dan responsive , nah jika sobat sudah paham dan tertarik untuk membuatnya silahkan simak tutorialnya berikut :

Cara Membuat Header FullScreen dan Responsive di Blog

1. Masuk ke Template >> Edit HTML

2. Cari kode div header , misalnya #header-wrapper , Sobat rubah widht-nya menjadi 100% atau auto . contohnya seperti ini [ pasang kode ini diatas </style> ]

#header-wrapper{width:100%;overflow:hidden;background:#FFF;padding:10px 0; border-bottom: 1px solid #eee;}

3.Kemudian kita beri CSS pembatas [ letakkan kode dibawah ini diatas ] .pembatas {max-width:1000px;margin:0 auto;}

4. Letakan HTML-nya agar CSS diatas berfungsi , caranya pada div header kita tambahkan class pembatas [ temukan div header tambahkan class pembatas dibawahnya ]

<header id='header-wrapper'>

<div class='pembatas'>

<b:section class='header' id='header-kiri' maxwidgets='1'><b:widget id='Header1' locked='true' title='(Header)' type='Header'></b:widget> <b:section class='header' id='header-kanan' maxwidgets='1'/>

</div>

</header>

5. Silahkan simpan template dan lihat hasilnya

Cara membuat header blog menjadi responsive dan fullscreen memang sedikit susah bagi Newbie yang belum mengenal css dan html , Blogger Newbie semangatttttttttttt..

Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara Membuat Header Blog Menjadi Responsive. Terima kasih dan semoga bermanfaat….. 

Cara Membuat Design Template Blog Menjadi Responsive

Salam NEWBIE artikel kali ini dari Firanewbie tentang Cara Membuat Design Template Blog Menjadi Responsive . Bagaiamna cara membuat template menjadi responsive ?

Pada dasarnya membuat design blog menjadi responsive sangatlah mudah , Sobat newbie  hanya perlu mengubah satuan pixel menjadi satuan persen serta memanfaatkan media queris , kali ini ada 3 cara termudah untuk mengubah template blog anda menjadi responsive , cara ini manjur lho , kalau gak percaya silahkan cek template saya , pasti template saya responsive . anda bisa lihat screenshot dibawah ini , dibawah ini merupakan demo blog saya dilihat di tablet dan di handphone , hembs tampilanya sangat menarik bukan ?

Baca juga : Cara membuat template Blog sendiri mulai dasar

Berikut Cara Membuat Design Template Responsive Sendiri di Blog

1.Tempatkan dulu meta tag dibawah ini diatas kode </head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Perhatian MS Internet explorer versi 8 dan yang lebih rendah tidak support tag di atas, tapi tenang aja anda bisa menggunakan bantuan respond.js maupun media-queries.js di IE dengan meta tag berikut ini :

<!--[if lt IE 9]>  

     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 

    <![endif]-->

2. Ubah ukuran pixel menjadi ukuran persen seperti dalam contoh CSS dibawah ini:

.sidebar{

    width:300px;

    }

    .content{

    width:700px;

    }

    .wrap{

    width:1024px;

    }

Diatas lebar Grid utama adalah dalam reolusi width:1024px dan untuk sidebar width:300px dan content width:700px. Disini saya coba jelaskan formula dan kalkulasi sederhana dalam mengkonversi nilai px (pixel) agar bisa diganti dengan satuan % (percent)

   
target / context = result

300px / 1024px = width: 29.296875%; /* 300 (originally 300) / 1024 */

700px / 1024px = width: 68.359375%; /* 700 (originally 700) / 1024 */

Dari hasil kalkulasi diatas maka bisa didapatkan nilai percent dalam koding CSS seperti dibawah ini

.sidebar{

    width:29.29%;

    }

    .content{

    width:68.35%;

    }

    .wrap{

    width:1024px;

    }

Formula diatas sebenarnya bisa juga digunakan untuk menghitung ukuran text (font size), Katakanlah konteks normal untuk ukuran font dalam body adalah 16 piksel. Jika kalian ingin menetapkan bahwa H1 harus 24 pixel, maka kalian bisa mengganti dengan satuan em dengan cara menghitungnya sebagai berikut:

24px / 16px = 1,5em

Dengan gaya CSS akan didapat koding seperti ini:

h1 {

    font-size: 1.5em;

    }

Kemudian yang terkahir kita atur di versi tablet , atau hp dengan menggunakan media queries caranya kita pasang media queries berikut , kemudian kita buat float none dan ukuranya menjadi 100%

@media screen and (max-width:768px){

    /* CSS styles */

    .sidebar, .content{

    float:none;

    display:block;

    width:auto;

    }

    }

Begitulah sahabat newdie cara membuat template blog menjadi Responsive 100% . Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara Membuat Design Template Blog Menjadi Responsive . Terima kasih dan semoga bermanfaat….

Belajar Membuat Template Sendiri dari Dasar

Salam NEWBIE, Belajar  Membuat Template Blog Sendiri dengan menggunakan Notepad. Mendesign sebuah template dengan platform blogger sebenarnya bisa dipelajari sich , Newbie hanya perlu sedikit menguasi CSS dan HTML dan Java Script , Bahkan dengan menguasai CSS dan HTML saja newbie sudah bisa membuat template blogger sendiri. Yang namanya NEWBIE dan dalam tahap belajar hasil yang tidak maksimal adalah wajar, namun kemauan Sahabat newnie-lha yang kelak menentukan semuanya bisa menjadi lebih maksimal.

Template berkwalitas tidak serta merta diperoleh dalam waktu singkat , perlu ada tahapan dalam belajar untuk memperoleh hasil maksimal dalam mendesain Template , oleh sebab itulah mengapa para pembuat template sangat marah kalau link credit ( hak cipta ) hasil jerih payahnya di hapus oleh user , jadi ketika Sobat memakai template hasil download gratisan mohon jangan hapuslah link credit si pembuat template, hargailah karya orang lain jika anda ingin di hargai.

Belajar Membuat Template Blogger Sendiri

Berikut tampilan template yang akan kita buat dengan struktur , header , content , sidebar dan footer ( struktur yang sederhada saja yaaa… )

Berikut ini tips belajar membuat template blogspot sendiri

1. Sobat masuk dulu ke Akun Blogger >> Template >> Edit HTML

2. Setelah itu kelihatan gambar seperti dibawah ini

Catatan : Jangan menghapus Template Newbie yang da jadi, buatlah Blog baru untuk belajar

3. Hapus semua kode yang ada di dalam editor template tersebut ( ctrl + A lalu delete ) , kemudian copy pastekan kode dibawah ini didalam kolom editor template tersebut :

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<HTML>

<head>

   <b:if cond='data:blog.isMobile'>

      <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>

   <meta content='noindex,nofollow' name='robots'/>

    </b:if>

<b:include data='blog' name='all-head-content'/>

<meta content='xxxxxxxxxxxxxxxxx' name='google-site-verification'/>

<meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>

<meta content='xxxxxxxxxxxxxxxxx' name='alexaVerifyID'/>

<meta content='index, follow, noodp, noydir' name='robots'/>

<meta content='id' name='geo.country'/>

<meta content='Maulidia Syahfira' name='author'/>

<meta content='1 days' name='revisit-after'/>

<meta content='Indonesia' name='geo.placename'/>

<meta content='blogger' name='generator'/>

<meta content='general' name='rating'/>

<meta content='index, follow, snipet' name='googlebot'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>

 <meta content='website' property='og:type'/>

 <meta expr:content='data:blog.title' property='og:site_name'/>

 <meta content='id_id' property='og:locale'/>

 <meta expr:content='data:blog.pageTitle' property='og:title'/>

 <meta expr:content='data:blog.metaDescription' property='og:description'/>

 <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

 <title><data:blog.pageTitle/></title>

 <meta content='KEYWORD+BLOG_ANDA' name='keywords'/>

</b:if>

<b:if cond='data:blog.pageType != &quot;index&quot;'>

 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>

 <meta content='article' property='og:type'/>

 <meta expr:content='data:blog.title' property='og:site_name'/>

 <meta content='id_id' property='og:locale'/>

 <meta expr:content='data:blog.pageName' property='og:title'/>

 <meta expr:content='data:blog.metaDescription' property='og:description'/>

 <b:if cond='data:blog.postImageThumbnailUrl'>

  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

 </b:if>

 <title><data:blog.pageName/> - <data:blog.title/></title>

 <meta expr:content='data:blog.pageName' name='keywords'/>

</b:if>

 style="white-space: pre-wrap; word-wrap: break-word;"><!-- <body><div></div> -->

&lt;style type=&quot;text/css&quot;&gt;

&lt;!-- /*<b:skin><![CDATA[*/]]

<style type='text/css'>

Sebagai blogger profesional dan mengerti akan hak cipta pastinya tidak akan menghapus link ini. Hargailah karya firanewbie !

Blogger Template Newbiestyle

Name       : Firanewbie Template Blogger

Date       : 21 November 2014

Updated by : Firanewbie Blogger

*/

#navbar-iframe{height:0;visibility:hidden;display:none}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}

body{background:#fff;color:#000;margin: 0 auto;font-family:Arial, sans-serif;font-size: .8em;word-wrap: break-word;}

a:link,asmileisited{color:#3384cc;text-decoration:none;margin-left:0px;margin-right:0px;}

a:hover,#nav a:hover,#header a:hover,.post h2 a:hover,.footer a:hover,#nav h1 a:hover,#nav h2 a:hover {color:rgba(255, 2, 2, 0.85); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out}

a img{border-width:0}

img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}

.quickedit{display:none;}

.clear{clear:both;}

*/ ]]></b:skin>

</head>

<body>

<b:section class='main' id='main'>

  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>

</b:section>

</body>

</HTML>

Cara Membuat wrapper pada Template Blog

Setelah Newbie menyalih seluruh kode di atas kemudian Sobat coba membuat wrapper paling luarnya, misalnya ukuran 1024px ( ukuran bisa diubah )  caranya seperti ini :

>> Tempatkan kode CSS berikut diatas kode */ ]]></b:skin>

CSS

#wrapper{

background:#FFF;

width:1024px;

overflow:hidden;

margin:0 auto;

}

>> Agar CSS berfungsi maka Sobat harus memasang kode HTML-nya , caranya Sobat cari kode <body> kemudian letakan kode dibawah ini tepat , dibawah kode <body> tersebut

HTML

<div id='wrapper'>

>> Sekarang simpan template dan Sobat lihat hasilnya , sampai disini Sobat sudah bisa membuat template sederhana , tetapi hanya ada widget postingan saja ( selanjutnya )

Cara membuat Header

Setelah Sobat membuat wrapper, kini Sobat membuat header dan header untuk iklan  caranya

>> Tempatkan kode CSS Header berikut diatas kode */ ]]></b:skin>

CSS

#header-wrapper{width:100%;overflow:hidden;}

#header{width:262px;overflow:hidden;float:left;}

#header-ads{width:728px;overflow:hidden;float:right;}

.header .widget{padding:10px;}

>> Letakkan kode HTML berikut dan letakan dibawah <div id='wrapper'>

HTML

<header id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1'>

<b:widget id='Header1' locked='true' title='Firanewbie Template Blogger (Header)' type='Header'></b:widget>

</b:section>

<b:section class='header' id='header-ads' maxwidgets='1'/>

<div class='clear'/>

</header>

Cara Membuat Post dan sidebar di Blog

Tahapan berikutnya adalah membuat sidebar dan postingan , kali ini postingan dan sidebar yang kita buat , letak sidebarnya berada sebelah kiri ( float:left ) kemudian artikel berada disebelah kanan ( float:right ) caranya :

>>   Letakkan kode CSS Postingan dan Sidebar berikut diatas kode */ ]]></b:skin>

CSS

#artikel-wrapper{float:right;width:724px;overflow:hidden}

#sidebar-wrapper{float:left;width:300px;overflow:hidden}

#sidebar{padding:5px}

#artikel-wrapper{float:right;width:724px;overflow:hidden}

#sidebar-wrapper{float:left;width:300px;overflow:hidden}

#sidebar{padding:5px}

.sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}

>> Tempatkan kode HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>

HTML

<aside id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>

</aside>

>> Tempatkan kode HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>

HTML

<aside id='artikel-wrapper'>

>> Tutup HTML artikel tadi dengan meletakan kode penutup berikut tepat di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir.

HTML

</aside>

Cara Membuat 3 Kolom pada Footer Blog

Langkah yang terakhir adalah Sobat membuat 3 kolom pada posisi FOOTER ,  yang letaknya paling bawah , berikut cara membuat footer

>> Tempatkan kode CSS Footer berikut diatas kode */ ]]></b:skin>

CSS

#footer-wrapper{width:100%;clear:both}

.footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}

.footer{width:32%;padding:5px}

#footer-1{float:left}

#footer-2{float:left}

#footer-3{float:right}

>> Tempatkan kode HTML Footer berikut dan Letakkan tepat di atas  </div> yang terkahir

<div class='clear'/>

<footer id='footer-wrapper'>

<b:section class='footer' id='footer-1' showaddelement='yes'/>

<b:section class='footer' id='footer-2' showaddelement='yes'/>

<b:section class='footer' id='footer-3' showaddelement='yes'/>

</footer>

Jika langkah diatas telah selesai silahkan simpan template dan lihat hasilnya. Kalau masih baru ( Newbie ) pertama kali membuat template mungkin jadi pusing , tapi dengan belajar dan pengalaman ntar jadi ahli bikin template, Oh ya template di atas adalah tahap permulaan ( dasar ) masih dasar , nanti kita akan membuat menu navigasi , auto readmore , breadcrumbs , related post , share artikel dengan design Responsive

Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Belajar Membuat Template Sendiri dari Dasar. Terima kasih dan semoga bermanfaat…..