Recent Post Dengan Thumbnail

Hai sobat, gimana kabarnya nih ?, semoga dalam keadaan sehat. Nah kali ini saya mencoba menulis lagi tentang widget pada blogspot, tak lain adalah widget recent post yang sebelumnya sudah pernah saya tulis di blog ini dengan berbagai versi.
Namun kali ini sedikit agak berbeda dengan bentuk widget ini dengan adanya tambahan gambar thumbnail yang ada di postingan, dengan tujuan agar pembaca blog kita tertarik dengan postingan yang kita suguhkan setelah melihat thumbnail gambar yang mungkin unik, lucu, mempesona dsb.

Widget ini cocok bagi Anda yang mempunyai blog bernuansa gallery, misalnya gallery template, foto, desain dan sebagainya.

Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini .

Pada menu Dashboard klik menu "Design - > Page Elements"

Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"

Dan taruh script dibawah ini kedalamnya.

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";

imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";

imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";

imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";

imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";
showRandomImg = true;

boxwidth = 230;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "transparent";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://sangmerak.blogspot.com/";

</script>

<script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

Keterangan :

boxwidth = 230; untuk menentukan lebar dari widget yang harus Anda sesuaikan dengan lebar Layout Anda.
Ganti URL "http://sangmerak.blogspot.com/" dengan alamat blog Anda.
Dan untuk modifikasi yang lain silahkan ubah keterangan-keterangan yang ada diatas.

Nah kalau sudah tinggal SAVE.

Sekian sobat blogger, semoga tutorial ini dapat anda gunakan dan bermanfaat bagi Anda. Sampai jumpa lagi di lain kesempatan.

Membuat Tepi Gambar Bershadow Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :

1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.

Jquery Multi Level Menu Horizontal

Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang cara membuat menu horizontal dan menu vertical di blog ini, namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang kemaren yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.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: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
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:#B30000; /*tab link background during hover state*/
color: white;
}

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

/*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;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"



Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</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>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan. Miss u all. bye²

Widget Recent Posts Dan Recent Comments Dari Blogger

Recent posts dan recent comments atau widget komentar dan posting terakhir adalah widget yang sering digunakan para blogger, karena kedua widget ini sangat berguna untuk mengetahui komentar terakhir dan posting terakhir di blog kita.

Dulu saya pernah mencoba menulis tentang cara membuat recent comments dan recent posts dengan javascript, namun sekarang kita tidak perlu susah-susah lagi untuk membuat widget tersebut dengan menggunakan javascript karena blogger sudah menyediakan widget ini di widget featured blogger.

Bagi Anda yang belum tau tentang cara menggunakan widget ini silahkan ikuti panduan dibawah ini.


Cara menggunakan widget ini cukup mudah yaitu :

1. Masuk pada "Design→ Page Elements"
   
   
2. Lalu Klik tombol "Add a Gadget"
   
   
3. Dan klik tombol "Featured"
   
   
   
4. Cari gadget Recent Comments, untuk menggunakan widgetnya klik tombol (+)
   
   
   Setelah muncul kotak dialog seperti diatas kemudian isi konfigurasi widgetnya dan tekan tombol "SAVE"
   
   
5. Dan untuk widget Recent Post pada langkah nomer 3 cari gadget "Recent Posts" dan klik tombol (+) maka akan muncul kotak konfigurasi seperti dibawah ini
   
   
   Nah setelah muncul kotak konfigurasi seperti diatas, lalu isi konfigurasinya sesuai keinginan Anda lalu "SAVE"
   
   
6. Selesai dan lihat hasilnya.

Okkey inilah bukti kemajuan blogger yang bisa Anda rasakan, semoga blogger lebih canggih lagi dan kita pun lebih mudah menggunakan blogger. Salam blogger

Blogger Meluncurkan Fitur Stats (Statistics Blog)

Blogger meluncurkan fitur barunya di draft blogger yaitu statistics, nah apa guna statistics ini?. Gunanya adalah untuk memantau dan menghitung pengunjung blog kita, seperti berapa pengunjung hari ini, minggu ini bahkan bulan ini dan juga ada yang lain yaitu dari negara mana pengunjung, postingan yang paling banyak dikunjungi, traffic source, OS dan browser statistics.

Seperti dulu halnya saya sudah pernah menulis tentang statistics blog dengan shinystat dan fitur blogger ini lebih canggih dan gratis Anda gunakan di blogger karena ini fitur original dari blogger.

Nah bagaimana cara menggunakan fitur stats blogger ini ?

Pertama-tama masuk draft.blogger.com

Nah pada Dashboard draft blogger Anda akan menemukan menu Stats seperti gambar diatas.

Dan lihat dan amati statistics blog Anda.

Nah diatas adalah overview dari Stats Blogger dan pada halaman diatas terdapat sub menu yang sesuai fungsinya, seperti : Posts, Traffic Source dan Audience.

1. Stats posts

Pada bagian ini berfungsi untuk melihat halaman post dan pages yang sering di kunjungi dan juga hitungan kunjunganya.

2. Traffic Source


Traffic Source berguna untuk melihat dari situs dan URL apa visitor mengunjungi blog kita dan juga apa keyword yang dipakai di search engine untuk masuk ke blog kita.

3. Audience


Audience ini berfungsi untuk melihat dari mana pengunjung blog kita dan presentasi pengunjung dari browser dan OS.

Nah sedikit info bagi Anda semoga bermanfaat. Dan ingat fitur ini baru ada pada draft.blogger.com

Mengatasi Judul Widget / Gadget Yang Tidak Boleh Kosong

Pada zaman dahulu kala blogger mengijinkan widget dengan tanpa judul (title) namun sekarang kebebasan itu dikekang oleh blogger, jadi setiap widget/gadget harus ada title atau judulnya. Namun sering kali kita tidak menginginkan gadget/widget tanpa judul, dan jika dipaksa akan muncul pesan perintah error "Required field must not be blank" atau intinya judulnya harus ada dan tidak bisa dilanjutkan bila tanpa judul.

Nah bagaimana mengatasinya?

Caranya cukup mudah kita tinggal mengisi title atau judul gadget dengan code

<!--->

lihat contoh dibawah ini

Dan hanya cukup code diatas tidak perlu tambahan apa-apa lagi.

Sekian deh cukup semoga bermanfaat bagi Anda

Widget Attribution Dari Blogger

Apa ini ?

Wah ternyata ini adalah widget ketentuan dari blogger untuk "Copyright" platform blogger, widget ini tidak bisa pindahkan bahkan tidak bisa di hapus untuk template blogger yang baru widget ini ada, namun untuk template lama dalam artian dalam pembuatan blog dari blogger udah lama, widget ini belum muncul, entah mungkin kapan ada ketentuan widget ini ada untuk semua pengguna blogger.


Nah terlihat di atas adalah screenshotnya dan bisa kita lihat widget ini terkunci tidak bisa dihapus dan digeser untuk dipindahkan.

Nah Saya beri tips bagaimana memindahkan widget ini dan memberi style tersendiri.

1. Cara memindah

Biasanya Atribut Copyright seperti ini berada pada bawah halaman situs, nah defaultnya widget atribut ini berada pada sidebar. nah dibawah ini adalah cara memindahkanya dari sidebar ke footer (bagian bawah blog)

Masuk pada bagian "Design" kemudian masuk pada "Edit HTML" lihat kebawah dan temukan code seperti ini

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Lalu Cut code diatas dan taruh pada tag footer. Lihat code dibawah ini untuk lebih jelasnya

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>

Lalu SAVE dan selesai

2. Menambah Style CSS

Style CSS fungsinya untuk mengubah tampilan widget atribut ini supaya terkesan lebih cantik tidak monoton dengan cara :

tambah code css dibawah ini diatas code ]]></b:skin>
#Attribution1 {
color:red;
font-weight:bold;
text-transform:capitalize;
}

Style diatas hanya sebuah contoh untuk mengganti warna hurufnya, menebalkan huruf dan membuat capitalis pada textnya. Dengan CSS diatas Anda bisa menentukan tampilan dari widget tersebut mungkin dengan menambahkan background, border dsb.

Kemudian SAVE dan lihat hasilnya deh.

Nah mungkin informasi ini berguna bagi Anda untuk para blogger dan semoga bermanfaat Saja. terima kasih.

Widget Daftar Isi / Sitemap

Sitemap atau yang sering disebut oleh orang awam sebagai daftar isi ini sangat berguna untuk blog kita, ketika pengunjung ingin menjelajahi blog kita maka inilah peran yang harus hadir untuk mempermudah penjelajah blog kita. Kali ini saudara blogger kita Om Abu-farhan punya solusinya yaitu "The Best Table of Contents (TOC) or Sitemap for Blogger".

Seperti terlihat di blog ini yang menggunakan TOC dari Om Abu-Farhan yang Saya masukkan kedalam fitur baru blogger yaitu "Pages Blogger". Nah pada kesempatan kali ini Saya kan mengulas bagimana caranya memasang TOC kedalam halaman pages kita.

1. Langkah pertama masuk blogger.com

2. Masuk postingan Om Abu-Farhan untuk mengcopy source code seperti dibawah ini

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.abufarhan.co.cc/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Copy code diatas dan ingat ganti www.abufarhan.co.cc dengan alamat blog Anda

3. Pada Dashboard draft.blogger.com masuk pada bagian "Posting" lalu "Edit Pages"

4. Lalu klik tombol "New Pages" lalu paste code tadi kedalam post editornya

5. Setelah di SAVE akhirnya jadi juga dan sisipkan link pagesnya tadi kedalam daftar menu di blog Anda untuk navigasinya

Nah ulasan singkat mengenai Sitemap blogger yang canggih oleh Om Abu-Farhan semoga bermanfaat bagi Anda

Ucapan terima kasih sebesar-besarnya kepada Om Abu-Farhan

Cbox.ws Pengganti Shoutbox Shoutmix

Baru-baru ini muncul permasalahan dari pelayanan shoutbox shoutmix.com yang tidak memunculkan link untuk member basic shoutmix. Ternyata pihak shoutmix ingin meningkatkan kepopuleran website shoutmix, untuk memunculkan link di pesan, Anda harus log in ke website shoutmix terlebih dahulu.
Para blogger yang menggunakan fasilitas shoutmix pun merasa kurang nyaman karena susahnya jika ingin meningkatkan traffic blog melalui meninggalkan jejak di shoutbox (blogwalking).

Nah apakah ada pengganti Shoutmix untuk pelayanan free shoutbox yang masih bisa untuk nge-link?

Yaitu Cbox.ws, iya benar cbox.ws adalah layanan free shoutbox untuk blogger yang masih bisa untuk menampilkan link. Tak kalah dengan shoutmix, cbox.ws ini memiliki fitur yang sama seperti shoutmix.

Apakah Anda ingin mencoba cbox.ws?

caranya cukup mudah Anda tinggal masuk ke website www.cbox.ws lalu ikuti panduan untuk membuat shoutbox cbox.ws gratis.

Nah sedikit ulasan tentang shoutbox yang lebih nyaman dipakai jika Anda ingin bisa memunculkan link kedalam shoutbox Anda.

Sekian semoga bermanfaat

Wibiya : ToolBar Blogger Canggih

Wibiya - salah satu website yang menyediakan fasilitas free toolbar untuk blog Anda, toolbar dari wibia ini sangat canggih.
Fitur dari toolbar wibiya ini diantaranya : pencarian langsung, who's online, live video, translate, timeline, Bermacam-macam Facebook widget, twitter, youtube, Live chat dan foto sharing kamu. Hmmm canggih bukan toolbar ini? penasaran ingin lihat Demonya?? langsung aja kunjungi wibia dan lihat di browser kamu bagian bawah.

Setelah Anda melihat-lihat apakah Anda ingin memasangnya kedalam Blogger Anda? Nah dibawah ini ulasan cara membuatnya.

1. Buka website wibiya.com dan klik tombol "Get It Now"

2. Pada Form "Create An Account" isi form sesuai dengan data Anda lalu kik tomblol "Next"

3. Lalu milih tema toolbar Anda pada bagian "Select A Theme" Lalu klik tombol "Next"

4. Pada bagian "Application Setting" configurasi account-account Anda kedalam toolbar tersebut, Seletlah itu klik tombol "Next"

5. Pada bagian "Add it" atau final installation klik logo "Blogger" atau install on blogger

6. Pastikan Anda sudah Log in blogger untuk memasang widgetnya, setelah Anda klik logo blogger pada tahap Final, Anda langsung ditujukan pada "Import page elements" blogger



7. Select blog yang Anda ingin pasang Toolbarnya, Lalu klik tombol "Add Widget" maka toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda.

Nah selesai deh ulasan tentang cara membuat Toolbar canggih wibiya, toolbar ini banyak digunakan oleh para pemilik website untuk mempercanggih websitenya, jadi blog kita jika menggunakan toolbar ini serasa seperti di Facebook.

Sekian semoga bermanfaat.

Floating Box Cocok Untuk Adsense

Oh betapa kangenya Saya untuk mengupdate blog Saya yang agak gak keurus ini, dikarenakan minimnya ide-ide untuk menulis sebuah artikel untuk memperbarui posting di blog ini. Eh kok malah curhat ya, he. . he . . *Back To Topic* Membuat Floating Box yang biasanya dipasang di blogger yang biasanya diisi content Ads ini. Coba lihat deh Shoot layar yang aku ambil dari blog Saya yang Saya buat dengan niat iseng-iseng ini.



Coba kita lihat box yang berwarna kuning diatas, itulah element box floating yang akan tetap di pojok kanan atas jika scroll di geser-geser kebawah atau keatas.

Saya menemukan script ini bermula dari browsing-browsing untuk tips yang cocok untuk memasang adsense di blog dan akhirnya Saya menemukan script ini di Dynamicdrive dan saya akan mengulas ulang di blog Saya ini agar Anda dapat menggunakanya dengan mudah. Monggo..

Pertama yang Anda lakukan adalah Log In ke blogger lalu masuk menu "Layout" Kemudian Masuk bagian "Edit HTML"

Pasang code ini dibawah code <head> atau sebelum code </head>

<script src='http://sites.google.com/site/anasprod/adse.js' type='text/javascript'/>

Dan pasang Code CSS dibawah ini diatas code ]]></b:skin>

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}

(Edit code CSS diatas untuk menentukan style dari box)

Kemudian di Save dulu ukkay kawan.

Dan masuk pada bagian "Layout -> Page Elements"

Pilih tempat Gadget yang kamu ingini (terserah karena box ini akan melayang) dan klik "Add a gadget" Masukkan code dibawah ini

<div id="topbar">

MASUKKAN CODE SCRIPT ADS / LAINYA DISINI

<a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/anasprod/close.gif" border="0" /></a>

</div>

Ingat ganti code yang berwarna merah diatas dengan code gadget yang kamu ingini.

Kalau sudah. . . SAVE deh...

Selesai..

Yapzz semoga bermanfaat nie tutorial dari pengalaman Saya.

Baru Di Blogger : Template Designer

Kabar gembira buat para blogger yang suka mengotak-atik template, kini blogger meluncurkan sebuah fitur baru di draft blogger yang kayaknya sudah ditunggu lama oleh para pengguna blogger yaitu "Template Designer". Apa itu "Template Designer"?. Ya "Template Designer" adalah sebuah fitur baru blogger yang memudahkan kita untuk mengotak-atik template kita tanpa melalui "Edit HTML", misalnya mengganti background, warna font/link, tata letak dan masih banyak lainya.

Bagaimana menurut Anda tentang fitur baru blogger in draft ini??

Mungkin jika Saya menjelaskan dengan detail percuma.. mendingan Anda langsung praktek aja biar lebih jelas . Hehe

Begini caranya jika mau coba untuk Anda yang belum tau caranya.

Buka Alamat http://draft.blogger.com dan Log In kemudian masuk ke menu "Layout/Tata Letak"



Nah setelah itu masuk pada bagian "Template Design"




Nah setekah Anda masuk pada "Template Design" Silahkan coba aja, dijamin menyenangkan.

Kelemahanya adalah tidak bisa bekerja pada template yang sudah di otak-atik, akan muncul pesan seperti "Not applicable for this template" atau "

This template does not allow for layout customizations" untuk bagian-bagian tertentu buat template yang sudah di otak-atik sendiri.

Nah gimana? Semakin Asyik kan nge-Blog? semakin canggih aja fitur Blogger.com.

Sekedar informasi buat Anda semoga bermanfaat.

Menambah Status Yahoo Messenger Di Gagdet Profil

Gadget profil adalah gadget dimana Anda bisa manampilkan foto, deskripsi tentang Anda dan link profil blogger Anda kedalam blog Anda. Untuk menambahkan widget ini cukup mudah yaitu dari menu "Layout/tata letak" kemudian klik "Add a gagdet" lalu pilih "Profile". Dan untuk mengedit profil dan foto Anda bisa melalui Dashboard blogger Anda dengan mengklik "Edit Profile" yang ada di sebelah kanan dashboard Anda.

Nah kali ini Saya akan membahas tentang bagaimana caranya menambah Status Yahoo Messenger kedalam gadget Anda, yang berhubungan dengan postingan Saya yang dulu tentang menambah Status Yahoo Messenger ke dalam blog.

Coba lihat contoh dari modifikasi sederhana ini :



Terlihat diatas ada tambahan status Yahoo messenger ke dalam gadget profil Saya.

Nah dibawah ini adalah caranya :

1. Langkah pertama yang Anda harus lakukan Adalah Log In ke Blogger lalu menuju bagian "Layout" kemudian masuk "Edit HTML"

2. Setelah itu centang "Expand Widget Templates"

3. Kemudian cari code dibawah ini :

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>

4. Setelah ketemu code diatas lalu tambahkan code dibawah ini diatasnya

<a href='ymsgr:sendIM?anasku_mail'> <img src='http://opi.yahoo.com/online?u=anasku_mail&amp;m=g&amp;t=1&amp;l=us'/>
</a><br/>

Code yang berwarna merah diatas ganti dengan ID YM kamu, dan angka yang berwarna hijau adalah bentuk dari lambang status YM, keterangan lebih jelasnya bisa dibaca disini.

5. Kalau sudah kemudia SAVE

Nah diatas adalah cara menambah Status Yahoo Messenger kedalam gadget profil, Anda juga bisa Status YM dengan status Camfrog, G-Talk dan lainya.

Cukup disini dulu postingan Saya. . . Semoga bermanfaat dan silahkan menuliskan komentar dibawah ini untuk tanggapan dan pertanyaan.

Widget Sederhana Twitter

Tentunya Anda sudah tau apa itu twitter dan Anda jugalah pengguna twitter untuk saat ini. Ya, Twitter adalah salah satu Social Networking yang terkenal selain Facebook yang banyak digunakan orang di seluruh penjuru dunia.

Namun kali ini Saya akan membahas tentang bagaimana caranya membuat widget Twitter yang sederhana ke dalam blog kita, dalam artian widget ini lebih simple dari pada widget yang diberikan oleh pihak twitter.

Isi dari widget ini adalah hanya tweets dan link twitter Anda, pas buat Anda yang suka hal ringkas namun bertujuan jelas. Coba lihat contoh widgetnya dibawah ini



Gambar diatas screen capture dari widget twitter sederhana di blog Saya ini. Yuk mari Saya pandu cara buat widget ini

Pertama yang Anda lakukan adalah Log In ke blogger Anda, setelah masuk Dashboard Lalu klik Link Layout / Tata Letak

Setelah masuk pada menu Layout lalu pilih tempat yang mau Anda pasangi Widget ini kemudian klik "Add a Gadget" kemudian pilih "HTML/JavaScript"

Kemudian Paste code dibawah ini

<div id="twitter_div" style="background: url(http://i725.photobucket.com/albums/ww258/anasceria/new-tuts/single-bird-icon-1.png) top left no-repeat; color:#000000; font-size:14px; padding-left: 50px;"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/anasceria">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/anasceria.json?callback=twitterCallback2&count=3" type="text/javascript"></script>

Perhatikan !! :

• Ganti code yang berwarna merah diatas dengan ID Twitter Anda
  
  
• Ganti Angka 3 yang berwarna biru diatas dengan jumlah angka tweet Anda yang ingin Anda Tampilkan
  
  
• Code yang berwarna hijau adalah style dari widget tersebut, diantaranya ada URL gambar dari widget tersebut, sesuaikan dengan selera Anda, klik disini untuk panduan CSSnya
  
  
• Text "follow me on twitter" adalah text link perintah untuk Follow Twitter Anda yang bisa Anda ganti sesuai Selera Anda

Nak demikianlah tutorial Saya hari ini untuk membuat widget sederhana twitter. Semoga bermanfaat bagi Anda dan jangan lupa Follow Twitter Saya disini untuk mengetahui update dari Saya, Terima Kasih.

Static Page - Halaman Di Blogger

Static Page - Fitur baru dari blogger yang memungkinkan para blogger bisa menambahkan halaman diluar posting, sebagai contoh adalah halaman daftar isi saya tersebut yang Saya taruh di halaman static page.

Static Page ini diresmikan oleh blogger setelah uji coba dulu di draft blogger, jadi kita bisa menggunakan Static Page ini sebagai halaman About Me, Contact me dan lain-lain seperti halnya wordpress yang sudah lebih duluan menggunakan fitur ini. Jadi intinya static page ini adalah halaman tersendiri seperti halaman posting namun dipisahkan dari halaman posting.

Coba di pahami. .


1. Langkah Anda jika ingin menggunakan Static Page adalah dari Dashboard Anda masuk ke menu "Edit Posts"

2. Setelah Anda masuk pada halaman "Edit Posts" Kemudian pilih halaman "Edit Pages"

3. Setelah Anda masuk kedalam halaman "Edit Pages" lalu klik tombol "New Page" untuk menambah halaman baru dan masukkan isi dari halaman tersebut dengan text editor seperti halnya dalam postingan.

Dan perintah "Add Page List Gadget" adalah gadget untuk menu navigasi Static Page Anda.



Diatas adalah gambaran pengaturan setelah mengklik perintah "Add Page List Gadget", Anda bisa mengatur sesuai keinginan Anda..

Sekedar informasi Aja buat Anda tentang Static Page, dan kita untuk saat ini hanya bisa menambahkan 10 pages aja, entah kapan ada pembaharuan dari pihak blogger tentang fitur ini, tunggu aja deh.

Dapet Juara II

Syukur Alhamdulillah Saya haturkan kepada Allah SWT yang telah memberikan rahmatnya kepada Saya sehingga Saya bisa mendapatkan juara 2 dalam lomba blog tingkat SLTA se-Kab Jepara yang diadakan pada tanggal 22 sampai 30 Desember 2009 Lalu.

Ucapan terima kasih Saya yang pertama kepada Orang tua Saya yang telah memberikan doanya kepada Saya, teman-teman yang mensupport Saya, Guru-guru yang telah memberikan dana komunikasi dan transportasi juga dukunganya kami ucapkan terima kasih.

Teman-teman yang udah memberikan Voting kami ucapkan terima kasih sebesar-besarnya, karena tanpa dukungan kalian Saya tidak akan mendapatkan juara 2 ini, terutama teman-teman dari Blogger, Facebook, YM, Camfrog dan social network lainya Saya ucapkan terima kasih sebesar-besarnya.

Okkelah kalo begitu :D buat yang lainya tetap berkreatifitas ya...

Salam Terima Kasih

Luqman Khoirul Anas