Cuek2Bebek - fiQQi / eeChad

Cara Menampilkan Jumlah Komentar Di Samping Judul Posting

noreply@blogger.com (Anonymous) — Mon, 24 Jun 2013 15:39:00 +0700

Pada kesempatan kali ini saya akan memposting bagaimana cara untuk menambahkan sebuah ikon bubble ke sebelah judul post anda yang menampilkan jumlah komentar dari postingan tersebut.

Login ke Blogger > Layout > Edit HTML
Ceklis "Expand Template Widgets"
Cari kode berikut

<h3 class='post-title entry-title'>

Sesudah kode tersebut ketemu, tambahkan kode di bawah ini tepat dibawahnya :

<b:if cond='data:post.allowComments'>

<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

</b:if>

Setelah itu cari dan temukan kode berikut :

</head>

Setelah ketemu Letakan kode di bawah ini tepat setelah kode </head> :

<style type="text/css">
.comment-bubble {
float: right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Xqxjx8zsCMnrAwtb17RQKTqZgwffByhGTLrVsP5AoyEgAmOaBFY97GaApzCFH7cIPTd_A21mDodjI2n0qeWC31YMowrrL7wFMDh_PISFxFxm0OSjbDqrazmdcsd-qyYWcab6x5Uxamw/s1600/comments.png) no-repeat;
width: 35px;
height: 38px;
font-size: 12px;
margin-top: -15px;
margin-right: 2px;
text-align: center;
}
</style>

Edit kode yang berwarna Biru tersebut sesuai dengan gaya blog anda. Ganti link warna kuning dengan link gambar yang anda sukai bisa buat sendiri atau cari di photobucket. gmpang bukan !!
Selamat mencoba semoga bermanfa'at jangan lupa like nya ya :)

Cara membuat banner animasi

noreply@blogger.com (Anonymous) — Mon, 24 Jun 2013 15:38:00 +0700

banner animasi terkadang lebih menarik perhatian bila di bandingkan dengan banner biasa yang diam dan statis. Oleh karenanya banyak para pebisnis online lebih suka menggunakan banner animasi untuk sarana promosi produk ataupun jasa yang mereka miliki.

Bagi mereka yang terlatih dalam menggunakan berbagai software design grahic tentu tidak ada masalah untuk membuat banner animasi, namun akan berbeda keadaannya bagi yang awam termasuk kang rohman. Akan tetapi tentu banyak cara untuk mencapai sesuatu termasuk masalah pembuatan banner animasi. Untuk kita yang awam, banyak layanan online baik gratis ataupun berbayar yang bisa kita pergunakan. Banner animasi umumnya dibuat dalam file gambar berekstensi gif serta gambar dalam bentuk banner flash. Berikut beberapa contoh website yang menyediakan layanan membuat banner animasi : Gif Banner

http://picasion.com
http://www.loogix.com
http://www.createagif.net
http://gickr.com

Flash banner

http://www.123-banner.com
http://bannersabc.com
http://www.flashbannernow.com
http://www.quickbanner.com
http://www.flash-banner-maker-online.com

Cara membuat banner animasi

Sebagai contoh, Kang Rohman akan bahas bagaimana cara membuat banner animasi berupa banner gif di http://picasion.com. Berikut adalah langkah-langkahnya :

Buatlah 2 atau 3 buah banner misal ukuran 125x125 px. Contoh :
Silahkan kunjungi website http://picasion.com
Klik tombol browse untuk memasukkan file banner
Pilih ukuran banner yang sesuai dengan keinginan pada opsi Size.
Pilih kecepatan animasi pada opsi Speed
Klik tombol Create Animation
Banner animasi anda telah dibuat. Contoh hasilnya :
Anda dapat menyimpan file banner animasi tersebut, atau bisa juga menggunakan link yang di berikan.
Selesai

Ah ternyata sangat mudah membuat banner animasi. Untuk selanjutnya anda dapat memasang gambar tersebut di blog anda. Semoga artikel tentang cara membuat banner animasi ini dapat bermanfaat bagi anda.

MotoGP-2013 Calendar

noreply@blogger.com (Anonymous) — Mon, 24 Jun 2013 15:31:00 +0700

FIM Road Racing World Championship Grand Prix
2013 calendar, update 11 December (Changes in bold)

* Evening Race
** Saturday Race
*** Only MotoGP class
-------------------------------------------------------------------------------------------------------------------

About the FIM (www.fim-live.com)
The FIM (Fédération Internationale de Motocyclisme) founded in 1904, is the governing body for motorcycle sport and the global advocate for motorcycling. The FIM is an independent association formed by 103 National Federations throughout the world. It is recognised as the sole competent authority in motorcycle sport by the International Olympic Committee (IOC). Among its 50 FIM World Championships the main events are MotoGP, Superbike, Endurance, Motocross, Supercross, Trial, Enduro, Cross-Country Rallies and Speedway. Furthermore, the FIM is also active and involved in the following areas: public affairs, road safety, touring and protection of the environment. The FIM was the first international sports federation to impose an Environmental Code in 1994.

Klasemen MotoGP-2013

noreply@blogger.com (Anonymous) — Mon, 24 Jun 2013 15:28:00 +0700

Pos.	Pembalap	Poin
1	Dani Pedrosa	123
2	Jorge Lorenzo	116
3	Marc Marquez	93
4	Cal Crutchlow	71
5	Valentino Rossi	60
6	Andrea Dovizioso	59
7	Nicky Hayden	45
8	Stefan Bradl	41
9	Alvaro Bautista	38
10	Aleix Espargaro	36
11	Bradley Smith	34
12	Michele Pirro	28
13	Andre Iannone	21
14	Danilo Petrucci	13
15	Hector Barbera	13
16	Randy de Puniet	11
17	Colin Edwards	10
18	Ben Spies	9
19	Yonny Hernandez	3
20	Michael Laverty	3
21	Karel Abraham	2
22	Hiroshi Aoyama	1
23	Claudio Corti	0
24	Lukas Pesek	0
25	Bryan Staring	0

Cara Membuat Komentar Facebook di Blog

noreply@blogger.com (Anonymous) — Mon, 24 Jun 2013 12:25:00 +0700

Cara Membuat Komentar Facebook di Blog

Cara Membuat Komentar Facebook di Blog - Hal ini merupakan hal yang sudah umum dan bukan lagi baru. Banyak para blogger yang sudah menerapkan trik ini di blog nya karena beberapa alasan. Ada yang bilang kalau menggunakan facebook akan lebih simple, ada yang bilang kalau menggunakan facebook jadi lebih gaul, ada juga yang bilang kalau pake facebook jadi tidak ribet. Itu semua pendapat orang, bagaimana pendapat kamu ?

Sebenarnya blogger sendiri juga sudah menyediakan kolom komentar sendiri. Tapi di samping itu kebutuhan akan suatu hal yang baru tentunya akan selalu muncul. Ini juga terjadi pada blog ini, dikarenakan muncul terlalu banyak komentar pada salah satu artikel saya maka saya putuskan untuk membagi komentar pengujung blog ini ke kolom komentar facebook. Bisa anda lihat sendiri di kolom komentar. Anda juga dapat melihat screenshot nya di bawah !

Nantinya kolom komentar dari facebook ini akan berdampingan dengan milik blogger. Lalu bagaimana cara membuatnya, langsung saja praktekan langkah-langkah di bawah ini !

Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML

Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F

Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Setelah itu cari lagi kode </head> kemudian letakan lagi kode di bawah ini tepat di atas kode </head> :

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB ANDA' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

Dari kode di atas, perhatikan kode yang saya beri warna merah. Ganti kode berwarna biru dengan ID Facebook anda.. Contoh : halaman facebook anda www.facebook.com/DigitalAreas maka ambil DigitalAreas sebagai ID anda

Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'> .. Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class='comments' id='comments'> :

<!--FB COMMENT-->
 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'> 
<!--FB COMMENT-->

Perhatikan script di atas, ada 2 kode yang saya beri warna merah. 5 itu berarti jumlah komentar yang di tampilkan sedangkan 500 itu berarti lebar kolom komentar tersebut.

kemudian jangan lupa SIMPAN template anda dan lihat hasilnya .

Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan. Demikian update saya kali ini mengenai Cara Membuat Komentar Facebook di Blog . Semoga bermanfaat !

Cara Membuat Menu Tab View

noreply@blogger.com (Anonymous) — Mon, 24 Jun 2013 11:52:00 +0700

Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll.
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Memasang Dan Kostumisasi Label Tag Cloud Pada Blogger

noreply@blogger.com (Anonymous) — Mon, 24 Jun 2013 11:35:00 +0700

Blogger memiliki banyak widget resmi yang tersedia untuk penggunanya termasuk widget label cloud. Namun tampilannya hanya standard resmi dari blogger, jika kita ingin penampilan yang lebih maka kita harus melakukan kostumisasi dengan memasukkan beberapa script ke dalam template blog Anda. Pada artikel ini kami akan berbagi tutorial tentang cara membuat stylesheet sederhana yang akan mengubah label cloud menjadi lebih indah. Oleh karena itu Anda semua mendapat kesempatan untuk bermain-main dengan widget dan merubah mereka menjadi lebih indah dilihat. Saya sudah memastikan bahwa script ini kompatibel pada semua browser utama termasuk IE8+. Contoh tampilannya Anda dapat melihat pada gambar di bawah ini. Dan sekarang waktunya kita bekerja! ^^

Ini adalah widget label dalam tampilan cloud:

Ini tampilan setelah dilakukan kostumisasi:

Cara Kostumisasi Tampilan Label Cloud Di Blogger

Kode di bawah ini dapat disesuaikan dalam beberapa cara untuk membuat desain label lebih menarik. Anda juga dapat menambahkan gambar latar belakang mereka.

Ikuti langkah mudah berikut ini:

Klik Add a Gadget

Kemudian pilih Widget Label

Di dalam pengaturan pastikan Anda memilih tampilan Cloud. Anda dapat mengatur opsi lain sesuai kebutuhan Anda. Lihat gambar di bawah sebagai contoh, Anda juga bisa mengaturnya seperti gambar ini.

Tampilkan paling banyak 25 label, karena jika terlalu banyak akan terlihat buruk.

Sekarang simpan widget Anda dan selanjutnya masuk ke Template

Backup dulu template Anda jika diperlukan
Klik Edit HTML dan carilah kode ini (Gunakan fitur search CTRL + F untuk memudahkan pencarian)

]]></b:skin>

Setelah ketemu, letakkan kode CSS ini di atas kode ]]></b:skin> tadi

/*-----Labels Cloud widget http://d-genera.blogspot.com/----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}

Simpan Template Anda
Selesai!

Lihat blog Anda untuk memastikan sudah ada perubahan dan script tadi dapat bekerja dengan baik serta label berubah menjadi kotak persegi kecil yang rapi. Jika Anda ingin merubah tampilan label dengan ukuran yang acak, Anda hanya perlu menghapus font-size:10px; dari kode di atas.

Jika Anda menemui kesulitan dan membutuhkan bantuan, segera hubungi kami dari kotak komentar yang sudah disediakan. Selamat mencoba kawan.. ^^

Cara Merubah BlokQuote Di Blog

noreply@blogger.com (Anonymous) — Mon, 24 Jun 2013 11:30:00 +0700

Blockquote merupakan sebuah kotak yang membingkai tulisan tertentu yang menunjukan kalau tulisan itu merupakan sebuah tulisan penting yang perlu mendapat perhatian dari pembaca untuk mendapatkan inti dari bacaan secara keseluruhan. Berbicara mengenai blockquote, kita kadang merasa bosan dengan tampilan blockquote default yang hanya itu-itu saja. So, adakah cara untuk membuat variasi blockquote dalam blog kita ini? Ya, tentu saja ada. Dengan variasi blockquote yang lebih menarik tidak hanya akan memperjelas pembaca dalam menemukan dan memahami inti bacaan kita, tetapi juga akan memberikan daya tarik tersendiri bagi pengunjung yang tidak terbiasa banyak membaca untuk kemudian mengamati dan membacanya.

Cara otomatis.

Cara otomatis dalam membuat blockquote ini memungkinkan kita untuk tidak lagi harus memasukan kode-kode HTML untuk menampilkan blockquote saat kita membuat postingan blog, karena saat kita mengklik ikon blockquote akan secara otomatis muncul model blockquote yang kita inginkan.

Cara membuatnya adalah sebagai berikut ;

Pertama masuk ke akun Blogger kita.
Klik fitur Rancangan.
Klik edit HTML.
Cari kode blockquote dalam kode HTML template blog kita tersebut.

.post-body blockquote {

Hapus kode blockquote tersebut, kemudian ganti dengan memasukan kode HTML blockquote yang kita inginkan.
Klik simpan template.

Keterangan :

Untuk mempermudah pencarian kode HTML yang dimaksud, klik tombol Ctrl + F pada keyboard kita.
Selalu biasakan untuk download template blog kita terlebih dahulu sebelum melakukan edit, untuk back up sebagai antisipasi saat kita mengalami kegagalan sewaktu proses editing berlangsung.

Beberapa bentuk variasi blockquote beserta kode HTMLnya yang dapat kita pilih untuk kemudian di tampilkan dalam postingan blog kita antara lain sebagai berikut ;

Bentuk 1.

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Contoh hasil tampilannya

Tips Trik Blog | Dan Cara Buat Website

Bentuk 2.

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 3.

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 4.

blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 5.

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT98JulriG_wj5UU6enrq-K14L9ONyr2EyQmYvBI1c1zBySeVXKylldq-FoiLwKVdh85SpWh7jTq21bwC2gcZ1vLFwmlfqXsItD6xeHTBIbtPE921S0LN_J6leNRp17kmT8r_dw5E98_8/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 6.

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9xjAvXfeBlkGrYG3xzk2FrTL7GvinM0ih9o68LWWfNsMDYcgrMnRMtBVcQFA3ct_ZWOLoCtDXQNDqGgwNY0lNn8X4Ia7puWJXVYhEDU8QaH1eIf2eMfWJPFRit8EholqkNA_63tQQSQ/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Bentuk 7.

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsB_EyRRQjOzi36JAYIEE0Da7YCV7yv7PRcShlw32RGRjTBzHWMCO0jJELxOxgCOPDj03dFzDU8wF-OAfJ4PimONsLOh0q7gtJW4t2Q8SW6gYBUkExzc5lqRFlMTdts0wmQQQ6YHAGjQM/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 8.

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2GDgR2onvBwzFzXf5EWRItd64KOrzinbT1aG-05K-CZbzCrFC1NvWFGKykkFdFRSY32wcsuJqV-W45OUgdCc22mbfTzGGEzHv2WXKlYMd_N5Y51Y_O169NqsyT-T0g_uab6YCXjDIztY/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 9.

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLuz0hp8MZJzvCQ5s0OQbsitP53HLeZASqjT-1XmB7t2sBlOLsILp6liOKQubgzSH2QcP09vXjQNfGlvv-a3UtuION7yfnTpPe4OIgmaMTWO0Cq-wPcdlMlEp29O_GpKEUkFwYSWH3GA8/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 10.

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJXnL3axgtz9Glqfk1IO0V6jT_3mQWG6kVayxvPNc8rHR2oH1221hmCnsW4FfkENz7GvlVBywz6iryukJuEvbKjFvguziRjU-3b6tRxXmPnRVdBqf-DrNMHVF_ukURWa6060qt6qrR3qc/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 11.

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjua78RjO3Mvprd_SmHdwdqPch959CWbac9G_Kp8zn02FTwHsLb728pBfLiF6JyM8ErbGq4x7GH92Fd1UN0Qj-9M4bucA8k8JF0F2SC-hsELkfsO7uZkZUNpTZdGsmShk4o6lm43hqaWs4/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOizxbFPenI_L1kNY-oNQLS20gSyPLdQ7QvrS3f4IKF0U2UDjI953xRkyc5m7fqiHf89ekf5vuU0M63LD6ZHPIg0EXk9O4Xzk9CuXk7z3Om5Ny4S9OFvaaRDEtRx5ozTP_pUwF6rhSJIE/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 12.

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFV6f5HofbV4gWSRCqDI8dyITcJqF0dxmHS-HXK5cf4YlIJM6TVm_dqfVexKU5Pt3ysOsWgk8pmlI2w-ebFCJIdSw3oMvqVafBIzpfwlNHPSfQfixbxsmT81SS3JuDScImMVwFZL_1qcQ/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn6VS2MCrXvbMCL1PwRR_g-KNiiiv60bXjJJdG7-rMiVpjFPfQ9FnQnR0TmLYuIL1bnrD7pzPCdg4cWL7SGbOHYxHYLkGqJ-_ElUE_3CdYkakvJC-6gunU1ZcN2_DDrK_X4oJtgC5iLLM/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 13.

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7PLhOfqpbCxzfAg8qodjkUL749pCQkMzXlYvJ0K5UZWbRmFNVRdOMsZtayejxNHMpk-CQKbUVCZy0So8OYUMIi4N8vo_vS4EXPCtNECJ9gVPeXz5rtkdcQaQxGUITnEpsPmXdty63n18/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 14.

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6e1G7RYhbf7ldTvqPqiaHDcuvaGmha8e-25aoZrhyE9ngOQJXN2WMR9chd6Qgk_PIiimII8zCZJAbvLH5G7y0rCCnUclVoU_9p8hxO23hVD3ZJXBdOnUoc8jpDxKe6tvsviPW5GTRlX0/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjB8L-TamUofk6LbCe-70zHJdvxCT2UuAYtQbV8PkPqsWlhgs7RSnSya2alBUykHtzDIYTiyaJ1aHCLNuhHzEC5Q2u48C2Rv1jakzuZBJqm7gCugb5T9t2DrfTcEl2yJcUAj5OuclB-q8/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 15.

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRHkkUVypH_BBeowMR3wrTMrAo6TUPoY0Y4hhGEynEN6wctReIj1OTjNAMZEhKDXxnY3BAqcuJzAS-9S9eOrpR7LFt8F1UGyPCWfaHK2Ea7uca94087MMyOg00KnDQx2YISZDUvruJ0Ns/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9bK0gurHO0Tb-DuGB31I8Voqsd-mKuf1GeEJ7cJvc57g_suH-JuMSklVy0-K6YIJqqoaGGOX1FQfU6nCv5JbQ65sF25fYIAYMzkVVeA6oVgHVteyI1E-0AHEdJA7-2BkYkEwjxb9z7fM/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }
Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 16.

blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPde5A5hfNd6sLu-3JYX-2DEJORTx9tj8BfQjYElRoT4CDkHvXNaThJRABWUDwkr7B7lruL5i7pb79S-kiOKJLGRekp65sMXOs-f-rbVsA4sdXrCeq0EnjIE6A9HC-qYsL81sqJc4JQMa/s1600/quote.png") 5% no-repeat #FFF8DD; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 17.

blockquote{ background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 18.

blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 19.

blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid rgb(185, 227, 95); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 20.

blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid rgb(56, 97, 11); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 21.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 22.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 23.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 24.

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Cara manual.

Cara ini tidak membutuhkan penggantian kode HTML template blog, tetapi kita hanya perlu untuk memasukan kode HTML blockquote yang kita inginkan setiap kali kita membuat sebuah postingan. Caranya adalah saat kita membuat postingan sebuah blog, jangan menuliskan blockquotenya di bagian compose. Akan tetapi, tuliskan blockquote tersebut beserta kode HTML untuk menampilkannya pada bagian edit HTML (letaknya tepat di sebelah kiri bagian compose).

Adapun kode HTML yang perlu kita masukan untuk menampilkan blockquotenya yaitu ;

<blockquote style=" Masukkan kode HTML blockquote yang ingin kita tampilkan di sini "> Masukkan tulisan yang akan kita jadikan blockquote di sini </blockquote>

Dengan beberapa langkah singkat dan mudah kita akan mendapatkan tampilan blockquote yang lebih menarik dari biasanya.
Semoga Cara Merubah Quote di Blog ini bermanfaat .

Cara menambah headline news

noreply@blogger.com (Anonymous) — Tue, 21 May 2013 11:36:00 +0700

Cara Mudah Membuat Headline News di Blog - cara menambah headline news atau trik/ cara gampang memberi headline news atau news update atau hotnews berita terbaru berjalan dan bergerak di blog dengan mudah dan cepat.

Pada postingan artikel sebelumnya saya telah berbagi ilmu mengenai cara membuatrecent post dengan thumbnail, dan di kesempatan kali ini saya akan berbagi ilmu mengenai cara membuat news update di blog. Anda pastinya sudah tahu akan apa itu headline news/ hot news/ news update lalu bagaimanakah bentuknya? Contoh bentuknya bisa anda perhatikan gambar di atas. Headline news yaitu sebuah bagian/elemen di blog umumnya terletak di bagian atas dari sebuah blog yang berisi link-link artikel terbaru dari blog tersebut yang biasanya selalu berubah-ubah tiap berapa detik sekali. Tujuan utama dari pembuatan Headline News ini yaitu untuk membuat blog lebih menarik dan tampil profesional, sehingga pengunjung akan merasan betah dan tentunya akan meningkatkan pageviews. Jika anda tertarik untuk membuat headline news/news update/berita terbaru di blog silahkan ikuti langkah-langkah cara membuat headline news/news update/berita terbaru bergerak di blog berikut ini:

1. Pertama anda harus masuk/ login ke akun Blogger akun blogger anda.
2.Kemudaian anda Klik Template --> Edit HTML --> Lanjutkan (jangan lupa centang Expand Template Widget).

3. Setelah itu Cari kode ]]></b:skin> (untuk mempermudah pencarian gunakan CTRL + F atau).
4. Setelah ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVEVrJwoJdiKc-TCAUuPlkqdBEXj-uZuCkvDn3cHKXmUmoP_K1Q_gR_rw6Y3BKsyfcKH8kKU1y1t7jXkiGaCe3s_MLQlzQEeDVnW1tfJydSDi6raEuQiaXOEAvAJqEPFLv9kzs7WnpJtA/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

Keterangan :
> Warna merah adalah ukuran panjang headline news.
> Warna biru adalah ukuran tinggi headline news.

5. Selanjutnya anda cari kode </head>
6. Kemudian anda copas kode dibawah ini tepat diatas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};

var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

7. Selanjutnya anda cari kode <div id='header-wrapper'> atau <div id='header-outer'> (pilih salah satu saja)

8. Jika sudah ketemu letakkan kode berikut tepat di bawah kode nomor 7 tersebut.

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://www.cuek2bebek.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

Keterangan: Ubah kode yang berwarna biru dengan URL blog anda.

9. Jika sudah Simpan template anda dan lihat hasilnya.

Cara Membuat Chatbox Seperti Obrolan Facebook

noreply@blogger.com (Anonymous) — Mon, 20 May 2013 13:45:00 +0700

Pada postingan kali ini kita akan memberikan Cara Membuat Chatbox Seperti Obrolan Facebook di Blog/Website. Kalian bebas bisa naruh di blog apa..boleh Blogger, Wordpress atau yang lain. :D

Kode HTML nya :

<div class="chat-box">
<input type="checkbox" />
<label data-collapsed="Buka Chatbox" data-expanded="Tutup Chatbox"></label>    <br />
<div class="chat-box-content">



</div>

</div>

Nah kalo yang di bawah untuk cssnya :

.chat-box { font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif; color:#333; width:200px; /* Chatbox width */ border:1px solid #344150; border-bottom:none; background-color:white; position:fixed; right:10px; bottom:0; z-index:9999; -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2); -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2); box-shadow:1px 1px 5px rgba(0,0,0,.2); } .chat-box > input[type="checkbox"] { display:block; margin:0 0; padding:0 0; position:absolute; top:0; right:0; left:0; width:100%; height:26px; z-index:4; cursor:pointer; opacity:0; filter:alpha(opacity=0); } .chat-box > label { display:block; height:24px; line-height:24px; background-color:#344150; color:white; font-weight:bold; padding:0 1em 1px; } .chat-box > label:before {content:attr(data-collapsed)} .chat-box .chat-box-content { /* padding:10px; */ display:none; } /* hover state */ .chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A} /* checked state */ .chat-box > input[type="checkbox"]:checked + label {background-color:#212A35} .chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)} .chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}

Semoga bermanfaat codingnya :)

Cara Memasang Widget Related Post Blogger

noreply@blogger.com (Anonymous) — Wed, 8 May 2013 12:38:00 +0700

Widget Related Post ..... Penting !! Keberadaan widget yang satu ini memang dirasakan cukup penting dalam dunia blogging. Widget Related Post merupakan sebuah widget yang menampilkan sejumlah link yang memiliki keterkaitan konten satu sama lainnya. Umumnya 'related post' akan ditampilkan di bawah artikel.

Beda halnya dengan Widget Recent Post di mana widget yang satu ini hanya menampilkan link-link artikel yang baru dipublish. Sedangkan Widget Related Post akan menampilkan link-link artikel yang terpublish dalam satu kategori atau label. Tentu saja dengan widget ini akan memberikan navigasi yang lebih baik buat para pengunjung blog.

Pada template bawaan Blogger maupun template-template gratis yang bisa kita download di situs-situs tertentu, umumnya tidak memiliki Widget Related Post. Untuk itu kita harus memasang sendiri widget tersebut.

Setelah keliling mencari kode script widget yang bagus dan yang berbintang lima.... :-) akhirnya saya dapatkan juga. Kode script ini telah lulus diujicoba dan telah berhasil dipasangkan pada blog.

Silahkan ikuti langkah-langkah berikut :

Login ke dalam Blogger kamu.
Pilih Template ---. Edit HTML ---. Lanjutkan ---> Centang Expand Template Widget.
Kemudian gunakan Control+F atau F3 untuk menemukan kode script yang ini </head>
Ganti kode script </head> dengan kode script yang ada di bawah ini.

<b:if cond='data:blog.pageType == "item"'><style type="text/css">#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwiv5BILK0Os6zo-7Vcx7c0s_jeApYskP1X0aLFbWImellpW3obWpPm0FZxyKj9vFRblXt0qZOiVHiwRgM0Eg-dS3qUp0L6PRVqkv_k8cpw0PqiP5IedDDkOxBBmc4ci5nR8QUjMB2H-4/s1600/bintang-seo.jpg) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style> <script type='text/javascript'>var relatedpoststitle="Related Posts";
</script><script src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/> </b:if></head>

Kemudian cari kode script <div class='post-footer-line post-footer-line-1'> atau yang ini <p class='post-footer-line post-footer-line-1'>.
Ganti kode tersebut dengan kode script di bawah.

<!-- Related Posts Code Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<!--Remove--></b:if>
<!-- Related Posts Code End-->

Setelah itu simpan editannya dan silahkan lihat hasilnya. Selamat mencoba !

SUMBER : TUTORIAL_BLOGGER

Tutorial Membuat Menu Horizontal Dropdown + Search engine M.1

noreply@blogger.com (Anonymous) — Wed, 8 May 2013 12:03:00 +0700

Kali ini saya akan membahas bagaimana Cara membuat menu horizontal dropdown plus search engine (kotak pencarian) M.1. Menu dropdown ini biasanya sering digunakan untuk membantu para pengunjung blog kita untuk mencari sesuatu yang mereka butuhkan, dan menu dropdown ini juga mempercantik blog kita. Dan seperti yang kalian lihat, di blog ini saya juga memasang menu horizontal dropdown + search engine M.1, menurut saya sendiri menu ini juga sangat bagus dan menarik, dengan tambahan search engine maka pengunjung akan lebih mudah mencari artikel-artikel di blog kita.

Berikut Tutorialnya :

1. Seperti biasa, pertama-tama kita harus login ke account Blogger terlebih dahulu

2. Masuk ke Dashboard, Template

3. Pilih Edit HTML, lalu ceklis "Expand Template Widget"

4. Cari kode ]]></b:skin> (tekan ctrl+f untuk mempermudah pencarian)

5. bila sudah, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha5y-OKurGDi9XWdOG5vgI_fmdCU8Bptxq4ukKRcFa3ykNANtRvSO98_q0tBwUQB9dDkW-ka1AuDhlMvkP9wlsJJNgolS669giJ6EtlTQuj6cHqwcql1eK1FjmtIvBVAkT8M8rnLtsc9U/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8XASvpDU_SkNF0doDup6KlRR88Ut1KqD8Kd41pVZulgwzqZcSDQ7PwOTyZIiuWRgLPMRLL9BiZA_HXMPpqtQAR8Am7aZmZHghZeRfQZtEh2pogJlp8f8tfUEyGGCTNLCa3ZJsKBOMxFU/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Silahkan sesuaikan lebar menunya dengan mengganti kode yang berwarna merah

6. Cari kode <header>, kode tersebut biasanya terdapat dua, kamu cari kode yang kedua

7. bila sudah ketemu, letakkan kode berikut tepat dibawah kode <header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://tutorial-blogz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5AVnKL5gJkIvQc72D1HTAmxvy4slvYMfXzkyYsfp2uhGIpJCSeLKsF2smYKv3GuBL9WhRoptgYYdDm1jQSmAiZK8Y6l956ZVXerVCWahIGsVf-X0juRlme3zbGwWACXIf0GIdz1rutqk/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4j_5dnQsUAI9egITOjGeB0dDIiA2WEeCgRBmxZJ6Qt7cz2GPG9zI_A2gi-zu1-2nMs-hLHyeiA-jCN6fPIs00p4sJ7Qc4JRKqEPD7QWNikNku4SQYDEsyoIhBg6OBXBJbQndNm0pbrrU/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Keterangan : Yang warna merah adalah link yang akan dituju
Yang warna biru adalah judul dari Menu dropdownnya
Yang warna ungu, ganti dengan url blog kamu

8. Sebelum menyimpan template, sebaiknya klik pratinjau/preview terlebih dahulu, supaya bisa melihat apakah widgetnya sudah benar atau tidak
9. bila sudah, klik Simpan template.

Semoga bermanfaat :D

SUMBER : TUTORIAL_BLOGGER

Cara Memasang Widget Google Translate Keren Pada Blog

noreply@blogger.com (Anonymous) — Mon, 6 May 2013 13:22:00 +0700

Halo semua, kali ini saya akan memberikan informasi tentang Cara Memasang atau Membuat Widget Google Translate Keren Di Blog. Sebelumnya, saya akan menjelaskan sedikit tentang widget google translate ini. Widget google translate adalah widget yang berfungsi untuk menterjemahkan isi atau konten pada suatu halaman di internet kedalam bahasa yang kita mengerti. Misalnya kita mengunjungi sebuah blog, tetapi seluruh isi atau kontennya berbahasa inggris.

Kalau kita mengerti bahasa inggris sih tidak ada masalah, tetapi bagaimana jika tidak? tentu kita akan kebingungan bukan? Atau misalnya ketika orang asing yang tidak mengerti bahasa indonesia mengunjungi blog kita, tentu ia juga akan merasa kebingungan.

Untuk mengatasi masalah tersebut, kita dapat menggunakan widget google translate ini agar pembaca tidak usah menterjemahkan isi atau konten blog satu persatu dengan cara mengcopy dan mempastekannya di Google Translate. Pembaca hanya tinggal memilih bahasa yang tersedia di widget ini. Untuk memasangnya, kita dapat menggunakan widget translate default dari blogger dengan cara masuk ke menu tata letak > tambah gadget > pilih gadget "Terjemahan" > pilih model tampilannya > Simpan. Maka hasilnya akan menjadi seperti ini :

model tampilan "vertikal"

model tampilan "horizontal"

model tampilan "tarik turun"

Tetapi jika kalian bosan atau tidak menyukai ketiga tampilan tersebut, kalian bisa menggantinya dengan widget google translate buatan kalian sendiri menggunakan kode HTML. Cara memasangnya masuk ke menu tata letak > tambah gadget > pilih gadget "HTML/Javascript" > masukan judul > masukan kode HTML widget kalian > Simpan. Berikut adalah contohnya :

1.) Wdget Google Translate Berbentuk Bola :

<center>

<a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" title="English" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTIx8fbBKd1f9vEcxIQZXa7Pf80fvAKun8S6M4yozluJN-iw2tt32umTT3Pfdr0op3LIXas5otk1O-rNTvU7XNSbStu1HXWHv9-yD7mugC692sT3u3YzbqIR3TFZ6JE_Cbm3S-cPzNGCA/s24/uk-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a><a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" title="French" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlM0Pb69XcsEzVebNhQvJegoEHWMKZscBeSlmc5Flwl88Ov-3S5Z0l11NykBcMPkHrrQCCnvDYV_HldXTUeNSKmNcIgtjkcyG8DAxrFm-5v6TrTNkelE32b0D43CyRhtuvo-uWz05DjCg/s24/france-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a><a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" title="German" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuI3RjEVRr9m9SeEV3rTsLdCXVlsJu6esz-SnQelFs1LzlrRcMP3R6ON95ADhcD5fbQaDnLV3PCaR_JGRpH6gAX23keMjB2oQTDjJHiwR4pVkTO0XYtLMi2a_DhEiBp8iH2TuemZ2hhw/s24/german-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a><a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" title="Spain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzMYRPXJ8viagYgKwgkG9Ml4yKalitHH0ACniTlj0rdOcAEXwEOMRlwKlN8hM_dXSzycnDB-jL3xL5JObIWc6L5tcA4Y2Lp7mFeZ75xBECO815sQmY1OkpPdGvwf3HIlIV8Quxxn4CBds/s24/spain-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a><a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" title="Italian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCkyQKmls0UVLUTIcgG_ohq6Pg95Q7wORArrCGM2V6EtaNtbnWFdMBj8wM5Obk4GlPVpJxb1dC7v6fIF-OUXrCmq8z8RasXfl17HfoUt-CN0tmQ7M0IOfnYrkb0SCNKf6Tvf0Jxj1RfM/s24/italy-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a><a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" title="Dutch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwbV2Ywa02vyGh1ENWCnD2gdOR5ZcAn4mjuxQcFWoUWSZIuQjpGHD7RA8Tx5iYLplCZM8N1OM5058GqgPVq5JVQrHR9CJHIBrV1qjKyW_UsoDK9Hh_NG_NohkaDNOs5Cu88NJT91qhRIw/s24/dutch-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a><br />
<a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" title="Russian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IPxhwMpD6s6jqfHHfWcHb7YYJyDmtqos1i5lHxF3W8YVaOz6ucWqqYc-ZPqwPpN_jSG8GicjrdXJTpMS222WGKRAY4_fu3zzuHl62-yO6d_eSYMpDhywebj_YLOQ6KO3fUZF93Bs2iU/s24/russian-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>
<a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" title="Brazilian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeXS4LT57LelXSKAoX8As8IPYVEszqVLbPC8CjwR2K4wkzGn7SiduFcx1nCA9I8UStM1Aan6gPekSNKIvvc2LTxCpwBO3Fa_xXrH5a4u7Kr17Lj2hiT2pVZRZ-kW9ObTHrZniVTCIlkQQ/s24/brazil-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>
<a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" title="Japanese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMAsYlURYZ8EeZ5IOujDvmbXzDSAZnXPoZVqeRGSD6asG9G-kV3QUOaMLVQTviY46Di_hxqw95PuXF56CfrJMigg1hXOFmxpIRbUGgj_VTMrN82CvWuNeuI-QdcLPiQStWGP_lCQWWxBI/s24/japan-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>
<a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" title="Korean" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUzyCpYxSV5NHm4YqkEk_tN4Y2nYefZ6H0FcQ1xbrVr7vFIV9wxUzU5sYpsF-UqxSj8VHYSdWnbdUMOpb7Tb1iR5mMDuUDtoeVsIFDyP-7L9Q-HMA08MqOiN0kcdmgSXZBcHBOiHa0w20/s24/korean-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>
<a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" title="Arabic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdM52PLv-xRFY1kK3qCtKLWsowSpIED5OFM_8QJsq7xoBFDUgdXOxNviHgtpYdQFKnGNKaSNamcQU9WBm-ybCjOTsOWh0JltBS_3nkYwVhlrkwGrVomRNytR8EqfiKkcL4wt2LH02TuHk/s24/arab-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>
<a class="translate" href="http://www.blogger.com/rearrange?blogID=2387486930473866780§ionId=footer&action=editWidget&widgetType=HTML&referrer=directory#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" title="Chinese Simplified" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilyOtlSTVVKynjLR8BO3F0J_kN3oC61SrzJnCkcl9OHMtaV24oSb95SnCN_8GNuEn4kPNFldm8HEUcMX7567j0vWOxtZQ3Fu1uwX32BcHC2iCVgfgbanSNBHqVS93g5maghPT4DERtFik/s24/china-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>
</center>

2.) Widget Google Translate Berbentuk Bendera :

<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://lh6.ggpht.com/_wC8_9aR_6uE/S-sB776niUI/AAAAAAAAC1U/53KmR8w--Po/English.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sB8GWAHJI/AAAAAAAAC1Y/81fOTrIntO4/French.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sCFFa5WmI/AAAAAAAAC1c/97SQ7axFB7o/German.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sCYzIZffI/AAAAAAAAC10/vIA6TrkepxQ/Spain.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sCFKZFwRI/AAAAAAAAC1g/KWQ1jFf8R7Y/Italian.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sB7-D9dsI/AAAAAAAAC1Q/-AKXc4EYB5k/Dutch.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sCY8sWqeI/AAAAAAAAC1w/zaeK8Jq_mrg/Russian.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sCFq_2QyI/AAAAAAAAC1s/eKNJL3NTdNc/Portuguese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://lh6.ggpht.com/_wC8_9aR_6uE/S-sCFU6ZB2I/AAAAAAAAC1k/EKW0esnRZwM/Japanese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sCFawv3ZI/AAAAAAAAC1o/5h0bMG8dAvs/Korean.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sB7kqyAHI/AAAAAAAAC1I/P-sumP3J2fA/Arabic.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sB7wEy9XI/AAAAAAAAC1M/uErl2x0JVGU/Chinese-Simplified.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24" /></a>
</div>

Bagaimana menurut kalian ? Keren kan ? Jika masih kurang keren, kalian dapat mencari kode lainnya di mbah Google. Baiklah, mungkin hanya segitu saja yang ingin saya sampaikan.

Cara Membuat Daftar Isi dengan Jquery di Blog

noreply@blogger.com (Anonymous) — Thu, 2 May 2013 10:40:00 +0700

Daftar isi pada blog sangat penting sekali karena dapat memudahkan pengunjung untuk mengetahui atau mencari artikel keseluruhan pada sebuah blog. Pada kesempatan ini kita akan membahas cara membuat daftar isi dengan efek Jquery di blog.

Kelebihan daftar isi dengan Jquery ini adalah pada tampilannya yang cukup menarik. Jika Anda ingin memasangnya di blog ikuti dan simak langkah-langkahnya berikut ini :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang 'Expand Template Widget'.
3. Letakkan kode berikut diatas kode ]]></b:skin>

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvC5aWiXu9wUSWr9zk-O2LApJhfE5mHseWIsNxhSuoLuL2BaKE_aZrQ1PPJFuEEnbNp7io1rkJmJJDp217x5bjbEMfQ6scsIw0LHOslidhVn4P_fhua7bGY-3o6bkeGABpu3Kx3jm6TpM/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijvhPeTNCLALLYvlNxzhsP3cTs8X2lFbdvE3i9Mr_r15iIAgfmrwr5_5WOuCZeM1YRRvVhbSgmCdCv1a0I_cn_7GscJFYANQ0s7MDtXeiznpjMW7bzeJV_NdLaAYOyCOBvArPI4qWgQgA/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_THh8F1iMckq1ahn13LfC6ZVZEJJuphjJNumwJ-BSfojztl6yOCEp9aSDP_QZx_DvrVC_WQkcGtGfLX7L-kcJSh4H0zx6rmRKVKWBYlzklmrPGyYeu1SENEF4Z5Hj3o3xfTyxpFVuV4/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}</ div>

4. Kemudian letakkan juga kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

5. Setelah itu Simpan template.
6. Langkah selanjutnya adalah memasang daftar isi di blog, letakkan kode dibawah ini pada HTML/JavaScript atau posting blog Anda pada mode HTML.

<script type="text/javascript" src="http://id-pemula-javascript.googlecode.com/files/Dafsis.js"></script> <script src="http://cuek2bebek.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Keterangan:
Ganti kode yang berwarna merah diatas dengan alamat URL blog Anda.

Nah, sekarang blog Anda sudah terpasang daftar isi dengan efek Jquery yang menarik.

Panduan Cara mendaftarkan blog di technorati

noreply@blogger.com (Anonymous) — Thu, 25 Apr 2013 18:04:00 +0700

Technorati adalah salah satu directory yang sudah terkenal.Banyak para blogger master yang mendaftarkan blognya disini bagaimana tidak jika terdaftar disini blog kita akan lebih dikenal oleh search engine semisal google,yahoo,bing dan search engine lainnya

Cara mendaftarkan blog kita di technorati :
1. Kunjungi situs www.technorati.com
2. Pilih join.
3. Kemudian isi data yang diperlukan → Klik submit.
4. Lalu buka email kemudian verifikasi dengan mengklik email yang anda peroleh dari technorati.

Cara claim technorati :
1. Log in ke akun technorati anda.
2. Klik user name anda ( di pojok kanan atas.)

3. Isi profil anda → Update Account anda
4. Kemudian pada pilihan Claim My Blog masukkan url atau blog anda lalu klik Claim.
5. Pada menu Details isi data yang diperlukan. Pada bagian Feed URL isi dengan feed url sobat contoh :
http://cuek2bebek.blogspot.com/atom.xml (tambahin aja url blog anda dengan /atom.xml)
6. Pilih kategori dan keyword yang sesuai dengan tema blog anda. Lalu klik proces to next step.
7. Setelah muncul tampilan, pilih return to profile.
8. Kemudian pilih Check Claim
9. Lalu anda akan memperoleh Unique Code. Buatlah sebuah postingan yang berisi unique code agar pihak technorati dapat memverifikasi blog anda. Contohnya seperti postingan saya ini.

contoh unique code : U793RWZC83V7
contoh unique code :
url : http://cuek2bebek.blogspot.com/

10. Terakhir klik Verify Claim Token.
11. Tunggu beberapa hari hingga tim technoriti memverifikasi blog anda.

SUMBER : TUTORIAL BLOGGER

Cara Mendaftarkan Blog di Webmaster Google

noreply@blogger.com (Anonymous) — Thu, 25 Apr 2013 17:04:00 +0700

Google Webmaster Tools merupakan layanan gratis milik perusahaan search engine raksasa, Google yang memungkinkan kita untuk untuk memantau dan mengoptimalkan blog atau web kita agar dapat dicrawl dan diindex dengan baik oleh Google. Layanan ini juga memungkinkan untuk meminta search engine melakukan crawling terhadap blog atau web dan memantau 'kesehatan' suatu blog/web. Tentunya hal ini sangat penting manfaatnya bagi para blogger dalam melakukan optimalisasi blognya.

Untuk dapat menggunakan layanan Google Webmaster Tools anda harus mendaftar terlebih dahulu menggunakan akun Gmail atau akun Google lainnya. Bagi yang belum memiliki akun Google silakan mendaftar terlebih dahulu.
Berikut ini cara mendaftar dan melakukan verifikasi blog di Google Webmaster Tools :

1.) Buka halaman www.google.com/webmasters/tools/ lalu Login lah menggunakan akun Gmail atau akun Google anda.
2.) Kemudian pada halaman Google Webmaster Tools , Klik tombol Add a Site lalu masukkan alamat blog anda yang ingin didaftarkan. Setelah itu klik Continue.

3.) Lalu pada halaman Verify Ownership kita diminta untuk melakukan verifikasi blog. Ada 4 pilihan dalam melakukan verifikasi blog, yaitu :

>> Use your Google Analytics account
Menggunakan kode Google Analitycs pada blog anda

>> Add a DNS record to your domain's configuration
Menambahkan DNS record pada domain registrar atau hosting provider

>> Add meta tag to your site's home page
Menyisipkan kode meta tag yang disediakan kedalam kode HTML blog.

>> Upload an HTML file to your server
Kita akan diminta untuk mendownload sebuah file HTML yg disediakan
kemudian menguploadnya ke blog kita.

Saya sarankan menggunakan metode Add meta tag to your site's home
page karena lebih mudah.

Adapun berikut ini cara melakukan verifikasi menggunakan meta tag:
a.) Pada halaman Verify Ownership tadi, klik Add meta tag to yous site's
homepage
b.) Kemudian, copy kode meta tag yang ada disana.
c.) Login ke akun Blogger anda di Tap baru
d.) Pilih Design >> Edit HTML
e.) Sebaiknya backup dulu template anda dengan cara klik Download Full
Template
f.) Masukan kode meta tag tadi diantara tag <head> dan <body> (anda
boleh meletakkannya dibawah tag <head> atau diatas tag <body> , pilih
salah satu saja)
g.) Klik Save Template. Sekarang meta tag sudah terpasang di blog anda,
ikuti langkah selanjutnya

4.) Setelah memasang kode meta tag, kembali ke halaman Verify Ownership lalu klik Verify.

Sekarang Blog anda sudah terdaftar dan terverifikasi di Google Webmaster Tools. Langkah selanjutnya agar blog lebih mudah dicrawl oleh spiderbot adalah dengan mensubmit sitemap blog anda ke Google Webmaster Tools. Sitemap digunakan untuk memberiahu search engine tentang suatu halaman blog atau web agar dicrawl. Dengan membuat dan mensubmit sitemap ke Google Webmaster Tools, blog anda memiliki kemungkinan lebih besar untuk cepat dicrawl dan diindex search engine Google.

Adapun cara mensubmit sitemap ke Google Webmaster Tools adalah sebagai berikut :

1.) Masuk ke dashboard Google Webmaster Tools blog anda

2.) Klik Site Configuration, lalu pilih Sitemaps.

3.) Klik Submit a Sitemap, lalu masukkan sitemap blog anda. Setelah itu Klik Submit Sitemap.
Contoh sitemap blog http://blablabla.blogspot.com/sitemap.xml jadi di kolom sitemap isi dengan sitemap.xml

Sekarang blog anda sudah terdaftar di Google Webmaster Tools dan sitemap blog anda sudah tersubmit.

Sumber : TUTUORIAL BLOGGER

Cara Membuat Read More Otomatis di Blog

noreply@blogger.com (Anonymous) — Wed, 24 Apr 2013 10:30:00 +0700

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis diblogspot?

Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.

Langkah-langkah cara membuat Read More Otomatis di Blogspot :

Login ke Blog anda
Buka halaman design > Edit HTML > centang Expand template widget
Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
Paste kode berikut tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p> ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian). Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.

Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script><span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Finish simpan template dan lihat hasilnya

Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. berikut ini adalah keterangannya data yang bisa dirubah :

summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.