Home All posts

Monday, December 3, 2012

Situs Edit Foto Online Terbaru

✔ Jaringan Share Comment

Pada postingan kali ini yang ingin saya share adalah kumpulan Situs Edit Foto Online Terbaru. Pada postingan saya sebelumnya saya menampilkan 10 situs edit online yang bisa sobat pergunakan. Sobat bisa lihat di postingan saya sebelumnya di cara edit foto secara online. Kali ini ada 5 situs tambahan yang bisa sobat pergunakan untuk keperluan edit foto secara online, apa saja situs-situsnya ?

1. Festisite.com
Anda bermimpi mengenai wajah anda tampil dalam lembaran uang kertas suatu negara? Anda dapat mewujudkannya disini. Dengan situs ini anda dapat membaut foto anda muncul di mata uang berbagai negara. Tentu saja ini palsu dan hanya untuk bersenang-senang saja. Ada banyak mata uang yang dapat dipilih, tergantung mana yang anda sukai. Tentu saja ini dapat menjadi lelucon yang baik bagi anda. Untuk melakukannya, anda dapat mengunjungi situs itu di alamat
www.festisite.com/money

2. Pixenate.com
Situs edit foto online ini cukup disukai banyak orang. Ada banyak fitur yang tersedia dalam situs ini, mulai dari sepia, red eye, resizing, cropping atau zooming. Selain itu ada banyak efek yang menarik untuk membuat tampilan foto anda lebih menawan. Anda bisa berkunjung ke situs ini dan mencoba mengutak-atik foto anda lewat berbagai macam fitur yang ada di dalamnya. Untuk hal ini anda dapat berkunjung ke alamat www.pixenate.com

3. Loonapix.com
Situs edit foto online ini sangat menarik. Ada banyak sekali fitur yang ditawarkan untuk menyulap foto anda menjadi lebih menarik. Foto anda dapat dijadikan seolah sedang dipajang di gedung besar, ditampilkan di kap mobil atau layar kapal. Tampilan latar belakang yang beragam ini sangat menarik dan membuat kita tak henti mengutak-atik. Ada juga beberapa pilihan frame foto yang cantik. Semuanya akan membuat kita berkata, “Wow!”. Kunjungi saja www.loonapix.com

4. Photofunia.com
Situs ini bisa dibilang cukup lengkap diantara yang lain. Ada banyak sekali fitur yang disediakan. Mengolah foto di situs edit foto online ini sangat menyenangkan, banyak fitur yang dapat anda eksplorasi dan gaya yang bisa diaplikasikan pada foto anda. Anda bisa tampil sebagai prajurit ataupun cover majalah. Intinya adalah anda bisa sangat bersenang-senang di situs edit foto online ini.

5. Funphotobox.com
Situs edit ini lebih mirip dengan loonapix dan photofunia, namun tentu saja tidak sama. Memang ada beberapa kemiripan dalam hal efek dan latar belakang. Namun tentu saja ada yang tidak sama di beberapa sisi. Semua menghasilkan foto yang unik dan menarik.

Demikian sob beberapa situs edit foto online yang bisa sobat gunakan secara gratis.
Semoga Bermanfaat.

Cara Merubah Krusor Blog

✔ Jaringan Share Comment

Tips blog kali ini adalah bagaimana cara merubah krusor di blog. Tips ini berguna buat sobat blogger yang bosan melihat tampilan krusor blognya yang itu-itu saja, yaitu berbentuk panah. Sobat bisa merubah krusor  blog nya menggunakan icon-icon yang sangat menarik, sehinga dapat mempercantik penampilan blog sobat.

Cara Merubah Krusor Blog :

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya
<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>
Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin sobat gunakan.

4. Setelah itu, simpan template anda. Selesai

Note : Untuk mengganti icon nya sobat pergi saja ke situs www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa sobat pilih sesuai selera.

Okey, cukup sekian sob tips blog kali ini Cara Merubah Krusor Blog.
Semoga Bermanfaat

Cara Mengetahui Blog Dofollow

✔ Jaringan Share Comment
Tips blog - U Comment I Follow. Sobat pasti sering mendengar dan melihat slogan tersebut ketika melakukan blogwalking, entah itu ditulisan atau di banner. Ini adalah slogan yang digunakan pemilik blog untuk memberitahukan bahwa blog nya bersistem dofollow.Tapi terkadang walaupun sudah dipasang banner bertuliskan u comment i follow, belum tentu juga blog tersebut dofollow. Untuk itu kita perlu mencari tahu apakah benar blog tersebut dofollow. Lalu bagaimana Cara Mengetahui Blog Dofollow ?

Pengertian Dofollow
Dofollow artinya : Link yang di masukkan pada saat berkomentar pada postingan suatu blog, akan ditelusuri lebih lanjut oleh search engine, dalam artian mendapatkan backlink dari blog yang dikomentari tersebut.

Cara Melihat Blog Dofollow:

 1. Instal terlebih hahulu Add-Ons Mozilla disini : Dofollow

2. Restar Browser Mozilla

3. Buka lagi Browser Mozilla, Kunjungi Google, Cari Blog apa saja, Kunjungi Blog tersebut

4. Setelah berada pada halaman home silahkan sahabat klick kanan pada mouse dan pilih "NoDoFollow"


5. Sekarang saatnya melihat apakah Blog yang sobat kunjungi merupakan Blog Dofollow atau bukan?! Lihat warna yang ditampilkan pada setiap link yang ada didalam Blog tersebut, Kalau berwarna Merah berarti Nofollow dan yang berwarna agak biru berarti Dofollow.


Nah sekarang sobat bisa membedakan antara Blog Dofollow dan Blog Nofollow. Sekarang bagaimana cara mengetahui apakah link yang kita masukan melalui kotak komentar Dofollow apa bukan? caranya sama sobat tinggal berkomentar pada blog tersebut dengan menggunakan Name/Url, setelah itu sobat lihat Nofollow nya, kemudian lihat warna biru atau merah.

Nah itulah Cara Mengetahui Blog Dofollow Dan Nofollow Dengan Add-Ons Mozilla.
Semoga bermanfaat.

Image from : www.sundaboy.com

Thursday, November 29, 2012

Cara Membuat Mega Dropdown Menu

✔ Jaringan Share Comment

Sobat blogger bosan dengan tampilan menu yang biasa - biasa saja ? coba pakai menu yang ini saja. Tips blog kali ini, saya ingin berbagi Cara Membuat Mega Dropdown Menu di blog. Menu ini menampilkan banyak sub menu sesuai dengan namanya Mega dropdown, desainya juga keren, sama dengan website-website profesional, dan tidak membuat loading blog berat. Untuk lebih jelasnya silahkan sobat lihat Live Demonya : Mega Dropdown Menu

Bagaimana sob ? Keren bukan ?..Untuk cara membuatnya juga tidak terlalu rumit, ikuti langkah-lngkah berikut ini :

1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin>
 
body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

 /* Rounded Corners */

 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color and gradients */

 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 /* Borders */

 border: 1px solid #002232;

 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;

 /* Background color and gradients */

 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

 /* Rounded corners */

 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeDROWpIQtKUKtepG1USJEp8TeiAsm7ccfMhMV2Vo5phl9lPsFuvlDvxKeYfbvuhb9mbpxMJFE-J41pNqhoWcJ6TjPw_t99kjg5MITF541ulaM0rQ_lN4BXqhFKcRC-3CmqS9TXGV1D9la/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeDROWpIQtKUKtepG1USJEp8TeiAsm7ccfMhMV2Vo5phl9lPsFuvlDvxKeYfbvuhb9mbpxMJFE-J41pNqhoWcJ6TjPw_t99kjg5MITF541ulaM0rQ_lN4BXqhFKcRC-3CmqS9TXGV1D9la/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}

Simpan.

4. Kembali ke menu Tata Letak > Add Gadget > Pilih HTML/JavaScript > Copy kode di bawah ini.

<div id='menu'>
<li><a class='drop' href='#'>Home</a><!-- Begin Home Item -->
<div class='dropdown_2columns'><!-- Begin 2 columns container -->
<div class='col_2'>
<h2>Welcome !</h2>
</div>
<div class='col_2'>
<p>Ini adalah menu denan Mega Drop Down menu. Cara membuatnya hanya menggunakan CSS tanpa JavaScript</p>            
</div>
<div class='col_2'>
<h2>Cross Browser Support</h2>
</div>
<div class='col_1'>
<img alt='' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9zLbHVlzjRSUBo_BiK5Qt_kzmZplUmg-jlQ5LLw8l4hATNpw7eA17nUvIAKcqtBY6iL2nsVePv80QKabKIyOBxeTXKxuWO8btuNHYfSgayMsHzKrfkwEmd7E7lLudjmo3ow8qmR78B0E/s1600/browsers.png' width='125'/>
</div>
<div class='col_1'>
<p>Mega Drop Down Menu ini telah diuji dan berhasil untuk semua browser.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a class='drop' href='#'>5 Columns</a><!-- Begin 5 columns Item -->
<div class='dropdown_5columns'><!-- Begin 5 columns container -->
<div class='col_5'>
<h2>Ini adalah contoh untuk kolom 5</h2>
</div>
<div class='col_1'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='italic'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='strong'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_5'>
<h2>Fitur Post Dengan Images</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhp0bKDX03eFFXepivlZHf67q5LNdR4o-55GWDgMRqmw-1EpI2acl9DwoMrKrE-09ae12g0elSwR32lPgqTAnWIi1verK0i0t6Xpzc0lVn3YylQ9uhtqLhA9ud0Tpq8By57Pqvx9mdViTX/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwAtVX3rnFJYEobA09rtIWAAYsap5wzlAQBkBoE3GtPBgaMAO3vWw2gZ_u6k10defhkyf1kU-DV_T2mcANiYD05BAg9-fczeomFEYirIxS9bj9MbeszpOAWp8aIaiAHKzNUB18WkRmZmVs/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
<div class='col_2'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a class='drop' href='#'>4 Columns</a><!-- Begin 4 columns Item -->
<div class='dropdown_4columns'><!-- Begin 4 columns container -->
<div class='col_4'>
<h2>This is a heading title</h2>
</div>
<div class='col_1'>
<h3>Some Links</h3>
<ul>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>  
</div>
<div class='col_1'>
<h3>Useful Links</h3>
<ul>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
</ul>  
</div>
<div class='col_1'>
<h3>Other Stuff</h3>
<ul>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>  
</div>
<div class='col_1'>
<h3>Misc</h3>
<ul>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>  
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li class='menu_right'><a class='drop' href='#'>1 Column</a>
<div class='dropdown_1column align_right'>
<div class='col_1'>
<ul class='simple'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='http://kimzaqi.blogspot.com/'>Get This Menu</a></li>
</ul>  
</div>
</div>
</li>
<li class='menu_right'><a class='drop' href='#'>3 columns</a><!-- Begin 3 columns Item -->
<div class='dropdown_3columns align_right'><!-- Begin 3 columns container -->
<div class='col_3'>
<h2>Lists in Boxes</h2>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>  
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>  
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>  
</div>
<div class='col_3'>
<h2>Here are some image examples</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwAtVX3rnFJYEobA09rtIWAAYsap5wzlAQBkBoE3GtPBgaMAO3vWw2gZ_u6k10defhkyf1kU-DV_T2mcANiYD05BAg9-fczeomFEYirIxS9bj9MbeszpOAWp8aIaiAHKzNUB18WkRmZmVs/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhp0bKDX03eFFXepivlZHf67q5LNdR4o-55GWDgMRqmw-1EpI2acl9DwoMrKrE-09ae12g0elSwR32lPgqTAnWIi1verK0i0t6Xpzc0lVn3YylQ9uhtqLhA9ud0Tpq8By57Pqvx9mdViTX/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>


Selamat sobat sudah mempunyai  Mega Dropdown Menu yang keren.

Cukup sekian tips blog kali ini, Cara Membuat Mega Dropdown Menu. Semoga Bermanfaat.

Script by : blazerracing.blogspot.com

Cara Membuat Receant Post Image Dengan Efek Marquee

✔ Jaringan Share Comment
Tips blog kali ini berguna sobat blogger yang ingin mempercantik tampilan receant post. Tampilan recent post ini lebih mantab, apalagi setiap artikel atau posting yang ada di blog sobat disertai dengan gambar. Selain itu kita bisa menampilkan seluruh artikel atau posting, dari yang masih baru hingga yang sudah lama sekalipun. Lebih cocok lagi bila sobat blogger memiliki  blog yang bergerak dibidang desain inetrior - eksterior, atau gambar dan foto contoh suatu produk, atau apa sajalah sesuai kebutuhan anda, Intinya recent post ini dilengkapi dengan fitur image.



Cara membuat receant post image dengan efek marquee :

Cara nya sangat mudah sob, tinggal copas Kode dibawah ini dan masukkan ke Add Gadget HTML blog :

<div style="float: left;text-align: center;height:253px;padding:5px 5px 0px 5px;background-color: #E7E6E9;border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;color:#ffffff; ">
<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%"  height="214px" border="1">

<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
boxwidth = 250;
cellspacing = 10;
borderColor = "#fff";
bgTD = "#ccc";
thumbwidth =200;
thumbheight = 150;
fntsize = 11;
acolor = "#ffffff";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#ffffff";
icon2 = " ";
numposts = 100;
home_page = "GANTI DENGAN ULR BLOG ANDA";
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx=s.join("");}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('<table width="250px' +boxwidth+'" border=0 bordercolor="#cccccc" align="left" cellspacing="10px'+cellspacing+'5px" bgcolor="#ffffff'+borderColor+'">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='yes')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<td><div style="float: left;width:200px;margin-bottom:5px;padding:0px 0px 0px 0px;background-color: rgb(204, 204, 204);border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;"><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></div><br /><div style="float: left;text-align: center;width:190px;height:45px; padding:5px 5px 0px 5px;background-color: #E7E6E9;border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;color:#ffffff; "><style="font-size: 10px; text-decoration:none; color: #ffffff;><a href="'+posturl+'">'+posttitle+'</a></div>';if(summaryPost==0){trtd='<td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td>';}document.write(trtd);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write('<a href="http://www.carabuatwebgratis.com/" target="_blank">  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZTgJfcDG9fSV3XWiKkCMxUrcIAhwXnV6Sbo2Ghwfn_gvjTZB9M6ooDz7QrRi6XdV23WgoeaPdlzhG4EjTS8zbIAMH_LdM_yzHmha0GeTMpBubR68hsu1PbajQYP3ivzJItD5oezpkxYAr/s104/Tukar+Link.jpg"/></a>');//]]></script></marquee></div>

Catatan :

    numposts = 100; (Jumlah recent post yang akan ditampilkan)
    home_page = "GANTI DENGAN ULR BLOG ANDA";

6. Simpan

Selamat,,sobat sudah mempunyai receant post image yang super keren.

Terima kasih telah membaca artikel Cara Membuat Receant Post Image Dengan Efek Marquee.
Semoga bermanfaat.

Source : www.carabuatwebgratis.com

Cara Membuat Kotak Banner Iklan 125 x 125

✔ Jaringan Share Comment
Tips blog kali ini adalah cara membuat kotak banner iklan 125 x 125. Cara ini berguna buat sobat blogger yang ingin membuat kotak iklan sendiri di blog. Untuk memasang iklan di blog pastinya tidak boleh sembarangan asal memasang nya, karena selain bisa mempengaruhi loading blog, juga bisa membuat pengunjung blog sobat risih melihat susunan iklan yang tidak teratur. Dengan menggunakan tips ini, iklan sobat akan lebih tertata rapi, walaupun ukuranya hanya 125 x 125.
Demonya seperti gambar di bawah ini :

Cara membuat nya Kotak Banner Iklan 125 x 125 :

Masuk ke blogger > Rancangan > add gadget > HTML/Javascript, kemudian masukkan kode di bawah ini;

    <div align="center">
    <table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
    <tbody><tr>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>
    </tr>
    <tr>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>
    </tr>

    </tbody></table>

    <table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
    <tbody>
          <tr>
           <td><center><a href="URL/Alamat Blog" rel="nofollow"><img width="265" height="37" border="0" alt="Pasang Iklan Di Sini" src="URL/Alamat Gambar advertise here" /></a></center></td>
          </tr>

        </tbody></table>

    </div>

Pengaturan Kotak Banner Iklan:

1.  Ganti kata URL/Alamat IKLAN dengan alamat website pemasang iklan

2.  Ganti kata URL/Alamat Gambar Iklan dengan link atau alamat gambar iklan di hosting

3.  Ganti kata Deskripsi Iklan dengan informasi dan deskripsi mengenai iklan yang dipasang, deskripsi ini akan muncul pada saat kursor mouse digerakkan ke arah banner iklan.

4.  Ukuran default sidebar adalah 265, jadi pastikan ukuran sidebar blog sobat tidak kurang dari itu.

Jika sobat ingin menambah kotak iklan lagi dibawahnya misalnya menjadi 6 kotak tinggal masukkan kode di bawah ini, di bawahnya kode yang berwarna biru.

    <tr>
    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>
    </tr>

Sampai disini sobat sudah mempunyai banner iklan 125 x 125. Cukup sekian tips blog kali ini  Cara Membuat Kotak Banner Iklan 125 x 125, Semoga bermanfaat.

Monday, November 26, 2012

Cara Memasang TV Online Di Blog

✔ Jaringan Share Comment
Sobat blogger mau memasang TV Online Di blog ?. Nah postingan kali ini saya ingin berbagi buat sobat blogger bagaimana caranya memasang TV Online di blog. Dibawah ini ada dua situs yang bisa sobat pergunakan, tapi yang satu gak bisa kalau di taruk di blog, kita cuma bisa nonton Lewat situs nya saja, tapi hebatnya kita bisa nonton TV luar negeri nih, seperti BBC,ESPN,CNN dll. Oh iya kalau kita pasang TV Online di Blog kan loading nya agak berat tuh, jadi jangan ditaruk di home page ya TV Online nya, supaya loading blog sobat tidak berat. Okey langsung saja cek kedua situs nya dibawah ini :

1. Cara Memasang TV Online Di Blog Melalui Mivo.tv


Sobat pasti sudah sering denger kan tentang mivo.tv. Ini adalah situs terbaik untuk menonton TV Online di Indonesia ( menurut saya ). Load untuk buffering nya tidak terlalu lama, dan program TV nya juga lumayan banyak. Untuk memasang nya di blog, silahkan sobat copy kode HTML dibawah ini, dan paste di add gadget HTML blog sobat :


 <embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="820" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>


Note : Untuk lebar dan tingginya silahkan sobat atur sendiri.

2. Cara Menonton TV Online Melalui www.atdhenet.tv


Khusus buat nonton TV luar negeri. Kalau situs yang ini sob gak bisa kita taruk di blog, jadi sobat harus pergi kesitus nya langsung buat nonton TV Online nya. Tapi apa hebat nya situs ini ? Pertama : situsnya ringan dan sederhana banget, cuma nampilin link aja. Kedua : kita bisa nonton TV Luar negeri seperti CNN,ESPN,BBC dll. Langsung saja sobat pergi ke www.atdhenet.tv.

Okey sob, itulah dua Cara Memasang TV Online Di Blog + menonton TV luar negeri.
Semoga bermanfaat
 

Sunday, November 25, 2012

Cara Membuat Iklan Melayang atau Pop Up Di Tengah Blog

✔ Jaringan Share Comment

Tips blog kali ini saya ingin berbagi bagaimana caranya menampilkan iklan pop up atau melayang ditengah-tengah blog. Tidak hanya iklan, bahkan foto,video dsb bisa sobat masukan di widget ini. Posisi dari widget pop-up ini tepat ditengah tampilan layar blog sobat, kalau pun tidak pas ditengah, dapat disesuaikan letak posisinya. Widget pop-up ini berguna jika sobat ingin memasang teks/pesan penting, iklan, gambar, atau widget fans facebook.

Cara Membuat Iklan Melayang atau Pop Up Di Tengah Blog ini juga sangat mudah, sobat tinggal masukkan kode HTML dibawah ini :

<style type="text/css">
#topbar{
position:absolute;
padding-left:30%;padding-top:5%;
background-color: transparancy;
width: auto;heigth:auto;
visibility: hidden;
z-index: 100;
}
</style> <script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar

</script>
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5x16mxEO8RJdZfbf7LcH2i0xvNUqkGI3fgjYvbdqSET17Uzu-YCwYzu_cQPNmjE496SfeylMVocAhmutrf6eBbfzoLyHWownGu2g-T9gott85rDnQK_TaAPBoholiR8tCW4yhyphenhypheneKFc5F/s1600/close3.png" alt="close"/></a></div>
<center><div style="background: #fff;">

*** MASUKAN HTML WIDGET/IKLAN/GAMBAR/DSB DISINI***

</div></center></div>

Untuk keperluan lebar dsb silahkan sobat sesuaikan sendiri ya.
Okey, cukup sekian tips blog cara membuat iklan melayang atau pop up di tengah blog.
Semoga bermanfaat.

Friday, November 23, 2012

Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot

✔ Jaringan Share Comment
Tips blog kali ini masih soal utak-atik image di blogspot. Kalau sebelumnya saya post cara membuat gallery foto di blogspot, sekarang adalah cara membuat efek thumbnail hover preview image di blogspot. Sebutan nya agak ribet ya, intinya image yang menggunakan efek hover ini akan membesar ketika mouse kita sentuhkan ke image tersebut. Untuk lebih jelas nya lihat live previewnya disini : LIVE DEMO HOVER PREVIEW IMAGE

Bagaimana sob, tertarik ingin buat image seperti itu ? . Caranya sangat mudah sobat tingal masukan kode berikut ini kedalam add gadget HTML :

<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class="prevthumbhover">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjje8dFot8x2q_eH8_JomPUwLbot-BYCAIhSPh0qhg4vZeUPUxxFgs0o-F0US1z6JURwoDPra9AateypnIj9UuMpQpE9QQ7fmAgEkkn_O5PxfoztxTb-N5Bs8iI51oUNmM7iZfBE4B748QB/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjje8dFot8x2q_eH8_JomPUwLbot-BYCAIhSPh0qhg4vZeUPUxxFgs0o-F0US1z6JURwoDPra9AateypnIj9UuMpQpE9QQ7fmAgEkkn_O5PxfoztxTb-N5Bs8iI51oUNmM7iZfBE4B748QB/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvSxdwDJ-DyyE2i5E896gAWHXAGFx8eV4VLJE-M_HrLtalJ58Mc7vnaqN_t5HQ6fnBYVRd84QGoEpaH9ZkbtOtbvXlTvWCD0st_szeD21FbGourbOXIJfD-kPNws1JAliwxvWF9gSTLJqh/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvSxdwDJ-DyyE2i5E896gAWHXAGFx8eV4VLJE-M_HrLtalJ58Mc7vnaqN_t5HQ6fnBYVRd84QGoEpaH9ZkbtOtbvXlTvWCD0st_szeD21FbGourbOXIJfD-kPNws1JAliwxvWF9gSTLJqh/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Jqaz0mPMrHYcTIw_nsLJgWnohyphenhyphensf9_YuCwElYEQ7IYqLr9mHYq9FQo20anq2Us18PW4MtvFWoD68G7zQ2qsHYI8fHx6DQHODDJ8x0HjC9tKhzwi3nrMxHJ4Q_j97jrtOTXDDWZvcBfcW/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Jqaz0mPMrHYcTIw_nsLJgWnohyphenhyphensf9_YuCwElYEQ7IYqLr9mHYq9FQo20anq2Us18PW4MtvFWoD68G7zQ2qsHYI8fHx6DQHODDJ8x0HjC9tKhzwi3nrMxHJ4Q_j97jrtOTXDDWZvcBfcW/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>

Note :
Yang diberi stabilo warna merah adalah link gambar. Sobat bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri ya sesuai kebutuhan.

Cukup sekian tips blog kali ini Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot.


Selamat mencoba.

Cara Membuat Gallery Foto di Blogspot

✔ Jaringan Share Comment
Tips blog kali ini yang ingin saya share adalah cara membuat gallery foto di blog  blogspot. Cara membuat gallery foto di blogspot tentu sangat berbeda dengan membuat galllery foto di wordpress, kalau di wordpress sobat tinggal upload lewat plugin yang telah disediakan, tapi di blogspot sobat harus menggunakan script yang di edit lewat halaman postingan.Gallery foto ini berguna buat sobat yang ingin menampilkan foto-foto dalam postingan dengan bentuk sejajar. Seperti apa ilustrasi bentuknya ? Lihat contoh hasilnya dibawah ini :



 Cara membuat gallery foto :
  
    1. Upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
    dapatkan url foto yang telah diupload
    2. Bikin postingan dalam mode HTML (bukan Compose)
    3. Masukkan kode di bawah ini pada postingan
    4. Publish dan lihat hasilnya


<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Seribu Wajah Gayus</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-bnDOBGC0d4tkIlqzJBdvl18mHWO3NmjhFkwsTvRH7QnMOrsMzxVUcuhNcRfg_gdFTOlhXotKcoxRYrmjcEuWeSD_owJQoOodwUvriPRaY55L_HRSn6R8FozU3e8QSNMKoEKqrAFcwQ/s320/atronout.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMU0q0Uy7KDAKE8Y3-MKMj4llR_08Mx1QxQVsFcZViRUkUWeoBgdFAZcrz8Lxy-VwWezfoJ_BYXo-dMgrTip2RiqPfzMr4VGVG2OGwy43pIbBboUWXk1KZO3YfeH8-1rDZrWd-42Qke18/s320/bieeen.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq2W03szeY9Sp8pR6SW3qF9xv2uEaSfYgnUkb6FXl1S1Up2BDRctbcLycKa0i-ZfDdd2439_NSPHtik489Gz0q_aRcPT2iTfF3-vHeUSFwUpA1yqzW55xXGZ5NQZDq7uqNYhTNVt-xgCk/s320/blankon.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCRuGZijbhPcEEG8kmYsDz5U35ceAq_789z36Uo3FEuXaihvI6Hd7SIvvwwsTJQ-b2zVq_YVXitXgj7U_xKXZBaBuukSeHEuPfpdEYVUjTR7B8x0rKV3ytA77NiBVOGCbFPLNckwjfEkk/s320/boxing.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkz6dYMA4Aq0eM5J8yMRK9OhEijfQ8g6-sJlMToMZmayVfEYB1YYX6fONFSAc2csnWmSfsS0xrlsnlc3UBEMai306PChwq47_OQb-BM0HXH3_V1_cj-alEaB-fsxbqB4HQcZkaXNYkdrY/s320/duits.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAb-gApYK4KaoMFhEsqiDpv0ad5YwdcRBvpn-ibHocXmtFiBNUATCG6XwdB_qPebANfUQKLnxnr9DSoyPuuyqdL2wqfIFy4ynv6-bDkpueA8Ss_AlMVOZri73UkJtQF3CqLNalKX3GKg/s320/goyang.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCDh2CuvWtZfQj_5KAJNdzQ3utVC4NfHxLAxOhtjX7gQe4SeFXCyotbrhpFurnlklFuCovhYsF0ytVuQt9o63xBS8BxwiHJEopV8A2CDgsMXReyQdjXPCohxEfq4yGMoDo5f5LnKQgp6Y/s320/hormat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjulhH4VzmXp5tWOc_iIKO5APV-enJuPJ-zLiwcaQ28AGDdiHW4fIQzPiB2uY0VoKfzMANuJ0bMWv_ZqcPTT5DshQDcWEpr-Hy16tbX_rtayeT1pQqaFgtSQrMm-39vUwt24xpVduY7bU/s320/jendr.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNzm4ks9wBtUwNsCUUzowAtzPgUblUlonWRgpRC3O-E32r8gE8jIbrNzhWugLWBMN_2vIiGPmjm0uXZddezt8txaTMFVeo9DQTGI1XE7tVE8zgUYsKmWTfUaueETwoGCCdRRY4Zm9X49g/s320/koran.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ0Ex50TJHyp-03SXTmGEW0OJx0SUBlcjyi2WNLeE8c0B0tWkop-3tM91wbClGNAggv1FbGQf9F15ckjwOohXOZiddskPlwcwWQdIDNzVRr-bB1Umkii4tYJ6o9Nq1xsGRN_orlXVmIbQ/s320/samar.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUvf8JDL_LERcOqQGDXrNRoN_yZsMusAfktMcdqiOqC8EjM7pwWyku6DjMf-Ano1N45S8ARTbTn-kLTpBJuRQt0PnSBGRErbLLSmE52EbzvRg-NmKTOyxNgUvpNhOCtILGGGBnmxJTgg/s320/seribu.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZAZHah_jBYLGLIQvfTP9UZPsKUnPyaT6Z8_FTmPh3rXKCPlV_NZgvo9yJwi2CB0BDLmMQqHS4wG80KldLUbuCmw_lEpUtg4Hb4T1dBAlvUGtSlNaTQyjXQLrHXvveHT6N5FgZjCZEFk/s320/silat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmDctUb0FFoCVeSnxjD8LX9s5EOxNX-_OraaqAUvzgDHWQ3Adhoxv76XTF4L_OOBjexIRBrLF2WaQzMzVNIDxZUMZc4dXC779BWPPnH7YrHavy7RxTLGlyE2PYXvys34quH9Wkc5HQ8EQ/s320/wig1.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWL4upLho0bTBJxSpWHM7IVN-MKopeiAFb6fPdTOfIMMv5pQDslGLpuhbS_3w4y8XM1zrcNL84AoGxDHLDn5qg8mJl3BkhMlFqd0dyhoQWqRDGTb4q9fMQjQEHKYcWKO2bGTFnYZ8jFA/s320/tenis.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuqBgRDg9JWyYEwRohcXRJ-atC-GPJ2GUxz7CovdRTSaMUK61iZUWT3mC4Os8OnQnPgExdseuL8B4YuVdim8odos1An45wmm-vMhHXPXgs7hFmcXCp7O3x79PvBsOQ9jO-9vOJVw9Q89I/s320/santai.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx42o-8p-AULnAqKzEAYJyUOiEX6BUdNKeXjziXDnLQDvjXFhycQVoC70GZ2DJ7pAKKExt5yNMCJKbpZttt3_8KqDNAljvDkbPeGykdadDrUpaaDhKIXOJaXNNXyL89DlEqa8QtPxnAHU/s320/kacamata.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>

Catatan Penting :
  1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
  2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
  3. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
  4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
  5. Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
Okey, cukup sekian tips blog kali ini cara membuat gallery foto di blogspot.
Semoga Bermanfaat.

Thursday, November 22, 2012

✔ Jaringan Share Comment
SELAMAT DATANG DI SITUS BLAWONG BLACK

Tuesday, November 20, 2012

Cara Membuat Nivo Slider Di Blog

✔ Jaringan Share Comment

Tips blog kali ini adalah cara membuat nivo slider di blog. Nivo slider adalah salah satu slider terbaik yang tersedia di web, banyak para blogger yang menggunakan nivo slider ini. Buat sobat blogger yang ingin menambahkan nivo slider kedalam blog nya, jangan ragu lagi untuk mengunakan nivo slider yang satu ini. Nivo slider yang satu ini selain cara membuat nya sangat mudah,sobat tingggal add gadget HTML saja, penampilan nya juga sangat keren. Coba saja lihat demo nya dibawah ini.


Bagaimana ? keren gak sob ? Kalau sobat tertarik untuk memasang nya di blog, tinggal masukan kode di bawah ini ke add gadget HTML :

<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }

 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }

 .nivoSlider a {
  border:0;
  display:block;
 }

 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }

 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }

 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }

 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }

 .nivo-caption a {
  display:inline !important;
  }

 .nivo-html-caption {
  display:none;
 }

 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4U9FrD4oqUlyCP8KmYmdKfxT9J1nO4AZ7Xy4WwCRpjQObuf4gQvQUo4v9ImUzF6gV6VR0lNdoZUADh64MLhkb1I9ZhuOEqiL-1yDH4697vg0brwXb9GeRVtskp8Maj1FFkmU_4ko4okU/s1600/helperblogger.com-arrows.png);
  background-repeat:no-repeat;
}

 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }

 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }

</style>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>

<div id="slider" class="nivoSlider">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlszfGVXXHvrTXekpzBnSHuk90mLqQI76ug6gb-SJ5KN6ZM_q0ytJ-8igbM3s9FfR7uBLKhHBcLZkJ4uFk38AhTtSdzdeYFk-1LmLPVF7rzSjFpKKru3dkJ9rUhyphenhyphenz2upyRq8AyJyfXu54/s1600/helperblogger.com-5.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwlsiOzUiQDxBa8_F_28hORQaE_C3-J3wSIFJHgMwNQS0YzxiBWVi0N2yi6KgaDBSNdg2EXfV4TaQAj036YF08iE3jWfDB3YxdTALSv-Y7tKf_IkvIrSY85HXOI5VyxvpYuKhYu8mR3U/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNbAP8glHxk5h0tZG3X3eBx5eFILXJLO9imJ5vspPpqFmDxP6Kvzn_-PBbvm58ejCofb26y6cfC7utUObmxZCNw5KNHVU8hdc-WqFEGMBcOg1zOfBMs7Ihlj4xDF08sUKpBfq9ovQI2pw/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0O_pwGUkx1NyQ5PhjLiDlVIbZ6xEkFmoczAm8ArEwuACWxc1YZs01QPMWXbXkZweSdPfXgmCS30z6XwW-Orevwli_e0dM-s06PO4BuwlgRZwCTxb7Q8nlD6eMj1mhwAXN8gmxzyhKXQ/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Sna3oZeLROwxGsNNaAoWrg6gwXTZp1OqrDu7rSDNnruD67qUqj2UlHGyBSwE_uMmOE9qyPkE3VFRHHg5w0F5SXgBmVhFgizwpcjhyiS4DY7LIlktSZhflVNYw_ILHNV6OW67fW-oB8U/s1600/helperblogger.com-1.png"
    alt="Slider Image 2" title="And Other Things">
</div>


Save dan lihat hasilnya.
Note : Bagian yang saya kasih warna silahkan sobat edit sesuai kebutuhan sobat.

Mudah kan sob Cara Membuat Nivo Slider Di Blog ini ?
Cukup sekian tips blog kali ini..Semoga Bermanfaat..

Tips Blog Cara Edit Label Blog Dengan CSS3

✔ Jaringan Share Comment
Sobat blogger mau merubah penampilan label blog menjadi lebih keren ? Nah, tips blog kali ini yang ingin saya share adalah Cara Edit Label Blog Dengan CSS3. Kalo sobat blogger memakai tips blog ini, saya jamin penampilan label blog sobat akan terlihat keren. Untuk melihat preview lihat gambar dibawah ini :

Cara membuat Label Blog Dengan CSS3 :
1. Masukkan kode berikut diatas ]]></b:skin>
 
.label-size {

    float: left;

    margin: 0 0 7px 20px;

    position: relative;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 0.75em;

    font-weight: bold;

    text-decoration: none;

    color: #996633;

    text-shadow: 0px 1px 0px rgba(255,255,255,.4);

    padding: 0.417em 0.417em 0.417em 0.917em;

    border-top: 1px solid #d99d38;

    border-right: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0.25em 0.25em 0;

    -moz-border-radius: 0 0.25em 0.25em 0;

    border-radius: 0 0.25em 0.25em 0;

    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

    -webkit-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    -moz-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    z-index: 1;

}


.label-size:before {

    content: '';

    width: 1.30em;

    height: 1.39em;

    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');

    position: absolute;

    left: -0.69em;

    top: .2em;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    border-left: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0 0 0.25em;

    -moz-border-radius: 0 0 0 0.25em;

    border-radius: 0 0 0 0.25em;

    z-index: 1;

}


.label-size:after {

    content: '';

    width: 0.5em;

    height: 0.5em;

    background: #fff;

    -webkit-border-radius: 4.167em;

    -moz-border-radius: 4.167em;

    border-radius: 4.167em;

    border: 1px solid #d99d38;

    -webkit-box-shadow: 0 1px 0 #faeaba;

    -moz-box-shadow: 0 1px 0 #faeaba;

    box-shadow: 0 1px 0 #faeaba;

    position: absolute;

    top: 0.667em;

    left: -0.083em;

    z-index: 9999;

}


#Label1 {

    height: 210px;

}


.label-size:hover {

    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color: #e1b160;

}


.label-size:hover:before {

    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color: #e1b160;

2. Save template dan lihat hasilnya.

Okey, cukup sekian tips blog kali ini cara edit label blog dengan CSS3.
Semoga bermanfaat

Cara Membuat Tombol Share Social Media CSS3

✔ Jaringan Share Comment
Selamat pagi sobat blogger,,seperti yang kita social media seperti facebook, twitter dll, adalah tempat yang paling bagus untuk kita melakukan kegiatan promosi. Bagi sobat blogger yang menekuni dunia blogging dan bisnis online rasanya tidak akan terlepas dari social media ini, karena selain penggunaanya yang mudah, social media ini bisa kita gunakan secara gratis. Jadi tunggu apalagi, segera promokan apapun bisnis sobat blogger melalui social media ini. Tips blog kali ini, yang akan saya share adalah cara membuat tombol share social media CSS3. Dengan adanya widget ini, sobat akan lebih mudah untuk melakukan kegiatan promo ke social media, selain widget ini super kereen, cara pembuatanya pun juga cukup mudah. Mau tau bagaimana cara membuatnya ?

Cara Membuat Tombol Share Social Media CSS3 :

1. Seperti biasa, login ke blogspot
2. Masuk ke bagian pengeditan HTML
3. Cari kode ]]></b:skin>
4. Letakan kode dibawah ini, diatas ]]></b:skin> 
  

.social{
    max-width:300px;
}
 
.social li{
    min-height:40px;
    clear:both;
    float:none;
    margin-bottom:10px;
}
 
.social a{
    color:#232323;
    position:relative;
    display:block;
    line-height:40px;
    padding-left:55px;
}
 
.social span{
    display:block;
    width:40px;
    height:40px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjId_7SxliJmglr6fahcQ20RLzcdFgPorsecC6l5nf1zADhFwpJD-GVcwa3sVH5p4vG8lS1wPWG-hxh49qFopPZiId9bpTYQcgJq-55SdoJ6kGbRKYAzpn2dn2vVwxawemuPHvWsodZ/s1600/social.png) no-repeat;
    position:Absolute;
    left:0;
    border-radius:32px;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
 
.social .facebook{
    background-color:#2d309a;
}
 
.social .twitter{
    background-color:#00FFFF;
    background-position:0 -40px;
}
 
.social .pinterest{
    background-color:#FF0000;
    background-position:0 -80px;
}
 
.social .email{
    background-color:#00FF00;
    background-position:0 -120px;
}
 
.social .rss{
    background-color:#ffba16;
    background-position:0 -160px;
}
.social a{
    /*--code trước--*/
    z-index:1;
    -moz-transition:color 0.4s ease;
    -webkit-transition:color 0.4s ease;
    -o-transition:color 0.4s ease;
    transition:color 0.4s ease;
}
 
.social span{
    /*--code trước--*/
    z-index:-1;
    opacity:0.8;
    -moz-transition:opacity 0.4s ease,width 0.4s ease;
    -webkit-transition:opacity 0.4s ease,width 0.4s ease;
    -o-transition:opacity 0.4s ease,width 0.4s ease;
    transition:opacity 0.4s ease,width 0.4s ease;
}
 
.social a:hover{
    color:white;
    text-shadow:0 1px 0 rgba(0,0,0,0.5);
}
 
.social a:hover span{
    width:300px;
    opacity:1;
}

5. Save Template.
6. Masukan kode berikut ke add gadget HTML


<ul class="social">

    <li><a href="#"><span class="facebook icon"></span>Join Us on Facebook</a>

    </li>
    <li><a href="#"><span class="twitter icon"></span>Follow Us on Twitter</a>

    </li>
    <li><a href="#"><span class="pinterest icon"></span>Join Us on Pinterest</a>

    </li>
    <li><a href="#"><span class="email icon"></span>Send Us Email</a>

    </li>
    <li><a href="#"><span class="rss icon"></span>Subscrible RSS Feed</a>

    </li>
</ul>

7. Save dan selesai.

Nah sekarang sobat sudah mempunyai Tombol Share Social Media CSS3 yang akan memudahkan sobat dalam melakukan promo ke social media.

Terima kasih telah membaca tips blog kali ini, cara membuat tombol share social media CSS3.
Semoga bermanfaat.

Sunday, November 18, 2012

Cara Membuat Iklan Melayang Disamping Kiri dan Kanan Blog

✔ Jaringan Share Comment

Buat sobat blogger yang lagi bingung mau naruh iklan di blog dibagian mana, mungkin ini bisa menjadi salah satu alternatifnya, tips blog kali ini adalah Cara Membuat Iklan Melayang Disamping Kiri dan Kanan Blog.

Cara membuat iklan melayang disamping kiri dan kanan blog ini juga sangat mudah, sobat tinggal masukkan sript dibawah ini pada add gadget HTML blog sobat :

<script type='text/javascript'>
 $(document).ready(function() {
 $('img#closed').click(function(){
 $('#btm_banner').hide(90);
 });
 });
 </script>

 <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
 </script><script type="text/javascript">
 if (window.jstiming) window.jstiming.load.tick('headEnd');
 </script>

 <!--start: floating ads-->
 <div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

 <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLd_Ok1tFW6JR7BGdG0ykpiT7q5ow0ZW7PIPTj_jSVE6jR1y7tAATtzM6N3Jr-DmvGbNTbWhvDDQivyH4Q7PdHWnahOgv3CmAh-GIehpNw9MPIWZ6Bvhi56xnH5HHVsss0v9mZp0nf7pe-/s1600/PhoXo2.png'/></center></a></div>
 <!--Mulai-->
Masukkan kode Iklan anda disini
<!--Akhir-->
 </div>
 <!--end: floating ads-->
 <!--start: floating ads-->
 <div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

 <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLd_Ok1tFW6JR7BGdG0ykpiT7q5ow0ZW7PIPTj_jSVE6jR1y7tAATtzM6N3Jr-DmvGbNTbWhvDDQivyH4Q7PdHWnahOgv3CmAh-GIehpNw9MPIWZ6Bvhi56xnH5HHVsss0v9mZp0nf7pe-/s1600/PhoXo2.png'/></center></a></div>

 <!--Mulai-->
Masukkan kode iklan anda disini
 <!--Akhir-->

 </div>
 <!--end: floating ads-->

Okey, cukup sekian sob tips blog Cara Membuat Iklan Melayang Disamping Kiri dan Kanan Blog.

Semoga bermanfaat.
Subscribe to: Posts (Atom)