Cara Menghubungkan Artikel Blog Ke Twitter Dan Facebook Dengan Menggunakan Twitterfeed

Cara Menghubungkan Artikel Blog Ke Twitter Dan Facebook Dengan Menggunakan Twitterfeed

Untuk mengkoneksikan postingan artikel terbaru yang ada di blog / website kamu tersebut ke account twitter / facebook secara otomatis, kamu bisa mencoba jasa dari twitterfeed.com yang menyediakan layanan tersebut. Kita langsung mulai aja ya dan menyelesaikannya secara adat :

1. Pastikan kamu sudah memiliki RSS Feed blog / website, yang bisa kamu buat di feedburner.google.com (dalam hal ini, saya hanya memastikan saja dan sedang tidak membahas soal ini, maaf).

2. Pastikan pula, kamu memiliki account di twitter/facebook

3. Go to twitterfeed.com dan pilih menu "Sign UP" untuk mendaftar.

4. Masukkan "Blog URL / RSS Feed URL" dari blog / website kamu, biasanya kalau blogspot URL-nya seperti ini : "http://namablogkamu.blogspot.com/feeds/posts/default" dan kolom yang warna merah pada "gambar", diganti dengan alamat blog / website kamu.

5. Setelah itu, klik "test RSS Feed" untuk mencoba apakah url yang kamu masukkan berhasil atau tidak. Jika Feed-nya Ok, lalu klik tombol "Continue to Step 2".

6. Configurasi Publish Service, pilih account Twitter dan Facebook kamu untuk konfigurasi alamat twitter dan facebook-nya, isi kolom yang ada, dan jika sudah klik "Create Service".

8. Jika kamu sudah kelar memasukkan account twitter dan facebook-nya, maka akan muncul tampilan seperti gambar yang ada dibawah ini, maka kamu klik "All Done" .

9. Selanjutnya, akan nongol pemberitahuan, "Congratulations, you have successfully configured a feed!", itu artinya kamu telah berhasil dengan gemilang menaklukannya.

10. Dan setelah itu, "Go to Dasboard" untuk mengotak-atik hal lain yang sesuai dengan selera dan keinginan kamu.

11. Done!


Akhirnya kamu berhasil juga, ya! Selamat! Sesuatu banget!
Tentunya hal ini akan mempermudah kamu dalam mempromosikan blog / website yang sedang kamu kelola saat ini, melaui jejaring sosial yang sedang banyak digunakan orang ramai, Twitter dan Facebook.

Cara Membuat Daftar si Blogger Dengan Scroll

Kadang kita merasa malas apabila kita harus membuat dan mengisi daftar isi tersebut secara manual setiap kali kita selesai meng update artikel. Maka dari itu kali ini saya akan berbagi informasi tentang bagaimana cara membuat daftar isi atau sitemap berdasarkan label secara otomatis mengisi sendiri setiap kita selesai membuat artikel. Berikut tutorialnya.

Pertama masuk dahulu ke dalam akun Blogger anda >> Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script. lalu copy paste  script di bawah ini di lalu letak di HTML/Java Script.

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://reyzalteykaje.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Jangan lupa untuk mengganti teks berwarna biru dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label menggunakan fungsi scroll.

Hasil tampilan

Cara Membuat Widget Recent Post Berupa Gambar Kotak-Kotak

Untuk kali ini, saya akan share Recent posts berupa gambar grid/kotak saja. sehingga lebih efisien dan canggih

Cara Membuat Widget Recent Post Hanya Gambar Grid :

Dari gambar di atas kita sudah bisa melihat bahwa yang akan ditampilkan adalah gambar dari masing-masing postingan di blog anda. Maka dari itu akan membuat blog anda lebih menarik untuk dilihat dan pasti juga akan lebih hemat tempat dan fungsional. saya menggunakan widget ini pada blog saya yang berupa download, sehingga lebih efisien dan efektif.

Berikut adalah langkah-langkah nya :


1. Masuk ke blogger >> Dashboard >> Tata Letak >> Add Gadget
2. Pilih Gadget HTML/Javascript.
3. Masukkan kode javascript di bawah ini.

<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 20;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://reyzalteykaje.blogspot.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
</div>


Ganti reyzalteykaje.blogspot.com dengan alamat blog anda,

Langkah 4 : Simpan

Kalau sudah selesai silahkan anda lihat hasilnya, bagaimana jadinya.

Cara Membuat Tombol Share Keren di Blogger

Kali ini saya akan memberikan tutorial kepada anda cara membuat tombol share keren di blogger, oke lansung aj gann,,,,,....................

Berikut ini langkah yang perlu anda lakukan :

1. Masuk ke blogger anda.

2. Masuk ke Tata letak 

3.Tambah gatget


4. Pilih HTML/JavaScript

5. Masukan Kode berikut ini :



<!-- Start Shareaholic Sassy Bookmarks HTML-->
    <div class='shr_ss shr_publisher'>
    </div>
    <!-- End Shareaholic Sassy Bookmarks HTML -->
    <!-- Start Shareaholic Sassy Bookmarks settings -->
    <script type='text/javascript'>
    var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
    </script>
    <!-- End Shareaholic Sassy Bookmarks settings -->
    <!-- Start Shareaholic Sassy Bookmarks script -->
    <script type='text/javascript'>
    (function() {
    var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
    sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
    })();
    </script>
    <!-- End Shareaholic Sassy Bookmarks script -->




6. Simpan, dan liat hasilnya......
       Contoh :

Mudah bukan... Semoga bermanfaat...

Cara Membuat Frame Dengan Mudah di Blogger

Untuk membuat frame seperti itu banyak cara yang bisa di tempuh, diantaranya bisa menggunakan kode HTML <div> atau bisa juga dengan menggunakan kode HTML <span>. Langkah yang harus di persiapkan adalah tentukan dahulu lebar, warna latar belakang, warna huruf, jenis huruf, besarnya huruf, serta hal lain yang sekiranya berhubungan. Agar lebih mudah untuk di mengerti, saya buatkan sebuah contoh frame sebagai berikut:

Kode asli dari frame di atas adalah sebagai berikut :


<div style="border: 3px dashed red; background: #005af5; padding:10px; width:220px; text-align:left; color:white;">
<a style="font-size: 17px;COLOR: yellow; text-decoration:none;" href="http://reyzalteykaje.blogspot.com" title="klik di sini"><b>Belajar Jaringan dan Blogger </b></a> &raquo;<br/>
Membuat blogger itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. Gabung segera bersama kami !!<br/>
<a style="color:yellow; font-size:12px; text-decoration:none;" href="http://reyzalteykaje.blogspot.com" title="klik di sini"><b>http://www.reyzalteykaje.blogspot.com</b></a>
</div>

Ganti teks yang berwarna merah sesuka anda, sedangkan teks yang berwarna biru ganti dengan alamat Url blogger anda.

Langkah untuk memasukkan frame di blogger :

1. Masuk ke Blogger anda
2. Masuk ke munu Tata Letak
3. Tambah gatget
5. Pilih HTML/JavaScript
6. Paste skrip diatas kemudian simpan.

selsei dan lihat bagaimana hasilnya di blogger anda.

Cara Membuat Banner dengan mudah

1. Buatlah 2 atau 3 buah banner misal ukuran 125x125 px. Contoh :

     pembuatan banner seperti yang diatas bisa dibuat menggunakan photoshop.

2. Silahkan kunjungi website http://picasion.com
3. Klik tombol browse untuk memasukkan file banner

4. Pilih ukuran banner yang sesuai dengan keinginan pada opsi Size.
5. Pilih kecepatan animasi pada opsi Speed
6. Klik tombol Create Animation
7. Banner animasi anda telah dibuat. Contoh hasilnya :

sangat mudah bukan untuk membuat banner sendiri di blogger.
Sekian tutorial dari saya semoga bermanfaat bagi anda dan terima kasih atas kunjungan anda.

Cara Membuat Kotak Followers Di Blogger

Temen-temen ingin bloggernya berbeda dengan menambahkan followers twitter seperti ini :

Langsung ke tutorialnya.. cekidot :
loggin ke blog kalian masing-masing
pilih rancangan
pilih tambah gadget ---> lalu pilih menu html/javascript
masukkan kode dibawah ini :

<iframe name="fbfanIFrame_0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=reyzalteykaje" class="FB_SERVER_IFRAME" style="width: 300px; height: 250px; border-style: none;" frameborder="0" scrolling="no"></iframe><script type="text/javascript">fanbox_init("reyzalteykaje");</script>


ganti ID twitter yg berwarna Biru, dengan ID twitter sobat !
ganti lebar ( width: 300px ) dan tinggi ( height: 250px ) dengan selera sobat

Download XML Maker full version

Xml maker adalah software untuk mgedit Templat blogger dan lain sebagainya yang berbentuk HTML...
Xml maker juga sangat mudah digunakan dan membantu anda dalam mendasain web anda...
Xml maker mempunyai kelebihan yaitu memberi peringatan jika ada kode yang salah ketika anda memasukan kode...

Screenshoot :

Jika anda berminat untuk menggunakan software ini silahkan download di sini gratis tanpa bayarrrr dan software ini juga ringan untuk digunakan.....

Download XML MAKER

Cara Merubah Tampilan Popular Post menjadi keren

Cara Merubah Tampilan Popular Post menjadi keren, Hello Pengunjung Belajar Blogger Pada Postingan ini Merupakan Tutorial Edit Blog dan Trik Blogger Membuat Blog Lebih Menarik, Kenapa lebih menarik Bisa di lihat pada tampilan Screnshot.

Widget Popular Post ini akan lebih manis lagi jika dipasang di sidebar blog. Supaya pengunjung mengetahui keberadaannya, dan supaya tampilan blog lebih cantik lagi. Daripada penasaran, mending dicek aja langsung widget popular post nya.

Berikut ScrenShotnya :

Berikut Ini Langkah Langkah Untuk Membuat Nya :

Login akun blogger sobat.

Menuju Ke menu Tata Letak

Sebelumnya Tambahkan Widget Popular Post Terlebih Dahulu pada blog sobat dengan cara Klik Menu Tata letak, Tambah Gadget, Popular post / Entri Popular, Pilih 7 Hari Terakhir, Centang Thumbnail gambar Dan Jangan Centang Cuplikan ! Jika sudah, simpan

Kemudian, Tambah gadget kembali, Pilih Html Javascript.

Masukan Semua kode dibawah ini.

<script 

language='Javascript'>document.write(unescape('%3C%73%74%79%6C%65%3E%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%2E%69%74%65%6D%2D%74%69%74%6C%65%7B%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%7B%62%61%63%6B%67%72%6F%75%6E%64%3A%20%6E%6F%6E%65%20%72%65%70%65%61%74%20%73%63%72%6F%6C%6C%20%30%20%30%20%74%72%61%6E%73%70%61%72%65%6E%74%3B%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%6C%69%73%74%2D%73%74%79%6C%65%3A%20%6E%6F%6E%65%20%6F%75%74%73%69%64%65%20%6E%6F%6E%65%3B%6D%61%72%67%69%6E%3A%20%33%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%20%30%20%21%69%6D%70%6F%72%74%61%6E%74%3B%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%69%6D%67%20%7B%70%61%64%64%69%6E%67%3A%33%70%78%3B%62%61%63%6B%67%72%6F%75%6E%64%3A%23%66%65%66%65%66%65%3B%2D%77%65%62%6B%69%74%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%2D%6D%6F%7A%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%66%6C%6F%61%74%3A%6C%65%66%74%3B%6D%61%72%67%69%6E%3A%30%20%36%70%78%20%30%20%30%3B%70%6F%73%69%74%69%6F%6E%3A%72%65%6C%61%74%69%76%65%3B%6F%76%65%72%66%6C%6F%77%3A%68%69%64%64%65%6E%3B%2D%77%65%62%6B%69%74%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%2D%6D%6F%7A%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%20%2D%6F%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%69%6D%67%3A%68%6F%76%65%72%20%7B%70%61%64%64%69%6E%67%3A%33%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%35%70%78%3B%2D%6F%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%20%20%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%6F%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%2D%77%65%62%6B%69%74%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%7D%0A%3C%2F%73%74%79%6C%65%3E%0A%3C%64%69%76%20%73%74%79%6C%65%3D%22%70%6F%73%69%74%69%6F%6E%3A%20%66%69%78%65%64%3B%20%62%6F%74%74%6F%6D%3A%20%30%70%78%3B%20%72%69%67%68%74%3A%20%30%70%78%3B%22%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%68%65%72%6D%61%6E%62%61%67%75%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%20%72%65%6C%3D%22%64%6F%66%6F%6C%6C%6F%77%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%2D%74%6F%70%3A%2D%32%35%70%78%22%3E%2E%3C%2F%61%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%68%65%72%6D%61%6E%62%61%67%75%7A%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%20%72%65%6C%3D%22%64%6F%66%6F%6C%6C%6F%77%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%2D%74%6F%70%3A%2D%32%35%70%78%22%3E%2E%3C%2F%61%3E%0A%3C%2F%64%69%76%3E'));</script>

6. Dan kemudian simpan, dan lihat hasilnya, Semoga Membuat tampilan blog sobat menjadil lebih     keren dan semoga bermanfaat :)

Cara Membuat Menu DropDown di Blogger

Belakangan banyak teman-teman yang menanyakan kepada saya, bagaimana cara membuat menu tapi dengan tampilan ke bawah. Walaupun sudah terjawab satu-persatu tapi ada baiknya sekalian saya post disini. Mungkin teman-teman blogger sekalian ada yang membutuhkannya.

Dropdown menu adalah menu yang biasanya berisi link-link untuk menuju halaman tertentu. Tidak hanya itu, menu-menu ini juga memiliki sub menu lagi yang tampil ke bawah dari menu tersebut oleh karena itu menu ini disebut dropdown menu, karena tampilnya ke bawah. Sedikit bingung dengan penjelasan saya ? baiklah, saya akan berikan contohnya.

Menu dropdown tersebut menggunakan sedikit tambahan pada bagian style CSS, menggunakan efek melengkung (perhatikan ujung-ujung menu, terlihat tidak membentuk siku). Lalu, cara menambahkannya ke blog susah tidak ? tentunya tidak sulit, kali ini kita hanya perlu memasukan 1 script ke TEMPLATE dan 1 script lagi ke bagian menu TATA LETAK.

Berikut saya perjelas langkah-langkahnya !

1. Login ke www.blogger.com menggunakan akun blog anda.

2. Buka menu TEMPLATE, pilih EDIT HTML

3. Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian)

4. Setelah ketemu, masukan kode dibawah ini tepat di atas kode ]]></b:skin>

#DropdownMenu {
    background:#ff6803;
border-radius:6px;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color:#FFFFFF;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;


}
#Dropdownbox {
    width: 875px;
border-radius:6px;
    float: left;
    margin: 0;
    padding: 0;
}

#strike {
border-radius:6px;
    margin: 0;
    padding: 0;
}
#strike ul {
border-radius:6px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li {
border-radius:6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
    color:#FFFFFF;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
    background:#FFFFFF;
    color:#ff6803;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
      background:#ff6803;
    width: 150px;
    color:#FFFFFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
     background:#FFFFFF;
    color:#ff6803;
    padding: 7px 10px;
}
#strike li {
border-radius:6px;
    float: left;
    padding: 0;
}
#strike li ul {
border-radius:6px;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#strike li ul a {
border-radius:6px;
    width: 140px;
}
#strike li ul ul {
border-radius:6px;
    margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
    left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
    left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
    position: static;
}



5. Untuk kode yang di beri warna merah dan putih itu merupakan kode warna. Anda bisa mengganti warna background dan tulisan dari menu yang akan anda buat. Untuk kode #ff6803 itu adalah warna orange, yang menjadi warna background dari menu ini, silahkan anda ganti bila memang perlu. Lalu untuk kode #FFFFFF yang di dalam kotak berwarna biru, itu adalah untuk warna tulisan dalam menu.. Silahkan anda ganti bila memang diperlukan. Bila anda kesulitan untuk menentukan kode warna, silahkan cari disni Kode HTML warna.

Kode HTML Warna

6. Bila sudah, silahkan SIMPAN template anda
7. Sekarang kita menuju menu TATA LETAK
8. pilih TAMBAH GADGET/ADD GADGET lalu cari HTML/JAVA SCRIPT
9. Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)



<div id="DropdownMenu">
       <div id="Dropdownbox">
      <ul id="strike">
        <li><a href="#">Menu1</a></li>
        <li>
          <a href="#">Menu2</a>
          <ul>
            <li>
              <a href="#">Sub Menu 2</a>
              <ul>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a></li>
            <li><a href="#">Sub Menu 5</a></li>
            <li><a href="#">Sub Menu 6</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
      </ul>
    </div>
  </div>



10. Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.

11. Bila sudah klik SIMPAN, dan lihat perubahannya pada blog anda.

Bila anda melakukannya dengan benar, maka seharusnya tampilan menu akan seperti yang ada pada contoh. Namun bila berbeda, coba anda perhatikan kembali langkah-langkah di atas. Baiklah saya rasa itu saja postingan saya kali ini mengenai  semoga bermanfaat dan nantikan terus update saya berikutnya.

Thanks to : ahmedeltivicie.blogspot.com

Cara Membuat Widget Entri Populer Keren dan Cantik

Cara Membuat Widget Entri Populer Keren dan Cantik - Sejauhmana sobat Mempercantik blog ? banyak cara untuk modifikasi blog sobat, mungkin Cara Membuat Widget Entri Populer Keren dan Cantik ini bisa menjadi salah satu pilihan. entri popular kalau dari google tentunya biasa saja,, tanpa ada variasi  yang menarik dan keren. dengan tambahan script pada artikel ini sobat dapat Membuat Widget Entri Populer Keren dan Cantik.

 Sobat bisa lihat juga postingan saya untuk mempercantik blog diantaranya : Cara Membuat Recent post bergambar Pada blog - Cara Membuat Gambar Animasi Bergerak di Blog - Cara Membuat Link Berkedip Warna-Warni di Blog - Tips Cara Membuat Animasi Semut berjalan di blog - Trik Cara Membuat Tulisan Mengikuti Kursor di Blog - Cara Membuat Salju dan Daun Berjatuhan Di Blog - Cara Membuat Efek Bintang Bertaburan Pada Cursor Blog itulah beberapa postingan saya bisa sobat gunakan untuk mempercantik blog. 

Nah,,, waktunya ke TKP Cara Membuat Widget Entri Populer Keren dan Cantik , untuk lebih lanjut nih,,,, baca tutorialnya :

1. Login ke blog anda

2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.

3. Klik simpan

4. Selanjutnya klik Template

5. Klik Edit Html >>klik lanjutkan

6. Cari kode  ]]></b:skin> Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]>    </b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

7. Sobat Preview dahulu, setelah berhasil baru di SAVE

Sekian Dulu Sobat  Cara Membuat Widget Entri Populer Keren dan Cantik semoga bermanfaat. Good Luck Tunggu Update dari kang Zain. Ok

Thanks to : softwaremaniapc

Daftar Situs Penyedia Template Blogger Gratis Yang SEO Friendly

Btemplates.com
Salah satu situs favorit untuk mencari template gratis terbaik adalah di btemplates.com, situs ini setiap hari selalu menerima template - template blogger yang terbaru dari pembuatnya, jadinya pasti sangat up to date dan kita sendiri bisa melihat mana - mana template blogger yang saat ini banyak disukai blogger lain, bisa kita lihat dari jumlah downloadernya disana...

Blogtemplate4u.com
Kalau teman semua ingin memperoleh jenis template yang berbeda beda saya rasa Blogtemplate4u.com tempatnya, soalnya di situs ini kita akan mendapati banyak jenis template disini yang dibuat oleh blogger yang berbeda beda - beda.

Zoomtemplate.com
Zoomtemplate.com merupakan kumpulan template - template blogger yang keren dan seo frienldy, teman semua bisa mencari template kesujaan kalian disini, dijamin deh akan bakal ada yang bisa menarik minat kalian soalnya templatenya selalu update setiap saat dan selalu ada yang terbaru disini jadinya kita tidak akan bakal ketinggalan mengikuti trend template blogger..

Deluxetemplates.net
deluxetemplates.net seperinya satu - satunya situs penyedia template gratis yang menawarkan template dengan konsep atau jenis yang berbeda sesuai dengan niche yang ada. Suatu misal, kalau blog kita berisi tentang dunia gadget, kita bisa memilih - milih template bertema gadget disana, dijamin banyak pilihan yang menarik.

Borneotemplates.com
Selain  deluxetemplates.net, situs penyedia template blogger gratis lainnya yang memberikan tema pada templatenya adalah borneotemplates.com. Silakan ni pilih - pilih jenis template yang pas dengan niche blog teman disini dijamin kalian akan bingung mau gunakan yang mana..

Templatesdoctor.com
Template - template keren yang ada di templatesdoctor.com menurut saya ni sebagian besar memiliki header blog yang sangat bagus dan ditambah pula dengan images, maupun flash didalamnya semakin mengesankan koleksi template dari templatesdoctor.com sangat menarik.

Dzignine.com
Semua template yang ada di dzignine.com bernuansa lembut yang dipadukan dengan tampilan yang simple dan desain maupun latar yang menawan. Sebagian besar tempate yang ada kesannya sangat kalem namun beberapa template-nya ada yang memakai warna menantang juga.

Blogitemplate.com
Bagi teman semua yang menyukai template yang didominasi dengan warna hitam, kayaknya blogitemplate.com bisa dijadikan tempat mencari template yang seperti ini soalnya disana banyak di dominasi dengan warna hitam walalupun ada warna lainnya setidaknya biru dan hijau

Bloggerstyles.com
Keunikan dari template yang ada di  bloggerstyles.com terletak pada headernya yang unik, coba saja cek satu per satu pasti tampilannya berbeda dan unik - unik, salah satunya dibagian header template-nya.

Kayaknya dah banyak saya memberi daftar situs penyedia template - template blogger yang gratis, menarik dan seo friendly disini. Untuk lebih mantapnya, silakan diamati satu per satu daftar template di masing - masing situs di atas, siapa tahu ada yang suka, hihihi......

MEMBERI HIASAN JAM PADA BLOGGER

Blog kita akan terasa lebih cantik apabila di isi dengan berbagai hiasan seperti jam, buku tamu, yahoo emotion, tukaran link, beberapa logo, dan juga lain2 sebagainya. sebetulnya hiasan ini bisa kita dapatkan dengan cara mudah karena hiasan ini sebetulnya free, jadi apabila anda melihat blog yang ada hiasan seperti jam atau lain2 anda tinggal menklik saja hiasan itu maka kita akan dibawa ke web penyedia hiasan itu. tapi sebelum kita mengambil hiasan itu sudah pasti terlebih dahulu kita harus melakukan registrasi.

Untuk masalah hiasan saya akan memberikan beberapa contoh saja. karena saya yakin yang lainnya anda pasti akan bisa setelah mempelajari dikit demi sedikit tentang kode HTML yang ada dari hiasan itu.

Memberikan Hiasan Jam pada Blog kita. caranya adalah :

1. Silahkan klik link berikut –> http://www.clocklink.com
2. Jika sudah berada pada situs tersebut, pilih menu Gallery pada sebelah kiri homepage clocklink (atau klik world clock untuk hiasan jam dengan tampilan peta dunia).
3. Pada menu Gallery silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi
5. Klik tombol yang bertuliskan Accept
6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
7. Set ukuran jam yang anda sukai di samping tulisan size
8. Copy kode HTML yang di berikan pada notepad
9. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
10. Selesai

CARA MEMBUAT LINK DOWNLOAD DI BLOGGER

Saat ini saya ingin share Cara Membuat Link Download di Postingan blogger. 

Tapi, trik ini hanya untuk yang belum tahu saja. Baiklah kalau begitu, langsung saja kita ke Prakteknya.

Jika sobat ingin membuat link download maka kodenya seperti di bawah ini, lakukan langkah ini di HTML bukan di Compose.

<a href="http://www.geocities.com/kendhin_x/file.zip">download</a>

Maka akan menjadi seperti di bawah ini.

Download

Catatan:
1. Ganti alamat download yang bergaris tebal dengan alamat download url sobat

EFEK TEKS BEKU

Pada tutorial TEXT Effect kali ini kita akan membuat TEKS MEMBEKU seperti di freezer kulkas ...

Langkah-Langkahnya:

1. New File

2. Beri warna Background hitam

3. Ketik teks dengan warna putih.

4. Beri efek Bevel and Emboss ( Size 25 ).

 5. Buat New layer dan taruh di bawah layer text

6. Aktifkan layer text, tekan Ctrl + E untuk merge down.

7. Tekan Ctrl+M (Curves).

8. Atur seperti gelombang longitudinal.
titik A : 65 dan 191
titik B : 126 dan 81
titik C : 192 dan 221

9. Ctrl+U dan tandai corolize (Hue : 200,Saturation : 40,Lighting : 0)

10. Beri efek Inner Glow ( warna biru, size 8 ).


11. Ctrl+klik layer teks.

12. Aktifkan Channel, pilih save selection.

13. Aktifkan Alpha 1, Ctrl+D.

14. Filter > Brush Stroke > Spatter (16,7).

15. Filter > Artistic > Pain Daubs (8,7).

16. Ctrl+Klik Alpha 1.

17. Select > Modify > Contract (5 pixel).

18. Save selection.

19. Aktifkan Alpha 2

20. Ctrl + D

21. Filter > Brush Stroke > Spatter (16,7).

22. Filter > Artistic > Pain Daubs (8,7).

23. Ctrl + klik Alpha 2.

24. Aktifkan Alpha 1, tekan delete. kemudian Ctrl+D.


25. Rotate Canvas > 90 CW.

26. Filter > Stylize > Wind. Tekan Ctrl+F.

27. Filter > Sketch > Plaster (20,2).

28. Filter > Stylize > Wind.

29. Rotate Canvas > 90 CCW


30. Tekan Ctrl+klik Alpha 1

31. Aktifkan Layer teks, create a new layer dan beri warna foreground putih (Alt+Del).

32. CTrl+D dan beri nama layer "Beku".

33. Ctrl+J (Duplicate Layer) dengan opacity 50 %.

34. Aktifkan layer Beku.

35. Beri efek Drop Shadow. Hilangkan tanda use light global, Angle:90, 5-0-0

36. Beri efek bevel & Emboss. Size:7, Angle:0-90, beri warna abu-abu pada palette warna paling bawah.
HASILNYA:

FREEzE TEKS by RAFLY
Tutorial Photohop ini diarsipkan di ilmugrafis dalam kategori Teks Effect
Selamat berkarya Salam Grafis,
SEMOGA BERMANFAAT

CARA MEMBUAT BLOG

A. Cara membuat Gmail

1. Kunjungi situs www.gmail.com

2. Dengan mengunjungi alamat situs diatas, maka teman-teman akan melihat tampilan situs seperti yang tampak pada gambar berikut ini:

- Kliklah tombol "CREATE AN ACCOUNT" untuk memulai membuat Gmail.

3. Setelah melalui proses nomor 2, maka akan terlihat tampilan situs seperti berikut ini:

Pada bagian ini, maka isilah hal-hal yang diminta pada form pengisian data, seperti:

- Pada bagian kolom "Name" isikanlah dengan nama awal dan nama akhir kamu.

- pada bagian "Choose your username" isikan dengan username yang kamu inginkan, misalnya belajarblog@gmail.com

- Pada bagian "Create a password" isikan dengan password yang kamu inginkan.

- pada bagian "Confrim your password" isikan sama dengan kolom create a password diatasnya.

- pada bagian "Birthday" isikan sesuai dengan tangga lahir kamu.

- Pada bagian "Gender" isikan dengan jenis kelamin kamu.

- Pada bagian "Mobile phone" isikan dengan nomor ponsel kamu.

- Pada bagian "Current email address" dapat tidak diisi bila sebelumnya kamu belum memiliki email

- Pada bagian "Prove you're not a robot" isikan sesuai dengan gambar tulisan yang muncul diatasnya.

- Pada bagian "Location" pilih negara asal kita sesuai dengan yang sudah tercantum, misalnya "Indonesia"

- Centang pada tanda "I agree to the Google Terms of Services anda Privacy Policy"

- Kemudian klik tombol "Next step"

Tunggu beberapa saat, maka seketika akan datang sebuah SMS dari Google ke nomor HP yang sudah kamu isikan sebelumnya untuk me-aktivasi akun Gmail yang baru saja kamu buat.

Bila langkah-langkah diatas sudah dilakukan dengan benar, maka tentu sebuah akun Gmail akan selesai dibuat. Selanjutnya adalah langkah kita membuat blog baru di Blogger.

2. Cara Membuat Blog

1. Kunjungi situs www.blogger.com

2. Setelah teman-teman kunjungi halaman diatas, maka akan terlihat tampilan situs seperti tampak pada gambar berikut ini:

Pada bagian ini, maka isilah hal-hal yang diminta pada form pengisian data, seperti:

- Pada bagian "Judul Blog" isi dengan judul blog sesuai dengan keinginan kamu, misalnya "Belajar Ngeblog"

- Pada bagian "Alamat blog (URL)" silahkan isikan dengan nama blog yang kamu inginkan, misalnya "belajar-blog-aja"

- Pada bagian "Buktikan bahwa Anda bukan robot" isikan dengan tulisan yang tampak pada gambar.

- Klik tombol "Lanjutkan"

3. Akan terlihat tampilan situs seperti tampak pada gambar berikut ini:

Pada bagian ini pilihlah salah satu template yang tersedia sesuai yang kamu inginkan. Setelah memilih salah satu template,

maka langkah selanjutnya adalah meng-klik tombol "Lanjutkan"

4. Akan terlihat tampilan seperti pada gambar berikut ini:

Dengan tampilan situs seperti demikian diatas, maka cara membuat blog sudah selesai, dan kini saatnya untuk memulai menulis di blog kamu dengan cara mengklik tombol "Mulai Blogging"

Demikianlah langkah-langkah cara membuat blog yang saya buat judulnya cara membuat blog 2012 pada tulisan ini. Kalau teman-teman merasa kurang jelas juga dengan langkah-langkah diatas, maka kamu bisa nonton video cara membuat blog berikut ini: