Langsung ke konten utama

Postingan

Menampilkan postingan dari Februari, 2012

Kanata Blogger Template

Kanata Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Kanata Blogger Template Description Kanata is a free blogger template adapted from WordPress with 2 columns, left sidebar and grunge style. Template Author http://btemplates.com/author/deluxe-templates/ Designer 9th Sphere Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Red Light Blogger Template

Red Light Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Red Light Blogger Template Description Red Light is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, grunge style and vectorial elements. Template Author http://btemplates.com/author/falcon-hive/ Designer TemplateLite Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Menu Dropdown dengan Background

Menu Dropdown dengan Background | Tutorial Blog Dulu saya pernah posting cara Membuat Menu Dropdown , pada postingan ini kita akan membuat menu dropdown dengan background image. Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut : Login ke blogger Anda, klik menu Design > Edit HTML . Lalu beri centang expand widget templates , sebaiknya backup dulu template Anda. Cari kode <b:skin><![CDATA[ , lalu letakkan kode berikut diatasnya . <script> var last_expanded = &#39;&#39;; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == &#39;hide&#39;) { if (last_expanded != &#39;&#39;) { var last_obj = document.getElementById(last_expanded); last_obj.className = &#39;hide&#39;; } obj.className = &#39;show&#39;; last_expanded = id; } else { obj.className = &#39;hide&#39;; } } </script> Kemudian cari kode ]]></b:skin> , letakkan kode berikut ini diatasnya . .d

Photoplus Blogger Template

Photoplus Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Photoplus Blogger Template Description Photoplus is a free premium blogger template with 3 columns, gallery-styled, perfect for photologs and minimalist. Excellent layout for blogs about photography. Template Author http://btemplates.com/author/dante-araujo/ Designer Dante Araujo Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Optimasi SEO Menggunakan Anchor Text

Optimasi SEO Menggunakan Anchor Text | Tutorial Blog Anchor text merupakan sebuah teks berisi tautan link yang menuju pada sebuah halaman. Anchor Text dapat meningkatkan pageview, memperbanyak backlink dan meningkatkan trafik. hal tersebut dapat membuat sebuah situs memiliki tempat penting pada halaman Search Engine Result Page (SERP). Dalam membuat Anchor text sebaiknya mengandung kata kunci yang di targetkan, menarik, dan mengandung arti yang mudah di mengerti. Berikut beberapa contoh penulisan kode html untuk membuat anchor text : Membuat Anchor Text sesuai judul Blog. <a href="http://wadahtutorial.blogspot.com/">Tutorial Blog</a> Membuat Anchor Text untuk salah satu artikel. <a href="http://wadahtutorial.blogspot.com/2011/12/widget-recent-comment-valid-xhtml.html">Widget Recent Comment Valid XHTML</a> Membuat Anchor Text pada image. <a href="http://wadahtutorial.blogspot.com/"><img alt="Tutorial Blog" border=&

Web Blog Blogger Template

Web Blog Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Web Blog Blogger Template Description Web Blog is a free blogger template with 2 columns, right sidebar, slideshow and abstract. Template Author http://btemplates.com/author/alexiel/ Designer Template Mo Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Menampilkan Tag Clouds di Blogger

Menampilkan Tag Clouds di Blogger | Tutorial Blog Selain label dalam bentuk daftar, blogger juga menyediakan label dalam bentuk Cloud, jika fitur ini diaktifkan, label yang lebih populer muncul dalam font yang lebih besar daripada label yang kurang populer. Berikut cara Menampilkan Tag Clouds di Blogger : Login ke akun anda klik Dasbor > Design > Page Elements > Add a Gadget . Kemudian pilih Label . Pada display ganti dari Daftar menjadi Cloud . Lalu klik Save . Sekarang Lihat blog anda, label clouds harusnya sudah di tampilkan. Kalau belum berhasil, lanjutkan dengan langkah berikut : Klik Design > Edit HTML , beri centang pada Expand Template Widget . Copy kode dibawah ini, letakkan tepat di atas kode ]]></b:skin> /* Label Cloud Styles */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelClou

Masunurin Blogger Template

Masunurin Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Masunurin Blogger Template Description Masunurin is a free premium blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, space for ads and neutral colors. Template Author http://btemplates.com/author/themecraft/ Designer Padd IT Solutions Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Optimasi SEO pada Image

Optimasi SEO pada Image | Tutorial Blog Image dapat menjadi salah satu sumber traffic dalam optimasi seo. Namun Image tersebut harus kita optimalkan, maksudnya Image yang kita beri "ALT TAG", hal ini merupakan bagian dari optimasi seo on page. Sama halnya seperti tag HTML normal lainnya yang digunakan sebagai teks alternatif ketika image/gambar tidak dapat ditampilkan. Untuk mengoptimalkan image, dapat kita lakukan melalui dua cara, yaitu melalui nama file dan penggunaan alt tag. Alt berasal dari kata alternatif, hal ini memungkinkan kita untuk menentukan teks alternatif bagi gambar jika tidak dapat ditampilkan karena bermacam alasan, juga sebagai identitas gambar/image di search engine, misalkan saat kita mencari pada Google Image, maka Alt tag tersebut sangat berfungsi pada hasil pencarian. Ketika search engine menjelajah halaman web atau blog, mereka menganggap nama file dan alt tag sebagai isi gambar. Berikut beberapa Tips yang mungkin bisa Anda gunakan dalam Optimasi SEO

MusicBlog Blogger Template

MusicBlog Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name MusicBlog Blogger Template Description MusicBlog is a free blogger template with 2 columns, right sidebar, exclusive design for Blogger, slideshow, social icons and vectorial elements. Excellent layout for blogs about girls or music. Template Author http://btemplates.com/author/deluxe-templates/ Designer Deluxe Templates Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Recent Comments Blogger dengan Avatar

Membuat Recent Comments Blogger dengan Avatar | Tutorial Blog Tutorial kali ini sama saja dengan tutorial memasang Widget Recent Comment Valid XHTML, cuman kodenya aja yang berbeda. Jadi untuk tutorial yang lebih jelas silakan baca Widget Recent Comment Valid XHTML . Untuk postingan ini saya buat singkat saja. Berikut caranya : Buat widget HTML/JavaScript. Beri judul Recent Comments atau apalah terserah Anda. Lalu masukkan kode berikut : <style type="text/css"> ul.tb_recent_comments{list-style:none;margin:0;padding:0;} .tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-sty

Outubro Blogger Template

Outubro Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Outubro Blogger Template Description Outubro is a free blogger template with 2 columns, right sidebar, neutral colors and posts thumbnails. Template Author http://btemplates.com/author/templates-novo-blogger/ Designer Templates Novo Blogger Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Menampilkan Smiley Pada Postingan Blogger

Menampilkan Smiley Pada Postingan Blogger | Tutorial Blog Sebenarnya sudah banyak postingan dari para blogger master tentang Menampilkan Smiley Pada Postingan, namun tidak ada salahnya saya memposting ini, kali aja masih ada yang belum tau. Trik ini dapat membuat tampilan postingan sobat menjadi lebih menarik, karena kita dapat menampilkan pic smile seperti , , , , , , dan lain lain. Caranya gampang Sob, silakan ikuti tutorial berikut : Login ke blogger trus pilih Layout > Edit HTML . Beri tanda centang pada Expand Widget Templates . Cari kode ini ]]></b:skin> . Masukkan script berikut ini dibawah kode ]]></b:skin> <script src='http://wadah-tutorial.googlecode.com/files/ysmileys.js' type='text/javascript'/> Terakhir klik Save Template . Selesai... Berikut beberapa kode yang dapat Anda gunakan : :D :P :) ;) :-S :-B :-h :-a :x :( :-t :-bd :-c :-* 8-7 8-| 7:P =D7 8-} X( Sebenarnya masih ada beberapa kode lagi, berhubung saya sudah lupa jadi seg

Tips Dalam Mengganti Template

Tips Dalam Mengganti Template | Tutorial Blog Untuk membuat blog terlihat lebih cantik biasanya kita menambahkan beberapa widget pada blog, atau mengedit css tempalate, bisa juga dengan mengganti template tersebut. Namun sebelum Anda mengedit atau mengganti template blog ada baiknya Anda perhatikan beberapa hal dibawah ini. Tips berikut hanya menurut saya yang masih baru dalam dunia blogging, jadi kalau ada kesalahan harap di koreksi, jika ada tambahan dari Sobat blogger atau para master silakan Anda tulis di kolom komentar di bawah postingan ini. Berikut Tipsnya : Pastikan Sobat back up template anda terlebih dahulu. Caranya masuk ke dasboard > Design / Rancangan > Edit html, lalu klik Download Full Template / download template lengkap. Simpan semua kode html yang Anda tambahkan pada template tersebut di sebuah Notepad. Jadi jika Anda memerlukannya sewaktu-waktu, Anda tinggal copy saja dari Notepad. Simpan ke Notepad semua kode widget yang Anda gunakan. Sesuaikan design template

Membuat Template Blog Secara Online

Membuat Template Blog Secara Online | Tutorial Blog Cara yang satu ini banyak digunakan para blogger untuk mengganti template, walaupun ada cara yang lebih mudah yaitu dengan mendownload template jadi dan langsung menguploadnya, atau dengan menggunakan fasilitas Blogger template designer, namun dengan template hasil karya sendiri tentunya Anda memiliki kebanggaan tersendiri. Dibawah ini ada beberapa situs online gratis yang dapat sobat gunakan untuk membuat template sendiri. Situs yang menyediakan fasilitas membuat template biasanya sudah menyediakan template template tertentu yang nantinya bisa anda edit sendiri. berikut ini situs yang menyediakan editing template secara online. Profilebrand : menyediakan fasilitas edit template gratis, kebanyakan template yang disediakan untuk kita edit bertema jaringan sosial ( facebook, twitter, myspace dll ) Pimp my Profile : Untuk situs ini anda bisa membuat template blog, Myspace, dan friendster. Silahkan langsung saja ke situsnya. DoTemplate

FreeDream Blogger Template

FreeDream Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name FreeDream Blogger Template Description FreeDream is a free blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, minimalist, simple look, geometric motifs and vectorial elements. Template Author http://btemplates.com/designer/dreamweaver-gratuit/ Designer Dreamweaver Gratuit Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Tombol To Page Down WordPress

Membuat Tombol To Page Down di WordPress.com | Tutorial Blog Beberapa waktu yang lalu saya pernah posting tentang Membuat Tombol Back To Top di WordPress.com , pada postingan tersebut ada pertanyaan dari sobat ibnzuhri tentang membuat tombol back to down atau to page down di wordpress.com. Jadi pada postingan kali ini akan saya buat tutorial tentang Membuat Tombol To Page Down di WordPress.com. Berikut tutorialnya : Login ke Wordpess Anda, Klik Appearance > Widgets . Drag Text ke Sidebar. Lalu letakkan kode berikut pada area Text. <div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title=' to page down '> <img src=' URL Icon ' /></a></div> Ganti URL Icon dengan URL Image, Contoh : <div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title=' to page down '><img src=' http://i1193.photobucket.com/albums/aa345/bakulat

SimpleVideoblog Template

SimpleVideoblog Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name SimpleVideoblog Template Description SimpleVideoblog is a free blogger template with 2 columns, right sidebar, gallery-styled, perfect for photologs, minimalist, space for ads, footer columns and posts thumbnails. Template Author http://btemplates.com/author/free-blogger-template/ Designer FBTemplate Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

HostingPro Blogger Template

HostingPro Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name HostingPro Blogger Template Description HostingPro is a free blogger template adapted from WordPress with 2 columns, right sidebar, space for ads, slideshow, social icons, posts thumbnails, tabs and drop down menu. Template Author http://btemplates.com/author/pbtemplates/ Designer PBTemplates Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Membuat Tombol di Blog

Membuat Tombol di Blog | Tutorial Blog Pada sebuah postingan atau pada widget mungkin kita ingin membuat sebuah Tombol entah itu berisi link atau hanya tampilannya saja. Bagi Sobat yang belum tahu caranya silakan baca tutorial kali ini. Membuat tombol untuk Blogspot : Login ke blogger Sobat. Untuk membuat tombol di postingan klik Posting > New Post , lalu pilih tab Edit Html . Jika Anda ingin menampilkannya di widget klik Design > Page Element > Add a Gadget > HTML/Javascripts . Lalu letakkan kode untuk menampilkan tombol. (Untuk kodenya saya tulis dibawah tutorial ini) Untuk Wordpress.com : Login ke dasboard Anda. Untuk menampilkan di postingan klik Posts > Add New , lalu pilih tab Html . Untuk menampilkan di widget klik Appearance > Widgets , lalu letakkan Text pada sidebar. Selanjutnya letakkan kode untuk menampilkan tombol. Untuk kodenya dapat Sobat lihat dibawah ini : Tombol kodenya seperti ini : <button>Tombol</button> Posisi tombol ditengah : Tom

Macam Macam Div Style

Macam Macam Div Style | Tutorial Blog Pada postingan ini saya akan berbagi tentang beberapa kode untuk membuat Div Style. Langsung saja Sob, berikut kodenya : Kode : <div style="border: 2px solid blue;"> <div style="border: 3px solid red;"> <div align="center"> Tulis Text Disini</div> </div> </div> Hasilnya : Tulis Text Disini Kode : <div style="border: 4px solid yellow;"> <div align="center"> <span style="color: coral;">Tulis Text Disini</span></div> </div> Hasilnya Tulis Text Disini Kode : <div style="border: 3px double #ff0000; padding: 5px;"><div align="center">Tulis Text Disini</div></div> Hasilnya : Tulis Text Disini Kode : <div style="border: 3px double #0000ff; padding: 5px;"><div style="border: 2px solid #0077ff; padding: 5px;"><div align="center">Tulis

Mengganti Tampilan Thread Comment

Mengganti Tampilan Thread Comment | Tutorial Blog Postingan ini Lanjutan dari Menampilkan Thread Comment pada Custom Template , jika Sobat sudah berhasil Menampilkan Thread Comments biasanya tampilannya polos tanpa variasi. Pada postingan kali ini kita akan meng-edit css Thread Comment agar tampilannya seperti gambar berikut. Caranya cukup mudah Sob, Sobat cukup menghapus kode css komentar di template Anda, lalu ganti dengan kode berikut : Kode : .comments {   clear: both;   margin-top: 10px;   margin-bottom: 0px;   line-height: 1em; } .comments .comments-content { font-size: 12px; margin-bottom: 16px; font-weight: normal; text-align:left; line-height: 1.4em; } .comments .comment .comment-actions a { display: inline-block; margin: 0; padding: 1px 6px; border: 1px solid #dddddd; border-top-color: #eeeeee; border-left-color: #eeeeee; color: #333333 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; bo

HomeDesign Blogger Template

HomeDesign Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name HomeDesign Blogger Template Description HomeDesign is a free blogger template with 2 columns, right sidebar, rounded corners, exclusive design for Blogger, slideshow and social icons. Template Author http://www.deluxetemplates.net Designer Deluxe Templates Instructions URL How to install Blogger Template Demo Download Source : btemplates.com

Menampilkan Thread Comment pada Custom Template

Menampilkan Thread Comment pada Custom Template | Tutorial Blog Thread Comment merupakan fitur baru dari blogger yang telah resmi diluncurkan pada 12 januari yang lalu, fitur ini otomatis berlaku pada blog yang menggunakan tampilan dynamic views, jadi untuk tampilan klasik dan custom template fitur ini tidak otomatis di tampilkan. Pada postingan kali ini saya akan membuat tutorial tentang cara Menampilkan Thread Comments pada Custom Template, trik ini terbukti berhasil pada template saya ini, walaupun pada template saya sebelumnya trik ini malah mambuat halaman posting saya hilang, jadi sebaiknya backup dulu template Anda sebelum di edit. Berikut cara Menampilkan Thread Comment pada Custom Template : Login ke Blogger, Klik Design/Rancangan > Edit HTML . Beri tanda centang pada Expand Template Widget . Tips : Biasakan mendownload template untuk membackup template sebelum di edit. Cari kode <b:include data='post' name='comments'/> , pada template saya kode ters