Cara membuat widget populer post dengan sudut bundar menggunakan CSS3

Dalam tutorial kali ini saya akan menjelaskan ke anda bagaimana cara membuat widget populer post dengan sudut bundar menggunakan CSS3. Widget ini berfungsi dengan baik disetiap browser yang anda gunakan. Widget ini menggunakan CSS3 untuk memberikan efek sudut bundar pada setiap postingan populer blog anda. Silahkan ikuti langkah-langkahnya dibawah ini untuk menambahkannya di blog anda, berharap anda menyukainya...:)  
Demonya bisa anda lihat pada gambar diatas.. 

Bagaimana cara menambahkannya di blog?

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML

• Kemudian cari tag/kode ]]></b:skin> 
• Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin> 

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;} 

• Simpan template...
• Selanjutnya masuk lagi ke akun blogger anda
• Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post

• Sekarang konfigurasikan/setting entri populer anda seperti gambar di bawah ini:

 

Jangan centang pada cuplikan/snippet seperti gambar diatas, setingan jumlah postingan bisa anda atur sendiri

• Simpan gadget, selesai..

Semoga bermanfa'at...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 13.30

Bagaimana cara membuat gambar dengan efek berputar di blog

Dengan menambahkan beberapa efek style pada blog bisa membuat  para visitor blog anda akan lebih tertarik. Hari ini saya akan share dan mempublikasikan ke anda bagaimana cara membuat gambar dengan efek berputar di blog. Trik ini singkat dan simple, menambahkannya pun cukup mudah. Tinggal anda mengikuti langkah-langkahnya berikut di bawah ini.

LIVE DEMO dibawah (arahkan krusor anda ke gambar)

LANGKAH-LANGKAHNYA:

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML

• Kemudian cari tag/kode ]]></b:skin>  
• Setelah ketemu letakan kode berikut tepat diatas kode ]]></b:skin> 

.spinningeffect img {
 /* membuat efek gambar berputar by jalu-pangna.blogspot.com*/
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
.spinningeffect img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
} 

Angka yang di sorot warna kuning adalah kecepatan waktu yang di butuhkan (time taken) proses berputarnya gambar.
Angka yang di sorot warna biru adalah jumlah derajat berputarnya gambar, anda bisa menggantinya sesuai dengan selera anda.

Bagaimana cara menggunakannya pada gambar?

• Masuk ke akun blogger anda
• Kemudian pilih Post -> klik Entri Baru 
• Anda akan melihat kotak kosong, kemudian klik HTML pada postingan baru anda (bukan compose) pada sisi kiri atas.
• kopi dan pastekan kode berikut di dalamnya (kotak kosong) dimana anda ingin menampilkan gambar dengan efek berputar.  

<a class="spinningeffect" href="URL/Link Gambar" target="_blank">
<img src="URL/Link gambar" /></a> 

• Silahkan anda ganti URL/Link Gambar dengan URL/Link gambar anda.

HAPPY BLOGGING..!

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 15.02

Cara membuat badge baru pada postingan terbaru di blog

Hari ini kita akan belajar bagaimana cara membuat badge baru pada postingan terbaru di homepage blog. Fitur yang satu ini cukup indah dan menarik. Diantara Anda mungkin pernah melihat di blog-blog tetangga menggunakan pita baru pada postingan terbaru blog mereka. Dan pada kesempatan kali ini saya akan share ke anda bagaimana menambahkan badge (lencana) baru pada setiap postingan terbaru. Trik yang satu ini benar-benar bagus dan menakjubkan, berharap anda menyukainya dan menerapkannya di homepage blog anda. Jangan lupa backup terlebih dahulu template...

Langkah dan penerapannya di blog

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML

• Kemudian cari tag/kode ]]></b:skin>  
• Setelah ketemu letakan kode berikut tepat diatas kode ]]></b:skin> 

.wrapperwha12
{
margin: 50px auto;
width: auto;
height: auto;
background: transparent;
position: relative;
}
.ribbonwha123
{
font: bold 20px Sans-Serif;
text-align: center;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -25px;
top: 7px;
width: 160px;
background-image: linear-gradient(top, #129, #12f);
background-image: -o-linear-gradient(top, #129, #12f);
background-image: -ms-linear-gradient(top, #129, #12f);
background-image: -moz-linear-gradient(top, #129, #12f);
background-image: -webkit-linear-gradient(top, #129, #12f);
color: #fff;
-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbonwha-wrapper12
{
width: 86px;
height: 88px;
overflow: hidden;
position: absolute;
top: -4px;
right: -4px;
}

• Sekarang cari lagi kode <b:include data='post' name='post'/> dan ganti kode tersebut dengan kode berikut:  

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='wrapperwha12'>
<div class='ribbonwha-wrapper12'><div class='ribbonwha123'>NEW</div></div>
<div id='first-post'>
<b:include data='post' name='post'/>
</div></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>  

• Simpan template...selesai.

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 12.46