CARA BUAT BLOG: Maret 2012

Rabu, 28 Maret 2012

Cara Membuat Rate bintang di blog

Biasanya kamu ingin mengetahui reaksi dari pembaca atau pengunjung terhadap artikel yang telah kamu buat. sekarang saya akan memberitahu kamu cara memasang rate bintang dengan mudah. langsung saja kita pelajari.

Kunjungi Website www.polldaddy.com
Sign - up atau register terlebih dahulu dengan memilih tombol "See plans & Pricing"

Pilih yang Free account untuk yang gratis, kemudian klik Sign - up.

Isi Formulirnya, Kemudian klik "Create My Account"
Akan Muncul Dashboard kamu.
Pilih "Create a new..."
Akan Muncul Pilihan bermacam - macam widget. Pilih yang Rating

Atur Ukuran Bintang kamu.

Langsung saja ketahap Berikutnya yaitu Text. Pada langkah layout & Fonts kita lewati saja.
Pada pengaturan Text kamu bisa mengatur Keterangan Bintang kamu. misalnya pada bintang 1 tertulis bad, bisa kamu ganti dengan Buruk, parah, hancur atau lain sebagainya.

Kemudian bila sudah mengaturnya, silahkan klik tombol Save Rating Widget pada bagian bawah halaman sebelah kanan.
Copy Script code widgetnya yang terdapat pada text area

Langkah 2 :

Login blogmu.
pilih rancangan.
pilih elemen laman
pilih tambah gadget.
pilih html/javascript.
paste script code widget tadi pada kotak yang tersedia.
Save

cara memasang emoticon Onion head pada kotak commentar

Sekarang saya akan memberitahu kamu cara memasang emoticon onion head pada kotak commentar. Onion Head memiliki banyak emoticon lucu, tapi saya hanya memperlihatkan yang setengahnya saja karena saking banyaknya. langsung saja kita pelajari.

Login blogmu.
pilih rancangan
pilih edit html.
pilih Download Template Lengkap.

Kemudian Centang Expand template Widget.
Cari code </body>
Copy paste script di bawah ini di atas atau sebelum code </body>

Kemudian cari code <b:include data='blog' name='all-head-content'/>
Copy paste code di bawah ini di bawah atau setelah code <b:include data='blog' name='all-head-content'/><title><data:blog.pageTitle/></title>

Cara Membuat Permalink Seo di Blogspot

Kali ini saya akan berbagi cara membuat permalink seo di blogspot , namun sebelum itu saya akan menjelasakan sedikit apa itu permalink , seo permanen link atau sering disingkat dengan seo permalink adalah salah satu optimasi onpage yang berguna untuk memasang permanen link dan bertujuan untuk menambah internal link pada posting blog , untuk itu memasang permalink seo di blogspot sangat bermanfaat untuk optimasi blog kita.

Untuk buat permalink pada blogspot berbeda dengan membuat permalink pada wordpress, pada blogspot kita harus memasang permalink manual untuk dijadikan permalink otomatis pada setiap posting , itu akan membuat posting anda akan lebih kuat dalam bersaing di search engine , karena salah satu kegunaan yang paling penting untuk membuat seo permalink di blogspot adalah untuk mengdongkrak posisi posting blog di search engine.

Membuat permalink seo di blogspot

Untuk membuat permalink di blogspot cukup mudah anda tinggal ikuti langkah-langkah yang sudah saya sediakan .

Permalink Seo Blogspot

§ Masuk ke akun blogger anda.

§ Masuk ke rancangan > edit html

§ Jangan lupa untuk centang expand template widget.

§ Sekarang cari kode berikut ini ]]></b:skin>

§ Letakan kode css bawah ini di atas kode tadi

.buatpermalinkblogger

{border: 1px solid #EFF0F1;

padding: 5px;

background: #ffffff;-moz-border-radius:5px;}

.buatpermalinkblogger a

{background:none;}

img.float-right {margin: 5px 0px 0 10px;}

img.float-left {margin: 5px 10px 0 0px;}

§ Setelah itu cari kode <data:post.body/>

§ Setelah anda menemukannya lalu hapus kode tadi dan ganti dengan kode ini

<b:if cond='data:blog.pageType == "item"'>

<center><small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya.</small></center></div>

<b:else/>

</b:if>

§ Lalu tekan simpan dan lihat hasilnya

Cara buat permalink pada blog readmore

Untuk memasang permalink di blog yang sudah menggunakan readmore sedikit berbeda

§ Silahkan anda ikuti cara saya yang diatas , masuk ke blogger anda

§ Pada cara buat permalink blog diatas anda disuruh mencari kode berikut ini <data:post.body/>

§ Untuk yang sudah memasang readmore kode diatas akan ada dua.

§ Sehingga akan terlihat kodenya seperti ini :

<b:if cond='data:blog.pageType == "item"'>

<b:else/>

<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>

</b:if>

§ Anda tinggal sisipkan kode permalink seo anda di bawah kode berikut ini

<b:if cond='data:blog.pageType == "item"'>

§ Maka permalink anda tidak akan terlihat pada homepage , hanya akan terlihat saat anda membuka posting blog.

Cukup mudah bukan cara membuat permalink di blogspot , saya sudah menjelaskan kegunaan permalink dan cara memasang permalink di blogspot , silahkan bila ada yang ingin ditanyakan tinggal berkomentar saja .

Kamis, 22 Maret 2012

Cara Redirect Blogspot

Cara redirect blogspot atau cara redirect bloggersebenarnya gampang gampang susah. Untuk ukuran blogger seperti blogger sragen ini pasti akan mengalami kesusahan jikalau ingin 301 redirect blogspot xi3. Tapi untuk anda yang sudah mahir menggunakan blogspot mungkinredirect blogspot bukanlah masalah.

Cara redirect blogger sebenarnya sama dengan cara membuat redirect website lain. Hanya saja sudah pernah saya singgung bahwa menggunakan blogger banyak sekali keterbatasannya. Makanya blogger bukanlah cms untuk pemalas dan bukan juga untuk para pakar coding. Tapi karena keterbatasannya itulah yang merupakan tantangan buat yang suka coding.

Cara redirect blogspot yang ingin di bahas blogger sragen kali ini hanyalah sebuah code sederhana namun kadang blogger yang sudah lama nulis pun belum mengetahui caranya. Cara redirect blogger ini bukan redirect blogspot to custom domain akan tetapi sebuah url pilihan entah itu redirect blogspot to domain, redirect blogspot subdomain, redirect blogspot to wordpress dll, pokoknya semua target

Untuk bisa redirect yang perlu dilakukan adalah menentukan target. Dan disini cara membuat redirect di blogspot hanya terbatas melalui meta refrash, javascript window.location, frame dan frameset serta error 404. Untuk kali ini kita bahas dulu tentang meta refrash.

<meta content='0; url=http://www.bloggersragen.com/' http-equiv='refresh'/>

Dari kode tersebut diketahui meta refrash dengan value 0 detik dan akan di redirct ke urlhttp://www.bloggersragen.com/. Maksudnya ketika anda membuka halaman yang mengandung tag meta refrash tersebut pada pembacaan 0 detik pada kodenya anda akan di bawa ke halaman http://www.bloggersragen.com/. Dan bagaimana cara membuat redirect blogspot. Ikuti langkah berikut.

Anda harus masuk ke aku blogger yaitu dengan login
Pilih menu tab Rancangan dan kemudian menu Edit HTML
Masukan script meta refrash tersebut di bawah tag Head ( <head> )
Kemudian Simpan templatenya

Ternyata redirect blogspot url mudah tow wkwkwk, nah itu dia kadang di persulit. Sekarang bagaimana jika kita menginginkan hanya pada artikel tertentu saja atau pages blogspot saja dan bukan semua halaman. Sebenarnya mudah sih, hanya memakai fungsi kondisi contoh saja sebagai berikut

<b:if cond='data:blog.url == "http://www.bloggersragen.com/p/photoshop-online.html"'>
<meta content='0; url=http://www.bloggersragen.com/' http-equiv='refresh'/>
</b:if>

Redirect blogspot url tersebut maksudnya, jika kita membuka halamanhttp://www.bloggersragen.com/p/photoshop-online.html maka akan ada penulisan di sisi server sebuah meta tag refrash dan dihalaman lain tidak ditulis. Sama seperti diatas maka jika kita membuka halaman ini akan diredirect ke http://www.bloggersragen.com/. Masih bingung tentang cara redirect blogspot ? silahkan tanya saja di komentar :d

Selasa, 13 Maret 2012

Cara Pasang Komentar Facebook Di Blog di setiap posting

Selamat malam sobat blogger semua, kita jumpa lagi di blog kebanggaan warga Mojokerto ini (kayak penyiar radio aja ya, hehehe...). Lagi-lagi dapat perkembangan terbaru tentang cara pasang kotak komentar facebook di blog kita. Setelah tempo hari saya posting tentang pasang komentar facebook V1 tapi kelemahannya adalah semua komentar muncul di setiap postingan, jadi kita tidak tahu postingan mana yang terkomentari. Kemudian dilanjutkan dengan pasang komentar facebook V2. Cara ini juga banyak yang berhasil tapi ada juga yang gagal, entah kenapa. Tapi kelemahan V2 tidak ada fitur reply di komentarnya tidak seperti yang V1, dan juga jika ada yang mengomentari artikel kita, kita tidak tahu karena tidak ada notifikasi jadi harus cek manual di setiap artikel.

Nah yang V3 ini yang lebih sempurna ada fitur reply dan notifikasi, jd kita bisa tahu kalau ada yang berkomentar menggunakan komentar facebook karena ada pemberitahuan di akun facebook kita, jadi kita bisa me-manage komentar tersebut (ngomong opo kuwi...??). Tuh diatas udah ada gambarnya. Oke deh cukup untuk kata sambutannya, sekarang kita langsung saja ke kali nyemplung bareng (maksudnya langsung mulai tutorialnya hehehe..). Jangan terlalu tegang gitu dong bacanya santai aja sob, ntar jadi botak loh kayak saya (ups keceplosan).

Yang pertama harus dilakukan adalah membuat aplikasi komentar facebook. Saya rasa point ini tidak perlu saya jelaskan lagi karena sudah saya tulis, silahkan baca dulu disini untuk cara membuat aplikasinya. Jika sudah ada yang memasang komentar facebook lewat tutorial blog ini sebalumnya atau blog lain yang berbeda dengan cara ini, maka silahkan di ganti dengan kode yang saya berikan nanti. Oke kita lanjutkan lagi yuk. Setelah selesai membuat aplikasinya dan mendapatkan APP ID dari facebook, sekarang tinggal pemasangan pada blog. Pasang kode berikut DI BAWAH <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=APP ID&xfbml=1'/><fb:comments expr:href='data:post.url' numposts='5' width='615'/>
</b:if>

Ganti APP ID berwarna hijau dengan APP ID yang di dapat dari facebook. Untuk angka 615, adalah lebar kotak komentar, sesuaikan dengan template sobat. Kemudian agar dapat terintegrasi dengan akun facebook kita, pasang kode berikut DI BAWAH <head> atau DI ATAS <b:skin><![CDATA[/*

<meta content='ID FACEBOOK' property='fb:admins'/>
<meta content='APP ID' property='fb:app_id'/>

Ganti APP ID dengan ID yang di dapat dari facebook tadi, dan ganti ID Facebook dengan ID sobat, misalnya id facebook saya adalah http://www.facebook.com/fery.interisti (jangan lupa di add ya hehehe), ganti ID FACEBOOK dengan yang berwarna merah. Setelah itu yang wajib harus dilakukan adalah save template. Kalau ada yang kurang jelas silahkan tanya ya.

Semoga bermanfaat.

Minggu, 11 Maret 2012

Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer

Untuk menepati janji saya pada postingan sebelumnya dengan tema merubah posisi sidebar dan main pada template blogger, saya insyaAllah akan mengetengahkan tutorial menambahkan halaman baru diatas footer.

Sebelumnya saya sudah pernah membahas tutorial serupa tapi tak sama, karena elemen yang ditambahkan pada postingan terdahulu hanya tiga kolom, sekarang kita akan belajar bagaimanamenambahkan 4 kolom tambah gadget diatas footer seperti gambar berikut:

menembahkan 4 kolom tambah gadget diatas footer

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut setelah tag atau kode ]]></b:skin>

/* --- LOWER --- */
/* --- CSS modified by: Amatullah. Sy --- */
#lower {
     border-top:10px solid #F781F3;
     margin:0 0 10px 0;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
}
#lower-wrapper {
     margin:auto;
     padding: 0px 0px 20px 0px;
     width: 960px;
     background: #FBEFF5;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
     -webkit-border-bottom-left-radius:10px;
     -webkit-border-bottom-right-radius:10px;
}
#lowerbar-wrapper {
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
     width: 25%;
     text-align: justify;
     font-size:100%;
     color:#333;
     line-height: 1.6em;
     word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
     overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.lowerbar {
     margin: 0;
     padding: 0;
}
.lowerbar .widget {
     margin: 0;
     padding: 10px 20px 0px 20px;
}
.lowerbar h2 {
     background:#F781F3;
     -moz-border-radius-bottomleft:6px;
     -moz-border-radius-bottomright:6px;
     -webkit-border-bottom-left-radius:6px;
     -webkit-border-bottom-right-radius:6px;
     margin: -10px 0px 10px 0px;
     padding: 3px 0px 3px 0px;
     text-align: center;
     color:#fff;
     font-size:16px;
     font-weight:bold;
     text-transform:lowercase;
}
.lowerbar ul {
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     list-style-type: none;
}
.lowerbar li {
     margin: 0px 0px 2px 0px;
     padding: 0px 0px 1px 0px;
     border-bottom:1px dotted #DF0101;
}
.lowerbar a {
     color: #FA58F4;
     text-decoration: none;
}
.lowerbar a:hover {
     text-decoration: underline;
     color: #F7BE81;
}
.lowerbar a:visited {
     text-decoration: none;
     color: #5858FA;
}
/* ---Modefied: http://amatullah83.blogspot.com--- */
/* --- End Lower--- */

Catatan: Silahkan edit kode CSS diatas, untuk menyesuaikan tampilan kolom dengan template sobat.
Perhatikan tulisan yang berwarna merah pada lower wrapper, widht (lebar) 960px ganti dengan lebar footer sobat.
Untuk mengganti kode warna silahkan lihat tabel kode warna disini. Sebagai sedikit tambahan pengenalan property CSS diatas, lihat gambar berikut:

3. Tambahkan kode HTML berikut diatas <div id='footer-wrapper'>

4. Simpan template. Lihat hasilnya pada bagian elemen halaman, apakah sudah terdapat 4 kolom diatas footer? Jika ya, silahkan tambahkan gadget atau widget yang sobat inginkan.
Semoga bermanfaat!

Pasang Translate Di Blog

Kali ini aku akan posting cara pasang Google translate di blog. Widget asli dari google tampilanya tidak semenarik widget ini ... Widget Google translate kali ini hasil kreasi sang master Blogger kita yaitu Kang Rohman... Widget yang akan terpasang dalam bentuk bendera2 yang sangat menarik dan jika mouse anda arahkan ke gambar-gambar bendera yang ada akan terlihat sedikit efek blur sebagai pemanis.

langkah2 untuk membuatnya adalah :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy Paste Script Berikut:

4. Klik tombol Simpan dan lihat hasilnya ...

Multi Level Drop-Down Menu Dengan CSS dan JQuery

View Demo

Pada postingan saya sebelumnya yang berjudul 30 tab menu navigasi horizontal, seorang pengunjung bertanya pada kolom komentar cara membut menu drop-down. Alhamdulillah setelah search digoogle, saya temukan tutorial membuat multi level drop-down menu dengan CSS dan JQuery untuk web dari Dinamic Drive. Setelah saya modifikasi tutorial ini bekerja dengan baik pula pada template blogger. Contohnya bisa lihat pada diatas atau free blogger template dalam pengembangan saya disini
Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery padatemplate blogger
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan script JQuery berikut sebelum tag </head>

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja
3. Tambahkan juga script berikut setelah script JQuery yadi

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
        <ul>
            <li><a href="#">Sub Item 3.1.1.1</a></li>
            <li><a href="#">Sub Item 3.1.1.2</a></li>
            <li><a href="#">Sub Item 3.1.1.3</a></li>
            <li><a href="#">Sub Item 3.1.1.4</a></li>
            <li><a href="#">Sub Item 3.1.1.5</a></li>
        </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://all-hiburan.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

6. Simpan template Hasilnya seperti screenshot berikut atau live demo lihat disini

Semoga bermanfaat! Thanks to Dinamic Drive

CARA BUAT BLOG

Entri Populer

DAFTAR ISI

HOME

translate

Rabu, 28 Maret 2012

Cara Membuat Rate bintang di blog

cara memasang emoticon Onion head pada kotak commentar

Cara Membuat Permalink Seo di Blogspot

Membuat permalink seo di blogspot

Cara buat permalink pada blog readmore

Kamis, 22 Maret 2012

Cara Redirect Blogspot

Selasa, 13 Maret 2012

Cara Pasang Komentar Facebook Di Blog di setiap posting

Minggu, 11 Maret 2012

Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer

Pasang Translate Di Blog

Multi Level Drop-Down Menu Dengan CSS dan JQuery

Total Tayangan Halaman