tag:blogger.com,1999:blog-23680324920043078552024-03-19T00:50:10.115-07:00tips dan trik linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.comBlogger92125tag:blogger.com,1999:blog-2368032492004307855.post-63733301181168341132014-02-22T06:55:00.002-08:002014-02-22T06:55:39.834-08:00Daftar Masuk Sekolah Harus Dites Keperawanan<img alt="" class="head" src="http://cdn.klimg.com/vemale.com/headline/650x325/2013/08/wacana-baru-daftar-masuk-sekolah-harus-dites-keperawanan.jpg" /><br />
<br />
Indonesia sering memiliki berbagai wacana aturan baru yang terkadang
terdengar menggelikan atau tidak masuk akal. Kemarin (20/8) lagi-lagi
ada satu wacana yang bergulir dari salah satu Dinas Pendidikan yang ada
di Indonesia mengenai menambahkan tes keperawanan dalam rangkaian tes
untuk penerimaan siswa baru di Sekolah Menengah Atas (SMA). Ide ini
langsung mendapatkan banyak komentar, kritikan, dan ada juga yang
mendukung. <br />
<div class="p1">
Wacana tes keperawanan ini dilontarkan
oleh Dinas Pendidikan Kota Prambulih, Sumatera Selatan ini terus menuai
pendapat dari seluruh warga Indonesia ladies. Tes ini dianggap melanggar
hak asasi manusia dan bentuk diskriminasi terhadap wanita. Bila
keperawanan dianggap sebagai layak tidaknya seorang siswi untuk
bersekolah, maka hal ini sudah menyalahi aturan tentang hak setiap Warga
Negara Indonesia untuk mendapat pendidikan.</div>
<div class="p1">
Salah
satu lembaga yang menentang keras akan wacana dan rencana ini adalah
Lembaga Bantuan Hukum (LBH) Keadilan. Mereka menganggap wacana ini
sungguh merugikan wanita. "Tes keperawanan merupakan bentuk diskriminasi
terhadap perempuan dan merendahkan martabat kemanusiaan. Tes
keperawanan juga merupakan bentuk pelanggaran hak anak atas pendidikan,
karena tidak dapat melanjutkan pendidikan ke jenjang lebih tinggi," kata
Direktur Advokasi LBH Keadilan, Halimah Humayrah Tuanaya dalam
rilisnya, Selasa (20/8), dikutip dari merdeka.com.</div>
<div class="p1">
Kemarin
beberapa Partai politik seperti PKS mendukung wacana ini dan mendapat
kritikan keras dari banyak pihak. Wacana ini kemarin menjadi pembicaraan
hangat di sosial media lho ladies. Di sosial media, wacana tes
keperawanan ini dianggap menggelikan, tidak masuk akal dan memalukan.
Lantas bagaimana ya respon dari Kementrian Pendidikan? Syukurlah,
Kementrian Pendidikan menolak wacana ini.</div>
<div class="p1">
Menteri
Pendidikan M.Nuh mengatakan bila ada tes keperawanan, harusnya ada tes
keperjakaan. Hal ini tentu susah dilaksanakan bukan? Menurut M.Nuh,
keperawanan bukanlah faktor layak tidaknya seseorang bersekolah ke
jenjang yang lebih tinggi. "Hal ini adalah privasi dan tidak ada
hubungannya sama sekali dengan kepintaran, kemampuan atau kemampuan
akademis seseorang" ujar M.Nuh lagi.</div>
<div class="p1">
Ladies, menjaga
keperawanan adalah urusan pribadi dari setiap wanita. Pemerintah memang
seharusnya tidak mencampur adukkan urusan akademis dengan hal yang
bersifat pribadi seperti ini. Bagaimana menurut Anda ladies, setuju atau
tidak dengan wacana tes ini?</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com2tag:blogger.com,1999:blog-2368032492004307855.post-76363771326368995662014-02-22T06:51:00.002-08:002014-02-22T06:51:44.560-08:00Ratusan Wanita India Dipaksa Tes Keperawanan Sebelum Menikah<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em;">
<img alt="" class="head" src="http://cdn.klimg.com/vemale.com/headline/650x325/2013/06/ratusan-wanita-india-dipaksa-tes-keperawanan-sebelum-menikah.jpg" height="160" width="320" /> </div>
<br />
<br />
<br />
<br />
Keperawanan masih jadi isu yang hangat dibicarakan, terlebih lagi di
beberapa negara Asia, termasuk India. Di negara tersebut, keperawanan
seorang wanita masih dijunjung tinggi dan dijaga hingga hari pernikahan.
<b>Pengantin</b>
perempuan yang masih perawan hingga menikah lebih dihargai dan dianggap
mulia. Tapi bagaimana bila keperawanan bisa ditukar dengan menikah
gratis dan mendapat bantuan pemerintah? <br />
Dilansir dari situs <em>Dailymail</em>,
ratusan perempuan India dipaksa untuk melakukan tes keperawanan dan tes
kehamilan menjelang hari pernikahan. 450 wanita yang akan menjalani
pernikahan massal diharuskan melakukan tes tersebut di distrik Betul,
acara tersebut diselenggarakan oleh pemerintah Madhya Pradesh. Tujuan
dari pernikahan massal adalah membantu perempuan dari keluarga miskin
untuk menikah.<br />
<br />
<img alt="(c) dailymail" height="205" src="http://cdn.klimg.com/vemale.com/p/pernikahan_India_-_dailymail.jpg" width="320" /><br />
<br />
Menurut berita yang dilaporkan <em>Times of India</em>, wanita yang
melakukan tes keperawanan dari pemerintah dan ikut serta dalam
pernikahan massal ini akan menerima hadiah. Sembilan wanita diketahui
sedang hamil dan tidak diizinkan ikut dalam upacara pernikahan.<br />
Pemerintah
mengatakan bahwa tes ini bukan untuk mengetes keperawanan, tetapi untuk
memastikan bahwa tidak ada pengantin perempuan yang hamil.<br />
Menanggapi
hal ini, Girija Vyas, ketua Komisi Nasional untuk Perempuan India
mengatakan: "Tindakan ini memalukan, di mana perempuan harus menjalani
tes untuk membuktikan kesucian mereka, sehingga mereka bisa memanfaatkan
bantuan keuangan pemerintah yang penuh dosa dan tidak bisa ditoleransi
dalam masyarakat,"<br />
Dengan adanya kontroversi seputar tes
keperawanan sebelum menikah, makin banyak pertanyaan yang muncul. Apakah
kemuliaan seorang perempuan hanya dilihat dari keperawanannya saja?<br />
Sebagai sesama perempuan, bagaimana pendapat Anda ladies?linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-84698311518157486172014-02-18T05:47:00.004-08:002014-02-18T05:47:52.757-08:00Beredar Foto Suami Christy Jusung Mesra dengan Wanita Lain
<a href="http://img.okeinfo.net//content/2014/02/17/33/942038/qauEbDaZn7.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Jay Alatas mesra dengan wanita lain (foto: ist)" border="0" height="180" src="http://img.okeinfo.net//content/2014/02/17/33/942038/qauEbDaZn7.jpg" width="320" /></a><span class="detail-img">
<span class="clear"></span></span><strong>JAKARTA- </strong>Di
tengah proses perceraian dengan Christy Jusung, Jay Alatas diterpa isu
tidak sedap. Yaitu isu mengenai orang ketiga. Pasalnya, beredar foto
mesra dirinya dengan seorang wanita cantik di sebuah tempat.<br />
<br />Hal
tersebut langsung dibantah kuasa hukum Jay Alatar, Dody Haryanto. Foto
mesra itu bisa saja menurutnya terjadi sebelum adanya pernikahan Christy
dan Jay. Dan foto itu juga belum terbukti di persidangan.<br /><br />"Foto
kapan itu? Sebelum menikah bisa jadi. Foto itu tidak bisa dibuktikan di
pengadilan. Kan tidak jadi bukti dalam pengadilan," ungkap Dody di PA
Jakarta Selatan, Senin (17/2/2014).<br /><br />Isu kehadiran orang ketiga
dibantah dengan tegas oleh Jay. Selain itu tak ada dalam isi gugatan
tentang hadirnya orang ketiga dalam retaknya rumah tangga yang baru
berjalan delapan bulan itu.<br /><br />"Yang jelas, dalam gugatan itu tidak ada pihak ketiga sebagai penyebab perceraiannya," tutup Dody.linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-3677143827420115772014-02-07T23:31:00.000-08:002014-02-07T23:31:15.003-08:00membuat Background website dari CSS<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikt6QspDGLzE7Nk2jUoLnA0rFTpEU7iwyDWxxCqodAivMgPA9Ki3RFo6GF6pjFAFrF30IaklSzgSt24_Z3tnbA9DVjmbqzGzoyjQp-c-LELlkT6i4tedOJqJTFBBwHW_NfotBg8VY4b6o/s1600/blog-traffic.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikt6QspDGLzE7Nk2jUoLnA0rFTpEU7iwyDWxxCqodAivMgPA9Ki3RFo6GF6pjFAFrF30IaklSzgSt24_Z3tnbA9DVjmbqzGzoyjQp-c-LELlkT6i4tedOJqJTFBBwHW_NfotBg8VY4b6o/s1600/blog-traffic.jpg" height="212" width="320" /></a></div>
<div>
<span style="color: black;">Selamat datang di blog <b>Panduan Belajar Website Lengkap</b> . Berikut ini adalah update artikel terbaru mengenai informasi tentang </span><b><span itemprop="itemreviewed">membuat Background website dari CSS</span></b> silahkan untuk membaca dengan seksama dan mohon untuk disikapi dengan bijaksana mengenai informasi di artikel <i>membuat Background website dari CSS</i> , semoga artikel tentang <u>membuat Background website dari CSS</u> dapat menambah wawasan serta info yang anda cari atau butuhkan.
</div>
<div style="text-align: justify;">
<span style="color: black;"></span>ni Tips saya dapatkan dari teman blog yang Ilmunya sangat membantu saya dalam membuat background Website</div>
<h2>
<span style="color: black;">CSS Background</span></h2>
Property backgound dari CSS ini digunakan untuk membuat efek background pada elemen.<br />
Terdapat beberapa property backgound:<br />
<ol>
<li>background-color</li>
<li>background-image</li>
<li>background-repeat</li>
<li>background-attachment</li>
<li>background-position</li>
</ol>
<h2>
<span style="color: black;">background-color</span></h2>
Digunakan untuk memberikan warna background pada sebuah elemen.<br />
<span style="color: black;"><b>Contoh:</b></span><br />
<span style="color: green;">body </span>{<br />
<span style="color: blue;">background-color</span>:<span style="color: red;">“blue”</span>;<br />
}<br />
Property background-color ini bisa kita beri nilai dengan :<br />
<ul>
<li>Nama warna seperti “red”, “blue”, “white”.</li>
<li>Nilai RGB seperti “rgb(255,0,0)”.</li>
<li>Nilai Hexadesimal seperti “#ffffff”.</li>
</ul>
<h2>
<span style="color: black;">background-image</span></h2>
Digunakan untuk memberikan beckground gambar pada sebuah elemen.<br />
Defaultnya-> gambar diulang-ulang secara horizontal dan vertikal sehingga dia memenuhi seluruh elemen.<br />
<span style="color: black;"><b>Contoh:</b></span><br />
<span style="color: green;">body </span>{<br />
<span style="color: blue;">background-image</span>:<span style="color: red;">url(‘fahmi.png’)</span>;<br />
}<br />
<br />
<a href="https://www.blogger.com/blogger.g?blogID=2368032492004307855" name="more"></a><br />
<h2>
<span style="color: black;">Pengulangan Gambar</span></h2>
Background-image ini mempunyai dua bentuk pengulangan, yaitu:<br />
<ul>
<li>repeat-x yaitu pengulangan secara horizontal.</li>
<li>repeat-y yaitu pengulangan secara vertikal.</li>
</ul>
<b><span style="color: black;">Contoh:</span></b><br />
Pengulangan secara horizontal:<br />
<span style="color: green;">body </span>{<br />
<span style="color: blue;">background-image</span>:<span style="color: red;">url(‘fahmi.png’)</span>;<br />
<span style="color: blue;">background-repeat</span>:<span style="color: red;">repeat-x</span>;<br />
}<br />
<span style="color: black;"><b>Keterangan:</b></span><br />
Jadi untuk membuat pengulangan gambar kita membutuhkan property <span style="color: blue;">background-repeat</span>.<br />
<span style="color: black;"><b>Muncul Pertanyaan:</b></span><br />
Jika saya tidak ingin mengulang image backgroundnya gimana … ?<br />
<span style="color: black;"><b>Jawaban:</b></span><br />
Kamu bisa memberi nilai pada property <span style="color: blue;">background-repeat</span> dengan <span style="color: red;">‘no-repeat</span>‘ seperti kode dibawah ini:<br />
<span style="color: blue;">background-repeat:</span><span style="color: red;">no-repeat;</span><br />
<h2>
<span style="color: red;"><span style="color: black;">background-attachment</span></span></h2>
<span style="color: red;"><span style="color: black;">Digunakan saat halaman web di scroll maka terdapat dua pilihan:</span></span><br />
<ul>
<li><span style="color: red;"><span style="color: black;">fixed yaitu backgroundnya tetap walaupun user men-scroll halaman web.<br />
</span></span></li>
<li><span style="color: red;"><span style="color: black;">scroll yaitu background ikut terscroll ketika user mens-scroll halaman web.</span></span></li>
</ul>
Cara menggunakannya adalah seperti ini:<br />
<span style="color: blue;">background-attachment</span>:<span style="color: red;">fixed</span>;<br />
<span style="color: blue;">background-attachment</span>:<span style="color: red;">scroll</span>;<br />
Jika tidak didefinisikan maka nilai defaultnya dari <span style="color: blue;">background-attachment</span> adalah scroll.<br />
<h2>
<span style="color: red;"><span style="color: black;">Mengatur Posisi Background</span></span></h2>
<span style="color: red;"><span style="color: black;">Untuk mengatur letak background gambar maka CSS menyediakan property <span style="color: blue;">background-position</span>.</span></span><br />
<span style="color: black;"><b>Contoh:</b></span><br />
<span style="color: red;"><span style="color: black;">Untuk Meletakkan posisi background gambar ditengah maka kamu bisa gunakan kode dibawah ini:</span></span><br />
<span style="color: red;"><span style="color: black;"><span style="color: blue;">background-position</span>:<span style="color: red;">center</span>;</span></span><br />
<span style="color: red;"><span style="color: black;">Terdapat tiga pendefinisian nilai untuk property<span style="color: #3366ff;"> background-position</span> yaitu:</span></span><br />
<ul>
<li><span style="color: red;"><span style="color: black;"><span style="color: #ff6600;">panjang </span>yaitu dengan menggunakan angka disertai satuan pixel misal <span style="color: red;">20px 10px</span>.<br />
</span></span></li>
<li><span style="color: red;"><span style="color: black;"><span style="color: #ff6600;">Persentasi </span>yaitu dengan menggunakan angka diikuti tanda persen misal <span style="color: red;">10%</span> 20%.<br />
</span></span></li>
<li><span style="color: red;"><span style="color: black;"><span style="color: #ff6600;">Keyword</span> yaitu dengan menggunakan kata-kata misal <span style="color: red;">top</span> center.</span></span></li>
</ul>
<span style="color: black;"><b>Contoh:</b></span><br />
Property <span style="color: blue;">background-position</span> dengan menggunakan pixel:<br />
<span style="color: blue;">background-position</span>:<span style="color: red;">20px 10px</span>;<br />
<b><span style="color: black;">Keterangan:</span></b><br />
<ul>
<li>20px adalah posisi horizontal</li>
<li>10px adalah posisi vertikal</li>
</ul>
Jadi nilai pertama adalah untuk posisi horizontal sedangkan nilai kedua untuk posisi vertikal.linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-14987415961579893642014-02-07T23:22:00.002-08:002014-02-07T23:22:32.193-08:00cara menyembunyikan atau menghilangkan sidebar<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaKrqHF6aP1ecXX33IRe7xtUK5fr4FS9J3wp6NcZMRX3lHHryEqrXYS7dF3d60FK-mwr7WO6fl2G0UfSTBDjwKd1Teo1Dv790HR7BEZzGVL1xsduBMQ-Atfh7WBmaI5oDe5FpKUESQS1M/s1600/1.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaKrqHF6aP1ecXX33IRe7xtUK5fr4FS9J3wp6NcZMRX3lHHryEqrXYS7dF3d60FK-mwr7WO6fl2G0UfSTBDjwKd1Teo1Dv790HR7BEZzGVL1xsduBMQ-Atfh7WBmaI5oDe5FpKUESQS1M/s1600/1.gif" /></a><span style="color: black;">Berikut ini adalah update artikel terbaru mengenai informasi tentang </span><b><span itemprop="itemreviewed">cara menyembunyikan atau menghilangkan sidebar</span></b> silahkan untuk membaca dengan seksama dan mohon untuk disikapi dengan bijaksana mengenai informasi di artikel <i>cara menyembunyikan atau menghilangkan sidebar</i> , semoga artikel tentang <u>cara menyembunyikan atau menghilangkan sidebar</u> dapat menambah wawasan serta info yang anda cari atau butuhkan.
dalam beberapa tips blogger ada banyak sekali rahasia yang bisa kita share bersama, diantaranya adalah cara<span style="font-weight: bold;"> menyembunyikan atau menghilangkan sidebar. </span>Sebenarnya
ini sudah banyak yang tau namun karena banyak yang menanyakan maka
saya sharing saja disini. Saat anda mengklick salah satu judul
postingan maka beberapa widget atau sidebar hilang. Bagaimana caranya?
Ini adalah cara<span style="font-weight: bold;"> menyembunyikan atau menghilangkan sidebar</span> atau dalam bahasa inggris disebut <span style="font-size: 130%;">how to hide or remove sidebar in blogspot</span>.<br /><a href="https://www.blogger.com/blogger.g?blogID=2368032492004307855" name="more"></a><br /><br />Caranya cukup gampang ikuti petunjuk berikut:<br />Login ke dashboard anda<span style="font-weight: bold;"> klick Edit HTML</span><br />Copy lalu paste code dibawah ini tepat sebelum code </head><br /><br /><span style="font-weight: bold;"></span><br />
<blockquote>
<span style="font-weight: bold;"><b:if cond='data:blog.pageType == "item"'></span><br /><span style="font-weight: bold;"><style></span><br /><span style="font-weight: bold;">#html5{display:none;}</span><br /><span style="font-weight: bold;"></style></span><br /><span style="font-weight: bold;"></b:if></span></blockquote>
<br />#html5
adalah id sidebar yang ingin anda sembunyikan. Anda juga bisa merubah
besar kecil huruf atau gambar background sehingga berbeda dengan
mainpage atau bagian home dari blog anda. Ini bisa kita lakukan dengan
menambahkan langsung pada code diatas sehingga menjadi seperti ini :<br /><br /><span style="font-weight: bold;"></span><blockquote>
<span style="font-weight: bold;"><b:if cond='data:blog.pageType == "item"'></span><br /><span style="font-weight: bold;"><style></span><br /><span style="font-weight: bold;">#html5,{display:none;}</span><br /><span style="font-weight: bold;">#main-wrapper{width: 95%; float: none; margin: 0 auto;}</span><br /><span style="font-weight: bold;"></style></span><br /><span style="font-weight: bold;"></b:if></span></blockquote>
<br /><br />Pada code diatas yang saya rubah adalah ukuran ukuran #main-wrapper .<br /><br />Kalau anda ingin <span style="font-weight: bold;">menyembunyikan salah satu gadget atau sidebar pada halaman utama</span> , misalkan menyembunyikan footer anda maka code di atas diganti menjadi:<br /><br /><span style="font-weight: bold;"></span><blockquote>
<span style="font-weight: bold;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><br /><span style="font-weight: bold;"><style></span><br /><span style="font-weight: bold;">#footer-wrapper{display:none;}</span><br /><span style="font-weight: bold;"></style></span><br /><span style="font-weight: bold;"></b:if></span></blockquote>
<br /><br />Jangan lupa <span style="font-weight: bold;">Save template</span>
anda silahkan dilihat hasilnya code ini akan membuat blog anda lebih
dinamis dan cantik, bisa dikombinasikan mana yang muncul di halaman
utama dan mana yang tidak, selamat mencoba.linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-36008659427182821242013-08-16T11:37:00.002-07:002013-08-16T11:37:37.900-07:00Widget Artikel Terkait Blogger: 6 dalam 1 <img alt="Contoh tampilan widget artikel terkait Blogger yang paling populer" height="320" src="http://2.bp.blogspot.com/-voIg8u2yKpk/UdfDQMDWmjI/AAAAAAAAHh0/aWiEdqj4tuw/s320/related-post-widget-for-blogger.png" width="185" /><br />
<br />
<br />
<br />
<div class="button-group">
<b><a class="button link" href="http://blogger-json-experiment.googlecode.com/svn/resources/related-post/widget-configuration.html" target="_blank">Buka Generator Widget</a> </b> <b> <a class="button download" href="http://blogger-json-experiment.googlecode.com/svn/resources/related-post" target="_blank">Kode Sumber</a></b></div>
<br />
<br />
<br />
<br />
Klik tombol <strong><em>Preview & Get Code!</em></strong> Di situ nanti Anda akan mendapatkan kode CSS dan XML <dfn>template</dfn>. Masuk ke halaman editor HTML <dfn>template</dfn> kemudian letakkan kode CSS yang dihasilkan di atas kode <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%5D%5D%3E%3C%2Fb%3Askin%3E&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">]]></b:skin></a></code>. Kode XML bisa Anda letakkan di mana saja di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%3Cb%3Aincludable%20id%3D%27post%27%20var%3D%27post%27%2F%3E&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><b:includable id='post' var='post'/></a></code>,
tapi Saya sarankan untuk meletakkan kode tersebut di atas kode ini
karena posisinya yang mudah ditemukan dan lebih minim resiko:<br />
<pre data-codetype="XML"><code class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'post-footer'</span>></span></code></pre>
<h3>
Tabel Pengaturan</h3>
Pengaturannya
tidak banyak, dan karena Saya sudah membuat generatornya, jadi Anda
sebenarnya tidak perlu lagi menyentuh variabel-variabel di dalam widget
ini secara langsung. Tabel ini Saya buat untuk kepentingan dokumentasi
saja:<br />
<table border="1" class="full config" summary="Tabel ini berisi nama-nama variabel widget artikel terkait sebagai referensi untuk pengeditan widget secara manual."><thead>
<tr><th>Opsi</th><th>Keterangan</th></tr>
</thead><tbody>
<tr><td>widgetStyle</td><td>Kode model widget artikel terkait berupa
angka. Mengubah nilai variabel ini akan mengubah markup HTML widget,
sehingga kode CSS harus disesuaikan ulang. Lebih baik gunakan generator.</td></tr>
<tr><td>homePage</td><td>Digunakan untuk menentukan URL blog Anda. Nilai sudah diotomatisasikan melalui elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%3Cdata%3Ablog.homepageUrl%2F%3E&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><data:blog.homepageUrl/></a></code></td></tr>
<tr><td>widgetTitle</td><td>Markup HTML untuk judul/kepala widget. Bisa
digunakan untuk menyisipkan kode HTML lain juga jika mau. Kode tersebut
nantinya akan tampil di atas daftar item posting di dalam widget.</td></tr>
<tr><td>numPosts</td><td>Digunakan untuk menentukan jumlah posting yang ingin ditampilkan.</td></tr>
<tr><td>summaryLength</td><td>Digunakan untuk menentukan panjang karakter ringkasan posting.</td></tr>
<tr><td>titleLength</td><td>Digunakan untuk memotong jumlah karakter judul posting sesuai dengan besar angka yang dituliskan. Ubah menjadi <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%22auto%22&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">"auto"</a></code> untuk menonaktifkan pemotongan karakter pada judul posting.</td></tr>
<tr><td>thumbnailSize</td><td>Digunakan untuk menentukan lebar/tinggi <em>thumbnail</em> posting yang berbentuk kotak.</td></tr>
<tr><td>noImage</td><td>Isi dengan URL gambar cadangan untuk posting yang tidak memiliki gambar.</td></tr>
<tr><td>containerId</td><td>ID elemen HTML untuk menampung daftar posting yang berhasil terpanggil.</td></tr>
<tr><td>newTabLink</td><td>Ubah nilainya menjadi <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=true&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">true</a></code> untuk membuat tautan-tautan di dalam widget ini membuka di tab/jendela baru secara otomatis ketika diklik.</td></tr>
<tr><td>moreText</td><td>Teks <em>“Baca Selengkapnya”</em>.</td></tr>
<tr><td>callBack</td><td>Fungsi tambahan yang akan bekerja setelah daftar posting termuat ke dalam kontainer widget. Lihat penjelasannya di bawah.</td></tr>
</tbody></table>
<h2>
Menerapkan Fungsi <code>callBack</code> Widget</h2>
Opsi
ini berfungsi untuk menciptakan perilaku tambahan pada widget. Fungsi
ini akan bekerja setelah widget berhasil dimuat. Cocok digunakan untuk
menambahkan efek-efek khusus. Dasar penerapannya adalah seperti ini.
Kode di bawah ini akan menampilkan pesan peringatan bahwa widget telah
berhasil termuat jika widget berhasil termuat:<br />
<pre data-codetype="JavaScript"><code class="javascript"><span class="keyword">var</span> relatedPostConfig = {
callBack: <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
alert(<span class="string">'Widget successfully loaded.'</span>);
}
};</code></pre>
<h3>
Contoh 1: Membuat Efek Transisi Hover pada Tooltip</h3>
Set tampilan widget menjadi artikel terkait dengan <dfn>tooltip</dfn>, kemudian buat fungsi JQuery seperti ini:<br />
<pre data-codetype="JQuery"><code class="javascript"><span class="keyword">var</span> relatedPostConfig = {
...
widgetStyle: <span class="number">4</span>,
containerId: <span class="string">"random-post"</span>,
callBack: <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="string">'#'</span> + <span class="keyword">this</span>.containerId + <span class="string">' li'</span>).hover(<span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="string">'.related-post-item-tooltip'</span>, <span class="keyword">this</span>).filter(<span class="string">':not(:animated)'</span>).animate({
marginBottom: -<span class="number">5</span>,
opacity: <span class="string">"show"</span>
}, <span class="number">400</span>);
}, <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="string">'.related-post-item-tooltip'</span>, <span class="keyword">this</span>).animate({
marginBottom: <span class="number">10</span>,
opacity: <span class="string">"hide"</span>
}, <span class="number">200</span>);
}).find(<span class="string">'.related-post-item-tooltip'</span>).css(<span class="string">'margin-bottom'</span>, <span class="number">10</span>);
}
};</code></pre>
Hapus efek <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%3Afocus&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">:focus</a></code> dan <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%3Ahover&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">:hover</a></code> pada CSS:<br />
<pre data-codetype="CSS"><code class="css"><del><span class="class">.related-post-style-4</span> <span class="class">.related-post-item</span><span class="pseudo">:focus</span> <span class="class">.related-post-item-tooltip</span>,
<span class="class">.related-post-style-4</span> <span class="class">.related-post-item</span><span class="pseudo">:hover</span> <span class="class">.related-post-item-tooltip</span> <span class="rules">{<span class="rule"><span class="attribute">display</span>:<span class="value">block</span>}</span></span></del></code></pre>
<div class="button-group">
<a class="button demo" href="http://jsbin.com/amuget/1" target="_blank">Lihat Demo</a></div>
<h3>
Contoh 2: Membuat Efek Sliding pada Tabir Judul</h3>
Set tampilan widget menjadi artikel terkait dengan tabir <dfn>tooltip</dfn>:<br />
<pre data-codetype="JQuery"><code class="javascript"><span class="keyword">var</span> relatedPostConfig = {
...
widgetStyle: <span class="number">5</span>,
titleLength: <span class="number">50</span>,
thumbnailSize: <span class="number">130</span>,
containerId: <span class="string">"random-post"</span>,
callBack: <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="string">'#'</span> + <span class="keyword">this</span>.containerId + <span class="string">' li'</span>).hover(<span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="string">'.related-post-item-tooltip'</span>, <span class="keyword">this</span>).filter(<span class="string">':not(:animated)'</span>).animate({
marginTop: <span class="string">"50%"</span>
}, <span class="number">400</span>);
}, <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="string">'.related-post-item-tooltip'</span>, <span class="keyword">this</span>).animate({
marginTop: <span class="string">"100%"</span>
}, <span class="number">200</span>);
}).find(<span class="string">'.related-post-item-tooltip'</span>).css(<span class="string">'margin-top'</span>, <span class="string">'100%'</span>);
}
};</code></pre>
Hapus deklarasi <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=display%3Anone&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">display:none</a></code> pada selektor <em>tooltip</em> widget, hapus juga efek <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%3Afocus&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">:focus</a></code> dan <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%3Ahover&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">:hover</a></code> pada CSS:<br />
<pre data-codetype="CSS"><code class="css"><span class="class">.related-post-style-5</span> <span class="class">.related-post-item-tooltip</span> <span class="rules">{
<span class="rule"><span class="attribute">display</span>:<span class="value">block</span>;</span>
<span class="rule"><span class="attribute">background-color</span>:<span class="value">black</span>;</span>
<span class="rule"><span class="attribute">background-color</span>:<span class="value"><span class="function">rgba(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">9</span>)</span></span>;</span>
<span class="rule"><span class="attribute">position</span>:<span class="value">absolute</span>;</span>
<span class="rule"><span class="attribute">top</span>:<span class="value"><span class="number">0</span></span>;</span>
<span class="rule"><span class="attribute">right</span>:<span class="value"><span class="number">0</span></span>;</span>
<span class="rule"><span class="attribute">bottom</span>:<span class="value"><span class="number">0</span></span>;</span>
<span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">0</span></span>;</span>
<span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">10</span>px</span>;</span>
<span class="rule"><span class="attribute">line-height</span>:<span class="value">normal</span>;</span>
<span class="rule"><span class="attribute">font-style</span>:<span class="value">italic</span>;</span>
<span class="rule"><span class="attribute">color</span>:<span class="value">white</span>;</span>
<span class="rule"><span class="attribute">overflow</span>:<span class="value">hidden</span>;</span>
<del><span class="rule"><span class="attribute">display</span>:<span class="value">none</span>;</span></del>
<span class="rule">}</span></span></code></pre>
<pre data-codetype="CSS"><code class="css"><del><span class="class">.related-post-style-5</span> <span class="class">.related-post-item</span><span class="pseudo">:focus</span> <span class="class">.related-post-item-tooltip</span>,
<span class="class">.related-post-style-5</span> <span class="class">.related-post-item</span><span class="pseudo">:hover</span> <span class="class">.related-post-item-tooltip</span> <span class="rules">{<span class="rule"><span class="attribute">display</span>:<span class="value">block</span>}</span></span></del></code></pre>
<div class="button-group">
<a class="button demo" href="http://jsbin.com/amuget/6" target="_blank">Lihat Demo</a></div>
<h3>
Contoh 3: Membuat Efek <em>News Ticker</em></h3>
Set tampilan widget menjadi artikel terkait tipe <em>thumbnail</em> dan <em>summary</em>:<br />
<pre data-codetype="JQuery"><code class="javascript"><span class="keyword">var</span> relatedPostConfig = {
...
numPosts: <span class="number">10</span>,
widgetStyle: <span class="number">2</span>,
containerId: <span class="string">"random-post"</span>,
callBack: <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
<span class="keyword">var</span> $container = $(<span class="string">'#'</span> + <span class="keyword">this</span>.containerId + <span class="string">' > ul'</span>),
$list = $container.find(<span class="string">'li'</span>),
innerHeight = $list.first().height(),
outerHeight = $list.first().outerHeight(<span class="literal">true</span>);
<span class="comment">// Container & list height setup</span>
$container.css({
<span class="string">"height"</span>: outerHeight * $list.length / <span class="number">2</span>,
<span class="string">"overflow"</span>: <span class="string">"hidden"</span>
});
$list.css({
<span class="string">"height"</span>: innerHeight,
<span class="string">"overflow"</span>: <span class="string">"hidden"</span>
});
<span class="comment">// Animation</span>
<span class="function"><span class="keyword">function</span> <span class="title">newsTicker</span><span class="params">()</span> {</span>
window.setTimeout(<span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$container.find(<span class="string">'li:last'</span>).stop().animate({
opacity: <span class="number">0</span>
}, <span class="number">1000</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="keyword">this</span>).hide().prependTo($container).slideDown(<span class="number">1000</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="keyword">this</span>).stop().animate({
opacity: <span class="number">1</span>
}, <span class="number">1000</span>, newsTicker);
});
});
}, <span class="number">3000</span>);
} newsTicker();
}
};</code></pre>
<div class="button-group">
<a class="button demo" href="http://jsbin.com/amuget/7" target="_blank">Lihat Demo</a></div>
Dan seterusnya. Buat efek-efek baru yang lain sesuka hati melalui opsi <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=callBack&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">callBack</a></code>.<br />
<strong>Catatan:</strong> Saat menerapkan beberapa fungsi di atas, mungkin <dfn>template</dfn> Anda nanti menjadi tidak bisa disimpan. Cobalah untuk mengelilingi fungsi <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=callBack&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">callBack</a></code> dengan komentar <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=CDATA&sa=Telusuri" target="_blank" title="Telusuri makna kode ini">CDATA</a></code> seperti ini:<br />
<pre data-codetype="JavaScript"><code class="javascript"><span class="keyword">var</span> relatedPostConfig = {
callBack: <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
<span class="comment">//<![CDATA[</span>
Tuliskan fungsi di sini...
<span class="comment">//]]></span>
}
};</code></pre>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-66448375120939268262013-07-27T02:59:00.000-07:002013-07-27T02:59:32.729-07:00Awesome Slider With Progress Bar for Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rXEkiYMpv7ZOYEeVzp7d5p_bWjlbaetCclkuCf5Bpt3MIfaOXzoKeh1HLEaA-XvSzYbLebD0rdM5YBDKHP8C_qqB6lu8kzrLWL2xpewOvyAWAEz5_T-wzD9DCetbbCf_3vyVeRymmHU/s1600/Awesome+Slider+With+Progress+Bar+for+Blogger.png" rel="nofollow" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rXEkiYMpv7ZOYEeVzp7d5p_bWjlbaetCclkuCf5Bpt3MIfaOXzoKeh1HLEaA-XvSzYbLebD0rdM5YBDKHP8C_qqB6lu8kzrLWL2xpewOvyAWAEz5_T-wzD9DCetbbCf_3vyVeRymmHU/s1600/Awesome+Slider+With+Progress+Bar+for+Blogger.png" title="Awesome Slider With Progress Bar for Blogger" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNoSpacing" style="text-align: justify;">
<span style="font-size: 12.0pt;">Earlier
I have shared with you a simple CSS slider with many effects. And now I am
going to share another Slider which is really awesome. This slider is little
different than previous one. I have added a program bar when sliding image will
change then the progress bar will complete loading. You would see when you
mouse over on the slider then a pause button will appear as well as the slider
will pause. A <span class="IL_AD" id="IL_AD2">beautiful image</span> border
added and it will change color on mouse over as well as you would see a <span class="IL_AD" id="IL_AD1">shadow
of the</span> slider below frame. This slider build on complete CSS coding, not added any
heavy javascript file. Whole code depend of moz and webkit transition affect. For
using the slider you must use image with 600 X 200 px wide. You can use any
image resizer to make the perfect size. This slider also able to display post
caption within a transparent section. Hope it will help to beautify your blog. See the Demo from below before proceed
to the <span class="IL_AD" id="IL_AD3">tutorial</span>. </span></div>
<div class="MsoNoSpacing">
</div>
<center>
</center>
<div class="MsoNoSpacing">
<span style="font-size: 12.0pt;"><br /></span></div>
<br />
<div class="MsoNormal" style="background: white; line-height: 14.25pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<div class="MsoNormal" style="background: white; line-height: 14.25pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<b><span style="color: #3d85c6; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><span class="IL_AD" id="IL_AD9">Step 1</span></span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> <span class="IL_AD" id="IL_AD5">Log in</span> to your Blogger Account and
Go to your </span><b><span style="color: red; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Blogger Dashboard</span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div>
<div class="MsoNormal" style="background: white; line-height: 14.25pt; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
<div class="MsoNormal" style="background: white; line-height: 14.25pt;">
<b><span style="color: #3d85c6; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><span class="IL_AD" id="IL_AD12">Step 2</span></span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: #333333; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">C</span><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><span class="IL_AD" id="IL_AD7">lick</span> on Now click
on -> </span><b><span style="color: #3d85c6; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Template </span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">-> </span><b><span style="color: #3d85c6; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Edit HTML</span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">-> Unfold code </span><span style="color: #111111; font-family: "Arial","sans-serif"; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">►</span><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"></span></div>
<div class="MsoNormal" style="background: white; line-height: 14.25pt;">
<span style="color: #111111; font-family: "Arial","sans-serif"; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: white; line-height: 14.25pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<b><span style="color: #3d85c6; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Step 3</span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> Now Find this code </span><b><span style="color: red; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">]]></b:skin></span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> by Pressing </span><span style="background-color: transparent; color: #111111; font-family: 'Times New Roman', serif; font-size: 14px; line-height: 19px;"> </span><kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; color: #111111; font-size: 1.2em; line-height: 21px; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="color: #111111; font-family: 'Times New Roman', serif; font-size: 16px; line-height: 21px;"> + </span><kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; color: #111111; font-size: 1.2em; line-height: 21px; margin: 2px 3px; padding: 1px 5px;">F</kbd></div>
<div class="MsoNormal" style="background: white; line-height: 14.25pt; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
<div class="MsoNormal" style="background: white; line-height: 14.25pt; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify;">
<b><span style="color: #3d85c6; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Step 4</span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> Paste the below
code Before/above </span><b><span style="color: red; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">]]></b:skin> </span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">and Save the templates. </span></div>
<br />
<div class="MsoNoSpacing">
</div>
</div>
<blockquote class="tr_bq">
<table><tbody>
<tr></tr>
</tbody></table>
<blockquote class="tr_bq">
<blockquote>
<br /></blockquote>
</blockquote>
<table><tbody>
<tr></tr>
</tbody></table>
<blockquote>
<blockquote>
/* Awesome Slider by www.bloggerspice.com */ </blockquote>
</blockquote>
<table><tbody></tbody></table>
<blockquote>
</blockquote>
<table><tbody></tbody></table>
<blockquote>
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider
{</span><span style="font-size: 12.0pt;"> width: 600px;</span><span style="font-size: 12.0pt;"> height: 200px;</span><span style="font-size: 12.0pt;"> margin: 40px auto 0;</span><span style="font-size: 12.0pt;"> overflow: visible;</span><span style="font-size: 12.0pt;"> background-color: #362c30;</span><span style="font-size: 12.0pt;"> border: 10px solid #362c30;</span><span style="font-size: 12.0pt;"> -moz-transition: all 150ms ease-in;</span><span style="font-size: 12.0pt;"> -webkit-transition: all 150ms ease-in;</span><span style="font-size: 12.0pt;"> -o-transition: all 150ms ease-in;</span><span style="font-size: 12.0pt;"> position: relative;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BSmask {</span><span style="font-size: 12.0pt;"> overflow: hidden;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider:hover
{</span><span style="font-size: 12.0pt;"> background-color: #fff;</span><span style="font-size: 12.0pt;"> border: 10px solid #00477D;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider:hover
#BSpause {</span><span style="font-size: 12.0pt;"> opacity: 1;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeslider:hover
#BSprogress {</span><span style="font-size: 12.0pt;"> background-color: rgba(8,8,8,0.0);</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider:hover
ul, #BloggerSpiceAwesomeSlider:hover #BSprogress,
#BloggerSpiceAwesomeSlider:hover {</span><span style="font-size: 12.0pt;"> -moz-animation-play-state: paused;</span><span style="font-size: 12.0pt;"> -webkit-animation-play-state: paused;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BSpause {</span><span style="font-size: 12.0pt;"> width: 600px;</span><span style="font-size: 12.0pt;"> height: 200px;</span><span style="font-size: 12.0pt;"> position: absolute;</span><span style="font-size: 12.0pt;"> top: 0;</span><span style="font-size: 12.0pt;"> opacity: 0;</span><span style="font-size: 12.0pt;"> background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8PWCce7rLc_kxgO37rzLpfgKpCKtrHHKw-U5R1C1KSEP82q_8Q8N4sAm2fFqMJQ7E1uSwcz7ZSbeDzQp5eTuagk4Nsq6OkSBeoEjdERL3Wnkemw7ycKlNRypTkpRMvsVQM1pHQUMvEpo/s1600/BS+pause.png);</span><span style="font-size: 12.0pt;"> background-position: 566px 10px;</span><span style="font-size: 12.0pt;"> background-repeat: no-repeat;</span><span style="font-size: 12.0pt;"> pointer-events: none;</span><span style="font-size: 12.0pt;"> -moz-transition: all 150ms ease-in;</span><span style="font-size: 12.0pt;"> -webkit-transition: all 150ms ease-in;</span><span style="font-size: 12.0pt;"> -o-transition: all 150ms ease-in;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BSprogress {</span><span style="font-size: 12.0pt;"> width: 2px;</span><span style="font-size: 12.0pt;"> height: 5px;</span><span style="font-size: 12.0pt;"> background-color: #0066B3;</span><span style="font-size: 12.0pt;"> -moz-animation: BSprogress 18s infinite;</span><span style="font-size: 12.0pt;"> -webkit-animation: BSprogress 18s infinite;</span><span style="font-size: 12.0pt;"> position: relative;</span><span style="font-size: 12.0pt;"> top: -1px;</span><span style="font-size: 12.0pt;"> -moz-transition: all 150ms ease-in;</span><span style="font-size: 12.0pt;"> -webkit-transition: all 150ms ease-in;</span><span style="font-size: 12.0pt;"> -o-transition: all 150ms ease-in;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider
ul {</span><span style="font-size: 12.0pt;"> width: 2400px;</span><span style="font-size: 12.0pt;"> list-style: none;</span><span style="font-size: 12.0pt;"> padding: 0;</span><span style="font-size: 12.0pt;"> margin: 0;</span><span style="font-size: 12.0pt;"> -moz-animation: slide-animation 18s
infinite;</span><span style="font-size: 12.0pt;"> -webkit-animation: slide-animation 18s
infinite;</span><span style="font-size: 12.0pt;"> position: relative;</span><span style="font-size: 12.0pt;"> left: 0px;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider
li {</span><span style="font-size: 12.0pt;"> display: inline;</span><span style="font-size: 12.0pt;"> width: 600px;</span><span style="font-size: 12.0pt;"> height: 200px;</span><span style="font-size: 12.0pt;"> margin: 0;</span><span style="font-size: 12.0pt;"> padding: 0;</span><span style="font-size: 12.0pt;"> float: left;</span><span style="font-size: 12.0pt;"> position: relative;</span><span style="font-size: 12.0pt;"> background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7s4kTzWjnQxL8asMSG1hyphenhyphen1QO0e6VKKBL4LAENOxehfnIFk7Hpq3GIXawJk1dYUJlGHGU1_TBIaRoaGcrw3SanvupCyCivskOFFZSe4jNVGeCJQvbioMc593aHb3FLvwyqG0wI9B-lvuf/s1600/BS+loading.gif);</span><span style="font-size: 12.0pt;"> background-position: 50% 50%;</span><span style="font-size: 12.0pt;"> background-repeat: no-repeat;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider
li:last-of-type {</span><span style="font-size: 12.0pt;"> background-color: #362c30;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider
li a {</span><span style="font-size: 12.0pt;"> display: block;</span><span style="font-size: 12.0pt;"> text-decoration: none;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider
li span {</span><span style="font-size: 12.0pt;"> display: block;</span><span style="font-size: 12.0pt;"> width: 560px;</span><span style="font-size: 12.0pt;"> padding: 15px 20px;</span><span style="font-size: 12.0pt;"> position: absolute;</span><span style="font-size: 12.0pt;"> bottom: 0;</span><span style="font-size: 12.0pt;"> left: 0;</span><span style="font-size: 12.0pt;"> background-color: rgba(54,44,48,0.6);</span><span style="font-size: 12.0pt;"> border-top: 1px solid #362c30;</span><span style="font-size: 12.0pt;"> text-shadow: 1px 1px 1px #362c30;</span><span style="font-size: 12.0pt;"> pointer-events: none;</span><span style="font-size: 12.0pt;"> text-align: left;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider-shadow
{</span><span style="font-size: 12.0pt;"> width: 100%;</span><span style="font-size: 12.0pt;"> height: 260px;</span><span style="font-size: 12.0pt;"> background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEZGWkKNKpTBZ7NLjR0Hd7gQWIRVgqy7whaP8QKrwB8NPz8FOeYApnxdPBLKd89Adq5HJTalv3hexjqe0FrASZpB5PRUSsD696XrCXB8wAUV5BfwvMZVX8g363lKgaQw_pluNdEB69d8b/s1600/shadow-namkna-blogspot-com-v2.png);</span><span style="font-size: 12.0pt;"> background-position: center bottom;</span><span style="font-size: 12.0pt;"> background-repeat: no-repeat;</span><span style="font-size: 12.0pt;"> margin: 10px auto 0;</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">@-webkit-keyframes
slide-animation {</span><span style="font-size: 12.0pt;">0% {opacity:0;}</span><span style="font-size: 12.0pt;">2% {opacity:1;}</span><span style="font-size: 12.0pt;">20% {left:0px; opacity:1;}</span><span style="font-size: 12.0pt;">22.5% {opacity:0.6;}</span><span style="font-size: 12.0pt;">25% {left:-600px; opacity:1;}</span><span style="font-size: 12.0pt;">45% {left:-600px;
opacity:1;}</span><span style="font-size: 12.0pt;">47.5% {opacity:0.6;}</span><span style="font-size: 12.0pt;">50% {left:-1200px;
opacity:1;}</span><span style="font-size: 12.0pt;">70% {left:-1200px;
opacity:1;}</span><span style="font-size: 12.0pt;">72.5% {opacity:0.6;}</span><span style="font-size: 12.0pt;">75% {left:-1800px;
opacity:1;}</span><span style="font-size: 12.0pt;">95% {opacity:1;}</span><span style="font-size: 12.0pt;">98% {left:-1800px;
opacity:0;}</span><span style="font-size: 12.0pt;">100% {left:0px;
opacity:0;}</span><span style="font-size: 12.0pt;">}</span><span style="font-size: 12.0pt;">@-moz-keyframes
slide-animation {</span><span style="font-size: 12.0pt;">0% {opacity:0;}</span><span style="font-size: 12.0pt;">2% {opacity:1;}</span><span style="font-size: 12.0pt;">20% {left:0px; opacity:1;}</span><span style="font-size: 12.0pt;">22.5% {opacity:0.6;}</span><span style="font-size: 12.0pt;">25% {left:-600px;
opacity:1;}</span><span style="font-size: 12.0pt;">45% {left:-600px;
opacity:1;}</span><span style="font-size: 12.0pt;">47.5% {opacity:0.6;}</span><span style="font-size: 12.0pt;">50% {left:-1200px;
opacity:1;}</span><span style="font-size: 12.0pt;">70% {left:-1200px;
opacity:1;}</span><span style="font-size: 12.0pt;">72.5% {opacity:0.6;}</span><span style="font-size: 12.0pt;">75% {left:-1800px;
opacity:1;}</span><span style="font-size: 12.0pt;">95% {opacity:1;}</span><span style="font-size: 12.0pt;">98% {left:-1800px;
opacity:0;}</span><span style="font-size: 12.0pt;">100% {left:0px;
opacity:0;}</span><span style="font-size: 12.0pt;">}</span><span style="font-size: 12.0pt;">@-webkit-keyframes
BSprogress {</span><span style="font-size: 12.0pt;">0% {width:0px; opacity:0;}</span><span style="font-size: 12.0pt;">2% {width:0px; opacity:1;}</span><span style="font-size: 12.0pt;">20% {width:600px;
opacity:1;}</span><span style="font-size: 12.0pt;">22.5% {width:600px;
opacity:0;}</span><span style="font-size: 12.0pt;">22.59% {width:0px;}</span><span style="font-size: 12.0pt;">25% {width:0px;
opacity:1;}</span><span style="font-size: 12.0pt;">45% {width:600px;
opacity:1;}</span><span style="font-size: 12.0pt;">47.5% {width:600px;
opacity:0;}</span><span style="font-size: 12.0pt;">47.59% {width:0px;}</span><span style="font-size: 12.0pt;">50% {width:0px;
opacity:1;}</span><span style="font-size: 12.0pt;">70% {width:600px;
opacity:1;}</span><span style="font-size: 12.0pt;">72.5% {width:600px;
opacity:0;}</span><span style="font-size: 12.0pt;">72.59% {width:0px;}</span><span style="font-size: 12.0pt;">75% {width:0px;
opacity:1;}</span><span style="font-size: 12.0pt;">95% {width:600px;
opacity:1;}</span><span style="font-size: 12.0pt;">98% {width:600px;
opacity:0;}</span><span style="font-size: 12.0pt;">100% {width:0px;
opacity:0;}</span><span style="font-size: 12.0pt;">}</span><span style="font-size: 12.0pt;">@-moz-keyframes BSprogress
{</span><span style="font-size: 12.0pt;">0% {width:0px; opacity:0;}</span><span style="font-size: 12.0pt;">2% {width:0px; opacity:1;}</span><span style="font-size: 12.0pt;">20% {width:600px;
opacity:1;}</span><span style="font-size: 12.0pt;">22.5% {width:600px;
opacity:0;}</span><span style="font-size: 12.0pt;">22.59% {width:0px;}</span><span style="font-size: 12.0pt;">25% {width:0px;
opacity:1;}</span><span style="font-size: 12.0pt;">45% {width:600px;
opacity:1;}</span><span style="font-size: 12.0pt;">47.5% {width:600px;
opacity:0;}</span><span style="font-size: 12.0pt;">47.59% {width:0px;}</span><span style="font-size: 12.0pt;">50% {width:0px;
opacity:1;}</span><span style="font-size: 12.0pt;">70% {width:600px;
opacity:1;}</span><span style="font-size: 12.0pt;">72.5% {width:600px;
opacity:0;}</span><span style="font-size: 12.0pt;">72.59% {width:0px;}</span><span style="font-size: 12.0pt;">75% {width:0px;
opacity:1;}</span><span style="font-size: 12.0pt;">95% {width:600px;
opacity:1;}</span><span style="font-size: 12.0pt;">98% {width:600px;
opacity:0;}</span><span style="font-size: 12.0pt;">100% {width:0px;
opacity:0;}</span><span style="font-size: 12.0pt;">}</span><br />
<span style="font-size: 12.0pt;">#BloggerSpiceAwesomeSlider
ul li span h2 {</span><span style="font-size: 12.0pt;"> font-size: 24px;</span><span style="font-size: 12.0pt;"> line-height: 24px;</span><span style="font-size: 12.0pt;"> color: #fff;</span><span style="font-size: 12.0pt;"> font-weight: normal;</span><span style="font-size: 12.0pt;"> font-family: 'Communist-Regular';</span><span style="font-size: 12.0pt;"> text-shadow: 1px 1px 1px #362c30;</span><span style="font-size: 12.0pt;">}</span></blockquote>
</blockquote>
<div class="MsoNoSpacing">
</div>
<div class="MsoNoSpacing">
</div>
<div class="MsoNoSpacing">
<div class="MsoNoSpacing">
<b><span style="color: #3d85c6; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Step 5</span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> Now Find this code </span><b><span style="color: red; font-size: 12.0pt;"><div
id='main-wrapper'></span></b><span style="font-size: 12.0pt;"> </span><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">by Pressing </span><span style="color: #111111; font-family: 'Times New Roman', serif; font-size: 14px; line-height: 19px;"> </span><kbd style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; color: #111111; font-size: 1.2em; line-height: 21px; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="background-color: white; color: #111111; font-family: 'Times New Roman', serif; font-size: 16px; line-height: 21px;"> + </span><kbd style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; color: #111111; font-size: 1.2em; line-height: 21px; margin: 2px 3px; padding: 1px 5px;">F</kbd></div>
<div class="MsoNoSpacing">
</div>
<br />
<div class="MsoNoSpacing">
<b><span style="color: #3d85c6; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Step 6</span></b><span style="color: #111111; font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"> </span><span style="font-size: 12.0pt;">Now
Paste the Below code above <b><span style="color: red;"><div id='main-wrapper'></span></b></span></div>
</div>
<div class="MsoNoSpacing">
</div>
<div class="MsoNoSpacing">
</div>
<div class="MsoNoSpacing">
</div>
<div class="MsoNoSpacing">
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<span style="font-size: 12.0pt;"><div
id="BloggerSpiceAwesomeSlider-shadow"></span><span style="font-size: 12.0pt;"> <div
id="BloggerSpiceAwesomeSlider"></span><span style="font-size: 12.0pt;"> <div id="BSmask"></span><span style="font-size: 12.0pt;"> <ul></span><span style="font-size: 12.0pt;"><!-- Awesome slider by
www.bloggerspice.com --></span><span style="font-size: 12.0pt;"> <li></span><span style="font-size: 12.0pt;"> <a href="<b><span style="color: red;">#</span></b>" title="<b><span style="color: #7030a0;">Img Alter Text</span></b>"><img
src="<b><span style="color: #00b0f0;">Image
URL Here</span></b>" /></a><span><h2><b><span style="color: #00b050;">ADD CAPTION
HERE</span></b></h2></span></span><span style="font-size: 12.0pt;"> </li></span><span style="font-size: 12.0pt;"><!-- Awesome slider by
www.bloggerspice.com --></span><span style="font-size: 12.0pt;"> <li></span><span style="font-size: 12.0pt;"> <a href="<b><span style="color: red;">#</span></b>" title="<b><span style="color: #7030a0;"> Img Alter Text</span></b>
"><img src=" <b><span style="color: #00b0f0;">Image URL Here</span></b> " /></a></span><span style="font-size: 12.0pt;"> <span><h2><b><span style="color: #00b050;"> ADD CAPTION
HERE</span></b> </h2></span></span><span style="font-size: 12.0pt;"> </li></span><span style="font-size: 12.0pt;"><!-- Awesome slider by
www.bloggerspice.com --></span><span style="font-size: 12.0pt;"><li></span><span style="font-size: 12.0pt;"> <a href="<b><span style="color: red;">#</span></b>" title="<b><span style="color: #7030a0;"> Img Alter Text</span></b>
"><img src=" <b><span style="color: #00b0f0;">Image URL Here</span></b> "
/></a><span><h2><b><span style="color: #00b050;"> ADD CAPTION HERE</span></b> </h2></span></span><span style="font-size: 12.0pt;"> </li></span><span style="font-size: 12.0pt;"><!-- Awesome slider by
www.bloggerspice.com--></span><span style="font-size: 12.0pt;"><li></span><span style="font-size: 12.0pt;"> <a href="<b><span style="color: red;">#</span></b>" title="<b><span style="color: #7030a0;"> Img Alter Text</span></b>
"><img src=" <b><span style="color: #00b0f0;">Image URL Here</span></b> "
/></a><span><h2><b><span style="color: #00b050;"> ADD CAPTION HERE</span></b> </h2></span></span><span style="font-size: 12.0pt;"> </li></span><span style="font-size: 12.0pt;"> </ul></span><span style="font-size: 12.0pt;"> </div></span><span style="font-size: 12.0pt;"> <div id="BSprogress"></span><span style="font-size: 12.0pt;"> </div></span><span style="font-size: 12.0pt;"> <div id="BSpause"></span><span style="font-size: 12.0pt;"> </div></span><span style="font-size: 12.0pt;"> </div></span><span style="font-size: 12.0pt;"></div></span></blockquote>
</blockquote>
</div>
<div class="MsoNoSpacing">
</div>
<div class="MsoNoSpacing">
<h4 style="text-align: left;">
<span style="font-size: 12.0pt;">Customization </span></h4>
</div>
<div class="MsoNoSpacing">
<br />
<ul style="text-align: left;">
<li><span style="font-size: 12pt;">Replace </span><b style="font-size: 12pt;"><span style="color: red;">#</span></b><span style="font-size: 12pt;"> with Post
URL.</span></li>
<li><span style="font-size: 12pt;">Replace </span><b style="font-size: 12pt;"><span style="color: #00b0f0;">Image URL Here</span></b><span style="font-size: 12pt;">
with Post Image URL.</span></li>
<li><span style="font-size: 12pt;">Change </span><b style="font-size: 12pt;"><span style="color: #7030a0;">Img Alter Text</span></b><span style="font-size: 12pt;">
with Image <span class="IL_AD" id="IL_AD6">alternative</span> text.</span></li>
<li><span style="font-size: 12pt;">Change </span><b style="font-size: 12pt;"><span style="color: #00b050;">ADD CAPTION
HERE</span></b><span style="font-size: 12pt;"> with Post name.</span></li>
</ul>
</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-81055904724827747122013-07-27T02:51:00.000-07:002013-07-27T02:51:06.053-07:00Cara Membuat Biodata Penulis Dengan CSS Efek Hover<h3 class="post-title entry-title">
<br />
</h3>
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ekVC5Pmf2wg/UShDTGpiM9I/AAAAAAAAG6Y/cBqETnUmjJQ/s1600/Cara-Membuat-Biodata-Penuli.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Biodata Penulis Dengan CSS Efek Hover" border="0" height="200" src="http://3.bp.blogspot.com/-ekVC5Pmf2wg/UShDTGpiM9I/AAAAAAAAG6Y/cBqETnUmjJQ/s200/Cara-Membuat-Biodata-Penuli.jpg" title="Cara Membuat Biodata Penulis Dengan CSS Efek Hover" width="149" /></a></div>
<div style="text-align: justify;">
Beberapa Blogger profesional sering menggunakan atau menampilkan
biodatanya dapa Blog nya supaya mudah dikenal oleh para pengunjung. Dan
selama ini yang kita lihat tampilan biodatanya biasa - biasa aja. Tapi
pada tips kali ini saya akan berbagi tutorial cara membuat biodata
penulis yang berbeda, yaitu dengan CSS efek hover. Widget
HTML/JavaScript untuk biodata penulis ini bisa di letakkan pada pada
sidebar ataupun footer. Oh ya kode CSS ini dibuat oleh Mohammad Fazle
Rabbi dan disini saya hanya sharing aja. .</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Sobat bisa lihat demo nya <b><a href="http://bloggerspicedemo.blogspot.com/2013/01/demo-add-author-box-with-rotator-image.html" target="_blank">di sini</a></b>.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Cara memasangnya gampang banget tinggal menambahkan gatget saja di
sidebar atau footer blog. Berikut ini adalah caranya membuat biodata
penulis dengan CSS efek hover:</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
1. Masuk ke dashboard Blogger > Tata Letak atau Layout.</div>
<div style="text-align: justify;">
2. Tambahkan Gadget > HTML/JavaScript.</div>
<div style="text-align: justify;">
3. Copy dan paste kode di bawah ini:</div>
<span style="font-size: x-small;"><span style="font-family: inherit;"><br /></span></span>
<div style="background: #f2f2f2; border: 1px solid #000000; font-family: satisfy; font-size: 19px; height: 180px; overflow: auto; padding: 10px;">
<blockquote class="tr_bq">
<pre><span style="font-size: x-small;"><span style="font-family: inherit;"><span style="color: #003366;"><style></span>
<span style="color: #003366;"> .BSprofileBorder {</span>
<span style="color: #003366;"> margin:0 auto;</span>
<span style="color: #003366;"> padding:5px;</span>
<span style="color: #003366;"> width:290px;</span>
<span style="color: #003366;"> border-radius:5px;</span>
<span style="color: #003366;"> border: 5px #009999 solid;</span>
<span style="color: #003366;"> min-height:70px;</span>
<span style="color: #003366;"> }.BSprofileBorder1 {</span>
<span style="color: #003366;"> margin:5px auto;</span>
<span style="color: #003366;"> padding:5px;</span>
<span style="color: #003366;"> width:auto;</span>
<span style="color: #003366;"> border-radius:5px;</span>
<span style="color: #003366;"> border: 5px #80C8FE solid;</span>
<span style="color: #003366;"> min-height:70px;</span>
<span style="color: #003366;"> }#BSprofile{</span>
<span style="color: #003366;"> border:2px solid #888;</span>
<span style="color: #003366;"> margin:2px 5px 0px 5px;</span>
<span style="color: #003366;"> padding:2px;</span>
<span style="color: #003366;"> }</span>
<span style="color: #003366;"> #BSprofile:hover {</span>
<span style="color: #003366;"> border:2px solid #ccc;</span>
<span style="color: #003366;"> cursor:pointer;</span>
<span style="color: #003366;"> }</span>
<span style="color: #003366;"> .BSprofileopacity {</span>
<span style="color: #003366;"> opacity: 0.5;</span>
<span style="color: #003366;"> margin-left: 50px;</span>
<span style="color: #003366;"> -moz-transition: all 0.5s ease-out;</span>
<span style="color: #003366;"> -o-transition: all 0.5s ease-out;</span>
<span style="color: #003366;"> -webkit-transition: all 0.5s ease-out;</span>
<span style="color: #003366;"> -ms-transition: all 0.5s ease-out;</span>
<span style="color: #003366;"> transition: all 0.5s ease-out;</span>
<span style="color: #003366;"> -moz-transform: rotate(7deg);</span>
<span style="color: #003366;"> -o-transform: rotate(7deg);</span>
<span style="color: #003366;"> -webkit-transform: rotate(7deg);</span>
<span style="color: #003366;"> -ms-transform: rotate(7deg);</span>
<span style="color: #003366;"> transform: rotate(7deg);</span>
<span style="color: #003366;"> filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');</span>
<span style="color: #003366;"> zoom: 1;</span>
<span style="color: #003366;"> }</span>
<span style="color: #003366;"> .BSprofileopacity:hover {</span>
<span style="color: #003366;"> opacity: 1;</span>
<span style="color: #003366;"> margin-left: 0px;</span>
<span style="color: #003366;"> -moz-transform: rotate(0deg);</span>
<span style="color: #003366;"> -o-transform: rotate(0deg);</span>
<span style="color: #003366;"> -webkit-transform: rotate(0deg);</span>
<span style="color: #003366;"> -ms-transform: rotate(0deg);</span>
<span style="color: #003366;"> transform: rotate(0deg);</span>
<span style="color: #003366;"> filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');</span>
<span style="color: #003366;"> zoom: 1;</span>
<span style="color: #003366;"> -moz-box-shadow: 1px 1px 4px #000;</span>
<span style="color: #003366;"> -webkit-box-shadow: 1px 1px 4px #000;</span>
<span style="color: #003366;"> box-shadow: 1px 1px 4px #000;</span>
<span style="color: #003366;"> } </span>
<span style="color: #003366;"></style></span>
<span style="color: #003366;"><div></span>
<span style="color: #003366;"> <div></span>
<span style="color: #003366;"> <img id="BSprofile" height='50' src="<span style="color: red;"><strong>YOUR_IMAGE_OR_PICTURE</strong></span>" width='50' align="left"/></span>
<span style="color: #003366;"> I'm <a rel="me" href=https://plus.google.com/u/0/<strong><span style="color: red;">GOOGLE_PLUS_ID</span></strong>/ title="<span style="color: red;"><strong><span class="IL_AD" id="IL_AD8">YOUR NAME</span></strong></span>" target="_blank"> <strong><span style="color: red;">YOUR NAME</span></strong> </a> <span style="color: red;"><strong>YOUR OTHER INFORMATION</strong></span> </span> >>></span>
<span style="color: #003366;"> <a style="color:#888;" href="<span style="color: red;"><strong>ABOUT_ME</strong></span>" target="_blank"><span class="IL_AD" id="IL_AD5">Read More</span> &#187;</a></span>
<span style="color: #003366;"></div></span>
</span></span><span style="color: #003366;"><span style="font-size: x-small;"><span style="font-family: inherit;"></div> </span></span> </span>
</pre>
</blockquote>
</div>
<br />
<div style="text-align: justify;">
<span style="font-size: x-small;">Ganti tulisan yang berwarna merah seperti rincian dibawah ini:<br /><br /><span style="color: red;">YOUR_IMAGE_OR_PICTURE</span> - <span style="font-size: x-small;">Ganti dengan URL <span style="font-size: x-small;">photo profile yang mau s<span style="font-size: x-small;">obat pakai.</span></span></span><br /><span style="color: red;">GOOGLE_PLUS_ID</span> - <span style="font-size: x-small;">Ganti dengan </span>21<span style="font-size: x-small;"> </span>digit ID Google+ sobat.<br /><span style="color: red;">ABOUT_ME</span> - Ganti dengan URL<span style="font-size: x-small;"> </span>halaman 'About Me' yang sobat punya.<br /><span style="color: red;">YOUR<span style="font-size: x-small;">_</span>NAME</span><span style="font-size: x-small;"> </span>- Ganti dengan nama <span style="font-size: x-small;">yang mau sobat pakai<span style="font-size: x-small;">.</span></span><br /><span style="color: red;">YOUR OTHER INFORMATION</span> - Ganti dengan informasi apapun mengenai <span style="font-size: x-small;">diri sobat<span style="font-size: x-small;">, seperti </span></span>negara/lokasi, judul (ex. Admin, Penulis, dll) atau basic informasi lainnya tentang diri <span style="font-size: x-small;">sobat</span>.<br /><br /><span style="font-size: x-small;">P.S </span>: kalau sobat <span style="font-size: x-small;">mahir dalam pengedita<span style="font-size: x-small;">n</span></span> CSS, sobat juga <span style="font-size: x-small;">bisa</span> mengedit warna dasar atau garis batas sesuai dengan keinginan <span style="font-size: x-small;">sobat</span>.<br /><br />4. Simpan widget dan selesai.<br />5. Lihat hasilnya pada blog <span style="font-size: x-small;">sobat.</span> </span></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span style="font-size: x-small;"><span style="font-size: x-small;">Selamat </span></span>membuat biodata penulis dengan CSS efek hover. Enjoy it! Salam Blogger!</div>
</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-72994199976825823332013-07-27T02:46:00.002-07:002013-07-27T02:46:16.906-07:00Effect Lipat Join Us On Facebook Pada Sudut Blog<h3 class="post-title entry-title">
<br />
</h3>
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div style="text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Bply8Y3slVY/UOFSaq1LrpI/AAAAAAAAEeM/my5Ovvbci1s/s1600/effect-lipat-pada-sudut-blo.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="http://3.bp.blogspot.com/-Bply8Y3slVY/UOFSaq1LrpI/AAAAAAAAEeM/my5Ovvbci1s/s400/effect-lipat-pada-sudut-blo.jpg" width="400" /></a></div>
<div style="text-align: justify;">
<b>Effect Lipat Join Us On Facebook Pada Sudut Blog</b>
- Begitu banyak sekali cara yang dapat kita lakukan supaya blog
berpenampilan semakin menarik,
tidak hanya manusia blog juga harus berpenampilan menarik agar para
pengunjung blog betah dan nyaman saat berada di halaman blog kita. Pada
kesempatan kali ini disini akan dibahas cara memasang <i><b>effect lipat join us on facebook pada sudut blog</b></i>, karena selain penampilan blog akan lebih menarik bermanfaat juga untuk mempermudah pengunjung mengetahui keberadaan halaman
fans page di facebook. Effect lipat ini sering kali disebut juga dengan istilah effect page peel oleh para mastah blogger.<br />
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Page peel blog memang menarik dan unik jika diperhatikan, halaman yang
melipat pada sudut blog akan terbuka lebar lipatannya jika mouse di
arahkan
diatas efek tersebut, jika Anda ingin lihat contohnya seperti pada sudut
kanan atas blog ini. Biasanya effect halaman lipat ini oleh pada master
- master blogger dipergunakan untuk memasang iklan. Namun pada
kesempatan kali ini kita akan membuat <b><i>effect halaman lipat join us on facebook</i></b>. Nah, berikut ini adalah langkah - langkah cara membuat effect lipat pada blog :</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<br />
1. Login ke akun Blogger.</div>
<div style="text-align: justify;">
<div style="text-align: start;">
2. <span style="font-family: inherit;">Pilih Template </span><span style="background-color: white; font-family: inherit; line-height: 19.600000381469727px;">» Edit HTML </span><span style="background-color: white; font-family: inherit; line-height: 19.600000381469727px;">» Lanjutkan </span><span style="background-color: white; line-height: 19.600000381469727px;"><span style="font-family: inherit;">»</span></span><span style="line-height: 19.600000381469727px; text-align: justify;"><span style="font-family: Arial; font-size: xx-small;"> </span><span style="font-family: inherit;">Expand Template Widget.</span></span></div>
</div>
3. Cari kode <span style="color: red;"></head></span><span style="font-family: inherit;">, lalu letakkan kode dibawah tepat diatas kode </span><span style="color: red;"></head>.</span><br />
<br />
<center>
<div style="background-color: white; border: 4px ridge #000000; padding: 5px; width: 450px;">
<blockquote class="tr_bq">
<div style="text-align: left;">
<div style="text-align: left;">
<span style="font-family: inherit;"><script type='text/javascript'>var tujuan =&#39; http://www.facebook.com/<span style="color: red;">arieadie</span> &#39;</script></span></div>
</div>
<div style="text-align: left;">
<span style="font-family: inherit;"><script src='https://sites.google.com/site/republicofnote/script/page_peel_effect.js/' type='text/javascript'/></span></div>
</blockquote>
</div>
</center>
<br />
4. Silahkan ganti tulisan yang <span style="color: red;">warnanya merah</span> dengan nama fans page facebook Anda.<br />
5. Klik Save.<br />
6. Refresh halaman blog Anda dan lihat hasilnya.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
</div>
</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-28440820086251216632013-07-27T02:43:00.000-07:002013-07-27T02:43:00.493-07:00Memasang Widget Metro Style Social Media<h3 class="post-title entry-title">
<br />
</h3>
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Olh9HCFCvBI/UTLe7yrUi3I/AAAAAAAAHFw/mUHiBdbrbcE/s1600/Memasang+Widget+Metro+Style+Social+Media.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Widget Metro Style Social Media Pada Blog" border="0" height="150" src="http://4.bp.blogspot.com/-Olh9HCFCvBI/UTLe7yrUi3I/AAAAAAAAHFw/mUHiBdbrbcE/s200/Memasang+Widget+Metro+Style+Social+Media.jpg" title="Memasang Widget Metro Style Social Media Pada Blog" width="200" /></a></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Ayo sob hias blog kita dengan widget sosial media . Widget yang satu ini
selain indah untuk tampilan blog juga berguna sebagai tombol share ke
media sosial seperti facebook, twitter, dan google plus. Widget ini di
beri nama oleh penciptanya Metro Style Social Media.</div>
<br /><div style="text-align: justify;">
Bagi sobat yang suka widget silahkan dicoba, berikut ini adalah langkah
sederhana untuk memasang widget Metro Style Social Share:</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
1. Login ke akun Blogger.</div>
<div style="text-align: justify;">
2. Pilih Template » Edit HTML » Lanjutkan » Expand Template Widget.</div>
<div style="text-align: justify;">
3. Cari kode <span style="color: red;">]]></b:skin></span> dengan menggunakan Ctrl+F, lalu letakkan kode dibawah tepat di atas kode <span style="color: red;">]]></b:skin></span>.</div>
<blockquote class="tr_bq">
<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">
.widget-item-control a{display:none;}<br />
<br />
.widget-item-control a{display:none;}<br />
<br />
#supportive{width: 300px;<br />
<br />
float: left;margin-top: 10px;}<br />
<br />
#supportive li{position:relative; cursor:pointer; padding: 0 !important;}<br />
<br />
#supportive .facebook, .googleplus, .rss, .twitter{<br />
<br />
position: relative;<br />
<br />
-moz-transition: all 0.4s ease-in-out;<br />
<br />
-webkit-transition: all 0.4s ease-in-out;<br />
<br />
-o-transition: all 0.4s ease-in-out;<br />
<br />
transition: all 0.4s ease-in-out;<br />
<br />
z-index: 5;<br />
<br />
display: block;<br />
<br />
float: left;<br />
<br />
margin: 1px;}<br />
<br />
#supportive .icon{overflow:hidden;}<br />
<br />
#supportive .facebook{width: 147px;<br />
<br />
height: 150px;<br />
<br />
background: rgba(59,89,152,1)
url("https://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png")
no-repeat center center;}<br />
<br />
#supportive .twitter{width: 148px;<br />
<br />
height: 74px;<br />
<br />
background: rgba(59,89,152,1)
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHGOTH4qfCp_sGiCCIVPOFPZ4tyYPUpG1_kR4Y3cGLFTAYqgX8ISH9N6fju2THdRyZ7a_b7hLwRwmSVbUpJ64qn_BqHPG-Yf_XJqopL11euIfagcS3G3c_1CH5XdsH8G34ZG3l-EaBLKZO/s1600/Twitter.png")
no-repeat center center;}<br />
<br />
#supportive .googleplus{width: 148px;<br />
<br />
height: 74px;<br />
<br />
background: rgba(59,89,152,1)
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUK3i5Rxqe5Ox8qxF6EM0TS0b8aHpdgbfFvFnJ18Thh2UokL2hYgxZPL6AAYI_VrIHP5oeTTZqTd_TtLH1toEcst5BrWtAvlMVC6LPgDCHPpsQCiuAOeRXuJOf9JfDAzvXbAS3uloya6Uu/s1600/google+plus.png")
no-repeat center center;}<br />
<br />
#supportive .rss{ width: 299px;<br />
<br />
height: 74px;<br />
<br />
background: rgba(59,89,152,1)
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzlLxkg1OIkFqJjacz1PrQbJQF7U6FTC470crMP9GSK05wM8SV5VdPMbfdwdeLc9RO8EzcTV_HWHRIDIzyDQAs3GdU9HlyIp83qKNF6hPST-U8xrq5x5LhgGx37HI4XJH9ZYSdCwjG-O0/s1600/rss.png")
no-repeat center center;}<br />
<br />
#supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;<br />
<br />
-webkit-transition: all 0.1s ease-in-out;}<br />
<br />
#supportive li:hover .twitter{background:rgba(64,153,255,1)
url("https://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/h120/Twitter.png")
no-repeat center center;-moz-transition: all 0.1s ease-in-out;<br />
<br />
-webkit-transition: all 0.1s ease-in-out;}<br />
<br />
#supportive li:hover .googleplus{background:rgba(228,69,36,1)
url("https://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/h120/google+plus.png")
no-repeat center center;-moz-transition: all 0.1s ease-in-out;<br />
<br />
-webkit-transition: all 0.1s ease-in-out;}<br />
<br />
#supportive li:hover .rss{background:rgba(255,102,0,1)
url("https://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/h120/rss.png")
no-repeat center center;-moz-transition: all 0.1s ease-in-out;<br />
<br />
-webkit-transition: all 0.1s ease-in-out;} </div>
</blockquote>
4. Setelah selesai simpan template.<br />
5. Kembali ke dasboard > Tata Letak > Tambah Gadget > HTML/Java Script > Letakkan kode dibawah ini.<br />
<br />
<blockquote class="tr_bq">
<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">
<ul id='supportive'><br />
<br />
<li><a class='icon facebook' href='http://www.facebook.com/<span style="color: blue;"><b>FaceBookPage</b></span>/'/></a></li><br />
<br />
<li><a class='icon twitter' href='http://twitter.com/<span style="color: blue;"><b>TwitterUserName</b></span>'/></a></li><br />
<br />
<li><a class='icon googleplus' href='https://plus.google.com/<b><span style="color: blue;">GooglePlusUser/PageID</span></b>/'/></a></li><br />
<br />
<li><a class='icon rss' href='http://feeds.feedburner.com/<span style="color: blue;"><b>FeedBurnerUserName</b></span>'/></a></li><br />
<br />
</ul></div>
</blockquote>
<br />
<div style="text-align: justify;">
6. Ganti URL Facebook, Twitter, Google Plus, dan Feedburner milik sobat.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
PS : Ukuran ideal untuk widget ini lebar 300px, kalo di rubah ukurannya penampilan akan terlihat kurang proporsional.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Semoga menarik ya sob blognya setelah dipasang widget metro style social media. Salam Blogger!</div>
</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-4135319610389426822013-07-27T02:40:00.000-07:002013-07-27T02:40:01.815-07:00Menarik Pengunjung Blog Melalui Gambar<h3 class="post-title entry-title">
<br />
</h3>
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-8MbfIAJoaYU/UQo8v8SHKYI/AAAAAAAAFI0/YjuMbxiCmA0/s1600/optimasi-gambar-postingan.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Menarik Pengunjung Blog Melalui Gambar" border="0" height="199" src="http://4.bp.blogspot.com/-8MbfIAJoaYU/UQo8v8SHKYI/AAAAAAAAFI0/YjuMbxiCmA0/s200/optimasi-gambar-postingan.jpg" title="Menarik Pengunjung Blog Melalui Gambar" width="200" /></a></div>
<div style="text-align: justify;">
Meningkatkan jumlah pengunjung tentunya sangat diperlukan, seperti yang telah saya bahas pada artikel yang berjudul <span style="color: blue;">Kenapa Pengunjung Blog Kita Harus Banyak</span>. Hal ini masih berkaitan dengan optimasi blog atau <b>trik SEO</b>. Jadi selain dengan mengirim artikel ke situs sosial bookmark, share ke komunitas <b>Google+, Facebook, Twitter</b>, dan lain sebagainnya. Kita juga dapat <span style="color: blue;"><b>menarik pengunjung blog melalui gambar</b></span>
yang ada di dalam postingan kita. Bahasa simpel nya gini sob, ketika
pengguna internet membuka gambar kita yang ada pada search engine <b>google image</b>
maka akan langsung diarahkan ke url blog kita. Menarik kan? saya
sendiri sering mengalami hal ini, ketika membuka sebuah gambar untuk
tampilan besar, yang ada bukan muncul gambarnya tapi malah lari ke situs
orang...</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Nah, ternyata hal itu cukup mudah untuk di praktekin di blog kita sendiri, cara ini saya dapetin dari sebuah blog yang bernama <span style="color: blue;"><b><a href="http://seosaja.com/19/agar-pencarian-google-image-langsung-ke-artikel/" target="_blank">Seosaja.com</a></b></span>, silahkan yang mau baca artikel aslinya disana. </div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Tinggal taroh aja kode dibawah ini di atas kode <span style="color: red;"></head></span> di HTML blog kita.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<blockquote class="tr_bq">
<code><script language="JavaScript" type="text/javascript"><br />if (top.location != self.location) top.location = self.location;<br /></script> </code></blockquote>
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Buka dasboard <b>Blogger</b> -> Pilih template -> Edit HTML -> Centang Expand -> Cari kode <span style="color: red;"></head></span> pake Ctrl+F -> Taroh kode yang tadi -> Save Template -> Selesai.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Oh ya, tentunya supaya gambar pada postingan blog kita mudah terindeks
kita harus tau cara menggunakan keyword pada gambar tersebut,<span style="font-size: x-small;"> silahkan baca pada postingan<span style="font-size: x-small;"> saya yang lain yaitu </span><span style="color: blue;"><b>Cara Mengoptimasi Gambar Pada Blogger</b></span>. </span>Oke
selamat mencoba semoga cepat sukses blognya. Dan saya ucapkan
terimakasih bagi yang telah menyempatkan waktunya untuk berkunjung,
silahkan tinggalkan komentar yang bijak demi perbaikan blog ini. </div>
</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-6760468021371205132013-07-27T02:29:00.003-07:002013-07-27T02:29:46.801-07:00Cara Membuat Scroll Pada Blog Archive (Arsip Blog) <span itemprop="itemreviewed"><span itemprop="description">
</span></span>
<h3 class="post-title entry-title" itemprop="name">
</h3>
<br />
<div class="post-header">
</div>
<div id="summary5452540858794242371">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK79v3A6S-Cm87sWGYOS9EEFp2vvA7EUTECtLSiXgRDBnOE94w9M31NZh3v-0Lsdo50kafXnQvLhbcRY7q4gKo-SC40N4oSAdlIBH6GkuirM05AUudgMEUmN0Gjeg1poB365ZVHMj3x8Q/s1600/Capture.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK79v3A6S-Cm87sWGYOS9EEFp2vvA7EUTECtLSiXgRDBnOE94w9M31NZh3v-0Lsdo50kafXnQvLhbcRY7q4gKo-SC40N4oSAdlIBH6GkuirM05AUudgMEUmN0Gjeg1poB365ZVHMj3x8Q/s1600/Capture.PNG" /></a></div>
<span style="font-family: Verdana,sans-serif;"></span>
<span style="font-size: x-small;"><span style="font-family: inherit;"><span>1. <b>Login</b> ke Blogger.</span></span><br /><span style="font-family: inherit;"><span>2. Di halaman Dasbor, kita pilih <b>Rancangan Blogger.</b></span></span></span>
<span style="font-size: x-small;"><br /><span style="font-family: inherit;"><span>3. Kemudian pilih <b>Edit HTML</b></span></span></span>
<span style="font-size: x-small;"><br /><span style="font-family: inherit;"><span>4. Beri tanda centang pada <b>Expand Template Widget</b></span></span></span>
<span style="font-size: x-small;"><br /><span style="font-family: inherit;"><span>5. Cari kode berikut......</span></span></span>
<span style="font-size: x-small;"><br /></span>
<br />
<blockquote class="tr_bq">
<div class="alert">
<b><b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'></b></div>
</blockquote>
<br />
6. Lalu Terapkan Seperti <b>di bawahh ini.</b>....<br />
<br />
<blockquote class="tr_bq">
<b:includable id='main'><br />
<b:if cond='data:title'><br />
<h2><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<span style="color: blue;"><div style='overflow:auto; width:ancho; height:<span style="color: red;"><span style="font-weight: bold;">200px</span></span>;'></span><br />
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'><br />
<b:if cond='data:style == &quot;HIERARCHY&quot;'><br />
<b:include data='data' name='interval'/><br />
</b:if><br />
<b:if cond='data:style == &quot;FLAT&quot;'><br />
<b:include data='data' name='flat'/><br />
</b:if><br />
<b:if cond='data:style == &quot;MENU&quot;'><br />
<b:include data='data' name='menu'/><br />
</b:if><br />
</div><br />
</div><span style="color: blue;"></div></span><br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable></blockquote>
<br />
itulah pemasangannya di blog saya<br />
<br />
<br />
7. Kode warna<span style="color: red;"> <span style="color: blue;">Biru</span></span> dan <span style="color: red;">Merah </span>adalah kode yang ditambahkan kedalam script tersebut.<br />
<span style="color: red;">200</span> adalah tingginya, dan kalian bisa ubah seseuai ke inginann kalian..
</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-25563740606026985332013-07-27T02:26:00.000-07:002013-07-27T02:30:11.062-07:00cara membuat kolom scroll pada blog archive ( arsip blog ) <br />
<div style="text-align: justify;">
<span style="color: red;"><b>cara membuat kolom scroll pada blog archive</b></span> - <span style="background-color: lime;"><span style="color: blue;"><i><b>Trik cara membuat scroll pada arsip blog</b></i></span></span>, cara membuat scroll pada <b><span style="color: blue;">arsip blog</span></b> (<i><b>blog archive</b></i>), cara membuat kolom <i><b>blog archive</b></i> dengan scroll. apapun itu judulnya pasti hasilnya tetap sama.</div>
<div style="text-align: justify;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBmQmSNRHKSLaEMyySWB6o4Xygjw3Oalx4YTVR9ydAToSMsNkEUL5nOsDIdbMbZYWzGYg8gW_THBomZVk9GREAPFMGrc2KE0bq65Mn9P-Ck2VMQKG1QujU-mKNWt_zUevIF7ltX2U71Ag/s1600/cara+membuat+scrool+pada+blog+archive.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBmQmSNRHKSLaEMyySWB6o4Xygjw3Oalx4YTVR9ydAToSMsNkEUL5nOsDIdbMbZYWzGYg8gW_THBomZVk9GREAPFMGrc2KE0bq65Mn9P-Ck2VMQKG1QujU-mKNWt_zUevIF7ltX2U71Ag/s320/cara+membuat+scrool+pada+blog+archive.PNG" width="320" /></a></div>
</div>
<div style="text-align: justify;">
<span style="color: blue;"><i><b>cara membuat kolom scroll pada blog archive</b></i></span> ini tergolong cara untuk mempercantik blog, pada umumnya <i><b>arsip</b></i>
blog itu puanjang buanget. hehehe namun bisa dipendekkan tanpa merubah
subtansinya. ok dengan membuat efek scroll widget jadi ringkas dan
keren. sobat blogger juga bisa membaca postingan saya kemarin Cara
Membuat Scroll Pada Kolom Komentar sobat akan lihat hasilnya betapa
menarik dan ringkas menggunakan efek <i><b>scroll</b></i>. lebay...... hahaha</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Ini <span style="color: red;"><i><b>cara membuat kolom scroll pada blog archive</b></i></span>, sobat ikuti tutorialnya. OK !!! cekidot......</div>
<div style="text-align: justify;">
</div>
<div style="text-align: center;">
<b>Cara/tutorial 1 </b></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
1. Login ke Blogger.<br />
2. Di halaman Dasbor, kita pilih Rancangan Blogger.<br />
3. Kemudian pilih Edit HTML<br />
4. Beri tanda centang pada Expand Template Widget<br />
5. Kemudian sobat Cari kode berikut <span style="color: red;"><div id='ArchiveList'></span> atau ArchiveList agar lebih mudah gunakan ctrl+F. </div>
<div style="text-align: justify;">
6. Jika sudah ketemu Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini: </div>
<div style="text-align: justify;">
</div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
<div class='widget-content'><br />
<br />
<span style="color: blue;"><div style="border: 1px solid rgb(204,
204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px;
background-color: #FFFFFF;"></span><br />
<span style="color: red;"><div id='ArchiveList'></span><br />
<br />
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'><br />
<b:if cond='data:style == &quot;HIERARCHY&quot;'><br />
<b:include data='data' name='interval'/><br />
</b:if><br />
<b:if cond='data:style == &quot;FLAT&quot;'><br />
<b:include data='data' name='flat'/><br />
</b:if><br />
<b:if cond='data:style == &quot;MENU&quot;'><br />
<b:include data='data' name='menu'/><br />
</b:if><br />
</div><br />
</div><br />
<br />
<span style="color: blue;"></div></span><br />
<br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable></div>
</blockquote>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<b>Keterangan </b>:</div>
<div style="text-align: justify;">
</div>
<ul style="text-align: justify;">
<li>Untuk menemukan kode <span style="color: red;"><div id='ArchiveList'> </span>atau <span style="color: red;">ArchiveList</span> maka teman-teman harus memasang <span style="background-color: red;"><span style="color: blue;"><i><b>Blog Archive</b></i></span></span>
nya terlebih dahulu dengan cara : klik Design/Rancangan >> Page
Element >> Add a Gadget >> Blog Archive >> Save. Jika
teman-teman sudah memasang Blog Archive nya maka langsung saja mencari
kodenya tadi.</li>
<li>Harap disesuaikan saja kodenya, karena tidak semua templates sama,</li>
<li><span style="color: blue;">200px</span> : Adalah Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height: </li>
<li>Jika sudah klik Save templates dan lihat hasilnya. </li>
</ul>
<br />
<div style="text-align: center;">
<b>Cara/tutorial 2 </b></div>
<div style="text-align: center;">
</div>
<div style="text-align: left;">
<br />
1. Login ke akun blogspot,<br />
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,<br />
3. Cari kode berikut :<br />
<br />
<br />
<span style="color: blue;"><b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'></span><br />
<br />
4. Lalu Terapkan Seperti di bawah ini.....</div>
<blockquote class="tr_bq">
<b:includable id='main'><br />
<b:if cond='data:title'><br />
<h2><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<span style="color: blue;"> <span style="color: red;"> <div style='overflow:auto; width:ancho; height:<span style="color: blue;">200px</span>;'></span></span><br />
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'><br />
<b:if cond='data:style == &quot;HIERARCHY&quot;'><br />
<b:include data='data' name='interval'/><br />
</b:if><br />
<b:if cond='data:style == &quot;FLAT&quot;'><br />
<b:include data='data' name='flat'/><br />
</b:if><br />
<b:if cond='data:style == &quot;MENU&quot;'><br />
<b:include data='data' name='menu'/><br />
</b:if><br />
</div><br />
</div><span style="color: red;"></div></span><br />
<b:include name='quickedit'/><br />
</div><br />
</b:includable></blockquote>
<div style="text-align: left;">
<br />
5. Kode warna <b><span style="color: blue;">Biru</span></b> dan <b><span style="color: red;">Merah</span></b> adalah kode yang ditambahkan kedalam script tersebut.<br />
<span style="color: blue;"> 200px</span> adalah tingginya, dan kalian bisa ubah seseuai ke inginann kalian..</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
</div>
Demian <b>cara membuat kolom scroll pada blog archive</b>. ikuti selalu software mania pc akan selalu update dengan tutorial yang baru.linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-5854319256539268562013-07-27T00:21:00.001-07:002013-07-27T00:21:09.551-07:00Cara Membuat Widget Recent Comment Dengan Avatar Untuk Blog<a href="http://3.bp.blogspot.com/-ZejszgELT_4/T-m1zXCO9II/AAAAAAAADps/5efF6wOqXoA/s1600/recent+comments+with+avatar.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="178" src="http://3.bp.blogspot.com/-ZejszgELT_4/T-m1zXCO9II/AAAAAAAADps/5efF6wOqXoA/s200/recent+comments+with+avatar.png" width="200" /></a><b> Widget - </b>Kali ini saya akan membahas bagaimana cara membuat widget <b>recent comment </b>dengan
avatar untuk blog. Fungsi widget ini akan menampilkan komentar terbaru
secara otomatis ditambah avatar, yang dimaksud avatar adalah gambar
profil orang yang berkomentar.<br />
<br />
Berikut cara membuat widget recent comment dengan avatar<br />
<br />
1. Login ke blog kamu.<br />
2. Pilih Rancangan > Add Gadget > HTML/JavaScript.<br />3. Copy kode di bawah ini.
<b><span style="color: #444444;"><br />
</span></b><br />
<br />
<blockquote class="tr_bq">
<div style="overflow:auto;width:<span style="color: red;">300</span>px;"><br />
<style type="text/css"><br />
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}<br />
.w2b_recent_comments li{background:none !important;margin:0 0 6px
!important;padding:0 0 6px 0
!important;display:block;clear:both;overflow:hidden;list-style:none;}<br />
.w2b_recent_comments li
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px
#ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}<br />
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}<br />
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}<br />
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: none;line-height: 1.4;}<br />
</style><br />
<script type="text/javascript"><br />
//<![CDATA[<br />
// Recent Comments Settings<br />
var<br />
<span style="color: red;">numComments = 5,</span><br />
showAvatar = true,<br />
<span style="color: red;">avatarSize = 40,</span><br />
roundAvatar = true,<br />
<span style="color: red;">characters = 100,</span><br />
defaultAvatar = "",<br />
hideCredits = true;<br />
//]]><br />
</script><br />
<script type="text/javascript"
src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script><br />
<script type="text/javascript"
src="http://bloggermania69.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=3"></script><br />
</div></blockquote>
Sekarang perhatikan baik-baik kode yang berwarna merah.<br />
<br />
<b><span style="color: red;">width:300px;</span></b> (sesuaikan dengan lebar, supaya mudah ubah saja jadi 100%)<br />
<span style="color: red; font-weight: bold;">numComments </span>(jumlah komentar yang ingin ditampilkan)<br />
<span style="color: red; font-weight: bold;">avatarSize </span>(ukuran avatar atau gambar profil)<br />
<b><span style="color: red;">characters</span> </b>(jumlah kata pada komentar yang ingin ditampilkan)
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-26270610915687968762013-07-27T00:18:00.001-07:002013-07-27T00:18:24.788-07:00Cara Membuat Tombol Share Di Bawah Posting Blog <div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-pXpFk4gFNHA/UFc0mBDqyfI/AAAAAAAAFIo/VwnOPhhdll8/s1600/Share+button+-+Blazer+Blog.png" style="margin-left: 1em; margin-right: 1em;"><img alt="" src="data:image/png;base64,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" /></a></div>
<br />
1. Login ke blog kamu<br />
2. Pilih Edit HTML > Jangan lupa <b>Centang Expand Widget Template </b>> Cari kode <b><data:post.body/></b><br />
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.<br />
<br />
<blockquote class="tr_bq">
<style><br />
/*--------Social Sharing Widget Below Blog Post ------*/<br />
.sharebelow a {<br />
display:block;<br />
height:48px;<br />
width:48px;<br />
padding:0 4px;<br />
float:left;<br />
background:transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmW7xaQ3ob8bPY3V34RIe0kQoJHSbiDizkP3vWt0lV_FxzFTvb4utPkO0amvk66e5L21kKXa5DVsgyK1zUje-AKeDyL4b4dXR610nALCkZRefnlaAC8jK6n-CUkLQGclQIs-2a7MkVPE/s1600/sharebelow.png)
no-repeat;<br />
}<br />
.sharebelow a.googleplus {<br />
background-position: 0px -348px;<br />
}<br />
.sharebelow a.googleplus:hover {<br />
background-position: 0px -406px;<br />
}<br />
.sharebelow a.pinterest {<br />
background-position: 0px -464px;<br />
}<br />
.sharebelow a.pinterest:hover {<br />
background-position: 0px -522px;<br />
}<br />
.sharebelow a.delicious {<br />
background-position: 0px 0px;<br />
}<br />
.sharebelow a.delicious:hover {<br />
background-position: 0px -58px;<br />
}<br />
.sharebelow a.digg {<br />
background-position: 0px -116px;<br />
}<br />
.sharebelow a.digg:hover {<br />
background-position: 0px -174px;<br />
}<br />
.sharebelow a.stumbleupon {<br />
background-position: 0px -812px;<br />
}<br />
.sharebelow a.stumbleupon:hover {<br />
background-position: 0px -870px;<br />
}<br />
.sharebelow a.technorati {<br />
background-position: 0px -928px;<br />
}<br />
.sharebelow a.technorati:hover {<br />
background-position: 0px -406px;<br />
}<br />
.sharebelow a.twitter {<br />
background-position: 0px -928px;<br />
}<br />
.sharebelow a.twitter:hover {<br />
background-position: 0px -986px;<br />
}<br />
.sharebelow a.facebook {<br />
background-position: 0px -232px;<br />
}<br />
.sharebelow a.facebook:hover {<br />
background-position: 0px -290px;<br />
}<br />
.sharebelow a.reddit {<br />
background-position: 0px -580px;<br />
}<br />
.sharebelow a.reddit:hover {<br />
background-position: 0px -638px;<br />
}<br />
.sharebelow a.rss {<br />
background-position: 0px -696px;<br />
}<br />
.sharebelow a.rss:hover {<br />
background-position: 0px -754px;<br />
}<br />
.shareandbookmark{<br />
margin:10px 0px;<br />
color:#333333;<br />
font-weight:bold;<br />
font-size:18px;<br />
font-family:sans-serif;<br />
}<br />
</style><br />
<div class='sharebelow'><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div class="shareandbookmark"><br />
Kindly Bookmark and Share it:</div><br />
<!--Facebook--><br />
<a class='facebook'
expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; +
data:post.url + &quot;&amp;t=&quot; + data:post.title'
rel='external nofollow' target='_blank' title='Share this on Facebook
:&gt;'/><br />
<!--Google Plus--><br />
<a class='googleplus'
expr:href='&quot;http://plus.google.com/share?url=&quot; +
data:post.url' rel='external nofollow' target='_blank' title='+1 it
:&gt;'/><br />
<!-- Twitter --><br />
<a class='twitter'
expr:href='&quot;http://twitthis.com/twit?url=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='external nofollow' target='_blank' title='Tweet this
:&gt;'/><br />
<!-- Pinterest --><br />
<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/><br />
<!-- Delicious --><br />
<a class='delicious'
expr:href='&quot;http://del.icio.us/post?url=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='external nofollow' target='_blank' title='Add this to Delicious
:&gt;'/><br />
<!--Stumble--><br />
<a class='stumbleupon'
expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='external nofollow' target='_blank' title='Stumble this
:&gt;'/><br />
<!--DIGG--><br />
<a class='digg'
expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;
+ data:post.url' rel='external nofollow' target='_blank' title='Digg
this :&gt;'/><br />
<!-- Reddit --><br />
<a class='reddit'
expr:href='&quot;http://reddit.com/submit?url=&quot; +
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='external nofollow' target='_blank' title='Add this to Reddit
:&gt;'/><br />
<!--RSS --><br />
<a class='rss' expr:href='data:blog.homepageUrl +
&quot;feeds/posts/default&quot;' target='_blank' title='Bookmark
:&gt;'/><br />
</b:if></div><br />
<div style="clear:both"/></blockquote>
4. Simpan dan lihat hasilnya.linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-61895676062666034162013-07-26T23:54:00.000-07:002013-07-26T23:54:26.014-07:00MEMBUAT TOMBOL SHARE UNIK <div class="separator" style="clear: both; text-align: center;">
<span style="color: cyan; margin-left: 1em; margin-right: 1em;"><img height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDc-OwSRRPYAzSczpkycO3irfoSHJ8m0oEjm0iLrRDBODrVFlC6gCI_SdwK2NNOBZWB8hhv6rtc0LFjhQPiQ2BN8Aqj7rryRhnCZeq5Wjgs2KloVV-SHiPSSgFYIwUBxcOt7IviGyLok33/s320/egg.png" width="320" /></span></div>
<div style="margin-left: 1em; margin-right: 1em; text-align: justify;">
</div>
<br />
Menu sosial bookmark adalah salah satu
komponen penting untuk sebuah blog anda. Selain untuk mempercantik
tampilan blog, juga untuk mempermudah pengunjung blog anda untuk
membagikan / share ke jaringan sosial yang lain. Bentuk menu sosial
bookmark share sangat bermacam-macam. Sudah banyak tutorial di blog-blog
dan situs yang telah membagikan cara membuat tombol menu share sosial
bookmark.<br />
Kali ini akan berbagi tutorial cara membuat
tombol menu share sosial bookmark berbentuk slide telur yang bisa
membuka dan menutup berada di pojok bawah blog anda (seperti dalam
gambar). Slide telur terbuka berisi tombol bookmark untuk pembaca anda
untuk share posting di Facebook, Twitter, Google +, Blogger, LinkedIn,
Stumble dan Email.<br />
Langsung saja bagaimana cara memasangnya. Ikuti langkahnya dibawah :<br />
<br />
<br />
<br />
<br />
<div>
<div>
Selalu Back Up Template Anda Sebelum Anda Membuat Perubahan.</div>
<div>
</div>
<div>
1. Masuk ke dashboard blog anda pilih "Template" lalu pilih "Edit Html" kemudian klik "expand widget".</div>
<div>
2. Cari kode berikut <b></head></b> di blog anda atau klik Ctrl F untuk mempermudah pencarian kode</div>
<div>
3. Copy paste kode dibawah ini tepat di atas / sebelum <b></ head></b></div>
</div>
<div>
</div>
<div>
</div>
<div style="background-color: TRANSPARANT; border: 1px dashed GREEN; padding: 5px; width: 380px;">
<span style="color: blue;"><!-- Start Heart Bookmarking Gadget Code
From http://www.spiceupyourblog.com/ --><script
src='http://w.sharethis.com/gallery/shareegg/shareegg.js'
type='text/javascript'/><script
src='http://w.sharethis.com/button/buttons.js'
type='text/javascript'/><script
type='text/javascript'>stLight.options({publisher:
&quot;bea50586-2b9f-448d-947a-01385f28e305&quot;,
onhover:false}); </script><link
href='http://w.sharethis.com/gallery/shareegg/shareegg.css'
media='screen' rel='stylesheet' type='text/css'/><!-- End Heart
Bookmarking Gadget Code From http://www.spiceupyourblog.com/ --></span></div>
<br />
<br />
4. Kemudian cari kode <b></body></b><br />
5. Sekarang copy paste kode di bawah ini di atas / sebelum kode <b></ body></b><br />
<br />
<br />
<div style="background-color: TRANSPARANT; border: 1px dashed GREEN; padding: 5px; width: 380px;">
<span style="color: blue;"><!-- Start Heart Share Code From http://www.spiceupyourblog.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div
class='shareEgg' id='shareThisShareEgg'/></div><script
type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;,
[&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;],
{title:&#39;
<data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a
href="http://www.spiceupyourblog.com/">Blogger Wordpress
Gadgets</a><!-- End Heart Share Code From
http://www.spiceupyourblog.com/ --></span></div>
<br />
<br />
<br />
Tambahan :<br />
Tombol menu ini diatur berada di sudut kanan bawah dari blog anda,
tetapi anda dapat dengan mudah merubahnya. Lihat kode yang berwarna
kuning di atas <span style="color: yellow;">bottom: 2%; left: 2%</span>;.
Anda dapat merubah posisi tombolnya dari bawah ke bagian atas halaman
atau dari kiri ke kanan halaman blog anda. Rubahlah persentase atau
bottom / up dan left / right.<br />
<br />
6. Simpan Template Anda.<br />
<br />
<br />
<br />
CATATAN:<br />
sebelumnya backup dulu sebelum sobat edit. blog sobat. agar tidak terjadi salah simpan<br />
untuk hasilnya sobat pratinjau untuk melihatnya.<br />
semoga berhasil salam sahabat,:<br />
<br />
<br />
<br />
<b>TOMBOL SHARE YANG KEDUA CARA PENYIMPANAN SAMA SEPERTI DI ATAS </b><br />
<b>DAN INI GAMBAR DANCODE </b><br />
<br />
<b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySvHnWdnbOwV4uxdbAIerH9ME904inT7g18ipeO75GjvOp60ByQzHhSMXEscqqHM6lgCPliH5VlXFaqU9-t_0TPurWSXYgIRP-O2Uk7AYC5HzQ9Q5aJfK0Fuuo6Chtp_8Px4-Jyf0txc/s320/slide-out-christmas-ornament-blogger.png" /></b><br />
<b>CODE NO : 1</b><br />
<b><br /></b>
<br />
<div style="background-color: TRANSPARANT; border: 1px dashed GREEN; padding: 5px; width: 380px;">
<br />
<span style="color: blue;"><script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script><br />
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><br />
<script
type="text/javascript">stLight.options({publisher:
"bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script><br />
<link media="screen" type="text/css"
rel="stylesheet"
href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link></span></div>
<b><br /></b>
<b><br /></b>
<b>CODE NO 2</b><br />
<br />
<br />
<div style="background-color: TRANSPARANT; border: 1px dashed GREEN; padding: 5px; width: 380px;">
<span style="color: blue;"><br />
<div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div><br />
<script
type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament',
['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'],
{title:&#39;
<data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:'holiday'});</script><br />
</div><a
href="http://www.spiceupyourblog.com/">Blogger Wordpress
Tips</a><!-- End Christmas Share Code From
http://www.spiceupyourblog.com/ --></span></div>
<br />
<br />
Sebelumnya sobat buck up dulu templetnya ,<br />
untuk berjaga jaga,<br />
nah cukup dari sini dulu ya bro, and sis..<br />
semoga bermanfaat :<br />
SALAM SAHABAT:<br />
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-47348773049253837322013-07-26T23:49:00.000-07:002013-07-26T23:49:05.610-07:00 Cara Memasang Tombol Share Di Bawah Postingan (Facebook, Twitter, Google+, Dll) <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtWjILi5FoYYFo6y9ek3KZ-3toR7LK2rCEA8cUuGLK66kCiumRSpcCUcRD4Rf5YmqqB9htLT7TjUkSlhu8DLZncqpTbvE9d3GjiCHO_1GxNE2lnUUfxGXqXhpXqGYVdYWvly9a1lhfN7Gl/s1600/tombol-share-di-bawah-postingan.png" style="margin-left: auto; margin-right: auto;"><img alt="tombol share di bawah postingan" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtWjILi5FoYYFo6y9ek3KZ-3toR7LK2rCEA8cUuGLK66kCiumRSpcCUcRD4Rf5YmqqB9htLT7TjUkSlhu8DLZncqpTbvE9d3GjiCHO_1GxNE2lnUUfxGXqXhpXqGYVdYWvly9a1lhfN7Gl/s1600/tombol-share-di-bawah-postingan.png" title="tombol share di bawah postingan" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br />
Banyak hal yang perlu Anda lakukan untuk <span style="color: #3d85c6;">meningkatkan pengunjung blog</span>
Anda. Saat ini Anda perlu berterimakasih kepada situs-situs jejaring
sosial karena dengan itu Anda dapat mempromosikan dan berbagi website/
blog Anda kepada kalangan yang lebih luas. Pada artikel saya kali ini
akan membahas bagaimana cara memasang tombol share dari <span style="color: #3d85c6;">addthis</span>
di bawah postingan Anda. Saya akan menyediakan berbagai macam script
tombol share dan Anda dapat memilih mana yang Anda ingin pasang di
website Anda. <span style="color: #3d85c6;">Tombol share</span>
yang saya sediakan diantaranya Facebook like, Twitter, Google+,
Pinterest, LinkedIn, Stumbleupon, dan satu tombol yang memuat semuanya.
Baiklah langsung saja saya tunjukkan caranya.<br />
<br />
<div style="text-align: justify;">
<b><span style="color: #0b5394; font-size: medium;">Cara Memasang Tombol Share Di Bawah Postingan</span></b></div>
<div style="text-align: justify;">
<ul>
<li>Login ke akun <b>Blogger</b> Anda kemudian masuk ke <b>Template</b></li>
<li><b>Backup</b> dulu template Anda bila perlu</li>
<li>Klik <b>Edit HTML</b> dan centang <i style="font-weight: bold;">Expand Widget Templates</i> </li>
<li>Cari kode ini (gunakan CTRL + F untuk memudahkan pencarian)</li>
</ul>
</div>
<blockquote>
<div>
<data:post.body/></div>
</blockquote>
<div style="text-align: justify;">
<br />
<ul>
<li>Kemudian letakkan kode di bawah ini tepat di bawah kode <b><data:post.body/> </b>itu</li>
</ul>
</div>
<blockquote>
<!-- AddThis Button BEGIN --><br />
<div class='addthis_toolbox addthis_default_style '><br />
<span style="background-color: yellow;"><a class='addthis_button_facebook_like' fb:like:layout='button_count'/></span><br />
<span style="background-color: yellow;"><a class='addthis_button_tweet'/></span><br />
<span style="background-color: yellow;"><a class='addthis_button_google_plusone' g:plusone:size='medium'/></span><br />
<span style="background-color: yellow;"><a class='addthis_button_pinterest_pinit'/></span><br />
<span style="background-color: yellow;"><a class="addthis_button_linkedin_counter"/></span><br />
<span style="background-color: yellow;"><a class='addthis_button_stumbleupon_badge'/></span><br />
<span style="background-color: yellow;"><a class='addthis_counter addthis_pill_style'/></span><br />
</div><br />
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5064705719d41eef' type='text/javascript'/><br />
<!-- AddThis Button END --></blockquote>
<div style="text-align: justify;">
<i><br /></i>
<i><span style="color: red;">Catatan</span>: Apabila kode <b><span style="color: red;"><data:post.body/></span> </b>ada dua, letakkan kode di atas tepat di bawah kode kedua. </i><i>Anda juga dapat menghapus tombol share yang tidak Anda inginkan dengan cara menghapus 1 baris kode yang berwarna <span style="background-color: yellow;">kuning</span>. Misalkan Anda tidak menginginkan tombol <b>LinkedIn</b> maka Anda hapus kode </i><span style="background-color: yellow; text-align: start;"><span style="background-color: yellow;"><a class="addthis_button_linkedin_counter"></span><i>.</i></span></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<ul>
<li>Simpan Template Anda dan lihatlah perubahannya pada blog Anda.</li>
</ul>
</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-76691984358888578832013-07-26T22:09:00.001-07:002013-07-26T22:09:29.549-07:00Cara Memasang Related Post diBawah Posting<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirpnujuyWSUAqITDKzb1RFqg3Hg_2mDgrAZGhsPtbmgQ_J747_UeUevTdRwXoE1G7GaJ7lyDWcU970N14TMbTZnnnM4JNyvMge0VPKoqiWDsnLloPwe_5a7keJC__j6neNLTFaUeUds6I/s320/Related+post+with+icon+for+blogger.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirpnujuyWSUAqITDKzb1RFqg3Hg_2mDgrAZGhsPtbmgQ_J747_UeUevTdRwXoE1G7GaJ7lyDWcU970N14TMbTZnnnM4JNyvMge0VPKoqiWDsnLloPwe_5a7keJC__j6neNLTFaUeUds6I/s320/Related+post+with+icon+for+blogger.png" /></a></div>
<div style="text-align: center;">
<span style="font-size: xx-small;"><span><br /></span><b></b></span></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span style="font-size: xx-small;"><span style="font-size: x-small;">kali ini akan memberikan tutorial Cara Memasang Related Post diBawah Posting. P</span></span>ernahkah sobat berpikir bagaimana cara membuat related post agar pembaca/pengunjung <span><label style="cursor: pointer; display: inline ! important; text-decoration: underline; z-index: 0;">blog</label></span> sobat tidak hanya membaca atau melihat posting itu yang mereka cari
saja, nah kalau sobat pernah berpikir cara ini cukup bagus untuk
dipraktekkan
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Langsung saja yah sobat praktekkan caranya :<br />
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
1. Sama seperti biasa sobat Login dulu ke Blogger <span style="font-size: xx-small;">></span> Rancangan (Design) <span style="font-size: xx-small;">></span> Edit HTML <span style="font-size: xx-small;">></span> Centang Pada Tulisan <span><label style="cursor: pointer; display: inline ! important; z-index: 0;">Expand</label></span> Template Widget<br />
2. Kemudian pasang kode berikut di bawah tag <b></head></b><b> </b></div>
<blockquote class="tr_bq" style="height: 200px; overflow: auto;">
<div style="text-align: justify;">
<style type='text/css'> #related-posts { float : left; width :
100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font :
11px Verdana; margin-bottom:10px; } #related-posts .widget {
list-style-type : none; <span><label style="cursor: pointer; display: inline ! important; text-decoration: underline; z-index: 0;">margin</label></span> : 5px 0 5px 0; padding : 0; }
#related-posts .widget h2, #related-posts h2 { font-size : 20px;
font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
#related-posts a { text-decoration : none; } #related-posts a:hover {
text-decoration : none; } #related-posts ul { border : medium none;
margin : 10px; padding : 0; } #related-posts ul li { display : block;
<span><label style="color: blue; cursor: pointer; display: inline !important; text-decoration: underline; z-index: 0;">background</label></span> :
url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFE0722rjIgmoCPdeZbJ6ZYwLKjXoZ3k9De_vPQjlgYTN_MB3QQL6PH3Ys4S7rSzRR7s8HTMIlW0zo9xSSLobodXct527L5azwlNde3bnpxDSXv8DvJXnLMrMVbY7gc_oL_k_JyyAQ00/&quot;)
no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0;
padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px;
line-height : 2em; border-bottom:1px dotted #<b><span style="color: orange;">cccccc</span></b>; } </style> <script src='http://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/><b> </b><span style="font-size: xx-small;"><b> </b></span></div>
</blockquote>
3. Jika sudah, cari <b><data:post.body/></b> (gunakan ctrl + F) lalu pasang kode berikut di bawahnya, jika ditemukan 2 buah kode, simpan di bawah kode yang ke 2<br />
<blockquote class="tr_bq" style="height: 200px; overflow: auto;">
<b:if cond='data:blog.pageType == "item"'><br />
<div id="related-posts"><br />
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#<b style="color: red;">FFFFFF</b>'><b:loop
values='data:post.labels'
var='label'><data:label.name/><b:if cond='data:label.isLast
!= &quot;true&quot;'>,</b:if><b:if
cond='data:blog.pageType == &quot;item&quot;'><br />
<script expr:src='&quot;/feeds/posts/default/-/&quot; +
data:label.name +
&quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;'
type='text/javascript'/></b:if></b:loop> </font><br />
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();<br />
</script><br />
</div></b:if></blockquote>
4. Save Template/Simpan Template.<br />
<br />
Keterangan:<br />
<br />
<ul>
<li>pada tulisan warna merah di atas adalah warna tulisan dari widget ini.</li>
<li>pada tulisan warna <span><label style="color: blue; cursor: pointer; display: inline !important; text-decoration: underline; z-index: 0;">orange</label></span> di atas adalah warna garis </li>
<li>Silakan ubah warna tersebutd dengan warna yang cocok untuk template Anda</li>
</ul>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-19546840383314162282013-07-26T22:03:00.000-07:002013-07-26T22:03:48.243-07:00Cara Memasang Iklan Melayang di Footer/Bawah Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifjOHPTsrJluQSlWJlcV53HIyI6EJIa2deG3-2QBMn0a9s0YkZOFYJGobIOitoRV8jzoAKJ5I8JQDdfcPhHS3A8WR7BNT2qRQmXWJin_6PbnDPQpnmieNPdcVJiBJoBcYc7E-bOgpTtVU/s762/cats.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Memasang Iklan Melayang di Footer/Bawah Blog" border="0" height="66" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifjOHPTsrJluQSlWJlcV53HIyI6EJIa2deG3-2QBMn0a9s0YkZOFYJGobIOitoRV8jzoAKJ5I8JQDdfcPhHS3A8WR7BNT2qRQmXWJin_6PbnDPQpnmieNPdcVJiBJoBcYc7E-bOgpTtVU/s400/cats.jpg" title="Cara Memasang Iklan Melayang di Footer/Bawah Blog" width="460" /></a></div>
<br />
<br />
<br />
<br />
<br />
Untuk mendulang uang ataupun pendapatan tambahan dari dunia blogger, ada
beberapa cara yang bisa kita tempuh, tentu ini akan memakan waktu yang
tak sebentar dan juga tak tergolong mudah untuk dilakukan, diantaranya
adalah affilasi, ppc, iklan mandiri, dan review produk, namun, dari
keempat jalur tadi, kebanyakan blogger lebih memilih ppc dan iklan
mandiri, dengan catatan lebih mudah dan praktis untuk melakukanya.<br />
<br />
Jika anda menggunakan PPC sebagai salah satu ladang untuk berburu<i> income online</i>,
tentu yang ada dibenak anda adalah bagaimana caranya agar banyak orang
meng-klik ikan, karena seperti yang kita ketahui, PPC adalah layanan
dimana publishernya akan dibayar setiap terjadi klik terhadap iklan
advertiser, oleh karena itu, tentunya pertama kita harus memastikan
terlebih dahulu jika trafik blog kita sudah "mumpuni" dan stabil, lalu
kemudian tinggal kita mengatur <i>ad placement</i> dari PPC tersebut, tentunya se-strategis mungkin.<br />
<br />
Lalu dimana <i>ad placement</i> atau penempatan iklan yang baik untuk
PPC? menurut pengalaman saya pribadi, ad placement yang paling ampuh
dalam menekuni bidang PPC adalah floating atau melayang, namun sayangnya sebagian besar media PPC lokal maupun interlokal melarang iklan melayang ini, hanya ada beberapa media PPC yang membolehkanya, seperti IdBlogNetwork dan
Bidvertiser, karena iklan yang mereka tayangkan tidak berdasarkan
keyword, maka dari itu ada baiknya jika anda mengetahui terlebih dahulu <i>rules</i> dari PPC yang anda ikuti.<br />
<br />
Nah, dalam rangka usaha meningkatkan pendapatan online yang berasal dari
Pay-Per-Click, pada kesempatan kali ini saya akan membagikan suatu trik
kepada rekan blogger semuanya tentang bagaimana cara memasang iklan
horizontal atau memanjang di footer atau bagian bawah layar blog,
biasanya iklanya berukuran 468x60, 728x90, 960x60, atau lebih,
tergantung dengan PPC yang anda gunakan. Oh iya sobat, iklan melayang
ini juga sudah dilengkapi dengan tombol close lho, jadi pengunjung yang
merasa risih bisa menutupnya.<br />
<br />
<blockquote class="tr_bq">
<b>Cara Memasang Iklan Melayang di Footer/Bawah Blog</b></blockquote>
<br />
1. Login ke Blogger.<br />
<br />
2. Piih Tata Letak / Layout.<br />
<br />
3. Klik Add / Tambahkan gadget.<br />
<br />
4. Pilih gadget HTML/JavaScript.<br />
<br />
5. Letakkan kode berikut ini kedalamnya.<br />
<br />
<blockquote class="tr_bq">
<span style="background-color: #ea9999;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script></span><br /><br />
<script type='text/javascript'><br />
$(document).ready(function() {<br />
$('img#closed').click(function(){<br />
$('#tuliskancom-float_banner').hide(90);<br />
});<br />
});<br />
</script><br />
<style type='text/css'><br />
div#tuliskancom-float_banner {<br />
bottom: 0;<br />
position: fixed;<br />
width: 100%;<br />
opacity: 0.9;<br />
left: 0;<br />
}<br />
div#tuliskancom-float_banner img{<br />
border:0;<br />
cursor:pointer;<br />
}<br />
</style><br />
<div style='height: 0px;'></div><br />
<div align='center' id='tuliskancom-float_banner' style='height: <span style="background-color: orange;">295</span>px; z-index: 9999;'><br />
<div style='text-align: right; width: <span style="background-color: #93c47d;">336</span>px; height: <span style="background-color: #6fa8dc;">15</span>px;'><br />
<img id='closed'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIXNmwp2bRHZtP1qy2RApDHHXr24ZJawuDeEgvSkSkJOjRdh7vb9PZgFTogNi-KPbbT-9B-3UYSwbLHqtTQwVx6QHwxlLv1TaH6BmUIQXu2fiPMVT21_tWPCB4UhidHj-naPuzV9q5ido/s49/close-button-tuliskancom.png'/></div><br />
<div style='clear: both;'></div><br />
<p><br />
<p><center><br />
<span style="background-color: #ffe599;"> <br /><!-- START CLIENT.YESADVERTISING CODE --><br /><script language="javascript" type="text/javascript" charset="utf-8"><br />cpxcenter_width = 336;<br />cpxcenter_height = 280;<br /></script><br /><script language="JavaScript" type="text/javascript" src="http://ads.cpxcenter.com/cpxcenter/showAd.php?nid=4&amp;zone=23010&amp;type=banner&amp;sid=18291&amp;pid=18081&amp;subid="><br /></script><br /><!-- END CLIENT.YESADVERTISING CODE --><br /> </span><br />
</center></p><br />
</p><br />
</div></blockquote>
<br />
<b>Keterangan</b>:<br />
<ul>
<li>Jika pada template anda sudah ada kode jQuery seperti kode yang berwarna <span style="background-color: #ea9999;">merah</span> diatas (versi berapapun), maka kode merah yang diatas dihapus saja</li>
<li><span style="background-color: orange;">295</span> : tinggi iklan + tinggi tombol close (piksel / px)</li>
<li><span style="background-color: #93c47d;">336</span> : lebar iklan (piksel / px)</li>
<li><span style="background-color: #6fa8dc;">15</span> : tinggi tombol close</li>
<li>Ganti kode yang berwarna <span style="background-color: #ffe599;">kuning</span> dengan kode script iklan anda</li>
</ul>
6. Klik "Save/Simpan", dan selesai.<br />
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br /></div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-14359466683538888242013-07-26T21:51:00.003-07:002013-07-26T21:51:57.802-07:00Cara Pasang Share Lengkap di Bawah Posting Blogger<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0WNEHEF-5T3VSHlfzItOJZIh7oUJ91swQjE_-h6GJORFNzTPJeV8lUyfwYL9ra1P45vkH56gJeTeKxHrEkjKtmxIp44nC5Sj6bwE2JGYmb_p4fMSR3Id9jSlQJ1PKoiRCR1lv_J40KBn/s1600/Cara+Pasang+Share+lengkap+di+bawah+posting+blogger.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0WNEHEF-5T3VSHlfzItOJZIh7oUJ91swQjE_-h6GJORFNzTPJeV8lUyfwYL9ra1P45vkH56gJeTeKxHrEkjKtmxIp44nC5Sj6bwE2JGYmb_p4fMSR3Id9jSlQJ1PKoiRCR1lv_J40KBn/s400/Cara+Pasang+Share+lengkap+di+bawah+posting+blogger.PNG" width="400" /></a></div>
<br />
Oke langsung saja ikuti <i>langkah langkah pasang widget share dibawah posting blogger</i> seperti berikut :<br />
<ul>
<li><div>
Karena judulnya pada <a href="http://toyiq.blogspot.com/" target="_blank">blogger</a> tentu yang sobat harus masuk ke akun blogger sobat dulu.</div>
</li>
<li>Kalau sudah masuk kemudian lanjutkan ke <b>Tamplate</b> dan buka <b>edit HTML</b>.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDV50fg4F0XgAm4WxNL-bSEFZkC80qNpZCf42o3QD-pvU9COcS1plxl4G4Zo9iDNPUzdjEcWE6l-A6CqI4-TVa49gvAiaUHbsTs1u8Z1x-EO-B9ogwwvDFLQ6NWlwbp2TJmC5z1NmQR01U/s1600/Cara+Pasang+Share+lengkap+di+bawah+posting+blogger.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDV50fg4F0XgAm4WxNL-bSEFZkC80qNpZCf42o3QD-pvU9COcS1plxl4G4Zo9iDNPUzdjEcWE6l-A6CqI4-TVa49gvAiaUHbsTs1u8Z1x-EO-B9ogwwvDFLQ6NWlwbp2TJmC5z1NmQR01U/s400/Cara+Pasang+Share+lengkap+di+bawah+posting+blogger.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<br />
<ul>
<li>Selanjutnya centang <b>expand widget</b> untuk memasang widget share. </li>
<li>Lalu cari kode <b><data:post.body/></b> , yang ada dalam kolom tersebut. Agar lebih mudah gunakan <b>CTR + F</b> dan masukkan kode <b><data:post.body/></b> yang ingin dicari sobat tadi.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Iu3dRN2-1F9DhImwn18I0iQrTnLwc5idp21J8Q6AMRmG4Lva24Z6f0VcoOWqLTJl2VGiQYE7V6flWHdEjUh6iohXRVBlTlsthVvVW8CTU7VYBWoir3ekBi3J9WvHFlamAz0AdgpVDv86/s1600/Cara+Pasang+Share+lengkap+di+bawah+posting+blogger.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Iu3dRN2-1F9DhImwn18I0iQrTnLwc5idp21J8Q6AMRmG4Lva24Z6f0VcoOWqLTJl2VGiQYE7V6flWHdEjUh6iohXRVBlTlsthVvVW8CTU7VYBWoir3ekBi3J9WvHFlamAz0AdgpVDv86/s400/Cara+Pasang+Share+lengkap+di+bawah+posting+blogger.PNG" width="400" /></a></div>
<br />
<ul>
<li>Karena ada beberapa kode yang sama usahakan cari kode <b><data:post.body/></b> yang kedua lalu coba copy all script di bawah ini dan pastekan tepat dibawah kode <b><data:post.body/></b>. </li>
</ul>
<center>
<textarea cols="55" name="code" rows="10"><!-- ShareThis Button BEGIN
--> <div class='sharethis_toolbox addthis_default_style '>
<b>Share On:</b> <span class='st_fblike_hcount'
displayText='Facebook Like'/> <span class='st_facebook_hcount'
displayText='Facebook'/> <span class='st_twitter_hcount'
displayText='Tweet'/> <span class='st_googleplus_hcount'
displayText='Google +'/> <center>
<span class='st_tumblr_large' displayText='Tumblr'/> <span
class='st_digg_large' displayText='Digg'/> <span
class='st_linkedin_large' displayText='LinkedIn'/> <span
class='st_stumbleupon_large' displayText='StumbleUpon'/> <span
class='st_pinterest_large' displayText='Pinterest'/> <span
class='st_technorati_large' displayText='Technorati'/> <span
class='st_sharethis_large' displayText='ShareThis'/></center>
</div>
<script type='text/javascript'>var
switchTo5x=false;</script> <script
src='http://w.sharethis.com/button/buttons.js'
type='text/javascript'/> <script
type='text/javascript'>stLight.options({publisher:
"b9f38387-a316-49bb-b119-fec472075cf9"});</script> <!--
ShareThis Button END -->
</textarea></center>
<ul>
<li>Jika sudah terpasang lalu tinggal klik simpan dan lihat hasilnya, mudah kan sob ?? mudah sekali donk pastinya.</li>
</ul>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-52415020005701723252013-07-26T21:46:00.000-07:002013-07-26T21:46:24.183-07:00Situs yang menyediakan fasilitas free sitemap maker<h2 class="date-header">
<span></span></h2>
<div class="post-body entry-content">
<br />
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_yDlIekb91yjCXijJyFCjkUB08EvcxyFKoFxDZeqk41KDXV44MsaX1hZQbfqDehyQmkVLMm3rekqVU-TrBWio73JNk6ZcDV4bu_o5H_x0L4nQCgKtJxQI8L3U_ei0jLukuX_NsmfFKp0/s408/xml_sitemap_11.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_yDlIekb91yjCXijJyFCjkUB08EvcxyFKoFxDZeqk41KDXV44MsaX1hZQbfqDehyQmkVLMm3rekqVU-TrBWio73JNk6ZcDV4bu_o5H_x0L4nQCgKtJxQI8L3U_ei0jLukuX_NsmfFKp0/s400/xml_sitemap_11.jpg" width="465" /></a></div>
Sitemap berfungsi sebagai penunjuk arah bagi search engine ataupun
pengunjung untuk mengetahui link-link yang ada dalam sebuah situs.
Keberadaan sitemap sangat penting bagi SEO sebuah website karena sitemap
juga sering diindeks oleh mesin pencari jika mereka ingin mengindeks
laman kita. Google Webmaster ataupun Bing Webmaster juga sudah memiliki
fasilitas pengindeks sitemap di layanan mereka. Namun kalau kita tidak
tahu bagaimana cara membuat sitemap yang baik dan benar, ujung-ujungnya
kita malah akan merusak sitemap kita. Jika kita tidak mempunyai
pengetahuan tentang cara membuat sitemap lebih baik kita memanfaatkan
layanan free sitemap maker yang banyak tersedia di internet. </div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Di tutorial sebelumnya terkait tentang sitemap yang ada di sini hanya membahas tentang cara memasukkan sitemap/peta situs ke Google Webmaster Tools
yang menggunakan fasilitas Feedburner dari Google, misalnya Blogger.
Berbeda lagi jika kita tidak menggunakan layanan tersebut. Kali ini kita
akan membahas tentang berbagai situs yang menyediakan fasilitas sitemap
gratis bagi para webmaster. Berikut situs-situs yang menyediakan
layanan free sitemap maker :</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
1. <a href="http://www.xml-sitemaps.com/" rel="nofollow" target="_blank">XML Sitemaps</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX9oDydBjzTuBzNfE189h0ygoRdnvMZ1kOvVrOTw9zURoZZy4J7KhHdak9LNACZvnXvaiRpK_1i2qmqpvMCCep-S6dq6j0f33aYLJl4k_w5XNj2iUOmUY8d985iDzeAJ6F0hS89mF33Yk/s1007/Create+your+Google+Sitemap+Online+-+XML+Sitemaps+Generator.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX9oDydBjzTuBzNfE189h0ygoRdnvMZ1kOvVrOTw9zURoZZy4J7KhHdak9LNACZvnXvaiRpK_1i2qmqpvMCCep-S6dq6j0f33aYLJl4k_w5XNj2iUOmUY8d985iDzeAJ6F0hS89mF33Yk/s320/Create+your+Google+Sitemap+Online+-+XML+Sitemaps+Generator.jpeg" width="320" /></a></div>
<div style="text-align: justify;">
XML Sitemaps merupakan salah satu situs yang menyediakan free sitemap
maker bagi para webmaster. Layanan di situs ini dapat digunakan secara
free/gratis, namun ada batasan tertentu. Jika kamu ingin layanan yang
lebih, kamu dapat menggunakan layanan PRO yang berbayar.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
2. <a href="http://www.web-site-map.com/" rel="nofollow" target="_blank">Online XML Sitemap Generator</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiM3AK9Yw0SzQp84BkG5Uvv0IHUCA_0jJKLo8vrGohMkWrCUdkjk7OInvDyb5wOl_RTlleB_iapx8r2SRGrKlJeIhT6C42eATM65d4nTju8jgrW0dihISyTXOUmq6ZBv75N1U5W6k9o9M/s1007/XML+Sitemap+Generator+-+creates+Free+Google+site-maps+online.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiM3AK9Yw0SzQp84BkG5Uvv0IHUCA_0jJKLo8vrGohMkWrCUdkjk7OInvDyb5wOl_RTlleB_iapx8r2SRGrKlJeIhT6C42eATM65d4nTju8jgrW0dihISyTXOUmq6ZBv75N1U5W6k9o9M/s320/XML+Sitemap+Generator+-+creates+Free+Google+site-maps+online.jpeg" width="320" /></a></div>
<div style="text-align: justify;">
Layanan free sitemap maker di situs ini juga gratis digunakan oleh
webmaster, namun terdapat batasan bagi laman yang diindeks sekitar 3500
laman atau saat-saat server sedang overload. Namun begitu, jumlah
tersebut sudah mencukupi bagi website yang tidak terlalu banyak
mempunyai laman di dalamnya.</div>
<div style="text-align: justify;">
</div>
3. <a href="http://www.sitemapdoc.com/" rel="nofollow" target="_blank">SitemapDoc - XML Sitemap Generator and Editor</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFdrf4Wz1pPcj249JE36B_oiHUTFs8n3k4MFzSjvJcrThwKsX87YfrmXo4BTr5q2hxwNrYiZQNZTmnXxBqladeZvvi3FSJQ3pDAG12ffoq53G9n5G2JA8aTNy61Q6mPD631jK0wJzxDos/s1007/XML+Sitemap+Generator,+Editor+++Keyword+Analyzer+-+XML+Sitemaps+Online.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFdrf4Wz1pPcj249JE36B_oiHUTFs8n3k4MFzSjvJcrThwKsX87YfrmXo4BTr5q2hxwNrYiZQNZTmnXxBqladeZvvi3FSJQ3pDAG12ffoq53G9n5G2JA8aTNy61Q6mPD631jK0wJzxDos/s320/XML+Sitemap+Generator,+Editor+++Keyword+Analyzer+-+XML+Sitemaps+Online.jpeg" width="320" /></a></div>
<div>
Layanan free sitemap maker yang ada di situs ini dapat disesuaikan dengan konten di website kita. Selain page/laman website<span style="text-align: justify;">,</span> free site maker di situs ini juga dapat mengindeks HTML Map<span style="text-align: justify;">,</span> RSS dan Gambar. </div>
<div>
</div>
4. <a href="http://www.xmlsitemapgenerator.org/" rel="nofollow" target="_blank">XmlSitemapGenerator</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-BNG6OWYmmEdfgGPw4ilNqv-VhtJZeOB4iOPQla02-ZyNyZpH0h19BAQ2Kbg3nrM4WyPKGxo4JAXCHotde4vrbULgX0Bpzrq0i11Cw56Og638Na3qJGvYtXPYkzlH5BAYlsASw41FntM/s1007/XmlSitemapGenerator.org+-+Free+online+sitemap+generator.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-BNG6OWYmmEdfgGPw4ilNqv-VhtJZeOB4iOPQla02-ZyNyZpH0h19BAQ2Kbg3nrM4WyPKGxo4JAXCHotde4vrbULgX0Bpzrq0i11Cw56Og638Na3qJGvYtXPYkzlH5BAYlsASw41FntM/s320/XmlSitemapGenerator.org+-+Free+online+sitemap+generator.jpeg" width="320" /></a></div>
<div>
Situs ini mampu membuat sitemap gratis yang compatible bagi Google Yahoo
Bing dan Ask jadi lebih banyak mudah untuk masuk ke berbagai search
engine besar. Kita dapat memilih sendiri jenis laman yang akan diindeks
misalnya html<span style="text-align: justify;">,</span> shtml<span style="text-align: justify;">,</span> php dan lainnya.</div>
<div>
</div>
<div>
5. <a href="http://sitemapxml.net/" rel="nofollow" target="_blank">Sitemap XML</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8PW7OVVwQwh-TEeu9X3piRIUth52VnJJmW1KX8HrXpc1ZFZbLu1GOIL7D86JTS-oSCphM-PSxvfWlZM5p0lXubrNUXxjtTijKulSb6fgCPBsrHwv7P8cfh7sz1S5Qy2-XccJ6mkXh0gM/s1007/Free+XML+Sitemap+Generator+Tool,+Google+-+Yahoo,+ROR,+TEXT+Site+Map+Download.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8PW7OVVwQwh-TEeu9X3piRIUth52VnJJmW1KX8HrXpc1ZFZbLu1GOIL7D86JTS-oSCphM-PSxvfWlZM5p0lXubrNUXxjtTijKulSb6fgCPBsrHwv7P8cfh7sz1S5Qy2-XccJ6mkXh0gM/s320/Free+XML+Sitemap+Generator+Tool,+Google+-+Yahoo,+ROR,+TEXT+Site+Map+Download.jpeg" width="320" /></a></div>
<div>
Layanan di situs ini juga tidak kalah dengan situs free sitemap maker
lainnya diatas. Untuk membuat sitemap di situs ini sangat mudah<span style="text-align: justify;">,</span> kita tinggal isi kolom yang tersedia dengan benar. Namun jumlah laman yang diindeks sekitar 1000 laman<span style="text-align: justify;">,</span> lebih kecil dari situs-situs diatas.</div>
<div>
</div>
<div>
6. <a href="http://www.w-global.com/index.php/tools-gadgets/online-sitemap-generator" rel="nofollow" target="_blank">XML Sitemap Generator</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd7CNT1gCHiao0pTaPC_xXSKyYNaJFkJ29DmZDYrsr3oGWT5ChUufcrTNmYBRAxBRbXgNWfrqVEzZqCtZ7l2RaMA-TOMlJNqIg-dPHl4lScJaYDXyQ-R4ONMNQndXI0Rt-04KOT7BOMQw/s1007/Free+Unlimited+Page+Google+XML+Sitemap+Generator.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd7CNT1gCHiao0pTaPC_xXSKyYNaJFkJ29DmZDYrsr3oGWT5ChUufcrTNmYBRAxBRbXgNWfrqVEzZqCtZ7l2RaMA-TOMlJNqIg-dPHl4lScJaYDXyQ-R4ONMNQndXI0Rt-04KOT7BOMQw/s320/Free+Unlimited+Page+Google+XML+Sitemap+Generator.jpeg" width="320" /></a></div>
<div>
Layanan yang disediakan oleh W Global ini juga termasuk gratis.
Fasilitas di situs ini dapat mengindeks laman tanpa ada batasan berapa
jumlah laman yang di indeks (unlimited) namun jika kita ingin mengindeks
video atau gambar kita harus menjadi member di situs tersebut. Banyak
juga perbedaan fasilitas free dan member<span style="text-align: justify;">,</span> namun untuk fasilitas free saja sudah bisa dibilang bagus bagi webmaster.</div>
<div>
</div>
<div>
7. <a href="http://writemaps.com/" rel="nofollow" target="_blank">Write Maps</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQkAXrIVz4wubv2lA3lSAK1MIQBOmYoJX-iPysQ6-1yDDwfHtJnyAmvnlxsFG3wAvZx1gwyAGSYEM_-rpC3dr-ruBuj5-yqVdiqzMB7pIKQ5nCI3p2IizhPXtk1TFtn-WfOuIupuzGhgg/s1007/WriteMaps+Site+Map+Application-+Sign-up.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQkAXrIVz4wubv2lA3lSAK1MIQBOmYoJX-iPysQ6-1yDDwfHtJnyAmvnlxsFG3wAvZx1gwyAGSYEM_-rpC3dr-ruBuj5-yqVdiqzMB7pIKQ5nCI3p2IizhPXtk1TFtn-WfOuIupuzGhgg/s320/WriteMaps+Site+Map+Application-+Sign-up.jpeg" width="320" /></a></div>
<div>
Situs ini juga menyediakan fasilitas free sitemap maker<span style="text-align: justify;">,</span> namun kita harus menjadi salah satu member disitus ini dengan mengisi username dan password. Walaupun bergitu<span style="text-align: justify;">, untuk menjadi member disitus ini sangat mudah yaitu dengan mengisi informasi sederhana terkait akun yang ingin kita buat.</span></div>
<div>
</div>
<div>
Walaupun sederhana<span style="text-align: justify;">,</span> namun
adanya sitemap di website kita sangat bermanfaat terutama di mata search
engine. Berikut penjelasan lain tentang sitemap yang dapat dijadikan
referensi. </div>
</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-60560307216458432532013-05-05T10:39:00.000-07:002013-05-05T10:39:01.451-07:00Cara membuat Menu Tab View keren dengan Efek jQuery<h2>
<a href="http://blogcapoenk.blogspot.com/2013/03/cara-membuat-menu-tab-view-keren-dengan.html" rel="bookmark" title="Permanent Link to Cara membuat Menu Tab View keren dengan Efek jQuery">Cara membuat Menu Tab View keren dengan Efek jQuery</a>
</h2>
<div class="data">
<span class="author">Posted by : yuga irgi</span>
<span class="clock">Selasa, 26 Maret 2013</span>
</div>
<div class="pagepost">
<div class="cover">
<h1 class="post-title entry-title">
</h1>
<div class="post-header">
</div>
<div class="post-body entry-content" id="post-body-5086371653744709549" itemprop="articleBody">
<div style="float: left; margin-left: 5px;">
</div>
<div style="float: left; margin-left: 5px;">
<ins style="border: none; display: inline-table; height: 280px; margin: 0; padding: 0; position: relative; visibility: visible; width: 336px;"><ins id="aswift_1_anchor" style="border: none; display: block; height: 280px; margin: 0; padding: 0; position: relative; visibility: visible; width: 336px;"></ins></ins></div>
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara membuat Menu Tab View keren dengan Efek jQuery" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhihpbgruCfjVonXxqgE94FOhTyaafeMsRBtgbnnpRJpHtMKQJR1syn22KaMFTuQKn2n4CSaTwgvnBfW0cwuzfdEspxfeIGElZvRRylsE4fqMuQjbakjoMgxj-JOQz5aNv472_DumRLdqo/s320/Menu+Tab+View.PNG" title="Cara membuat Menu Tab View keren dengan Efek jQuery" width="319" /></div>
<br />
<i style="font-weight: bold;">InfoDari</i> - <i><u><b>Cara membuat Menu Tab View keren dengan Efek jQuery</b></u></i><br />
<i><u><b><br /></b></u></i>
Selamat Pagi Sahabat Blogger. Pada kesempatan kali ini saya posting
sebuah Tutorial Blog yang sebelumnya di Request oleh sahabat Blogger
kita pada beberapa Hari yang lalu.<br />
Yaitu <u style="font-weight: bold;">Cara membuat Menu Tab View keren dengan Efek jQuery</u>.<br />
<a href="http://www.blogger.com/blogger.g?blogID=1916474876513816962" name="more"></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RrrMI3aMBKk1BTWf76A5N1YI-wC34K6TPDJKQ-XGIX86VkYYdVWhbLunz_WxV0-6EyOgsBIaWuBPPZx2LvJTmtPDzYkwplZ220H9_yrsf_waHrrFEONbIyojpJz_MexLgb0xyqSZP6k/s1600/request+tab+view.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara membuat Menu Tab View keren dengan Efek jQuery" border="0" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RrrMI3aMBKk1BTWf76A5N1YI-wC34K6TPDJKQ-XGIX86VkYYdVWhbLunz_WxV0-6EyOgsBIaWuBPPZx2LvJTmtPDzYkwplZ220H9_yrsf_waHrrFEONbIyojpJz_MexLgb0xyqSZP6k/s400/request+tab+view.PNG" title="Cara membuat Menu Tab View keren dengan Efek jQuery" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Disini saya akan memberikan cara membuat <u><i>Menu Tab View </i></u>seperti yang ada di Blog saya ini.<br />
Atau lihat gambar di atas. Kurang lebih nya seperti itulah tampilannya nanti.<br />
<br />
Cara membuat Menu Tab View keren dengan Efek jQuery:<br />
<br />
<ul style="text-align: left;">
<li>Buka Dasbor Blog anda.</li>
<li>Pilih menu tata Letak</li>
</ul>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara membuat Menu Tab View keren dengan Efek jQuery" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB_UIBcyoOsl85P3FbWAy_3Z7ivM6oHicVfYdSCCwoQv0xE5HB0CB1GVYhosuoaeTXthuLXX9Thha19aq8Jjo41_9-iufCsXhmh0l2vEeVjefUjCCk4h8i1ERXCn6udDTctwtMMxTYOys/s320/tata+letak.png" title="Cara membuat Menu Tab View keren dengan Efek jQuery" width="194" /></div>
<br />
<br />
<ul style="text-align: left;">
<li>Tambah Widget HTML/JavaScript.</li>
<li>Kemudian Copy Paste Kode dibawah ini kedalam Widget HTML/JavaScript tersebut:</li>
</ul>
<br />
<blockquote class="tr_bq">
<style type="text/css"><br />
.tabber {<br />
padding: 0px !important;<br />
border: 0 solid #bbb;<br />
}<br />
.tabber h2 {<br />
float: left;<br />
margin: 0 1px 0 0;<br />
font-size: 12px;<br />
padding: 3px 5px;<br />
border: 1px solid #bbb;<br />
margin-bottom: -1px;<br />
overflow: hidden;<br />
position: relative;<br />
background: #0000FF;<br />
cursor:pointer;<br />
-moz-border-radius:5px 5px 0 0;<br />
border-radius:5px 5px 0 0;<br />
}<br />
html .tabber h2.active {<br />
background: #000000;<br />
border-bottom: 1px solid #fff;<br />
}<br />
.tabber .widget-content {<br />
border: 1px solid #bbb;<br />
padding: 10px;<br />
background: #fff;<br />
clear:both;<br />
margin:0;<br />
}<br />
.codewidget, #codeholder {<br />
display:none; {<br />
</style> <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><br />
<script type="text/javascript"
src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#codeholder').bloggerTabber ({<br />
tabCount : 3<br />
});<br />
});<br />
</script><!-- Jangan hapus kode dibawah, agar widget bisa
berfungsi --><div id='codeholder'><a
href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html"
target="_blank"></a></div></blockquote>
<div>
<br />
<ul style="text-align: left;">
<li>Simpan.</li>
</ul>
</div>
<div>
<i>Catatan: Untuk menampilkan Menu seperti Popular Post, Category,
Random Post dll. Silahkan anda letakkan Widget widget tersebut dibawah
Widget <b>Menu Tab View </b>ini.</i></div>
<div>
<i><br /></i></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara membuat Menu Tab View keren dengan Efek jQuery" border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB8BrEyQlw0_nwPX8aYB9wYQsAhdordSQfWOP-4lFdEEK1y010W8rAz2ImptEQSHUTh3OQO02W3PFIclMV2tFE5mRZZ2iiLFn-4p6wfMYW7SMLg2EEx_nkSHNQyLrj4lFqwa9Cl6zMJPs/s400/Menu+Tab+View.PNG" title="Cara membuat Menu Tab View keren dengan Efek jQuery" width="400" /></div>
</div>
</div>
</div>
</div>
<br />Read more: <a href="http://blogcapoenk.blogspot.com/2013/03/cara-membuat-menu-tab-view-keren-dengan.html#ixzz2SROzqE7u" style="color: #003399;">http://blogcapoenk.blogspot.com/2013/03/cara-membuat-menu-tab-view-keren-dengan.html#ixzz2SROzqE7u</a><br />linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-57787926304309518892013-04-09T01:31:00.002-07:002013-05-05T07:13:06.881-07:00Membuat Text Box Dengan Efek Hover dengan CSS 3 <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIb835mJ8dYK75zWhse3t_8ioE6aHUzpWoQYrZrQTdCkLkFqc9xmitCmKvNEvlhqgzPoNb70lBIknT21gB4RZ-GU8twlBoQSp-Khv4OWdfby3C1RmwZSul83SirIMcfGPLrnPpw996VsU/s1600/655_343846202403387_2028000160_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIb835mJ8dYK75zWhse3t_8ioE6aHUzpWoQYrZrQTdCkLkFqc9xmitCmKvNEvlhqgzPoNb70lBIknT21gB4RZ-GU8twlBoQSp-Khv4OWdfby3C1RmwZSul83SirIMcfGPLrnPpw996VsU/s320/655_343846202403387_2028000160_n.jpg" width="244" /></a></div>
<br />
<br />
<br />
<br />
<br />
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;">Setelah
beberapa hari gak posting karena baru pengisian jadwal baru untuk
semester 4 yang merepotkan dikarenakan dalam masa transisi kurikulum
baru dan Pada kesempatan kali ini saya akan posting mengenai Membuat
Text Box Dengan Efek Hover dengan CSS 3 Ok ngak perlu panjang lebar
langsung saja simak</span></span><br />
<br />
<br />
<div style="line-height: 18.1875px;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;"> Seperti biasa Login ke Akun <a href="http://www.blogger.com/" style="text-decoration: none;" target="_blank">Blogger</a> sobat</span></span></div>
<div style="line-height: 18.1875px;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;">Klik Template >> Klik Edit
HTML >> Jangan Lupa Centang Expand Widget Template >> Cari
kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas
kode ]]></b:skin><br />(gunakan CTRL + F untuk mempermudah)</span></span></div>
<div style="line-height: 18.1875px;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></span></div>
<div style="line-height: 18.1875px;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;"><i>.KTboxmessage{color:
white;background-color: black;width: 500px;margin: 5px 60px;padding:
20px 20px 20px 20px;border: 2px dotted lightgrey;border-radius:
10px;box-shadow: -1px -1px 12px 2px gainsboro;transition:
background-color .777s;-webkit-transition: background-color
.777s;-moz-transition: background-color .777s;-o-transition:
background-color .777s;-ms-transition: background-color
.777s;}.KTboxmessage:hover{background-color: CornflowerBlue
;}.KTboxmessage:active{background-color: darkgreen ;}</i></span></span></div>
<div style="line-height: 18.1875px;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></span></div>
<div style="line-height: 18.1875px;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;"> Klik Save</span></span></div>
<br />
<br />
<br />
<div style="line-height: 18.1875px;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;"> Klik Save<br />Keterangan :<br />Untuk Penulisan do dalam postingan atau widget gunakan kode :</span></span></div>
<div style="line-height: 18.1875px;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></span></div>
<div style="line-height: 18.1875px;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif;"><div
class="KTboxmessage" style="font-family: &quot;Courier
New&quot;,Courier,monospace;"><span style="color: red;">LetakanTulisan Atau Kode
Disini</span></div></span></span></div>
<div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;">
<br /></div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-59260739221295013602013-04-09T01:25:00.000-07:002013-05-05T07:13:31.049-07:00Cara Membuat Daftar Link Teman Berjalan<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn6QpLgV8fYhG7lTmibxYVQEre6KIKZN3cFT84B5sR9yct6B5gOXBtrh7ezrLI1TKb5JzrfvA0FX2b-boWAKPhLqBSH2H_5woVESTSWq3ZAvuNU5DYx3TnS5bdwwaos67BVbKy4Vdp8Z8/s1600/michelle-marsh-1024x768-25540.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn6QpLgV8fYhG7lTmibxYVQEre6KIKZN3cFT84B5sR9yct6B5gOXBtrh7ezrLI1TKb5JzrfvA0FX2b-boWAKPhLqBSH2H_5woVESTSWq3ZAvuNU5DYx3TnS5bdwwaos67BVbKy4Vdp8Z8/s320/michelle-marsh-1024x768-25540.jpg" width="320" /></a></div>
<br />
<br />
<ul style="text-align: left;">
<li>Login ke Blogger</li>
</ul>
<ul style="text-align: left;">
<li>Pergi Ke Tata Letak >> Tambah Gaget >> HTML/Java Script</li>
</ul>
<ul style="text-align: left;">
<li>Copy Kode Di Bawah Ini lalu Pastekan ke kotak script yg tersedia.</li>
</ul>
<div style="border: 1px solid #000000; height: 130px; overflow: auto; padding: 10px; width: 450px;">
<marquee align="center" direction="up" height="200"
onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2"
width="210"><br />
<br />
<a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link1</span></a><br />
<br /><a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link2</span></a><br />
<br /><a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link3</span></a><br />
<br /><a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link4</span></a><br />
<br /><a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link5</span></a><br />
<br />
</marquee></div>
<br />
Jika Sobat ingin menambahkan lagi copy kode berikut sebelum kode </marquee><br />
<br />
<div style="border: 1px solid #000000; height: 100px; overflow: auto; padding: 10px; width: 470px;">
<br /><a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link6</span></a><br />
<br /><a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link7</span></a><br />
<br /><a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link8</span></a><br />
<br /><a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link9</span></a><br />
<br /><a href="<span style="color: red;">URL Blog Teman</span>" rel="dofollow"><span style="color: red;">Link10</span></a></div>
<br />
Simpan Dan Hasilnya linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com0tag:blogger.com,1999:blog-2368032492004307855.post-35563769276086934362013-04-08T22:47:00.002-07:002013-05-05T07:52:24.003-07:00Cara Mudah Membuat Gambar Berdampingan atau Sejajar di Blog <h3 class="post-title entry-title" itemprop="name">
</h3>
<div class="post-header">
</div>
<div class="post-body entry-content" id="post-body-5516154302191205275" itemprop="description articleBody">
<table align="center" style="height: 145px; width: 496px;"><tbody>
<tr>
<td style="text-align: center;"><img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLRK2gOfu416giUtrN3tjJbiNfGQQYg8FmBnmlP2c5xJV92BcLYt5btQ24vjyfiireQjBQEgT9vQvoUSS4AYun4u40W_evl0ZRoTAJFx3Jx4DFw6zCBt0a501AN4fF14-taCXvTSSmkcb/s1600/pengunjung+blog.jpg" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLRK2gOfu416giUtrN3tjJbiNfGQQYg8FmBnmlP2c5xJV92BcLYt5btQ24vjyfiireQjBQEgT9vQvoUSS4AYun4u40W_evl0ZRoTAJFx3Jx4DFw6zCBt0a501AN4fF14-taCXvTSSmkcb/s200/pengunjung+blog.jpg" width="200" /><img alt="http://4.bp.blogspot.com/-kRTbFK4beho/TsKQfj_z8HI/AAAAAAAAAeg/d5JAYPrRgMs/s1600/tutorial+blog+terbaik.jpg" height="122" src="http://4.bp.blogspot.com/-kRTbFK4beho/TsKQfj_z8HI/AAAAAAAAAeg/d5JAYPrRgMs/s200/tutorial+blog+terbaik.jpg" width="200" /></td>
<td style="text-align: center;"><br /></td>
</tr>
</tbody></table>
<div style="font-family: Georgia,"Times New Roman",serif;">
Bagi Kamu yang bingung bagaimana cara Membuat Gambar Berdampingan atau
Sejajar di Blog? nah kali ini Saya akan share caranya. Membuat Gambar
Berdampingan atau Sejajar di Blog sangat diperlukan di blog karena dapat
mempercantik blog dan juga dapat menghemat ruang di blog, Kamu bisa
menempatkan gambar tersebut di sidebar maupun diposting ataupun disebuah
laman, dan Kamu juga bisa menempatkan sebuah widget berdampingan,
seperti rank alexa blog Saya dan Histats Saya letaknya berdampingan atau
sejajar.<br />
<a href="http://www.blogger.com/blogger.g?blogID=2368032492004307855" name="more"></a></div>
<div style="font-family: Georgia,"Times New Roman",serif;">
Untuk caranya ikuti tutorial dibawah ini : </div>
<ol style="font-family: Georgia,"Times New Roman",serif;">
<li>Log in ke Blogger Kamu</li>
<li>Lalu Pilih tata letak, lalu klik tambah gadget</li>
<li>Pilih dan klik html/javascript</li>
<li>Lalu Masukan kode dibawah ini :
</li>
<div style="border: 1px solid #000000; height: 100px; overflow: auto; padding: 5px; width: auto;">
<table><tr><br />
<td><span style="color: blue;">Url Widget atau Gambar Anda 1</span></td><br />
<td><span style="color: blue;">Url Widget atau Gambar Anda 2</span></td><br />
<td><span style="color: blue;">Url Widget atau Gambar Anda 3</span></td><br />
</tr></table> </div>
<br />Keterangan :<br /><ul>
<li>Ganti yang berwarna <span style="color: blue;">biru</span> dengan url gambar atau widget</li>
<li>Jika Kamu ingin sejajar lebih dari tiga, tinggal tambahkan aja lagi yang nomor satu dibawah nomor tiga, dst,,,</li>
</ul>
<li>Mudahkan, Selamat Mencoba :</li>
</ol>
</div>
linda marlinahttp://www.blogger.com/profile/16217993024907562368noreply@blogger.com2