Cara Membuat Efek Bayangan Pada Gambar dalam Blog

Membuat efek bayangan pada gambar dalam postingan blog. Blog dengan adanya gambar di dalam postingan tentu memberikan nuasa keramahan dan keiindahan serta enak dipandang mata. Maka dalam membuat postingan blog jangan lupa dengan membuat gambar. Selain untuk keindahan blog juga sangat pentinga sekali untuk kepentingan SEO blog.

Membuat efek bayangan pada gambar akan membuat blog semakin cing caww :). Maka jangan lupa untuk membuat efek shadaw atau efek bayangan pada gambar.

Cara Membuat Efek Bayangan Pada Gambar

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin>
6. Jika sudah ketemu taruh kode berikut di atasnya:

.drop-shadow img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
7. Cari kode <data:post.body/> lalu ganti kode tersebut dengan kode berikut:
<div class='drop-shadow'><data:post.body/></div>
8. Jangan lupa Simpan template jika sudah selesai.

loading...

0 blogger-facebook:

Bagaimana Cara Membuat Widget Share Horizontal dengan CSS

Cara Membuat Widget Share Horizontal dengan CSS | Pada postingan sebelumnya kita telah membahas tentang cara membuat menu horinzontal dengan css, kali ini kita masih bermain dengan CSS, tetapi bukan untuk membuat menu lagi, melainkan kita akan belajar blogging tentang cara membuat widget share horizontal dengan CSS.

OK, Bagaimana Cara Membuat Widget Share Horizontal dengan CSS ? Sebelumnya, sobat tahukan apa itu widget share tersebut, widget ini adalah sebagai fasilitas yang memudahkan user atau pengunjung blog kita untuk mensharing artikel yang kita buat. Tapi bentuk nya bukan vertikal, melainkan horizontal. Untuk lebih jelas tentang widget share horizontal ini, mari llihat SCREEn Short berikut ini.
Membuat Widget Share Horizontal dengan CSS

Cara Membuat Widget Share Horizontal dengan CSS


1. log in ke blogger.com
2. masuk ke add gadget
3. ambil yang HTML/JavaScript
4. Salin kode css berikut ini
<style>
#sosial{
background:#fff;
border:solid 1px #ddd;
padding:10px;
height:auto;
width:100%;
border-radius:5px;
font-family: Courier New, Courier, monospace;
font-size:15px;
color:#000;
letter-spacing:-1px;
position:fixed;
bottom:0;
left:0;
z-index:999;
}
#sosial li{
list-style:none;
line-height:25px;
display:inline;
padding:15px;
}
#sosial a{
color:#000;
text-decoration:none;
}
#sosial .facebook{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://www.insidefacebook.com/wp-content/themes/inside-facebook/img/icons/facebook_16.png)no-repeat left;
}
#sosial .facebook:hover{
background:#3B5998;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
#sosial .subs a:hover, #sosial .gplus a:hover, #sosial .facebook a:hover{
color:#fff;
}
/* Twitter */
#sosial .twitter{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://asiancorrespondent.com/wp-content/themes/asiancorrespondent/images/small_twitter.png)no-repeat left;
}
#sosial .twitter:hover{
background:#51C9D4;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
/* Google Plus */
#sosial .gplus{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://mattleifer.info/wordpress/wp-content/themes/coraline-child/images/google-plus-logo.png)no-repeat left;
}
#sosial .gplus:hover{
background:#DB3636;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
/* Subscribe */
#sosial .subs{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://cdn2.iconfinder.com/data/icons/feedicons-v2/subscribe_16.png)no-repeat left;
}
#sosial .subs:hover{
background:#EA7E37;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
/* Youtube */
#sosial .youtube{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(https://images.hanover.edu/www/site/college-youtube.png)no-repeat left;
}
#sosial .youtube:hover{
background:#950000;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
/* Yahoo*/
#sosial .yahoo{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://www.findinternettv.com/images/yahoo_16.png)no-repeat left;
}
#sosial .yahoo:hover{
background:#72108A;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
#sosial .yahoo a:hover{
color:#fff;
}
/* Stumbleupon */
#sosial .stumbleupon{
padding-left:20px;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
background:url(http://www.johnrutter.com/wp-content/themes/johnrutter/images/16x16/stumbleupon.png)no-repeat left;
}
#sosial .stumbleupon:hover{
background:#5CC04F;
-moz-transition:all 0.5s ease 0s;
-webkit-transition:all 0.5s ease 0s;
-o-transition:all 0.5s ease 0s;
-ms-transition:all 0.5s ease 0s;
transition:all 0.5s ease 0s;
}
</style>
<div id='sosial'>
<li class='facebook'><a href='http://www.facebook.com/FahmiSetiawand' target='_blank'>Facebook</a></li>
<li class='twitter'><a href='http://www.twitter.com/DiaryFakta' target='_blank'>Twitter</a></li>
<li class='gplus'><a href='https://plus.google.com/u/0/106878855473022374434' target='_blank'>Google</a></li>
<li class='subs'><a href='http://alkian.blogspot.com/atom.xml' target='_blank'>Subscribe</a></li>
<li class='youtube'><a href='#'>Youtube</a></li>
<li class='yahoo'><a href='#'>Yahoo!</a></li>
<li class='stumbleupon'><a href='#'>Stumbleupon</a></li>
</div>
5. Save/SIMPAN
6. Lihat apa yang terjadi :D

Demikianlah Cara Membuat Widget Share Horizontal dengan CSS, semoga bermanfaat untuk kita semuanya. terutama anda penggila blog =))

loading...

0 blogger-facebook:

Cara Membuat Menu Horizontal Dengan CSS

Cara Membuat Menu Horizontal Dengan CSS | Kali ini kita akan belajar blog tentang cara membuat menu horizontal dengan CSS. Sobat pada tahukan apa itu menu horizontal. Menu ini adalah menu yang tampil secara horizontal diatas header blog kita, bagi kita yang memakai blogspot, dengan menu ini maka blog kita akan sedikit nampak profesional. Hee, gimana ... mantap kan, maka kali ini akan belajar Bagaimana Cara membuat menu horizontal itu.

OK, untuk sobat yang penasaran bagaimana bentuk menu horizontal itu, maka sobat bisa melihat pada screen short berikut ini.

Cara Membuat Menu Horizontal Dengan CSS

Bagaiamana? menarikkan, OK agar tidak membuang-buang waktu mari kita langsung mempelajari cara membuat menu horizontal dengan CSS.

Langkah-langkah membuat menu horizontal dengan CSS

1. Log in ke http://blogger.com/
2. Kemudian sobat klik tata letak -> Tambah gadget -> Pilih HTML/JavaScript
3. Salin dan kopi LUWAK kode CSS berikut ini

<style type="text/css">

/* Menu horizontal untuk Blogger http://tgkboy.blogspot.com/ */

div.topbar {
height: 16px;
background: #e16031;
}

ul.claybricks {
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
}

ul.claybricks li {
display: inline;
}

ul.claybricks li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}

/* http://tgkboy.blogspot.com */

</style>
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">tgkboy</a></li>
</ul>
4. Pastekan ke gadget tadi yang HTML/JavaScript
5. Jangan lupa save
6. Lihat Apa yang terjadi .. :D

Selamat mencoba untuk Cara Membuat Menu Horizontal Dengan CSS. Good luck

loading...

9 blogger-facebook:

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

How to Prevent Acne

loading...

0 blogger-facebook:

Cara Cek Nomor Hp Sendiri

Cara Cek Nomor Hp Sendiri | Anda sering kehilangan nomor hp, artinya anda pernah lupa nomor hp anda sendiri, ini kebiasaan terjadi pada orng yang barusaja menggantikan nomor hpnya, seringkali kita ingin tahu berapa nomor kita, tapi lupa, mau kirim SMS pun tidak ada pulsa, terus bagaimana cara mengeceknya, agar kita bisa kembali mengetahui nomor hp kita.
Cara Cek Nomor Hp Sendiri
Cara cek nomor hp sendiri ini saya peruntuk buat kawan-kawan semuanya yang ingin mengetahuinya. Semoga artikel Cara Cek Nomor Hp sendiri ini bermanfaat.

Cara Cek Nomor Hp Sendiri


Untuk Operator Indosat
ketik *777*8# lalu call

Untuk Operator Telkomsel :
ketik *808# lalu panggil atau klik ok

Untuk Operator XL
*123*22*1*1#ok atau yes atau tombol call

Untuk Operator Axis
*2#ok atau yes atau tombol call


Untuk Operator 3 (Three)
*998#ok lalu panggil atau klik ok


FLEXI, ESIA, StarOne, FREN dan SMART
Pasangkan kartu Simcard di HP Nokia,:
Tekan *3001#kode pengaman# .
Contoh : *3001#12345# tunggu sampai keluar Menu, pilih NAM1 kemudian geser kebawah pilih “Own number (MDN)”.

loading...

0 blogger-facebook:

Bagaimana Cara BackUp Template Blogspot

Bagaimana cara backup template blogspot, mungkin ini merupakan salah satu pertanyaan yang selalu muncul dan timbul dalam benak sobat blogspot yang masih pemula. Sebenarnya blogger menyediakan fasilitas backup template, ini maksudnya adalah agar template yang kita utak atik atau kita modifikasi, suatu saat nanti kalau terjadi kerusakan atau error, kita bisa kembali meng upload template yang telah back up tadi, jadi tidak terjadi kesalahan yang tidak di inginakan.

Cara backup template blogspot sebenarnya sangat simple sekali, anda hanya butuh beberapa langkah saja untuk membackup nya, kemudian selesai. dan anda punya data backupnya, biasanya backup template ini dalambentuk XML.

OK, langusng saja kita simak tutorial simple ini dibawah ini.

Bagaimana Cara backup template blogspot

1. Log in dulu dong ke blogspot sobat2 :)
2. Kemudian pilih Layout, masuk ke EDIT HTML
3. kemudian anda akan melihat tulisan yang kayak gini "before editing your template, you may want to save a copy of it". Download Full Template > , klik yang ada tulisan Download Full Template, terus simpan file tersebut, biasanya file dalam format xml.
4. Nah, begitu aja, mudah kan,,,
Kemudian kalau anda ingin mengupload kembali template yang anda back up tinggal upload di EDIT HTML nya. selamat blogging.

Pertanyaan Bagaimana cara backup template blogspot pun telah terjawab untuk anda-anda semuanya, semoga aja ni bermanfaat for all. keep blogging and sharng

loading...

0 blogger-facebook:

Cara Membuat Popular Post bergerak pada blogspot

Cara membuat popular post bergerak | Ini menjadi hal yang menarik bagi saya penulis blog ini pada postingan ini, kenapa? Tadi saya jalan2 alis blog walking kesana kemari dan melihat sebuah blog dengan widget popular postnya bisa bergerak sesuai dengan scroll mouse, popular postnya bergerak naik turun, pokoknya manis dech, dan mantap sangat, maka pada kali ini saya ingin berbagi Cara membuat popular post bergerak keatas post ini untuk sahabat-sahabat blogspot semuanya.

Sebenarnya cara membuat popular post memang sudah ada dan disediakan oleh blogger sendiri, namun masih kurang maknyos, karena bentuk dan motidnya yang biasa-biasa saja, tidak bisa bergerak naik turun :). disini kita akan mengulas tentang cara membuat popular post bergerak. ayo kita simak dengan seksama.

Berikut langkah-langkah atau cara membuat popular post bergerak keatas


1. Login ke blog dulu, kemudian anda masuk ke DESAIN --> TATA LETAK


2. Sudah! kemudian tambah widget = klik gadget
3. Pilih entri popular, centang semua kotak
4. Simpan/SAVE

Apabila Gadget sudah terpasang kemudian klik Desain-Template yang posisinya dibawah Tata Letak. Kemudian klik Edit HTML, jangan lupa centang Expand widget.

Setelah langkah diatas, kemudian selanjutnya Cara membuat popular post bergerak pada blogspot adalah dengan mencari kode berikut:

Sobat Cari kode berikut:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>


Sudah ketemu, kemudian letakkan kode berikut setelah kode diatas.

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>


Setelah itu cari dibawahnya lagi kode </ul>, dan masukan kode dibawah ini tepat sebelum/diatas kode </ul> tersebut.

</marquee>

LIHAT HASIL PERPADUAN KODENYA, SEPERTI DIBAWAH INI

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if></b:if>
</li> </b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>


Kalau anda menggantikan tinggi gadget, silakan anda gantikan kode warna hijau diatas. Silakan anda ber expressi, semoga berhasil. Untuk selanjutnya silakan kita diskusi dibawah ini. Thank

loading...

44 blogger-facebook: