Selamat Datang di Blog Creativepio | Mari Berbagi | Terimakasih Atas Kunjungannya....!!

Membuat Emoticon Llike di facebook

Posted by Unknown Sabtu, 13 Oktober 2012 0 komentar
Selamat Siang Shobat Creative semuanya, semoga disiang hari ini kita semua dalam keadaan sehat dan selalalu dalam lindunganya. Pada siang Hari ini Creativepio akan Berbagi Tips N Triks Membuat
Membuat Emoticon Llike di facebook. Oky Langsung aja ya Shobat Creativepio semuanya :

  • Caranya Gampang Ko' Shob Tinggal Copast aja Kode Emotion dibawa ini :


1. Emotion Like Pertama

  1. (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y)
  2. (Y) ╬╬╬╬ ♥ ♥ ♥ ╬╬╬╬╬╬ ♥ ♥ ♥ ╬╬╬╬ (Y)
  3. (Y) ╬╬ ♥ ♥ ♥ ♥ ♥╬╬♥ ♥ ♥ ♥ ♥ ╬╬ (Y)
  4. (Y) ╬ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ╬ (Y)
  5. (Y) ╬╬ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ╬╬ (Y)
  6. (Y) ╬╬╬╬ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ╬╬╬╬ (Y)
  7. (Y) ╬╬╬╬╬╬ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ╬╬╬╬╬╬ (Y)
  8. (Y) ╬╬╬╬╬╬╬ ♥ ♥ ♥ ♥ ♥ ♥ ╬╬╬╬╬╬╬ (Y)
  9. (Y) ╬╬╬╬╬╬╬╬ ♥ ♥ ♥ ♥ ♥ ╬╬╬╬╬╬╬╬ (Y)
  10. (Y) ╬╬╬╬╬╬╬╬╬╬ ♥ ♥ ♥ ╬╬╬╬╬╬╬╬╬╬ (Y)
  11. (Y) ╬╬╬╬╬╬╬╬╬╬╬ ♥ ♥ ╬╬╬╬╬╬╬╬╬╬╬ (Y)
  12. (Y) ╬╬╬╬╬╬╬╬╬╬╬╬ ♥ ╬╬╬╬╬╬╬╬╬╬╬╬ (Y)
  13. :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42:
  14. :* :|] :|] :|] :* :* :* :|] :* :|] :* :|] :* :* :*
  15. :* :|] :|] :|] :* :|] :* :|] :* :|] :* :|] :* :|] :|]
  16. :* :|] :|] :|] :* :|] :* :|] :* :|] :* :|] :* :* :|]
  17. :* :|] :|] :|] :* :|] :* :|] :* :|] :* :|] :* :* :|]
  18. :* :|] :|] :|] :* :|] :* :|] :* :|] :* :|] :* :|] :|]
  19. :* :* :* :|] :* :* :* :|] :|] :* :|] :|] :* :* :*
  20. :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42:



1. Emotion Like yang ke-dua


(Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y) (Y)
(Y) ╬╬╬╬ ♥ ♥ ♥ ╬╬╬╬╬╬ ♥ ♥ ♥ ╬╬╬╬ (Y)
(Y) ╬╬ ♥ ♥ ♥ ♥ ♥╬╬♥ ♥ ♥ ♥ ♥ ╬╬ (Y)
(Y) ╬ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ╬ (Y)
(Y) ╬╬ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ╬╬ (Y)
(Y) ╬╬╬╬ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ╬╬╬╬ (Y)
(Y) ╬╬╬╬╬╬ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ╬╬╬╬╬╬ (Y)
(Y) ╬╬╬╬╬╬╬ ♥ ♥ ♥ ♥ ♥ ♥ ╬╬╬╬╬╬╬ (Y)
(Y) ╬╬╬╬╬╬╬╬ ♥ ♥ ♥ ♥ ♥ ╬╬╬╬╬╬╬╬ (Y)
(Y) ╬╬╬╬╬╬╬╬╬╬ ♥ ♥ ♥ ╬╬╬╬╬╬╬╬╬╬ (Y)
(Y) ╬╬╬╬╬╬╬╬╬╬╬ ♥ ♥ ╬╬╬╬╬╬╬╬╬╬╬ (Y)
(Y) ╬╬╬╬╬╬╬╬╬╬╬╬ ♥ ╬╬╬╬╬╬╬╬╬╬╬╬ (Y)
:42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42:
:* :|] :|] :|] :* :* :* :|] :* :|] :* :|] :* :* :*
:* :|] :|] :|] :* :|] :* :|] :* :|] :* :|] :* :|] :|]
:* :|] :|] :|] :* :|] :* :|] :* :|] :* :|] :* :* :|]
:* :|] :|] :|] :* :|] :* :|] :* :|] :* :|] :* :* :|]
:* :|] :|] :|] :* :|] :* :|] :* :|] :* :|] :* :|] :|]
:* :* :* :|] :* :* :* :|] :|] :* :|] :|] :* :* :*
:42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42: :42:


  • Trus tinggal copas aja ke Coment setatus siapa yang shobat inginkan, Drenggggg selsai dah.
Hasilnya seperti dibawah ini :




Selamat Mencoba Shobat Creativepio semuanya, Semoga berhasill......!!




Baca Selengkapnya ....

Membuat Nama Blank facebook Terbaru 2012

Posted by Unknown Jumat, 12 Oktober 2012 0 komentar
Mungkin aneh ya, kalau nama acount facebook anda blank atau kosong
di sini saya akan memberikan cara bagaimana membuat nama blank di facebook.
contoh :


Cara nya :

1. Login acount facebook. http://www.facebook.com
  • klick aount setting

2.copy simbol dalam form di bawah ini :


  • cara nya :





3.Kembali ke link ini
  • paste kan simbol yang anda copy tadi 
  1. Pada colom First:   paste symbol yang anda copy tadi
  2. Pada colomMiddle:  jangan di isi atau kosongkan saja
  3. Pada colomLast: jangan di isi atau kosongkan saja
  4. klick save changes


 4. Selesai.. selamat mencoba Gan :)



Sumber : mampirgan


Baca Selengkapnya ....

Tips Agar Label Langsung Terindex Di Search Engine Google

Posted by Unknown Rabu, 10 Oktober 2012 1 komentar
Setelah tadi posting tentang Modifikasi Widget Popular Post With Grid Layout, Sekarang lanjut lagi membahas tentang Label/Kategori, yaitu Tips Agar Label Langsung Terindex Di Search Engine Google. Label atau Kategori di blog befungsi untuk mengelompokkan artikel atau postingan yang berhubungan dengan masing-masing postingan kita, dan juga mempermudah visitor/pengunjung untuk mencari sebuah artikel di blog kita. Nah, yang ingin saya share disini, bukan cara membuat label/kategori blog, melainkan cara membuat label yang kita buat itu bisa langsung terindex di Search Engine. Aduh bingung juga jelasinnya, tapi ini pengalaman yang baru saya dapat tadi setelah membuat 2-3 postingan... Hehehe


Masalah ini tidak lepas dari yang namanya Breadcrumbs, Karna sebelum sobat membuat/memasangnya di blog,pastilah tidak mungkin label bisa terindek di SE.
Bagi Sobat yang label/kategori blognya sudah terindex di Search Engine bisa mempraktekan langsung cara ini, agar labelnya cepat nongol/langsung terindex di SE.
Tapi bagi Sobat yang label/kategori blognyanya belum terindex Search Engine, Sobat bisa memasang Breadcrumb terlebih dahulu, dan itu wajib, tujuannya agar label bisa terindex di SE. Tidak semua Breadcrumb yang kita buat itu bisa terindex oleh search engine, untuk itu sobat bisa melihat cara membuat Breadcrumb disini : Membuat Navigasi Breadcrumb Pada Postingan Blog.

Oke kembali ke laptop... :D
Untuk lebih jelas, dan lebih mempermudah saya dalam menjelaskan, silahkan lihat gambar dibawah ini:

1. Contoh Label/Kategori yang sudah terindex di SE (search engine) Google :

Label yang sudah terindex Search Engine

2. Contoh Label/Kategori yang belum terindex di SE (search engine) Google:

Label yang belum terindex Search Engine

Setelah melihat gambar diatas, pasti sobat bisa ngerti dan paham yang akan saya jelaskan kan ??
Perhatikan gambar No1 dan No2, pastilah sobat bisa melihat perbedaanya kan, Liaht juga untuk Jam/waktu postingan itu dibuat. Jelas Gambar No1 yang ingin saya share triknya. Tujuannya yaitu untuk mempercepat label/kategori terindex di Search Engine, terutama Google.

Cara agar label cepat terindex di Search Engine terutama Google:
1. Pastinya sobat membuat postingan dulu.
2. Setelah selesai membuat postingan, perhatikan bagian kotak bawah Label Show all.
3. Klik Show all, dan masukan langsung postingan yang sobat buat kedalam Label yg di inginkan.
4. Terakhir Publish Post.

Kesimpulan:
Biasanya saya memasukan postingan ke dalam label setelah postingan di publish, Tapi dengan cara diatas, hasil di search engine berbeda, yakni, label lebih cepat terbaca/terindex oleh search engine (ini kesimpulan dan pengalaman saya sendiri).

Mudah kan Sob, Cara Membaut Label Dalam Breadcrumbs Langsung Terindex Di Search Engine Google.
Walau mudah tapi jujur, cara ini saya baru tahu tadi, heheee
Untuk lebih jelasnya silahkan sobat blogger langsung saja mempraktekannya (ini ditujukan bagi sobat yang label blognya sudah terindex di Search Engine).
Cukup sekian yang bisa saya bagikan, mudah-mudahan bisa membantu dan bermanfaat sobat Creativepio semuanya. Terimakasih......!


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Cara Membuat Halaman Maintenance Pada Blogspot

Posted by Unknown 1 komentar
Cara membuat Halaman Maintenance Pada Blogspot, (Under Maintenance). Kali ini saya akan kembali membahas tentang tips dan trik blogspot. Dulu awalnya, saya pikir cuman di blogWordpress saja yang bisa maintenis, eh maintenance maksude :)) Ternyata Blogspot-pun bisa.
Just to share saja sob, kebetulan saya (kode-blogger) sudah lama tidak meng-update postingannya, jadi kali ini saya sempatkan untuk membahas tips dan trik blogspot again.
Biasanya saat kita sedang meng-edit blog (apapun itu) pasti gak mau kan keliahatan kalau blog kita sedang diperbaiki, syukur-syukur kalo gak keliatan errornya waktu edit, lah kalo ada?? malu n gak enak dilihat kan sob ?? Nah, untuk mengatasi hal tersebut kita sebagai blogger setia(Blogspot) tentunya ada caranya, yaitu dengan Mode Maintenance. Gak cuman Wordpress, Blogspot-pun bisa !! Hihihi (buat para master2 pastilah sudah gak asink lagi tentang hal ini, jd lewatin saja) :))

Oke, silahkan lihat demonya. Cara membuatnya-pun cukup mudah, hanya menggunakan kode CSS, pasti mudah dan gak ribet !! bila sobat memasang kode maintenance-nya, maka akan muncul creenshot seperti dibawah ini:

Cara membuat Halaman Maintenance Pada Blogspot

Bila tertarik untuk membuat Halaman Maintenance Pada Blogspot, silahkan ikuti langkah-langkah berikut:


1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

html { height: 100%; background: url(http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) no-repeat center 50%; margin: 0; } body { display: none; } 

6. Jangan lupa Simpan Template.


Sip, sampai disini sobat udah bisa membuat Halaman Maintenance Pada Blogspot, melihat kode diatas jelaslah sangat simpel dan mudah dimengerti tentunya.
Silahkah ganti link image diatas (http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) sesuai dengan kreasi sobat.

Sekian dari saya (kode-blogger) untuk topik Cara Membuat Halaman Maintenance/Under Maintenance Pada Blogspot.


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Membuat Show-Hide Widget Followers Keren Abis

Posted by Unknown 0 komentar
Hmm... Lama juga neh gak update blog, coz seminggu kemarin sibuk sama urusan offline.
Oke, pada kesempatan kali ini saya akan membahas mengenai widget followers di blog, tepatnya "membuat widget followers keren abis" Sobat pasti tahu kan seperti apa itu widget followers di blog ?? tapi yang akan saya share kali ini pastinya beda dengan membuat followers biasa sob, yang pasti lebih menarik dan keren!! Selain itu juga saya rasa dengan adanya widget followers yang akan kita buat kali ini, membuat berat blog lebih ringan, itu bila dibandingkan dengan widget followers biasa.

Berminat ?? Yowes, berikut cara membuatnya :

1. Login dengan akun blogger sobat
2. Masuk rancangan/design
3. Pilih Tata Letak/Layout
4. Klik Add a gadget, dan pilih HTML/Javascript
5. Selanjutnya, Copy Paste kode berikut didalamnya:

<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypvFmaAbdhMimtkD_Kf3Sk2pG84_KnD7lsfzjUor6qRHLkh11GvOTSs-O5xP0DCzdVaJrF5Qec78NLKEO0n8NnHYbdkdOdrO57mjckj-CD9xaZ0pwDkfc1ktRLkm8blv7QXkSVtbIKSxQ/)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">


Kode Widget Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://kode-blogger.blogspot.com/2011/04/membuat-show-hide-widget-followers.html"target=_blank"><div style="color: #444444;">
<span >By kode-blogger</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Jangan disimpan dulu sob, masih ada langkah berikutnya neh

6. Sekarang sobat membuat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan masuk ke link ini http://www.google.com/friendconnect


Screenshot

7. Setelah masuk Pilihlah blog sobat yang akan dipasang widget follow-nya
8. Klik "Tambahkan Gadget Anggota"
9. Aturlah ukuran, warna dsb... menurut selera sobat/sesuaikan dengan blog sobat
10. Klik "Buat kode"
11. Copy dan Pastekan kode Widget Follow tadi (Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)
12. Lalu Save
13. Terakhir, Masih pada "Elemen Halaman" Tambahkan gadget HTML/Java Script, Kemudian copy paste-kan kode berikut ini:

<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoCCMYKz-XTzIeCSa5-A7caQIiw1TC8ulwzXAZFupPYWsSuNSqlGFmX0Edtv3gAqZapbD25QoIp3O3e3mXj5ggy-WFPe7mVBKFHeYEvak2CvebxfRmV9fwwl9Bfzl3ch7JFlH7FbIbkPQP/" alt="kode" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:150px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>

14. Save dan lihatlah hasilnya.

Selamat mencoba, semoga bermanfaat ya Shobat Creativepio semuanya.........!


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Memasang Widget "I Love Indonesia"

Posted by Unknown 0 komentar
Hmmm.. lama jg gak update blog ini, malez tapi kangen... heheehe
mumpung lagi punya mut neh sob, kali ini saya bahas gmn cara pasang widget I Love Indonesia di pojok kanan atas/seperti yg terlihat di blog ini. Mungkin teman-teman sudah bnyak yang tahu, tapi gak ada salahnya kalo saya bahas lagi.
Langsung saja sob, ikuti langkah-langkah berikut ini.

Demo


Langkah-langkahnya :


1. Buka Blogger dan Sign In menggunakan account sobat
2. Pilih tata letak
3. Add Widget
4. Text/HTML
5. Masukan Script di bawah ini :

<script language="JavaScript" src="https://sites.google.com/site/kodeblogger/javascript/widget.js.txt" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://lh6.googleusercontent.com/_9W8681AXnyo/TWS8zq3XKFI/AAAAAAAAAL8/VNes2sF4baw/iluvindonesia.png")</script>

6. Simpan dan lihat hasilnya

Begitulah kiranya cara memasang widget "I Love Indonesia"
Semoga bermanfaat ya shobat Creativepio semuanya.......!


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Membuat Footer 3 Kolom Dengan Background

Posted by Unknown 0 komentar
Met pagi sobat blogger, pagi ini saya akan membahas lagi pastinya tentang blogging, yaitu cara membuat/menambahkan 3 kolom di halaman foter dengan background. pastinya membuat lebih bayak ruang di blog kita, dan lagi dengan adanya penambahan halaman/kolom di foter ini, kita bisa menaruh widget yg lumayan berat loadingnya ke halaman foter tersebut, lumayan lho buat memperkecil berat loading blog... yang pasti di bandingkan ditaruh di sidebar dengan di halaman foter itu berbeda. [itu menurut pengalaman saya]... selebihnya sobat bisa buktikan sendiri.
Berikut contoh screenshotnya:

Screenshot


Berikut cara membuatnya :


1. Login ke akun blogger sobat
2. Masuk ke Rancangan/Design
3. Klik Edit HTML
4. Beri centang "Expand Widget Templates"
5. Jangan lupa, Back Up dulu template sobat! Klik "Download Full Template"
6. Lalu cari kode berikut: ]]></b:skin>
7. Letakan kode berikut tepat diatas kode ]]></b:skin>

#bottom{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFjnbVRVDeSQ5KVQpMG-ox900oUzkuKVEg3XHXZGMWzjI_yMlkyWG8C-3jt_dsG9U6F_TxWdOLIWbUlhwivIoFkHeliit58x-rsm23_Up4cCejAiJQCaE01PGB_6l-6r2Oxga20MtZGrjp/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:280px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:280px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}


Penting..!!
Perhatikan text yg saya beri warna pada kode diatas (harap disesuaikan semuanya dengan template sobat)
Warna merah: itu adalah link background, bisa sobat ganti sesuai kemauan sobat.
Warna hijau: itu adalah lebar dari template sobat, setelah sobat memasangnya bila masih kurang rapi, bisa sobat utak-utik sendiri lebarnya sampai seperti yang sobat harapkan.
Warna orange: itu adalah keterangan dari masing2 kolom. biar jelas saya beri warna.
Belum selesai sobb... lanjut...

8. Carilah kode: <!-- end content-wrapper --> atau </div> <!-- end content-wrapper-->
9. Letakan kode berikut diatas kode: </div> <!-- end content-wrapper-->

<div id='bottom'>

<b:section class='category' id='category'/>

<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>

</div>

10. Simpan template, dan lihat hasilnya.

Sippp... selamat mencoba shobat Creativepio dan semoga bermanfaat... Salam blogging.....!


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Cara Menambah Dua (2) Kolom Dibawah Posting Blog

Posted by Unknown 0 komentar
Next topik sob, kali ini saya akan membahas bagaimana cara membuat dua (2) kolom di bawah posting blog, lihat contoh gambar dibawah sob, kiranya seperti itulah yang kali ini akan saya buat.
Sebelum kita praktek, saya jelaskan terlebih dahulu apa kiranya fungsi dari kotak box dibawah posting itu. pertama, dengan kotak box tersebut, kita bisa menambahkan elemen-elemen penting agar pengunjung blog bisa lebih mudah menemukan apa yang mereka cari, bisa juga kita menaruh artikel-artikel penting didalamnya. tapi tentunya semua itu tergantung sama kreatifitas kita masing-masing. intinya mempermudah.

Oke, seperti yang sobat lihat pada gambar dibawah, kolom kiri berisi "langganan RSS FEED" sedangkan kotak ke dua berisi "artikel terkait/related post.



Demo


Cara membuatnya sebagai berikut:

Login ke akun blogger sobat
Masuk Rancangan/Layout
Edit HTML
Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
Beri tanda centang "Expand Template Widget"
Carilah Kode: ]]></b:skin>
Lalu taruh kode dibawah ini, di atas kode: ]]></b:skin>

#related{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bINAoeBcKoLd-sfC2AXJx4YX5iTkG3xv3k2RV0Xq-xMKsya-G9lPJ742k8D55nlIwKA69f8QE5iANfPr4dton9-hoJM8vQtlqduG0ujYqxxPMzYfjwKCe7t2nuXS5u-zZyhMSR1MtkM/) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
#related .related-posts{font-weight:400;width:53%;float:right}
#related .related-posts p{margin:0}
#related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
#related .related-posts ol{font-weight:400;margin:2px 0 0}
#related .subscribe{width:43%;float:left;color:#000}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7lzuEuLflBXPthSi2a9FyOojsvGb_RCZTq01mgzTx9fwWpAtT3k-4LqvE2-tvLTf46LTfmOVEfTt5Z9Za-fUYVduewKFI0XM80G9C2q_g2K0BW4yibdJpI9qVR991qT5Y9cRxnkD4U8/) 0 50% no-repeat;vertical-align:middle}
#related .subscribe form{margin:0;padding:0}
.clearfix:after{content:".";display:block;
height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
  • Kemudian cari kode beririkut:
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>
  • Letakkan kode di bawah ini diantara kode: <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> dan kode: </b:if>
<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://disini letakkan Link Feed Sobat/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Sobat</p></div>
<div class='related-posts'>disini letakan kode Related Post Sobat</div></div>
  • Perhatikan text berwarna biru, gantilah dengan alamat feed sobat, dan untuk text warna merah ganti dengan kode script form berlangganan sobat, dan untuk warna hijau, ganti dengan kode script related post sobat. Buat tambahan, kode di atas di template saya, saya taruh di bawah kode:
<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>


Penting...!!
Karena setiap template mempunyai kode script yang berbeda-beda, Bila sobat mendapat kesulitan menaruh kode di atas, sobat bisa tinggalkan komentar disini, sebisa mungkin insya4JJL, saya akan bantu.
Cukup sekian dari saya, semoga bermanfaat ya Shobat Creativepio semuanya......!


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Membuat Blockquote Keren Di Blog

Posted by Unknown 0 komentar
Artikel yang saya cari-cari dari dulu, yaitu blockquot yang tampilannya cantik dan menarik dilihat, saya kira itu bukan blockquote melainkan text area yang diberi background, tp ternyata saya salah... hehee
Nah, karna itulah kali ini saya akan bahas cara membuat blockquote.
Seperti yang sudah kita tahu Pada blogger sendiri sudah ada fitur Blockquote , tetapi setiap tampilannya berbeda tergantung kode CSS yang ada pada tempalte blog Sobat.
Bagi Sobat yang ingin membuat tampilan layaknya punya saya, silahkan ikuti langkah-langkah berikut :

Gambar



Contoh tampilannya seperti di bawah ini :
Contoh Blockquote Kode-Blogger

Cara Membuatnya Sebagai berikut :
  • Login ke akun Blogger Sobat
  • Masuk Tata Letak
  • Edit HTML
  • Beri centang pada "Expand template widget"
  • BackUp template sobat dulu, dengan cara klik "download template lengkap"
  • Cari kode Berikut : .post blockquote {
  • Berilah imbuhan, sehingga kodenya jadi seperti berikut :
.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}
  • Simpan Template.

Keterangan :
Cara menggunakannya, waktu buat postingan baru cukup klik gambar "blockquote" yg sudah ada di form posting blogger.
Semoga bermanfaat ya Shobat creativepio semuanya.........!


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Cara Mudah Menambah Emoticon Pada Komentar Blogspot

Posted by Unknown 0 komentar
Langsung saja ke topik, kesempatan kali ini saya akan menjawab dari pertanyaan Sobat blogger kita @Zhanas45, "mass mao nanya nich kalo membuat emoticon di bawah kotak komentar tuch gimana.." daripada bingung jelasinnya, mending jg langsung bikin tutorialnya. hehee....
Nah kali ini saya akan meberi tutorialnya, yaitu Cara Mudah Menambah Emoticon Pada Komentar Blogspot.


Gambar


Berikut Langkah-langkahnya :
Login ke akun blogger Sobat
Masuk tata Letak
Edit HTML
BackUp dulu templatenya, dengan cara klik "download template lengkap"
Cari kode berikut: </body>
Letakan kode css berikut, dan taruh di atas kode: </body>

<script src='https://sites.google.com/site/kodeblogger/javascript/smiley.js' type='text/javascript'/>
  • Selanjutnya cari kode berikut, Lengkapnya perhatikan kode sibawah ini, (pehatikan kode berwarna merah) :
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
  • Kalau sudah ketemu, lalu copy pastekan kode berikut, tepat dibawah kode: <p class='comment-footer'>
<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>
  • Simpan Template, dan lihat hasilnya.Selamat mencoba, sukses slalu :)
Tambahan :
Karna gak bisa lewat komentar, jadi saya edit lagi postingannya.
@Buat sobat2 yang emoticon gak muncul,
  • Coba cari kode dibawah ini :
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
  • Kalo sudah ketemu ,taruh kode Smile'na di ATAS kode: <b:include data='post' name='comment-form'/>
  • Dan taruh java script berikut, di ATAS kode: </body>
<script src='https://sites.google.com/site/kodeblogger/javascript/smiley.js' type='text/javascript'/>
  • Simpan template, dan lihat hasilnya.
Saya sudah coba di blog ini, dan sukses. Selamat mencoba shobat Creativepio semuanya.....!


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Cara membuat Tag Cloud Dengan Background Effect

Posted by Unknown 0 komentar
Sedikit Penjelasan tentang apa itu Tag Cloud, dan apa fungsinya.
Tag Cloud merupakan sebuah box yang berfungsi sebagai wadah untuk sekelompok link dalam sebuah web.
Fungsi dari tag could kurang lebih sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. lebih jelasnya liaht gambar dibawah ini.


Gambar

Berikut cara membuat Tag Cloud menggunakan efek background :

1. Login ke akun blogger sobat
2. Masuk Tata Letak
3. Edit HTML dan ceklist/centang "Expand Template Widget"
4. Biasakan sebelum sobat mengedit template, backUp dulu templatenya, dengan cara klik "download template lengkap"
5. Carikode berikut : ]]></b:skin>
6. Letakan kode css berikut dan taruh di atas kode ]]></b:skin>

.tagcloud {
width:300px;
font-family:Times;
padding:15px 8px;
border:solid 1px #eee;
background:#fff;
}
.tcloud {
padding:3px 6px;
text-decoration:none;
}
.tcloud:link {
color:#003EBA;
}
.tcloud:visited {
color:#ff900;
}
.tcloud:hover {
color:#ffffff;
background:#003EBA;
}
.tcloud:active {
color:#ffffff;
background:#5D7CBA;
}

7. Simpan Template.

8. Kemudian masuk ke Elemen Halaman, Tambah gadget, pilih HTML javascript, dan pastekan kode berikut :

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a>
<a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a>
<a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a>
<a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a>
<a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a>
<a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a>
<a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a>
<a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a>
<a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a>
<a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a>
</div>

9. Edit dan simpan.

Keterangan :

1. Link-1 s/d Link-10 : bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.
2. Link-1 s/d Link-10 : link posting yang telah diterbitkan dengan URL seperti misalnya :
http://..../....../judul posting.html
3. Nama Link-1 s/d Link-10 = Judul Posting.
4. Title Link : berisikan penjelasan singkat Nama Link.

Semoga Bermanfaat ya Shobat Creativepio semuanya........!


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Cara Mudah Menambah No.Urut Komentar Di Blogspot

Posted by Unknown 0 komentar
Tampilan Komentar akan lebih menarik bila kita kasih nomer urut pd setiap komentar, dan pastinya komentar-komentar akan terlihat lebih rapi dan dengan mudah kita bisa tahu berapa komentar yg sudah ada. mungkin itu fungsi dari judul diatas.
Bila sobat tertarik untuk membuatnya dan menaruh di blog sobat, silahkan ikuti beberapa cara dibawah ini.



Gambar

Berikut langkah-langkahnya :

1. Login ke Blogger Sobat

2. Pilih Tata Letak

3. Edit HTML dan ceklist/centang "Expand Template Widget"

4. Sebelum terlalu jauh, biasakan membackUp template sobat dulu, dengan cara klik "Download Template Lengkap"

5. Carilah kode berikut : <dl id='comments-block'> dan ternyata di template saya gak ada kode tersebut, jadi kalo di template sobat jg gak ada cari dengan kode berikut : <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. Kalu sudah ketemu kodenya, selanjutnya sobat simak baik-baik kode dibawah ini :

Cara 1. Karena masing-masing template pasti berbeda saya jg kasih contoh pada template saya sendiri :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='data:comment.anchorName' style='clear: both;'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='external'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='numberingcomments' style='float: right; font-size: 18px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>


</dt>

Cara 2. Nah ini alternatif kode CSS pada templates blog :


<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='numberingcomments' style='float: right; font-size: 18px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>
7. Selanjutnya, sobat hanya perlu menambah kan kode yang di beri warna merah.
Oia di atas ada dua (2) cara, karena saya kode dimasing-masing template kita pastilah berbeda, jadi dari dua cara diatas mana kiranya yg cocok dengan template sobat.

8. Untuk merubah besar kecilnya No. komentar sobat cukup mengganti pada kode berikut : font-size: 18px;

9. Simpan Template, dan lihat hasilnya.

Kiranya cukup sekian dari saya ya shobat Creativepio, selamat mencoba dan semoga berhasil....!


 Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....

Cara Membuat Modus Hemat Energi (Stand By) Di Blog

Posted by Unknown 1 komentar
Saya kira cuma listrik yang bisa hemat energi, ternyata di blog jg ada istilah hemat energi, hahaa... entah apa pengertian rincinya tentang hemat energi ini, tapi menurut saya ini seperti mode stand by gitu. kalau sobat masih bingung coba aja open new tab blog saya ini dan biarkan kira-kira 1menit, dan lihat kembali tab yang td di buka, contohnya seperti itu. bila sobat berminat silahkan ikuti langkah-langkah berikut ini.

Gambar

Langkah-langkahnya :


1. Login ke akun blogger Sobat
2. Pilih Rancangan
3. Klik Edit HTML, dan centang pada kotak "Expand Template Widget"
4. Carilah kode </head>
5. Copy pastekan kode di bawah ini tepat di atas kode </head>

<script language="javascript" type="text/javascript" src="https://sites.google.com/site/kodeblogger/javascript/energy.js?lang=id"> </script>

6. Simpan Template.

Untuk melihat hasilnya sobat cukup membiarkan halaman blog sobat selama kurang lebih 1menit, setelah itu lihat kembali blog sobat. semoga bermanfaat ya shobat Creativepio semuanya.......!


Sumber : http://kode-blogger.blogspot.com/

Baca Selengkapnya ....
Modified by info update - Panduan Blogging SEO. Original by Bamz | Copyright of Creativepio Lombok Island.