Garsela blog

Showing posts with label template. Show all posts

Monday, December 16, 2013

Cara Setting Template di Blogger

Setelah anda memahami bagaimana Cara Memasang Widget di Blogspot. Tahap berikutnya adalah belajar bagaimana Cara Setting Template di Blogger. Setting tersebut bisa Anda lakukan untuk merubah warna font Judul blog, atau warna Judul Artikel dan Deskripsi, bisa juga merubah warna Background, Tata letak dan banyak lagi setting lainnya yang bisa dipelajari. Hal ini dilakukan untuk merancang Blog supaya lebih menarik.

Cara mengedit Blogspot dengan menggunakan Perancang Template ini ada 5 pilhan. Diantaranya ada Template, Latar Belakang, Sesuaikan Lebar, Tata Letak dan Tingkat Lanjut untuk mengatur CSS. Untuk itu silahkan Anda pilih sesuai keinginan. Setiap setelah melakukan perubahan jangan lupa untuk klik tombol Terapkan ke Blog. Letak Tombol tersebut berada di sebelah kanan atas halaman Perancang Template.

Silahkan Login ke Akun Blogger Anda
Pada Menu Dashboard pilih Template
Lalu klik Sesuaikan

Nanti akan tampil halaman Perancang Template Blogger seperti pada gambar dibawah ini.

Silahkan pilih dan tentukan setting menurut keinginan Anda. Dari mulai menyesuaikan lebar halaman artikel, lebar widget sidebar, mengatur warna Font, merubah warna backround atau latar belakang, dan banyak lagi pengaturan lain yang bisa anda lakukan pada halaman Perancang Template Blogger ini.

Setelah Anda menguasai bagaimana cara melakukan setting pada template, langkah selanjutnya yang harus dipelajari adalah bagaimana mengisi blog dengan artikel yang berkualitas. Untuk mengetahui bagaimana menulis artikel yang baik, silahkan Anda baca pada posting Cara menulis Artikel di Blog.

Saturday, December 7, 2013

Tweety Bird Blogger Template

Tweety Bird Blogger Template, theme tweety Alhamdulillah setelah sekian bulan berlalu terbitnya template perdana desain saya yaitu (Al-Aswad Al-Fateh dan Natural Green Template). Hari ini saya bisa menambahkan koleksi free blogger template di dunia maya ini dengan sebuah template sederhana tweety bird blogger template.

Template tweety ini merupakan template request khusus dari seorang sahabat yang banyak memberikan inspirasi lahirnya berbagai tutorial di blog ini, inspirasi yang hadir dengan banyaknya pertanyaan yang diajukannya :-) Karenanya sebagai satu ungkapan terimakasih padanya saya upayakan dengan segala keterbatasan yang ada untuk memenuhi request tersebut.

Template ini didominasi dengan image tweety mulai dari header, icon pada post dan sidebar titel sampai bullet link serta nuansa warna kuning, karena Suci merupakan fans berat tweety bird dan warna kuning. Sedikit ada tambahan nuansa biru karena selain kuning sobat Suci juga toleran dengan biru dan pink...bukan gtu de suci? Tapi maaf saya tidak memoles pink pada template ade, soalnya blog saya tidak pingin ada saingannya... hehe becanda lagi.

Kategori template: Tiga kolom, featured post slider, tiga kolom footer dan sebuah tab view sederhana.

Berikut sedikit panduan penggunaan:

1. Untuk mengedit menu navigasi horizontal cari kode berikut: <div class=menuhorisontal> perhatikan jajaran link dibawah kode tadi dengan anchor teksx silahkan diganti dan sesuikan!

2. Untuk menambahkan featured post slider, tentu setelah sign in pada bagian elemen halaman>>> tambah gadget>>> HTML/JavaScript>>> tambahkan kode berikut:

<div id="featured">

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Twitter Traffic </a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZyTglznWd47g7l8U1CsdadOhEwjGN_mSZeZkVbTr4nvAf3rletPJk9T5QKPyzXUBPMJTU09GDPe3V1i_TZlYqcpcssMb72fCDZNUSMDRKKJ87-mbfnTT8ufnIT1RbtzaM7xPUZiOoKaqt/s400/twitter_lg2.jpg" /></div>
<p>If you aren’t using twitter as a way of generating free traffic to your website, you’re missing out on one of the easiest marketing strategies ever to hit the Internet.
With so many social communities online, it is easy to see why Internet Marketers with limited time have been drawn to the simplistic interface and speediness...</p>
<div class="featured-meta">
<span class="featured-date">11th October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Email Marketing</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1EEJvSQ-H7KMkuB4xgAQQyckUpIHPd32u-8BPfgOzql1wNXNRzn2fBtrxFnBlOwlHGnVF_w_pDhxmqjd6a3NUhjz3n98t5utdAod_Jf_cHMLX0qjumfomb7LKoQ0RCbt69_mUnIrVfsR3/s400/ebook_350.png" /></div>
<p>Online marketing may have developed a sudden surge these past few years, but many in the know how have felt its rise even from way then. As more internet based businesses are put up, the need to develop new marketing skills and knowledge based on this new medium have arisen. More and more marketing strategies...</p>
<div class="featured-meta">
<span class="featured-date">1st October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Get paid to blog at today.com</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMkJ9nhb2qA0tjE3vp_Sb7lop0BkoGYuGN2Lsch5YznfmvUKmxHV6s3pngS9ue9XuRU-VAQa4H886JPte_HdXlK2b4zym0iQZOqRf7plsPA0V5Px-AI6pykunTGOHIq2FhNt0_P1ShD1rM/s400/070125_the_traffic_bully.gif" /></div>
<p>Today.com is a free blogging platform that works like Blogger and Wordpress, except that you will be paid for blogging at Today.com. Payment will be made on the 10th of each month via Paypal or check with $50 minimum payment.
How to Earn Money with Today.com
1. $2.00 per 1000 unique visitors for the first 30 days.
2....</p>
<div class="featured-meta">
<span class="featured-date">25th March 2009</span>
<span class="featured-comment"><a href="/#comments">4 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Free download CPA marketing guide</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmKaNlA1jqugoD2IY312Ob2pXJEMWP2ABAkgi6qBkZdmjgISt1f2nflWcKI_ieS3tmTwIBF0Mj-kXpcPRUG0zw59W7saw-6iS0be6ddkqqZNaYowWyOxycg_rzC-r-iqKJMieA-e4Cs4Ek/s400/downloadreport.jpg" /></div>
<p>Gauher Chaudhry, the man behind Pay Per Click Formula, has just released an 89 page insider’s guide to CPA marketing profts for FREE!
That’s right, FREE as in cost you zero cents to get the most comprehensive guides on CPA marketing and learn the way to earn as much as $100,000 per day with CPA...</p>
<div class="featured-meta">
<span class="featured-date">18th March 2009</span>
<span class="featured-comment"><a href="/#comments">10 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Delicious ice cream post</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWBlC8SVs1txy1P0oKAG9ssHN5KzfxGeu_-5bgtSqvVccVDmR4diDLE72o_KjsQDugEQDwBC127jnCMVWcQW7txuqLtlzd1QRpGVHdGUAQYhpxp2PvnSdkacm_484o1Bjlzzxz-cysdCIs/s400/ice_cream.jpg" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec lorem. Duis erat. Mauris faucibus, nibh sed scelerisque commodo, libero lacus posuere diam, at ornare felis quam vitae mauris. Nam in diam. Cras nec metus. Nam suscipit elementum eros. Mauris ut nibh. Maecenas id velit. Nulla pellentesque porttitor dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing...</p>
<div class="featured-meta">
<span class="featured-date">3rd December 2008</span>
<span class="featured-comment"><a href="/#comments" title="Comment on Delicious ice cream post">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

</div>

Silahkan ganti isi dari featured post diatas! Simpan widget dan drag diatas main atau kolom posting.

3. Untuk menambahkan isi tab view sederhana, masih pada bagian elemen halaman>>> tambah gadget>>> HTML/JavaScript>>> tambahkan kode berikut:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
Disini letakkan kode untuk menu tab 1
</div>
<div style="width: 99%; height: 200px;" class="Pages">

<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>


<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>


<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>

</div></div></form>
<script type="text/javascript">tabview_initialize(TabView);</script>

<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href=http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html target="_blank" title="Tabview Widget">Add This Widget To Ur Blog</a></div>

Silahkan isi setiap menu tab, simpan widget drag pada bagian sidebar yang diinginkan. Simpan lagi. Selesai

Download template disini, Untuk preview lihat disini.

Sunday, November 10, 2013

Cara Membuat Template Blog Menjadi Lebih SEO Friendly

Cara Membuat Template Blog Menjadi Lebih SEO Friendly - Kali ini ini-caranya.blogspot.com akan berbagi tips seputar blog, Tips kali ini adalah membuat template lebih SEO Friendly. Banyak cara yang harus kita tempuh untuk membuat template blog lebih seo friendly. Salah satunya adalah dengan memilih template yang seo. Tapi tidak semua template itu seo dimata google. Jadi kita harus turun tangan untuk membuat template lebih seo friendly.
Nah, jika mungkin Anda ingin membuat template blog Anda agar menjadi template SEO friendly maka cara-cara di bawah ini mungkin bisa bermanfaat buat Anda. Berikut cara-caranya :
1. Page Title
Biasanya sob format page title dari blogger adalah seperti ini, JUDUL BLOG : JUDUL POSTING. Nah, agar blog kita lebih disukai oleh Google, kita harus merubah format page title standar itu menjadi seperti ini, JUDUL POSTING | JUDUL BLOG.
Caranya cari kode berikut ini di Edit HTML, cukup dengan menekan tombol Ctrl+F atau F3 pada keyboard anda :

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

Kalau udah dapet kodenya, silakan Anda hapus dan ganti dengan kode berikut ini :

    <b:if cond=data:blog.pageType == "item">
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>

Atau Anda juga bisa tambahkan dengan beberapa kata kunci (keyword).

    <b:if cond=data:blog.pageType == "item">
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/> | KEYWORD ANDA | KEYWORD ANDA </title>
    </b:if>

Ganti kode "KEYWORD ANDA" dengan keyword yang Anda incar. Setelah semua selesai jangan lupa untuk save template.
2. Meta Keyword dan Deskripsi
Suatu mesin pencari seperti Google sangat menyukai sebuah website/blog yang jelas tema dan isi content-nya. Jadi, Anda harus tambahkan suatu tag yang namanya meta tag. Caranya adalah dengan menambahkan kode berikut ini sebelum kode <b:skin><![CDATA[/*.

    <b:if cond=data:blog.url == data:blog.homepageUrl>
    <meta name="description" content="DESKRIPSI BLOG ANDA" />
    <meta name="keywords" content="KATA KUNCI, KATA KUNCI, KATA KUNCI" />
    </b:if>

Setelah itu, save template Anda.
3. Memasang Breadcrumbs
Breadcrumbs adalah menu navigasi yang ada di atas sebuah posting atau artikel. Contohnya bisa dilihat diblog saya ini. Cara pasangnya juga sudah banyak dibahas di blog-blog guru blogging. Tinggal di search saja di google kan sudah banyak bertebaran :)
4. Memasang Related Post
Related post sangat bagus untuk SEO maupun buat pengunjung. Jadi pasanglah segera related post di blog Anda. Caranya sudah banyak dibahas di blog-blog para guru blogging. Tinggal buka atau klik disini
5. Mematikan Setting Blog Archive (Arsip Blog)
Google sangat membenci dengan yang namanya duplicate content. Jadi ketika kita mengaktifkan opsi blog arsip, misalnya kejadiannya seperti ini, Anda ingin membuat sebuah blog di blogger.com. Lalu membuat 3 posting, 1 buah setiap hari. Maka di halaman utama atau homepage Anda akan ada 3 posting dan sebuah link arsip seperti ini, http://BLOGANDA.blogspot.com/2013_03_01_archive.html, yang memunculkan 3 posting yang sama dengan yang dimunculkan oleh homepage. Intinya, 2 buah link yang memunculkan sebuah halaman yang sama. Bagi Search Engine apa lagi Google, ini adalah masalah serius. Oleh karena itu kita harus me-nonaktifkan opsi arsip.

Caranya, cukup klik tab Setting, pilih Archiving. Nah, pada bagian Archiving Frequency ubah menjadi No Archive. Selesai deh

6. Menambahkan Kode ‘Rel=Canonical’
Gunanya kita menambahkan ‘rel=canonical’ adalah untuk menghindari konten ganda, karena seperti para Master of SEO bilang bahwa Google sangat tidak dapat mentolerir sebuah duplicate content. Caranya mudah, cukup klik Edit HTML, lalu Anda tambahkan kode berikut setelah kode <head>.

<link expr:href=data:blog.url rel=canonical />

Save template dan selesai.
7. Tag Heading
Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting Anda dengan tag H1. Caranya cari kode berikut!

<b:if cond=data:post.title>
<h3 class=post-title entry-title>
<b:if cond=data:post.link>
<a expr:href=data:post.link><data:post.title/></a>
<b:else/>
<b:if cond=data:post.url>
<a expr:href=data:post.url><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Kode yang dicetak tebal dihapus dan diubah dengan tulisan h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>.

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Nah, bagaimana sekian tips Cara Membuat Template Blog Menjadi Lebih SEO Friendly semoga membantu yah

Friday, November 1, 2013

Dee nesia Ganti Template Demi Kecepatan Load

Akhirnya saya memutuskan untuk mengganti template blog blogini. Selain bahwa mengganti template blogspot tidak lagi sulit, hehe …. Ada beberapa alasan yang menyebabkan pergantian template blog ini.
Template Baru Dee-nesia Demi Kecepatan Loading

Template Baru Dee-nesia Demi Kecepatan Loading

Pertama, saya sedikit bosan dengan template sebelumnya. Blog blogini ini sebelumnya memakai template Ethereal. Bagus sekali, dengan warna biru cerah yang segar dan navigasi yang baik. Saya suka sekali. Kalau anda ingin mencobanya silahkan ikuti Cara Mudah Mengubah Template Blogspot.
Kedua, template sebelumnya lambat sekali di load. Template Ethereal dan template lainnya yang disediakan gratis oleh blogger itu, rata-rata berat. Artinya jelek untuk SEO-nya. Tampilannya memang bagus, tapi jadi tidak ramah untuk pengunjung dengan akses internet lelet macam saya. Ketika memakai template Ethereal, blog blogini ini berukuran lebih dari 250 kb! Itu kalau dibuka dengan Opera Mini 5.2 yang sudah mengkompres datanya, lha kalau tidak dikompress kan jadi besar sekali. Coba buka blognya kang Rohman dengan Opera Mini, cuman 58 kb! Itu sebabnya blognya kang Rohman bisa cepat dibuka, dan pengunjung bisa segera menikmati hidangannya, hehe.... Dengan template yang baru ini, blogini bisa mengurangi beratnya menjadi sekitar 43 kb saja.

Ketiga, saya ingin mencoba lepas dari banyak widget yang tidak terlalu banyak ada gunanya, tapi justru memperberat loading blog ini. Mungkin saya hanya akan mempertahankan beberapa elemen saja, seperti widget statistik blog dari alexa dan Blogger, Google Friend Connect, Posting Terpopuler dari Blogger, Langganan dari FeedBurner, Facebook Like, dan Posting Terbaru. Saya akan memberanikan diri membuang semua widget yang berasal dari web directory.
Template baru blog blogini ini awalnya tidak mempunyai footer 3 kolom, saya baru memasangnya tadi malam. Kata para suhu blogger itu, footer 3 kolom punya efek bagus untuk SEO blog. Kalau anda ingin mempunyai footer 3 kolom seperti ini, ikuti Cara Memasang Footer 3 Kolom di Blogspot.
Semoga akan baik-baik saja. Doakan saya ya ….