Membuat Tombol Share Artikel Dengan Search Form

 

Berikut cara membuat Tombol Share Artikel Dengan Search Form

Masukan CSS dibawah ini tepat di atas ]]></b:skin> atau </style>

/* Modifikasi widget Tombol Share */

.addthis_toolbox {width:96.5%;position:relative;background:none;border:none;box-shadow:none;margin-left:-2px;padding:5px 10px;margin-top:20px;}

.addthis_toolbox .addthis-tooltip {display:block;width:160px;padding:5px 10px;position:absolute;bottom:100%;left:10px;z-index:77;margin-bottom:30px;background:#07ACEC;text-transform:none;font:18px Oswald;color:white;text-align:center;box-shadow:none;opacity:0;visibility:hidden;transition:all 0.16s ease-out;}

.addthis_toolbox .addthis-tooltip:before {content:&quot;&quot;;position:absolute;bottom:-10px;left:10px;border-top:10px solid #07ACEC;border-right:20px solid transparent;width:0;height:0;line-height:0}

.addthis_toolbox:hover .addthis-tooltip {visibility:visible;opacity:1;margin-bottom:10px;}

#search input[type=&quot;text&quot;]:hover, #search input[type=&quot;text&quot;]:focus {width:92%;border:none;box-shadow:none;padding-left:35px;}

#search input[type=&quot;text&quot;] {background:#fff url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zLjotjduGxo2myeD3Zk8r-RvC4eGjV8CIhU89zbb1F3pynV9FvOlU4iBXc8XnXXgYzO0LMmdSNs8rbF0leMIQkjxage-gSvbBoeN2tvP4-lEN3zlPMRU9BJfNkLyr-jfwV83PEajcjA/s200/search-c.png&quot;)no-repeat center left 6px;width:110px;font-size:13px;color:#666;padding:10px 10px 10px 25px;transition:all 0.7s ease-in-out;margin:-4px -4px -4px -4px;z-index:9;position: absolute;border:none;right:5px;}

#share-leonyli{font-size:14px;}

#share-leonyli p{float:left;display:block;}

#share-leonyli a{position:relative;float:left;box-shadow:none;display:block;color:#fafafa;padding:5px;margin:0px 3px 0px 0px;

border:none;box-shadow:none;}

#share-leonyli a:hover{box-shadow:none;}

/* Akhir modifikasi widget Tombol Share Leony Li */

Masukan HTML dibawah ini tepat di bawah post-footer

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='share-leonyli'>

<div class='addthis_toolbox addthis_default_style '>

<span class='addthis-tooltip'>Share This Article</span>

<form action='/search' id='search' method='get'>

<input id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value=' Search My Site...'/></form>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank' title='Bagikan ke Facebook'>Facebook</a>

<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#d64136;' target='_blank' title='Bagikan ke +Google'>+Google</a>

<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;amp;text=&quot; + data:post.title + &quot;&amp;amp;via=LeonyLi_com&amp;amp;lang=id&quot;' rel='nofollow' style='background:#19bfe5;' target='_blank' title='Bagikan ke Twitter'>Twitter</a>

<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' style='background:#006699;' target='_blank' title='Bagikan ke Digg'>Digg</a>

<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' style='background:#ff4006;' target='_blank' title='Bagikan ke Reddit'>Reddit</a>

<script>

//<![CDATA[

var uri = window.location.href;

var ttle = document.title;

document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' target='_blank' rel='nofollow' style='background:#ffbf00;' title='Bagikan ke LintasME'>Lintaskan</a>");

//]]>

</script>

<div class='clear'/>

</div></div>

</b:if>

Semoga Tutorial ini bermanfaat...

5 Situs Terbaik untuk Belajar HTML & CSS Bagi Blogger Pemula

HTML intinya adalah elemen/struktur web, dan CSS adalah "penghias" serta penyusun layout hingga sebuah halaman web memiliki interface yang unik dan indah. Jika anda adalah blogger pemula, baik dalam konteks baru saja membangun blog, atau bagi anda yang mulai risih dengan berbagai kode-kode yang belum dimengerti padahal harus berurusan dengan utak-atik template, inilah saatnya anda mulai menyadari bahwa coding merupakan syarat penting yang harus anda kuasai agar mampu mengutak-atik desain blog sesuai yang diinginkan; sekurang-kurangnya anda wajib memahami apa itu dasar HTML dan CSS dan bagaimana keduanya bekerja dalam membentuk tampilan sebuah halaman web. 

Meski pada awalnya anda harus berjuang mati-matian untuk bisa memahami HTML dan CSS serta merasa asing ketika harus bersentuhan dengan keduanya, semakin anda mempelajari dan mempraktekkan semakin mudah anda membaca, memahami, dan menerapkannya dasar-dasar HTML dan CSS dengan baik. Semua hanyalah masalah "alah bisa karena biasa." Semakin anda terbiasa, semakin mudah dan cepat proses pembelajarannya. Bisa dikatakan, memahami HTML dan CSS adalah syarat paling dasar yang harus dipenuhi oleh seorang Blogger, jika ia ingin proses ngeblognya berkembang dan sukses. Mengesampingkan hal-hal mendasar demikian dan bahkan menyerah berarti sudah pasti si blogger tidak akan berkembang.

Ada berbagai macam tutorial coding, dari paling dasar hingga advanced, dari sekedar HTML dan CSS sederhana hingga XML, PHP, ASP, dan bahkan hingga bagaimana merancang API. Semua tersedia gratis dan bertebaran di muka bumi, eh maksudnya di web. Jadi, tidak ada alasan untuk bilang susah karena tidak ada sarana belajar. Satu-satunya alasan kenapa kata "susah" muncul adalah karena kemalasan, tidak ada yang lainnya. 

Berikut adalah beberapa website pilihan saya, yang juga biasa saya gunakan sebagai sumber belajar sekaligus test kode. Tutorialnya tersusun dengan baik, dari dasar hingga advanced, bahkan sebagian besar memiliki interface interaktif dimana anda bisa langsung melakukan latihan dan ujicoba kode tanpa harus menggunakan software belajar apapun. Fokus kita kali ini adalah HTML dan CSS untuk pemula, namun tidak menutup kemungkinan terdapat tutorial lain, misalnya HTML5, Javascript, PHP, ASP, ASPX, PERL, dan sebagainya, bagi anda yang sudah begitu akrab dengan HTML dan CSS dan ingin mengembangkan yang lainnya. Semua tertulis dalam bahasa Inggris, namun menurut saya cukup mudah untuk diikuti dan dipahami.

1. W3 SCHOOLS (w3schools.com)

Siapa yang belum pernah dengar tentang situs ini? Bisa dibilang sebagai situs terbesar dengan informasi, penjelasan, dan tutorial paling detil mengenai berbagai hal yang berkaitan dengan desain dan pengembangan web. Dalam hal HTML dan CSS, tentu saja ini adalah salah satu resource yang bisa diandalkan. Belum lagi berbagai interface interaktif-nya (Try it Yourself Editor) yang bisa kita gunakan untuk latihan dari tingkat paling dasar hingga advanced. Terdapat pula berbagai informasi dan tutorial javascript, HTML 5, bahasa pemrograman yang berkaitan dengan server (PHP, SQL, ASP, dll), ASP.NET, XML, dll.

2. Code Academy (www.codeacademy.com)

Ini adalah situs yang paling sering saya kunjungi, terutama dalam belajar dan bertukar pikiran soal pengembangan web (khususnya PHP, API, dan Ruby). Yang paling saya sukai adalah fitur interaktifnya dimana anda bisa langsung mempelajari sekaligus mempraktekkan berbagai level pembelajar HTML dan CSS dengan tahap yang jelas, terstruktur, dan dengan tutorial yang mudah diikuti. Jika anda ingin langsung melihat bagaimana pembelajaran basic-nya, langsung tuju navigasi di footer, dan klik HTML/CSS. Anda juga bisa mengawali pembelajaran dengan mengagumi bagaimana kode-kode bekerja dengan mengisi kolom interaktif di halaman depan. Bagi web developer dan pengagum coding, ini surga buat anda!

3. HTML.net

Jika anda lebih menyukai "penuturan" untuk memahami dan mencerna materi HTML dan CSS, sekaligus ingin memahami esensi halaman website serta berbagai elemen dan tag-nya, maka situs ini bisa menjadi sumber yang tepat. Plus, anda bisa menggunakan Google Translate dengan mudah jika anda kesulitan dalam memahami bahasa Inggris (hehe). Semua konten memiliki struktur dan sistematika yang jelas, dari A sampai Z, jadi cukup membantu proses pemahaman secara bertahap. Terdapat pula berbagai tutorial lain seperti HTML5, PHP, ASP, dan Javascript.

4. HTML Dog (www.htmldog.com)

Masih sama dengan model website di atas, situs ini juga menyediakan berbagai tutorial HTML dan CSS. Yang agak berbeda adalah konten dibagi berdasarkan jenis elemen/tag (heading, title, list, link, tabel, form, dan lain sebagainya), sehingga anda bisa masuk ke bagian tertentu secara langsung. Terdapat pula tutorial javascript dasar dimana anda juga bisa berkenalan dengan bahasa javascript.

5. CSS Easy (www.csseasy.com)

Mungkin bagi anda yang pertama kali masuk website ini akan kebingungan dan menganggap remeh. Ya, situs ini hanya berbicara bagaimana CSS digunakan untuk menyusun layout dasar. Tapi jangan salah, dengan memahami bagaimana layout dasar sebuah halaman web, maka anda sudah masuk ke gerbang awal desain template blog/web, dan memahami bagaimana CSS digunakan sebagai penyusun layout. Terdapat dua jenis layout yang variatif untuk dipelajari, yang pertama berupa fixed layout dan yang kedua berupa fluid layout (yang kemudian bisa digunakan untuk menyusun dasar template responsive juga). Cara yang digunakan untuk mempelajari cukup unik, klik salah satu contoh layout, lalu klik kanan dan pilih "open page source" atau "view source" untuk melihat kode-kode CSS di dalamnya. Simpan halaman tersebut untuk bisa diutak-atik sesuai keinginan.

That's it and have a nice learning!

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Cara Buat/Pasang Share Buttons di Posting Blogger (Like, Tweet, +1)

Share buttons adalah tombol-tombol yg dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yg mereka sukai ke social media, baik Facebook, Twitter, Google+, dll. Banyak sobat Buka Rahasia Blogspot yg menanyakan tentang share buttons yg saya gunakan di bawah judul posting. Saya menggunakan 3 buttons milik 3 social media yg disusun sedemikian rupa menjadi satu bagian widget. Dulu saya pernah share cara pemasangan Facebook Like Button & Google +1 Button, namun Tweet Button belum. Tetapi karena banyak sobat yg meminta 3 button (tombol) share itu sekaligus menjadi satu widget, oke deh Tweet Button saya lompati dan akan langsung share cara membuat & memasang ketiganya.

Masih seperti dua cara sebelumnya, widget ini hanya akan ditampilkan di bagian posting ketika halaman posting dibuka secara utuh serta tidak tampil pada jenis halaman lain (homepage, label, search, archive). Agar susunan, jarak serta tampilan tidak kacau, saya membuat ukuran-ukuran tersendiri pada masing-masing button lalu menyusunnya dengan tabel. So, jangan mengubah nilai apapun di dalam masing-masing button.

Sebelum memasang share buttons, perhatikan beberapa hal berikut:

a.  Jika sudah memasang widget Facebook like atau Google +1, khususnya yg saya share di blog ini, hapus atau ambil terlebih dahulu kodenya. Lihat 2 posting terdahulu untuk mengetahui mana yg harus dihapus.

b. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

c. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template.

Cara Memasang Share Buttons (Facebook Like, Tweet, & Google +1)

Setelah memastikan beberapa hal di atas, pasang widget share buttons dengan langkah-langkah berikut:

1. Copy script/kode berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="MediaPangkalan">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>

Ganti MediaPangkalan dengan nama akun twittermu.

2. Buka halaman edit HTML/Edit Template:

Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates" 

2. Jika ingin memasang di bawah judul posting:

Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> lalu letakkan script/kode tepat di ATASnya.

3. Jika ingin memasang di bawah posting/artikel:

Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.

4. Save template 'n lihat hasilnya.

5. Done.

Good luck n enjoy your blog's share buttons (Facebook Like, Tweet Button, & Google +1 Button).

Pasang icon smile (emoticon) di blogspot

Pengguna blogger pasti udah mengetahui icon smile yang banyak digunakan oleh pengguna wordpress atau pengguna blog lain, dimana setiap ada kode teks icon smile maka kode tersebut akan berganti dengan icon smile secara visual. Namun sayangnya blogger tidak support untuk icon smile ini..Ups jangan berkecil hati..banyak jalan menuju roma, semua pasti ada solusinya.

Coba lihat contohnya di blog ini, setiap ada penulisan text yang mengacu kepada code smile pasti akan berubah secara visual. Sebagai contoh, saya mengetikan icon senyum :) dan tertawa :D dan ketika saya tersipu malu :$ yang jelas Icon smile ini akan tampil pada semua text yang ada pada blog kita di manapun letaknya (Nb: bukan dalam shoutbox, link dan gambar), yang paling menguntungkan icon smile ini dapat memberikan keterangan emoticon pengujung ketika sedang memberikan komentar :o.


3 langkah mudah pasang icon smile di blogger :

1. Masuk ke template > edit HTML > Expand Widget Templates dan cari kode dibawah ini:

]]></b:skin>

2. Jika sudah ketemu copy code javascript di bawah, dan letakan dibawah kode ini ]]></b:skin>

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

3. Simpan dan lihat hasilnya.

Icon smile ini akan tampil secara otomatis pada blog kita setiap kali kita mengetikan standar kode dari icon tersebut.

Standar kode smile yang bisa digunakan :

:) or :-)
:D or :-D
:$ or :-$
:( or :-(
:p or :-p
;) or ;-)
:k or :-k
:@ or :-@
:# or :-#
:x or :-x
:o or :-o

Special thanks for Louiss Lim. Sumber : http//bloggingsecret.net

Cara membuat email baru di Google GMAIL

Cara membuat email baru di Google yang biasa disebut gmail sangat mudah. Pada dasarnya membuat akun email di gmail sama saja mendaftar untuk satu akun yang bisa dipergunakan untuk mengakses semua produk Google. 

 

Produk email dari Gmail ini terintegrasi dengan semua produk Google seperti Youtube, Google Plus, Webmaster Tools, Analytics dan masih banyak lagi.Tapi produk-produk ini akan kita bahas di materi lain. Kali ini saya khusus menjabarkan cara pembuatan dan penggunaan akun baru gmail tersebut.

Langkah-Langkah Membuat Email Google Baru

Memasukkan data pribadi anda.

• Silahkan saudara membuka alamat gmail di http://mail.google.com/ 
• Biasanya anda akan masuk ke layar login akun Google terlebih dahulu. pada layar tersebut di bagian kanan atas akan ada link Create an Account atau Buat Akun
• Sebagaimana layaknya sebuah pendaftaran, Google akan meminta anda mengisi beberapa hal sebelum anda membuat email. Berikut ini adalah data yang harus anda masukkan:

• Nama depan dan belakang anda
• Alamat email yang anda inginkan (akan ada pengecekan ketersediaan, karena tidak boleh ada dua alamat email yang sama)
• Isikan password email yang anda inginkan. Password sebaiknya perpaduan huruf besar dan kecil dengan angka numerik. Contoh: AKuEmailNya.Gmail.com Saran saya ketik dulu password ini di sebuah notepad dan simpan.
• Ketik ulang password anda untuk memastikan tidak ada karakter yang salah.
• Masukkan tahun, bulan, dan tanggal kelahiran anda
• Pilih jenis kelamin
• Isikan nomor handphone anda pada pendaftaran ini. Handphone ini akan anda gunakan dalam pengamanan akun anda nantinya.
• Jika anda punya akun emaill lainnya, isikan ke dalam formulir. Ini akan membantu anda jika akun email Google yang anda buat ini mengalami masalah nantinya.
• Ketikkan lokasi atau negara anda
• Tentu saja yang wajib hukumnya adalah menyetujui persyaratan Gmail
• Klik tombol Langkah berikutnya (lihat contoh gambar di bawah)

Verifikasi Akun Email Anda

Pada saat anda membuat email di gmail ini anda mungkin akan diminta memverifikasi pendaftaran yang anda lakukan. Masukkan nomor handphone anda dan klik kirim kode verifikasi. Tunggu beberapa saat sampai anda menerima sebuah SMS dari Google.

• Di dalam SMS itu ada sebuah kode 6 angka unik. Isikan nomor tersebut pada layar verifikasi akun email baru saudara....

Edit Profil Akun Email Anda

Setelah melakukan verifikasi, anda akan diminta mengedit profil akun email baru anda dengan memasukkan sebuah foto. Tapi kalau anda belum mau mengedit profil, maka silahkan klik langkah berikutnya. Anda bisa mengubah profil anda nantinya dari link pengaturan akun.

• Proses membuat email baru di Google sudah selesai, akan ada layar ramah tamah dari Google. Silahkan klik Lanjutkan ke Gmail

Sedikit Pengamanan Pada Akun Gmail Yang Baru Anda Buat

Dengan mengklik tombol di atas anda akan dibawa masuk ke akun anda. di mana ada 3 buah email dari Google. Sebaiknya anda mencatat tanggal, dan waktu masuk dari email Google itu ke dalam notepad yang berisi password tadi. Karena waktu terkirimnya email tersebut adalah waktu pembuatan email anda. Anda akan membutuhkan data ini jika skenario terburuk atas akun anda terjadi. Maksud saya adalah saat anda ingin mengembalikan akun email Google yang dihack.

Itulah cara-cara membuat akun email Google alias Gmail yang dilengkapi dengan langkah-langkah awal memproteksi akun anda. Langkah-langkah proteksi seperti membuat password yang rumit, dan mencatat tanggal dan waktu pembuatan email ke dalam sebuah file notepad bisa anda lewatkan jika akun gmail ini tidak terlalu penting bagi anda.

Sebaliknya, jika anda membuat akun email ini untuk keperluan bisnis, pekerjaan, ataupun sesuatu yang privasi, maka sebaiknya anda melakukan langkah-langkah awal melindungi akun Google anda. Lebih detil akan dibahas di artikel selanjutnya.

Cara Mengetahui Ukuran panjang dan lebar Template Blog di Blogspot

sahabat blogger di seluruh dunia...
kali ini Sahabat, Saya akan berbagi informasi seputar "Cara Mengetahui Ukuran panjang dan lebar Template Blog Kita"
okehh....dari pada bnyak basa basi,,
langsung ajahh ke TeKaPe.... ;)



1. Masuk ke dalam akun blogger kita masing-masing.
2.Klik rancangan >> Klik edit HTML >> Klik expand template widget.
Cari kode HTML berikut ini.
(hanya contoh, cari kode HTML yang dicetak tebal)

Mengetahui ukuran lebar keseluruhan template.

#outer-wrapper {
margin:20px auto;
padding:0 10px;
text-align:justify;
width:900px;
}

Mengetahui ukuran header.

#header-wrapper {
height:119px;
width:900px;
}

Mengetahui ukuran sidebar.

#sidebar-wrapper {
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}

Mengetahui ukuran main kolom.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}

Keterangan:

1. Tekan tombol Ctrl+F pada keyboard untuk mempermudah proses pencarian kode HTML.
2. Width merupakan ukuran lebar, sedangkan height merupakan ukuran tinggi.

nahh.... Informasi di atas gampang kan sobat?? ini bisa mempermudah dalam pengeditan Template lohh...
smoga bermanfaat...
salam